lintje 0.2.0 → 0.3.0

package/dist-elements/tag/skeleton.js

@@ -1 +1 @@
-export { C as LintjeSkeleton } from "../chunks/base-Bg-IFOPG.js";
+export { D as LintjeSkeleton } from "../chunks/base-CbmWxUig.js";

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

@@ -1,16 +1,16 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, qt as a } from "../chunks/base-Bg-IFOPG.js";
-import { r as o, t as s } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { r as o, t as s } from "../chunks/input-CRW_exv_.js";
 import { o as c, p as l } from "../chunks/date-format-mHtZyBys.js";
 //#region src/components/inputs/slot-picker/slot-picker.css?inline
-var u = "/* The slot picker: a column per day, every time a chip; the radio itself is the shared `choice` input. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* Every day takes an equal column, however many the host sends. */\n.lintje-slot-picker {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: minmax(0, 1fr);\n  gap: var(--space-3);\n}\n.lintje-slot-picker__day { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }\n.lintje-slot-picker__heading {\n  margin: 0;\n  padding: 0 0 var(--space-1);\n  border-bottom: 1px solid var(--color-border-default);\n  text-align: center;\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n:host([disabled]) .lintje-slot-picker__heading { color: var(--color-text-disabled); }\n\n/* A time is a dense option; the chosen one is quiet, as in the segmented control. */\n.lintje-slot-picker__slot {\n  position: relative;\n  display: flex; align-items: center; justify-content: center; gap: var(--space-1);\n  min-height: var(--h-option);\n  padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-slot-picker__slot:hover:not(.is-chosen, .is-disabled) { background: var(--color-bg-subtle); }\n.lintje-slot-picker__slot.is-chosen {\n  background: var(--color-choice-active-bg);\n  border-color: var(--color-accent-line);\n  box-shadow: inset 0 0 0 1px var(--color-accent-line);\n  color: var(--color-accent-text);\n  font-weight: 700;\n}\n/* Disabled wins over chosen: the whole chip back to the quiet disabled surface. */\n.lintje-slot-picker__slot.is-disabled {\n  background: var(--color-bg-subtle);\n  border-color: var(--color-border-strong);\n  box-shadow: none;\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n/* The input is hidden, so its focus ring goes on the chip. */\n.lintje-slot-picker__slot:has(.lintje-choice__input:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-slot-picker__full { font: var(--text-small); }\n.lintje-slot-picker__none {\n  margin: 0;\n  padding: var(--space-2) 0;\n  text-align: center;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n/* Without any day the words stand where the days would, at the left. */\n.lintje-field > .lintje-slot-picker__none { padding: 0; text-align: left; }\n\n/* Below 768 px the days stand under each other, each with its times in rows. */\n@media (max-width: 767px) {\n  .lintje-slot-picker { grid-auto-flow: row; gap: var(--space-4); }\n  .lintje-slot-picker__day {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(calc(2 * var(--space-10)), 1fr));\n  }\n  .lintje-slot-picker__heading,\n  .lintje-slot-picker__none { grid-column: 1 / -1; text-align: left; }\n}\n\n/* Forced colours drop the fill and ring: the chosen chip keeps its edge in Highlight. */\n@media (forced-colors: active) {\n  .lintje-slot-picker__slot.is-chosen { border-color: Highlight; box-shadow: none; }\n  .lintje-slot-picker__slot.is-disabled { border-color: GrayText; color: GrayText; }\n  .lintje-slot-picker__slot:has(.lintje-choice__input:focus-visible) { outline-color: Highlight; }\n}\n", d = class extends o {
+var u = "/* The slot picker: a column per day, every time a chip; the radio itself is the shared `choice` input. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* Every day takes an equal column, however many the host sends. */\n.lintje-slot-picker {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: minmax(0, 1fr);\n  gap: var(--space-3);\n}\n.lintje-slot-picker__day { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }\n.lintje-slot-picker__heading {\n  margin: 0;\n  padding: 0 0 var(--space-1);\n  border-bottom: 1px solid var(--color-border-default);\n  text-align: center;\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n:host([disabled]) .lintje-slot-picker__heading { color: var(--color-text-disabled); }\n\n/* A time is a dense option; the chosen one is quiet, as in the segmented control. */\n.lintje-slot-picker__slot {\n  position: relative;\n  display: flex; align-items: center; justify-content: center; gap: var(--space-1);\n  min-height: var(--h-option);\n  padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-slot-picker__slot:hover:not(.is-chosen, .is-disabled) { background: var(--color-bg-subtle); }\n.lintje-slot-picker__slot.is-chosen {\n  background: var(--color-choice-active-bg);\n  border-color: var(--color-accent-line);\n  box-shadow: inset 0 0 0 1px var(--color-accent-line);\n  color: var(--color-accent-text);\n  font-weight: 700;\n}\n/* Disabled wins over chosen: the whole chip back to the quiet disabled surface. */\n.lintje-slot-picker__slot.is-disabled {\n  background: var(--color-bg-subtle);\n  border-color: var(--color-border-strong);\n  box-shadow: none;\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n/* The input is hidden, so its focus ring goes on the chip. */\n.lintje-slot-picker__slot:has(.lintje-choice__input:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-slot-picker__full { font: var(--text-small); }\n.lintje-slot-picker__none {\n  margin: 0;\n  padding: var(--space-2) 0;\n  text-align: center;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n/* Without any day the words stand where the days would, at the left. */\n.lintje-field > .lintje-slot-picker__none { padding: 0; text-align: left; }\n\n/* Below 768 px the days stand under each other, each with its times in rows. */\n@media screen and (max-width: 767px) {\n  .lintje-slot-picker { grid-auto-flow: row; gap: var(--space-4); }\n  .lintje-slot-picker__day {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(calc(2 * var(--space-10)), 1fr));\n  }\n  .lintje-slot-picker__heading,\n  .lintje-slot-picker__none { grid-column: 1 / -1; text-align: left; }\n}\n\n/* Forced colours drop the fill and ring: the chosen chip keeps its edge in Highlight. */\n@media (forced-colors: active) {\n  .lintje-slot-picker__slot.is-chosen { border-color: Highlight; box-shadow: none; }\n  .lintje-slot-picker__slot.is-disabled { border-color: GrayText; color: GrayText; }\n  .lintje-slot-picker__slot:has(.lintje-choice__input:focus-visible) { outline-color: Highlight; }\n}\n", d = class extends o {
 	constructor(...e) {
 		super(...e), this.value = "";
 	}
 	static {
 		this.styles = [
-			e,
-			r(s),
-			r(u)
+			r,
+			t(s),
+			t(u)
 		];
 	}
 	static {
@@ -24,7 +24,7 @@ var u = "/* The slot picker: a column per day, every time a chip; the radio itse
 	}
 	render() {
 		let e = this.days ?? [];
-		return a`<div
+		return i`<div
       class="lintje-field"
       role="radiogroup"
       aria-labelledby=${this.labelId}
@@ -33,22 +33,22 @@ var u = "/* The slot picker: a column per day, every time a chip; the radio itse
       aria-required=${this.required ? "true" : n}
     >
       ${this.renderLabel()}
-      ${e.length ? a`<div class="lintje-slot-picker">${e.map((e) => this.renderDay(e))}</div>` : a`<p class="lintje-slot-picker__none">Geen tijden beschikbaar</p>`}
+      ${e.length ? i`<div class="lintje-slot-picker">${e.map((e) => this.renderDay(e))}</div>` : i`<p class="lintje-slot-picker__none">Geen tijden beschikbaar</p>`}
       ${this.renderFoot()}
     </div>`;
 	}
 	renderDay(e) {
-		return a`<div class="lintje-slot-picker__day">
+		return i`<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)) : a`<p class="lintje-slot-picker__none">
+      ${e.slots.length ? e.slots.map((t) => this.renderSlot(e, t)) : i`<p class="lintje-slot-picker__none">
               <span class="visually-hidden">${c(e.date)}: </span>Geen tijden
             </p>`}
     </div>`;
 	}
 	renderSlot(e, t) {
 		let r = t.value === this.value, o = this.disabled || !!t.full;
-		return a`<label
-      class=${i({
+		return i`<label
+      class=${a({
 			"lintje-slot-picker__slot": !0,
 			"is-chosen": r,
 			"is-disabled": o
@@ -65,10 +65,10 @@ var u = "/* The slot picker: a column per day, every time a chip; the radio itse
       />
       <span class="visually-hidden">${c(e.date)}, </span>
       <span class="lintje-slot-picker__time">${t.label}</span>
-      ${t.full ? a`<span class="lintje-slot-picker__full">Vol</span>` : n}
+      ${t.full ? i`<span class="lintje-slot-picker__full">Vol</span>` : n}
     </label>`;
 	}
 };
-t("lintje-slot-picker", d);
+e("lintje-slot-picker", d);
 //#endregion
 export { d as LintjeSlotPicker };

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

@@ -1,7 +1,7 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, p as o, qt as s, ut as c, zt as l } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, bt as r, en as i, h as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CbmWxUig.js";
 import "./checkbox.js";
 //#region src/components/tables/sortable-list/sortable-list.css?inline
-var u = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-sortable-list { display: flex; flex-direction: column; gap: var(--space-2); }\n\n.lintje-sortable-list__rows {\n  list-style: none; margin: 0; padding: 0;\n  display: flex; flex-direction: column;\n  gap: var(--space-1);\n  font: var(--text-ui);\n}\n\n.lintje-sortable-list__row {\n  position: relative;\n  display: flex; align-items: center;\n  gap: var(--space-2);\n  height: var(--h-touch);\n  padding: 0 var(--space-2);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  color: var(--color-text-primary);\n}\n.lintje-sortable-list__row.is-lifted {\n  z-index: 1;\n  border-color: var(--color-accent-line);\n  box-shadow: var(--shadow-popover);\n  font-weight: 700;\n}\n/* The row follows the pointer through the CSSOM; nothing eases it. */\n.lintje-sortable-list__row.is-dragging { transition: none; }\n\n.lintje-sortable-list__row.is-drop-before::before,\n.lintje-sortable-list__row.is-drop-after::after {\n  content: '';\n  position: absolute;\n  left: -1px; right: -1px;\n  height: 3px;\n  background: var(--color-accent-line);\n  pointer-events: none;\n}\n.lintje-sortable-list__row.is-drop-before::before { top: -4px; }\n.lintje-sortable-list__row.is-drop-after::after { bottom: -4px; }\n\n/* The grip is the only handle, so a finger on the row still scrolls. Its hit area reaches the\n   row's full height, up and down only. */\n.lintje-sortable-list__grip {\n  position: relative;\n  flex: none;\n  display: inline-flex; align-items: center; justify-content: center;\n  width: var(--h-chip-field); height: var(--h-chip-field);\n  color: var(--color-text-muted);\n  cursor: grab;\n  touch-action: none;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-sortable-list__grip::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-sortable-list__grip:hover { color: var(--color-text-primary); }\n.lintje-sortable-list__row.is-lifted .lintje-sortable-list__grip {\n  color: var(--color-accent-text);\n  cursor: grabbing;\n}\n\n.lintje-sortable-list__label {\n  min-width: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.lintje-sortable-list__check { min-width: 0; }\n\n.lintje-sortable-list__status {\n  margin: 0;\n  min-height: 1lh;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n@media (max-width: 767px) {\n  .lintje-sortable-list__row { padding-left: 0; }\n  .lintje-sortable-list__grip { width: var(--h-touch); height: 100%; }\n}\n\n/* Reduced motion: nothing eases; the state still shows at once. */\n@media (prefers-reduced-motion: reduce) {\n  .lintje-sortable-list__grip { transition: none; }\n}\n\n/* Forced colours: the lifted row's shadow is dropped, so its edge turns Highlight; likewise the drop line. */\n@media (forced-colors: active) {\n  .lintje-sortable-list__row.is-lifted { border-color: Highlight; }\n  .lintje-sortable-list__row.is-drop-before::before,\n  .lintje-sortable-list__row.is-drop-after::after { border-top: 3px solid Highlight; }\n}\n";
+var u = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-sortable-list { display: flex; flex-direction: column; gap: var(--space-2); }\n\n.lintje-sortable-list__rows {\n  list-style: none; margin: 0; padding: 0;\n  display: flex; flex-direction: column;\n  gap: var(--space-1);\n  font: var(--text-ui);\n}\n\n.lintje-sortable-list__row {\n  position: relative;\n  display: flex; align-items: center;\n  gap: var(--space-2);\n  height: var(--h-touch);\n  padding: 0 var(--space-2);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  color: var(--color-text-primary);\n}\n.lintje-sortable-list__row.is-lifted {\n  z-index: 1;\n  border-color: var(--color-accent-line);\n  box-shadow: var(--shadow-popover);\n  font-weight: 700;\n}\n/* The row follows the pointer through the CSSOM; nothing eases it. */\n.lintje-sortable-list__row.is-dragging { transition: none; }\n\n.lintje-sortable-list__row.is-drop-before::before,\n.lintje-sortable-list__row.is-drop-after::after {\n  content: '';\n  position: absolute;\n  left: -1px; right: -1px;\n  height: 3px;\n  background: var(--color-accent-line);\n  pointer-events: none;\n}\n.lintje-sortable-list__row.is-drop-before::before { top: -4px; }\n.lintje-sortable-list__row.is-drop-after::after { bottom: -4px; }\n\n/* The grip is the only handle, so a finger on the row still scrolls. Its hit area reaches the\n   row's full height, up and down only. */\n.lintje-sortable-list__grip {\n  position: relative;\n  flex: none;\n  display: inline-flex; align-items: center; justify-content: center;\n  width: var(--h-chip-field); height: var(--h-chip-field);\n  color: var(--color-text-muted);\n  cursor: grab;\n  touch-action: none;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-sortable-list__grip::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-sortable-list__grip:hover { color: var(--color-text-primary); }\n.lintje-sortable-list__row.is-lifted .lintje-sortable-list__grip {\n  color: var(--color-accent-text);\n  cursor: grabbing;\n}\n\n.lintje-sortable-list__label {\n  min-width: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.lintje-sortable-list__check { min-width: 0; }\n\n.lintje-sortable-list__status {\n  margin: 0;\n  min-height: 1lh;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-sortable-list__row { padding-left: 0; }\n  .lintje-sortable-list__grip { width: var(--h-touch); height: 100%; }\n}\n\n/* Reduced motion: nothing eases; the state still shows at once. */\n@media (prefers-reduced-motion: reduce) {\n  .lintje-sortable-list__grip { transition: none; }\n}\n\n/* Forced colours: the lifted row's shadow is dropped, so its edge turns Highlight; likewise the drop line. */\n@media (forced-colors: active) {\n  .lintje-sortable-list__row.is-lifted { border-color: Highlight; }\n  .lintje-sortable-list__row.is-drop-before::before,\n  .lintje-sortable-list__row.is-drop-after::after { border-top: 3px solid Highlight; }\n}\n";
 //#endregion
 //#region src/components/tables/sortable-list/sortable-list.ts
 function d(e, t, n) {
@@ -15,12 +15,12 @@ function f(e, t) {
 	for (; n < e.length && e[n] < t;) n++;
 	return n;
 }
-var p = 4, m = class extends l {
+var p = 4, m = class extends e {
 	constructor(...e) {
 		super(...e), this.items = [], this.name = "", this.checkable = !1, this.order = [], this.grabbed = null, this.drag = null, this.message = "";
 	}
 	static {
-		this.styles = [e, r(u)];
+		this.styles = [o, n(u)];
 	}
 	static {
 		this.properties = {
@@ -157,23 +157,23 @@ var p = 4, m = class extends l {
 		return t.to < n.length ? n[t.to] === e ? "before" : null : n[n.length - 1] === e ? "after" : null;
 	}
 	row(e, t) {
-		let n = this.drag?.id === e.id, r = n || this.grabbed?.id === e.id, o = this.dropLine(t);
+		let n = this.drag?.id === e.id, i = n || this.grabbed?.id === e.id, a = this.dropLine(t);
 		return s`<li
-      class=${i({
+      class=${c({
 			"lintje-sortable-list__row": !0,
-			"is-lifted": r,
+			"is-lifted": i,
 			"is-dragging": n,
-			"is-drop-before": o === "before",
-			"is-drop-after": o === "after"
+			"is-drop-before": a === "before",
+			"is-drop-after": a === "after"
 		})}
-      ${c({ transform: n ? `translateY(${this.drag.dy}px)` : null })}
+      ${r({ transform: n ? `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=${r ? "true" : "false"}
+        aria-pressed=${i ? "true" : "false"}
         aria-describedby="lintje-sortable-list-help"
         @keydown=${(t) => this.onGripKeydown(t, e)}
         @blur=${() => this.onGripBlur(e)}
@@ -182,7 +182,7 @@ var p = 4, m = class extends l {
         @pointerup=${(t) => this.onPointerUp(t, e)}
         @pointercancel=${() => this.onPointerCancel()}
       >
-        ${a("functioneel-sleep", { size: 16 })}
+        ${l("functioneel-sleep", { size: 16 })}
       </button>
       ${this.checkable ? s`<lintje-checkbox
               class="lintje-sortable-list__check"
@@ -194,8 +194,8 @@ var p = 4, m = class extends l {
 	}
 	render() {
 		return s`<div class="lintje-sortable-list">
-      <ul class="lintje-sortable-list__rows" aria-label=${this.label ?? n}>
-        ${o(this.order, (e) => e.id, (e, t) => this.row(e, t))}
+      <ul class="lintje-sortable-list__rows" aria-label=${this.label ?? i}>
+        ${a(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,

package/dist-elements/tag/spinner.js

@@ -1 +1 @@
-export { F as LintjeSpinner } from "../chunks/base-Bg-IFOPG.js";
+export { V as LintjeSpinner } from "../chunks/base-CbmWxUig.js";

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

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, It as r, Lt as i, Z as a, qt as o, ut as s, zt as c } from "../chunks/base-Bg-IFOPG.js";
+import { Gt as e, Jt as t, Kt as n, Yt as r, Zt as i, bt as a, en as o, nn as s, st as c } from "../chunks/base-CbmWxUig.js";
 import "./segmented.js";
 //#region src/components/layout/split-pane/split-pane.css?inline
 var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The first panel's share is `--lintje-split` (a percentage, set through the CSSOM). */\n.lintje-split-pane {\n  display: flex;\n  border: 1px solid var(--color-border-default);\n}\n.lintje-split-pane__pane { min-width: 0; padding: var(--space-4); overflow: auto; }\n.lintje-split-pane__pane--start { flex: 0 0 calc((100% - 9px) * var(--lintje-split, 50) / 100); }\n.lintje-split-pane__pane--end { flex: 1 1 0; }\n\n.lintje-split-pane__strip {\n  flex: 0 0 9px;\n  display: flex; align-items: center; justify-content: center;\n  background: var(--color-bg-subtle);\n  border-left: 1px solid var(--color-border-default);\n  border-right: 1px solid var(--color-border-default);\n  cursor: col-resize;\n  touch-action: none;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-split-pane__handle {\n  flex: none;\n  width: 7px; height: var(--h-touch);\n  background: var(--color-border-heavy);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-split-pane__strip:hover .lintje-split-pane__handle,\n.lintje-split-pane.is-dragging .lintje-split-pane__handle { background: var(--color-accent-line); }\n\n/* Dragging: no text is selected until release. */\n.lintje-split-pane.is-dragging { user-select: none; cursor: col-resize; }\n.lintje-split-pane.is-dragging .lintje-split-pane__strip { background: var(--color-bg-selected); transition: none; }\n\n.lintje-split-pane__choice { display: block; margin-bottom: var(--space-3); }\n.lintje-split-pane--phone { display: block; border: 0; }\n.lintje-split-pane--phone .lintje-split-pane__pane { padding: 0; }\n\n/* Forced colours: the grip is a fill, which the mode drops; it is drawn in the text colour. */\n@media (forced-colors: active) {\n  .lintje-split-pane__handle { forced-color-adjust: none; background: CanvasText; }\n  .lintje-split-pane__strip:hover .lintje-split-pane__handle,\n  .lintje-split-pane.is-dragging .lintje-split-pane__handle { background: Highlight; }\n}\n", u = 5, d = 50, f = 3;
@@ -26,9 +26,9 @@ function _(e, t) {
 		localStorage.setItem(e, String(t));
 	} catch {}
 }
-var v = class extends c {
-	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 i(this, r), this.#t = 50, this.#n = 0, this.#r = !1, this.#i = !1, this.onPointerDown = (e) => {
+var v = class extends t {
+	constructor(...t) {
+		super(...t), this.value = 50, this.min = 20, this.max = 80, this.startLabel = "Links", this.endLabel = "Rechts", this.pane = "start", this.dragging = !1, this.#e = new n(this, e), 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;
@@ -58,7 +58,7 @@ var v = class extends c {
 		};
 	}
 	static {
-		this.styles = n(l);
+		this.styles = i(l);
 	}
 	static {
 		this.properties = {
@@ -122,8 +122,8 @@ var v = class extends c {
 		t !== this.pane && (this.pane = t, this.emit("lintje-pane-change", t));
 	}
 	render() {
-		let e = this.#e.matches, n = Math.round(this.value);
-		return o`${e ? o`<lintje-segmented
+		let e = this.#e.matches, t = Math.round(this.value);
+		return s`${e ? s`<lintje-segmented
             class="lintje-split-pane__choice"
             label="Paneel kiezen"
             hide-label
@@ -136,13 +136,13 @@ var v = class extends c {
 			label: this.endLabel
 		}]}
             @lintje-change=${this.onPaneChange}
-          ></lintje-segmented>` : t}<div
-      class=${a({
+          ></lintje-segmented>` : o}<div
+      class=${c({
 			"lintje-split-pane": !0,
 			"lintje-split-pane--phone": e,
 			"is-dragging": this.dragging
 		})}
-      ${s({ "--lintje-split": String(this.value) })}
+      ${a({ "--lintje-split": String(this.value) })}
       @pointerdown=${this.onPlace}
       @pointermove=${this.onPointerMove}
       @click=${{
@@ -173,7 +173,7 @@ var v = class extends c {
           tabindex="0"
           aria-orientation="vertical"
           aria-label="Verdeling aanpassen"
-          aria-valuenow=${n}
+          aria-valuenow=${t}
           aria-valuemin=${this.min}
           aria-valuemax=${this.max}
           aria-controls="start"
@@ -189,6 +189,6 @@ var v = class extends c {
     </div>`;
 	}
 };
-e("lintje-split-pane", v);
+r("lintje-split-pane", v);
 //#endregion
 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 { T as LintjeStatusDot, E as STATUS_LABEL } from "../chunks/base-Bg-IFOPG.js";
+export { k as LintjeStatusDot, A as STATUS_LABEL } from "../chunks/base-CbmWxUig.js";

package/dist-elements/tag/stepper.js

@@ -1,4 +1,4 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, It as a, Lt as o, Z as s, et as c, qt as l, zt as u } from "../chunks/base-Bg-IFOPG.js";
+import { Gt as e, H as t, Jt as n, Kt as r, Yt as i, Zt as a, en as o, lt as s, nn as c, st as l, ut as u } from "../chunks/base-CbmWxUig.js";
 //#region src/components/forms/stepper/stepper.css?inline
 var d = "/* The host is the full width of where it stands: what the steps are measured against. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-stepper { font: var(--text-ui); color: var(--color-text-primary); }\n\n/* The row never wraps: its overflow is what tells the element to stand the steps up. */\n.lintje-stepper__list { display: flex; }\n.lintje-stepper__list--row { flex-direction: row; gap: var(--space-2); overflow: hidden; }\n.lintje-stepper__list--column { flex-direction: column; }\n\n/* The label's line is as tall as the pointer target: the row's `overflow: hidden` would cut off more. */\n.lintje-stepper__step {\n  position: relative;\n  display: flex; align-items: flex-start; gap: var(--space-3);\n  flex: none;\n}\n.lintje-stepper__list--row .lintje-stepper__step { flex: 1 1 auto; white-space: nowrap; }\n.lintje-stepper__list--row .lintje-stepper__step:last-child { flex: none; }\n.lintje-stepper__list--column .lintje-stepper__step:not(:last-child) { padding-bottom: var(--space-4); }\n\n/* The line to the next step: drawn through from a done step, dashed from the current one on. */\n.lintje-stepper__line { border: 0 dashed var(--color-border-heavy); }\n.lintje-stepper__step--done .lintje-stepper__line { border-style: solid; border-color: var(--color-accent-line); }\n/* In the row the line fills the room up to the next marker. */\n.lintje-stepper__list--row .lintje-stepper__body { flex: 1 1 auto; }\n.lintje-stepper__list--row .lintje-stepper__line {\n  flex: 1 1 0;\n  min-width: var(--space-8);\n  border-top-width: 2px;\n}\n/* In the column it runs from the marker's foot to the top of the next one. */\n.lintje-stepper__list--column .lintje-stepper__line {\n  position: absolute;\n  top: calc((var(--h-target) + var(--h-chip-field)) / 2);\n  bottom: calc((var(--h-chip-field) - var(--h-target)) / 2);\n  left: calc(var(--h-chip-field) / 2 - 1px);\n  border-left-width: 2px;\n}\n\n.lintje-stepper__body { display: flex; flex-direction: column; }\n.lintje-stepper__list--column .lintje-stepper__body { min-width: 0; }\n.lintje-stepper__head {\n  display: flex; align-items: center; gap: var(--space-2);\n  min-height: var(--h-target);\n}\n/* What stands under the label starts level with the marker's foot. */\n.lintje-stepper__head + .lintje-stepper__description,\n.lintje-stepper__head + .lintje-stepper__meta { margin-top: calc((var(--h-chip-field) - var(--h-target)) / 2); }\n.lintje-stepper__description { margin: 0 0 var(--space-1); color: var(--color-text-secondary); }\n.lintje-stepper__meta { font: var(--text-meta); color: var(--color-text-secondary); }\n\n.lintje-stepper__marker {\n  display: inline-flex; align-items: center; justify-content: center;\n  flex: none;\n  width: var(--h-chip-field); height: var(--h-chip-field);\n  margin-top: calc((var(--h-target) - var(--h-chip-field)) / 2);\n  border: 1px solid transparent;\n  font-size: 0.875rem; font-weight: 700;\n}\n.lintje-stepper__marker--next { border-color: var(--color-text-muted); color: var(--color-text-muted); font-weight: 400; }\n.lintje-stepper__step--next .lintje-stepper__name { color: var(--color-text-muted); }\n.lintje-stepper__marker--current {\n  background: var(--color-action-primary);\n  border-color: var(--color-action-primary-border);\n  color: var(--color-action-primary-text);\n}\n.lintje-stepper__step--current .lintje-stepper__name { font-weight: 700; }\n/* Done: the frame is a line (3:1), the check stands for a word (4.5:1). */\n.lintje-stepper__marker--done { border-color: var(--color-accent-line); color: var(--color-accent-text); }\n.lintje-stepper__marker--done.is-error { border-color: var(--color-error); color: var(--color-error); }\n\n.lintje-stepper__name--link {\n  position: relative;\n  color: var(--color-link);\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-stepper__name--link::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-stepper__name--link:hover { color: var(--color-link-hover); }\n\n.lintje-stepper__errors { font: var(--text-meta); font-weight: 700; color: var(--color-error-text); }\n\n.lintje-stepper--phone { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-stepper__summary {\n  display: flex; justify-content: space-between; gap: var(--space-3);\n}\n.lintje-stepper__current { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lintje-stepper__count { flex: none; color: var(--color-text-muted); }\n\n/* Forced colours: the current step's fill is dropped, so its border turns Highlight. */\n@media (forced-colors: active) {\n  .lintje-stepper__marker--current { border-color: Highlight; }\n}\n";
 //#endregion
@@ -21,12 +21,12 @@ var h = {
 	done: "gedaan",
 	current: "huidige stap",
 	next: "nog niet aan de beurt"
-}, g = class extends u {
-	constructor(...e) {
-		super(...e), this.steps = [], this.label = "Stappen", this.orientation = "horizontal", this.layout = "row", this.#e = new o(this, a), this.#t = null, this.#n = 0;
+}, g = class extends n {
+	constructor(...t) {
+		super(...t), this.steps = [], this.label = "Stappen", this.orientation = "horizontal", this.layout = "row", this.#e = new r(this, e), this.#t = null, this.#n = 0;
 	}
 	static {
-		this.styles = [e, r(d)];
+		this.styles = [s, a(d)];
 	}
 	static {
 		this.properties = {
@@ -65,43 +65,43 @@ var h = {
 		let r = m(this.layout, e.clientWidth, n, this.#n);
 		r !== this.layout && (this.layout = r);
 	}
-	follow(e, t) {
-		i(e) && this.followLink(t, e);
+	follow(e, n) {
+		t(e) && this.followLink(n, e);
 	}
 	renderMarker(e, t) {
-		let n = e.state === "done" && !!e.errors, r = s({
+		let n = e.state === "done" && !!e.errors, r = l({
 			"lintje-stepper__marker": !0,
 			[`lintje-stepper__marker--${e.state}`]: !0,
 			"is-error": n
 		}), i = String(t + 1);
-		return e.state === "done" && (i = c(n ? "functioneel-waarschuwing" : "functioneel-vinkje", { size: 16 })), l`<span class=${r} aria-hidden="true">${i}</span>`;
+		return e.state === "done" && (i = u(n ? "functioneel-waarschuwing" : "functioneel-vinkje", { size: 16 })), c`<span class=${r} aria-hidden="true">${i}</span>`;
 	}
 	renderName(e) {
 		if (e.state === "done" && e.href) {
 			let t = e.href;
-			return l`<a
+			return c`<a
         class="lintje-stepper__name lintje-stepper__name--link"
         href=${t}
         @click=${(e) => this.follow(e, t)}
         >${e.label}<span class="visually-hidden">, ${h.done}</span></a
       >`;
 		}
-		return l`<span class="lintje-stepper__name"
+		return c`<span class="lintje-stepper__name"
       >${e.label}<span class="visually-hidden">, ${h[e.state]}</span></span
     >`;
 	}
 	renderBody(e, t) {
-		let r = this.layout === "column" ? e.description : void 0;
-		return l`<div class="lintje-stepper__body">
+		let n = this.layout === "column" ? e.description : void 0;
+		return c`<div class="lintje-stepper__body">
       <div class="lintje-stepper__head">
-        ${this.renderName(e)}${e.state === "done" && e.errors ? l`<span class="lintje-stepper__errors">${f(e.errors)}</span>` : n}${t ? n : l`<span class="lintje-stepper__line"></span>`}
+        ${this.renderName(e)}${e.state === "done" && e.errors ? c`<span class="lintje-stepper__errors">${f(e.errors)}</span>` : o}${t ? o : c`<span class="lintje-stepper__line"></span>`}
       </div>
-      ${r ? l`<p class="lintje-stepper__description">${r}</p>` : n}${e.meta ? l`<span class="lintje-stepper__meta">${e.meta}</span>` : n}
+      ${n ? c`<p class="lintje-stepper__description">${n}</p>` : o}${e.meta ? c`<span class="lintje-stepper__meta">${e.meta}</span>` : o}
     </div>`;
 	}
 	renderPhone() {
 		let { place: e, total: t, percent: n } = p(this.steps), r = this.steps[e - 1], i = `Stap ${e} van ${t}`;
-		return l`<nav class="lintje-stepper lintje-stepper--phone" aria-label=${this.label}>
+		return c`<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>
@@ -110,14 +110,14 @@ var h = {
     </nav>`;
 	}
 	render() {
-		return this.#e.matches && !this.vertical ? this.renderPhone() : l`<nav class="lintje-stepper" aria-label=${this.label}>
+		return this.#e.matches && !this.vertical ? this.renderPhone() : c`<nav class="lintje-stepper" aria-label=${this.label}>
       <ol class="lintje-stepper__list lintje-stepper__list--${this.layout}">
-        ${this.steps.map((e, t) => l`<li
-            class=${s({
+        ${this.steps.map((e, t) => c`<li
+            class=${l({
 			"lintje-stepper__step": !0,
 			[`lintje-stepper__step--${e.state}`]: !0
 		})}
-            aria-current=${e.state === "current" ? "step" : n}
+            aria-current=${e.state === "current" ? "step" : o}
           >
             ${this.renderMarker(e, t)}${this.renderBody(e, t === this.steps.length - 1)}
           </li>`)}
@@ -125,6 +125,6 @@ var h = {
     </nav>`;
 	}
 };
-t("lintje-stepper", g);
+i("lintje-stepper", g);
 //#endregion
 export { g as LintjeStepper, m as chooseLayout, f as errorText, p as position };

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

@@ -1,12 +1,12 @@
-import { Bt as e, Gt as t, Ht as n, U as r, Z as i, qt as a, zt as o } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Q as t, Yt as n, Zt as r, en as i, nn as a, st as o } from "../chunks/base-CbmWxUig.js";
 import { t as s } from "../chunks/sentence-end-8jlqKJ5P.js";
 //#region src/components/feedback/streaming-text/streaming-text.css?inline
-var c = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n/* Plain takes the type of where it stands, past the UI type every element sets on itself. */\n:host([variant='plain']) { font: inherit; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-streaming-text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }\n\n.lintje-streaming-text__box {\n  padding: var(--space-3);\n  background: var(--color-bg-page);\n  border: 1px solid var(--color-border-default);\n  font: var(--text-body);\n  color: var(--color-text-primary);\n  overflow-wrap: anywhere;\n}\n/* Keeps a line break the server sends; slotted prose keeps its own rules. */\n.lintje-streaming-text__plain { white-space: pre-wrap; }\n.lintje-streaming-text__box--waiting {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  font: var(--text-ui);\n}\n.lintje-streaming-text__waiting { color: var(--color-text-muted); }\n\n.lintje-streaming-text__caret {\n  display: inline-block;\n  width: 8px;\n  height: 18px;\n  margin-left: var(--space-1);\n  vertical-align: text-bottom;\n  background: var(--color-accent-line);\n  animation: lintje-caret-blink var(--dur-skeleton) steps(1, end) infinite;\n}\n/* A keyframe only works in the root that uses it. */\n@keyframes lintje-caret-blink {\n  0%   { opacity: 1; }\n  50%  { opacity: 0; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lintje-streaming-text__caret { animation: none; }\n}\n\n/* Plain: the surface around it is the box. */\n.lintje-streaming-text--plain .lintje-streaming-text__box {\n  padding: 0;\n  background: transparent;\n  border: 0;\n  font: inherit;\n}\n.lintje-streaming-text--plain .lintje-streaming-text__box--waiting { font: var(--text-ui); }\n\n.lintje-streaming-text__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.lintje-streaming-text__note { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-streaming-text__note--error { font: var(--text-meta); font-weight: 700; color: var(--color-error-text); }\n", l = "Gestopt", u = "De verbinding viel weg. De tekst is niet af.", d = class extends o {
+var c = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n/* Plain takes the type of where it stands, past the UI type every element sets on itself. */\n:host([variant='plain']) { font: inherit; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-streaming-text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }\n\n.lintje-streaming-text__box {\n  padding: var(--space-3);\n  background: var(--color-bg-page);\n  border: 1px solid var(--color-border-default);\n  font: var(--text-body);\n  color: var(--color-text-primary);\n  overflow-wrap: anywhere;\n}\n/* Keeps a line break the server sends; slotted prose keeps its own rules. */\n.lintje-streaming-text__plain { white-space: pre-wrap; }\n.lintje-streaming-text__box--waiting {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  font: var(--text-ui);\n}\n.lintje-streaming-text__waiting { color: var(--color-text-muted); }\n\n.lintje-streaming-text__caret {\n  display: inline-block;\n  width: 8px;\n  height: 18px;\n  margin-left: var(--space-1);\n  vertical-align: text-bottom;\n  background: var(--color-accent-line);\n  animation: lintje-caret-blink var(--dur-skeleton) steps(1, end) infinite;\n}\n/* A keyframe only works in the root that uses it. */\n@keyframes lintje-caret-blink {\n  0%   { opacity: 1; }\n  50%  { opacity: 0; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lintje-streaming-text__caret { animation: none; }\n}\n/* Paper holds the text as it stood; the caret only says that more is coming. */\n@media print {\n  .lintje-streaming-text__caret { display: none; }\n}\n\n/* Plain: the surface around it is the box. */\n.lintje-streaming-text--plain .lintje-streaming-text__box {\n  padding: 0;\n  background: transparent;\n  border: 0;\n  font: inherit;\n}\n.lintje-streaming-text--plain .lintje-streaming-text__box--waiting { font: var(--text-ui); }\n\n.lintje-streaming-text__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.lintje-streaming-text__note { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-streaming-text__note--error { font: var(--text-meta); font-weight: 700; color: var(--color-error-text); }\n", l = "Gestopt", u = "De verbinding viel weg. De tekst is niet af.", d = class extends e {
 	constructor(...e) {
 		super(...e), this.text = "", this.state = "waiting", this.label = "Bezig met schrijven", this.variant = "box", this.spoken = [], this.said = 0, this.focusRetry = !1;
 	}
 	static {
-		this.styles = n(c);
+		this.styles = r(c);
 	}
 	static {
 		this.properties = {
@@ -30,17 +30,17 @@ var c = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 	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);
+			e && t(e) && (this.focusRetry = !0);
 		}
 		if (!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 n = e.get("text") ?? "", r = e.has("text") && !this.text.startsWith(n) || e.has("state") && this.state === "waiting", i = r ? [] : [...this.spoken];
+		r && (this.said = 0);
 		let a = this.text.slice(this.said), o = this.ended ? a.length : s(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(l), (e.has("state") || e.has("message")) && this.state === "error" && i.push(this.message || u), (n || i.length !== this.spoken.length) && (this.spoken = i);
+		e.has("state") && this.state === "stopped" && i.push(l), (e.has("state") || e.has("message")) && this.state === "error" && i.push(this.message || u), (r || i.length !== this.spoken.length) && (this.spoken = i);
 	}
 	updated(e) {
 		if (super.updated(e), !this.focusRetry || !this.ended) return;
@@ -62,10 +62,10 @@ var c = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 		if (this.state === "done") return a`<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 t;
+		if (!this.text && this.state !== "streaming") return i;
 		let e = this.state === "streaming";
 		return a`<div class="lintje-streaming-text__box" aria-busy=${e ? "true" : "false"}
-      ><span class="lintje-streaming-text__plain">${this.text}</span>${e ? a`<span class="lintje-streaming-text__caret" aria-hidden="true"></span>` : t}</div
+      ><span class="lintje-streaming-text__plain">${this.text}</span>${e ? a`<span class="lintje-streaming-text__caret" aria-hidden="true"></span>` : i}</div
     >`;
 	}
 	renderFoot() {
@@ -78,11 +78,11 @@ var c = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
           >Stoppen</lintje-button
         >
       </div>`;
-		if (this.state !== "stopped" && this.state !== "error") return t;
+		if (this.state !== "stopped" && this.state !== "error") return i;
 		let e = this.state === "error";
 		return a`<div class="lintje-streaming-text__foot">
       <span
-        class=${i({
+        class=${o({
 			"lintje-streaming-text__note": !0,
 			"lintje-streaming-text__note--error": e
 		})}
@@ -99,7 +99,7 @@ var c = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
 	}
 	render() {
 		return a`<div
-      class=${i({
+      class=${o({
 			"lintje-streaming-text": !0,
 			"lintje-streaming-text--plain": this.variant === "plain"
 		})}
@@ -111,6 +111,6 @@ var c = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: non
     </div>`;
 	}
 };
-e("lintje-streaming-text", d);
+n("lintje-streaming-text", d);
 //#endregion
 export { d as LintjeStreamingText, s as sentenceEnd };