Bevestigdialoog met gevolg Nieuw

<!-- Bevestigdialoog met gevolg · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bvd">
<div class="bvd__panel">
<div class="bvd__head"><span class="bvd__eyebrow">Agenda · week 42</span><span class="bvd__sel">3 geselecteerd</span></div>
<ul class="bvd__list">
<li class="bvd__row"><span class="bvd__time">ma 13 okt · 09:30</span><span class="bvd__who">Knippen + wassen · Sanne de Wit</span></li>
<li class="bvd__row"><span class="bvd__time">di 14 okt · 11:00</span><span class="bvd__who">Kleuren · Fatima El Idrissi</span></li>
<li class="bvd__row"><span class="bvd__time">do 16 okt · 15:15</span><span class="bvd__who">Baard trimmen · Joris Mulder</span></li>
</ul>
<div class="bvd__actions"><button type="button" class="bvd__btn bvd__btn--danger" data-open="a">Verwijder 3 afspraken</button><button type="button" class="bvd__btn bvd__btn--ghost" data-open="b">Agenda opheffen</button></div>
<p class="bvd__status" role="status"></p>
</div>
<dialog class="bvd__dlg" data-dlg="a">
<form method="dialog" class="bvd__form">
<h2 class="bvd__title">3 afspraken verwijderen?</h2>
<p class="bvd__text">Je verwijdert 3 afspraken in week 42. De klanten krijgen automatisch een sms dat hun afspraak vervalt. Dit kun je niet terugdraaien.</p>
<ul class="bvd__dlist"><li>ma 13 okt 09:30 · Sanne de Wit</li><li>di 14 okt 11:00 · Fatima El Idrissi</li><li>do 16 okt 15:15 · Joris Mulder</li></ul>
<div class="bvd__dact"><button value="weg" class="bvd__btn bvd__btn--quiet">Ja, verwijderen</button><button value="houden" class="bvd__btn bvd__btn--primary" autofocus>Afspraken houden</button></div>
</form>
</dialog>
<dialog class="bvd__dlg" data-dlg="b">
<form method="dialog" class="bvd__form">
<h2 class="bvd__title">Agenda Salon Noord opheffen?</h2>
<p class="bvd__text">Alle 214 toekomstige afspraken en de online boekpagina verdwijnen. Typ <b>Salon Noord</b> om te bevestigen.</p>
<label class="bvd__tlabel"><span>Naam van de agenda</span><input class="bvd__type" type="text" autocomplete="off" spellcheck="false"></label>
<div class="bvd__dact"><button value="opheffen" class="bvd__btn bvd__btn--quiet bvd__go" disabled>Agenda opheffen</button><button value="houden" class="bvd__btn bvd__btn--primary">Agenda houden</button></div>
</form>
</dialog>
</div>
</div>

