lintje 0.2.0 → 0.3.0

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

@@ -1,16 +1,16 @@
-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, 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";
 import { a as d, c as f, d as p, f as m, g as h, i as g, l as _, m as v, n as y, o as b, r as x, s as S, t as C, u as w } from "../chunks/date-format-mHtZyBys.js";
 //#region src/components/inputs/date-input/date-input.css?inline
-var T = "/* 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", E = class extends l {
+var T = "/* 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 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-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 screen and (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", 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(T)
+			i,
+			t(u),
+			t(T)
 		];
 	}
 	static {
@@ -88,7 +88,7 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
 	}
 	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.outOfBounds(e) || (this.choose(e), this.open = !1, this.renderRoot.querySelector(".lintje-date-input__control")?.focus());
@@ -101,8 +101,8 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
 		this.focusDay = g(this.focusDay, e);
 	}
 	renderCalendar() {
-		let e = this.focusDay || this.todayDay, t = v(e).slice(0, 7), n = this.todayDay;
-		return c`<div class="lintje-date-input__calendar">
+		let e = this.focusDay || this.todayDay, t = v(e).slice(0, 7), r = this.todayDay;
+		return o`<div class="lintje-date-input__calendar">
       <div class="lintje-date-input__month">
         <button
           type="button"
@@ -110,7 +110,7 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
           aria-label="Vorige maand"
           @click=${() => this.shiftMonth(-1)}
         >
-          ${o("functioneel-delta-rechts", {
+          ${c("functioneel-delta-rechts", {
 			size: 16,
 			flip: "horizontal"
 		})}
@@ -124,7 +124,7 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
           aria-label="Volgende maand"
           @click=${() => this.shiftMonth(1)}
         >
-          ${o("functioneel-delta-rechts", { size: 16 })}
+          ${c("functioneel-delta-rechts", { size: 16 })}
         </button>
       </div>
       <div
@@ -134,26 +134,26 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
         @keydown=${this.onGridKeydown}
       >
         <div class="lintje-date-input__row" role="row">
-          ${y.map((e) => c`<span class="lintje-date-input__weekday" role="columnheader">${e}</span>`)}
+          ${y.map((e) => o`<span class="lintje-date-input__weekday" role="columnheader">${e}</span>`)}
         </div>
-        ${w(e).map((i) => c`<div class="lintje-date-input__row" role="row">
+        ${w(e).map((i) => o`<div class="lintje-date-input__row" role="row">
             ${i.map((i) => {
-			if (!i.startsWith(t)) return c`<span class="lintje-date-input__blank" role="gridcell"></span>`;
-			let o = !!this.outOfBounds(i);
-			return c`<button
+			if (!i.startsWith(t)) return o`<span class="lintje-date-input__blank" role="gridcell"></span>`;
+			let a = !!this.outOfBounds(i);
+			return o`<button
                 type="button"
                 role="gridcell"
-                class=${a({
+                class=${s({
 				"lintje-date-input__day": !0,
-				"is-blocked": o,
-				"is-today": i === n,
+				"is-blocked": a,
+				"is-today": i === r,
 				"is-selected": i === this.value
 			})}
                 tabindex=${i === e ? "0" : "-1"}
                 aria-label=${b(i)}
                 aria-selected=${i === this.value ? "true" : "false"}
-                aria-current=${i === n ? "date" : r}
-                aria-disabled=${o ? "true" : r}
+                aria-current=${i === r ? "date" : n}
+                aria-disabled=${a ? "true" : n}
                 @click=${() => this.pick(i)}
               >
                 ${Number(i.slice(8))}
@@ -165,7 +165,7 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
 	}
 	render() {
 		let e = this.message;
-		return c`<div class="lintje-field" @focusout=${this.onFocusOut}>
+		return o`<div class="lintje-field" @focusout=${this.onFocusOut}>
       ${this.renderLabel(this.controlId)}
       <div class="lintje-date-input">
         <input
@@ -173,16 +173,16 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
           id=${this.controlId}
           inputmode="numeric"
           autocomplete="off"
-          class=${a({
+          class=${s({
 			"lintje-date-input__control": !0,
 			"is-error": !!e
 		})}
-          .value=${s(this.text)}
-          placeholder=${this.placeholder || r}
+          .value=${a(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.onFieldKeydown}
@@ -196,7 +196,7 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
           ?disabled=${this.disabled}
           @click=${this.toggle}
         >
-          ${o("functioneel-kalender", { size: 18 })}
+          ${c("functioneel-kalender", { size: 18 })}
         </button>
       </div>
       <lintje-popover
@@ -205,12 +205,12 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
         label="Kalender"
         @lintje-close=${this.onPopoverClose}
       >
-        ${this.open ? this.renderCalendar() : r}
+        ${this.open ? this.renderCalendar() : n}
       </lintje-popover>
       ${this.renderFoot()}
     </div>`;
 	}
 };
-t("lintje-date-input", E);
+e("lintje-date-input", E);
 //#endregion
 export { E as LintjeDateInput };

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

@@ -1,9 +1,9 @@
-import { $ as e, Bt as t, G as n, Gt as r, Ht as i, U as a, W as o, Z as s, et as c, qt as l } from "../chunks/base-Bg-IFOPG.js";
-import "../chunks/focus-trap-9BnE-xWv.js";
-import { r as u, t as d } from "../chunks/input-BtuNFSWk.js";
+import { $ as e, Q as t, Yt as n, Zt as r, en as i, et as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CbmWxUig.js";
+import "../chunks/focus-trap-BwOxE5BX.js";
+import { r as u, t as d } from "../chunks/input-CRW_exv_.js";
 import { g as f, h as p, i as m, l as h, m as g, o as _, r as v, t as y } from "../chunks/date-format-mHtZyBys.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 = [
+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 screen and (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",
@@ -55,8 +55,8 @@ 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 = {
+	constructor(...t) {
+		super(...t), this.accessibleName = "", this.stacked = !1, this.open = !1, this.range = {
 			from: null,
 			to: null
 		}, this.draft = {
@@ -64,15 +64,15 @@ var j = class extends u {
 			to: null
 		}, this.focusDay = "", this.onOutsideClick = (e) => {
 			this.open && (e.composedPath().includes(this) || (this.open = !1));
-		}, this.onEscape = (e) => {
-			this.open && e.key === "Escape" && o(this) && (e.stopPropagation(), this.close());
+		}, this.onEscape = (t) => {
+			this.open && t.key === "Escape" && e(this) && (t.stopPropagation(), this.close());
 		};
 	}
 	static {
 		this.styles = [
-			e,
-			i(b),
-			i(d)
+			o,
+			r(b),
+			r(d)
 		];
 	}
 	static {
@@ -104,12 +104,12 @@ var j = class extends u {
 		};
 	}
 	async close() {
-		let e = this.renderRoot.querySelector(".lintje-date-range-picker__popover"), t = e !== null && a(e);
-		this.open = !1, await this.updateComplete, t && this.renderRoot.querySelector(".lintje-date-range-picker__field")?.focus();
+		let e = this.renderRoot.querySelector(".lintje-date-range-picker__popover"), n = e !== null && t(e);
+		this.open = !1, await this.updateComplete, n && 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);
+		this.open && t && !this.renderRoot.contains(t) && !a(this, t) && (this.open = !1);
 	}
 	connectedCallback() {
 		super.connectedCallback(), document.addEventListener("mousedown", this.onOutsideClick), document.addEventListener("keydown", this.onEscape, !0);
@@ -163,17 +163,17 @@ var j = class extends u {
 		}), this.close();
 	}
 	render() {
-		let e = f(this.day), t = this.month ?? O(this.range.from) ?? this.day, n = f(t).slice(0, 7), i = D(this.draft.from), a = D(this.draft.to), o = this.maxDate ? f(this.maxDate) : null, u = p(`${n}-01`), d = Array.from({ length: 42 }, (e, t) => v(u, t)), m = Array.from({ length: 6 }, (e, t) => d.slice(t * 7, t * 7 + 7)), g = [
+		let e = f(this.day), t = this.month ?? O(this.range.from) ?? this.day, n = f(t).slice(0, 7), r = D(this.draft.from), a = D(this.draft.to), o = this.maxDate ? f(this.maxDate) : null, u = p(`${n}-01`), d = Array.from({ length: 42 }, (e, t) => v(u, t)), m = Array.from({ length: 6 }, (e, t) => d.slice(t * 7, t * 7 + 7)), g = [
 			this.focusDay,
-			i,
+			r,
 			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 l`<div class="lintje-date-range-picker" @focusout=${this.onFocusOut}>
-      ${this.label ? this.renderLabel() : r}
+		return s`<div class="lintje-date-range-picker" @focusout=${this.onFocusOut}>
+      ${this.label ? this.renderLabel() : i}
       <button
         type="button"
-        aria-label=${y ? `${y}, ${b ? S : "geen periode gekozen"}` : r}
-        class=${s({
+        aria-label=${y ? `${y}, ${b ? S : "geen periode gekozen"}` : i}
+        class=${c({
 			"lintje-date-range-picker__field": !0,
 			"is-filled": !!this.range.from,
 			"is-error": !!this.error
@@ -181,18 +181,18 @@ var j = class extends u {
         aria-expanded=${this.open}
         aria-haspopup="dialog"
         aria-describedby=${this.describedBy}
-        aria-invalid=${this.error ? "true" : r}
+        aria-invalid=${this.error ? "true" : i}
         ?disabled=${this.disabled}
         @click=${this.toggle}
       >
         <span>${S}</span>
-        ${c("functioneel-kalender", {
+        ${l("functioneel-kalender", {
 			size: 16,
 			className: "lintje-date-range-picker__icon"
 		})}
       </button>
 
-      ${this.open ? l`<div
+      ${this.open ? s`<div
             class="lintje-date-range-picker__popover"
             role="dialog"
             aria-label=${y || "Periode"}
@@ -204,7 +204,7 @@ var j = class extends u {
                 aria-label="Vorige maand"
                 @click=${() => this.shiftMonth(t, -1, g)}
               >
-                ${c("functioneel-delta-rechts", {
+                ${l("functioneel-delta-rechts", {
 			size: 16,
 			flip: "horizontal"
 		})}
@@ -216,7 +216,7 @@ var j = class extends u {
                 aria-label="Volgende maand"
                 @click=${() => this.shiftMonth(t, 1, g)}
               >
-                ${c("functioneel-delta-rechts", { size: 16 })}
+                ${l("functioneel-delta-rechts", { size: 16 })}
               </button>
             </div>
 
@@ -227,30 +227,30 @@ var j = class extends u {
               @keydown=${(e) => this.onGridKeydown(e, g, d)}
             >
               <div class="lintje-date-range-picker__row" role="row">
-                ${x.map((e) => l`<span class="lintje-date-range-picker__weekday" role="columnheader"
+                ${x.map((e) => s`<span class="lintje-date-range-picker__weekday" role="columnheader"
                       >${e}</span
                     >`)}
               </div>
-              ${m.map((t) => l`<div class="lintje-date-range-picker__row" role="row">
+              ${m.map((t) => s`<div class="lintje-date-range-picker__row" role="row">
                   ${t.map((t) => {
-			let c = o !== null && t > o, u = t === i, d = t === a, f = i !== null && a !== null && t > i && t < a;
-			return l`<button
+			let l = o !== null && t > o, u = t === r, d = t === a, f = r !== null && a !== null && t > r && t < a;
+			return s`<button
                       type="button"
                       role="gridcell"
                       tabindex=${t === g ? "0" : "-1"}
                       aria-label=${_(t) + A(u, d, f)}
                       aria-selected=${u || d || f ? "true" : "false"}
-                      aria-current=${t === e ? "date" : r}
-                      aria-disabled=${c ? "true" : r}
-                      class=${s({
+                      aria-current=${t === e ? "date" : i}
+                      aria-disabled=${l ? "true" : i}
+                      class=${c({
 				"lintje-date-range-picker__day": !0,
 				"is-outside": !t.startsWith(n),
-				"is-blocked": c,
+				"is-blocked": l,
 				"is-today": t === e,
 				"is-endpoint": u || d,
 				"is-in-range": f
 			})}
-                      @click=${() => this.pick(t, c)}
+                      @click=${() => this.pick(t, l)}
                     >
                       ${Number(t.slice(8))}
                     </button>`;
@@ -259,7 +259,7 @@ var j = class extends u {
             </div>
 
             <div class="lintje-date-range-picker__presets">
-              ${w.map(([e]) => l`<button
+              ${w.map(([e]) => s`<button
                   type="button"
                   class="lintje-date-range-picker__preset"
                   @click=${() => this.applyPreset(e)}
@@ -293,11 +293,11 @@ var j = class extends u {
                 >
               </div>
             </div>
-          </div>` : r}
+          </div>` : i}
       ${this.renderFoot()}
     </div>`;
 	}
 };
-t("lintje-date-range", j);
+n("lintje-date-range", j);
 //#endregion
 export { j as LintjeDateRange, w as PRESETS, E as formatDate, T as presetRange };

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

@@ -1,18 +1,15 @@
-import { $ as e, Bt as t, Gt as n, Ht as r, I as i, O as a, X as o, Y as s, Z as c, et as l, k as u, qt as d, ut as f } from "../chunks/base-Bg-IFOPG.js";
+import { F as e, H as t, J as n, P as r, Yt as i, Zt as a, at as o, bt as s, en as c, lt as l, nn as u, ot as d, st as f, ut as p } from "../chunks/base-CbmWxUig.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 a {
+var m = ":host { display: block; min-width: 0; }\n/* A size container has no width of its own: in a column that shrinks to its content it would\n   be none, so the grid takes the room it stands in. */\n:host([layout='grid']) { container-type: inline-size; width: 100%; }\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 screen and (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-success):not(.is-info):not(.is-attention):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 .lintje-description-list__row.is-success {\n  background: var(--color-success-bg);\n  box-shadow: inset 0 3px 0 var(--color-success-line);\n}\n.lintje-description-list--grid .lintje-description-list__row.is-info {\n  background: var(--color-info-bg);\n  box-shadow: inset 0 3px 0 var(--color-info-line);\n}\n.lintje-description-list--grid .lintje-description-list__row.is-attention {\n  background: var(--color-attention-bg);\n  box-shadow: inset 0 3px 0 var(--color-attention-line);\n}\n.lintje-description-list--grid .lintje-description-list__row.is-warning {\n  background: var(--color-warning-bg);\n  box-shadow: inset 0 3px 0 var(--color-attention-line);\n}\n.lintje-description-list--grid .lintje-description-list__row.is-error {\n  background: var(--color-error-bg);\n  box-shadow: inset 0 3px 0 var(--color-error-line);\n}\n.lintje-description-list__row.is-success .lintje-description-list__main .lintje-icon { color: var(--color-success-line); }\n.lintje-description-list__row.is-info .lintje-description-list__main .lintje-icon { color: var(--color-info-line); }\n.lintje-description-list__row.is-error .lintje-description-list__main .lintje-icon { color: var(--color-error-line); }\n.lintje-description-list__row.is-attention .lintje-description-list__main .lintje-icon { color: var(--color-attention-line); }\n.lintje-description-list__row.is-warning .lintje-description-list__main .lintje-icon { color: var(--color-attention-line); }\n.lintje-description-list__row.is-busy .lintje-description-list__main .lintje-icon { color: var(--color-accent-text); }\n.lintje-description-list__row.is-neutral .lintje-description-list__main .lintje-icon { color: var(--color-text-muted); }\n.lintje-description-list__row.is-subtle .lintje-description-list__main .lintje-icon { color: var(--color-text-muted); }\n.lintje-description-list__row.is-live .lintje-description-list__main .lintje-icon { color: var(--color-error-line); }\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", h = class extends r {
 	constructor(...e) {
 		super(...e), this.items = [], this.columns = 4, this.surface = !1, this.layout = "row";
 	}
 	static {
 		this.styles = [
+			l,
+			o,
 			e,
-			s,
-			u,
-			r(p)
+			a(m)
 		];
 	}
 	static {
@@ -29,44 +26,44 @@ var p = ":host { display: block; min-width: 0; }\n:host([layout='grid']) { conta
 			}
 		};
 	}
-	follow(e, t) {
-		i(e) && this.followLink(t, e);
+	follow(e, n) {
+		t(e) && this.followLink(n, e);
 	}
 	value(e) {
-		if (e.tags) return e.tags.length ? d`<ul class="lintje-description-list__tags">
-            ${e.tags.map((e) => d`<li class="lintje-description-list__tag">${e}</li>`)}
-          </ul>` : d`<span class="lintje-description-list__missing">Geen</span>`;
+		if (e.tags) return e.tags.length ? u`<ul class="lintje-description-list__tags">
+            ${e.tags.map((e) => u`<li class="lintje-description-list__tag">${e}</li>`)}
+          </ul>` : u`<span class="lintje-description-list__missing">Geen</span>`;
 		let t = e.value === null || e.value === void 0 || e.value === "";
-		if (t && e.slot) return d``;
-		if (t) return d`<span class="lintje-description-list__missing"
+		if (t && e.slot) return u``;
+		if (t) return u`<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 d`<a
+			return u`<a
         class="lintje-description-list__link"
         href=${t}
         @click=${(e) => this.follow(e, t)}
         >${e.value}</a
       >`;
 		}
-		return d`<span>${e.value}</span>`;
+		return u`<span>${e.value}</span>`;
 	}
 	action(e) {
-		if (!e.action) return n;
-		let { href: t } = e.action, r = e.action.label ?? "Wijzigen";
-		return d`<a
+		if (!e.action) return c;
+		let { href: t } = e.action, n = e.action.label ?? "Wijzigen";
+		return u`<a
       class="lintje-description-list__action"
       href=${t}
-      aria-label=${`${e.label} ${r.toLowerCase()}`}
+      aria-label=${`${e.label} ${n.toLowerCase()}`}
       @click=${(e) => this.follow(e, t)}
-      >${r}</a
+      >${n}</a
     >`;
 	}
 	renderItem(e) {
 		let t = this.layout === "grid", r = e.tone;
-		return d`<div
-      class=${c({
+		return u`<div
+      class=${f({
 			"lintje-description-list__row": !0,
 			"is-wide": t && e.span === 2,
 			"is-large": t && !!e.large,
@@ -74,34 +71,34 @@ var p = ":host { display: block; min-width: 0; }\n:host([layout='grid']) { conta
 		})}
     >
       <dt class="lintje-description-list__label"
-        >${t && e.icon ? l(e.icon, { size: 16 }) : n}${e.label}</dt
+        >${t && e.icon ? p(e.icon, { size: 16 }) : c}${e.label}</dt
       >
       <dd class="lintje-description-list__value">
         <span class="lintje-description-list__main">
-          ${r && r !== "changed" ? l(m[r], { size: 16 }) : n}
+          ${r && r !== "changed" ? p(n[r], { size: 16 }) : c}
           ${this.value(e)}
         </span>
-        ${e.slot ? d`<slot name=${e.slot}></slot>` : n}
-        ${r === "changed" ? o({
+        ${e.slot ? u`<slot name=${e.slot}></slot>` : c}
+        ${r === "changed" ? d({
 			value: "Aangepast",
 			tone: "neutral",
 			className: "lintje-description-list__changed"
-		}) : n}
+		}) : c}
         ${this.action(e)}
       </dd>
     </div>`;
 	}
 	render() {
-		let e = c({
+		let e = f({
 			"lintje-description-list": !0,
 			"lintje-description-list--column": this.layout === "column",
 			"lintje-description-list--grid": this.layout === "grid"
 		});
-		return d`<dl class=${e} ${f({ "--lintje-columns": String(this.columns) })}>
+		return u`<dl class=${e} ${s({ "--lintje-columns": String(this.columns) })}>
       ${this.items.map((e) => this.renderItem(e))}
     </dl>`;
 	}
 };
-t("lintje-description-list", h);
+i("lintje-description-list", h);
 //#endregion
 export { h as LintjeDescriptionList };

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

@@ -0,0 +1 @@
+export * from '../types/components/overlays/dialog/dialog.js'