Taalkeuze NL / EN zonder vlaggen Nieuw

<!-- Taalkeuze NL / EN zonder vlaggen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tkn" lang="nl">
<header class="tkn__head">
<a class="tkn__logo" href="#tkn">Bakkerij Verbeek</a>
<nav class="tkn__nav" aria-label="Hoofdmenu"><a href="#tkn-1" data-nl="Assortiment" data-en="Our bread">Assortiment</a><a href="#tkn-2" data-nl="Bestellen" data-en="Order">Bestellen</a><a href="#tkn-3" data-nl="Contact" data-en="Contact">Contact</a></nav>
<div class="tkn__lang">
<button class="tkn__btn" type="button" aria-expanded="false" aria-controls="tkn-list" aria-label="Taal: Nederlands. Kies een andere taal"><svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6"/><path d="M2 8h12M8 2c1.8 1.8 2.6 3.8 2.6 6S9.8 12.2 8 14M8 2C6.2 3.8 5.4 5.8 5.4 8s.8 4.2 2.6 6"/></svg><span class="tkn__code">NL</span><svg class="tkn__chev" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
<ul class="tkn__list" id="tkn-list" hidden>
<li><a class="tkn__opt" href="?taal=nl" hreflang="nl" lang="nl" data-l="nl" aria-current="true"><span>Nederlands</span><span class="tkn__c">NL</span></a></li>
<li><a class="tkn__opt" href="?taal=en" hreflang="en" lang="en" data-l="en"><span>English</span><span class="tkn__c">EN</span></a></li>
</ul>
</div>
</header>
<div class="tkn__body">
<h3 class="tkn__h" data-nl="Elke ochtend vers brood in Haarlem" data-en="Fresh bread in Haarlem every morning">Elke ochtend vers brood in Haarlem</h3>
<p class="tkn__p" data-nl="Open vanaf 7:00 aan de Botermarkt. Bestel voor 20:00, dan ligt het morgen klaar." data-en="Open from 7:00 at the Botermarkt. Order before 20:00 and it is ready tomorrow.">Open vanaf 7:00 aan de Botermarkt. Bestel voor 20:00, dan ligt het morgen klaar.</p>
</div>
<p class="tkn__foot"><span data-nl="Taal:" data-en="Language:">Taal:</span> <a class="tkn__fl" href="?taal=nl" hreflang="nl" lang="nl" data-l="nl" aria-current="true">Nederlands</a> <a class="tkn__fl" href="?taal=en" hreflang="en" lang="en" data-l="en">English</a></p>
<p class="tkn__sr" aria-live="polite"></p>
</div>
</div>