/* Bevestigdialoog met gevolg · NedDev · eigen werk. */
.bvd{position:absolute;inset:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left}
.bvd *,.bvd *::before,.bvd *::after{box-sizing:border-box}
.bvd__panel{width:100%;max-width:400px;margin:auto;background:#fff;border:1px solid #e0ddd8;border-radius:6px;padding:12px 14px}
.bvd__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.bvd__eyebrow,.bvd__sel{font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#5c5a57}
.bvd__sel{color:#0a0a0a;background:#f4f3f1;padding:3px 6px;border-radius:3px}
.bvd__list{list-style:none;margin:0 0 10px;padding:0}
.bvd__row{display:flex;gap:10px;align-items:baseline;padding:6px 0 6px 10px;border-left:2px solid #F5480F;margin-bottom:3px;background:#fbfaf8;font-size:13px;transition:opacity .25s,transform .25s}
.bvd__row.is-gone{opacity:.35;text-decoration:line-through}
.bvd__time{flex:none;font:500 11px/1.3 'JetBrains Mono',ui-monospace,monospace;color:#3d3b38;font-variant-numeric:tabular-nums}
.bvd__who{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bvd__actions{display:flex;flex-wrap:wrap;gap:8px}
.bvd__btn{font:600 13px/1 'Switzer',system-ui,sans-serif;padding:10px 14px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.bvd__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.bvd__btn:active:not(:disabled){transform:translateY(1px)}
.bvd__btn--danger{background:#fff;color:#B42318;border-color:#B42318}
.bvd__btn--danger:hover{background:#B42318;color:#fff}
.bvd__btn--ghost{background:#fff;color:#0a0a0a;border-color:#cfccc7}
.bvd__btn--ghost:hover{border-color:#0a0a0a}
.bvd__btn--primary{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.bvd__btn--primary:hover{background:#2e2c2a}
.bvd__btn--quiet{background:#fff;color:#B42318;border-color:#e3c4c0}
.bvd__btn--quiet:hover:not(:disabled){border-color:#B42318;background:#fdf3f2}
.bvd__btn:disabled{color:#8a8781;border-color:#e0ddd8;background:#f4f3f1;cursor:not-allowed}
.bvd__status{margin:8px 0 0;font-size:12px;min-height:16px;color:#1d6b3f;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bvd__status button{font:inherit;font-weight:600;color:#0a0a0a;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.bvd__status button:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.bvd__dlg{width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:6px;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;box-shadow:0 24px 60px rgba(10,10,10,.28);opacity:1;transform:none;transition:opacity .18s ease,transform .18s ease,overlay .18s allow-discrete,display .18s allow-discrete}
.bvd__dlg:not([open]){opacity:0;transform:translateY(8px)}
.bvd__dlg::backdrop{background:rgba(10,10,10,.45);transition:background-color .18s,overlay .18s allow-discrete,display .18s allow-discrete}
.bvd__dlg:not([open])::backdrop{background:rgba(10,10,10,0)}
@starting-style{.bvd__dlg[open]{opacity:0;transform:translateY(8px)}.bvd__dlg[open]::backdrop{background:rgba(10,10,10,0)}}
.bvd__form{padding:20px}
.bvd__title{margin:0 0 8px;font:700 18px/1.25 'Switzer',system-ui,sans-serif;letter-spacing:-.01em;color:#0a0a0a}
.bvd__text{margin:0 0 12px;font-size:14px;line-height:1.5;color:#3d3b38}
.bvd__dlist{margin:0 0 16px;padding:8px 10px;list-style:none;background:#f4f3f1;border-radius:4px;font:500 12px/1.7 'JetBrains Mono',ui-monospace,monospace;color:#0a0a0a}
.bvd__tlabel{display:block;margin:0 0 16px}
.bvd__tlabel span{display:block;font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#5c5a57;margin-bottom:6px}
.bvd__type{display:block;width:100%;height:38px;padding:0 10px;border:1px solid #cfccc7;border-radius:4px;font:inherit;font-size:14px;color:#0a0a0a;background:#fff}
.bvd__type:focus-visible{outline:none;border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(245,72,15,.35)}
.bvd__type.is-match{border-color:#1d6b3f;box-shadow:0 0 0 3px rgba(29,107,63,.18)}
.bvd__dact{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
@media (prefers-reduced-motion:reduce){.bvd__dlg,.bvd__dlg::backdrop,.bvd__row{transition:none}}

// Bevestigdialoog met gevolg · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.bvd');if(!w)return;
var status=w.querySelector('.bvd__status'),rows=[].slice.call(w.querySelectorAll('.bvd__row')),uid='bvd'+Math.random().toString(36).slice(2,8);
var dlgs={};w.querySelectorAll('.bvd__dlg').forEach(function(d,i){var k=d.getAttribute('data-dlg');dlgs[k]=d;var t=d.querySelector('.bvd__title'),p=d.querySelector('.bvd__text');t.id=uid+'t'+i;p.id=uid+'p'+i;d.setAttribute('aria-labelledby',t.id);d.setAttribute('aria-describedby',p.id);
 d.addEventListener('click',function(e){if(e.target===d)d.close('houden');});});
var typeIn=dlgs.b.querySelector('.bvd__type'),go=dlgs.b.querySelector('.bvd__go');
typeIn.addEventListener('input',function(){var ok=typeIn.value.trim()==='Salon Noord';go.disabled=!ok;typeIn.classList.toggle('is-match',ok);});
function openD(k){var d=dlgs[k];if(k==='b'){typeIn.value='';go.disabled=true;typeIn.classList.remove('is-match');}
 if(typeof d.showModal==='function'){d.returnValue='';d.showModal();}else{d.setAttribute('open','');}
 if(k==='b')typeIn.focus();}
w.querySelectorAll('[data-open]').forEach(function(b){b.addEventListener('click',function(){openD(b.getAttribute('data-open'));});});
function say(msg,undo){status.textContent=msg+' ';if(undo){var u=document.createElement('button');u.type='button';u.textContent='Ongedaan maken (demo)';u.addEventListener('click',function(){rows.forEach(function(r){r.classList.remove('is-gone');});status.textContent='Afspraken teruggezet.';w.querySelector('[data-open="a"]').disabled=false;});status.appendChild(u);}}
dlgs.a.addEventListener('close',function(){if(dlgs.a.returnValue==='weg'){rows.forEach(function(r){r.classList.add('is-gone');});w.querySelector('[data-open="a"]').disabled=true;say('3 afspraken verwijderd, klanten krijgen een sms.',true);}else{say('Niets verwijderd.');}});
dlgs.b.addEventListener('close',function(){say(dlgs.b.returnValue==='opheffen'?'Agenda Salon Noord opgeheven (demo, er is niets weg).':'Agenda blijft bestaan.');});
}
init(document.querySelector('.jouw-container'));