Werkbalk die uitklapt bij selectie Nieuw

<!-- Werkbalk die uitklapt bij selectie · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="wbs">
<div class="wbs__head"><label class="wbs__all"><input class="wbs__cb wbs__cb--all" type="checkbox"><span>Nieuwe aanvragen</span></label><span class="wbs__cnt">4</span></div>
<ul class="wbs__list">
<li class="wbs__it"><label class="wbs__lbl"><input class="wbs__cb" type="checkbox"><span class="wbs__nm">Familie Bakker, Amersfoort</span><span class="wbs__wat">cv-ketel vervangen</span></label></li>
<li class="wbs__it"><label class="wbs__lbl"><input class="wbs__cb" type="checkbox"><span class="wbs__nm">R. Hendriks, Leusden</span><span class="wbs__wat">storing warmtepomp</span></label></li>
<li class="wbs__it"><label class="wbs__lbl"><input class="wbs__cb" type="checkbox"><span class="wbs__nm">Kinderopvang Het Kasteel, Soest</span><span class="wbs__wat">onderhoudscontract</span></label></li>
<li class="wbs__it"><label class="wbs__lbl"><input class="wbs__cb" type="checkbox"><span class="wbs__nm">M. el Idrissi, Nijkerk</span><span class="wbs__wat">offerte airco</span></label></li>
</ul>
<div class="wbs__empty" hidden><p>Alles verwerkt. Nieuwe aanvragen komen hier binnen.</p><button class="wbs__undo" type="button">Zet terug</button></div>
<div class="wbs__foot">
<p class="wbs__idle">Vink aanvragen aan om ze te verwerken.</p>
<div class="wbs__bar" role="toolbar" aria-label="Acties voor geselecteerde aanvragen" aria-hidden="true">
<span class="wbs__n" aria-live="polite"></span>
<button class="wbs__b" type="button" tabindex="-1" data-a="toe">Toewijzen</button>
<button class="wbs__b" type="button" tabindex="-1" data-a="plan">Inplannen</button>
<button class="wbs__b" type="button" tabindex="-1" data-a="arch">Archiveren</button>
<button class="wbs__b wbs__x" type="button" tabindex="-1" data-a="clear" aria-label="Selectie wissen"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
</div>
</div>
<p class="wbs__st" aria-live="polite"></p>
</div>
</div>

