lintje 0.2.0 → 0.4.0

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

@@ -1,5 +1,6 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, et as a, qt as o } from "../chunks/base-Bg-IFOPG.js";
-import { a as s, n as c, t as l } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a, ut as o } from "../chunks/base-DRGvkF-r.js";
+import { i as s, t as c } from "../chunks/input-BGMLam-O.js";
+import { t as l } from "../chunks/input-lQTmOMOz.js";
 import { t as u } from "../chunks/debounce-JXnLMCcF.js";
 //#region src/components/inputs/text-input/text-input.css?inline
 var d = "/* The text field. */\n\n/* --- Text field ----------------------------------------------------------- */\n.lintje-text-input { position: relative; display: flex; align-items: center; }\n.lintje-text-input__control {\n  width: 100%; height: var(--h-control);\n  padding: 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  border-radius: var(--radius);\n}\n.lintje-text-input__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-text-input__control.is-error { border: 2px solid var(--color-error); }\n/* Read-only: the subtle surface, the strong border, the text still primary. */\n.lintje-text-input__control.is-readonly {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-primary);\n  cursor: default;\n}\n.lintje-text-input__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-text-input--clearable .lintje-text-input__control {\n  padding-right: calc(var(--h-icon-button) + var(--space-1));\n}\n/* The hit area reaches the target height above and below only: sideways it would cover the text. */\n.lintje-text-input__clear {\n  position: absolute; right: var(--space-1);\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-text-input__clear:hover { color: var(--color-text-primary); }\n.lintje-text-input__clear::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n/* --- Search ---------------------------------------------------------------- */\n/* The browser's own clear button and decoration go: the field draws its own cross. */\n.lintje-text-input--search .lintje-text-input__control { padding-left: var(--space-10); }\n.lintje-text-input__search {\n  position: absolute; left: var(--space-3);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n.lintje-text-input__control::-webkit-search-cancel-button,\n.lintje-text-input__control::-webkit-search-decoration { appearance: none; }\n\n/* --- Password -------------------------------------------------------------- */\n.lintje-text-input--password .lintje-text-input__control { border-right: 0; }\n.lintje-text-input__reveal { flex: none; --h-button: var(--h-control); }\n", f = class extends c {
@@ -8,9 +9,9 @@ var d = "/* The text field. */\n\n/* --- Text field ----------------------------
 	}
 	static {
 		this.styles = [
-			e,
-			r(l),
-			r(d)
+			r,
+			t(l),
+			t(d)
 		];
 	}
 	static {
@@ -62,7 +63,7 @@ var d = "/* The text field. */\n\n/* --- Text field ----------------------------
 			hintId: this.hintId,
 			errorId: this.errorId
 		};
-		return this.type === "search" ? o`${e ? s(void 0, e, t) : n}<span
+		return this.type === "search" ? i`${e ? s(void 0, e, t) : n}<span
         id=${this.hintId}
         class="lintje-field__hint"
         aria-live="polite"
