lintje 0.1.1 → 0.3.0

package/dist-elements/tag/textarea.js

@@ -1,8 +1,8 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, ut as o } from "../chunks/base-rBLTcEIv.js";
-import { a as s, i as c, n as l, t as u } from "../chunks/input-jQVTln7H.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-CbmWxUig.js";
+import { a as s, i as c, n as l, t as u } from "../chunks/input-CRW_exv_.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 +20,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 +96,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;
@@ -108,10 +108,10 @@ var _ = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("f
 		}, !this.#n || this.#r);
 		if (!this.counterShown) return e;
 		let t = this.maxlength, n = this.value.length;
-		return i`${e}<span
+		return a`${e}<span
         id=${this.counterId}
         part="counter"
-        class=${a({
+        class=${o({
 			"lintje-textarea__counter": !0,
 			"is-over": n > t
 		})}
@@ -121,24 +121,24 @@ var _ = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("f
 	}
 	render() {
 		let e = this.message;
-		return i`<div class="lintje-field">
+		return a`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <textarea
         id=${this.controlId}
-        class=${a({
+        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 +150,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.js

@@ -1 +1 @@
-export { x as LintjeTile } from "../chunks/base-rBLTcEIv.js";
+export { w as LintjeTile } from "../chunks/base-CbmWxUig.js";

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

@@ -1,57 +1,65 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a, et as o, f as s } from "../chunks/base-rBLTcEIv.js";
-import { r as c, t as l } from "../chunks/input-jQVTln7H.js";
+import { Yt as e, Zt as t, en as n, et as r, lt as i, m as a, nn as o, st as s, ut as c } from "../chunks/base-CbmWxUig.js";
+import { r as l, t as u } from "../chunks/input-CRW_exv_.js";
 //#region src/components/inputs/time-input/time-input.css?inline
-var u = ":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.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 var(--space-10) 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/* A sign, not a button: the pointer goes through it to the field. */\n.lintje-time-input__icon {\n  position: absolute; right: var(--space-3);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n.lintje-time-input__control:disabled + .lintje-time-input__icon { color: var(--color-text-disabled); }\n", d = 1440, f = /^(\d{1,2})[:.](\d{2})$/, p = /^\d{1,4}$/, m = /^(\d{2}):(\d{2})$/, h = (e) => String(e).padStart(2, "0");
-function g(e, t) {
-	return !Number.isInteger(e) || !Number.isInteger(t) || e < 0 || e > 23 || t < 0 || t > 59 ? null : `${h(e)}:${h(t)}`;
+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)}`;
 }
-function _(e) {
-	let t = e ? m.exec(e) : null;
+function v(e) {
+	let t = e ? h.exec(e) : null;
 	if (!t) return null;
 	let [n, r] = [Number(t[1]), Number(t[2])];
-	return g(n, r) ? n * 60 + r : null;
-}
-var v = (e) => _(e) !== null;
-function y(e) {
-	let t = (e % d + d) % d;
-	return `${h(Math.floor(t / 60))}:${h(t % 60)}`;
+	return _(n, r) ? n * 60 + r : null;
 }
+var y = (e) => v(e) !== null;
 function b(e) {
+	let t = (e % f + f) % f;
+	return `${g(Math.floor(t / 60))}:${g(t % 60)}`;
+}
+function x(e) {
 	let t = e.trim();
 	if (t === "") return { kind: "empty" };
-	let n, r, i = f.exec(t);
+	let n, r, i = p.exec(t);
 	if (i) n = Number(i[1]), r = Number(i[2]);
-	else if (p.test(t)) {
+	else if (m.test(t)) {
 		let e = t.length <= 2 ? `${t}00` : t;
 		n = Number(e.slice(0, -2)), r = Number(e.slice(-2));
 	} else return { kind: "invalid" };
-	let a = g(n, r);
+	let a = _(n, r);
 	return a ? {
 		kind: "ok",
 		time: a
 	} : { kind: "invalid" };
 }
-function x(e, t) {
-	return y((_(e) ?? 0) + t);
+function S(e, t) {
+	return b((v(e) ?? 0) + t);
 }
-function S(e, t = /* @__PURE__ */ new Date()) {
+function C(e, t = /* @__PURE__ */ new Date()) {
 	let n = t.getHours() * 60 + t.getMinutes(), r = e > 0 ? e : 1;
-	return y(Math.round(n / r) * r);
+	return b(Math.round(n / r) * r);
+}
+function w(e, t, n) {
+	return y(t) && e < t ? t : y(n) && e > n ? n : e;
 }
-function C(e, t, n) {
-	return v(t) && e < t ? t : v(n) && e > n ? n : e;
+function T(e, t, n = 15) {
+	let r = n >= 1 ? Math.floor(n) : 1, i = v(e) ?? 0, a = v(t) ?? 1439, o = [];
+	for (let e = i; e <= a; e += r) o.push(b(e));
+	return o;
+}
+function E(e, t) {
+	return e.find((e) => e >= t) ?? e[e.length - 1] ?? "";
 }
 //#endregion
 //#region src/components/inputs/time-input/time-input.ts
-var w = class extends c {
+var D = class extends l {
 	constructor(...e) {
-		super(...e), this.value = null, this.step = 15, this.placeholder = "", this.stacked = !1, this.hint = "uu:mm", this.text = "", this.problem = "";
+		super(...e), this.value = null, this.step = 15, this.placeholder = "", this.stacked = !1, this.open = !1, this.hint = "uu:mm", this.text = "", this.problem = "", this.focusTime = "";
 	}
 	static {
 		this.styles = [
-			e,
-			r(l),
-			r(u)
+			i,
+			t(u),
+			t(d)
 		];
 	}
 	static {
@@ -65,8 +73,13 @@ var w = class extends c {
 				type: Boolean,
 				reflect: !0
 			},
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
 			text: { state: !0 },
-			problem: { state: !0 }
+			problem: { state: !0 },
+			focusTime: { state: !0 }
 		};
 	}
 	get message() {
@@ -75,17 +88,20 @@ var w = class extends c {
 	get footMessage() {
 		return this.message;
 	}
+	get times() {
+		return T(this.min, this.max, this.step);
+	}
 	willUpdate(e) {
-		super.willUpdate(e), e.has("value") && (this.text = v(this.value) ? this.value : "", this.problem = "");
+		super.willUpdate(e), e.has("value") && (this.text = y(this.value) ? this.value : "", this.problem = "");
 	}
 	outOfBounds(e) {
-		return v(this.min) && e < this.min ? `Kies een tijd op of na ${this.min}` : v(this.max) && e > this.max ? `Kies een tijd op of voor ${this.max}` : "";
+		return y(this.min) && e < this.min ? `Kies een tijd op of na ${this.min}` : y(this.max) && e > this.max ? `Kies een tijd op of voor ${this.max}` : "";
 	}
 	choose(e) {
 		this.problem = "", this.text = e ?? "", e !== this.value && (this.value = e, this.commit(e));
 	}
 	onChange(e) {
-		let t = e.target.value, n = b(t);
+		let t = e.target.value, n = x(t);
 		if (n.kind === "empty") return this.choose(null);
 		if (this.text = t, n.kind === "invalid") {
 			this.problem = "Vul een tijd in als uu:mm";
@@ -95,6 +111,10 @@ var w = class extends c {
 		r ? this.problem = r : this.choose(n.time);
 	}
 	onKeydown(e) {
+		if (e.altKey && e.key === "ArrowDown") {
+			e.preventDefault(), this.openList();
+			return;
+		}
 		let t = {
 			ArrowUp: 1,
 			ArrowDown: -1,
@@ -103,12 +123,72 @@ var w = class extends c {
 		}[e.key];
 		if (t === void 0) return;
 		e.preventDefault();
-		let n = b(e.target.value), r = n.kind === "ok" ? n.time : this.value, i = r === null ? S(this.step) : x(r, t);
-		this.choose(C(i, this.min, this.max));
+		let n = x(e.target.value), r = n.kind === "ok" ? n.time : this.value, i = r === null ? C(this.step) : S(r, t);
+		this.choose(w(i, this.min, this.max));
+	}
+	openList() {
+		if (this.disabled) return;
+		let e = this.times;
+		e.length && (this.focusTime = E(e, this.value ?? C(this.step)), this.open = !0, this.focusOption("center"));
+	}
+	toggle() {
+		this.open ? this.open = !1 : this.openList();
+	}
+	async focusOption(e = "nearest") {
+		await this.updateComplete;
+		let t = this.renderRoot.querySelector(".lintje-time-input__option[tabindex=\"0\"]");
+		t?.focus({ preventScroll: !0 }), t?.scrollIntoView?.({ block: e });
+	}
+	onPopoverClose(e) {
+		e.stopPropagation(), this.open = !1, e.detail?.reason === "escape" && this.renderRoot.querySelector(".lintje-time-input__toggle")?.focus();
+	}
+	onFocusOut(e) {
+		let t = e.relatedTarget;
+		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();
+	}
+	onListKeydown(e) {
+		let t = this.times, n = Math.max(1, Math.round(60 / this.step)), r = {
+			ArrowDown: 1,
+			ArrowUp: -1,
+			PageDown: n,
+			PageUp: -n,
+			Home: -t.length,
+			End: t.length
+		}[e.key];
+		if (r === void 0) return;
+		e.preventDefault();
+		let i = t.indexOf(this.focusTime), a = Math.min(t.length - 1, Math.max(0, i + r));
+		this.focusTime = t[a], this.focusOption();
+	}
+	renderList() {
+		return o`<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) => o`<button
+          type="button"
+          role="option"
+          class=${s({
+			"lintje-time-input__option": !0,
+			"is-selected": e === this.value
+		})}
+          tabindex=${e === this.focusTime ? "0" : "-1"}
+          aria-selected=${e === this.value ? "true" : "false"}
+          @click=${() => this.pick(e)}
+        >
+          ${e}
+        </button>`)}
+    </div></div>`;
 	}
 	render() {
 		let e = this.message;
-		return i`<div class="lintje-field">
+		return o`<div class="lintje-field" @focusout=${this.onFocusOut}>
       ${this.renderLabel(this.controlId)}
       <div class="lintje-time-input">
         <input
@@ -116,11 +196,11 @@ var w = class extends c {
           id=${this.controlId}
           inputmode="numeric"
           autocomplete="off"
-          class=${a({
+          class=${s({
 			"lintje-time-input__control": !0,
 			"is-error": !!e
 		})}
-          .value=${s(this.text)}
+          .value=${a(this.text)}
           placeholder=${this.placeholder || n}
           aria-labelledby=${this.labelId}
           aria-describedby=${this.describedBy}
@@ -130,15 +210,29 @@ var w = class extends c {
           @change=${this.onChange}
           @keydown=${this.onKeydown}
         />
-        ${o("functioneel-klok", {
-			size: 18,
-			className: "lintje-time-input__icon"
-		})}
+        <button
+          type="button"
+          class="lintje-time-input__toggle"
+          aria-label="Tijden openen"
+          aria-haspopup="listbox"
+          aria-expanded=${this.open ? "true" : "false"}
+          ?disabled=${this.disabled}
+          @click=${this.toggle}
+        >
+          ${c("functioneel-klok", { size: 18 })}
+        </button>
       </div>
+      <lintje-popover
+        ?open=${this.open && !this.disabled}
+        match-width
+        @lintje-close=${this.onPopoverClose}
+      >
+        ${this.open ? this.renderList() : n}
+      </lintje-popover>
       ${this.renderFoot()}
     </div>`;
 	}
 };
