lintje 0.1.1

package/dist-elements/tag/date-input.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/inputs/date-input/date-input.js'

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

@@ -0,0 +1,224 @@
+import { $ as e, Bt as t, G as n, Gt as r, Ht as i, Kt as a, Z as o, et as s, f as c } from "../chunks/base-rBLTcEIv.js";
+import { r as l, t as u } from "../chunks/input-jQVTln7H.js";
+import { a as d, c as f, d as p, f as m, i as h, l as g, m as _, n as v, o as y, r as b, s as x, t as S, u as C } from "../chunks/date-format-B5DPGjAw.js";
+//#region src/components/inputs/date-input/date-input.css?inline
+var w = "/* The date input: a text field with a calendar button, and the calendar in a `lintje-popover`. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n:host([stacked]) {\n  width: 100%;\n  --h-control: var(--h-touch);\n}\n/* Below 768 px: the touch height and the full width, as `stacked`. */\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-date-input { position: relative; display: flex; align-items: center; }\n.lintje-date-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-date-input__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-date-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-date-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-date-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-date-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-date-input__control.is-error:not(:disabled) + .lintje-date-input__toggle {\n  top: 2px; right: 2px;\n  width: calc(var(--h-control) - 4px); height: calc(var(--h-control) - 4px);\n}\n.lintje-date-input__toggle:hover:not(:disabled) { background: var(--color-bg-selected); }\n.lintje-date-input__toggle:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n/* --- The calendar -------------------------------------------------------- */\n.lintje-date-input__calendar {\n  width: calc(7 * var(--h-option) + 2 * var(--space-3)); max-width: 100%;\n  padding: var(--space-3);\n  color: var(--color-text-primary);\n}\n.lintje-date-input__month { display: flex; align-items: center; gap: var(--space-1); }\n.lintje-date-input__month-label { flex: 1; text-align: center; font-size: 1rem; font-weight: 700; }\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-date-input__nav {\n  position: relative;\n  flex: none;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: inline-flex; align-items: center; justify-content: center;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-date-input__nav:hover { background: var(--color-bg-subtle); }\n.lintje-date-input__nav::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n.lintje-date-input__grid {\n  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));\n  margin-top: var(--space-2);\n}\n/* A row is there for the grid's ARIA only. */\n.lintje-date-input__row { display: contents; }\n.lintje-date-input__weekday {\n  padding: var(--space-1) 0;\n  text-align: center;\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-date-input__day {\n  height: var(--h-option);\n  display: flex; align-items: center; justify-content: center;\n  background: transparent;\n  color: var(--color-text-primary);\n  font-size: 0.875rem;\n  font-variant-numeric: tabular-nums;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-date-input__day:hover { background: var(--color-bg-subtle); }\n.lintje-date-input__day.is-today { box-shadow: inset 0 0 0 1px var(--color-accent-line); }\n/* The border is an inset ring, so the cell keeps its size. */\n.lintje-date-input__day.is-selected {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border);\n  font-weight: 700;\n}\n.lintje-date-input__day.is-selected.is-today {\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border),\n              inset 0 0 0 2px var(--color-accent-line);\n}\n/* Outside `min`/`max`: arrow keys still pass over it. */\n.lintje-date-input__day.is-blocked {\n  background: transparent;\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n@media (max-width: 767px) {\n  /* The popover's edge margin, less its 1 px border on either side. */\n  .lintje-date-input__calendar { width: calc(100vw - var(--space-4) - 2px); }\n}\n\n/* Forced colours drop rings and fills: they become borders inside the cell. */\n@media (forced-colors: active) {\n  .lintje-date-input__day.is-today { border: 1px solid CanvasText; }\n  .lintje-date-input__day.is-selected { border: 1px solid Highlight; }\n  .lintje-date-input__day.is-selected.is-today:not(:focus-visible) {\n    outline: 1px solid CanvasText;\n    outline-offset: -2px;\n  }\n  .lintje-date-input__day.is-blocked { color: GrayText; }\n}\n", T = [
+	"ma",
+	"di",
+	"wo",
+	"do",
+	"vr",
+	"za",
+	"zo"
+], E = class extends l {
+	constructor(...e) {
+		super(...e), this.value = null, this.placeholder = "", this.stacked = !1, this.open = !1, this.hint = "dd-mm-jjjj", this.text = "", this.problem = "", this.focusDay = "";
+	}
+	static {
+		this.styles = [
+			e,
+			i(u),
+			i(w)
+		];
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			min: { type: String },
+			max: { type: String },
+			today: { type: String },
+			placeholder: { type: String },
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			text: { state: !0 },
+			problem: { state: !0 },
+			focusDay: { state: !0 }
+		};
+	}
+	get todayDay() {
+		return x(this.today) ? this.today : _();
+	}
+	get message() {
+		return this.error || this.problem;
+	}
+	get footMessage() {
+		return this.message;
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && (this.text = y(this.value), this.problem = "");
+	}
+	outOfBounds(e) {
+		return x(this.min) && e < this.min ? `Kies een datum op of na ${y(this.min)}` : x(this.max) && e > this.max ? `Kies een datum op of voor ${y(this.max)}` : "";
+	}
+	choose(e) {
+		this.problem = "", this.text = y(e), e !== this.value && (this.value = e, this.commit(e));
+	}
+	read(e) {
+		let t = C(e, p(this.todayDay)[0]);
+		if (t.kind === "empty") return this.choose(null);
+		if (this.text = e, t.kind === "invalid") {
+			this.problem = t.reason === "day" ? "Deze datum bestaat niet" : "Vul een datum in als dd-mm-jjjj";
+			return;
+		}
+		let n = this.outOfBounds(t.iso);
+		n ? this.problem = n : this.choose(t.iso);
+	}
+	onChange(e) {
+		this.read(e.target.value);
+	}
+	onFieldKeydown(e) {
+		if (e.altKey && e.key === "ArrowDown") {
+			e.preventDefault(), this.openCalendar();
+			return;
+		}
+		if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+		e.preventDefault();
+		let t = C(e.target.value), n = t.kind === "ok" ? t.iso : this.value, r = e.key === "ArrowUp" ? 1 : -1;
+		this.choose(h(n ? v(n, r) : this.todayDay, this.min, this.max));
+	}
+	openCalendar() {
+		this.disabled || (this.focusDay = h(this.value ?? this.todayDay, this.min, this.max), this.open = !0, this.focusCell());
+	}
+	toggle() {
+		this.open ? this.open = !1 : this.openCalendar();
+	}
+	async focusCell() {
+		await this.updateComplete, this.renderRoot.querySelector(".lintje-date-input__day[tabindex=\"0\"]")?.focus();
+	}
+	onPopoverClose(e) {
+		e.stopPropagation(), this.open = !1, e.detail?.reason === "escape" && this.renderRoot.querySelector(".lintje-date-input__toggle")?.focus();
+	}
+	onFocusOut(e) {
+		let t = e.relatedTarget;
+		this.open && t && !this.renderRoot.contains(t) && !n(this, t) && (this.open = !1);
+	}
+	pick(e) {
+		this.outOfBounds(e) || (this.choose(e), this.open = !1, this.renderRoot.querySelector(".lintje-date-input__control")?.focus());
+	}
+	onGridKeydown(e) {
+		let t = S[e.key];
+		t && (e.preventDefault(), this.focusDay = t(this.focusDay), this.focusCell());
+	}
+	shiftMonth(e) {
+		this.focusDay = b(this.focusDay, e);
+	}
+	renderCalendar() {
+		let e = this.focusDay || this.todayDay, t = m(e).slice(0, 7), n = this.todayDay;
+		return a`<div class="lintje-date-input__calendar">
+      <div class="lintje-date-input__month">
+        <button
+          type="button"
+          class="lintje-date-input__nav"
+          aria-label="Vorige maand"
+          @click=${() => this.shiftMonth(-1)}
+        >
+          ${s("functioneel-delta-rechts", {
+			size: 16,
+			flip: "horizontal"
+		})}
+        </button>
+        <strong class="lintje-date-input__month-label" aria-live="polite"
+          >${f(e)}</strong
+        >
+        <button
+          type="button"
+          class="lintje-date-input__nav"
+          aria-label="Volgende maand"
+          @click=${() => this.shiftMonth(1)}
+        >
+          ${s("functioneel-delta-rechts", { size: 16 })}
+        </button>
+      </div>
+      <div
+        class="lintje-date-input__grid"
+        role="grid"
+        aria-label=${f(e)}
+        @keydown=${this.onGridKeydown}
+      >
+        <div class="lintje-date-input__row" role="row">
+          ${T.map((e) => a`<span class="lintje-date-input__weekday" role="columnheader">${e}</span>`)}
+        </div>
+        ${g(e).map((i) => a`<div class="lintje-date-input__row" role="row">
+            ${i.map((i) => {
+			if (!i.startsWith(t)) return a`<span class="lintje-date-input__blank" role="gridcell"></span>`;
+			let s = !!this.outOfBounds(i);
+			return a`<button
+                type="button"
+                role="gridcell"
+                class=${o({
+				"lintje-date-input__day": !0,
+				"is-blocked": s,
+				"is-today": i === n,
+				"is-selected": i === this.value
+			})}
+                tabindex=${i === e ? "0" : "-1"}
+                aria-label=${d(i)}
+                aria-selected=${i === this.value ? "true" : "false"}
+                aria-current=${i === n ? "date" : r}
+                aria-disabled=${s ? "true" : r}
+                @click=${() => this.pick(i)}
+              >
+                ${Number(i.slice(8))}
+              </button>`;
+		})}
+          </div>`)}
+      </div>
+    </div>`;
+	}
+	render() {
+		let e = this.message;
+		return a`<div class="lintje-field" @focusout=${this.onFocusOut}>
+      ${this.renderLabel(this.controlId)}
+      <div class="lintje-date-input">
+        <input
+          type="text"
+          id=${this.controlId}
+          inputmode="numeric"
+          autocomplete="off"
+          class=${o({
+			"lintje-date-input__control": !0,
+			"is-error": !!e
+		})}
+          .value=${c(this.text)}
+          placeholder=${this.placeholder || r}
+          aria-labelledby=${this.labelId}
+          aria-describedby=${this.describedBy}
+          aria-invalid=${e ? "true" : r}
+          aria-required=${this.required ? "true" : r}
+          ?disabled=${this.disabled}
+          @change=${this.onChange}
+          @keydown=${this.onFieldKeydown}
+        />
+        <button
+          type="button"
+          class="lintje-date-input__toggle"
+          aria-label="Kalender openen"
+          aria-haspopup="dialog"
+          aria-expanded=${this.open ? "true" : "false"}
+          ?disabled=${this.disabled}
+          @click=${this.toggle}
+        >
+          ${s("functioneel-kalender", { size: 18 })}
+        </button>
+      </div>
+      <lintje-popover
+        ?open=${this.open && !this.disabled}
+        panel-role="dialog"
+        label="Kalender"
+        @lintje-close=${this.onPopoverClose}
+      >
+        ${this.open ? this.renderCalendar() : r}
+      </lintje-popover>
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-date-input", E);
+//#endregion
+export { E as LintjeDateInput };

package/dist-elements/tag/date-range.d.ts

@@ -0,0 +1 @@
+export * from '../types/components/inputs/date-range/date-range.js'

package/dist-elements/tag/date-range.js

@@ -0,0 +1,303 @@
+import { $ as e, Bt as t, G as n, Gt as r, Ht as i, Kt as a, U as o, W as s, Z as c, et as l } from "../chunks/base-rBLTcEIv.js";
+import "../chunks/focus-trap-w3vCamJ6.js";
+import { r as u, t as d } from "../chunks/input-jQVTln7H.js";
+import { a as f, c as p, f as m, m as h, n as g, p as _, r as v, t as y } from "../chunks/date-format-B5DPGjAw.js";
+//#region src/components/inputs/date-range/date-range.css?inline
+var b = "/* The date range picker. The popover is positioned against the host (`position: relative`). */\n:host {\n  display: block;\n  position: relative;\n}\n\n/* --- */\n\n.lintje-date-range-picker { position: relative; display: flex; flex-direction: column; gap: 6px; }\n.lintje-date-range-picker__field {\n  display: flex; align-items: center; justify-content: space-between; gap: 10px;\n  min-width: 210px; height: var(--h-control);\n  padding: 0 12px 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-placeholder);\n  font-size: 1rem;\n}\n.lintje-date-range-picker__field.is-filled { color: var(--color-text-primary); font-weight: 700; }\n.lintje-date-range-picker__field.is-error { border: 2px solid var(--color-error); }\n.lintje-date-range-picker__field: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-date-range-picker__icon { color: var(--color-text-primary); }\n\n.lintje-date-range-picker__popover {\n  position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;\n  /* Seven cells, six 1 px gaps, the grid's padding and the border. */\n  width: calc(7 * var(--h-option) + 6px + 2 * var(--space-2) + 2px);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-date-range-picker__month {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  border-bottom: 1px solid var(--color-border-default);\n  font-size: 1rem; font-weight: 700;\n}\n/* A transparent hit area reaches the target height. */\n.lintje-date-range-picker__nav {\n  position: relative;\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-primary);\n}\n.lintje-date-range-picker__nav:hover { background: var(--color-bg-subtle); }\n.lintje-date-range-picker__nav::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n\n.lintje-date-range-picker__grid {\n  display: grid; grid-template-columns: repeat(7, var(--h-option));\n  gap: 1px; padding: var(--space-2);\n}\n/* A row is there for the grid's ARIA only. */\n.lintje-date-range-picker__row { display: contents; }\n.lintje-date-range-picker__weekday {\n  text-align: center; font-size: 0.875rem; font-weight: 700;\n  color: var(--color-text-muted); padding-bottom: 4px;\n}\n.lintje-date-range-picker__day {\n  height: var(--h-option);\n  display: flex; align-items: center; justify-content: center;\n  font-size: 0.875rem; color: var(--color-text-primary);\n  font-variant-numeric: tabular-nums;\n}\n.lintje-date-range-picker__day:hover:not(.is-blocked) { background: var(--color-bg-subtle); }\n.lintje-date-range-picker__day.is-outside { color: var(--color-text-disabled); }\n/* After `maxDate`: `aria-disabled`, so the arrow keys still pass over it. */\n.lintje-date-range-picker__day.is-blocked { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-date-range-picker__day.is-today { box-shadow: inset 0 0 0 1px var(--color-info); font-weight: 700; }\n.lintje-date-range-picker__day.is-in-range { background: var(--color-bg-selected); }\n/* An inset ring like `.is-today`: the cell keeps its size and an edge on a dark surface. */\n.lintje-date-range-picker__day.is-endpoint {\n  background: var(--color-action-primary); color: var(--color-action-primary-text); font-weight: 700;\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border);\n}\n/* Today and an endpoint: both rings, so the \"today\" marker survives. */\n.lintje-date-range-picker__day.is-endpoint.is-today {\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border), inset 0 0 0 2px var(--color-info);\n}\n\n.lintje-date-range-picker__presets {\n  /* The row gap keeps the hit areas below from overlapping. */\n  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  border-top: 1px solid var(--color-border-default);\n}\n.lintje-date-range-picker__preset {\n  position: relative;\n  height: var(--h-chip);\n  padding: 0 8px;\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-subtle);\n  font-size: 0.875rem; color: var(--color-text-primary);\n}\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-date-range-picker__preset::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n/* The accent line, not the fill colour: in dark the primary on #333333 is 1.2:1. */\n.lintje-date-range-picker__preset:hover { border-color: var(--color-accent-line); }\n\n.lintje-date-range-picker__footer {\n  display: flex; flex-direction: column; gap: var(--space-2);\n  padding: var(--space-3);\n  border-top: 1px solid var(--color-border-default);\n  font: var(--text-small); color: var(--color-text-muted);\n}\n.lintje-date-range-picker__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }\n\n/* --- Stacked in the filter sheet ----------------------------------------- */\n:host([stacked]) {\n  width: 100%;\n}\n\n/* Below 768 px the 48 px cells would run off a narrow phone: the popover keeps the page's gutter\n   on either side and the cells share what is left. */\n@media (max-width: 767px) {\n  .lintje-date-range-picker__popover { max-width: calc(100vw - 2 * var(--space-4)); }\n  .lintje-date-range-picker__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }\n}\n\n/* Forced colours drop rings and fills: they become borders inside the cell. */\n@media (forced-colors: active) {\n  .lintje-date-range-picker__day.is-in-range { border-block: 1px solid CanvasText; }\n  .lintje-date-range-picker__day.is-today { border: 1px solid CanvasText; }\n  .lintje-date-range-picker__day.is-endpoint { border: 1px solid Highlight; }\n  .lintje-date-range-picker__day.is-endpoint.is-today:not(:focus-visible) {\n    outline: 1px solid CanvasText;\n    outline-offset: -2px;\n  }\n}\n", x = [
+	"ma",
+	"di",
+	"wo",
+	"do",
+	"vr",
+	"za",
+	"zo"
+];
+function S(e, t) {
+	let n = new Date(e);
+	return n.setDate(n.getDate() + t), n;
+}
+function C(e) {
+	return S(e, -((e.getDay() + 6) % 7));
+}
+var w = [
+	["Vandaag", (e) => [e, e]],
+	["Gisteren", (e) => [S(e, -1), S(e, -1)]],
+	["Afgelopen 7 dagen", (e) => [S(e, -6), e]],
+	["Afgelopen 30 dagen", (e) => [S(e, -29), e]],
+	["Deze week", (e) => [C(e), S(C(e), 6)]],
+	["Vorige week", (e) => [S(C(e), -7), S(C(e), -1)]],
+	["Deze maand", (e) => [new Date(e.getFullYear(), e.getMonth(), 1), new Date(e.getFullYear(), e.getMonth() + 1, 0)]],
+	["Kwartaal", (e) => [S(e, -89), e]]
+];
+function T(e, t, n) {
+	let r = w.find(([t]) => t === e);
+	if (!r) return null;
+	let [i, a] = r[1](t), o = n && a > n ? n : a;
+	return {
+		from: E(i),
+		to: E(o < i ? i : o)
+	};
+}
+function E(e) {
+	return `${String(e.getDate()).padStart(2, "0")}-${String(e.getMonth() + 1).padStart(2, "0")}-${e.getFullYear()}`;
+}
+var D = (e) => e ? e.split("-").reverse().join("-") : null;
+function O(e) {
+	if (!e) return null;
+	let [t, n, r] = e.split("-").map(Number);
+	return !t || !n || !r ? null : new Date(r, n - 1, t);
+}
+function k(e) {
+	let [t, n, r] = e.split("-").map(Number);
+	return new Date(t, n - 1, r);
+}
+function A(e, t, n) {
+	return e && t ? ", begin- en einddatum" : e ? ", begindatum" : t ? ", einddatum" : n ? ", in periode" : "";
+}
+var j = class extends u {
+	constructor(...e) {
+		super(...e), this.accessibleName = "", this.stacked = !1, this.open = !1, this.range = {
+			from: null,
+			to: null
+		}, this.draft = {
+			from: null,
+			to: null
+		}, this.focusDay = "", this.onOutsideClick = (e) => {
+			this.open && (e.composedPath().includes(this) || (this.open = !1));
+		}, this.onEscape = (e) => {
+			this.open && e.key === "Escape" && s(this) && (e.stopPropagation(), this.close());
+		};
+	}
+	static {
+		this.styles = [
+			e,
+			i(b),
+			i(d)
+		];
+	}
+	static {
+		this.properties = {
+			accessibleName: {
+				type: String,
+				attribute: "accessible-name"
+			},
+			stacked: {
+				type: Boolean,
+				reflect: !0
+			},
+			open: {
+				type: Boolean,
+				reflect: !0
+			},
+			range: { attribute: !1 },
+			today: { attribute: !1 },
+			maxDate: { attribute: !1 },
+			draft: { state: !0 },
+			month: { state: !0 },
+			focusDay: { state: !0 }
+		};
+	}
+	get postedValue() {
+		return {
+			from: D(this.range.from),
+			to: D(this.range.to)
+		};
+	}
+	async close() {
+		let e = this.renderRoot.querySelector(".lintje-date-range-picker__popover"), t = e !== null && o(e);
+		this.open = !1, await this.updateComplete, t && this.renderRoot.querySelector(".lintje-date-range-picker__field")?.focus();
+	}
+	onFocusOut(e) {
+		let t = e.relatedTarget;
+		this.open && t && !this.renderRoot.contains(t) && !n(this, t) && (this.open = !1);
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("mousedown", this.onOutsideClick), document.addEventListener("keydown", this.onEscape, !0);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("mousedown", this.onOutsideClick), document.removeEventListener("keydown", this.onEscape, !0), super.disconnectedCallback();
+	}
+	get day() {
+		return this.today ?? /* @__PURE__ */ new Date();
+	}
+	toggle() {
+		this.open = !this.open, this.open && (this.draft = { ...this.range }, this.month = O(this.range.from) ?? this.day, this.focusDay = "");
+	}
+	select(e) {
+		let t = O(this.draft.from), n = O(this.draft.to);
+		this.draft = !t || t && n ? {
+			from: E(e),
+			to: null
+		} : e < t ? {
+			from: E(e),
+			to: E(t)
+		} : {
+			from: this.draft.from,
+			to: E(e)
+		};
+	}
+	applyPreset(e) {
+		let t = T(e, this.day, this.maxDate);
+		t && (this.draft = t, this.month = O(t.from) ?? this.day, this.focusDay = "");
+	}
+	pick(e, t) {
+		t || (this.focusDay = e, this.select(k(e)));
+	}
+	onGridKeydown(e, t, n) {
+		let r = y[e.key];
+		if (!r) return;
+		e.preventDefault();
+		let i = r(t);
+		this.focusDay = i, (e.key.startsWith("Page") || !n.includes(i)) && (this.month = k(m(i))), this.focusCell();
+	}
+	shiftMonth(e, t, n) {
+		this.month = new Date(e.getFullYear(), e.getMonth() + t, 1), this.focusDay = v(n, t);
+	}
+	async focusCell() {
+		await this.updateComplete, this.renderRoot.querySelector(".lintje-date-range-picker__day[tabindex=\"0\"]")?.focus();
+	}
+	apply() {
+		this.announce({ ...this.draft }, {
+			from: D(this.draft.from),
+			to: D(this.draft.to)
+		}), this.close();
+	}
+	render() {
+		let e = h(this.day), t = this.month ?? O(this.range.from) ?? this.day, n = h(t).slice(0, 7), i = D(this.draft.from), o = D(this.draft.to), s = this.maxDate ? h(this.maxDate) : null, u = _(`${n}-01`), d = Array.from({ length: 42 }, (e, t) => g(u, t)), m = Array.from({ length: 6 }, (e, t) => d.slice(t * 7, t * 7 + 7)), v = [
+			this.focusDay,
+			i,
+			e
+		].find((e) => e && d.includes(e)) ?? `${n}-01`, y = this.accessibleName || this.labelText, b = !!(this.range.from && this.range.to), S = b ? `${this.range.from} – ${this.range.to}` : "dd-mm-jjjj – dd-mm-jjjj", C = O(this.draft.from), T = O(this.draft.to), E = C && T ? Math.round((T.getTime() - C.getTime()) / 864e5) + 1 : 0, k = E > 0 || b && !this.draft.from && !this.draft.to;
+		return a`<div class="lintje-date-range-picker" @focusout=${this.onFocusOut}>
+      ${this.label ? this.renderLabel() : r}
+      <button
+        type="button"
+        aria-label=${y ? `${y}, ${b ? S : "geen periode gekozen"}` : r}
+        class=${c({
+			"lintje-date-range-picker__field": !0,
+			"is-filled": !!this.range.from,
+			"is-error": !!this.error
+		})}
+        aria-expanded=${this.open}
+        aria-haspopup="dialog"
+        aria-describedby=${this.describedBy}
+        aria-invalid=${this.error ? "true" : r}
+        ?disabled=${this.disabled}
+        @click=${this.toggle}
+      >
+        <span>${S}</span>
+        ${l("functioneel-kalender", {
+			size: 16,
+			className: "lintje-date-range-picker__icon"
+		})}
+      </button>
+
+      ${this.open ? a`<div
+            class="lintje-date-range-picker__popover"
+            role="dialog"
+            aria-label=${y || "Periode"}
+          >
+            <div class="lintje-date-range-picker__month">
+              <button
+                type="button"
+                class="lintje-date-range-picker__nav"
+                aria-label="Vorige maand"
+                @click=${() => this.shiftMonth(t, -1, v)}
+              >
+                ${l("functioneel-delta-rechts", {
+			size: 16,
+			flip: "horizontal"
+		})}
+              </button>
+              <span aria-live="polite">${p(`${n}-01`)}</span>
+              <button
+                type="button"
+                class="lintje-date-range-picker__nav"
+                aria-label="Volgende maand"
+                @click=${() => this.shiftMonth(t, 1, v)}
+              >
+                ${l("functioneel-delta-rechts", { size: 16 })}
+              </button>
+            </div>
+
+            <div
+              class="lintje-date-range-picker__grid"
+              role="grid"
+              aria-label=${p(`${n}-01`)}
+              @keydown=${(e) => this.onGridKeydown(e, v, d)}
+            >
+              <div class="lintje-date-range-picker__row" role="row">
+                ${x.map((e) => a`<span class="lintje-date-range-picker__weekday" role="columnheader"
+                      >${e}</span
+                    >`)}
+              </div>
+              ${m.map((t) => a`<div class="lintje-date-range-picker__row" role="row">
+                  ${t.map((t) => {
+			let l = s !== null && t > s, u = t === i, d = t === o, p = i !== null && o !== null && t > i && t < o;
+			return a`<button
+                      type="button"
+                      role="gridcell"
+                      tabindex=${t === v ? "0" : "-1"}
+                      aria-label=${f(t) + A(u, d, p)}
+                      aria-selected=${u || d || p ? "true" : "false"}
+                      aria-current=${t === e ? "date" : r}
+                      aria-disabled=${l ? "true" : r}
+                      class=${c({
+				"lintje-date-range-picker__day": !0,
+				"is-outside": !t.startsWith(n),
+				"is-blocked": l,
+				"is-today": t === e,
+				"is-endpoint": u || d,
+				"is-in-range": p
+			})}
+                      @click=${() => this.pick(t, l)}
+                    >
+                      ${Number(t.slice(8))}
+                    </button>`;
+		})}
+                </div>`)}
+            </div>
+
+            <div class="lintje-date-range-picker__presets">
+              ${w.map(([e]) => a`<button
+                  type="button"
+                  class="lintje-date-range-picker__preset"
+                  @click=${() => this.applyPreset(e)}
+                >
+                  ${e}
+                </button>`)}
+            </div>
+
+            <div class="lintje-date-range-picker__footer">
+              <span aria-live="polite"
+                >${E > 0 ? `${this.draft.from} – ${this.draft.to} · ${E} dagen` : "Kies een begin- en einddatum"}</span
+              >
+              <div class="lintje-date-range-picker__actions">
+                <lintje-button
+                  variant="tertiary"
+                  size="compact"
+                  @click=${() => {
+			this.draft = {
+				from: null,
+				to: null
+			};
+		}}
+                  >Wissen</lintje-button
+                >
+                <lintje-button
+                  variant="primary"
+                  size="compact"
+                  ?disabled=${!k}
+                  @click=${this.apply}
+                  >Toepassen</lintje-button
+                >
+              </div>
+            </div>
+          </div>` : r}
+      ${this.renderFoot()}
+    </div>`;
+	}
+};
+t("lintje-date-range", j);
+//#endregion
+export { j as LintjeDateRange, w as PRESETS, E as formatDate, T as presetRange };

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

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

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

@@ -0,0 +1,107 @@
+import { $ as e, Bt as t, Gt as n, Ht as r, I as i, Kt as a, O as o, X as s, Y as c, Z as l, et as u, k as d, ut as f } from "../chunks/base-rBLTcEIv.js";
+//#region src/components/tables/description-list/description-list.css?inline
+var p = ":host { display: block; min-width: 0; }\n:host([layout='grid']) { container-type: inline-size; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-description-list {\n  margin: 0;\n  font: var(--text-ui);\n  font-variant-numeric: tabular-nums;\n}\n\n/* Every row has the same fractions, so the columns line up without an outer grid. */\n.lintje-description-list__row {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-description-list__row:last-child { border-bottom: 0; }\n\n.lintje-description-list__label {\n  padding: 10px var(--space-3) 10px 0;\n  color: var(--color-text-muted);\n}\n.lintje-description-list__value {\n  display: flex; justify-content: space-between; align-items: baseline;\n  gap: var(--space-3);\n  min-width: 0;\n  margin: 0;\n  padding: 10px 0;\n  color: var(--color-text-primary);\n  overflow-wrap: anywhere;\n}\n\n.lintje-description-list__missing { color: var(--color-text-muted); }\n\n.lintje-description-list__link { color: var(--color-link); }\n.lintje-description-list__action {\n  flex: none;\n  font-weight: 700;\n  color: var(--color-link);\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-description-list__link:hover,\n.lintje-description-list__action:hover { color: var(--color-link-hover); }\n\n/* `layout=\"column\"` and every list below 768 px: label above value, no lines. */\n.lintje-description-list--column .lintje-description-list__row { display: block; border-bottom: 0; }\n.lintje-description-list--column .lintje-description-list__row + .lintje-description-list__row { margin-top: 10px; }\n.lintje-description-list--column .lintje-description-list__label { padding: 0; font: var(--text-small); }\n.lintje-description-list--column .lintje-description-list__value { padding: 0; }\n@media (max-width: 767px) {\n  .lintje-description-list:not(.lintje-description-list--grid) .lintje-description-list__row { display: block; border-bottom: 0; }\n  .lintje-description-list:not(.lintje-description-list--grid) .lintje-description-list__row + .lintje-description-list__row { margin-top: 10px; }\n  .lintje-description-list:not(.lintje-description-list--grid) .lintje-description-list__label { padding: 0; font: var(--text-small); }\n  .lintje-description-list:not(.lintje-description-list--grid) .lintje-description-list__value { padding: 0; }\n}\n\n.lintje-description-list__main { display: inline-flex; align-items: baseline; gap: var(--space-2); min-width: 0; }\n.lintje-description-list__main .lintje-icon { align-self: center; flex: none; }\n.lintje-description-list__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }\n.lintje-description-list__tag {\n  display: inline-flex; align-items: center;\n  min-height: var(--h-chip);\n  padding: 0 var(--space-3);\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-surface);\n  font-weight: 700;\n}\n\n/* --- Grid: cells side by side, divided by a line, each with its own tone ----------------- */\n.lintje-description-list--grid {\n  display: grid;\n  grid-template-columns: repeat(var(--lintje-columns, 4), minmax(0, 1fr));\n  gap: 1px;\n  background: var(--color-border-default);\n}\n.lintje-description-list--grid .lintje-description-list__row {\n  display: flex; flex-direction: column; gap: var(--space-1);\n  min-width: 0;\n  padding: var(--space-3) var(--space-4);\n  border: 0;\n  background: var(--color-bg-subtle);\n}\n.lintje-description-list--grid .lintje-description-list__row.is-wide { grid-column: span 2; }\n/* On a surface that is not the page's own (a hero's wash) the cells are panels: the surface, framed. */\n:host([surface]) .lintje-description-list--grid { border: 1px solid var(--color-border-default); }\n:host([surface]) .lintje-description-list--grid .lintje-description-list__row:not(.is-changed):not(.is-warning):not(.is-error) {\n  background: var(--color-bg-surface);\n}\n.lintje-description-list--grid .lintje-description-list__label {\n  display: flex; align-items: center; gap: var(--space-2);\n  padding: 0;\n  font: var(--text-meta);\n}\n.lintje-description-list--grid .lintje-description-list__value {\n  /* The values of one row stand on one line, however tall each is. */\n  flex: 1 1 auto;\n  flex-direction: column; align-items: flex-start; justify-content: center;\n  gap: var(--space-2);\n  padding: 0;\n  font-weight: 700;\n}\n/* What differs from the default: the chosen option's quiet surface with an edge on top. */\n.lintje-description-list--grid .is-changed {\n  background: var(--color-choice-active-bg);\n  box-shadow: inset 0 3px 0 var(--color-accent-line);\n}\n.lintje-description-list--grid .is-warning {\n  background: var(--color-warning-bg);\n  box-shadow: inset 0 3px 0 var(--color-warning);\n}\n.lintje-description-list--grid .is-error {\n  background: var(--color-error-bg);\n  box-shadow: inset 0 3px 0 var(--color-error-line);\n}\n.lintje-description-list--grid .lintje-description-list__action { font: var(--text-meta); font-weight: 700; }\n.lintje-description-list--grid .is-large .lintje-description-list__value {\n  font: var(--text-kpi);\n  letter-spacing: var(--kpi-tracking);\n  font-variant-numeric: tabular-nums;\n}\n@container (max-width: 30rem) {\n  .lintje-description-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  /* A wide cell, and a last one alone on its row, take the whole row: no empty cell beside it. */\n  .lintje-description-list--grid .lintje-description-list__row.is-wide,\n  .lintje-description-list--grid .lintje-description-list__row:last-child:nth-child(odd) {\n    grid-column: 1 / -1;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-description-list__action { transition: none; }\n}\n\n@media (forced-colors: active) {\n  .lintje-description-list--grid .lintje-description-list__row { border: 1px solid CanvasText; }\n}\n", m = {
+	warning: "functioneel-waarschuwing",
+	error: "functioneel-foutmelding"
+}, h = class extends o {
+	constructor(...e) {
+		super(...e), this.items = [], this.columns = 4, this.surface = !1, this.layout = "row";
+	}
+	static {
+		this.styles = [
+			e,
+			c,
+			d,
+			r(p)
+		];
+	}
+	static {
+		this.properties = {
+			items: { attribute: !1 },
+			layout: {
+				type: String,
+				reflect: !0
+			},
+			columns: { type: Number },
+			surface: {
+				type: Boolean,
+				reflect: !0
+			}
+		};
+	}
+	follow(e, t) {
+		i(e) && this.followLink(t, e);
+	}
+	value(e) {
+		if (e.tags) return e.tags.length ? a`<ul class="lintje-description-list__tags">
+            ${e.tags.map((e) => a`<li class="lintje-description-list__tag">${e}</li>`)}
+          </ul>` : a`<span class="lintje-description-list__missing">Geen</span>`;
+		let t = e.value === null || e.value === void 0 || e.value === "";
+		if (t && e.slot) return a``;
+		if (t) return a`<span class="lintje-description-list__missing"
+        ><span aria-hidden="true">—</span><span class="visually-hidden">geen waarde</span></span
+      >`;
+		if (e.href) {
+			let t = e.href;
+			return a`<a
+        class="lintje-description-list__link"
+        href=${t}
+        @click=${(e) => this.follow(e, t)}
+        >${e.value}</a
+      >`;
+		}
+		return a`<span>${e.value}</span>`;
+	}
+	action(e) {
+		if (!e.action) return n;
+		let { href: t } = e.action, r = e.action.label ?? "Wijzigen";
+		return a`<a
+      class="lintje-description-list__action"
+      href=${t}
+      aria-label=${`${e.label} ${r.toLowerCase()}`}
+      @click=${(e) => this.follow(e, t)}
+      >${r}</a
+    >`;
+	}
+	renderItem(e) {
+		let t = this.layout === "grid", r = e.tone;
+		return a`<div
+      class=${l({
+			"lintje-description-list__row": !0,
+			"is-wide": t && e.span === 2,
+			"is-large": t && !!e.large,
+			[`is-${r}`]: !!r
+		})}
+    >
+      <dt class="lintje-description-list__label"
+        >${t && e.icon ? u(e.icon, { size: 16 }) : n}${e.label}</dt
+      >
+      <dd class="lintje-description-list__value">
+        <span class="lintje-description-list__main">
+          ${r && r !== "changed" ? u(m[r], { size: 16 }) : n}
+          ${this.value(e)}
+        </span>
+        ${e.slot ? a`<slot name=${e.slot}></slot>` : n}
+        ${r === "changed" ? s({
+			value: "Aangepast",
+			tone: "neutral",
+			className: "lintje-description-list__changed"
+		}) : n}
+        ${this.action(e)}
+      </dd>
+    </div>`;
+	}
+	render() {
+		let e = l({
+			"lintje-description-list": !0,
+			"lintje-description-list--column": this.layout === "column",
+			"lintje-description-list--grid": this.layout === "grid"
+		});
+		return a`<dl class=${e} ${f({ "--lintje-columns": String(this.columns) })}>
+      ${this.items.map((e) => this.renderItem(e))}
+    </dl>`;
+	}
+};
+t("lintje-description-list", h);
+//#endregion
+export { h as LintjeDescriptionList };

package/dist-elements/tag/document-viewer.d.ts

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