/* Werkbalk die uitklapt bij selectie · NedDev · eigen werk. */
.wbs{position:absolute;inset:0;display:flex;flex-direction:column;padding:10px 12px 10px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;overflow:hidden}
.wbs *,.wbs *::before,.wbs *::after{box-sizing:border-box}
.wbs__head{display:flex;align-items:center;justify-content:space-between;padding:0 4px 6px}
.wbs__all{display:flex;align-items:center;gap:8px;font:600 14px/1.2 'Switzer',sans-serif;cursor:pointer;min-height:24px}
.wbs__cnt{font:500 13px/1 'Switzer',sans-serif;color:#57534e}
.wbs__cb{flex:none;-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0;border:2px solid #57534e;border-radius:4px;background:#fff center/14px no-repeat;cursor:pointer;transition:background-color .15s,border-color .15s}
.wbs__cb:hover{border-color:#0a0a0a}
.wbs__cb:checked{border-color:#F5480F;background-color:#F5480F;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%230a0a0a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.wbs__cb:indeterminate{border-color:#0a0a0a;background-color:#0a0a0a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.wbs__cb:disabled{opacity:.4;cursor:default}
.wbs__cb:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.wbs__list{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow:auto;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px}
.wbs__it+.wbs__it{border-top:1px solid rgba(10,10,10,.08)}
.wbs__it{transition:opacity .25s,transform .25s}
.wbs__it.is-out{opacity:0;transform:translateX(16px)}
.wbs__lbl{display:flex;align-items:center;gap:10px;min-height:34px;padding:4px 10px;cursor:pointer;font:400 14px/1.2 'Switzer',sans-serif}
.wbs__it.is-on .wbs__lbl{background:#fdeee8}
.wbs__nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wbs__wat{color:#57534e;font-size:13px;white-space:nowrap}
.wbs__empty{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:12px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px}
.wbs__empty[hidden]{display:none}
.wbs__empty p{margin:0;font:400 14px/1.4 'Switzer',sans-serif}
.wbs__undo{min-height:30px;padding:6px 12px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:500 13px/1 'Switzer',sans-serif;cursor:pointer}
.wbs__undo:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.wbs__foot{position:relative;height:42px;margin-top:8px;flex:none}
.wbs__idle{position:absolute;inset:0;margin:0;display:flex;align-items:center;padding:0 4px;font:400 13px/1.3 'Switzer',sans-serif;color:#57534e;transition:opacity .2s}
.wbs.has-sel .wbs__idle{opacity:0}
.wbs__bar{position:absolute;inset:0;display:flex;align-items:center;gap:4px;padding:0 6px 0 12px;background:#0a0a0a;color:#fff;border-radius:8px;clip-path:inset(0 calc(100% - 42px) 0 0 round 8px);opacity:0;visibility:hidden;transition:clip-path .32s cubic-bezier(.2,.7,.2,1),opacity .2s,visibility 0s .32s}
.wbs.has-sel .wbs__bar{clip-path:inset(0 0 0 0 round 8px);opacity:1;visibility:visible;transition:clip-path .32s cubic-bezier(.2,.7,.2,1),opacity .12s,visibility 0s}
.wbs__n{margin-right:auto;font:600 14px/1 'Switzer',sans-serif;white-space:nowrap}
.wbs__b{min-height:30px;padding:6px 9px;border:0;border-radius:4px;background:none;color:#fff;font:500 13px/1 'Switzer',sans-serif;cursor:pointer;opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .2s,background-color .15s}
.wbs.has-sel .wbs__b{opacity:1;transform:none}
.wbs.has-sel .wbs__b:nth-of-type(2){transition-delay:.04s}.wbs.has-sel .wbs__b:nth-of-type(3){transition-delay:.08s}.wbs.has-sel .wbs__b:nth-of-type(4){transition-delay:.12s}
.wbs__b:hover{background:rgba(255,255,255,.12)}
.wbs__b:focus-visible{outline:2px solid #F5480F;outline-offset:0}
.wbs__b[data-a="arch"]{background:#F5480F;color:#0a0a0a}
.wbs__x{display:grid;place-items:center;width:30px;padding:0}
.wbs__x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.wbs__st{margin:4px 4px 0;min-height:16px;font:400 13px/1.2 'Switzer',sans-serif}
@media (max-width:420px){.wbs__wat{display:none}.wbs__b{padding:6px 7px}.wbs__nw{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wbs__bar{padding-left:10px}}
@media (prefers-reduced-motion:reduce){.wbs__bar,.wbs.has-sel .wbs__bar,.wbs__b,.wbs__it,.wbs__idle{transition:none}}

// Werkbalk die uitklapt bij selectie · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.wbs');if(!w)return;
var list=w.querySelector('.wbs__list'),allCb=w.querySelector('.wbs__cb--all'),bar=w.querySelector('.wbs__bar'),n=w.querySelector('.wbs__n'),st=w.querySelector('.wbs__st'),cnt=w.querySelector('.wbs__cnt'),empty=w.querySelector('.wbs__empty');
var btns=[].slice.call(bar.querySelectorAll('.wbs__b')),store=list.innerHTML,focusI=0;
function boxes(){return [].slice.call(list.querySelectorAll('.wbs__cb'));}
function sync(){var b=boxes(),s=b.filter(function(x){return x.checked;}).length;
b.forEach(function(x){x.closest('.wbs__it').classList.toggle('is-on',x.checked);});
allCb.checked=s>0&&s===b.length;allCb.indeterminate=s>0&&s<b.length;allCb.disabled=!b.length;
var was=w.classList.contains('has-sel');w.classList.toggle('has-sel',s>0);bar.setAttribute('aria-hidden',s>0?'false':'true');
n.innerHTML=s?s+'<span class="wbs__nw"> geselecteerd</span>':'';cnt.textContent=b.length;
btns.forEach(function(x,i){x.tabIndex=(s>0&&i===focusI)?0:-1;});
list.hidden=!b.length;empty.hidden=!!b.length;
if(was&&!s&&bar.contains(document.activeElement)){var f=boxes()[0]||allCb;if(!allCb.disabled||boxes().length)f.focus();}}
list.addEventListener('change',sync);
allCb.addEventListener('change',function(){boxes().forEach(function(x){x.checked=allCb.checked;});sync();});
bar.addEventListener('keydown',function(e){var i=btns.indexOf(document.activeElement);if(i<0)return;var j=null;
if(e.key==='ArrowRight')j=(i+1)%btns.length;else if(e.key==='ArrowLeft')j=(i-1+btns.length)%btns.length;else if(e.key==='Home')j=0;else if(e.key==='End')j=btns.length-1;
if(j!==null){e.preventDefault();focusI=j;btns.forEach(function(x,k){x.tabIndex=k===j?0:-1;});btns[j].focus();}});
bar.addEventListener('focusin',function(e){var i=btns.indexOf(e.target);if(i>=0)focusI=i;});
bar.addEventListener('click',function(e){var b=e.target.closest('.wbs__b');if(!b)return;var sel=boxes().filter(function(x){return x.checked;}),k=sel.length,a=b.dataset.a,word=k===1?'aanvraag':'aanvragen';
if(a==='clear'){sel.forEach(function(x){x.checked=false;});st.textContent='Selectie gewist.';sync();allCb.focus();return;}
if(a==='toe'){st.textContent=k+' '+word+' toegewezen aan monteur Kees.';}
if(a==='plan'){st.textContent=k+' '+word+' ingepland in week 42.';}
if(a==='arch'){var rm=matchMedia('(prefers-reduced-motion: reduce)').matches;sel.forEach(function(x){x.closest('.wbs__it').classList.add('is-out');});
setTimeout(function(){sel.forEach(function(x){x.closest('.wbs__it').remove();});st.textContent=k+' '+word+' gearchiveerd.';sync();(boxes()[0]||w.querySelector('.wbs__undo')).focus();},rm?0:260);return;}
sel.forEach(function(x){x.checked=false;});sync();allCb.focus();});
w.querySelector('.wbs__undo').addEventListener('click',function(){list.innerHTML=store;st.textContent='Aanvragen teruggezet.';sync();allCb.focus();});
sync();
}
init(document.querySelector('.jouw-container'));