lintje 0.1.1

package/dist-elements/tag/shortcuts.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/frame/shortcuts/shortcuts.js'

package/dist-elements/tag/shortcuts.js

@@ -0,0 +1,104 @@
+import { Bt as e, Ct as t, Gt as n, Ht as r, Kt as i, Nt as a, St as o, vt as s, wt as c, xt as l, yt as u, zt as d } from "../chunks/base-rBLTcEIv.js";
+import { t as f } from "../chunks/focus-trap-w3vCamJ6.js";
+import { t as p } from "../chunks/key-CuuOw1KE.js";
+import "./toggle.js";
+import { t as m } from "../chunks/confirm-dialog-D5EVGuil.js";
+//#region src/components/frame/shortcuts/shortcuts.css?inline
+var h = "/* The frame is `confirm-dialog.css`. The host takes no space: a closed overview renders nothing. */\n:host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The window takes focus when it opens so Escape and the screen reader start there. */\n\n.lintje-shortcuts__list {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  margin: 0;\n  font: var(--text-ui);\n}\n.lintje-shortcuts__what,\n.lintje-shortcuts__keys {\n  margin: 0;\n  padding: var(--space-2) 0;\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-shortcuts__keys {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-1);\n  padding-left: var(--space-4);\n}\n.lintje-shortcuts__what:nth-last-of-type(1),\n.lintje-shortcuts__keys:nth-last-of-type(1) { border-bottom: 0; }\n\n/* The switch for the one-character keys, under the list. */\n.lintje-shortcuts__setting { display: block; margin-top: var(--space-4); }\n", g = class extends d {
+	constructor(...e) {
+		super(...e), this.open = !1, this.heading = "Sneltoetsen", this.list = [], this.characterKeys = !0, this.#e = null, this.#t = null, this.#n = new f(), this.#r = (e) => {
+			e.key === "Escape" && this.#n.isTopmost() && this.close("escape");
+		};
+	}
+	static {
+		this.styles = [
+			r(m),
+			r(p),
+			r(h)
+		];
+	}
+	static {
+		this.properties = {
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			heading: { type: String },
+			list: { state: !0 },
+			characterKeys: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	connectedCallback() {
+		super.connectedCallback(), this.#e = o({
+			keys: "?",
+			description: "Dit overzicht",
+			handler: () => {
+				this.open || this.emit("lintje-open");
+			}
+		});
+	}
+	disconnectedCallback() {
+		this.#e?.(), this.#e = null, this.#a(), super.disconnectedCallback();
+	}
+	close(e) {
+		this.emit("lintje-close", { reason: e });
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("open") && this.open && (this.list = c(), this.characterKeys = s());
+	}
+	updated(e) {
+		super.updated(e), this.open && !this.#t ? this.#i() : !this.open && this.#t && this.#a();
+	}
+	#i() {
+		this.#t = a(), document.addEventListener("keydown", this.#r);
+		let e = this.renderRoot.querySelector(".lintje-confirm-dialog");
+		e && this.#n.activate(e);
+	}
+	#a() {
+		this.#t && (document.removeEventListener("keydown", this.#r), this.#t(), this.#t = null, this.#n.deactivate());
+	}
+	renderRow(e) {
+		return i`<dt class="lintje-shortcuts__what">${e.description}</dt>
+      <dd class="lintje-shortcuts__keys">
+        ${l(e.keys).map((e) => i`<kbd class="lintje-key">${e}</kbd>`)}
+      </dd>`;
+	}
+	onCharacterKeys(e) {
+		this.characterKeys = e.detail, t(e.detail);
+	}
+	renderSetting() {
+		return this.list.some((e) => u(e.keys)) ? i`<lintje-toggle
+      class="lintje-shortcuts__setting"
+      label="Sneltoetsen van één teken"
+      hint="Uit werken alleen de sneltoetsen met Ctrl, Alt of Cmd."
+      .checked=${this.characterKeys}
+      @lintje-change=${this.onCharacterKeys}
+    ></lintje-toggle>` : n;
+	}
+	render() {
+		return this.open ? i`<div class="lintje-confirm-dialog__scrim" @click=${() => this.close("scrim")}>
+      <div
+        class="lintje-confirm-dialog lintje-shortcuts"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="lintje-shortcuts-heading"
+        tabindex="-1"
+        @click=${(e) => e.stopPropagation()}
+      >
+        <h2 id="lintje-shortcuts-heading" class="lintje-confirm-dialog__heading">${this.heading}</h2>
+        <dl class="lintje-shortcuts__list">${this.list.map((e) => this.renderRow(e))}</dl>
+        ${this.renderSetting()}
+        <div class="lintje-confirm-dialog__actions">
+          <lintje-button variant="secondary" @click=${() => this.close("button")}>Sluiten</lintje-button>
+        </div>
+      </div>
+    </div>` : n;
+	}
+};
+e("lintje-shortcuts", g);
+//#endregion
+export { g as LintjeShortcuts };

package/dist-elements/tag/skeleton.d.ts

@@ -0,0 +1 @@
+export * from '../types/primitives/skeleton/skeleton.js'

package/dist-elements/tag/skeleton.js

@@ -0,0 +1 @@
+export { C as LintjeSkeleton } from "../chunks/base-rBLTcEIv.js";

package/dist-elements/tag/sortable-list.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/tables/sortable-list/sortable-list.js'

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

