lintje 0.2.0 → 0.3.0

package/dist-elements/tag/expander.js

@@ -1,13 +1,13 @@
-import { $ as e, Bt as t, Ht as n, O as r, Z as i, qt as a } from "../chunks/base-Bg-IFOPG.js";
-import { i as o, n as s, r as c, t as l } from "../chunks/disclosure-CMXhX-Vb.js";
-import { t as u } from "../chunks/disclosure-BXTX04gM.js";
+import { P as e, Yt as t, Zt as n, lt as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { i as o, n as s, r as c, t as l } from "../chunks/disclosure-DLkXPUpV.js";
+import { t as u } from "../chunks/disclosure-D39vAR5q.js";
 //#region src/components/layout/expander/expander.ts
-var d = class extends r {
+var d = class extends e {
 	constructor(...e) {
 		super(...e), this.heading = "", this.open = !1, this.flat = !1, this.leading = !1, this.columns = !1, this.#e = o(), this.#t = new l(this);
 	}
 	static {
-		this.styles = [e, n(u)];
+		this.styles = [r, n(u)];
 	}
 	static {
 		this.properties = {
@@ -38,8 +38,8 @@ var d = class extends r {
 		super.updated(e), this.#t.observe(this.open, this.renderRoot.querySelector(".lintje-disclosure__body"));
 	}
 	render() {
-		return a`<section
-      class=${i({
+		return i`<section
+      class=${a({
 			"lintje-disclosure": !0,
 			"lintje-expander": !0,
 			"lintje-expander--flat": this.flat,
@@ -62,7 +62,7 @@ var d = class extends r {
 			}
 		})}<slot name="actions" class="lintje-expander__actions"></slot>
       </div>
-      ${s(this.#e, a`<slot></slot>`, "lintje-expander__content")}
+      ${s(this.#e, i`<slot></slot>`, "lintje-expander__content")}
     </section>`;
 	}
 };

package/dist-elements/tag/explainer.js

@@ -1,15 +1,15 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, O as i, Z as a, k as o, qt as s } from "../chunks/base-Bg-IFOPG.js";
-import { i as c, n as l, r as u, t as d } from "../chunks/disclosure-CMXhX-Vb.js";
-import { t as f } from "../chunks/disclosure-BXTX04gM.js";
+import { F as e, P as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s } from "../chunks/base-CbmWxUig.js";
+import { i as c, n as l, r as u, t as d } from "../chunks/disclosure-DLkXPUpV.js";
+import { t as f } from "../chunks/disclosure-D39vAR5q.js";
 //#region src/components/charts/explainer/explainer.css?inline
-var p = "/* The disclosure itself is `shared/disclosure.css`, adopted next to this sheet (rule 2). */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-explainer {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n.lintje-explainer__list {\n  display: grid;\n  grid-template-columns: minmax(0, max-content) minmax(0, 72ch);\n  column-gap: var(--space-5);\n  row-gap: var(--space-3);\n  font: var(--text-body);\n}\n.lintje-explainer__term { grid-column: 1; font-weight: 700; color: var(--color-text-primary); }\n.lintje-explainer__description { grid-column: 2; margin: 0; color: var(--color-text-secondary); }\n\n@media (max-width: 767px) {\n  .lintje-explainer__list { display: block; }\n  .lintje-explainer__description { margin-top: 2px; }\n  .lintje-explainer__description + .lintje-explainer__term { margin-top: var(--space-3); }\n}\n", m = class extends i {
+var p = "/* The disclosure itself is `shared/disclosure.css`, adopted next to this sheet (rule 2). */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n@media print { :host { break-inside: avoid; } }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-explainer {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n.lintje-explainer__list {\n  display: grid;\n  grid-template-columns: minmax(0, max-content) minmax(0, 72ch);\n  column-gap: var(--space-5);\n  row-gap: var(--space-3);\n  font: var(--text-body);\n}\n.lintje-explainer__term { grid-column: 1; font-weight: 700; color: var(--color-text-primary); }\n.lintje-explainer__description { grid-column: 2; margin: 0; color: var(--color-text-secondary); }\n\n@media screen and (max-width: 767px) {\n  .lintje-explainer__list { display: block; }\n  .lintje-explainer__description { margin-top: 2px; }\n  .lintje-explainer__description + .lintje-explainer__term { margin-top: var(--space-3); }\n}\n", m = class extends t {
 	constructor(...e) {
 		super(...e), this.span = 12, this.open = !0, this.#e = null, this.#t = c(), this.#n = new d(this);
 	}
 	static {
 		this.styles = [
+			a,
 			e,
-			o,
 			r(f),
 			r(p)
 		];
@@ -36,8 +36,8 @@ var p = "/* The disclosure itself is `shared/disclosure.css`, adopted next to th
 	}
 	render() {
 		let e = this.data;
-		return e ? s`<section
-      class=${a({
+		return e ? o`<section
+      class=${s({
 			"lintje-disclosure": !0,
 			"lintje-explainer": !0,
 			"is-open": this.open,
@@ -52,13 +52,13 @@ var p = "/* The disclosure itself is `shared/disclosure.css`, adopted next to th
 				this.open = !this.open;
 			}
 		})}
-      ${l(this.#t, s`<dl class="lintje-explainer__list">
-          ${e.items.map((e) => s`<dt class="lintje-explainer__term">${e.term}</dt>
+      ${l(this.#t, o`<dl class="lintje-explainer__list">
+          ${e.items.map((e) => o`<dt class="lintje-explainer__term">${e.term}</dt>
               <dd class="lintje-explainer__description">${e.description}</dd>`)}
         </dl>`)}
-    </section>` : n;
+    </section>` : i;
 	}
 };
-t("lintje-explainer", m);
+n("lintje-explainer", m);
 //#endregion
 export { m as LintjeExplainer };

package/dist-elements/tag/field.js

@@ -1,4 +1,4 @@
-import { Bt as e, Gt as t, Ht as n, Z as r, qt as i, zt as a } from "../chunks/base-Bg-IFOPG.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
 //#region src/components/inputs/field/field.css?inline
 var o = "/* `min-width: 0`, or a grid item overflows. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n:host([stacked]) { width: 100%; --h-control: var(--h-touch); }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.lintje-filter-field__label {\n  display: flex; align-items: center; gap: 6px;\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-filter-field__label.is-modified { color: var(--color-accent-text); }\n.lintje-filter-field__dot {\n  width: 6px; height: 6px; border-radius: 50%;\n  background: var(--color-attention);\n  flex: none;\n}\n\n:host([stacked]) .lintje-filter-field { gap: var(--space-2); }\n\n/* Forced colours drop the label colour; the dot keeps its drawing in CanvasText. */\n@media (forced-colors: active) {\n  .lintje-filter-field__dot { forced-color-adjust: none; background: CanvasText; }\n}\n";
 //#endregion
@@ -11,7 +11,7 @@ function s(e) {
 	}
 	return [...e.children].some(s);
 }
-var c = class extends a {
+var c = class extends e {
 	constructor(...e) {
 		super(...e), this.label = "", this.modified = !1, this.stacked = !1;
 	}
@@ -37,7 +37,7 @@ var c = class extends a {
 	render() {
 		return i`<div class="lintje-filter-field">
       <label
-        class=${r({
+        class=${a({
 			"lintje-filter-field__label": !0,
 			"is-modified": this.modified
 		})}
@@ -45,12 +45,12 @@ var c = class extends a {
       >
         ${this.label}
         ${this.modified ? i`<span class="lintje-filter-field__dot" aria-hidden="true"></span
-                ><span class="visually-hidden">afwijkend van standaard</span>` : t}
+                ><span class="visually-hidden">afwijkend van standaard</span>` : r}
       </label>
       <slot></slot>
     </div>`;
 	}
 };
-e("lintje-field", c);
+t("lintje-field", c);
 //#endregion
 export { c as LintjeField };

package/dist-elements/tag/file-upload.js

@@ -1,8 +1,8 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, It as i, Lt as a, U as o, Z as s, et as c, qt as l } from "../chunks/base-Bg-IFOPG.js";
-import { n as u } from "../chunks/focus-trap-9BnE-xWv.js";
-import { r as d, t as f } from "../chunks/input-BtuNFSWk.js";
+import { Gt as e, Kt as t, Q as n, Yt as r, Zt as i, en as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CbmWxUig.js";
+import { n as u } from "../chunks/focus-trap-BwOxE5BX.js";
+import { r as d, t as f } from "../chunks/input-CRW_exv_.js";
 //#region src/components/inputs/file-upload/file-upload.css?inline
-var p = "/* The drop zone and the list of files under it. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n:host([fill]) { height: 100%; }\n:host([fill]) .lintje-field { height: 100%; }\n\n/* --- */\n\n/* The zone itself does not answer the pointer: only the button does. Its content stands centred,\n   so a wide zone does not leave it huddled in one corner. */\n.lintje-file-upload {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\n  gap: var(--space-2) var(--space-3);\n  padding: var(--space-6) var(--space-4);\n  border: 2px dashed var(--color-border-heavy);\n  background: var(--color-bg-page);\n  color: var(--color-text-primary);\n  font: var(--text-ui);\n  text-align: center;\n}\n.lintje-file-upload__icon { flex: none; }\n.lintje-file-upload--fill {\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  min-height: calc(4 * var(--h-control));\n  text-align: center;\n}\n.lintje-file-upload--fill .lintje-file-upload__meta { flex-basis: auto; }\n.lintje-file-upload__meta {\n  flex-basis: 100%;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n\n.lintje-file-upload.is-dragging {\n  border-style: solid;\n  border-color: var(--color-accent-line);\n  background: var(--color-bg-selected);\n}\n.lintje-file-upload.is-error { border-style: solid; border-color: var(--color-error); }\n.lintje-file-upload.is-disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n}\n.lintje-file-upload.is-disabled .lintje-file-upload__meta { color: var(--color-text-disabled); }\n\n/* --- The files ----------------------------------------------------------- */\n.lintje-file-upload__list { display: flex; flex-direction: column; gap: var(--space-3); }\n.lintje-file-upload__row { display: flex; flex-direction: column; gap: 6px; }\n.lintje-file-upload__row-head {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n.lintje-file-upload__row-icon { flex: none; }\n.lintje-file-upload__row.is-busy .lintje-file-upload__row-icon { color: var(--color-text-muted); }\n.lintje-file-upload__row.is-done .lintje-file-upload__row-icon { color: var(--color-success); }\n.lintje-file-upload__row.is-error .lintje-file-upload__row-icon { color: var(--color-error); }\n.lintje-file-upload__name {\n  flex: 1 1 120px; min-width: 0;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  overflow-wrap: anywhere;\n}\n.lintje-file-upload__detail { color: var(--color-text-muted); }\n.lintje-file-upload__reason {\n  display: block;\n  font: var(--text-meta);\n  font-weight: 700;\n  color: var(--color-error-text);\n}\n\n/* Below 768 px nobody drags: the words go and the button takes the full width. */\n@media (max-width: 767px) {\n  .lintje-file-upload__text { display: none; }\n  .lintje-file-upload.is-dragging .lintje-file-upload__text { display: inline; }\n  .lintje-file-upload__button { flex: 1 1 100%; --h-button: var(--h-touch); }\n}\n", m = new Intl.NumberFormat("nl-NL", { maximumFractionDigits: 1 });
+var p = "/* The drop zone and the list of files under it. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n:host([fill]) { height: 100%; }\n:host([fill]) .lintje-field { height: 100%; }\n\n/* --- */\n\n/* The zone itself does not answer the pointer: only the button does. Its content stands centred,\n   so a wide zone does not leave it huddled in one corner. */\n.lintje-file-upload {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\n  gap: var(--space-2) var(--space-3);\n  padding: var(--space-6) var(--space-4);\n  border: 2px dashed var(--color-border-heavy);\n  background: var(--color-bg-page);\n  color: var(--color-text-primary);\n  font: var(--text-ui);\n  text-align: center;\n}\n.lintje-file-upload__icon { flex: none; }\n.lintje-file-upload--fill {\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  min-height: calc(4 * var(--h-control));\n  text-align: center;\n}\n.lintje-file-upload--fill .lintje-file-upload__meta { flex-basis: auto; }\n.lintje-file-upload__meta {\n  flex-basis: 100%;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n\n.lintje-file-upload.is-dragging {\n  border-style: solid;\n  border-color: var(--color-accent-line);\n  background: var(--color-bg-selected);\n}\n.lintje-file-upload.is-error { border-style: solid; border-color: var(--color-error); }\n.lintje-file-upload.is-disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n}\n.lintje-file-upload.is-disabled .lintje-file-upload__meta { color: var(--color-text-disabled); }\n\n/* --- The files ----------------------------------------------------------- */\n.lintje-file-upload__list { display: flex; flex-direction: column; gap: var(--space-3); }\n.lintje-file-upload__row { display: flex; flex-direction: column; gap: 6px; }\n.lintje-file-upload__row-head {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n.lintje-file-upload__row-icon { flex: none; }\n.lintje-file-upload__row.is-busy .lintje-file-upload__row-icon { color: var(--color-text-muted); }\n.lintje-file-upload__row.is-done .lintje-file-upload__row-icon { color: var(--color-success); }\n.lintje-file-upload__row.is-error .lintje-file-upload__row-icon { color: var(--color-error); }\n.lintje-file-upload__name {\n  flex: 1 1 120px; min-width: 0;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  overflow-wrap: anywhere;\n}\n.lintje-file-upload__detail { color: var(--color-text-muted); }\n.lintje-file-upload__reason {\n  display: block;\n  font: var(--text-meta);\n  font-weight: 700;\n  color: var(--color-error-text);\n}\n\n/* Below 768 px nobody drags: the words go and the button takes the full width. */\n@media screen and (max-width: 767px) {\n  .lintje-file-upload__text { display: none; }\n  .lintje-file-upload.is-dragging .lintje-file-upload__text { display: inline; }\n  .lintje-file-upload__button { flex: 1 1 100%; --h-button: var(--h-touch); }\n}\n", m = new Intl.NumberFormat("nl-NL", { maximumFractionDigits: 1 });
 function h(e) {
 	for (let [t, n] of [
 		[1024 ** 3, "GB"],
@@ -50,8 +50,8 @@ var x = {
 	done: "klaar",
 	error: "geweigerd"
 }, S = (e) => (e ?? []).filter((e) => e.state === "done").map((e) => e.id), C = (e) => [...e.dataTransfer?.types ?? []].includes("Files"), w = class extends d {
-	constructor(...e) {
-		super(...e), this.accept = "", this.single = !1, this.fill = !1, this.dragging = !1, this.dragCount = 0, this.refused = [], this.news = "", this.#e = new a(this, i), this.#t = 0, this.#n = 0, this.#r = null, this.onDragEnter = (e) => {
+	constructor(...n) {
+		super(...n), this.accept = "", this.single = !1, this.fill = !1, this.dragging = !1, this.dragCount = 0, this.refused = [], this.news = "", this.#e = new t(this, e), this.#t = 0, this.#n = 0, this.#r = null, this.onDragEnter = (e) => {
 			!this.disabled && C(e) && (this.#t += 1, this.dragging = !0, this.dragCount = e.dataTransfer?.items?.length ?? 0);
 		}, this.onDragLeave = () => {
 			this.dragging && (this.#t = Math.max(0, this.#t - 1), this.#t === 0 && (this.dragging = !1));
@@ -61,9 +61,9 @@ var x = {
 	}
 	static {
 		this.styles = [
-			e,
-			r(f),
-			r(p)
+			o,
+			i(f),
+			i(p)
 		];
 	}
 	static {
@@ -118,7 +118,7 @@ var x = {
 		return this.renderRoot.querySelector(".lintje-file-upload__button");
 	}
 	focusedRow() {
-		let e = this.rowElements, t = e.findIndex((e) => o(e));
+		let e = this.rowElements, t = e.findIndex((e) => n(e));
 		return t < 0 ? null : {
 			id: e[t].dataset.id ?? "",
 			index: t
@@ -166,28 +166,28 @@ var x = {
 		return [this.accept ? _(this.accept) : "", this.maxSize ? `hoogstens ${h(this.maxSize)}` : ""].filter(Boolean).join(" · ");
 	}
 	renderRow(e) {
-		let t = e.state === "busy", r = {
+		let t = e.state === "busy", n = {
 			busy: "op-kantoor-document-blanco",
 			done: "functioneel-vinkje",
 			error: "functioneel-waarschuwing"
-		}[e.state], i = typeof e.progress == "number", a = t ? i ? `· ${Math.round(e.progress)}%` : "" : e.state === "done" ? `· ${h(e.size)}` : "";
-		return l`<li
-      class=${s({
+		}[e.state], r = typeof e.progress == "number", i = t ? r ? `· ${Math.round(e.progress)}%` : "" : e.state === "done" ? `· ${h(e.size)}` : "";
+		return s`<li
+      class=${c({
 			"lintje-file-upload__row": !0,
 			[`is-${e.state}`]: !0
 		})}
       data-id=${e.id}
     >
       <div class="lintje-file-upload__row-head">
-        ${c(r, {
+        ${l(n, {
 			size: 18,
 			className: "lintje-file-upload__row-icon"
 		})}
         <span class="lintje-file-upload__name">
           <strong>${e.name}</strong
           ><span class="visually-hidden">, ${x[e.state]}</span>
-          ${a ? l`<span class="lintje-file-upload__detail">${a}</span>` : n}
-          ${e.state === "error" && e.message ? l`<span class="lintje-file-upload__reason">${e.message}</span>` : n}
+          ${i ? s`<span class="lintje-file-upload__detail">${i}</span>` : a}
+          ${e.state === "error" && e.message ? s`<span class="lintje-file-upload__reason">${e.message}</span>` : a}
         </span>
         <lintje-button
           variant="link"
@@ -197,19 +197,19 @@ var x = {
           ></lintje-button
         >
       </div>
-      ${t ? l`<lintje-progress-bar
+      ${t ? s`<lintje-progress-bar
             hide-label
             label=${`${e.name} uploaden`}
-            .value=${i ? e.progress : void 0}
-          ></lintje-progress-bar>` : n}
+            .value=${r ? e.progress : void 0}
+          ></lintje-progress-bar>` : a}
     </li>`;
 	}
 	render() {
-		let e = [...this.files ?? [], ...this.refused], t = this.dragging && !this.disabled, r = this.metaText, i = this.single ? "Bestand kiezen" : "Bestanden kiezen", a = [r, this.footMessage || this.hint].filter(Boolean).join(". ");
-		return l`<div class="lintje-field">
-      ${this.label ? this.renderLabel() : n}
+		let e = [...this.files ?? [], ...this.refused], t = this.dragging && !this.disabled, n = this.metaText, r = this.single ? "Bestand kiezen" : "Bestanden kiezen", i = [n, this.footMessage || this.hint].filter(Boolean).join(". ");
+		return s`<div class="lintje-field">
+      ${this.label ? this.renderLabel() : a}
       <div
-        class=${s({
+        class=${c({
 			"lintje-file-upload": !0,
 			"lintje-file-upload--fill": this.fill,
 			"is-dragging": t,
@@ -219,45 +219,45 @@ var x = {
         @dragover=${this.onDragOver}
         @drop=${this.onDrop}
       >
-        ${t ? l`${c("functioneel-upload", {
+        ${t ? s`${l("functioneel-upload", {
 			size: 20,
 			className: "lintje-file-upload__icon"
 		})}
-                <strong class="lintje-file-upload__text">${this.dropText}</strong>` : l`<lintje-button
+                <strong class="lintje-file-upload__text">${this.dropText}</strong>` : s`<lintje-button
                   class="lintje-file-upload__button"
                   variant="secondary"
                   icon="functioneel-upload"
                   ?block=${this.#e.matches}
                   ?disabled=${this.disabled}
                   ?invalid=${!!this.error}
-                  accessible-name=${this.label ? `${i}, ${this.labelText}` : n}
-                  description=${a || n}
+                  accessible-name=${this.label ? `${r}, ${this.labelText}` : a}
+                  description=${i || a}
                   @click=${this.pick}
-                  >${i}</lintje-button
+                  >${r}</lintje-button
                 >
                 <span class="lintje-file-upload__text"
                   >${this.single ? "of sleep het hierheen" : "of sleep ze hierheen"}</span
                 >
-                ${r ? l`<span class="lintje-file-upload__meta">${r}</span>` : n}`}
+                ${n ? s`<span class="lintje-file-upload__meta">${n}</span>` : a}`}
         <input
           class="lintje-file-upload__input"
           type="file"
           hidden
           tabindex="-1"
-          accept=${this.accept || n}
+          accept=${this.accept || a}
           ?multiple=${!this.single}
           ?disabled=${this.disabled}
           @change=${this.onPicked}
         />
       </div>
-      ${e.length ? l`<ul class="lintje-file-upload__list" aria-label="Bestanden">
+      ${e.length ? s`<ul class="lintje-file-upload__list" aria-label="Bestanden">
             ${e.map((e) => this.renderRow(e))}
-          </ul>` : n}
+          </ul>` : a}
       <span class="visually-hidden" role="status">${this.news}</span>
       ${this.renderFoot()}
     </div>`;
 	}
 };
-t("lintje-file-upload", w);
+r("lintje-file-upload", w);
 //#endregion
 export { w as LintjeFileUpload, v as accepts, h as formatSize, y as refusal, b as rowNews, _ as typesText };

package/dist-elements/tag/filter-bar.js

@@ -1,18 +1,18 @@
-import { Bt as e, Et as t, Gt as n, Ht as r, It as i, Lt as a, Ot as o, Tt as s, kt as c, qt as l, zt as u } from "../chunks/base-Bg-IFOPG.js";
-import "./toggle.js";
+import { Ft as e, Gt as t, Jt as n, Kt as r, Lt as i, Pt as a, Rt as o, Yt as s, Zt as c, en as l, nn as u } from "../chunks/base-CbmWxUig.js";
 import "./segmented.js";
 import "./text-input.js";
 import "./field.js";
 import "./number-input.js";
 import "./select.js";
 import "./multiselect.js";
+import "./toggle.js";
 import "./range.js";
 import "./date-range.js";
-import { n as d } from "../chunks/sentence-BI3lwEuT.js";
+import { n as d } from "../chunks/sentence-B19AyZBS.js";
 import "./filter-zone.js";
 import "./filter-sheet.js";
 //#region src/components/filters/shared/filter-layout.css?inline
-var f = "/*\n * Layout rules across component boundaries, adopted by the filter bar: `.lintje-select` sits in\n * `lintje-select`'s shadow root, so the rules are written by tag. An outer rule beats the\n * control's own `:host` rule, so no `!important`.\n */\n\nlintje-filter-zone lintje-field,\nlintje-filter-sheet lintje-field { min-width: 0; }\n\n/* 1024-1439: narrower selects, so four controls fit on one line. */\n@media (min-width: 1024px) and (max-width: 1439px) {\n  lintje-filter-zone lintje-select { width: 148px; }\n}\n@media (min-width: 768px) and (max-width: 1023px) {\n  lintje-filter-zone lintje-select,\n  lintje-filter-zone lintje-multiselect { width: 100%; }\n}\n\n/* The host takes the control height and centres the toggle's pill in it. */\nlintje-filter-zone lintje-toggle {\n  display: grid;\n  align-items: center;\n  min-height: var(--h-control);\n}\n\n/* A select's width, so the placeholder stays on one line. */\nlintje-filter-zone lintje-multiselect { width: 180px; }\n\n:host {\n  display: block;\n}\n:host([hidden]) { display: none; }\n", p = (e, t) => JSON.stringify(e ?? null) === JSON.stringify(t ?? null), m = (e) => e ? e.split("-").reverse().join("-") : null, h = (e) => e ? e.split("-").reverse().join("-") : null, g = (e) => {
+var f = "/*\n * Layout rules across component boundaries, adopted by the filter bar: `.lintje-select` sits in\n * `lintje-select`'s shadow root, so the rules are written by tag. An outer rule beats the\n * control's own `:host` rule, so no `!important`.\n */\n\nlintje-filter-zone lintje-field,\nlintje-filter-sheet lintje-field { min-width: 0; }\n\n/* 1024-1439: narrower selects, so four controls fit on one line. */\n@media (min-width: 1024px) and (max-width: 1439px) {\n  lintje-filter-zone lintje-select { width: 148px; }\n}\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  lintje-filter-zone lintje-select,\n  lintje-filter-zone lintje-multiselect { width: 100%; }\n}\n\n/* The host takes the control height and centres the toggle's pill in it. */\nlintje-filter-zone lintje-toggle {\n  display: grid;\n  align-items: center;\n  min-height: var(--h-control);\n}\n\n/* A select's width, so the placeholder stays on one line. */\nlintje-filter-zone lintje-multiselect { width: 180px; }\n\n:host {\n  display: block;\n}\n:host([hidden]) { display: none; }\n", p = (e, t) => JSON.stringify(e ?? null) === JSON.stringify(t ?? null), m = (e) => e ? e.split("-").reverse().join("-") : null, h = (e) => e ? e.split("-").reverse().join("-") : null, g = (e) => {
 	let [t, n, r] = e.split("-").map(Number);
 	return new Date(t, n - 1, r);
 };
@@ -62,12 +62,12 @@ function y(e, t) {
 		emphasis: !1
 	}), n;
 }
-var b = class extends u {
+var b = class extends n {
 	constructor(...e) {
-		super(...e), this.values = {}, this.draft = {}, this.open = !1, this.mobile = new a(this, i), this.frame = new s(this), this.sheetWasOpen = !1, this.committed = "", this.declaredOpen = void 0;
+		super(...e), this.values = {}, this.draft = {}, this.open = !1, this.mobile = new r(this, t), this.frame = new a(this), this.sheetWasOpen = !1, this.committed = "", this.declaredOpen = void 0;
 	}
 	static {
-		this.styles = r(f);
+		this.styles = c(f);
 	}
 	static {
 		this.properties = {
@@ -100,14 +100,14 @@ var b = class extends u {
 		let t = this.frame.state.sheetOpen;
 		t && !this.sheetWasOpen && (this.draft = { ...this.values }), this.sheetWasOpen = t;
 		let n = y(this.visible, this.values);
-		o({
+		i({
 			hasFilters: !0,
 			modifiedCount: this.modifiedCount,
 			summary: d(n)
 		});
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.data?.standalone || t();
+		super.disconnectedCallback(), this.data?.standalone || e();
 	}
 	isModified(e, t) {
 		return !p(e[t.key], t.default);
@@ -118,38 +118,38 @@ var b = class extends u {
 	commit(e) {
 		this.values = e, this.emit("lintje-values-change", e);
 	}
-	control(e, t, r, i, a) {
-		let o = e.options ?? [];
+	control(e, t, n, r, i) {
+		let a = e.options ?? [];
 		switch (e.kind) {
-			case "segmented": return l`<lintje-segmented
-          ?stacked=${i}
+			case "segmented": return u`<lintje-segmented
+          ?stacked=${r}
           hide-label
           label=${e.label}
           value=${t ?? ""}
-          .options=${o}
-          @lintje-change=${(e) => a(e.detail)}
+          .options=${a}
+          @lintje-change=${(e) => i(e.detail)}
         ></lintje-segmented>`;
-			case "select": return l`<lintje-select
-          ?stacked=${i}
+			case "select": return u`<lintje-select
+          ?stacked=${r}
           hide-label
           label=${e.label}
           value=${t ?? ""}
-          .options=${o}
-          ?bold=${r}
-          @lintje-change=${(e) => a(e.detail)}
+          .options=${a}
+          ?bold=${n}
+          @lintje-change=${(e) => i(e.detail)}
         ></lintje-select>`;
-			case "multiselect": return l`<lintje-multiselect
-          ?stacked=${i}
+			case "multiselect": return u`<lintje-multiselect
+          ?stacked=${r}
           hide-label
           label=${e.label}
-          .options=${o}
+          .options=${a}
           .selected=${Array.isArray(t) ? t : []}
-          @lintje-change=${(e) => a(e.detail)}
+          @lintje-change=${(e) => i(e.detail)}
         ></lintje-multiselect>`;
 			case "date-range": {
 				let n = t;
-				return l`<lintje-date-range
-          ?stacked=${i}
+				return u`<lintje-date-range
+          ?stacked=${r}
           hide-label
           accessible-name=${e.label}
           .range=${{
@@ -157,70 +157,70 @@ var b = class extends u {
 					to: m(n?.to ?? null)
 				}}
           .maxDate=${typeof e.max == "string" ? g(e.max) : void 0}
-          @lintje-change=${(e) => a({
+          @lintje-change=${(e) => i({
 					from: h(e.detail.from),
 					to: h(e.detail.to)
 				})}
         ></lintje-date-range>`;
 			}
 			case "range": {
-				let n = e.steps ?? [], [r, o] = t ?? [0, n.length - 1];
-				return l`<lintje-range
-          ?stacked=${i}
+				let n = e.steps ?? [], [a, o] = t ?? [0, n.length - 1];
+				return u`<lintje-range
+          ?stacked=${r}
           hide-label
           label=${e.label}
           .steps=${n}
-          .from=${r}
+          .from=${a}
           .to=${o}
-          @lintje-change=${(e) => a(e.detail)}
+          @lintje-change=${(e) => i(e.detail)}
         ></lintje-range>`;
 			}
 			case "slider": {
-				let r = e.steps ?? [];
-				return l`<lintje-range
+				let n = e.steps ?? [];
+				return u`<lintje-range
           single
-          ?stacked=${i}
+          ?stacked=${r}
           hide-label
           label=${e.label}
-          unit=${e.unit ?? n}
-          .steps=${r}
-          .value=${typeof t == "number" ? t : r[0] ?? null}
-          @lintje-change=${(e) => a(e.detail)}
+          unit=${e.unit ?? l}
+          .steps=${n}
+          .value=${typeof t == "number" ? t : n[0] ?? null}
+          @lintje-change=${(e) => i(e.detail)}
         ></lintje-range>`;
 			}
-			case "toggle": return l`<lintje-toggle
+			case "toggle": return u`<lintje-toggle
           hide-label
           label=${e.label}
           ?checked=${t === !0}
-          @lintje-change=${(e) => a(e.detail)}
+          @lintje-change=${(e) => i(e.detail)}
         ></lintje-toggle>`;
-			case "text": return l`<lintje-text-input
-          ?stacked=${i}
+			case "text": return u`<lintje-text-input
+          ?stacked=${r}
           hide-label
           clearable
           label=${e.label}
           .value=${typeof t == "string" ? t : ""}
-          placeholder=${e.placeholder ?? n}
-          @lintje-change=${(e) => a(e.detail)}
+          placeholder=${e.placeholder ?? l}
+          @lintje-change=${(e) => i(e.detail)}
         ></lintje-text-input>`;
-			case "number": return l`<lintje-number-input
-          ?stacked=${i}
+			case "number": return u`<lintje-number-input
+          ?stacked=${r}
           hide-label
           label=${e.label}
           .value=${typeof t == "number" ? t : null}
           .min=${e.min}
           .max=${typeof e.max == "number" ? e.max : void 0}
           .step=${e.step ?? 1}
-          unit=${e.unit ?? n}
+          unit=${e.unit ?? l}
           .stepper=${e.unit === void 0}
-          @lintje-change=${(e) => a(e.detail)}
+          @lintje-change=${(e) => i(e.detail)}
         ></lintje-number-input>`;
 		}
 	}
 	fields(e, t, n) {
-		return l`${this.visible.map((r) => {
+		return u`${this.visible.map((r) => {
 			let i = this.isModified(e, r);
-			return l`<lintje-field label=${r.label} ?modified=${i} ?stacked=${t}>
+			return u`<lintje-field label=${r.label} ?modified=${i} ?stacked=${t}>
         ${this.control(r, e[r.key], i, t, (t) => n({
 				...e,
 				[r.key]: t
@@ -230,7 +230,7 @@ var b = class extends u {
 	}
 	render() {
 		let e = y(this.visible, this.values), t = this.frame.state.sheetOpen && this.mobile.matches && !this.data?.standalone;
-		return l`
+		return u`
       <lintje-filter-zone
         stick="fixed"
         .total=${this.visible.length}
@@ -242,7 +242,7 @@ var b = class extends u {
         @lintje-zone-open-change=${(e) => {
 			this.open = e.detail, this.emit("lintje-filters-open-change", e.detail);
 		}}
-        @lintje-zone-scrolled-change=${(e) => c(e.detail)}
+        @lintje-zone-scrolled-change=${(e) => o(e.detail)}
       >
         ${this.fields(this.values, !1, (e) => this.commit(e))}
       </lintje-filter-zone>
@@ -251,12 +251,12 @@ var b = class extends u {
         ?open=${t}
         .sentence=${y(this.visible, this.draft)}
         ?reset-disabled=${this.visible.every((e) => !this.isModified(this.draft, e))}
-        @lintje-sheet-close=${() => o({ sheetOpen: !1 })}
+        @lintje-sheet-close=${() => i({ sheetOpen: !1 })}
         @lintje-filters-reset=${() => {
 			this.draft = this.defaults;
 		}}
         @lintje-filters-apply=${() => {
-			this.commit(this.draft), o({ sheetOpen: !1 });
+			this.commit(this.draft), i({ sheetOpen: !1 });
 		}}
       >
         ${this.fields(this.draft, !0, (e) => {
@@ -266,6 +266,6 @@ var b = class extends u {
     `;
 	}
 };
-e("lintje-filter-bar", b);
+s("lintje-filter-bar", b);
 //#endregion
 export { b as LintjeFilterBar };

package/dist-elements/tag/filter-sheet.js

@@ -1,9 +1,9 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Mt as i, Nt as a, et as o, qt as s, zt as c } from "../chunks/base-Bg-IFOPG.js";
-import { t as l } from "../chunks/focus-trap-9BnE-xWv.js";
+import { Ht as e, Jt as t, Vt as n, Yt as r, Zt as i, en as a, lt as o, nn as s, ut as c } from "../chunks/base-CbmWxUig.js";
+import { t as l } from "../chunks/focus-trap-BwOxE5BX.js";
 import { t as u } from "../chunks/dialog-close-u75fVEw4.js";
-import { t as d } from "../chunks/sentence-BI3lwEuT.js";
+import { t as d } from "../chunks/sentence-B19AyZBS.js";
 //#region src/components/filters/filter-sheet/filter-sheet.css?inline
-var f = "/* The filter sheet's own box. Control sizes are set in `filter-layout.css`. */\n:host {\n  display: block;\n}\n\n/* --- */\n\n.lintje-filter-sheet__scrim {\n  position: fixed; inset: 0; z-index: 60;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n.lintje-filter-sheet {\n  position: fixed;\n  inset: auto 0 0 0;\n  z-index: 61;\n  max-height: 88vh;\n  display: flex;\n  flex-direction: column;\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-filter);\n  animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-filter-sheet:focus { outline: none; }\n\n.lintje-filter-sheet__header {\n  display: flex; align-items: center; gap: var(--space-2);\n  padding: var(--space-4);\n  border-bottom: 1px solid var(--color-border-filter);\n}\n.lintje-filter-sheet__title { font: var(--text-h2); }\n.lintje-filter-sheet__hint { font: var(--text-small); color: var(--color-text-muted); flex: 1; }\n\n.lintje-filter-sheet__body {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--space-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n\n.lintje-filter-sheet__summary {\n  display: flex; align-items: flex-start; gap: var(--space-2);\n  font: var(--text-ui); line-height: 1.4;\n  padding-top: var(--space-2);\n  border-top: 1px solid var(--color-border-filter);\n}\n\n.lintje-filter-sheet__footer {\n  display: flex; gap: var(--space-3);\n  padding: var(--space-4);\n  border-top: 1px solid var(--color-border-filter);\n  background: var(--color-bg-surface);\n}\n/* The <button> reading the height is in the `lintje-button` shadow root: set the token here. */\n.lintje-filter-sheet__action { flex: 1; height: var(--h-touch); --h-button: var(--h-touch); }\n", p = class extends c {
+var f = "/* The filter sheet's own box. Control sizes are set in `filter-layout.css`. */\n:host {\n  display: block;\n}\n\n/* --- */\n\n.lintje-filter-sheet__scrim {\n  position: fixed; inset: 0; z-index: 60;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n.lintje-filter-sheet {\n  position: fixed;\n  inset: auto 0 0 0;\n  z-index: 61;\n  max-height: 88vh;\n  display: flex;\n  flex-direction: column;\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-filter);\n  animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-filter-sheet:focus { outline: none; }\n\n.lintje-filter-sheet__header {\n  display: flex; align-items: center; gap: var(--space-2);\n  padding: var(--space-4);\n  border-bottom: 1px solid var(--color-border-filter);\n}\n.lintje-filter-sheet__title { font: var(--text-h2); }\n.lintje-filter-sheet__hint { font: var(--text-small); color: var(--color-text-muted); flex: 1; }\n\n.lintje-filter-sheet__body {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--space-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n\n.lintje-filter-sheet__summary {\n  display: flex; align-items: flex-start; gap: var(--space-2);\n  font: var(--text-ui); line-height: 1.4;\n  padding-top: var(--space-2);\n  border-top: 1px solid var(--color-border-filter);\n}\n\n.lintje-filter-sheet__footer {\n  display: flex; gap: var(--space-3);\n  padding: var(--space-4);\n  border-top: 1px solid var(--color-border-filter);\n  background: var(--color-bg-surface);\n}\n/* The <button> reading the height is in the `lintje-button` shadow root: set the token here. */\n.lintje-filter-sheet__action { flex: 1; height: var(--h-touch); --h-button: var(--h-touch); }\n", p = class extends t {
 	constructor(...e) {
 		super(...e), this.open = !1, this.resetDisabled = !1, this.applyDisabled = !1, this.sentence = [], this.locked = null, this.#e = new l(), this.onKeyDown = (e) => {
 			this.open && e.key === "Escape" && this.#e.isTopmost() && (this.hasOpenPopover() || this.close());
@@ -11,9 +11,9 @@ var f = "/* The filter sheet's own box. Control sizes are set in `filter-layout.
 	}
 	static {
 		this.styles = [
-			e,
-			r(u),
-			r(f)
+			o,
+			i(u),
+			i(f)
 		];
 	}
 	static {
@@ -48,7 +48,7 @@ var f = "/* The filter sheet's own box. Control sizes are set in `filter-layout.
 		this.emitLocal("lintje-sheet-close");
 	}
 	lock() {
-		this.locked ||= this.scrollLock ? i(this.scrollLock) : a();
+		this.locked ||= this.scrollLock ? n(this.scrollLock) : e();
 	}
 	unlock() {
 		this.locked?.(), this.locked = null;
@@ -81,7 +81,7 @@ var f = "/* The filter sheet's own box. Control sizes are set in `filter-layout.
             class="lintje-dialog-close lintje-filter-sheet__close"
             @click=${() => this.close()}
           >
-            ${o("functioneel-kruis", { size: 16 })}
+            ${c("functioneel-kruis", { size: 16 })}
           </button>
         </div>
 
@@ -109,9 +109,9 @@ var f = "/* The filter sheet's own box. Control sizes are set in `filter-layout.
           >
         </div>
       </div>
-    ` : n;
+    ` : a;
 	}
 };
-t("lintje-filter-sheet", p);
+r("lintje-filter-sheet", p);
 //#endregion
 export { p as LintjeFilterSheet };