Lege staten met één actie Nieuw

<!-- Lege staten met één actie · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="les">
<div class="les__tabs" role="tablist" aria-label="Voorbeelden lege staat"><button type="button" role="tab" class="les__tab" aria-selected="true">Zoeken</button><button type="button" role="tab" class="les__tab" aria-selected="false" tabindex="-1">Winkelwagen</button><button type="button" role="tab" class="les__tab" aria-selected="false" tabindex="-1">Berichten</button></div>
<div class="les__panel" role="tabpanel" tabindex="0">
<div class="les__empty"><svg class="les__art" viewBox="0 0 96 72" aria-hidden="true"><rect x="10" y="12" width="52" height="40" rx="3" class="les__fill"/><path d="M18 22h28M18 30h20M18 38h24"/><circle cx="60" cy="42" r="13" class="les__paper"/><path d="M69.5 51.5L82 64"/><path d="M55 37l10 10M65 37L55 47" class="les__acc"/></svg>
<p class="les__h">Geen resultaten voor "dakkapel Ede"</p><p class="les__p">In Ede zelf is nu niemand vrij. In de rest van Gelderland wel.</p><button type="button" class="les__btn">Zoek in heel Gelderland</button></div>
<div class="les__full" hidden><p class="les__meta">8 vakmensen in Gelderland</p><ul class="les__rows"><li><b>Dakwerken Van Beek</b><span>Wageningen · 9,1</span></li><li><b>Kapelbouw Oost</b><span>Arnhem · 8,7</span></li><li><b>Timmerbedrijf Hendriks</b><span>Barneveld · 8,9</span></li></ul><button type="button" class="les__reset">Toon lege staat</button></div>
</div>
<div class="les__panel" role="tabpanel" tabindex="0" hidden>
<div class="les__empty"><svg class="les__art" viewBox="0 0 96 72" aria-hidden="true"><path d="M26 26h44l-4 34H30z" class="les__fill"/><path d="M38 26v-6a10 10 0 0 1 20 0v6"/><path d="M42 42h12" class="les__acc"/><path d="M14 64h68"/></svg>
<p class="les__h">Je winkelwagen is nog leeg</p><p class="les__p">Alles wat je toevoegt zie je hier, met de verzendkosten er al bij.</p><button type="button" class="les__btn">Bekijk de najaarscollectie</button></div>
<div class="les__full" hidden><p class="les__meta">1 artikel</p><ul class="les__rows"><li><b>Linnen kussenhoes · zand</b><span>€ 29,95</span></li><li class="les__sum"><b>Totaal incl. verzending</b><span>€ 34,90</span></li></ul><button type="button" class="les__reset">Toon lege staat</button></div>
</div>
<div class="les__panel" role="tabpanel" tabindex="0" hidden>
<div class="les__empty"><svg class="les__art" viewBox="0 0 96 72" aria-hidden="true"><path d="M14 14h44a4 4 0 0 1 4 4v22a4 4 0 0 1-4 4H32l-10 9v-9h-8a4 4 0 0 1-4-4V18a4 4 0 0 1 4-4z" class="les__fill"/><path d="M66 28h12a4 4 0 0 1 4 4v18a4 4 0 0 1-4 4h-4v8l-9-8H50a4 4 0 0 1-4-4v-2"/><path d="M22 26h28M22 33h18" class="les__acc"/></svg>
<p class="les__h">Nog geen berichten</p><p class="les__p">Stel je vraag over je afspraak, de salon antwoordt meestal binnen een uur.</p><button type="button" class="les__btn">Stuur een bericht</button></div>
<div class="les__full" hidden><p class="les__meta">Salon Mira · Utrecht</p><div class="les__bubble">Hoi! Kan mijn afspraak van do 16 okt een uur later?</div><p class="les__tick">Verzonden 14:02</p><button type="button" class="les__reset">Toon lege staat</button></div>
</div>
<span class="les__sr" aria-live="polite"></span>
</div>
</div>