@@ -0,0 +1,211 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o, p as s, ut as c, zt as l } from "../chunks/base-rBLTcEIv.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";
+//#endregion
+//#region src/components/tables/sortable-list/sortable-list.ts
+function d(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 f(e, t) {
+	let n = 0;
+	for (; n < e.length && e[n] < t;) n++;
+	return n;
+}
+var p = 4, m = class extends l {
+	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)];
+	}
+	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 },
+			message: { state: !0 }
+		};
+	}
+	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.message = `${e.label} opgepakt. ${this.place(t)}`;
+	}
+	putDown(e) {
+		if (!this.grabbed) return;
+		let t = this.indexOf(e.id);
+		this.message = `${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 = d(this.order, this.indexOf(e.id), t), this.message = `${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 = d(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 = d(this.order, r, i), this.focusGrip(t.id)), this.message = 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.message = `${t.label} opgepakt. ${this.place(r)}`;
+	}
+	onPointerMove(e) {
+		let t = this.drag;
+		if (!t || e.pointerId !== t.pointerId) return;
+		let n = f(t.middles, e.clientY);
+		n !== t.to && (this.message = 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) < p ? (this.drag = null, this.pickUp(t), this.focusGrip(t.id)) : (this.order = d(this.order, n.from, n.to), this.message = `${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.message = "");
+	}
+	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, t) {
+		let n = this.drag?.id === e.id, r = n || this.grabbed?.id === e.id, s = this.dropLine(t);
+		return i`<li
+      class=${a({
+			"lintje-sortable-list__row": !0,
+			"is-lifted": r,
+			"is-dragging": n,
+			"is-drop-before": s === "before",
+			"is-drop-after": s === "after"
+		})}
+      ${c({ 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-describedby="lintje-sortable-list-help"
+        @keydown=${(t) => this.onGripKeydown(t, e)}
+        @blur=${() => this.onGripBlur(e)}
+        @pointerdown=${(t) => this.onPointerDown(t, e)}
+        @pointermove=${(e) => this.onPointerMove(e)}
+        @pointerup=${(t) => this.onPointerUp(t, e)}
+        @pointercancel=${() => this.onPointerCancel()}
+      >
+        ${o("functioneel-sleep", { size: 16 })}
+      </button>
+      ${this.checkable ? i`<lintje-checkbox
+              class="lintje-sortable-list__check"
+              label=${e.label}
+              ?checked=${!!e.checked}
+              @lintje-change=${(t) => this.onCheck(t, e)}
+            ></lintje-checkbox>` : i`<span class="lintje-sortable-list__label">${e.label}</span>`}
+    </li>`;
+	}
+	render() {
+		return i`<div class="lintje-sortable-list">
+      <ul class="lintje-sortable-list__rows" aria-label=${this.label ?? n}>
+        ${s(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,
+        Escape zet terug. Of tik op de greep en daarna op de greep van de plaats waar de rij
+        heen moet.
+      </p>
+      <p class="lintje-sortable-list__status" role="status">${this.message}</p>
+    </div>`;
+	}
+};
+t("lintje-sortable-list", m);
+//#endregion
+export { m as LintjeSortableList, f as dropIndex, d as moveItem };

package/dist-elements/tag/spinner.d.ts

@@ -0,0 +1 @@
+export * from '../types/primitives/spinner/spinner.js'

package/dist-elements/tag/spinner.js

@@ -0,0 +1 @@
+export { F as LintjeSpinner } from "../chunks/base-rBLTcEIv.js";

package/dist-elements/tag/split-pane.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/layout/split-pane/split-pane.js'

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

@@ -0,0 +1,194 @@
+import { Bt as e, Gt as t, Ht as n, It as r, Kt as i, Lt as a, Z as o, ut as s, zt as c } from "../chunks/base-rBLTcEIv.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;
+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 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 a(this, r), 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(), 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 = n(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, n = Math.round(this.value);
+		return i`${e ? i`<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>` : t}<div
+      class=${o({
+			"lintje-split-pane": !0,
+			"lintje-split-pane--phone": e,
+			"is-dragging": this.dragging
+		})}
+      ${s({ "--lintje-split": String(this.value) })}
+      @pointerdown=${this.onPlace}
+      @pointermove=${this.onPointerMove}
+      @click=${{
+			handleEvent: this.onPlacedClick,
+			capture: !0
+		}}
+    >
+      <div
+        id="start"
+        class="lintje-split-pane__pane lintje-split-pane__pane--start"
+        ?hidden=${e && this.pane !== "start"}
+      >
+        <slot name="start"></slot>
+      </div>
+      <div
+        class="lintje-split-pane__strip"
+        ?hidden=${e}
+        @pointerdown=${this.onPointerDown}
+        @pointerup=${this.onPointerUp}
+        @pointercancel=${this.onPointerUp}
+        @dblclick=${() => {
+			this.cancelLift(), this.commit(50);
+		}}
+      >
+        <div
+          class="lintje-split-pane__handle"
+          role="separator"
+          tabindex="0"
+          aria-orientation="vertical"
+          aria-label="Verdeling aanpassen"
+          aria-valuenow=${n}
+          aria-valuemin=${this.min}
+          aria-valuemax=${this.max}
+          aria-controls="start"
+          @keydown=${this.onKeydown}
+        ></div>
+      </div>
+      <div
+        class="lintje-split-pane__pane lintje-split-pane__pane--end"
+        ?hidden=${e && this.pane !== "end"}
+      >
+        <slot name="end"></slot>
+      </div>
+    </div>`;
+	}
+};
+e("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.d.ts

@@ -0,0 +1 @@
+export * from '../types/primitives/status-dot/status-dot.js'

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

@@ -0,0 +1 @@
+export { T as LintjeStatusDot, E as STATUS_LABEL } from "../chunks/base-rBLTcEIv.js";

package/dist-elements/tag/stepper.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/forms/stepper/stepper.js'