Aan/uit-knoppengroep Nieuw

<!-- Aan/uit-knoppengroep · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ktg">
<div class="ktg__box">
<div class="ktg__bar" role="toolbar" aria-label="Tekstopmaak" aria-controls="ktg-tekst">
<button class="ktg__b" type="button" aria-pressed="true" data-s="b" aria-label="Vet"><span class="ktg__lt ktg__lt--b" aria-hidden="true">B</span></button>
<button class="ktg__b" type="button" aria-pressed="false" data-s="i" aria-label="Cursief" tabindex="-1"><span class="ktg__lt ktg__lt--i" aria-hidden="true">I</span></button>
<button class="ktg__b" type="button" aria-pressed="false" data-s="u" aria-label="Onderstrepen" tabindex="-1"><span class="ktg__lt ktg__lt--u" aria-hidden="true">U</span></button>
<span class="ktg__sep" aria-hidden="true"></span>
<span class="ktg__grp" role="group" aria-label="Uitlijning">
<button class="ktg__b" type="button" aria-pressed="true" data-a="left" aria-label="Links uitlijnen" tabindex="-1"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3.5h12M2 6.5h8M2 9.5h12M2 12.5h7"/></svg></button>
<button class="ktg__b" type="button" aria-pressed="false" data-a="center" aria-label="Centreren" tabindex="-1"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3.5h12M4 6.5h8M2 9.5h12M4.5 12.5h7"/></svg></button>
<button class="ktg__b" type="button" aria-pressed="false" data-a="right" aria-label="Rechts uitlijnen" tabindex="-1"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3.5h12M6 6.5h8M2 9.5h12M7 12.5h7"/></svg></button>
</span>
</div>
<p class="ktg__txt is-b" id="ktg-tekst">Ophalen kan op werkdagen tussen 9:00 en 17:00 aan de Marktstraat 12 in Gouda.</p>
</div>
</div>
</div>

/* Aan/uit-knoppengroep · NedDev · eigen werk. */
.ktg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.ktg *,.ktg *::before,.ktg *::after{box-sizing:border-box}
.ktg__box{width:min(330px,100%);background:#fff;border:1px solid #e2dfda;border-radius:8px;overflow:hidden}
.ktg__bar{display:flex;align-items:center;gap:4px;padding:6px;border-bottom:1px solid #e8e5e0;background:#faf9f7}
.ktg__grp{display:flex;gap:4px}
.ktg__sep{width:1px;height:22px;margin:0 4px;background:#d9d5ce}
.ktg__b{appearance:none;width:38px;height:38px;margin:0;padding:0;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;color:#0a0a0a;cursor:pointer;transition:background-color .14s ease,color .14s ease,transform .1s ease}
.ktg__b:hover{background:#e8e5e0}
.ktg__b[aria-pressed="true"]{background:#0a0a0a;color:#fff}
.ktg__b[aria-pressed="true"]:hover{background:#2b2926}
.ktg__b:active{transform:scale(.9)}
.ktg__b:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.ktg__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.ktg__lt{font:500 16px/1 'Switzer',sans-serif}
.ktg__lt--b{font-weight:800}
.ktg__lt--i{font-style:italic;font-family:Georgia,'Times New Roman',serif;font-size:17px}
.ktg__lt--u{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.ktg__txt{margin:0;padding:14px 16px 16px;font:400 15px/1.5 'Switzer',sans-serif;text-align:left;transition:color .2s ease}
.ktg__txt.is-b{font-weight:700}
.ktg__txt.is-i{font-style:italic}
.ktg__txt.is-u{text-decoration:underline;text-decoration-color:#F5480F;text-decoration-thickness:2px;text-underline-offset:4px}
.ktg__txt.is-center{text-align:center}
.ktg__txt.is-right{text-align:right}
@media (prefers-reduced-motion:reduce){.ktg__b{transition:none}.ktg__b:active{transform:none}}

// Aan/uit-knoppengroep · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ktg');if(!w)return;
var bs=[].slice.call(w.querySelectorAll('.ktg__b')),txt=w.querySelector('.ktg__txt'),al=bs.filter(function(b){return b.hasAttribute('data-a');});
function rove(i){bs.forEach(function(b,j){b.tabIndex=j===i?0:-1;});bs[i].focus();}
bs.forEach(function(b,i){
  b.addEventListener('click',function(){bs.forEach(function(o,j){o.tabIndex=j===i?0:-1;});
    if(b.hasAttribute('data-s')){var on=b.getAttribute('aria-pressed')!=='true';b.setAttribute('aria-pressed',String(on));txt.classList.toggle('is-'+b.getAttribute('data-s'),on);}
    else{al.forEach(function(o){o.setAttribute('aria-pressed',String(o===b));});txt.classList.remove('is-center','is-right');var a=b.getAttribute('data-a');if(a!=='left')txt.classList.add('is-'+a);}});
  b.addEventListener('keydown',function(e){var n=bs.length,k=e.key,to=null;
    if(k==='ArrowRight')to=(i+1)%n;else if(k==='ArrowLeft')to=(i-1+n)%n;else if(k==='Home')to=0;else if(k==='End')to=n-1;
    if(to!==null){e.preventDefault();rove(to);}});
});
}
init(document.querySelector('.jouw-container'));