/* Taalkeuze NL / EN zonder vlaggen · NedDev · eigen werk. */
.tkn{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;text-align:left;container-type:inline-size}
.tkn *,.tkn *::before,.tkn *::after{box-sizing:border-box}
.tkn__head{position:relative;z-index:2;display:flex;align-items:center;gap:14px;height:52px;padding:0 12px 0 16px;border-bottom:1px solid rgba(10,10,10,.1)}
.tkn__logo{font:700 15px/1 'Switzer',sans-serif;color:#0a0a0a;text-decoration:none;white-space:nowrap;padding:5px 0}
.tkn__nav{display:flex;gap:2px;margin-left:auto}
.tkn__nav a{padding:6px 7px;border-radius:4px;color:#3a3733;text-decoration:none;font:500 13px/1.1 'Switzer',sans-serif;white-space:nowrap}
.tkn__nav a:hover{color:#0a0a0a;background:#f4f3f1}
.tkn a:focus-visible,.tkn__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.tkn__lang{position:relative}
.tkn__btn{display:flex;align-items:center;gap:5px;height:32px;margin:0;padding:0 8px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:600 13px/1 'Switzer',sans-serif;cursor:pointer}
.tkn__btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tkn__btn .tkn__chev{width:12px;height:12px;stroke-width:2;transition:transform .2s}
.tkn__btn[aria-expanded="true"]{background:#0a0a0a;color:#fff}
.tkn__btn[aria-expanded="true"] .tkn__chev{transform:rotate(180deg)}
.tkn__list{position:absolute;right:0;top:calc(100% + 6px);min-width:170px;margin:0;padding:4px;list-style:none;background:#fff;border:1px solid rgba(10,10,10,.14);border-radius:8px;box-shadow:0 14px 30px -12px rgba(10,10,10,.35);animation:tknIn .14s ease-out}
.tkn__list[hidden]{display:none}
@keyframes tknIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tkn__opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;padding:6px 10px;border-radius:4px;color:#0a0a0a;text-decoration:none;font:400 14px/1 'Switzer',sans-serif}
.tkn__opt:hover,.tkn__opt:focus{background:#f4f3f1;outline:none}
.tkn__opt:focus-visible{box-shadow:inset 0 0 0 2px #F5480F}
.tkn__opt[aria-current="true"]{font-weight:600}
.tkn__opt[aria-current="true"] .tkn__c{background:#F5480F;color:#0a0a0a}
.tkn__c{padding:3px 5px;border-radius:4px;background:#f4f3f1;color:#57534e;font:600 12px/1 'Switzer',sans-serif}
.tkn__body{flex:1;padding:16px 16px 0;transition:opacity .18s,transform .18s}
.tkn.is-swap .tkn__body,.tkn.is-swap .tkn__nav{opacity:0;transform:translateY(4px)}
.tkn__nav{transition:opacity .18s,transform .18s}
.tkn__h{margin:0 0 6px;font:600 21px/1.15 'Switzer',sans-serif;letter-spacing:-.02em;max-width:18em;text-wrap:balance}
.tkn__p{margin:0;font:400 14px/1.45 'Switzer',sans-serif;color:#3a3733;max-width:34em}
.tkn__foot{display:flex;align-items:center;gap:6px;margin:0;padding:6px 16px 10px;font:400 13px/1 'Switzer',sans-serif;color:#57534e}
.tkn__fl{display:inline-flex;align-items:center;min-height:26px;padding:0 4px;color:#0a0a0a;text-decoration:underline;text-decoration-color:rgba(10,10,10,.3);text-underline-offset:3px}
.tkn__fl[aria-current="true"]{text-decoration-color:#F5480F;text-decoration-thickness:2px;font-weight:600}
.tkn__sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@container (max-width:400px){.tkn__nav{display:none}.tkn__lang{margin-left:auto}.tkn__h{font-size:19px}}
@media (prefers-reduced-motion:reduce){.tkn__body,.tkn__nav,.tkn__btn .tkn__chev{transition:none}.tkn__list{animation:none}}

// Taalkeuze NL / EN zonder vlaggen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.tkn');if(!w)return;
var btn=w.querySelector('.tkn__btn'),list=w.querySelector('.tkn__list'),opts=[].slice.call(list.querySelectorAll('.tkn__opt')),sr=w.querySelector('.tkn__sr'),code=w.querySelector('.tkn__code'),KEY='tkn-taal';
var NAME={nl:'Nederlands',en:'English'},rm=matchMedia('(prefers-reduced-motion: reduce)').matches;
function close(back){if(list.hidden)return;list.hidden=true;btn.setAttribute('aria-expanded','false');if(back)btn.focus();}
function openL(){list.hidden=false;btn.setAttribute('aria-expanded','true');(list.querySelector('[aria-current="true"]')||opts[0]).focus();}
function apply(l,announce){var swap=function(){w.setAttribute('lang',l);[].forEach.call(w.querySelectorAll('[data-nl]'),function(el){el.textContent=el.getAttribute('data-'+l);});
[].forEach.call(w.querySelectorAll('[data-l]'),function(a){if(a.getAttribute('data-l')===l)a.setAttribute('aria-current','true');else a.removeAttribute('aria-current');});
code.textContent=l.toUpperCase();btn.setAttribute('aria-label',l==='nl'?'Taal: Nederlands. Kies een andere taal':'Language: English. Choose another language');
if(announce)sr.textContent=l==='nl'?'Taal gewijzigd naar Nederlands':'Language changed to English';};
if(rm||!announce){swap();return;}w.classList.add('is-swap');setTimeout(function(){swap();w.classList.remove('is-swap');},180);}
function choose(l){try{localStorage.setItem(KEY,l);}catch(e){}apply(l,true);}
btn.addEventListener('click',function(){if(list.hidden)openL();else close(true);});
w.addEventListener('click',function(e){var a=e.target.closest('[data-l]');if(!a)return;e.preventDefault();var l=a.getAttribute('data-l');var fromList=list.contains(a);close(fromList);if(w.getAttribute('lang')!==l)choose(l);});
list.addEventListener('keydown',function(e){var i=opts.indexOf(document.activeElement);if(e.key==='ArrowDown'){e.preventDefault();opts[(i+1)%opts.length].focus();}else if(e.key==='ArrowUp'){e.preventDefault();opts[(i-1+opts.length)%opts.length].focus();}else if(e.key==='Escape'){e.preventDefault();close(true);}else if(e.key==='Tab'){close(false);}});
btn.addEventListener('keydown',function(e){if(e.key==='ArrowDown'&&list.hidden){e.preventDefault();openL();}});
document.addEventListener('pointerdown',function(e){if(!list.hidden&&!w.querySelector('.tkn__lang').contains(e.target))close(false);});
var saved=null;try{saved=localStorage.getItem(KEY);}catch(e){}if(saved==='en')apply('en',false);
}
init(document.querySelector('.jouw-container'));