Bewaren: bladwijzer, ster en duim Nieuw

<!-- Bewaren: bladwijzer, ster en duim · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7s">
  <ul class="k7s__list">
    <li class="k7s__row"><p class="k7s__ctx"><span class="k7s__t">Dakkapel kiezen</span><span class="k7s__s" aria-live="polite">Artikel, 6 minuten lezen</span></p>
      <button class="k7s__btn k7s__btn--mark" type="button" aria-pressed="false" data-on="Staat in je leeslijst"><svg class="k7s__i" viewBox="0 0 24 24" aria-hidden="true"><path class="k7s__fp" d="M7 3.5h10v17l-5-3.6-5 3.6z"/><path class="k7s__ln" d="M7 3.5h10v17l-5-3.6-5 3.6z"/></svg>Bewaren</button></li>
    <li class="k7s__row"><p class="k7s__ctx"><span class="k7s__t">Espressomolen M2</span><span class="k7s__s" aria-live="polite">€ 249,00 bij Bonte Boon</span></p>
      <button class="k7s__btn k7s__btn--star" type="button" aria-pressed="false" data-on="Bij je favorieten"><svg class="k7s__i" viewBox="0 0 24 24" aria-hidden="true"><path class="k7s__fp" d="M12 2.8l2.8 6.1 6.5.6-4.9 4.4 1.4 6.5L12 17.1l-5.8 3.3 1.4-6.5-4.9-4.4 6.5-.6z"/><path class="k7s__ln" d="M12 2.8l2.8 6.1 6.5.6-4.9 4.4 1.4 6.5L12 17.1l-5.8 3.3 1.4-6.5-4.9-4.4 6.5-.6z"/></svg>Favoriet</button></li>
    <li class="k7s__row"><p class="k7s__ctx"><span class="k7s__t">Abonnement opzeggen</span><span class="k7s__s" aria-live="polite">Helpartikel</span></p>
      <button class="k7s__btn k7s__btn--thumb" type="button" aria-pressed="false" data-on="Bedankt voor je reactie"><svg class="k7s__i" viewBox="0 0 24 24" aria-hidden="true"><path class="k7s__fp" d="M7.5 10.5 11 3.6c1.5 0 2.6 1.3 2.2 2.8L12.5 9.5H19a2 2 0 0 1 2 2.3l-1.2 6.6a2 2 0 0 1-2 1.6H7.5zM3.5 10.5h4v9.5h-4z"/><path class="k7s__ln" d="M7.5 10.5 11 3.6c1.5 0 2.6 1.3 2.2 2.8L12.5 9.5H19a2 2 0 0 1 2 2.3l-1.2 6.6a2 2 0 0 1-2 1.6H7.5zM3.5 10.5h4v9.5h-4z"/></svg>Handig <span class="k7s__c" data-n="128"><span class="k7s__cn">128</span></span></button></li>
  </ul>
</div>
</div>

/* Bewaren: bladwijzer, ster en duim · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left;padding:10px 12px}
.k7s *{box-sizing:border-box}
.k7s__list{list-style:none;margin:0;padding:0;width:100%;max-width:360px;background:#fff;border:1px solid rgba(10,10,10,.14);border-radius:8px}
.k7s__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px}
.k7s__row+.k7s__row{border-top:1px solid rgba(10,10,10,.08)}
.k7s__ctx{display:flex;flex-direction:column;gap:2px;min-width:0;margin:0}
.k7s__t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k7s__s{font-size:12px;color:#5b5b5b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k7s__btn{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 11px;border:1px solid rgba(10,10,10,.22);border-radius:4px;background:#fff;color:#0a0a0a;font:500 13px/1 'Switzer',system-ui,sans-serif;cursor:pointer;transition:border-color .15s,background-color .15s}
.k7s__btn:hover{border-color:#0a0a0a}
.k7s__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.k7s__btn[aria-pressed=true]{border-color:#0a0a0a;background:#fff3ee}
.k7s__i{width:20px;height:20px;flex:none;overflow:visible;transform-origin:50% 60%}
.k7s__ln{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.k7s__fp{fill:#F5480F;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
.k7s__btn[aria-pressed=true] .k7s__fp{transform:scale(1)}
.k7s__btn--mark .k7s__fp{transform:none;clip-path:inset(0 0 100% 0);transition:clip-path .35s ease-out}
.k7s__btn--mark[aria-pressed=true] .k7s__fp{transform:none;clip-path:inset(0)}
.k7s__btn--mark.is-pop .k7s__i{animation:k7s-drop .5s cubic-bezier(.3,1.4,.5,1)}
.k7s__btn--star.is-pop .k7s__i{animation:k7s-spin .55s cubic-bezier(.3,1.2,.5,1)}
.k7s__btn--thumb.is-pop .k7s__i{animation:k7s-up .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes k7s-drop{0%{transform:translateY(-4px)}55%{transform:translateY(1px) scaleY(1.1)}100%{transform:none}}
@keyframes k7s-spin{0%{transform:rotate(0) scale(1)}55%{transform:rotate(52deg) scale(1.3)}100%{transform:rotate(72deg) scale(1)}}
@keyframes k7s-up{0%{transform:none}35%{transform:rotate(-24deg) translateY(-3px)}70%{transform:rotate(6deg)}100%{transform:none}}
.k7s__c{display:inline-block;height:14px;overflow:hidden;color:#4d4d4d;font-variant-numeric:tabular-nums}
.k7s__cn{display:block}
.k7s__cn.is-in{animation:k7s-in .3s ease-out}
@keyframes k7s-in{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.k7s__fp{transition:none}.k7s__btn.is-pop .k7s__i,.k7s__cn.is-in{animation:none}}

// Bewaren: bladwijzer, ster en duim · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.k7s'); if (!w) return;
    w.querySelectorAll('.k7s__btn').forEach(function (b) {
      var s = b.closest('.k7s__row').querySelector('.k7s__s'), s0 = s.textContent, s1 = b.getAttribute('data-on'), c = b.querySelector('.k7s__c');
      b.addEventListener('click', function () {
        var on = b.getAttribute('aria-pressed') !== 'true';
        b.setAttribute('aria-pressed', on ? 'true' : 'false'); s.textContent = on ? s1 : s0;
        b.classList.remove('is-pop'); if (on) { void b.offsetWidth; b.classList.add('is-pop'); }
        if (c) { c.innerHTML = '<span class="k7s__cn' + (on ? ' is-in' : '') + '">' + (+c.getAttribute('data-n') + (on ? 1 : 0)) + '</span>'; }
      });
    });
}
init(document.querySelector('.jouw-container'));