@@ -75,24 +76,24 @@ var d = "/* The text field. */\n\n/* --- Text field ----------------------------
 	}
 	render() {
 		let e = this.type === "search", t = this.type === "password", r = (this.clearable || e) && !t && this.value !== "" && !this.disabled && !this.readonly;
-		return o`<div class="lintje-field">
+		return i`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <div
-        class=${i({
+        class=${a({
 			"lintje-text-input": !0,
 			"lintje-text-input--clearable": r,
 			"lintje-text-input--search": e,
 			"lintje-text-input--password": t
 		})}
       >
-        ${e ? a("functioneel-zoek", {
+        ${e ? o("functioneel-zoek", {
 			size: 18,
 			className: "lintje-text-input__search"
 		}) : n}
         <input
           type=${this.inputType}
           id=${this.controlId}
-          class=${i({
+          class=${a({
 			"lintje-text-input__control": !0,
 			"is-error": !!this.error,
 			"is-readonly": this.readonly
@@ -114,16 +115,16 @@ var d = "/* The text field. */\n\n/* --- Text field ----------------------------
           @change=${this.change}
           @keydown=${this.onKeydown}
         />
-        ${r ? o`<button
+        ${r ? i`<button
               type="button"
               class="lintje-text-input__clear"
               aria-label="Wissen"
               @mousedown=${(e) => e.preventDefault()}
               @click=${this.clear}
             >
-              ${a("functioneel-kruis", { size: 16 })}
+              ${o("functioneel-kruis", { size: 16 })}
             </button>` : n}
-        ${t ? o`<lintje-button
+        ${t ? i`<lintje-button
               class="lintje-text-input__reveal"
               variant="secondary"
               ?disabled=${this.disabled}
@@ -135,6 +136,6 @@ var d = "/* The text field. */\n\n/* --- Text field ----------------------------
     </div>`;
 	}
 };
-t("lintje-text-input", f);
+e("lintje-text-input", f);
 //#endregion
 export { f as LintjeTextInput };

package/dist-elements/tag/textarea.js

@@ -1,8 +1,9 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Z as i, qt as a, ut as o } from "../chunks/base-Bg-IFOPG.js";
-import { a as s, i as c, n as l, t as u } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, bt as n, en as r, lt as i, nn as a, st as o } from "../chunks/base-DRGvkF-r.js";
+import { i as s, r as c, t as l } from "../chunks/input-BGMLam-O.js";
+import { t as u } from "../chunks/input-lQTmOMOz.js";
 import { t as d } from "../chunks/debounce-JXnLMCcF.js";
 //#region src/components/inputs/textarea/textarea.css?inline
-var f = "/* The multi-line text field. */\n: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, and\n   fills the height the surface gives it. */\n:host([variant='plain']) { display: flex; flex-direction: column; font: inherit; }\n/* Below 768 px: the full width, as `stacked`. */\n@media (max-width: 767px) {\n  :host { width: 100%; }\n}\n\n/* --- */\n\n/* `rows` lines at least (three by default); grows with its content up to twelve, then scrolls. */\n.lintje-textarea__control {\n  display: block;\n  width: 100%;\n  min-height: calc(var(--lintje-rows, 3) * 1lh + var(--space-4) + 2px);\n  max-height: calc(12lh + var(--space-4) + 2px);\n  field-sizing: content;\n  padding: var(--space-2) 14px;\n  border: 1px solid var(--color-border-field);\n  border-radius: var(--radius);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: var(--text-body);\n  resize: vertical;\n  overflow-y: auto;\n}\n.lintje-textarea__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n/* The padding gives back the pixel the 2 px error border takes. */\n.lintje-textarea__control.is-error { border: 2px solid var(--color-error); padding: 7px 13px; }\n/* Disabled wins over read-only, read-only over error. */\n.lintje-textarea__control.is-readonly {\n  border: 1px solid var(--color-border-strong);\n  padding: var(--space-2) 14px;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-primary);\n  cursor: default;\n}\n.lintje-textarea__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  padding: var(--space-2) 14px;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Plain: the surface around it is the field, and draws the focus ring around itself, so the\n   ring does not sit tight against the text. It keeps growing; the surface decides the height. */\n:host([variant='plain']) .lintje-field { flex: 1; }\n.lintje-textarea__control--plain { flex: 1; }\n.lintje-textarea__control--plain:focus-visible { outline: none; }\n.lintje-textarea__control--plain,\n.lintje-textarea__control--plain.is-readonly,\n.lintje-textarea__control--plain:disabled {\n  min-height: calc(var(--lintje-rows, 3) * 1lh);\n  max-height: none;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  font: inherit;\n  resize: none;\n}\n.lintje-textarea__control--plain.is-error { padding: 0 0 var(--space-1); border: 0; border-bottom: 2px solid var(--color-error); }\n\n.lintje-textarea__counter {\n  align-self: flex-end;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n.lintje-textarea__counter.is-over { color: var(--color-error-text); font-weight: 700; }\n", p = new Intl.NumberFormat("nl-NL");
+var f = "/* The multi-line text field. */\n: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, and\n   fills the height the surface gives it. */\n:host([variant='plain']) { display: flex; flex-direction: column; font: inherit; }\n/* Below 768 px: the full width, as `stacked`. */\n@media screen and (max-width: 767px) {\n  :host { width: 100%; }\n}\n\n/* --- */\n\n/* `rows` lines at least (three by default); grows with its content up to twelve, then scrolls. */\n.lintje-textarea__control {\n  display: block;\n  width: 100%;\n  min-height: calc(var(--lintje-rows, 3) * 1lh + var(--space-4) + 2px);\n  max-height: calc(12lh + var(--space-4) + 2px);\n  field-sizing: content;\n  padding: var(--space-2) 14px;\n  border: 1px solid var(--color-border-field);\n  border-radius: var(--radius);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: var(--text-body);\n  resize: vertical;\n  overflow-y: auto;\n}\n.lintje-textarea__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n/* The padding gives back the pixel the 2 px error border takes. */\n.lintje-textarea__control.is-error { border: 2px solid var(--color-error); padding: 7px 13px; }\n/* Disabled wins over read-only, read-only over error. */\n.lintje-textarea__control.is-readonly {\n  border: 1px solid var(--color-border-strong);\n  padding: var(--space-2) 14px;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-primary);\n  cursor: default;\n}\n.lintje-textarea__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  padding: var(--space-2) 14px;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Plain: the surface around it is the field, and draws the focus ring around itself, so the\n   ring does not sit tight against the text. It keeps growing; the surface decides the height. */\n:host([variant='plain']) .lintje-field { flex: 1; }\n.lintje-textarea__control--plain { flex: 1; }\n.lintje-textarea__control--plain:focus-visible { outline: none; }\n.lintje-textarea__control--plain,\n.lintje-textarea__control--plain.is-readonly,\n.lintje-textarea__control--plain:disabled {\n  min-height: calc(var(--lintje-rows, 3) * 1lh);\n  max-height: none;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  font: inherit;\n  resize: none;\n}\n.lintje-textarea__control--plain.is-error { padding: 0 0 var(--space-1); border: 0; border-bottom: 2px solid var(--color-error); }\n\n.lintje-textarea__counter {\n  align-self: flex-end;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n.lintje-textarea__counter.is-over { color: var(--color-error-text); font-weight: 700; }\n", p = new Intl.NumberFormat("nl-NL");
 function m(e, t) {
 	return `${p.format(e)} / ${p.format(t)} tekens`;
 }
@@ -20,9 +21,9 @@ var _ = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("f
 	}
 	static {
 		this.styles = [
-			e,
-			r(u),
-			r(f)
+			i,
+			t(u),
+			t(f)
 		];
 	}
 	static {
@@ -96,7 +97,7 @@ var _ = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("f
 			hintId: this.hintId,
 			errorId: this.errorId
 		});
-		return [e === n ? "" : e, this.counterShown ? this.counterId : ""].filter(Boolean).join(" ") || n;
+		return [e === r ? "" : e, this.counterShown ? this.counterId : ""].filter(Boolean).join(" ") || r;
 	}
 	get counterShown() {
 		return !!this.maxlength && !this.disabled;
@@ -111,7 +112,7 @@ var _ = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("f
 		return a`${e}<span
         id=${this.counterId}
         part="counter"
-        class=${i({
+        class=${o({
 			"lintje-textarea__counter": !0,
 			"is-over": n > t
 		})}
@@ -125,20 +126,20 @@ var _ = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("f
       ${this.renderLabel(this.controlId)}
       <textarea
         id=${this.controlId}
-        class=${i({
+        class=${o({
 			"lintje-textarea__control": !0,
 			"lintje-textarea__control--plain": this.variant === "plain",
 			"is-error": !!e,
 			"is-readonly": this.readonly
 		})}
         rows=${this.rows}
-        ${o({ "--lintje-rows": this.rows })}
+        ${n({ "--lintje-rows": this.rows })}
         .value=${this.value}
-        placeholder=${this.placeholder || n}
+        placeholder=${this.placeholder || r}
         aria-labelledby=${this.labelId}
         aria-describedby=${this.describedBy}
-        aria-invalid=${e ? "true" : n}
-        aria-required=${this.required ? "true" : n}
+        aria-invalid=${e ? "true" : r}
+        aria-required=${this.required ? "true" : r}
         ?required=${this.required}
         ?readonly=${this.readonly}
         ?disabled=${this.disabled}
@@ -150,6 +151,6 @@ var _ = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("f
     </div>`;
 	}
 };
-t("lintje-textarea", v);
+e("lintje-textarea", v);
 //#endregion
 export { v as LintjeTextarea, g as counterSpeaks, m as counterText, h as limitMessage };

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

@@ -1 +1 @@
-export * from '../types/primitives/tile/tile.js'
+export * from '../types/components/layout/tile/tile.js'

package/dist-elements/tag/tile.js

@@ -1 +1 @@
-export { x as LintjeTile } from "../chunks/base-Bg-IFOPG.js";
+export { w as LintjeTile } from "../chunks/base-DRGvkF-r.js";

package/dist-elements/tag/time-input.js

@@ -1,7 +1,8 @@
-import { $ as e, Bt as t, G as n, Gt as r, Ht as i, Z as a, et as o, f as s, qt as c } from "../chunks/base-Bg-IFOPG.js";
-import { r as l, t as u } from "../chunks/input-BtuNFSWk.js";
+import { Yt as e, Zt as t, en as n, et as r, lt as i, nn as a, s as o, st as s, ut as c } from "../chunks/base-DRGvkF-r.js";
+import { n as l } from "../chunks/input-BGMLam-O.js";
+import { t as u } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/time-input/time-input.css?inline
-var d = "/* The time input: a text field with a list button, and the list in a `lintje-popover`. */\n:host {\n  display: block;\n  min-width: 0;\n  width: 120px;\n}\n:host([hidden]) { display: none; }\n:host([stacked]) {\n  width: 100%;\n  --h-control: var(--h-touch);\n}\n@media (max-width: 767px) {\n  :host {\n    width: 100%;\n    --h-control: var(--h-touch);\n  }\n}\n\n/* --- */\n\n/* --- The field ----------------------------------------------------------- */\n.lintje-time-input { position: relative; display: flex; align-items: center; }\n.lintje-time-input__control {\n  width: 100%; height: var(--h-control);\n  padding: 0 calc(var(--h-control) - 2px + var(--space-2)) 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  border-radius: var(--radius);\n}\n.lintje-time-input__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-time-input__control.is-error { border: 2px solid var(--color-error); }\n/* Disabled wins over error: after it, the whole border back to 1 px strong. */\n.lintje-time-input__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n.lintje-time-input__toggle {\n  position: absolute; top: 1px; right: 1px;\n  width: calc(var(--h-control) - 2px); height: calc(var(--h-control) - 2px);\n  display: flex; align-items: center; justify-content: center;\n  border-left: 1px solid var(--color-border-default);\n  background: transparent;\n  color: var(--color-accent-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* A transparent hit area reaches the target height, never to the left where the typing part is. */\n.lintje-time-input__toggle::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) min(0px, calc(100% - var(--h-target)))\n    min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n/* The button steps in past the 2 px error border; a disabled field has 1 px again. */\n.lintje-time-input__control.is-error:not(:disabled) + .lintje-time-input__toggle {\n  top: 2px; right: 2px;\n  width: calc(var(--h-control) - 4px); height: calc(var(--h-control) - 4px);\n}\n.lintje-time-input__toggle:hover:not(:disabled) { background: var(--color-bg-selected); }\n.lintje-time-input__toggle:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n/* --- The list ------------------------------------------------------------ */\n/* A dense list (`--h-option`): at most seven rows in view, then it scrolls. */\n.lintje-time-input__panel { padding: var(--space-1) 0; }\n.lintje-time-input__list {\n  max-height: calc(7 * var(--h-option));\n  overflow-y: auto;\n  font: var(--text-ui);\n}\n.lintje-time-input__option {\n  display: flex; align-items: center;\n  width: 100%;\n  min-height: var(--h-option);\n  padding: 0 14px;\n  background: transparent;\n  color: var(--color-text-primary);\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-time-input__option:hover { background: var(--color-bg-subtle); }\n.lintje-time-input__option.is-selected { background: var(--color-bg-selected); font-weight: 700; }\n/* The fill alone is about 1.1:1, so the focus ring stands inside the row. */\n.lintje-time-input__option:focus-visible {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n\n/* Forced colours drop fills: the chosen row takes an edge inside the row, so none changes size. */\n@media (forced-colors: active) {\n  .lintje-time-input__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }\n  .lintje-time-input__option:focus-visible { outline-color: Highlight; }\n}\n", f = 1440, p = /^(\d{1,2})[:.](\d{2})$/, m = /^\d{1,4}$/, h = /^(\d{2}):(\d{2})$/, g = (e) => String(e).padStart(2, "0");
+var d = "/* The time input: a text field with a list button, and the list in a `lintje-popover`. */\n:host {\n  display: block;\n  min-width: 0;\n  width: 120px;\n}\n:host([hidden]) { display: none; }\n:host([stacked]) {\n  width: 100%;\n  --h-control: var(--h-touch);\n}\n@media screen and (max-width: 767px) {\n  :host {\n    width: 100%;\n    --h-control: var(--h-touch);\n  }\n}\n\n/* --- */\n\n/* --- The field ----------------------------------------------------------- */\n.lintje-time-input { position: relative; display: flex; align-items: center; }\n.lintje-time-input__control {\n  width: 100%; height: var(--h-control);\n  padding: 0 calc(var(--h-control) - 2px + var(--space-2)) 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  border-radius: var(--radius);\n}\n.lintje-time-input__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-time-input__control.is-error { border: 2px solid var(--color-error); }\n/* Disabled wins over error: after it, the whole border back to 1 px strong. */\n.lintje-time-input__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n.lintje-time-input__toggle {\n  position: absolute; top: 1px; right: 1px;\n  width: calc(var(--h-control) - 2px); height: calc(var(--h-control) - 2px);\n  display: flex; align-items: center; justify-content: center;\n  border-left: 1px solid var(--color-border-default);\n  background: transparent;\n  color: var(--color-accent-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* A transparent hit area reaches the target height, never to the left where the typing part is. */\n.lintje-time-input__toggle::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) min(0px, calc(100% - var(--h-target)))\n    min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n/* The button steps in past the 2 px error border; a disabled field has 1 px again. */\n.lintje-time-input__control.is-error:not(:disabled) + .lintje-time-input__toggle {\n  top: 2px; right: 2px;\n  width: calc(var(--h-control) - 4px); height: calc(var(--h-control) - 4px);\n}\n.lintje-time-input__toggle:hover:not(:disabled) { background: var(--color-bg-selected); }\n.lintje-time-input__toggle:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n/* --- The list ------------------------------------------------------------ */\n/* A dense list (`--h-option`): at most seven rows in view, then it scrolls. */\n.lintje-time-input__panel { padding: var(--space-1) 0; }\n.lintje-time-input__list {\n  max-height: calc(7 * var(--h-option));\n  overflow-y: auto;\n  font: var(--text-ui);\n}\n.lintje-time-input__option {\n  display: flex; align-items: center;\n  width: 100%;\n  min-height: var(--h-option);\n  padding: 0 14px;\n  background: transparent;\n  color: var(--color-text-primary);\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-time-input__option:hover { background: var(--color-bg-subtle); }\n.lintje-time-input__option.is-selected { background: var(--color-bg-selected); font-weight: 700; }\n/* The fill alone is about 1.1:1, so the focus ring stands inside the row. */\n.lintje-time-input__option:focus-visible {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n\n/* Forced colours drop fills: the chosen row takes an edge inside the row, so none changes size. */\n@media (forced-colors: active) {\n  .lintje-time-input__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }\n  .lintje-time-input__option:focus-visible { outline-color: Highlight; }\n}\n", f = 1440, p = /^(\d{1,2})[:.](\d{2})$/, m = /^\d{1,4}$/, h = /^(\d{2}):(\d{2})$/, g = (e) => String(e).padStart(2, "0");
 function _(e, t) {
 	return !Number.isInteger(e) || !Number.isInteger(t) || e < 0 || e > 23 || t < 0 || t > 59 ? null : `${g(e)}:${g(t)}`;
 }
@@ -57,9 +58,9 @@ var D = class extends l {
 	}
 	static {
 		this.styles = [
-			e,
-			i(u),
-			i(d)
+			i,
+			t(u),
+			t(d)
 		];
 	}
 	static {
@@ -144,7 +145,7 @@ var D = class extends l {
 	}
 	onFocusOut(e) {
 		let t = e.relatedTarget;
-		this.open && t && !this.renderRoot.contains(t) && !n(this, t) && (this.open = !1);
+		this.open && t && !this.renderRoot.contains(t) && !r(this, t) && (this.open = !1);
 	}
 	pick(e) {
 		this.choose(e), this.open = !1, this.renderRoot.querySelector(".lintje-time-input__control")?.focus();
@@ -164,17 +165,17 @@ var D = class extends l {
 		this.focusTime = t[a], this.focusOption();
 	}
 	renderList() {
-		return c`<div class="lintje-time-input__panel"><div
+		return a`<div class="lintje-time-input__panel"><div
       class="lintje-time-input__list"
       role="listbox"
       tabindex="-1"
       aria-label="Tijden"
       @keydown=${this.onListKeydown}
     >
-      ${this.times.map((e) => c`<button
+      ${this.times.map((e) => a`<button
           type="button"
           role="option"
-          class=${a({
+          class=${s({
 			"lintje-time-input__option": !0,
 			"is-selected": e === this.value
 		})}
@@ -188,7 +189,7 @@ var D = class extends l {
 	}
 	render() {
 		let e = this.message;
-		return c`<div class="lintje-field" @focusout=${this.onFocusOut}>
+		return a`<div class="lintje-field" @focusout=${this.onFocusOut}>
       ${this.renderLabel(this.controlId)}
       <div class="lintje-time-input">
         <input
@@ -196,16 +197,16 @@ var D = class extends l {
           id=${this.controlId}
           inputmode="numeric"
           autocomplete="off"
-          class=${a({
+          class=${s({
 			"lintje-time-input__control": !0,
 			"is-error": !!e
 		})}
-          .value=${s(this.text)}
-          placeholder=${this.placeholder || r}
+          .value=${o(this.text)}
+          placeholder=${this.placeholder || n}
           aria-labelledby=${this.labelId}
           aria-describedby=${this.describedBy}
-          aria-invalid=${e ? "true" : r}
-          aria-required=${this.required ? "true" : r}
+          aria-invalid=${e ? "true" : n}
+          aria-required=${this.required ? "true" : n}
           ?disabled=${this.disabled}
           @change=${this.onChange}
           @keydown=${this.onKeydown}
@@ -219,7 +220,7 @@ var D = class extends l {
           ?disabled=${this.disabled}
           @click=${this.toggle}
         >
-          ${o("functioneel-klok", { size: 18 })}
+          ${c("functioneel-klok", { size: 18 })}
         </button>
       </div>
       <lintje-popover
@@ -227,12 +228,12 @@ var D = class extends l {
         match-width
         @lintje-close=${this.onPopoverClose}
       >
-        ${this.open ? this.renderList() : r}
+        ${this.open ? this.renderList() : n}
       </lintje-popover>
       ${this.renderFoot()}
     </div>`;
 	}
 };
-t("lintje-time-input", D);
+e("lintje-time-input", D);
 //#endregion
 export { D as LintjeTimeInput };

package/dist-elements/tag/toast.js

@@ -1,8 +1,13 @@
-import { $ as e, Bt as t, Gt as n, H as r, Ht as i, U as a, W as o, et as s, qt as c, zt as l } from "../chunks/base-Bg-IFOPG.js";
-import "../chunks/focus-trap-9BnE-xWv.js";
+import { $ as e, J as t, Jt as n, Q as r, Yt as i, Z as a, Zt as o, en as s, lt as c, nn as l, nt as u, ut as d } from "../chunks/base-DRGvkF-r.js";
+import "../chunks/focus-trap-Dv8zu64A.js";
 //#region src/components/feedback/toast/toast.css?inline
-var u = ":host {\n  display: contents;\n}\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-toast {\n  position: fixed;\n  right: var(--space-6);\n  bottom: var(--space-6);\n  z-index: 70;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  min-width: 320px;\n  max-width: 480px;\n  font: var(--text-ui);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-toast) var(--ease-in-motion);\n}\n.lintje-toast--ok   { background: var(--color-success-bg); color: var(--color-text-primary); }\n.lintje-toast--error { background: var(--color-error-bg);   color: var(--color-text-primary); }\n\n.lintje-toast__icon { flex: none; display: flex; }\n.lintje-toast--ok    .lintje-toast__icon { color: var(--color-success-line); }\n.lintje-toast--error .lintje-toast__icon { color: var(--color-error-line); }\n\n.lintje-toast__text { flex: 1; }\n.lintje-toast__action { position: relative; font-weight: 700; text-decoration: underline; color: var(--color-link-on-status); flex: none; }\n/* The close and the action reach the target height through a transparent hit area; the gap\n   between them keeps the hit areas apart. */\n.lintje-toast__close {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  color: var(--color-text-muted);\n  display: flex; align-items: center; justify-content: center; flex: none;\n}\n.lintje-toast__close::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n.lintje-toast__action::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n@media (max-width: 767px) {\n  .lintje-toast { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); min-width: 0; max-width: none; }\n}\n\n/* Forced colours: the fill and shadow are dropped, so the toast takes a CanvasText line. */\n@media (forced-colors: active) {\n  .lintje-toast { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n", d = 6e3;
-function f(e) {
+var f = ":host {\n  display: contents;\n}\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-toast {\n  position: fixed;\n  right: var(--space-6);\n  bottom: var(--space-6);\n  z-index: 70;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  min-width: 320px;\n  max-width: 480px;\n  font: var(--text-ui);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-toast) var(--ease-in-motion);\n}\n.lintje-toast--ok   { background: var(--color-success-bg); color: var(--color-text-primary); }\n.lintje-toast--error { background: var(--color-error-bg);   color: var(--color-text-primary); }\n\n.lintje-toast__icon { flex: none; display: flex; }\n.lintje-toast--ok    .lintje-toast__icon { color: var(--color-success-line); }\n.lintje-toast--error .lintje-toast__icon { color: var(--color-error-line); }\n\n.lintje-toast--info { background: var(--color-info-bg); color: var(--color-text-primary); }\n.lintje-toast--info .lintje-toast__icon { color: var(--color-info-line); }\n.lintje-toast--warning { background: var(--color-attention-bg); color: var(--color-text-primary); }\n.lintje-toast--warning .lintje-toast__icon { color: var(--color-attention-line); }\n\n.lintje-toast__text { flex: 1; }\n.lintje-toast__action { position: relative; font-weight: 700; text-decoration: underline; color: var(--color-link-on-status); flex: none; }\n/* The close and the action reach the target height through a transparent hit area; the gap\n   between them keeps the hit areas apart. */\n.lintje-toast__close {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  color: var(--color-text-muted);\n  display: flex; align-items: center; justify-content: center; flex: none;\n}\n.lintje-toast__close::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n.lintje-toast__action::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-toast { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); min-width: 0; max-width: none; }\n}\n\n/* Forced colours: the fill and shadow are dropped, so the toast takes a CanvasText line. */\n@media (forced-colors: active) {\n  .lintje-toast { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n", p = 6e3, m = {
+	ok: "success",
+	error: "error",
+	info: "info",
+	warning: "attention"
+};
+function h(e) {
 	for (let t = e.getRootNode();;) {
 		let e = t.querySelector?.("main");
 		if (e) return e;
@@ -10,9 +15,13 @@ function f(e) {
 		t = t.host.getRootNode();
 	}
 }
-var p = class extends l {
+var g = class extends n {
 	static {
-		this.styles = [e, i(u)];
+		this.styles = [
+			c,
+			o(f),
+			o(u)
+		];
 	}
 	static {
 		this.properties = {
@@ -33,18 +42,18 @@ var p = class extends l {
 	#o;
 	#s;
 	constructor() {
-		super(), this.kind = "ok", this.filled = !1, this.#e = !1, this.#t = !1, this.#n = 0, this.#r = 0, this.#i = null, this.#a = (e) => {
-			e.key === "Escape" && o(this) && this.#u();
+		super(), this.kind = "ok", this.filled = !1, this.#e = !1, this.#t = !1, this.#n = 0, this.#r = 0, this.#i = null, this.#a = (t) => {
+			t.key === "Escape" && e(this) && this.#u();
 		}, this.#o = () => {
-			let e = a(this);
-			e || (this.#i = r()), this.#l("focus", e);
+			let e = r(this);
+			e || (this.#i = a()), this.#l("focus", e);
 		}, this.#s = (e) => {
 			let t = e.relatedTarget;
 			(!t || t !== this && !this.contains(t)) && this.#l("focus", !1);
 		}, this.addEventListener("focusout", this.#s);
 	}
 	connectedCallback() {
-		super.connectedCallback(), document.addEventListener("keydown", this.#a), document.addEventListener("focusin", this.#o), this.#i = r(), this.#c(), !this.filled && !this.#r && (this.#r = requestAnimationFrame(() => {
+		super.connectedCallback(), document.addEventListener("keydown", this.#a), document.addEventListener("focusin", this.#o), this.#i = a(), this.#c(), !this.filled && !this.#r && (this.#r = requestAnimationFrame(() => {
 			this.#r = 0, this.filled = !0;
 		}));
 	}
@@ -55,52 +64,52 @@ var p = class extends l {
 		(e.has("kind") || e.has("action")) && this.#c();
 	}
 	#c() {
-		clearTimeout(this.#n), !(this.kind === "error" || this.action || this.#e || this.#t) && (this.#n = window.setTimeout(() => this.#u(), d));
+		clearTimeout(this.#n), !(this.kind === "error" || this.kind === "warning" || this.action || this.#e || this.#t) && (this.#n = window.setTimeout(() => this.#u(), p));
 	}
 	#l(e, t) {
 		let n = this.#e || this.#t;
 		e === "pointer" ? this.#e = t : this.#t = t, this.#e || this.#t ? clearTimeout(this.#n) : n && this.#c();
 	}
 	#u() {
-		if (a(this)) {
+		if (r(this)) {
 			let e = this.#i;
-			(e?.isConnected && e !== document.body ? e : f(this))?.focus();
+			(e?.isConnected && e !== document.body ? e : h(this))?.focus();
 		}
 		this.emit("lintje-close");
 	}
 	render() {
-		return c`<div
+		return l`<div
       class="lintje-toast lintje-toast--${this.kind}"
       role="status"
       aria-live="polite"
       @mouseenter=${() => this.#l("pointer", !0)}
       @mouseleave=${() => this.#l("pointer", !1)}
     >
-      ${this.filled ? this.content() : n}
+      ${this.filled ? this.content() : s}
     </div>`;
 	}
 	content() {
-		return c`<span class="lintje-toast__icon" aria-hidden="true"
-        >${s(this.kind === "ok" ? "functioneel-cirkel-vinkje" : "functioneel-foutmelding", { size: 16 })}</span
+		return l`<span class="lintje-toast__icon" aria-hidden="true"
+        >${d(t[m[this.kind]], { size: 16 })}</span
       >
       <span class="lintje-toast__text"><slot></slot></span>
-      ${this.action ? c`<button
+      ${this.action ? l`<button
             type="button"
             class="lintje-toast__action"
             @click=${() => this.emit("lintje-action")}
           >
             ${this.action}
-          </button>` : n}
+          </button>` : s}
       <button
         type="button"
         class="lintje-toast__close"
         aria-label="Melding sluiten"
         @click=${() => this.#u()}
       >
-        ${s("functioneel-kruis", { size: 16 })}
+        ${d("functioneel-kruis", { size: 16 })}
       </button>`;
 	}
 };
-t("lintje-toast", p);
+i("lintje-toast", g);
 //#endregion
-export { p as LintjeToast };
+export { g as LintjeToast };

package/dist-elements/tag/toggle.js

@@ -1,12 +1,13 @@
-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-DRGvkF-r.js";
+import { n as o } from "../chunks/input-BGMLam-O.js";
+import { t as s } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/toggle/toggle.ts
 var c = class extends o {
 	constructor(...e) {
 		super(...e), this.checked = !1;
 	}
 	static {
-		this.styles = [e, r(s)];
+		this.styles = [r, t(s)];
 	}
 	static {
 		this.properties = { checked: {
@@ -18,8 +19,8 @@ var c = class extends o {
 		this.checked = e.target.checked, this.commit(this.checked);
 	}
 	render() {
-		return a`<div class="lintje-field">
-      <label class=${i({
+		return i`<div class="lintje-field">
+      <label class=${a({
 			"lintje-choice": !0,
 			"is-disabled": this.disabled
 		})}>
@@ -37,19 +38,19 @@ var c = class extends o {
           <span class="lintje-choice__knob"></span>
         </span>
         <span
-          class=${i({
+          class=${a({
 			"lintje-choice__label": !0,
 			"is-modified": this.modified && !this.hideLabel,
 			"visually-hidden": this.hideLabel
 		})}
           >${this.label} ${this.renderLabelSuffix()}</span
         >
-        ${this.modified && !this.hideLabel ? a`<span class="lintje-label__dot"><span class="visually-hidden">afwijkend van standaard</span></span>` : n}
+        ${this.modified && !this.hideLabel ? i`<span class="lintje-label__dot"><span class="visually-hidden">afwijkend van standaard</span></span>` : n}
       </label>
       ${this.renderFoot()}
     </div>`;
 	}
 };
-t("lintje-toggle", c);
+e("lintje-toggle", c);
 //#endregion
 export { c as LintjeToggle };

package/dist-elements/tag/toggletip.js

@@ -1,12 +1,12 @@
-import { $ as e, Bt as t, G as n, Gt as r, Ht as i, R as a, W as o, Z as s, et as c, j as l, qt as u, ut as d, z as f, zt as p } from "../chunks/base-Bg-IFOPG.js";
-import "../chunks/focus-trap-9BnE-xWv.js";
+import { $ as e, G as t, Jt as n, L as r, W as i, Yt as a, Zt as o, bt as s, en as c, et as l, lt as u, nn as d, st as f, ut as p } from "../chunks/base-DRGvkF-r.js";
+import "../chunks/focus-trap-Dv8zu64A.js";
 //#region src/components/overlays/toggletip/toggletip.css?inline
-var m = "/* The trigger is the icon button's drawing (`icon-button.css`); what stands here is the popover. */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Closed, the `role=\"status\"` region is empty and `.visually-hidden`, never `display: none`:\n   a region that appeared together with its text would not be announced. */\n\n/* Fixed to the viewport, so a scrolling tile or table cannot cut it off. It stands on the\n   popover's layer (85): above a modal's or a drawer's scrim, under the tooltip (90). */\n.lintje-toggletip__popover.is-open {\n  position: fixed;\n  z-index: 85;\n  min-width: min(12rem, calc(100vw - 2 * var(--space-2)));\n  max-width: min(20rem, calc(100vw - 2 * var(--space-2)));\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-popover);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n  text-align: start;\n  white-space: normal;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n", h = 4, g = 0, _ = class extends p {
+var m = "/* The trigger is the icon button's drawing (`icon-button.css`); what stands here is the popover. */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Closed, the `role=\"status\"` region is empty and `.visually-hidden`, never `display: none`:\n   a region that appeared together with its text would not be announced. */\n\n/* Fixed to the viewport, so a scrolling tile or table cannot cut it off. It stands on the\n   popover's layer (85): above a modal's or a drawer's scrim, under the tooltip (90). */\n.lintje-toggletip__popover.is-open {\n  position: fixed;\n  z-index: 85;\n  min-width: min(12rem, calc(100vw - 2 * var(--space-2)));\n  max-width: min(20rem, calc(100vw - 2 * var(--space-2)));\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-popover);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n  text-align: start;\n  white-space: normal;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n", h = 4, g = 0, _ = class extends n {
 	static {
 		this.styles = [
-			e,
-			i(l),
-			i(m)
+			u,
+			o(r),
+			o(m)
 		];
 	}
 	static {
@@ -32,14 +32,14 @@ var m = "/* The trigger is the icon button's drawing (`icon-button.css`); what s
 	constructor() {
 		super(), this.label = "Toelichting", this.placement = "bottom-start", this.open = !1, this.spot = null, this.popoverId = `lintje-toggletip-${++g}`, this.reflowFrame = 0, this.onOutsideClick = (e) => {
 			this.open && !e.composedPath().includes(this) && this.setOpen(!1);
-		}, this.onEscape = (e) => {
-			if (!this.open || e.key !== "Escape" || !o(this)) return;
-			e.stopPropagation();
-			let t = e.composedPath().includes(this);
-			this.setOpen(!1), t && this.trigger?.focus();
+		}, this.onEscape = (t) => {
+			if (!this.open || t.key !== "Escape" || !e(this)) return;
+			t.stopPropagation();
+			let n = t.composedPath().includes(this);
+			this.setOpen(!1), n && this.trigger?.focus();
 		}, this.onFocusout = (e) => {
 			let t = e.relatedTarget;
-			this.open && t && (n(t, this) || n(this, t) || this.setOpen(!1));
+			this.open && t && (l(t, this) || l(this, t) || this.setOpen(!1));
 		}, this.onReflow = () => {
 			this.open && !this.reflowFrame && (this.reflowFrame = requestAnimationFrame(() => {
 				this.reflowFrame = 0, this.measure();
@@ -56,13 +56,13 @@ var m = "/* The trigger is the icon button's drawing (`icon-button.css`); what s
 		document.removeEventListener("mousedown", this.onOutsideClick), document.removeEventListener("keydown", this.onEscape, !0), window.removeEventListener("scroll", this.onReflow, { capture: !0 }), window.removeEventListener("resize", this.onReflow), this.reflowFrame && cancelAnimationFrame(this.reflowFrame), this.reflowFrame = 0, super.disconnectedCallback();
 	}
 	measure() {
-		let e = this.trigger, t = this.renderRoot.querySelector(".lintje-toggletip__popover");
-		if (!e || !t) return;
-		let n = {
-			width: t.offsetWidth,
-			height: t.offsetHeight
-		}, r = a(e.getBoundingClientRect(), n, f(), this.placement, h), i = this.spot;
-		i && i.top === r.top && i.bottom === r.bottom && i.left === r.left || (this.spot = r);
+		let e = this.trigger, n = this.renderRoot.querySelector(".lintje-toggletip__popover");
+		if (!e || !n) return;
+		let r = {
+			width: n.offsetWidth,
+			height: n.offsetHeight
+		}, a = i(e.getBoundingClientRect(), r, t(), this.placement, h), o = this.spot;
+		o && o.top === a.top && o.bottom === a.bottom && o.left === a.left || (this.spot = a);
 	}
 	willUpdate(e) {
 		super.willUpdate(e), e.has("open") && !this.open && (this.spot = null);
@@ -83,10 +83,10 @@ var m = "/* The trigger is the icon button's drawing (`icon-button.css`); what s
 		};
 	}
 	render() {
-		let e = c("functioneel-info", { size: 16 }), t = e === r;
-		return u`<button
+		let e = p("functioneel-info", { size: 16 }), t = e === c;
+		return d`<button
         type="button"
-        class=${s({
+        class=${f({
 			"lintje-icon-button": !0,
 			"lintje-icon-button--flat": !0,
 			"lintje-icon-button--text": t,
@@ -98,22 +98,22 @@ var m = "/* The trigger is the icon button's drawing (`icon-button.css`); what s
         aria-controls=${this.popoverId}
         @click=${() => this.setOpen(!this.open)}
       >
-        ${t ? u`<span class="lintje-icon-button__label">${this.label}</span>` : e}
+        ${t ? d`<span class="lintje-icon-button__label">${this.label}</span>` : e}
       </button>
       <div
         id=${this.popoverId}
-        class=${s({
+        class=${f({
 			"lintje-toggletip__popover": !0,
 			"is-open": this.open,
 			"visually-hidden": !this.open
 		})}
         role="status"
-        ${d(this.open ? this.spotStyle() : {})}
+        ${s(this.open ? this.spotStyle() : {})}
       >
-        ${this.open ? u`<slot></slot>` : r}
+        ${this.open ? d`<slot></slot>` : c}
       </div>`;
 	}
 };
-t("lintje-toggletip", _);
+a("lintje-toggletip", _);
 //#endregion
 export { _ as LintjeToggletip };

package/dist-elements/tag/token-value.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/content/token-value/token-value.js'