/* Lege staten met één actie · NedDev · eigen werk. */
.les{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;box-sizing:border-box;text-align:left}
.les *,.les *::before,.les *::after{box-sizing:border-box}
.les__tabs{flex:none;display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid #e6e3df;overflow-x:auto;scrollbar-width:none}
.les__tab{font:500 12px/1 'Switzer',system-ui,sans-serif;color:#5c5a57;background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px 9px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.les__tab:hover{color:#0a0a0a}
.les__tab[aria-selected="true"]{color:#0a0a0a;font-weight:600;border-bottom-color:#F5480F}
.les__tab:focus-visible{outline:2px solid #F5480F;outline-offset:-2px;border-radius:3px}
.les__panel{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px 16px}
.les__panel[hidden]{display:none}
.les__panel:focus-visible{outline:2px solid #F5480F;outline-offset:-4px}
.les__empty{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:300px;margin:auto}
.les__empty[hidden],.les__full[hidden]{display:none}
.les__art{width:84px;height:63px;margin-bottom:6px;fill:none;stroke:#0a0a0a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.les__fill{fill:#f4f3f1}
.les__paper{fill:#fff}
.les__acc{stroke:#F5480F;stroke-width:2}
.les__h{margin:0 0 3px;font-size:15px;font-weight:600;line-height:1.3}
.les__p{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:#5c5a57}
.les__btn{font:600 13px/1 'Switzer',system-ui,sans-serif;padding:10px 14px;border-radius:4px;border:1px solid #0a0a0a;background:#0a0a0a;color:#fff;cursor:pointer;transition:background .15s}
.les__btn:hover{background:#2e2c2a}
.les__btn:focus-visible,.les__reset:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.les__btn:active{transform:translateY(1px)}
.les__full{width:100%;max-width:320px;margin:auto}
.les__meta{margin:0 0 6px;font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#5c5a57}
.les__rows{list-style:none;margin:0 0 8px;padding:0}
.les__rows li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #eeebe7;font-size:13px}
.les__rows b{font-weight:600}
.les__rows span{color:#3d3b38;font-variant-numeric:tabular-nums;white-space:nowrap}
.les__sum{border-bottom:0}
.les__bubble{margin-left:auto;max-width:85%;background:#0a0a0a;color:#fff;padding:9px 12px;border-radius:12px 12px 2px 12px;font-size:13px;line-height:1.4}
.les__tick{margin:4px 0 8px;text-align:right;font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;color:#5c5a57}
.les__reset{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;color:#5c5a57;background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.les__reset:hover{color:#0a0a0a}
.les__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

// Lege staten met één actie · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.les');if(!w)return;
var tabs=[].slice.call(w.querySelectorAll('.les__tab')),panels=[].slice.call(w.querySelectorAll('.les__panel')),sr=w.querySelector('.les__sr'),uid='les'+Math.random().toString(36).slice(2,8);
tabs.forEach(function(t,i){t.id=uid+'t'+i;panels[i].id=uid+'p'+i;t.setAttribute('aria-controls',panels[i].id);panels[i].setAttribute('aria-labelledby',t.id);});
function sel(i,focus){tabs.forEach(function(t,j){var on=i===j;t.setAttribute('aria-selected',on?'true':'false');t.tabIndex=on?0:-1;panels[j].hidden=!on;});if(focus)tabs[i].focus();}
tabs.forEach(function(t,i){t.addEventListener('click',function(){sel(i);});t.addEventListener('keydown',function(e){var n=null;if(e.key==='ArrowRight')n=(i+1)%tabs.length;else if(e.key==='ArrowLeft')n=(i-1+tabs.length)%tabs.length;else if(e.key==='Home')n=0;else if(e.key==='End')n=tabs.length-1;if(n!==null){e.preventDefault();sel(n,true);}});});
panels.forEach(function(p){var em=p.querySelector('.les__empty'),fu=p.querySelector('.les__full');
 p.querySelector('.les__btn').addEventListener('click',function(){em.hidden=true;fu.hidden=false;sr.textContent='Gevuld voorbeeld getoond';fu.querySelector('.les__reset').focus();});
 p.querySelector('.les__reset').addEventListener('click',function(){fu.hidden=true;em.hidden=false;sr.textContent='Lege staat getoond';p.querySelector('.les__btn').focus();});});
}
init(document.querySelector('.jouw-container'));