lintje 0.6.0 → 0.7.0

package/dist-elements/tag/skeleton.js

@@ -1 +1 @@
-export{D as LintjeSkeleton}from"../chunks/base-DuuwEY22.js";
+export{D as LintjeSkeleton}from"../chunks/base-BsZyWDre.js";

package/dist-elements/tag/slot-picker.js

@@ -1,32 +1,32 @@
-import{$t as e,Zt as t,dt as n,in as r,lt as i,nn as a}from"../chunks/base-DuuwEY22.js";import{n as o}from"../chunks/input-fzGBdp-5.js";import{t as s}from"../chunks/input-CTxDOlLs.js";import{o as c,p as l}from"../chunks/date-format-5bii3QLP.js";var u=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-slot-picker{gap:var(--space-3);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;display:grid}.lintje-slot-picker__day{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.lintje-slot-picker__heading{padding:0 0 var(--space-1);border-bottom:1px solid var(--color-border-default);text-align:center;font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--color-text-muted);margin:0}:host([disabled]) .lintje-slot-picker__heading{color:var(--color-text-disabled)}.lintje-slot-picker__slot{justify-content:center;align-items:center;gap:var(--space-1);min-height:var(--h-option);padding:0 var(--space-2);border:1px solid var(--color-border-default);background:var(--color-bg-surface);color:var(--color-text-primary);font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--dur-hover) var(--ease-in-motion);font-size:1rem;display:flex;position:relative}.lintje-slot-picker__slot:hover:not(.is-chosen,.is-disabled){background:var(--color-bg-subtle)}.lintje-slot-picker__slot.is-chosen{background:var(--color-choice-active-bg);border-color:var(--color-accent-line);box-shadow:inset 0 0 0 1px var(--color-accent-line);color:var(--color-accent-text);font-weight:700}.lintje-slot-picker__slot.is-disabled{background:var(--color-bg-subtle);border-color:var(--color-border-strong);box-shadow:none;color:var(--color-text-disabled);cursor:not-allowed}.lintje-slot-picker__slot:has(.lintje-choice__input:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.lintje-slot-picker__full{font:var(--text-small)}.lintje-slot-picker__none{padding:var(--space-2) 0;text-align:center;font:var(--text-small);color:var(--color-text-muted);margin:0}.lintje-field>.lintje-slot-picker__none{text-align:left;padding:0}@media screen and (width<=767px){.lintje-slot-picker{gap:var(--space-4);grid-auto-flow:row}.lintje-slot-picker__day{grid-template-columns:repeat(auto-fill, minmax(calc(2 * var(--space-10)), 1fr));display:grid}.lintje-slot-picker__heading,.lintje-slot-picker__none{text-align:left;grid-column:1/-1}}@media (forced-colors:active){.lintje-slot-picker__slot.is-chosen{box-shadow:none;border-color:highlight}.lintje-slot-picker__slot.is-disabled{color:graytext;border-color:graytext}.lintje-slot-picker__slot:has(.lintje-choice__input:focus-visible){outline-color:highlight}}`,d=class extends o{constructor(...e){super(...e),this.value=``}static{this.styles=[n,e(s),e(u)]}static{this.properties={value:{type:String},days:{attribute:!1}}}choose(e){this.value=e,this.commit(e)}render(){let e=this.days??[];return r`<div
+import{cn as e,ht as t,on as n,pt as r,rn as i,tn as a}from"../chunks/base-BsZyWDre.js";import{r as o}from"../chunks/input-C7qx0e4p.js";import{t as s}from"../chunks/input-CazTpGUd.js";import{o as c,p as l}from"../chunks/date-format-5bii3QLP.js";var u=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-slot-picker{gap:var(--space-3);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;display:grid}.lintje-slot-picker__day{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.lintje-slot-picker__heading{padding:0 0 var(--space-1);border-bottom:1px solid var(--color-border-default);text-align:center;font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--color-text-muted);margin:0}:host(:disabled) .lintje-slot-picker__heading{color:var(--color-text-disabled)}.lintje-slot-picker__slot{justify-content:center;align-items:center;gap:var(--space-1);min-height:var(--h-option);padding:0 var(--space-2);border:1px solid var(--color-border-default);background:var(--color-bg-surface);color:var(--color-text-primary);font-variant-numeric:tabular-nums;cursor:pointer;transition:background var(--dur-hover) var(--ease-in-motion);font-size:1rem;display:flex;position:relative}.lintje-slot-picker__slot:hover:not(.is-chosen,.is-disabled){background:var(--color-bg-subtle)}.lintje-slot-picker__slot.is-chosen{background:var(--color-choice-active-bg);border-color:var(--color-accent-line);box-shadow:inset 0 0 0 1px var(--color-accent-line);color:var(--color-accent-text);font-weight:700}.lintje-slot-picker__slot.is-disabled{background:var(--color-bg-subtle);border-color:var(--color-border-strong);box-shadow:none;color:var(--color-text-disabled);cursor:not-allowed}.lintje-slot-picker__slot:has(.lintje-choice__input:focus-visible){outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.lintje-slot-picker__full{font:var(--text-small)}.lintje-slot-picker__none{padding:var(--space-2) 0;text-align:center;font:var(--text-small);color:var(--color-text-muted);margin:0}.lintje-field>.lintje-slot-picker__none{text-align:left;padding:0}@media screen and (width<=767px){.lintje-slot-picker{gap:var(--space-4);grid-auto-flow:row}.lintje-slot-picker__day{grid-template-columns:repeat(auto-fill, minmax(calc(2 * var(--space-10)), 1fr));display:grid}.lintje-slot-picker__heading,.lintje-slot-picker__none{text-align:left;grid-column:1/-1}}@media (forced-colors:active){.lintje-slot-picker__slot.is-chosen{box-shadow:none;border-color:highlight}.lintje-slot-picker__slot.is-disabled{color:graytext;border-color:graytext}.lintje-slot-picker__slot:has(.lintje-choice__input:focus-visible){outline-color:highlight}}`,d=class extends o{constructor(...e){super(...e),this.value=``}static{this.styles=[t,i(s),i(u)]}static{this.properties={value:{type:String},days:{attribute:!1}}}choose(e){this.value=e,this.commit(e)}render(){let t=this.days??[];return e`<div
       class="lintje-field"
       role="radiogroup"
       aria-labelledby=${this.labelId}
       aria-describedby=${this.describedBy}
-      aria-invalid=${this.error?`true`:a}
-      aria-required=${this.required?`true`:a}
+      aria-invalid=${this.error?`true`:n}
+      aria-required=${this.required?`true`:n}
     >
       ${this.renderLabel()}
-      ${e.length?r`<div class="lintje-slot-picker">${e.map(e=>this.renderDay(e))}</div>`:r`<p class="lintje-slot-picker__none">Geen tijden beschikbaar</p>`}
+      ${t.length?e`<div class="lintje-slot-picker">${t.map(e=>this.renderDay(e))}</div>`:e`<p class="lintje-slot-picker__none">Geen tijden beschikbaar</p>`}
       ${this.renderFoot()}
-    </div>`}renderDay(e){return r`<div class="lintje-slot-picker__day">
-      <p class="lintje-slot-picker__heading" aria-hidden="true">${l(e.date)}</p>
-      ${e.slots.length?e.slots.map(t=>this.renderSlot(e,t)):r`<p class="lintje-slot-picker__none">
-              <span class="visually-hidden">${c(e.date)}: </span>Geen tijden
+    </div>`}renderDay(t){return e`<div class="lintje-slot-picker__day">
+      <p class="lintje-slot-picker__heading" aria-hidden="true">${l(t.date)}</p>
+      ${t.slots.length?t.slots.map(e=>this.renderSlot(t,e)):e`<p class="lintje-slot-picker__none">
+              <span class="visually-hidden">${c(t.date)}: </span>Geen tijden
             </p>`}
-    </div>`}renderSlot(e,t){let n=t.value===this.value,o=this.disabled||!!t.full;return r`<label
-      class=${i({"lintje-slot-picker__slot":!0,"is-chosen":n,"is-disabled":o})}
+    </div>`}renderSlot(t,i){let a=i.value===this.value,o=this.isDisabled||!!i.full;return e`<label
+      class=${r({"lintje-slot-picker__slot":!0,"is-chosen":a,"is-disabled":o})}
     >
       <input
         type="radio"
         class="lintje-choice__input"
         name=${this.name||`lintje-slot-picker`}
-        value=${t.value}
-        .checked=${n}
+        value=${i.value}
+        .checked=${a}
         ?disabled=${o}
-        @change=${()=>this.choose(t.value)}
+        @change=${()=>this.choose(i.value)}
       />
-      <span class="visually-hidden">${c(e.date)}, </span>
-      <span class="lintje-slot-picker__time">${t.label}</span>
-      ${t.full?r`<span class="lintje-slot-picker__full">Vol</span>`:a}
-    </label>`}};t(`lintje-slot-picker`,d);export{d as LintjeSlotPicker};
+      <span class="visually-hidden">${c(t.date)}, </span>
+      <span class="lintje-slot-picker__time">${i.label}</span>
+      ${i.full?e`<span class="lintje-slot-picker__full">Vol</span>`:n}
+    </label>`}};a(`lintje-slot-picker`,d);export{d as LintjeSlotPicker};

package/dist-elements/tag/sortable-list.js

@@ -1,32 +1,32 @@
-import{$t as e,St as t,Xt as n,Zt as r,dt as i,ft as a,g as o,in as s,lt as c,nn as l}from"../chunks/base-DuuwEY22.js";import{t as u}from"../chunks/live-message-CYZ-Ch7D.js";import"./checkbox.js";var d=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-sortable-list{gap:var(--space-2);flex-direction:column;display:flex}.lintje-sortable-list__rows{gap:var(--space-1);font:var(--text-ui);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.lintje-sortable-list__row{align-items:center;gap:var(--space-2);height:var(--h-touch);padding:0 var(--space-2);background:var(--color-bg-surface);border:1px solid var(--color-border-default);color:var(--color-text-primary);display:flex;position:relative}.lintje-sortable-list__row.is-lifted{z-index:1;border-color:var(--color-accent-line);box-shadow:var(--shadow-popover);font-weight:700}.lintje-sortable-list__row.is-dragging{transition:none}.lintje-sortable-list__row.is-drop-before:before,.lintje-sortable-list__row.is-drop-after:after{content:"";background:var(--color-accent-line);pointer-events:none;height:3px;position:absolute;left:-1px;right:-1px}.lintje-sortable-list__row.is-drop-before:before{top:-4px}.lintje-sortable-list__row.is-drop-after:after{bottom:-4px}.lintje-sortable-list__grip{width:var(--h-chip-field);height:var(--h-chip-field);color:var(--color-text-muted);cursor:grab;touch-action:none;transition:color var(--dur-hover) var(--ease-in-motion);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.lintje-sortable-list__grip:after{content:"";inset:min(0px, calc((100% - var(--h-target)) / 2)) 0;position:absolute}.lintje-sortable-list__grip:hover{color:var(--color-text-primary)}.lintje-sortable-list__row.is-lifted .lintje-sortable-list__grip{color:var(--color-accent-text);cursor:grabbing}.lintje-sortable-list__label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.lintje-sortable-list__check{min-width:0}.lintje-sortable-list__status{min-height:1lh;font:var(--text-small);color:var(--color-text-muted);margin:0}@media screen and (width<=767px){.lintje-sortable-list__row{padding-left:0}.lintje-sortable-list__grip{width:var(--h-touch);height:100%}}@media (prefers-reduced-motion:reduce){.lintje-sortable-list__grip{transition:none}}@media (forced-colors:active){.lintje-sortable-list__row.is-lifted{border-color:highlight}.lintje-sortable-list__row.is-drop-before:before,.lintje-sortable-list__row.is-drop-after:after{border-top:3px solid highlight}}`;function f(e,t,n){let r=Math.max(0,Math.min(e.length-1,n));if(t===r||t<0||t>=e.length)return[...e];let i=[...e],[a]=i.splice(t,1);return i.splice(r,0,a),i}function p(e,t){let n=0;for(;n<e.length&&e[n]<t;)n++;return n}var m=4,h=class extends n{constructor(...e){super(...e),this.items=[],this.name=``,this.checkable=!1,this.order=[],this.grabbed=null,this.drag=null,this.#e=new u(this)}static{this.styles=[i,e(d)]}static{this.properties={items:{attribute:!1},name:{type:String},label:{type:String},checkable:{type:Boolean,reflect:!0},order:{state:!0},grabbed:{state:!0},drag:{state:!0}}}#e;willUpdate(e){super.willUpdate(e),e.has(`items`)&&(this.order=this.items.map(e=>({...e})))}indexOf(e){return this.order.findIndex(t=>t.id===e)}place(e){return`Plaats ${e+1} van ${this.order.length}.`}commit(e){if(!e)return;let t=this.order.map(e=>e.id);this.emitLocal(`lintje-change`,t),this.name&&this.emit(`lintje-values-change`,{[this.name]:t})}async focusGrip(e){await this.updateComplete,[...this.renderRoot.querySelectorAll(`.lintje-sortable-list__grip`)].find(t=>t.dataset.id===e)?.focus()}pickUp(e){let t=this.indexOf(e.id);this.grabbed={id:e.id,from:t},this.#e.say(`${e.label} opgepakt. ${this.place(t)}`)}putDown(e){if(!this.grabbed)return;let t=this.indexOf(e.id);this.#e.say(`${e.label} neergelegd op plaats ${t+1}.`);let n=t!==this.grabbed.from;this.grabbed=null,this.commit(n)}putBack(e){if(!this.grabbed)return;let{from:t}=this.grabbed;this.order=f(this.order,this.indexOf(e.id),t),this.#e.say(`${e.label} teruggezet op plaats ${t+1}.`),this.grabbed=null,this.focusGrip(e.id)}dropAt(e){let t=this.grabbed;if(!t)return;let n=this.order[this.indexOf(t.id)];n&&(this.order=f(this.order,this.indexOf(n.id),this.indexOf(e.id)),this.putDown(n),this.focusGrip(n.id))}onGripKeydown(e,t){let n=this.grabbed?.id===t.id;switch(e.key){case` `:case`Enter`:n?this.putDown(t):this.pickUp(t);break;case`ArrowUp`:case`ArrowDown`:{if(!n)return;let r=this.indexOf(t.id),i=Math.max(0,Math.min(this.order.length-1,r+(e.key===`ArrowUp`?-1:1)));i!==r&&(this.order=f(this.order,r,i),this.focusGrip(t.id)),this.#e.say(this.place(i));break}case`Escape`:if(!n)return;this.putBack(t);break;default:return}e.preventDefault(),e.stopPropagation()}onGripBlur(e){this.grabbed?.id===e.id&&requestAnimationFrame(()=>{let t=this.renderRoot instanceof ShadowRoot?this.renderRoot.activeElement:null;this.grabbed?.id===e.id&&t?.dataset.id!==e.id&&this.putDown(e)})}onPointerDown(e,t){if(e.button!==0)return;if(this.grabbed){e.preventDefault(),this.dropAt(t);return}let n=[...this.renderRoot.querySelectorAll(`.lintje-sortable-list__row`)],r=this.indexOf(t.id),i=n.filter((e,t)=>t!==r).map(e=>{let t=e.getBoundingClientRect();return t.top+t.height/2});e.currentTarget.setPointerCapture?.(e.pointerId),e.preventDefault(),this.drag={id:t.id,from:r,to:r,startY:e.clientY,dy:0,middles:i,pointerId:e.pointerId},this.#e.say(`${t.label} opgepakt. ${this.place(r)}`)}onPointerMove(e){let t=this.drag;if(!t||e.pointerId!==t.pointerId)return;let n=p(t.middles,e.clientY);n!==t.to&&this.#e.say(this.place(n)),this.drag={...t,dy:e.clientY-t.startY,to:n}}onPointerUp(e,t){let n=this.drag;n&&e.pointerId===n.pointerId&&(n.to===n.from&&Math.abs(n.dy)<m?(this.drag=null,this.pickUp(t),this.focusGrip(t.id)):(this.order=f(this.order,n.from,n.to),this.#e.say(`${t.label} neergelegd op plaats ${n.to+1}.`),this.drag=null,this.commit(n.to!==n.from),this.focusGrip(t.id)))}onPointerCancel(){this.drag&&(this.drag=null,this.#e.clear())}onCheck(e,t){e.stopPropagation(),this.order=this.order.map(n=>n.id===t.id?{...n,checked:e.detail}:n),this.emit(`lintje-checked-change`,this.order.filter(e=>e.checked).map(e=>e.id))}dropLine(e){let t=this.drag;if(!t||t.to===t.from||e===t.from)return null;let n=this.order.map((e,t)=>t).filter(e=>e!==t.from);return t.to<n.length?n[t.to]===e?`before`:null:n[n.length-1]===e?`after`:null}row(e,n){let r=this.drag?.id===e.id,i=r||this.grabbed?.id===e.id,o=this.dropLine(n);return s`<li
-      class=${c({"lintje-sortable-list__row":!0,"is-lifted":i,"is-dragging":r,"is-drop-before":o===`before`,"is-drop-after":o===`after`})}
-      ${t({transform:r?`translateY(${this.drag.dy}px)`:null})}
+import{Et as e,cn as t,en as n,g as r,gt as i,ht as a,on as o,pt as s,rn as c,tn as l}from"../chunks/base-BsZyWDre.js";import{t as u}from"../chunks/live-message-CYZ-Ch7D.js";import"./checkbox.js";var d=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-sortable-list{gap:var(--space-2);flex-direction:column;display:flex}.lintje-sortable-list__rows{gap:var(--space-1);font:var(--text-ui);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.lintje-sortable-list__row{align-items:center;gap:var(--space-2);height:var(--h-touch);padding:0 var(--space-2);background:var(--color-bg-surface);border:1px solid var(--color-border-default);color:var(--color-text-primary);display:flex;position:relative}.lintje-sortable-list__row.is-lifted{z-index:1;border-color:var(--color-accent-line);box-shadow:var(--shadow-popover);font-weight:700}.lintje-sortable-list__row.is-dragging{transition:none}.lintje-sortable-list__row.is-drop-before:before,.lintje-sortable-list__row.is-drop-after:after{content:"";background:var(--color-accent-line);pointer-events:none;height:3px;position:absolute;left:-1px;right:-1px}.lintje-sortable-list__row.is-drop-before:before{top:-4px}.lintje-sortable-list__row.is-drop-after:after{bottom:-4px}.lintje-sortable-list__grip{width:var(--h-chip-field);height:var(--h-chip-field);color:var(--color-text-muted);cursor:grab;touch-action:none;transition:color var(--dur-hover) var(--ease-in-motion);flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.lintje-sortable-list__grip:after{content:"";inset:min(0px, calc((100% - var(--h-target)) / 2)) 0;position:absolute}.lintje-sortable-list__grip:hover{color:var(--color-text-primary)}.lintje-sortable-list__row.is-lifted .lintje-sortable-list__grip{color:var(--color-accent-text);cursor:grabbing}.lintje-sortable-list__label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.lintje-sortable-list__check{min-width:0}.lintje-sortable-list__status{min-height:1lh;font:var(--text-small);color:var(--color-text-muted);margin:0}@media screen and (width<=767px){.lintje-sortable-list__row{padding-left:0}.lintje-sortable-list__grip{width:var(--h-touch);height:100%}}@media (prefers-reduced-motion:reduce){.lintje-sortable-list__grip{transition:none}}@media (forced-colors:active){.lintje-sortable-list__row.is-lifted{border-color:highlight}.lintje-sortable-list__row.is-drop-before:before,.lintje-sortable-list__row.is-drop-after:after{border-top:3px solid highlight}}`;function f(e,t,n){let r=Math.max(0,Math.min(e.length-1,n));if(t===r||t<0||t>=e.length)return[...e];let i=[...e],[a]=i.splice(t,1);return i.splice(r,0,a),i}function p(e,t){let n=0;for(;n<e.length&&e[n]<t;)n++;return n}var m=4,h=class extends n{constructor(...e){super(...e),this.items=[],this.name=``,this.checkable=!1,this.order=[],this.grabbed=null,this.drag=null,this.#e=new u(this)}static{this.styles=[a,c(d)]}static{this.properties={items:{attribute:!1},name:{type:String},label:{type:String},checkable:{type:Boolean,reflect:!0},order:{state:!0},grabbed:{state:!0},drag:{state:!0}}}#e;willUpdate(e){super.willUpdate(e),e.has(`items`)&&(this.order=this.items.map(e=>({...e})))}indexOf(e){return this.order.findIndex(t=>t.id===e)}place(e){return`Plaats ${e+1} van ${this.order.length}.`}commit(e){if(!e)return;let t=this.order.map(e=>e.id);this.emitLocal(`lintje-change`,t),this.name&&this.emit(`lintje-values-change`,{[this.name]:t})}async focusGrip(e){await this.updateComplete,[...this.renderRoot.querySelectorAll(`.lintje-sortable-list__grip`)].find(t=>t.dataset.id===e)?.focus()}pickUp(e){let t=this.indexOf(e.id);this.grabbed={id:e.id,from:t},this.#e.say(`${e.label} opgepakt. ${this.place(t)}`)}putDown(e){if(!this.grabbed)return;let t=this.indexOf(e.id);this.#e.say(`${e.label} neergelegd op plaats ${t+1}.`);let n=t!==this.grabbed.from;this.grabbed=null,this.commit(n)}putBack(e){if(!this.grabbed)return;let{from:t}=this.grabbed;this.order=f(this.order,this.indexOf(e.id),t),this.#e.say(`${e.label} teruggezet op plaats ${t+1}.`),this.grabbed=null,this.focusGrip(e.id)}dropAt(e){let t=this.grabbed;if(!t)return;let n=this.order[this.indexOf(t.id)];n&&(this.order=f(this.order,this.indexOf(n.id),this.indexOf(e.id)),this.putDown(n),this.focusGrip(n.id))}onGripKeydown(e,t){let n=this.grabbed?.id===t.id;switch(e.key){case` `:case`Enter`:n?this.putDown(t):this.pickUp(t);break;case`ArrowUp`:case`ArrowDown`:{if(!n)return;let r=this.indexOf(t.id),i=Math.max(0,Math.min(this.order.length-1,r+(e.key===`ArrowUp`?-1:1)));i!==r&&(this.order=f(this.order,r,i),this.focusGrip(t.id)),this.#e.say(this.place(i));break}case`Escape`:if(!n)return;this.putBack(t);break;default:return}e.preventDefault(),e.stopPropagation()}onGripBlur(e){this.grabbed?.id===e.id&&requestAnimationFrame(()=>{let t=this.renderRoot instanceof ShadowRoot?this.renderRoot.activeElement:null;this.grabbed?.id===e.id&&t?.dataset.id!==e.id&&this.putDown(e)})}onPointerDown(e,t){if(e.button!==0)return;if(this.grabbed){e.preventDefault(),this.dropAt(t);return}let n=[...this.renderRoot.querySelectorAll(`.lintje-sortable-list__row`)],r=this.indexOf(t.id),i=n.filter((e,t)=>t!==r).map(e=>{let t=e.getBoundingClientRect();return t.top+t.height/2});e.currentTarget.setPointerCapture?.(e.pointerId),e.preventDefault(),this.drag={id:t.id,from:r,to:r,startY:e.clientY,dy:0,middles:i,pointerId:e.pointerId},this.#e.say(`${t.label} opgepakt. ${this.place(r)}`)}onPointerMove(e){let t=this.drag;if(!t||e.pointerId!==t.pointerId)return;let n=p(t.middles,e.clientY);n!==t.to&&this.#e.say(this.place(n)),this.drag={...t,dy:e.clientY-t.startY,to:n}}onPointerUp(e,t){let n=this.drag;n&&e.pointerId===n.pointerId&&(n.to===n.from&&Math.abs(n.dy)<m?(this.drag=null,this.pickUp(t),this.focusGrip(t.id)):(this.order=f(this.order,n.from,n.to),this.#e.say(`${t.label} neergelegd op plaats ${n.to+1}.`),this.drag=null,this.commit(n.to!==n.from),this.focusGrip(t.id)))}onPointerCancel(){this.drag&&(this.drag=null,this.#e.clear())}onCheck(e,t){e.stopPropagation(),this.order=this.order.map(n=>n.id===t.id?{...n,checked:e.detail}:n),this.emit(`lintje-checked-change`,this.order.filter(e=>e.checked).map(e=>e.id))}dropLine(e){let t=this.drag;if(!t||t.to===t.from||e===t.from)return null;let n=this.order.map((e,t)=>t).filter(e=>e!==t.from);return t.to<n.length?n[t.to]===e?`before`:null:n[n.length-1]===e?`after`:null}row(n,r){let a=this.drag?.id===n.id,o=a||this.grabbed?.id===n.id,c=this.dropLine(r);return t`<li
+      class=${s({"lintje-sortable-list__row":!0,"is-lifted":o,"is-dragging":a,"is-drop-before":c===`before`,"is-drop-after":c===`after`})}
+      ${e({transform:a?`translateY(${this.drag.dy}px)`:null})}
     >
       <button
         type="button"
         class="lintje-sortable-list__grip"
-        data-id=${e.id}
-        aria-label=${`${e.label} verplaatsen`}
-        aria-pressed=${i?`true`:`false`}
+        data-id=${n.id}
+        aria-label=${`${n.label} verplaatsen`}
+        aria-pressed=${o?`true`:`false`}
         aria-describedby="lintje-sortable-list-help"
-        @keydown=${t=>this.onGripKeydown(t,e)}
-        @blur=${()=>this.onGripBlur(e)}
-        @pointerdown=${t=>this.onPointerDown(t,e)}
+        @keydown=${e=>this.onGripKeydown(e,n)}
+        @blur=${()=>this.onGripBlur(n)}
+        @pointerdown=${e=>this.onPointerDown(e,n)}
         @pointermove=${e=>this.onPointerMove(e)}
-        @pointerup=${t=>this.onPointerUp(t,e)}
+        @pointerup=${e=>this.onPointerUp(e,n)}
         @pointercancel=${()=>this.onPointerCancel()}
       >
-        ${a(`functioneel-sleep`,{size:16})}
+        ${i(`functioneel-sleep`,{size:16})}
       </button>
-      ${this.checkable?s`<lintje-checkbox
+      ${this.checkable?t`<lintje-checkbox
               class="lintje-sortable-list__check"
-              label=${e.label}
-              ?checked=${!!e.checked}
-              @lintje-change=${t=>this.onCheck(t,e)}
-            ></lintje-checkbox>`:s`<span class="lintje-sortable-list__label">${e.label}</span>`}
-    </li>`}render(){return s`<div class="lintje-sortable-list">
-      <ul class="lintje-sortable-list__rows" aria-label=${this.label??l}>
-        ${o(this.order,e=>e.id,(e,t)=>this.row(e,t))}
+              label=${n.label}
+              ?checked=${!!n.checked}
+              @lintje-change=${e=>this.onCheck(e,n)}
+            ></lintje-checkbox>`:t`<span class="lintje-sortable-list__label">${n.label}</span>`}
+    </li>`}render(){return t`<div class="lintje-sortable-list">
+      <ul class="lintje-sortable-list__rows" aria-label=${this.label??o}>
+        ${r(this.order,e=>e.id,(e,t)=>this.row(e,t))}
       </ul>
       <p id="lintje-sortable-list-help" class="visually-hidden">
         Spatie of Enter pakt op, pijl omhoog en omlaag verplaatsen, spatie of Enter legt neer,
@@ -34,4 +34,4 @@ import{$t as e,St as t,Xt as n,Zt as r,dt as i,ft as a,g as o,in as s,lt as c,nn
         heen moet.
       </p>
       <p class="lintje-sortable-list__status" role="status">${this.#e.text}</p>
-    </div>`}};r(`lintje-sortable-list`,h);export{h as LintjeSortableList,p as dropIndex,f as moveItem};
+    </div>`}};l(`lintje-sortable-list`,h);export{h as LintjeSortableList,p as dropIndex,f as moveItem};

package/dist-elements/tag/spinner.js

@@ -1 +1 @@
-export{V as LintjeSpinner}from"../chunks/base-DuuwEY22.js";
+export{V as LintjeSpinner}from"../chunks/base-BsZyWDre.js";

package/dist-elements/tag/split-pane.js

@@ -1,13 +1,13 @@
-import{$t as e,Jt as t,St as n,Xt as r,Zt as i,in as a,lt as o,nn as s,qt as c}from"../chunks/base-DuuwEY22.js";import"./segmented.js";var l=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-split-pane{border:1px solid var(--color-border-default);display:flex}.lintje-split-pane__pane{min-width:0;padding:var(--space-4);overflow:auto}.lintje-split-pane__pane--start{flex:0 0 calc((100% - 9px) * var(--lintje-split,50) / 100)}.lintje-split-pane__pane--end{flex:1 1 0}.lintje-split-pane__strip{background:var(--color-bg-subtle);border-left:1px solid var(--color-border-default);border-right:1px solid var(--color-border-default);cursor:col-resize;touch-action:none;transition:background var(--dur-hover) var(--ease-in-motion);flex:0 0 9px;justify-content:center;align-items:center;display:flex}.lintje-split-pane__handle{width:7px;height:var(--h-touch);background:var(--color-border-heavy);transition:background var(--dur-hover) var(--ease-in-motion);flex:none}.lintje-split-pane__strip:hover .lintje-split-pane__handle,.lintje-split-pane.is-dragging .lintje-split-pane__handle{background:var(--color-accent-line)}.lintje-split-pane.is-dragging{user-select:none;cursor:col-resize}.lintje-split-pane.is-dragging .lintje-split-pane__strip{background:var(--color-bg-selected);transition:none}.lintje-split-pane__choice{margin-bottom:var(--space-3);display:block}.lintje-split-pane--phone{border:0;display:block}.lintje-split-pane--phone .lintje-split-pane__pane{padding:0}@media (forced-colors:active){.lintje-split-pane__handle{forced-color-adjust:none;background:canvastext}.lintje-split-pane__strip:hover .lintje-split-pane__handle,.lintje-split-pane.is-dragging .lintje-split-pane__handle{background:highlight}}`,u=5,d=50,f=3;function p(e,t,n){return Math.min(n,Math.max(t,e))}function m(e,t,n,r,i){return p(n<=0?50:Math.round((e-t)/n*100),r,i)}function h(e,t,n,r){return e===`ArrowLeft`?p(t-5,n,r):e===`ArrowRight`?p(t+5,n,r):e===`Home`?n:e===`End`?r:e===`Enter`?p(50,n,r):null}function g(e){try{let t=localStorage.getItem(e);if(t===null)return null;let n=Number(t);return Number.isFinite(n)?n:null}catch{return null}}function _(e,t){try{localStorage.setItem(e,String(t))}catch{}}var v=class extends r{constructor(...e){super(...e),this.value=50,this.min=20,this.max=80,this.startLabel=`Links`,this.endLabel=`Rechts`,this.pane=`start`,this.dragging=!1,this.#e=new t(this,c),this.#t=50,this.#n=0,this.#r=!1,this.#i=!1,this.onPointerDown=e=>{e.button!==0||this.#r||(e.preventDefault(),e.currentTarget.setPointerCapture?.(e.pointerId),this.renderRoot.querySelector(`.lintje-split-pane__handle`)?.focus(),this.#t=this.value,this.#n=e.clientX,this.dragging=!0)},this.onPointerMove=e=>{if(!this.dragging)return;let t=this.splitAt(e.clientX);t!==null&&(this.value=t)},this.onPointerUp=e=>{if(!this.dragging||this.#r)return;let t=e.currentTarget;t.hasPointerCapture?.(e.pointerId)&&t.releasePointerCapture(e.pointerId),Math.abs(e.clientX-this.#n)<=f?(this.#r=!0,document.addEventListener(`pointerdown`,this.onOutside,!0)):(this.dragging=!1,this.commit(this.value,this.#t))},this.onPlace=e=>{if(!this.#r||e.button!==0)return;e.preventDefault(),this.#i=!0;let t=this.splitAt(e.clientX);this.#a(),this.commit(t??this.value,this.#t)},this.onPlacedClick=e=>{this.#i&&(this.#i=!1,e.preventDefault(),e.stopPropagation())},this.onOutside=e=>{e.composedPath().includes(this)||this.cancelLift()},this.onKeydown=e=>{if(this.#r&&e.key===`Escape`){e.preventDefault(),e.stopPropagation(),this.cancelLift();return}this.cancelLift();let t=h(e.key,this.value,this.min,this.max);t!==null&&(e.preventDefault(),this.commit(t))}}static{this.styles=e(l)}static{this.properties={value:{type:Number},min:{type:Number},max:{type:Number},storageKey:{type:String,attribute:`storage-key`},startLabel:{type:String,attribute:`start-label`},endLabel:{type:String,attribute:`end-label`},pane:{type:String,reflect:!0},dragging:{state:!0}}}#e;willUpdate(e){if(super.willUpdate(e),e.has(`storageKey`)&&this.storageKey){let e=g(this.storageKey);e!==null&&(this.value=e)}let t=p(this.value,this.min,this.max);t!==this.value&&(this.value=t)}#t;#n;#r;#i;commit(e,t=this.value){this.value=p(e,this.min,this.max),this.value!==t&&(this.storageKey&&_(this.storageKey,this.value),this.emit(`lintje-split-change`,this.value))}get block(){return this.renderRoot.querySelector(`.lintje-split-pane`)}splitAt(e){let t=this.block?.getBoundingClientRect();return t?m(e,t.left,t.width,this.min,this.max):null}#a(){this.#r=!1,this.dragging=!1,document.removeEventListener(`pointerdown`,this.onOutside,!0)}cancelLift(){this.#r&&(this.#a(),this.value=this.#t)}disconnectedCallback(){this.#a(),super.disconnectedCallback()}onPaneChange(e){e.stopPropagation();let t=e.detail===`end`?`end`:`start`;t!==this.pane&&(this.pane=t,this.emit(`lintje-pane-change`,t))}render(){let e=this.#e.matches,t=Math.round(this.value);return a`${e?a`<lintje-segmented
+import{Et as e,Qt as t,Zt as n,cn as r,en as i,on as a,pt as o,rn as s,tn as c}from"../chunks/base-BsZyWDre.js";import"./segmented.js";var l=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-split-pane{border:1px solid var(--color-border-default);display:flex}.lintje-split-pane__pane{min-width:0;padding:var(--space-4);overflow:auto}.lintje-split-pane__pane--start{flex:0 0 calc((100% - 9px) * var(--lintje-split,50) / 100)}.lintje-split-pane__pane--end{flex:1 1 0}.lintje-split-pane__strip{background:var(--color-bg-subtle);border-left:1px solid var(--color-border-default);border-right:1px solid var(--color-border-default);cursor:col-resize;touch-action:none;transition:background var(--dur-hover) var(--ease-in-motion);flex:0 0 9px;justify-content:center;align-items:center;display:flex}.lintje-split-pane__handle{width:7px;height:var(--h-touch);background:var(--color-border-heavy);transition:background var(--dur-hover) var(--ease-in-motion);flex:none}.lintje-split-pane__strip:hover .lintje-split-pane__handle,.lintje-split-pane.is-dragging .lintje-split-pane__handle{background:var(--color-accent-line)}.lintje-split-pane.is-dragging{user-select:none;cursor:col-resize}.lintje-split-pane.is-dragging .lintje-split-pane__strip{background:var(--color-bg-selected);transition:none}.lintje-split-pane__choice{margin-bottom:var(--space-3);display:block}.lintje-split-pane--phone{border:0;display:block}.lintje-split-pane--phone .lintje-split-pane__pane{padding:0}@media (forced-colors:active){.lintje-split-pane__handle{forced-color-adjust:none;background:canvastext}.lintje-split-pane__strip:hover .lintje-split-pane__handle,.lintje-split-pane.is-dragging .lintje-split-pane__handle{background:highlight}}`,u=5,d=50,f=3;function p(e,t,n){return Math.min(n,Math.max(t,e))}function m(e,t,n,r,i){return p(n<=0?50:Math.round((e-t)/n*100),r,i)}function h(e,t,n,r){return e===`ArrowLeft`?p(t-5,n,r):e===`ArrowRight`?p(t+5,n,r):e===`Home`?n:e===`End`?r:e===`Enter`?p(50,n,r):null}function g(e){try{let t=localStorage.getItem(e);if(t===null)return null;let n=Number(t);return Number.isFinite(n)?n:null}catch{return null}}function _(e,t){try{localStorage.setItem(e,String(t))}catch{}}var v=class extends i{constructor(...e){super(...e),this.value=50,this.min=20,this.max=80,this.startLabel=`Links`,this.endLabel=`Rechts`,this.pane=`start`,this.dragging=!1,this.#e=new t(this,n),this.#t=50,this.#n=0,this.#r=!1,this.#i=!1,this.onPointerDown=e=>{e.button!==0||this.#r||(e.preventDefault(),e.currentTarget.setPointerCapture?.(e.pointerId),this.renderRoot.querySelector(`.lintje-split-pane__handle`)?.focus(),this.#t=this.value,this.#n=e.clientX,this.dragging=!0)},this.onPointerMove=e=>{if(!this.dragging)return;let t=this.splitAt(e.clientX);t!==null&&(this.value=t)},this.onPointerUp=e=>{if(!this.dragging||this.#r)return;let t=e.currentTarget;t.hasPointerCapture?.(e.pointerId)&&t.releasePointerCapture(e.pointerId),Math.abs(e.clientX-this.#n)<=f?(this.#r=!0,document.addEventListener(`pointerdown`,this.onOutside,!0)):(this.dragging=!1,this.commit(this.value,this.#t))},this.onPlace=e=>{if(!this.#r||e.button!==0)return;e.preventDefault(),this.#i=!0;let t=this.splitAt(e.clientX);this.#a(),this.commit(t??this.value,this.#t)},this.onPlacedClick=e=>{this.#i&&(this.#i=!1,e.preventDefault(),e.stopPropagation())},this.onOutside=e=>{e.composedPath().includes(this)||this.cancelLift()},this.onKeydown=e=>{if(this.#r&&e.key===`Escape`){e.preventDefault(),e.stopPropagation(),this.cancelLift();return}this.cancelLift();let t=h(e.key,this.value,this.min,this.max);t!==null&&(e.preventDefault(),this.commit(t))}}static{this.styles=s(l)}static{this.properties={value:{type:Number},min:{type:Number},max:{type:Number},storageKey:{type:String,attribute:`storage-key`},startLabel:{type:String,attribute:`start-label`},endLabel:{type:String,attribute:`end-label`},pane:{type:String,reflect:!0},dragging:{state:!0}}}#e;willUpdate(e){if(super.willUpdate(e),e.has(`storageKey`)&&this.storageKey){let e=g(this.storageKey);e!==null&&(this.value=e)}let t=p(this.value,this.min,this.max);t!==this.value&&(this.value=t)}#t;#n;#r;#i;commit(e,t=this.value){this.value=p(e,this.min,this.max),this.value!==t&&(this.storageKey&&_(this.storageKey,this.value),this.emit(`lintje-split-change`,this.value))}get block(){return this.renderRoot.querySelector(`.lintje-split-pane`)}splitAt(e){let t=this.block?.getBoundingClientRect();return t?m(e,t.left,t.width,this.min,this.max):null}#a(){this.#r=!1,this.dragging=!1,document.removeEventListener(`pointerdown`,this.onOutside,!0)}cancelLift(){this.#r&&(this.#a(),this.value=this.#t)}disconnectedCallback(){this.#a(),super.disconnectedCallback()}onPaneChange(e){e.stopPropagation();let t=e.detail===`end`?`end`:`start`;t!==this.pane&&(this.pane=t,this.emit(`lintje-pane-change`,t))}render(){let t=this.#e.matches,n=Math.round(this.value);return r`${t?r`<lintje-segmented
             class="lintje-split-pane__choice"
             label="Paneel kiezen"
             hide-label
             value=${this.pane}
             .options=${[{value:`start`,label:this.startLabel},{value:`end`,label:this.endLabel}]}
             @lintje-change=${this.onPaneChange}
-          ></lintje-segmented>`:s}<div
-      class=${o({"lintje-split-pane":!0,"lintje-split-pane--phone":e,"is-dragging":this.dragging})}
-      ${n({"--lintje-split":String(this.value)})}
+          ></lintje-segmented>`:a}<div
+      class=${o({"lintje-split-pane":!0,"lintje-split-pane--phone":t,"is-dragging":this.dragging})}
+      ${e({"--lintje-split":String(this.value)})}
       @pointerdown=${this.onPlace}
       @pointermove=${this.onPointerMove}
       @click=${{handleEvent:this.onPlacedClick,capture:!0}}
@@ -15,13 +15,13 @@ import{$t as e,Jt as t,St as n,Xt as r,Zt as i,in as a,lt as o,nn as s,qt as c}f
       <div
         id="start"
         class="lintje-split-pane__pane lintje-split-pane__pane--start"
-        ?hidden=${e&&this.pane!==`start`}
+        ?hidden=${t&&this.pane!==`start`}
       >
         <slot name="start"></slot>
       </div>
       <div
         class="lintje-split-pane__strip"
-        ?hidden=${e}
+        ?hidden=${t}
         @pointerdown=${this.onPointerDown}
         @pointerup=${this.onPointerUp}
         @pointercancel=${this.onPointerUp}
@@ -33,7 +33,7 @@ import{$t as e,Jt as t,St as n,Xt as r,Zt as i,in as a,lt as o,nn as s,qt as c}f
           tabindex="0"
           aria-orientation="vertical"
           aria-label="Verdeling aanpassen"
-          aria-valuenow=${t}
+          aria-valuenow=${n}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
           aria-controls="start"
@@ -42,8 +42,8 @@ import{$t as e,Jt as t,St as n,Xt as r,Zt as i,in as a,lt as o,nn as s,qt as c}f
       </div>
       <div
         class="lintje-split-pane__pane lintje-split-pane__pane--end"
-        ?hidden=${e&&this.pane!==`end`}
+        ?hidden=${t&&this.pane!==`end`}
       >
         <slot name="end"></slot>
       </div>
-    </div>`}};i(`lintje-split-pane`,v);export{v as LintjeSplitPane,d as SPLIT_RESET,u as SPLIT_STEP,p as clampSplit,h as splitFromKey,m as splitFromPointer};
+    </div>`}};c(`lintje-split-pane`,v);export{v as LintjeSplitPane,d as SPLIT_RESET,u as SPLIT_STEP,p as clampSplit,h as splitFromKey,m as splitFromPointer};

package/dist-elements/tag/status-dot.js

@@ -1 +1 @@
-export{k as LintjeStatusDot,A as STATUS_LABEL}from"../chunks/base-DuuwEY22.js";
+export{k as LintjeStatusDot,A as STATUS_LABEL}from"../chunks/base-BsZyWDre.js";

package/dist-elements/tag/stepper.js

@@ -1,30 +1,30 @@
-import{$t as e,Jt as t,U as n,Xt as r,Zt as i,dt as a,ft as o,in as s,lt as c,nn as l,qt as u}from"../chunks/base-DuuwEY22.js";import{t as d}from"../chunks/frame-resize-observer-BGZg6VbV.js";var f=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-stepper{font:var(--text-ui);color:var(--color-text-primary)}.lintje-stepper__list{display:flex}.lintje-stepper__list--row{gap:var(--space-2);flex-direction:row;overflow:hidden}.lintje-stepper__list--column{flex-direction:column}.lintje-stepper__step{align-items:flex-start;gap:var(--space-3);flex:none;display:flex;position:relative}.lintje-stepper__list--row .lintje-stepper__step{white-space:nowrap;flex:auto}.lintje-stepper__list--row .lintje-stepper__step:last-child{flex:none}.lintje-stepper__list--column .lintje-stepper__step:not(:last-child){padding-bottom:var(--space-4)}.lintje-stepper__line{border:0 dashed var(--color-border-heavy)}.lintje-stepper__step--done .lintje-stepper__line{border-style:solid;border-color:var(--color-accent-line)}.lintje-stepper__list--row .lintje-stepper__body{flex:auto}.lintje-stepper__list--row .lintje-stepper__line{min-width:var(--space-8);border-top-width:2px;flex:1 1 0}.lintje-stepper__list--column .lintje-stepper__line{top:calc((var(--h-target) + var(--h-chip-field)) / 2);bottom:calc((var(--h-chip-field) - var(--h-target)) / 2);left:calc(var(--h-chip-field) / 2 - 1px);border-left-width:2px;position:absolute}.lintje-stepper__body{flex-direction:column;display:flex}.lintje-stepper__list--column .lintje-stepper__body{flex:auto;min-width:0}.lintje-stepper__head{align-items:center;gap:var(--space-2);min-height:var(--h-target);display:flex}.lintje-stepper__head+.lintje-stepper__description,.lintje-stepper__head+.lintje-stepper__meta{margin-top:calc((var(--h-chip-field) - var(--h-target)) / 2)}.lintje-stepper__description{margin:0 0 var(--space-1);color:var(--color-text-secondary)}.lintje-stepper__meta{font:var(--text-small);color:var(--color-text-secondary)}.lintje-stepper__content{margin-top:var(--space-2)}.lintje-stepper__head+.lintje-stepper__content{margin-top:calc((var(--h-chip-field) - var(--h-target)) / 2 + var(--space-2))}.lintje-stepper__description+.lintje-stepper__content{margin-top:var(--space-1)}.lintje-stepper__marker{width:var(--h-chip-field);height:var(--h-chip-field);margin-top:calc((var(--h-target) - var(--h-chip-field)) / 2);border:1px solid #0000;flex:none;justify-content:center;align-items:center;font-size:.875rem;font-weight:700;display:inline-flex}.lintje-stepper__marker--next{border-color:var(--color-text-muted);color:var(--color-text-muted);font-weight:400}.lintje-stepper__step--next .lintje-stepper__name{color:var(--color-text-muted)}.lintje-stepper__marker--current{background:var(--color-action-primary);border-color:var(--color-action-primary-border);color:var(--color-action-primary-text)}.lintje-stepper__step--current .lintje-stepper__name{font-weight:700}.lintje-stepper__marker--done{border-color:var(--color-accent-line);color:var(--color-accent-text)}.lintje-stepper__marker--done.is-error{border-color:var(--color-error-line);color:var(--color-error-text)}.lintje-stepper__name--link{color:var(--color-link);transition:color var(--dur-hover) var(--ease-in-motion);position:relative}.lintje-stepper__name--link:after{content:"";inset:min(0px, calc((100% - var(--h-target)) / 2)) 0;position:absolute}.lintje-stepper__name--link:hover{color:var(--color-link-hover)}.lintje-stepper__errors{font:var(--text-small);color:var(--color-error-text);font-weight:700}.lintje-stepper--phone{gap:var(--space-2);flex-direction:column;display:flex}.lintje-stepper--phone .lintje-stepper__content{margin-top:0}.lintje-stepper__summary{justify-content:space-between;gap:var(--space-3);display:flex}.lintje-stepper__current{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:700;overflow:hidden}.lintje-stepper__count{color:var(--color-text-muted);flex:none}@media (forced-colors:active){.lintje-stepper__marker--current{border-color:highlight}}`;function p(e){return e===1?`1 fout`:`${e} fouten`}function m(e){let t=e.length,n=e.findIndex(e=>e.state===`current`),r=n<0?e.filter(e=>e.state===`done`).length:n+1;return{place:r,total:t,percent:t?Math.round(r/t*100):0}}function h(e,t,n,r){return e===`row`?n>t?`column`:`row`:r>0&&r<=t?`row`:`column`}var g={done:`gedaan`,current:`huidige stap`,next:`nog niet aan de beurt`},_=class extends r{constructor(...e){super(...e),this.steps=[],this.label=`Stappen`,this.orientation=`horizontal`,this.layout=`row`,this.#e=new t(this,u),this.#t=new d(()=>this.fit()),this.#n=0}static{this.styles=[a,e(f)]}static{this.properties={steps:{attribute:!1},label:{type:String},orientation:{type:String},layout:{state:!0}}}#e;#t;#n;connectedCallback(){super.connectedCallback(),this.#t.observe(this)}disconnectedCallback(){this.#t.disconnect(),super.disconnectedCallback()}willUpdate(e){super.willUpdate(e),e.has(`orientation`)&&(this.layout=this.vertical?`column`:`row`)}updated(e){super.updated(e),this.fit()}get vertical(){return this.orientation===`vertical`}get current(){return this.steps.find(e=>e.state===`current`)}fit(){if(this.vertical)return;let e=this.renderRoot.querySelector(`.lintje-stepper__list`);if(!e)return;let t=0;for(let n of e.querySelectorAll(`.lintje-stepper__line`))t+=n.offsetWidth-(parseFloat(getComputedStyle(n).minWidth)||0);let n=e.scrollWidth-t;this.layout===`row`&&(this.#n=n);let r=h(this.layout,e.clientWidth,n,this.#n);r!==this.layout&&(this.layout=r)}follow(e,t){n(e)&&this.followLink(t,e)}renderMarker(e,t){let n=e.state===`done`&&!!e.errors,r=c({"lintje-stepper__marker":!0,[`lintje-stepper__marker--${e.state}`]:!0,"is-error":n}),i=String(t+1);return e.state===`done`&&(i=o(n?`functioneel-waarschuwing`:`functioneel-vinkje`,{size:16})),s`<span class=${r} aria-hidden="true">${i}</span>`}renderName(e){if(e.state===`done`&&e.href){let t=e.href;return s`<a
+import{G as e,Qt as t,U as n,Zt as r,cn as i,en as a,gt as o,ht as s,on as c,pt as l,rn as u,tn as d}from"../chunks/base-BsZyWDre.js";var f=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-stepper{font:var(--text-ui);color:var(--color-text-primary)}.lintje-stepper__list{display:flex}.lintje-stepper__list--row{gap:var(--space-2);flex-direction:row;overflow:hidden}.lintje-stepper__list--column{flex-direction:column}.lintje-stepper__step{align-items:flex-start;gap:var(--space-3);flex:none;display:flex;position:relative}.lintje-stepper__list--row .lintje-stepper__step{white-space:nowrap;flex:auto}.lintje-stepper__list--row .lintje-stepper__step:last-child{flex:none}.lintje-stepper__list--column .lintje-stepper__step:not(:last-child){padding-bottom:var(--space-4)}.lintje-stepper__line{border:0 dashed var(--color-border-heavy)}.lintje-stepper__step--done .lintje-stepper__line{border-style:solid;border-color:var(--color-accent-line)}.lintje-stepper__list--row .lintje-stepper__body{flex:auto}.lintje-stepper__list--row .lintje-stepper__line{min-width:var(--space-8);border-top-width:2px;flex:1 1 0}.lintje-stepper__list--column .lintje-stepper__line{top:calc((var(--h-target) + var(--h-chip-field)) / 2);bottom:calc((var(--h-chip-field) - var(--h-target)) / 2);left:calc(var(--h-chip-field) / 2 - 1px);border-left-width:2px;position:absolute}.lintje-stepper__body{flex-direction:column;display:flex}.lintje-stepper__list--column .lintje-stepper__body{flex:auto;min-width:0}.lintje-stepper__head{align-items:center;gap:var(--space-2);min-height:var(--h-target);display:flex}.lintje-stepper__head+.lintje-stepper__description,.lintje-stepper__head+.lintje-stepper__meta{margin-top:calc((var(--h-chip-field) - var(--h-target)) / 2)}.lintje-stepper__description{margin:0 0 var(--space-1);color:var(--color-text-secondary)}.lintje-stepper__meta{font:var(--text-small);color:var(--color-text-secondary)}.lintje-stepper__content{margin-top:var(--space-2)}.lintje-stepper__head+.lintje-stepper__content{margin-top:calc((var(--h-chip-field) - var(--h-target)) / 2 + var(--space-2))}.lintje-stepper__description+.lintje-stepper__content{margin-top:var(--space-1)}.lintje-stepper__marker{width:var(--h-chip-field);height:var(--h-chip-field);margin-top:calc((var(--h-target) - var(--h-chip-field)) / 2);border:1px solid #0000;flex:none;justify-content:center;align-items:center;font-size:.875rem;font-weight:700;display:inline-flex}.lintje-stepper__marker--next{border-color:var(--color-text-muted);color:var(--color-text-muted);font-weight:400}.lintje-stepper__step--next .lintje-stepper__name{color:var(--color-text-muted)}.lintje-stepper__marker--current{background:var(--color-action-primary);border-color:var(--color-action-primary-border);color:var(--color-action-primary-text)}.lintje-stepper__step--current .lintje-stepper__name{font-weight:700}.lintje-stepper__marker--done{border-color:var(--color-accent-line);color:var(--color-accent-text)}.lintje-stepper__marker--done.is-error{border-color:var(--color-error-line);color:var(--color-error-text)}.lintje-stepper__name--link{color:var(--color-link);transition:color var(--dur-hover) var(--ease-in-motion);position:relative}.lintje-stepper__name--link:after{content:"";inset:min(0px, calc((100% - var(--h-target)) / 2)) 0;position:absolute}.lintje-stepper__name--link:hover{color:var(--color-link-hover)}.lintje-stepper__errors{font:var(--text-small);color:var(--color-error-text);font-weight:700}.lintje-stepper--phone{gap:var(--space-2);flex-direction:column;display:flex}.lintje-stepper--phone .lintje-stepper__content{margin-top:0}.lintje-stepper__summary{justify-content:space-between;align-items:baseline;gap:var(--space-3);display:flex}.lintje-stepper__current{overflow-wrap:anywhere;min-width:0;font-weight:700}.lintje-stepper__count{color:var(--color-text-muted);flex:none}@media (forced-colors:active){.lintje-stepper__marker--current{border-color:highlight}}`;function p(e){return e===1?`1 fout`:`${e} fouten`}function m(e){let t=e.length,n=e.findIndex(e=>e.state===`current`),r=n<0?e.filter(e=>e.state===`done`).length:n+1;return{place:r,total:t,percent:t?Math.round(r/t*100):0}}function h(e,t,n,r){return e===`row`?n>t?`column`:`row`:r>0&&r<=t?`row`:`column`}var g={done:`gedaan`,current:`huidige stap`,next:`nog niet aan de beurt`},_=class extends a{constructor(...n){super(...n),this.steps=[],this.label=`Stappen`,this.orientation=`horizontal`,this.layout=`row`,this.#e=new t(this,r),this.#t=new e(()=>this.fit()),this.#n=0}static{this.styles=[s,u(f)]}static{this.properties={steps:{attribute:!1},label:{type:String},orientation:{type:String},layout:{state:!0}}}#e;#t;#n;connectedCallback(){super.connectedCallback(),this.#t.observe(this)}disconnectedCallback(){this.#t.disconnect(),super.disconnectedCallback()}willUpdate(e){super.willUpdate(e),e.has(`orientation`)&&(this.layout=this.vertical?`column`:`row`)}updated(e){super.updated(e),this.fit()}get vertical(){return this.orientation===`vertical`}get current(){return this.steps.find(e=>e.state===`current`)}fit(){if(this.vertical)return;let e=this.renderRoot.querySelector(`.lintje-stepper__list`);if(!e)return;let t=0;for(let n of e.querySelectorAll(`.lintje-stepper__line`))t+=n.offsetWidth-(parseFloat(getComputedStyle(n).minWidth)||0);let n=e.scrollWidth-t;this.layout===`row`&&(this.#n=n);let r=h(this.layout,e.clientWidth,n,this.#n);r!==this.layout&&(this.layout=r)}follow(e,t){n(e)&&this.followLink(t,e)}renderMarker(e,t){let n=e.state===`done`&&!!e.errors,r=l({"lintje-stepper__marker":!0,[`lintje-stepper__marker--${e.state}`]:!0,"is-error":n}),a=String(t+1);return e.state===`done`&&(a=o(n?`functioneel-waarschuwing`:`functioneel-vinkje`,{size:16})),i`<span class=${r} aria-hidden="true">${a}</span>`}renderName(e){if(e.state===`done`&&e.href){let t=e.href;return i`<a
         class="lintje-stepper__name lintje-stepper__name--link"
         href=${t}
         @click=${e=>this.follow(e,t)}
         >${e.label}<span class="visually-hidden">, ${g.done}</span></a
-      >`}return s`<span class="lintje-stepper__name"
+      >`}return i`<span class="lintje-stepper__name"
       >${e.label}<span class="visually-hidden">, ${g[e.state]}</span></span
-    >`}renderContent(e){return e?.value?s`<div class="lintje-stepper__content"><slot name=${e.value}></slot></div>`:l}renderBody(e,t){let n=this.layout===`column`,r=n?e.description:void 0;return s`<div class="lintje-stepper__body">
+    >`}renderContent(e){return e?.value?i`<div class="lintje-stepper__content"><slot name=${e.value}></slot></div>`:c}renderBody(e,t){let n=this.layout===`column`,r=n?e.description:void 0;return i`<div class="lintje-stepper__body">
       <div class="lintje-stepper__head">
-        ${this.renderName(e)}${e.state===`done`&&e.errors?s`<span class="lintje-stepper__errors">${p(e.errors)}</span>`:l}${t?l:s`<span class="lintje-stepper__line"></span>`}
+        ${this.renderName(e)}${e.state===`done`&&e.errors?i`<span class="lintje-stepper__errors">${p(e.errors)}</span>`:c}${t?c:i`<span class="lintje-stepper__line"></span>`}
       </div>
-      ${r?s`<p class="lintje-stepper__description">${r}</p>`:l}${e.meta?s`<span class="lintje-stepper__meta">${e.meta}</span>`:l}${n?this.renderContent(e):l}
-    </div>`}renderPhone(){let{place:e,total:t,percent:n}=m(this.steps),r=this.steps[e-1],i=`Stap ${e} van ${t}`;return s`<nav class="lintje-stepper lintje-stepper--phone" aria-label=${this.label}>
+      ${r?i`<p class="lintje-stepper__description">${r}</p>`:c}${e.meta?i`<span class="lintje-stepper__meta">${e.meta}</span>`:c}${n?this.renderContent(e):c}
+    </div>`}renderPhone(){let{place:e,total:t,percent:n}=m(this.steps),r=this.steps[e-1],a=`Stap ${e} van ${t}`;return i`<nav class="lintje-stepper lintje-stepper--phone" aria-label=${this.label}>
       <div class="lintje-stepper__summary">
         <strong class="lintje-stepper__current">${r?.label??``}</strong>
-        <span class="lintje-stepper__count">${i}</span>
+        <span class="lintje-stepper__count">${a}</span>
       </div>
-      <lintje-progress-bar hide-label label=${i} value=${n}></lintje-progress-bar>
+      <lintje-progress-bar hide-label label=${a} value=${n}></lintje-progress-bar>
       ${this.renderContent(this.current)}
-    </nav>`}render(){return this.#e.matches&&!this.vertical?this.renderPhone():s`<nav class="lintje-stepper" aria-label=${this.label}>
+    </nav>`}render(){return this.#e.matches&&!this.vertical?this.renderPhone():i`<nav class="lintje-stepper" aria-label=${this.label}>
       <ol class="lintje-stepper__list lintje-stepper__list--${this.layout}">
-        ${this.steps.map((e,t)=>s`<li
-            class=${c({"lintje-stepper__step":!0,[`lintje-stepper__step--${e.state}`]:!0})}
-            aria-current=${e.state===`current`?`step`:l}
+        ${this.steps.map((e,t)=>i`<li
+            class=${l({"lintje-stepper__step":!0,[`lintje-stepper__step--${e.state}`]:!0})}
+            aria-current=${e.state===`current`?`step`:c}
           >
             ${this.renderMarker(e,t)}${this.renderBody(e,t===this.steps.length-1)}
           </li>`)}
       </ol>
-      ${this.layout===`row`?this.renderContent(this.current):l}
-    </nav>`}};i(`lintje-stepper`,_);export{_ as LintjeStepper,h as chooseLayout,p as errorText,m as position};
+      ${this.layout===`row`?this.renderContent(this.current):c}
+    </nav>`}};d(`lintje-stepper`,_);export{_ as LintjeStepper,h as chooseLayout,p as errorText,m as position};

package/dist-elements/tag/streaming-text.js

@@ -1,11 +1,11 @@
-import{$t as e,Xt as t,Zt as n,et as r,in as i,lt as a,nn as o}from"../chunks/base-DuuwEY22.js";import{t as s}from"../chunks/live-message-CYZ-Ch7D.js";import{t as c}from"../chunks/sentence-end-DqHdi7Wb.js";var l=`:host{min-width:0;display:block}:host([hidden]){display:none}:host([variant=plain]){font:inherit}.lintje-streaming-text{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.lintje-streaming-text__box{padding:var(--space-3);background:var(--color-bg-page);border:1px solid var(--color-border-default);font:var(--text-body);color:var(--color-text-primary);overflow-wrap:anywhere}.lintje-streaming-text__plain{white-space:pre-wrap}.lintje-streaming-text__box--waiting{align-items:center;gap:var(--space-2);font:var(--text-ui);display:flex}.lintje-streaming-text__waiting{color:var(--color-text-muted)}.lintje-streaming-text__caret{width:8px;height:18px;margin-left:var(--space-1);vertical-align:text-bottom;background:var(--color-accent-line);animation:lintje-caret-blink var(--dur-skeleton) steps(1, end) infinite;display:inline-block}@keyframes lintje-caret-blink{0%{opacity:1}50%{opacity:0}}@media (prefers-reduced-motion:reduce){.lintje-streaming-text__caret{animation:none}}@media print{.lintje-streaming-text__caret{display:none}}.lintje-streaming-text--plain .lintje-streaming-text__box{font:inherit;background:0 0;border:0;padding:0}.lintje-streaming-text--plain .lintje-streaming-text__box--waiting{font:var(--text-ui)}.lintje-streaming-text__foot{align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.lintje-streaming-text__note{font:var(--text-small);color:var(--color-text-muted)}.lintje-streaming-text__note--error{font:var(--text-small);color:var(--color-error-text);font-weight:700}`,u=`Gestopt`,d=`De verbinding viel weg. De tekst is niet af.`,f=class extends t{constructor(...e){super(...e),this.text=``,this.state=`waiting`,this.label=`Bezig met schrijven`,this.variant=`box`,this.spoken=[],this.said=0,this.#e=new s(this),this.focusRetry=!1}static{this.styles=e(l)}static{this.properties={text:{type:String},state:{type:String,reflect:!0},message:{type:String},label:{type:String},variant:{type:String,reflect:!0},spoken:{state:!0}}}#e;get ended(){return this.state===`done`||this.state===`stopped`||this.state===`error`}willUpdate(e){if(super.willUpdate(e),e.get(`state`)===`streaming`&&this.ended){let e=this.renderRoot.querySelector(`.lintje-streaming-text__stop`);e&&r(e)&&(this.focusRetry=!0)}if((e.has(`state`)||e.has(`label`))&&(this.state===`waiting`?this.#e.say(this.label):this.#e.clear()),!e.has(`text`)&&!e.has(`state`)&&!e.has(`message`))return;let t=e.get(`text`)??``,n=e.has(`text`)&&!this.text.startsWith(t)||e.has(`state`)&&this.state===`waiting`,i=n?[]:[...this.spoken];n&&(this.said=0);let a=this.text.slice(this.said),o=this.ended?a.length:c(a);if(o>0){let e=a.slice(0,o).trim();e&&i.push(e),this.said+=o}e.has(`state`)&&this.state===`stopped`&&i.push(u),(e.has(`state`)||e.has(`message`))&&this.state===`error`&&i.push(this.message||d),(n||i.length!==this.spoken.length)&&(this.spoken=i)}updated(e){if(super.updated(e),!this.focusRetry||!this.ended)return;this.focusRetry=!1;let t=this.renderRoot.querySelector(`.lintje-streaming-text__retry`);t?t.updateComplete.then(()=>t.shadowRoot?.querySelector(`button`)?.focus()):this.renderRoot.querySelector(`.lintje-streaming-text__box`)?.focus()}stop(){this.focusRetry=!0,this.emit(`lintje-stop`)}renderBox(){if(this.state===`waiting`)return i`<div class="lintje-streaming-text__box lintje-streaming-text__box--waiting">
+import{cn as e,en as t,on as n,pt as r,rn as i,rt as a,tn as o}from"../chunks/base-BsZyWDre.js";import{t as s}from"../chunks/live-message-CYZ-Ch7D.js";import{t as c}from"../chunks/sentence-end-DqHdi7Wb.js";var l=`:host{min-width:0;display:block}:host([hidden]){display:none}:host([variant=plain]){font:inherit}.lintje-streaming-text{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.lintje-streaming-text__box{padding:var(--space-3);background:var(--color-bg-page);border:1px solid var(--color-border-default);font:var(--text-body);color:var(--color-text-primary);overflow-wrap:anywhere}.lintje-streaming-text__plain{white-space:pre-wrap}.lintje-streaming-text__box--waiting{align-items:center;gap:var(--space-2);font:var(--text-ui);display:flex}.lintje-streaming-text__waiting{color:var(--color-text-muted)}.lintje-streaming-text__caret{width:8px;height:18px;margin-left:var(--space-1);vertical-align:text-bottom;background:var(--color-accent-line);animation:lintje-caret-blink var(--dur-skeleton) steps(1, end) infinite;display:inline-block}@keyframes lintje-caret-blink{0%{opacity:1}50%{opacity:0}}@media (prefers-reduced-motion:reduce){.lintje-streaming-text__caret{animation:none}}@media print{.lintje-streaming-text__caret{display:none}}.lintje-streaming-text--plain .lintje-streaming-text__box{font:inherit;background:0 0;border:0;padding:0}.lintje-streaming-text--plain .lintje-streaming-text__box--waiting{font:var(--text-ui)}.lintje-streaming-text__foot{align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.lintje-streaming-text__note{font:var(--text-small);color:var(--color-text-muted)}.lintje-streaming-text__note--error{font:var(--text-small);color:var(--color-error-text);font-weight:700}`,u=`Gestopt`,d=`De verbinding viel weg. De tekst is niet af.`,f=class extends t{constructor(...e){super(...e),this.text=``,this.state=`waiting`,this.label=`Bezig met schrijven`,this.variant=`box`,this.spoken=[],this.said=0,this.#e=new s(this),this.focusRetry=!1}static{this.styles=i(l)}static{this.properties={text:{type:String},state:{type:String,reflect:!0},message:{type:String},label:{type:String},variant:{type:String,reflect:!0},spoken:{state:!0}}}#e;get ended(){return this.state===`done`||this.state===`stopped`||this.state===`error`}willUpdate(e){if(super.willUpdate(e),e.get(`state`)===`streaming`&&this.ended){let e=this.renderRoot.querySelector(`.lintje-streaming-text__stop`);e&&a(e)&&(this.focusRetry=!0)}if((e.has(`state`)||e.has(`label`))&&(this.state===`waiting`?this.#e.say(this.label):this.#e.clear()),!e.has(`text`)&&!e.has(`state`)&&!e.has(`message`))return;let t=e.get(`text`)??``,n=e.has(`text`)&&!this.text.startsWith(t)||e.has(`state`)&&this.state===`waiting`,r=n?[]:[...this.spoken];n&&(this.said=0);let i=this.text.slice(this.said),o=this.ended?i.length:c(i);if(o>0){let e=i.slice(0,o).trim();e&&r.push(e),this.said+=o}e.has(`state`)&&this.state===`stopped`&&r.push(u),(e.has(`state`)||e.has(`message`))&&this.state===`error`&&r.push(this.message||d),(n||r.length!==this.spoken.length)&&(this.spoken=r)}updated(e){if(super.updated(e),!this.focusRetry||!this.ended)return;this.focusRetry=!1;let t=this.renderRoot.querySelector(`.lintje-streaming-text__retry`);t?t.updateComplete.then(()=>t.shadowRoot?.querySelector(`button`)?.focus()):this.renderRoot.querySelector(`.lintje-streaming-text__box`)?.focus()}stop(){this.focusRetry=!0,this.emit(`lintje-stop`)}renderBox(){if(this.state===`waiting`)return e`<div class="lintje-streaming-text__box lintje-streaming-text__box--waiting">
         <lintje-spinner></lintje-spinner>
         <span class="lintje-streaming-text__waiting">${this.label}</span>
-      </div>`;if(this.state===`done`)return i`<div class="lintje-streaming-text__box" tabindex="-1">
+      </div>`;if(this.state===`done`)return e`<div class="lintje-streaming-text__box" tabindex="-1">
         <slot><span class="lintje-streaming-text__plain">${this.text}</span></slot>
-      </div>`;if(!this.text&&this.state!==`streaming`)return o;let e=this.state===`streaming`;return i`<div class="lintje-streaming-text__box" aria-busy=${e?`true`:`false`}
-      ><span class="lintje-streaming-text__plain">${this.text}</span>${e?i`<span class="lintje-streaming-text__caret" aria-hidden="true"></span>`:o}</div
-    >`}renderFoot(){if(this.state===`streaming`)return i`<div class="lintje-streaming-text__foot">
+      </div>`;if(!this.text&&this.state!==`streaming`)return n;let t=this.state===`streaming`;return e`<div class="lintje-streaming-text__box" aria-busy=${t?`true`:`false`}
+      ><span class="lintje-streaming-text__plain">${this.text}</span>${t?e`<span class="lintje-streaming-text__caret" aria-hidden="true"></span>`:n}</div
+    >`}renderFoot(){if(this.state===`streaming`)return e`<div class="lintje-streaming-text__foot">
         <lintje-button
           class="lintje-streaming-text__stop"
           variant="secondary"
@@ -13,10 +13,10 @@ import{$t as e,Xt as t,Zt as n,et as r,in as i,lt as a,nn as o}from"../chunks/ba
           @click=${this.stop}
           >Stoppen</lintje-button
         >
-      </div>`;if(this.state!==`stopped`&&this.state!==`error`)return o;let e=this.state===`error`;return i`<div class="lintje-streaming-text__foot">
+      </div>`;if(this.state!==`stopped`&&this.state!==`error`)return n;let t=this.state===`error`;return e`<div class="lintje-streaming-text__foot">
       <span
-        class=${a({"lintje-streaming-text__note":!0,"lintje-streaming-text__note--error":e})}
-        >${e?this.message||d:u}</span
+        class=${r({"lintje-streaming-text__note":!0,"lintje-streaming-text__note--error":t})}
+        >${t?this.message||d:u}</span
       >
       <lintje-button
         class="lintje-streaming-text__retry"
@@ -25,12 +25,12 @@ import{$t as e,Xt as t,Zt as n,et as r,in as i,lt as a,nn as o}from"../chunks/ba
         @click=${()=>this.emit(`lintje-retry`)}
         >Opnieuw</lintje-button
       >
-    </div>`}render(){return i`<div
-      class=${a({"lintje-streaming-text":!0,"lintje-streaming-text--plain":this.variant===`plain`})}
+    </div>`}render(){return e`<div
+      class=${r({"lintje-streaming-text":!0,"lintje-streaming-text--plain":this.variant===`plain`})}
     >
       ${this.renderBox()} ${this.renderFoot()}
       <div class="visually-hidden" aria-live="polite" aria-atomic="false">
-        ${this.#e.text?i`<p>${this.#e.text}</p>`:o}
-        ${this.spoken.map(e=>i`<p>${e}</p>`)}
+        ${this.#e.text?e`<p>${this.#e.text}</p>`:n}
+        ${this.spoken.map(t=>e`<p>${t}</p>`)}
       </div>
-    </div>`}};n(`lintje-streaming-text`,f);export{f as LintjeStreamingText,c as sentenceEnd};
+    </div>`}};o(`lintje-streaming-text`,f);export{f as LintjeStreamingText,c as sentenceEnd};

package/dist-elements/tag/sub-nav.js

@@ -1,31 +1,31 @@
-import{$t as e,Jt as t,U as n,Xt as r,Zt as i,ct as a,dt as o,et as s,ft as c,in as l,lt as u,nn as d,qt as f,st as p}from"../chunks/base-DuuwEY22.js";var m=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-sub-nav{font:var(--text-ui)}.lintje-sub-nav__group+.lintje-sub-nav__group{margin-top:var(--space-6)}.lintje-sub-nav__heading{padding:var(--space-3) 0 var(--space-1);font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--color-text-muted);margin:0;line-height:1.3}.lintje-sub-nav__list{margin:0;padding:0;list-style:none}.lintje-sub-nav__list--nested{margin-bottom:var(--space-1);padding-left:calc(var(--space-6) - 2px);border-left:2px solid var(--color-border-default)}.lintje-sub-nav__link{align-items:flex-start;gap:var(--space-2);box-sizing:border-box;min-height:var(--h-nav-row);margin:0 calc(var(--space-2) * -1);padding:var(--space-3) var(--space-2);font:inherit;color:var(--color-link);text-align:left;cursor:pointer;transition:color var(--dur-hover) var(--ease-in-motion);background:0 0;border:0;line-height:1.5;text-decoration:none;display:flex}.lintje-sub-nav__link--action{width:calc(100% + var(--space-2) * 2)}.lintje-sub-nav__label{text-underline-offset:.2em;min-width:0}.lintje-sub-nav__link:hover{color:var(--color-link-hover)}.lintje-sub-nav__link:hover .lintje-sub-nav__label{text-decoration:underline}.lintje-sub-nav__link.is-current{color:var(--color-text-primary);cursor:default;font-weight:700}.lintje-sub-nav__link.is-current .lintje-sub-nav__label{text-decoration:none}.lintje-sub-nav__link.is-ancestor{color:var(--color-text-primary)}.lintje-sub-nav__link.is-no-page,.lintje-sub-nav__link.is-no-access{color:var(--color-text-disabled);cursor:default}.lintje-sub-nav__link.is-no-access{cursor:not-allowed}.lintje-sub-nav__link.is-no-access .lintje-sub-nav__label{text-decoration:line-through}.lintje-sub-nav__icon{flex:none;margin-top:2px}.lintje-sub-nav__lock{margin-top:var(--space-1);flex:none}.lintje-sub-nav__count{flex:none}.lintje-sub-nav__toggle{justify-content:space-between;align-items:center;gap:var(--space-3);width:100%;min-height:var(--h-control);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-4);border:1px solid var(--color-border-field);background:var(--color-bg-surface);color:var(--color-text-primary);font:inherit;text-align:left;cursor:pointer;transition:background var(--dur-hover) var(--ease-in-motion);display:flex}.lintje-sub-nav__toggle:hover{background:var(--color-bg-subtle)}.lintje-sub-nav__toggle-text{flex-direction:column;min-width:0;display:flex}.lintje-sub-nav__toggle-group{font:var(--text-small);color:var(--color-text-muted)}.lintje-sub-nav__toggle-current{font-weight:700}.lintje-sub-nav__toggle-icon{transition:transform var(--dur-hover) var(--ease-in-motion);flex:none}.lintje-sub-nav__toggle.is-open .lintje-sub-nav__toggle-icon{transform:rotate(180deg)}.lintje-sub-nav__panel{padding:var(--space-1) var(--space-6) var(--space-2);border:1px solid var(--color-border-field);background:var(--color-bg-surface);border-top:0}@media (prefers-reduced-motion:reduce){.lintje-sub-nav__link,.lintje-sub-nav__toggle,.lintje-sub-nav__toggle-icon{transition:none}}@media (forced-colors:active){.lintje-sub-nav__link.is-current{text-decoration:underline}.lintje-sub-nav__link.is-no-page,.lintje-sub-nav__link.is-no-access{color:graytext}}`,h=e=>!!e.active||!!e.items?.some(h);function g(e){let t=e=>{for(let n of e){if(n.active)return n;let e=n.items?t(n.items):null;if(e)return e}return null};for(let n of e){let e=t(n.items);if(e)return{item:e,group:n.label}}return null}var _=0,v=class extends r{constructor(...e){super(...e),this.groups=[],this.label=`Submenu`,this.expanded=!1,this.open=!1,this.#e=new t(this,f),this.#t=`lintje-sub-nav-${++_}`}static{this.styles=[o,p,e(m)]}static{this.properties={groups:{attribute:!1},action:{attribute:!1},label:{type:String},expanded:{type:Boolean},open:{state:!0}}}#e;#t;#n(){let e=this.renderRoot.querySelector(`.lintje-sub-nav__panel`);e&&s(e)&&this.renderRoot.querySelector(`.lintje-sub-nav__toggle`)?.focus(),this.open=!1}follow(e,t){n(e)&&(this.#n(),this.followLink(t,e))}act(e){this.#n(),this.emit(`lintje-action`,{value:e})}onKeydown(e){e.key===`Escape`&&this.open&&(e.stopPropagation(),this.open=!1,this.renderRoot.querySelector(`.lintje-sub-nav__toggle`)?.focus())}renderItem(e){let t=e.items?.length&&(this.expanded||h(e))?e.items:null,n=!e.active&&h(e),r=e.icon?c(e.icon,{size:20,className:`lintje-sub-nav__icon`}):d,i=e.badge?a({value:e.badge.value,variant:`count`,label:e.badge.label,className:`lintje-sub-nav__count`}):d,o=l`<span class="lintje-sub-nav__label">${e.label}</span>`,s;if(e.noAccess||!e.href){let t=c(`gebruiksvoorwerpen-hangslot-dicht`,{size:16,label:`Geen toegang`,className:`lintje-sub-nav__lock`});s=l`<span
+import{Qt as e,U as t,Zt as n,cn as r,dt as i,en as a,ft as o,gt as s,ht as c,on as l,pt as u,rn as d,rt as f,tn as p}from"../chunks/base-BsZyWDre.js";var m=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-sub-nav{font:var(--text-ui)}.lintje-sub-nav__group+.lintje-sub-nav__group{margin-top:var(--space-6)}.lintje-sub-nav__heading{padding:var(--space-3) 0 var(--space-1);font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--color-text-muted);margin:0;line-height:1.3}.lintje-sub-nav__list{margin:0;padding:0;list-style:none}.lintje-sub-nav__list--nested{margin-bottom:var(--space-1);padding-left:calc(var(--space-6) - 2px);border-left:2px solid var(--color-border-default)}.lintje-sub-nav__link{align-items:flex-start;gap:var(--space-2);box-sizing:border-box;min-height:var(--h-nav-row);margin:0 calc(var(--space-2) * -1);padding:var(--space-3) var(--space-2);font:inherit;color:var(--color-link);text-align:left;cursor:pointer;transition:color var(--dur-hover) var(--ease-in-motion);background:0 0;border:0;line-height:1.5;text-decoration:none;display:flex}.lintje-sub-nav__link--action{width:calc(100% + var(--space-2) * 2)}.lintje-sub-nav__label{text-underline-offset:.2em;min-width:0}.lintje-sub-nav__link:hover{color:var(--color-link-hover)}.lintje-sub-nav__link:hover .lintje-sub-nav__label{text-decoration:underline}.lintje-sub-nav__link.is-current{color:var(--color-text-primary);cursor:default;font-weight:700}.lintje-sub-nav__link.is-current .lintje-sub-nav__label{text-decoration:none}.lintje-sub-nav__link.is-ancestor{color:var(--color-text-primary)}.lintje-sub-nav__link.is-no-page,.lintje-sub-nav__link.is-no-access{color:var(--color-text-disabled);cursor:default}.lintje-sub-nav__link.is-no-access{cursor:not-allowed}.lintje-sub-nav__link.is-no-access .lintje-sub-nav__label{text-decoration:line-through}.lintje-sub-nav__icon{flex:none;margin-top:2px}.lintje-sub-nav__lock{margin-top:var(--space-1);flex:none}.lintje-sub-nav__count{flex:none}.lintje-sub-nav__toggle{justify-content:space-between;align-items:center;gap:var(--space-3);width:100%;min-height:var(--h-control);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-4);border:1px solid var(--color-border-field);background:var(--color-bg-surface);color:var(--color-text-primary);font:inherit;text-align:left;cursor:pointer;transition:background var(--dur-hover) var(--ease-in-motion);display:flex}.lintje-sub-nav__toggle:hover{background:var(--color-bg-subtle)}.lintje-sub-nav__toggle-text{flex-direction:column;min-width:0;display:flex}.lintje-sub-nav__toggle-group{font:var(--text-small);color:var(--color-text-muted)}.lintje-sub-nav__toggle-current{font-weight:700}.lintje-sub-nav__toggle-icon{transition:transform var(--dur-hover) var(--ease-in-motion);flex:none}.lintje-sub-nav__toggle.is-open .lintje-sub-nav__toggle-icon{transform:rotate(180deg)}.lintje-sub-nav__panel{padding:var(--space-1) var(--space-6) var(--space-2);border:1px solid var(--color-border-field);background:var(--color-bg-surface);border-top:0}@media (prefers-reduced-motion:reduce){.lintje-sub-nav__link,.lintje-sub-nav__toggle,.lintje-sub-nav__toggle-icon{transition:none}}@media (forced-colors:active){.lintje-sub-nav__link.is-current{text-decoration:underline}.lintje-sub-nav__link.is-no-page,.lintje-sub-nav__link.is-no-access{color:graytext}}`,h=e=>!!e.active||!!e.items?.some(h);function g(e){let t=e=>{for(let n of e){if(n.active)return n;let e=n.items?t(n.items):null;if(e)return e}return null};for(let n of e){let e=t(n.items);if(e)return{item:e,group:n.label}}return null}var _=0,v=class extends a{constructor(...t){super(...t),this.groups=[],this.label=`Submenu`,this.expanded=!1,this.open=!1,this.#e=new e(this,n),this.#t=`lintje-sub-nav-${++_}`}static{this.styles=[c,i,d(m)]}static{this.properties={groups:{attribute:!1},action:{attribute:!1},label:{type:String},expanded:{type:Boolean},open:{state:!0}}}#e;#t;#n(){let e=this.renderRoot.querySelector(`.lintje-sub-nav__panel`);e&&f(e)&&this.renderRoot.querySelector(`.lintje-sub-nav__toggle`)?.focus(),this.open=!1}follow(e,n){t(e)&&(this.#n(),this.followLink(n,e))}act(e){this.#n(),this.emit(`lintje-action`,{value:e})}onKeydown(e){e.key===`Escape`&&this.open&&(e.stopPropagation(),this.open=!1,this.renderRoot.querySelector(`.lintje-sub-nav__toggle`)?.focus())}renderItem(e){let t=e.items?.length&&(this.expanded||h(e))?e.items:null,n=!e.active&&h(e),i=e.icon?s(e.icon,{size:20,className:`lintje-sub-nav__icon`}):l,a=e.badge?o({value:e.badge.value,variant:`count`,label:e.badge.label,className:`lintje-sub-nav__count`}):l,c=r`<span class="lintje-sub-nav__label">${e.label}</span>`,d;if(e.noAccess||!e.href){let t=s(`gebruiksvoorwerpen-hangslot-dicht`,{size:16,label:`Geen toegang`,className:`lintje-sub-nav__lock`});d=r`<span
         class=${u({"lintje-sub-nav__link":!0,"is-no-access":!!e.noAccess,"is-no-page":!e.noAccess})}
         aria-disabled="true"
-        >${r}${o}${e.noAccess?t===d?l`<span>geen toegang</span>`:t:l`<span class="visually-hidden"> (niet beschikbaar)</span>`}</span
-      >`}else{let t=e.href;s=l`<a
+        >${i}${c}${e.noAccess?t===l?r`<span>geen toegang</span>`:t:r`<span class="visually-hidden"> (niet beschikbaar)</span>`}</span
+      >`}else{let t=e.href;d=r`<a
         class=${u({"lintje-sub-nav__link":!0,"focus-inset":!0,"is-current":!!e.active,"is-ancestor":n})}
         href=${t}
-        aria-current=${e.active?`page`:d}
+        aria-current=${e.active?`page`:l}
         @click=${e=>this.follow(e,t)}
-        >${r}${o}${i}</a
-      >`}return l`<li>
-      ${s}${t?l`<ul class="lintje-sub-nav__list lintje-sub-nav__list--nested">
+        >${i}${c}${a}</a
+      >`}return r`<li>
+      ${d}${t?r`<ul class="lintje-sub-nav__list lintje-sub-nav__list--nested">
               ${t.map(e=>this.renderItem(e))}
-            </ul>`:d}
-    </li>`}renderGroups(){let e=this.action;return l`${this.groups.map((e,t)=>{let n=`${this.#t}-g${t}`;return l`<div class="lintje-sub-nav__group">
-        ${e.label?l`<p id=${n} class="lintje-sub-nav__heading">${e.label}</p>`:d}
-        <ul class="lintje-sub-nav__list" aria-labelledby=${e.label?n:d}>
+            </ul>`:l}
+    </li>`}renderGroups(){let e=this.action;return r`${this.groups.map((e,t)=>{let n=`${this.#t}-g${t}`;return r`<div class="lintje-sub-nav__group">
+        ${e.label?r`<p id=${n} class="lintje-sub-nav__heading">${e.label}</p>`:l}
+        <ul class="lintje-sub-nav__list" aria-labelledby=${e.label?n:l}>
           ${e.items.map(e=>this.renderItem(e))}
         </ul>
-      </div>`})}${e?l`<div class="lintje-sub-nav__group">
+      </div>`})}${e?r`<div class="lintje-sub-nav__group">
             <button
               type="button"
               class="lintje-sub-nav__link lintje-sub-nav__link--action focus-inset"
               @click=${()=>this.act(e.value)}
             >
-              ${c(e.icon??`functioneel-plus`,{size:20,className:`lintje-sub-nav__icon`})}<span class="lintje-sub-nav__label">${e.label}</span>
+              ${s(e.icon??`functioneel-plus`,{size:20,className:`lintje-sub-nav__icon`})}<span class="lintje-sub-nav__label">${e.label}</span>
             </button>
-          </div>`:d}`}renderPhone(){let e=g(this.groups),t=`${this.#t}-panel`;return l`<nav class="lintje-sub-nav" aria-label=${this.label} @keydown=${this.onKeydown}>
+          </div>`:l}`}renderPhone(){let e=g(this.groups),t=`${this.#t}-panel`;return r`<nav class="lintje-sub-nav" aria-label=${this.label} @keydown=${this.onKeydown}>
       <button
         type="button"
         class=${u({"lintje-sub-nav__toggle":!0,"is-open":this.open})}
@@ -34,10 +34,10 @@ import{$t as e,Jt as t,U as n,Xt as r,Zt as i,ct as a,dt as o,et as s,ft as c,in
         @click=${()=>this.open=!this.open}
       >
         <span class="lintje-sub-nav__toggle-text">
-          ${e?.group?l`<span class="lintje-sub-nav__toggle-group">${e.group}</span>`:d}
+          ${e?.group?r`<span class="lintje-sub-nav__toggle-group">${e.group}</span>`:l}
           <span class="lintje-sub-nav__toggle-current">${e?.item.label??this.label}</span>
         </span>
-        ${c(`functioneel-delta-omlaag`,{size:24,className:`lintje-sub-nav__toggle-icon`})}
+        ${s(`functioneel-delta-omlaag`,{size:24,className:`lintje-sub-nav__toggle-icon`})}
       </button>
       <div id=${t} class="lintje-sub-nav__panel" ?hidden=${!this.open}>${this.renderGroups()}</div>
-    </nav>`}render(){return!this.groups.length&&!this.action?d:this.#e.matches?this.renderPhone():l`<nav class="lintje-sub-nav" aria-label=${this.label}>${this.renderGroups()}</nav>`}};i(`lintje-sub-nav`,v);export{v as LintjeSubNav,g as activeEntry};
+    </nav>`}render(){return!this.groups.length&&!this.action?l:this.#e.matches?this.renderPhone():r`<nav class="lintje-sub-nav" aria-label=${this.label}>${this.renderGroups()}</nav>`}};p(`lintje-sub-nav`,v);export{v as LintjeSubNav,g as activeEntry};

package/dist-elements/tag/tabs.js

@@ -1,60 +1,60 @@
-import{$t as e,U as t,Xt as n,Zt as r,dt as i,ft as a,in as o,lt as s,nn as c}from"../chunks/base-DuuwEY22.js";var l=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-tabs__list{border-bottom:1px solid var(--color-border-heavy);flex-wrap:wrap;display:flex;position:relative}.lintje-tabs__tab{align-items:center;gap:var(--space-2);height:var(--h-touch);padding:0 var(--space-4);color:var(--color-text-primary);font:var(--text-ui);white-space:nowrap;transition:background var(--dur-hover) var(--ease-in-motion), border-color var(--dur-hover) var(--ease-in-motion);background:0 0;border-bottom:3px solid #0000;text-decoration:none;display:inline-flex}.lintje-tabs__tab:hover:not(.is-active):not(.is-disabled){background:var(--color-bg-subtle);border-bottom-color:var(--color-border-heavy)}.lintje-tabs__tab.is-active{border-bottom-color:var(--color-accent-line);color:var(--color-accent-text);font-weight:700}.lintje-tabs__tab.is-disabled{color:var(--color-text-disabled);cursor:not-allowed}.lintje-tabs__panel{padding-top:var(--space-4)}.lintje-tabs__panel.is-pressed:focus-visible{outline:none}@media screen and (width<=767px){.lintje-tabs__list{scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}.lintje-tabs__list::-webkit-scrollbar{display:none}.lintje-tabs__tab{flex:none}.lintje-tabs__list.is-scroll-start{box-shadow:var(--shadow-scroll-start)}.lintje-tabs__list.is-scroll-end{box-shadow:var(--shadow-scroll-end)}.lintje-tabs__list.is-scroll-start.is-scroll-end{box-shadow:var(--shadow-scroll-start), var(--shadow-scroll-end)}}@media (forced-colors:active){.lintje-tabs__tab.is-active{border-bottom-color:highlight}.lintje-tabs__tab.is-disabled{color:graytext}}.lintje-tabs--panel{background:var(--color-bg-surface);border:1px solid var(--color-border-default)}.lintje-tabs--panel .lintje-tabs__list{background:var(--color-bg-subtle);border-bottom-color:var(--color-border-default);flex-wrap:nowrap}.lintje-tabs--panel .lintje-tabs__tab{min-width:0;height:auto;min-height:var(--h-touch);align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-right:1px solid var(--color-border-default);border-bottom:1px solid var(--color-border-default);white-space:normal;text-align:left;flex:1 1 0;margin-bottom:-1px}.lintje-tabs--panel .lintje-tabs__tab:last-child{border-right:0}.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled){background:var(--color-bg-subtle);border-bottom-color:var(--color-border-default)}.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) .lintje-tabs__label{text-decoration:underline}.lintje-tabs--panel .lintje-tabs__tab.is-active{background:var(--color-bg-surface);border-bottom-color:var(--color-bg-surface);color:var(--color-accent-text)}.lintje-tabs__icon{flex:none}.lintje-tabs__text{flex-direction:column;gap:2px;min-width:0;display:flex}.lintje-tabs__head{align-items:center;gap:var(--space-1) var(--space-2);flex-wrap:wrap;display:flex}.lintje-tabs__hint{font:var(--text-small);color:var(--color-text-muted)}.lintje-tabs--panel .lintje-tabs__panel{padding:var(--space-6)}@media screen and (width<=767px){.lintje-tabs--panel .lintje-tabs__tab{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);text-align:center;flex-direction:column}.lintje-tabs--panel .lintje-tabs__text{align-items:center}.lintje-tabs--panel .lintje-tabs__head{justify-content:center}.lintje-tabs--panel .lintje-tabs__hint{display:none}.lintje-tabs--panel .lintje-tabs__panel{padding:var(--space-4)}}@media (forced-colors:active){.lintje-tabs--panel .lintje-tabs__tab.is-active .lintje-tabs__label{text-decoration:underline}}`;function u(e,t,n){return{start:e>1,end:e+t<n-1}}function d(e,t,n,r){return e<n?e:e+t>n+r?e+t-r:n}var f=class extends n{constructor(...e){super(...e),this.tabs=[],this.label=``,this.variant=`line`,this.edges={start:!1,end:!1},this.#e=null,this.#t=!1}static{this.styles=[i,e(l)]}static{this.properties={tabs:{attribute:!1},value:{type:String},label:{type:String},variant:{type:String,reflect:!0},edges:{state:!0}}}#e;#t;onPanelFocus(e){e.currentTarget.classList.toggle(`is-pressed`,this.#t),this.#t=!1}get selectedIndex(){let e=this.tabs.findIndex(e=>e.value===this.value);return e<0?0:e}get isNav(){return this.tabs.length>0&&this.tabs.every(e=>!!e.href)}get list(){return this.renderRoot.querySelector(`.lintje-tabs__list`)}tabElement(e){return this.renderRoot.querySelector(`#tab-${e}`)}disconnectedCallback(){this.#e?.disconnect(),this.#e=null,super.disconnectedCallback()}choose(e,t){let n=this.tabs[e];n&&!n.disabled&&(this.emit(`lintje-tab-change`,n.value),n.href&&this.followLink(n.href,t))}onClick(e,n){let r=this.tabs[n];r&&(!r.href||r.disabled||t(e))&&this.choose(n,e)}onKeydown(e){let t=this.tabs.length;if(!t)return;let n=this.shadowRoot?.activeElement,r=Math.max(0,this.tabs.findIndex((e,t)=>this.tabElement(t)===n)),i=null;e.key===`ArrowRight`?i=(r+1)%t:e.key===`ArrowLeft`?i=(r-1+t)%t:e.key===`Home`?i=0:e.key===`End`&&(i=t-1),i!==null&&(e.preventDefault(),this.tabElement(i)?.focus(),this.tabs[i]?.href||this.choose(i))}measureEdges(){let e=this.list;if(!e)return;let t=u(e.scrollLeft,e.clientWidth,e.scrollWidth);(t.start!==this.edges.start||t.end!==this.edges.end)&&(this.edges=t)}firstUpdated(){let e=this.list;e&&typeof ResizeObserver<`u`&&(this.#e=new ResizeObserver(()=>this.measureEdges()),this.#e.observe(e))}updated(e){if(super.updated(e),!e.has(`value`)&&!e.has(`tabs`))return;let t=this.list,n=this.tabElement(this.selectedIndex);t&&n&&t.scrollWidth>t.clientWidth&&(t.scrollLeft=d(n.offsetLeft,n.offsetWidth,t.scrollLeft,t.clientWidth)),this.measureEdges()}renderTab(e,t,n){let r=s({"lintje-tabs__tab":!0,"focus-inset":!0,"is-active":n,"is-disabled":!!e.disabled}),i=o`<span class="lintje-tabs__label">${e.label}</span>${typeof e.count==`number`?o`<lintje-badge variant="count">${e.count}</lintje-badge>`:c}${e.badge?o`<lintje-badge tone="info">${e.badge}</lintje-badge>`:c}`,l=this.variant===`panel`?o`${e.icon?a(e.icon,{size:24,className:`lintje-tabs__icon`}):c}<span
+import{U as e,cn as t,en as n,gt as r,ht as i,on as a,pt as o,rn as s,tn as c}from"../chunks/base-BsZyWDre.js";var l=`:host{min-width:0;display:block}:host([hidden]){display:none}.lintje-tabs__list{border-bottom:1px solid var(--color-border-heavy);flex-wrap:wrap;display:flex;position:relative}.lintje-tabs__tab{align-items:center;gap:var(--space-2);height:var(--h-touch);padding:0 var(--space-4);color:var(--color-text-primary);font:var(--text-ui);white-space:nowrap;transition:background var(--dur-hover) var(--ease-in-motion), border-color var(--dur-hover) var(--ease-in-motion);background:0 0;border-bottom:3px solid #0000;text-decoration:none;display:inline-flex}.lintje-tabs__tab:hover:not(.is-active):not(.is-disabled){background:var(--color-bg-subtle);border-bottom-color:var(--color-border-heavy)}.lintje-tabs__tab.is-active{border-bottom-color:var(--color-accent-line);color:var(--color-accent-text);font-weight:700}.lintje-tabs__tab.is-disabled{color:var(--color-text-disabled);cursor:not-allowed}.lintje-tabs__panel{padding-top:var(--space-4)}.lintje-tabs__panel.is-pressed:focus-visible{outline:none}@media screen and (width<=767px){.lintje-tabs__list{scrollbar-width:none;flex-wrap:nowrap;overflow-x:auto}.lintje-tabs__list::-webkit-scrollbar{display:none}.lintje-tabs__tab{flex:none}.lintje-tabs__list.is-scroll-start{box-shadow:var(--shadow-scroll-start)}.lintje-tabs__list.is-scroll-end{box-shadow:var(--shadow-scroll-end)}.lintje-tabs__list.is-scroll-start.is-scroll-end{box-shadow:var(--shadow-scroll-start), var(--shadow-scroll-end)}}@media (forced-colors:active){.lintje-tabs__tab.is-active{border-bottom-color:highlight}.lintje-tabs__tab.is-disabled{color:graytext}}.lintje-tabs--panel{background:var(--color-bg-surface);border:1px solid var(--color-border-default)}.lintje-tabs--panel .lintje-tabs__list{background:var(--color-bg-subtle);border-bottom-color:var(--color-border-default);flex-wrap:nowrap}.lintje-tabs--panel .lintje-tabs__tab{min-width:0;height:auto;min-height:var(--h-touch);align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-right:1px solid var(--color-border-default);border-bottom:1px solid var(--color-border-default);white-space:normal;text-align:left;flex:1 1 0;margin-bottom:-1px}.lintje-tabs--panel .lintje-tabs__tab:last-child{border-right:0}.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled){background:var(--color-bg-subtle);border-bottom-color:var(--color-border-default)}.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) .lintje-tabs__label{text-decoration:underline}.lintje-tabs--panel .lintje-tabs__tab.is-active{background:var(--color-bg-surface);border-bottom-color:var(--color-bg-surface);color:var(--color-accent-text)}.lintje-tabs__icon{flex:none}.lintje-tabs__text{flex-direction:column;gap:2px;min-width:0;display:flex}.lintje-tabs__head{align-items:center;gap:var(--space-1) var(--space-2);flex-wrap:wrap;display:flex}.lintje-tabs__hint{font:var(--text-small);color:var(--color-text-muted)}.lintje-tabs--panel .lintje-tabs__panel{padding:var(--space-6)}@media screen and (width<=767px){.lintje-tabs--panel .lintje-tabs__tab{align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-2);text-align:center;flex-direction:column}.lintje-tabs--panel .lintje-tabs__text{align-items:center}.lintje-tabs--panel .lintje-tabs__head{justify-content:center}.lintje-tabs--panel .lintje-tabs__hint{display:none}.lintje-tabs--panel .lintje-tabs__panel{padding:var(--space-4)}}@media (forced-colors:active){.lintje-tabs--panel .lintje-tabs__tab.is-active .lintje-tabs__label{text-decoration:underline}}`;function u(e,t,n){return{start:e>1,end:e+t<n-1}}function d(e,t,n,r){return e<n?e:e+t>n+r?e+t-r:n}var f=class extends n{constructor(...e){super(...e),this.tabs=[],this.label=``,this.variant=`line`,this.#e=null,this.#t=!1}static{this.styles=[i,s(l)]}static{this.properties={tabs:{attribute:!1},value:{type:String},label:{type:String},variant:{type:String,reflect:!0}}}#e;#t;onPanelFocus(e){e.currentTarget.classList.toggle(`is-pressed`,this.#t),this.#t=!1}get selectedIndex(){let e=this.tabs.findIndex(e=>e.value===this.value);return e<0?0:e}get isNav(){return this.tabs.length>0&&this.tabs.every(e=>!!e.href)}get list(){return this.renderRoot.querySelector(`.lintje-tabs__list`)}tabElement(e){return this.renderRoot.querySelector(`#tab-${e}`)}disconnectedCallback(){this.#e?.disconnect(),this.#e=null,super.disconnectedCallback()}choose(e,t){let n=this.tabs[e];n&&!n.disabled&&(this.emit(`lintje-tab-change`,n.value),n.href&&this.followLink(n.href,t))}onClick(t,n){let r=this.tabs[n];r&&(!r.href||r.disabled||e(t))&&this.choose(n,t)}onKeydown(e){let t=this.tabs.length;if(!t)return;let n=this.shadowRoot?.activeElement,r=Math.max(0,this.tabs.findIndex((e,t)=>this.tabElement(t)===n)),i=null;e.key===`ArrowRight`?i=(r+1)%t:e.key===`ArrowLeft`?i=(r-1+t)%t:e.key===`Home`?i=0:e.key===`End`&&(i=t-1),i!==null&&(e.preventDefault(),this.tabElement(i)?.focus(),this.tabs[i]?.href||this.choose(i))}measureEdges(){let e=this.list;if(!e)return;let t=u(e.scrollLeft,e.clientWidth,e.scrollWidth);e.classList.toggle(`is-scroll-start`,t.start),e.classList.toggle(`is-scroll-end`,t.end)}firstUpdated(){let e=this.list;e&&typeof ResizeObserver<`u`&&(this.#e=new ResizeObserver(()=>this.measureEdges()),this.#e.observe(e))}updated(e){super.updated(e);let t=this.list,n=this.tabElement(this.selectedIndex);(e.has(`value`)||e.has(`tabs`))&&t&&n&&t.scrollWidth>t.clientWidth&&(t.scrollLeft=d(n.offsetLeft,n.offsetWidth,t.scrollLeft,t.clientWidth)),this.measureEdges()}renderTab(e,n,i){let s=o({"lintje-tabs__tab":!0,"focus-inset":!0,"is-active":i,"is-disabled":!!e.disabled}),c=t`<span class="lintje-tabs__label">${e.label}</span>${typeof e.count==`number`?t`<lintje-badge variant="count">${e.count}</lintje-badge>`:a}${e.badge?t`<lintje-badge tone="info">${e.badge}</lintje-badge>`:a}`,l=this.variant===`panel`?t`${e.icon?r(e.icon,{size:24,className:`lintje-tabs__icon`}):a}<span
               class="lintje-tabs__text"
-              ><span class="lintje-tabs__head">${i}</span>${e.hint?o`<span class="lintje-tabs__hint">${e.hint}</span>`:c}</span
-            >`:i;return this.isNav?e.disabled?o`<a id="tab-${t}" class=${r} role="link" aria-disabled="true">${l}</a>`:o`<a
-            id="tab-${t}"
-            class=${r}
+              ><span class="lintje-tabs__head">${c}</span>${e.hint?t`<span class="lintje-tabs__hint">${e.hint}</span>`:a}</span
+            >`:c;return this.isNav?e.disabled?t`<a id="tab-${n}" class=${s} role="link" aria-disabled="true">${l}</a>`:t`<a
+            id="tab-${n}"
+            class=${s}
             href=${e.href}
-            aria-current=${n?`page`:c}
-            @click=${e=>this.onClick(e,t)}
+            aria-current=${i?`page`:a}
+            @click=${e=>this.onClick(e,n)}
             >${l}</a
-          >`:e.href&&!e.disabled?o`<a
-        id="tab-${t}"
-        class=${r}
+          >`:e.href&&!e.disabled?t`<a
+        id="tab-${n}"
+        class=${s}
         role="tab"
         href=${e.href}
-        aria-selected=${String(n)}
-        aria-controls="panel-${t}"
-        tabindex=${n?0:-1}
-        @click=${e=>this.onClick(e,t)}
+        aria-selected=${String(i)}
+        aria-controls="panel-${n}"
+        tabindex=${i?0:-1}
+        @click=${e=>this.onClick(e,n)}
         >${l}</a
-      >`:o`<button
-      id="tab-${t}"
+      >`:t`<button
+      id="tab-${n}"
       type="button"
-      class=${r}
+      class=${s}
       role="tab"
-      aria-selected=${String(n)}
-      aria-controls="panel-${t}"
-      aria-disabled=${e.disabled?`true`:c}
-      tabindex=${n?0:-1}
-      @click=${e=>this.onClick(e,t)}
+      aria-selected=${String(i)}
+      aria-controls="panel-${n}"
+      aria-disabled=${e.disabled?`true`:a}
+      tabindex=${i?0:-1}
+      @click=${e=>this.onClick(e,n)}
     >
       ${l}
-    </button>`}render(){let e=this.selectedIndex,t=this.isNav,n=o`<div
-      class=${s({"lintje-tabs__list":!0,"is-scroll-start":this.edges.start,"is-scroll-end":this.edges.end})}
-      role=${t?c:`tablist`}
-      aria-label=${t?c:this.label||c}
-      @keydown=${t?c:this.onKeydown}
+    </button>`}render(){let e=this.selectedIndex,n=this.isNav,r=t`<div
+      class="lintje-tabs__list"
+      role=${n?a:`tablist`}
+      aria-label=${n?a:this.label||a}
+      @keydown=${n?a:this.onKeydown}
       @scroll=${this.measureEdges}
     >
       ${this.tabs.map((t,n)=>this.renderTab(t,n,n===e))}
-    </div>`,r=s({"lintje-tabs":!0,"lintje-tabs--panel":this.variant===`panel`});return t?o`<div class=${r}>
-        <nav aria-label=${this.label||c}>${n}</nav>
+    </div>`,i=o({"lintje-tabs":!0,"lintje-tabs--panel":this.variant===`panel`});return n?t`<div class=${i}>
+        <nav aria-label=${this.label||a}>${r}</nav>
         <div class="lintje-tabs__panel"><slot name=${this.tabs[e].value}></slot></div>
-      </div>`:o`<div class=${r}>
-      ${n}
-      ${this.tabs.map((t,n)=>o`<div
-          id="panel-${n}"
+      </div>`:t`<div class=${i}>
+      ${r}
+      ${this.tabs.map((n,r)=>t`<div
+          id="panel-${r}"
           class="lintje-tabs__panel"
           role="tabpanel"
-          aria-labelledby="tab-${n}"
+          aria-labelledby="tab-${r}"
           tabindex="0"
-          ?hidden=${n!==e}
+          ?hidden=${r!==e}
           @pointerdown=${()=>this.#t=!0}
           @pointerup=${()=>this.#t=!1}
           @focus=${this.onPanelFocus}
           @blur=${e=>e.currentTarget.classList.remove(`is-pressed`)}
         >
-          <slot name=${t.value}></slot>
+          <slot name=${n.value}></slot>
         </div>`)}
-    </div>`}};r(`lintje-tabs`,f);export{f as LintjeTabs,u as scrollEdges,d as scrollToShow};
+    </div>`}};c(`lintje-tabs`,f);export{f as LintjeTabs,u as scrollEdges,d as scrollToShow};