-t("lintje-time-input", w);
+e("lintje-time-input", D);
 //#endregion
-export { w as LintjeTimeInput };
+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, Kt as a, U as o, W as s, et as c, zt as l } from "../chunks/base-rBLTcEIv.js";
-import "../chunks/focus-trap-w3vCamJ6.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-CbmWxUig.js";
+import "../chunks/focus-trap-BwOxE5BX.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" && s(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 = o(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 (o(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 a`<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 a`<span class="lintje-toast__icon" aria-hidden="true"
-        >${c(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 ? a`<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()}
       >
-        ${c("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,12 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, Kt as i, Z as a } from "../chunks/base-rBLTcEIv.js";
-import { r as o, t as s } from "../chunks/input-jQVTln7H.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { r as o, t as s } from "../chunks/input-CRW_exv_.js";
 //#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: {
@@ -50,6 +50,6 @@ var c = class extends o {
     </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, Kt as a, R as o, W as s, Z as c, et as l, j as u, ut as d, z as f, zt as p } from "../chunks/base-rBLTcEIv.js";
-import "../chunks/focus-trap-w3vCamJ6.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-CbmWxUig.js";
+import "../chunks/focus-trap-BwOxE5BX.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(u),
-			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" || !s(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 = o(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 = l("functioneel-info", { size: 16 }), t = e === r;
-		return a`<button
+		let e = p("functioneel-info", { size: 16 }), t = e === c;
+		return d`<button
         type="button"
-        class=${c({
+        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 ? a`<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=${c({
+        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 ? a`<slot></slot>` : r}
+        ${this.open ? d`<slot></slot>` : c}
       </div>`;
 	}
 };
-t("lintje-toggletip", _);
+a("lintje-toggletip", _);
 //#endregion
 export { _ as LintjeToggletip };

package/dist-elements/tag/tooltip.js

@@ -1 +1 @@
-export { M as LintjeTooltip, N as TOOLTIP_DELAY, P as TOOLTIP_LINGER } from "../chunks/base-rBLTcEIv.js";
+export { R as LintjeTooltip, z as TOOLTIP_DELAY, B as TOOLTIP_LINGER } from "../chunks/base-CbmWxUig.js";