lintje 0.3.0 → 0.5.0

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

@@ -1,6 +1,7 @@
-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";
+import { Yt as e, Zt as t, en as n, et as r, lt as i, nn as a, s as o, st as s, ut as c } from "../chunks/base-CVKIPSLx.js";
+import { n as l } from "../chunks/input-DEHA2Z_0.js";
+import { t as u } from "../chunks/input-lQTmOMOz.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-DxP9yfDp.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 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) {
@@ -102,7 +103,7 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
 	}
 	renderCalendar() {
 		let e = this.focusDay || this.todayDay, t = v(e).slice(0, 7), r = this.todayDay;
-		return o`<div class="lintje-date-input__calendar">
+		return a`<div class="lintje-date-input__calendar">
       <div class="lintje-date-input__month">
         <button
           type="button"
@@ -134,18 +135,18 @@ 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) => o`<span class="lintje-date-input__weekday" role="columnheader">${e}</span>`)}
+          ${y.map((e) => a`<span class="lintje-date-input__weekday" role="columnheader">${e}</span>`)}
         </div>
-        ${w(e).map((i) => o`<div class="lintje-date-input__row" role="row">
+        ${w(e).map((i) => a`<div class="lintje-date-input__row" role="row">
             ${i.map((i) => {
-			if (!i.startsWith(t)) return o`<span class="lintje-date-input__blank" role="gridcell"></span>`;
-			let a = !!this.outOfBounds(i);
-			return o`<button
+			if (!i.startsWith(t)) return a`<span class="lintje-date-input__blank" role="gridcell"></span>`;
+			let o = !!this.outOfBounds(i);
+			return a`<button
                 type="button"
                 role="gridcell"
                 class=${s({
 				"lintje-date-input__day": !0,
-				"is-blocked": a,
+				"is-blocked": o,
 				"is-today": i === r,
 				"is-selected": i === this.value
 			})}
@@ -153,7 +154,7 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
                 aria-label=${b(i)}
                 aria-selected=${i === this.value ? "true" : "false"}
                 aria-current=${i === r ? "date" : n}
-                aria-disabled=${a ? "true" : n}
+                aria-disabled=${o ? "true" : n}
                 @click=${() => this.pick(i)}
               >
                 ${Number(i.slice(8))}
@@ -165,7 +166,7 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
 	}
 	render() {
 		let e = this.message;
-		return o`<div class="lintje-field" @focusout=${this.onFocusOut}>
+		return a`<div class="lintje-field" @focusout=${this.onFocusOut}>
       ${this.renderLabel(this.controlId)}
       <div class="lintje-date-input">
         <input
@@ -177,7 +178,7 @@ var T = "/* The date input: a text field with a calendar button, and the calenda
 			"lintje-date-input__control": !0,
 			"is-error": !!e
 		})}
-          .value=${a(this.text)}
+          .value=${o(this.text)}
           placeholder=${this.placeholder || n}
           aria-labelledby=${this.labelId}
           aria-describedby=${this.describedBy}

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

@@ -1,7 +1,8 @@
-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";
+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-CVKIPSLx.js";
+import "../chunks/focus-trap-rje9Oz19.js";
+import { n as u } from "../chunks/input-DEHA2Z_0.js";
+import { t as d } from "../chunks/input-lQTmOMOz.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-DxP9yfDp.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 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",

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

@@ -1,4 +1,4 @@
-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";
+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-CVKIPSLx.js";
 //#region src/components/tables/description-list/description-list.css?inline
 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) {

package/dist-elements/tag/dialog.js

@@ -1,8 +1,8 @@
-import { Gt as e, Jt as t, Kt as n, Yt as r, Zt as i, en as a, lt as o, nn as s, ut as c } from "../chunks/base-CbmWxUig.js";
-import { n as l, r as u } from "../chunks/focus-trap-BwOxE5BX.js";
+import { Gt as e, Jt as t, Kt as n, Yt as r, Zt as i, en as a, lt as o, nn as s, ut as c } from "../chunks/base-CVKIPSLx.js";
+import { n as l, r as u } from "../chunks/focus-trap-rje9Oz19.js";
 import { t as d } from "../chunks/dialog-close-u75fVEw4.js";
-import { n as f, t as p } from "../chunks/controls-DxmnDSBr.js";
-import { t as m } from "../chunks/dialog-DChINFxD.js";
+import { n as f, t as p } from "../chunks/controls-_4ac1Lpz.js";
+import { t as m } from "../chunks/dialog-D4V467iC.js";
 //#region src/components/overlays/dialog/dialog.css?inline
 var h = "/* `display: contents` keeps the host out of its parent's flex or grid layout. */\n:host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Covers the whole viewport, above the shell's menu (z-index 30). */\n.lintje-dialog__scrim {\n  position: fixed;\n  z-index: 80;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-6);\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n.lintje-dialog {\n  width: min(440px, 100%);\n  max-height: 100%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: var(--space-6);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-strong);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-modal) var(--ease-in-motion);\n}\n:host([wide]) .lintje-dialog { width: min(calc(15 * var(--space-10)), 100%); }\n/* The window takes focus only in an alert or when the trap pulls stray focus back; no ring. */\n.lintje-dialog:focus { outline: none; }\n\n.lintje-dialog__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n}\n.lintje-dialog__heading { font: var(--text-h2); }\n/* The close button reaches into the padding, so it does not make the heading's line taller. */\n.lintje-dialog__close { margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0; }\n.lintje-dialog__close:hover { color: var(--color-text-primary); }\n\n/* A long form scrolls here; the padding keeps a field's focus ring inside the scroll box. */\n.lintje-dialog__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  margin: calc(var(--focus-width) * -1) calc(var(--space-6) * -1);\n  padding: var(--focus-width) var(--space-6);\n  font: var(--text-body);\n}\n\n.lintje-dialog__footer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  margin-top: var(--space-3);\n}\n.lintje-dialog__footer[hidden] { display: none; }\n.lintje-dialog__note { font: var(--text-ui); }\n.lintje-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-left: auto;\n}\n\n/* Phone: the buttons stack, the last (the answer) on top and the safe one at the bottom. */\n@media screen and (max-width: 767px) {\n  .lintje-dialog__scrim { padding: var(--space-4); }\n  .lintje-dialog { width: 100%; }\n  .lintje-dialog__footer { flex-direction: column; align-items: stretch; }\n  .lintje-dialog__actions { flex-direction: column-reverse; margin-left: 0; }\n}\n", g = "input:not([type=\"hidden\"], [type=\"checkbox\"], [type=\"radio\"]), select, textarea, [contenteditable]";
 function _(e) {

package/dist-elements/tag/document-viewer.js

@@ -1,4 +1,4 @@
-import { Jt as e, L as t, Yt as n, Zt as r, bt as i, en as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, L as t, Yt as n, Zt as r, bt as i, en as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CVKIPSLx.js";
 import "./empty-state.js";
 //#region src/components/content/document-viewer/document-viewer.css?inline
 var u = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-document-viewer {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n\n.lintje-document-viewer__toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2) var(--space-4);\n  padding: var(--space-1) var(--space-3);\n  border-bottom: 1px solid var(--color-border-default);\n  font: var(--text-ui);\n}\n.lintje-document-viewer__name {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-weight: 700;\n}\n.lintje-document-viewer__group { display: flex; align-items: center; gap: var(--space-1); }\n.lintje-document-viewer__button { height: var(--h-button); min-width: var(--h-button); }\n.lintje-document-viewer__figure { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.lintje-document-viewer__zoom { min-width: 7ch; text-align: center; }\n\n.lintje-document-viewer__view {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--space-6);\n  background: var(--color-bg-subtle);\n  touch-action: pan-x pan-y pinch-zoom;\n}\n\n/* Auto margins centre the page; a wider page scrolls to its left edge instead of being cut. */\n.lintje-document-viewer__page {\n  margin: 0 auto;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-document-viewer__page.is-fit { width: 100%; }\n.lintje-document-viewer__page.is-loading {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n}\n.lintje-document-viewer__image { display: block; width: 100%; height: auto; }\n\n.lintje-document-viewer__skeleton {\n  display: block;\n  width: 100%;\n  max-width: 420px;\n  margin: 0 auto;\n  aspect-ratio: 210 / 297;\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-document-viewer__name { flex-basis: 100%; }\n  .lintje-document-viewer__view { padding: var(--space-2) 0; }\n}\n", d = 50, f = 400, p = 25;

package/dist-elements/tag/drawer.js

@@ -1,7 +1,7 @@
-import { Jt as e, Yt as t, Zt as n, en as r, lt as i, nn as a, ut as o } from "../chunks/base-CbmWxUig.js";
-import { r as s } from "../chunks/focus-trap-BwOxE5BX.js";
+import { Jt as e, Yt as t, Zt as n, en as r, lt as i, nn as a, ut as o } from "../chunks/base-CVKIPSLx.js";
+import { r as s } from "../chunks/focus-trap-rje9Oz19.js";
 import { t as c } from "../chunks/dialog-close-u75fVEw4.js";
-import { t as l } from "../chunks/dialog-DChINFxD.js";
+import { t as l } from "../chunks/dialog-D4V467iC.js";
 //#region src/components/overlays/drawer/drawer.css?inline
 var u = ":host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The modal's z-index: above the shell's menu. */\n.lintje-drawer__scrim {\n  position: fixed; inset: 0; z-index: 80;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n.lintje-drawer {\n  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;\n  width: min(480px, 100vw);\n  display: flex; flex-direction: column;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border-left: 1px solid var(--color-border-strong);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-drawer-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-drawer:focus { outline: none; }\n\n.lintje-drawer__header {\n  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);\n  padding: var(--space-5) var(--space-6);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-drawer__heading { min-width: 0; }\n.lintje-drawer__title { font: var(--text-h2); }\n.lintje-drawer__subtitle { font: var(--text-small); color: var(--color-text-muted); margin-top: var(--space-1); }\n/* No hover while the close button is unavailable. */\n.lintje-drawer__close:not([aria-disabled='true']):hover { color: var(--color-text-primary); }\n\n.lintje-drawer__body {\n  flex: 1; min-height: 0; overflow-y: auto;\n  padding: var(--space-5) var(--space-6);\n  display: flex; flex-direction: column; gap: var(--space-4);\n}\n\n.lintje-drawer__footer {\n  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2);\n  padding: var(--space-3) var(--space-6);\n  border-top: 1px solid var(--color-border-default);\n}\n\n/* A keyframe only works in the root that uses it. */\n@keyframes lintje-drawer-in {\n  from { transform: translateX(100%); }\n  to   { transform: none; }\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-drawer {\n    inset: 0;\n    width: 100%;\n    border-left: 0;\n    animation-name: lintje-sheet-in;\n  }\n  .lintje-drawer__header,\n  .lintje-drawer__body,\n  .lintje-drawer__footer { padding-left: var(--space-4); padding-right: var(--space-4); }\n}\n", d = "input:not([type=\"hidden\"]), select, textarea", f = "Zijpaneel", p = class extends e {
 	constructor(...e) {

package/dist-elements/tag/empty-state.js

@@ -1,4 +1,4 @@
-import { E as e, Jt as t, T as n, Yt as r, Zt as i, lt as a, nn as o } from "../chunks/base-CbmWxUig.js";
+import { E as e, Jt as t, T as n, Yt as r, Zt as i, lt as a, nn as o } from "../chunks/base-CVKIPSLx.js";
 //#region src/components/feedback/empty-state/empty-state.css?inline
 var s = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n", c = class extends t {
 	constructor(...e) {

package/dist-elements/tag/error-page.js

@@ -1,4 +1,4 @@
-import { H as e, Jt as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-CbmWxUig.js";
+import { H as e, Jt as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-CVKIPSLx.js";
 import "./copy-button.js";
 import "./description-list.js";
 //#region src/components/feedback/error-page/error-page.css?inline

package/dist-elements/tag/error-summary.js

@@ -1,5 +1,5 @@
-import { Jt as e, Yt as t, Zt as n, en as r, lt as i, nn as a, ut as o } from "../chunks/base-CbmWxUig.js";
-import { c as s, i as c, o as l } from "../chunks/controls-DxmnDSBr.js";
+import { Jt as e, Yt as t, Zt as n, en as r, lt as i, nn as a, ut as o } from "../chunks/base-CVKIPSLx.js";
+import { c as s, i as c, o as l } from "../chunks/controls-_4ac1Lpz.js";
 //#region src/components/forms/error-summary/error-summary.css?inline
 var u = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The frame takes the focus after a failed attempt and keeps its own red under the ring. */\n.lintje-error-summary {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 2px solid var(--color-error);\n  border-radius: var(--radius);\n}\n.lintje-error-summary__icon {\n  flex: none;\n  margin-top: 2px;\n  color: var(--color-error);\n}\n.lintje-error-summary__body { min-width: 0; }\n.lintje-error-summary__heading {\n  margin: 0 0 var(--space-1);\n  font: var(--text-tile-title);\n}\n\n.lintje-error-summary__list {\n  margin: 0;\n  padding-left: var(--space-5);\n  list-style: disc;\n  font: var(--text-ui);\n}\n.lintje-error-summary__link {\n  color: var(--color-link);\n  text-decoration: underline;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-error-summary__link:hover { color: var(--color-link-hover); }\n\n.lintje-error-summary__message {\n  margin: 0;\n  font: var(--text-ui);\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-error-summary { padding: var(--space-3) var(--space-4); }\n}\n";
 //#endregion

package/dist-elements/tag/expander.js

@@ -1,5 +1,5 @@
-import { P as e, Yt as t, Zt as n, lt as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
-import { i as o, n as s, r as c, t as l } from "../chunks/disclosure-DLkXPUpV.js";
+import { P as e, Yt as t, Zt as n, lt as r, nn as i, st as a } from "../chunks/base-CVKIPSLx.js";
+import { i as o, n as s, r as c, t as l } from "../chunks/disclosure-DVex7Lo_.js";
 import { t as u } from "../chunks/disclosure-D39vAR5q.js";
 //#region src/components/layout/expander/expander.ts
 var d = class extends e {

package/dist-elements/tag/explainer.js

@@ -1,5 +1,5 @@
-import { F as e, P as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s } from "../chunks/base-CbmWxUig.js";
-import { i as c, n as l, r as u, t as d } from "../chunks/disclosure-DLkXPUpV.js";
+import { F as e, P as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s } from "../chunks/base-CVKIPSLx.js";
+import { i as c, n as l, r as u, t as d } from "../chunks/disclosure-DVex7Lo_.js";
 import { t as f } from "../chunks/disclosure-D39vAR5q.js";
 //#region src/components/charts/explainer/explainer.css?inline
 var p = "/* The disclosure itself is `shared/disclosure.css`, adopted next to this sheet (rule 2). */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n@media print { :host { break-inside: avoid; } }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-explainer {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n.lintje-explainer__list {\n  display: grid;\n  grid-template-columns: minmax(0, max-content) minmax(0, 72ch);\n  column-gap: var(--space-5);\n  row-gap: var(--space-3);\n  font: var(--text-body);\n}\n.lintje-explainer__term { grid-column: 1; font-weight: 700; color: var(--color-text-primary); }\n.lintje-explainer__description { grid-column: 2; margin: 0; color: var(--color-text-secondary); }\n\n@media screen and (max-width: 767px) {\n  .lintje-explainer__list { display: block; }\n  .lintje-explainer__description { margin-top: 2px; }\n  .lintje-explainer__description + .lintje-explainer__term { margin-top: var(--space-3); }\n}\n", m = class extends t {

package/dist-elements/tag/field.js

@@ -1,4 +1,4 @@
-import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CVKIPSLx.js";
 //#region src/components/inputs/field/field.css?inline
 var o = "/* `min-width: 0`, or a grid item overflows. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n:host([stacked]) { width: 100%; --h-control: var(--h-touch); }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.lintje-filter-field__label {\n  display: flex; align-items: center; gap: 6px;\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n.lintje-filter-field__label.is-modified { color: var(--color-accent-text); }\n.lintje-filter-field__dot {\n  width: 6px; height: 6px; border-radius: 50%;\n  background: var(--color-attention);\n  flex: none;\n}\n\n:host([stacked]) .lintje-filter-field { gap: var(--space-2); }\n\n/* Forced colours drop the label colour; the dot keeps its drawing in CanvasText. */\n@media (forced-colors: active) {\n  .lintje-filter-field__dot { forced-color-adjust: none; background: CanvasText; }\n}\n";
 //#endregion

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

@@ -1,6 +1,7 @@
-import { Gt as e, Kt as t, Q as n, Yt as r, Zt as i, en as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CbmWxUig.js";
-import { n as u } from "../chunks/focus-trap-BwOxE5BX.js";
-import { r as d, t as f } from "../chunks/input-CRW_exv_.js";
+import { Gt as e, Kt as t, Q as n, Yt as r, Zt as i, en as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CVKIPSLx.js";
+import { n as u } from "../chunks/focus-trap-rje9Oz19.js";
+import { n as d } from "../chunks/input-DEHA2Z_0.js";
+import { t as f } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/file-upload/file-upload.css?inline
 var p = "/* The drop zone and the list of files under it. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n:host([fill]) { height: 100%; }\n:host([fill]) .lintje-field { height: 100%; }\n\n/* --- */\n\n/* The zone itself does not answer the pointer: only the button does. Its content stands centred,\n   so a wide zone does not leave it huddled in one corner. */\n.lintje-file-upload {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\n  gap: var(--space-2) var(--space-3);\n  padding: var(--space-6) var(--space-4);\n  border: 2px dashed var(--color-border-heavy);\n  background: var(--color-bg-page);\n  color: var(--color-text-primary);\n  font: var(--text-ui);\n  text-align: center;\n}\n.lintje-file-upload__icon { flex: none; }\n.lintje-file-upload--fill {\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  min-height: calc(4 * var(--h-control));\n  text-align: center;\n}\n.lintje-file-upload--fill .lintje-file-upload__meta { flex-basis: auto; }\n.lintje-file-upload__meta {\n  flex-basis: 100%;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n\n.lintje-file-upload.is-dragging {\n  border-style: solid;\n  border-color: var(--color-accent-line);\n  background: var(--color-bg-selected);\n}\n.lintje-file-upload.is-error { border-style: solid; border-color: var(--color-error); }\n.lintje-file-upload.is-disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n}\n.lintje-file-upload.is-disabled .lintje-file-upload__meta { color: var(--color-text-disabled); }\n\n/* --- The files ----------------------------------------------------------- */\n.lintje-file-upload__list { display: flex; flex-direction: column; gap: var(--space-3); }\n.lintje-file-upload__row { display: flex; flex-direction: column; gap: 6px; }\n.lintje-file-upload__row-head {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-3);\n}\n.lintje-file-upload__row-icon { flex: none; }\n.lintje-file-upload__row.is-busy .lintje-file-upload__row-icon { color: var(--color-text-muted); }\n.lintje-file-upload__row.is-done .lintje-file-upload__row-icon { color: var(--color-success); }\n.lintje-file-upload__row.is-error .lintje-file-upload__row-icon { color: var(--color-error); }\n.lintje-file-upload__name {\n  flex: 1 1 120px; min-width: 0;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  overflow-wrap: anywhere;\n}\n.lintje-file-upload__detail { color: var(--color-text-muted); }\n.lintje-file-upload__reason {\n  display: block;\n  font: var(--text-meta);\n  font-weight: 700;\n  color: var(--color-error-text);\n}\n\n/* Below 768 px nobody drags: the words go and the button takes the full width. */\n@media screen and (max-width: 767px) {\n  .lintje-file-upload__text { display: none; }\n  .lintje-file-upload.is-dragging .lintje-file-upload__text { display: inline; }\n  .lintje-file-upload__button { flex: 1 1 100%; --h-button: var(--h-touch); }\n}\n", m = new Intl.NumberFormat("nl-NL", { maximumFractionDigits: 1 });
 function h(e) {

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

@@ -1,14 +1,14 @@
-import { Ft as e, Gt as t, Jt as n, Kt as r, Lt as i, Pt as a, Rt as o, Yt as s, Zt as c, en as l, nn as u } from "../chunks/base-CbmWxUig.js";
+import { Ft as e, Gt as t, Jt as n, Kt as r, Lt as i, Pt as a, Rt as o, Yt as s, Zt as c, en as l, nn as u } from "../chunks/base-CVKIPSLx.js";
 import "./segmented.js";
+import "./select.js";
 import "./text-input.js";
 import "./field.js";
 import "./number-input.js";
-import "./select.js";
 import "./multiselect.js";
 import "./toggle.js";
 import "./range.js";
 import "./date-range.js";
-import { n as d } from "../chunks/sentence-B19AyZBS.js";
+import { n as d } from "../chunks/sentence-mY0Iqu5H.js";
 import "./filter-zone.js";
 import "./filter-sheet.js";
 //#region src/components/filters/shared/filter-layout.css?inline

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

@@ -1,7 +1,7 @@
-import { Ht as e, Jt as t, Vt as n, Yt as r, Zt as i, en as a, lt as o, nn as s, ut as c } from "../chunks/base-CbmWxUig.js";
-import { t as l } from "../chunks/focus-trap-BwOxE5BX.js";
+import { Ht as e, Jt as t, Vt as n, Yt as r, Zt as i, en as a, lt as o, nn as s, ut as c } from "../chunks/base-CVKIPSLx.js";
+import { t as l } from "../chunks/focus-trap-rje9Oz19.js";
 import { t as u } from "../chunks/dialog-close-u75fVEw4.js";
-import { t as d } from "../chunks/sentence-B19AyZBS.js";
+import { t as d } from "../chunks/sentence-mY0Iqu5H.js";
 //#region src/components/filters/filter-sheet/filter-sheet.css?inline
 var f = "/* The filter sheet's own box. Control sizes are set in `filter-layout.css`. */\n:host {\n  display: block;\n}\n\n/* --- */\n\n.lintje-filter-sheet__scrim {\n  position: fixed; inset: 0; z-index: 60;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n.lintje-filter-sheet {\n  position: fixed;\n  inset: auto 0 0 0;\n  z-index: 61;\n  max-height: 88vh;\n  display: flex;\n  flex-direction: column;\n  background: var(--color-bg-filter);\n  border-top: 1px solid var(--color-border-filter);\n  animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-filter-sheet:focus { outline: none; }\n\n.lintje-filter-sheet__header {\n  display: flex; align-items: center; gap: var(--space-2);\n  padding: var(--space-4);\n  border-bottom: 1px solid var(--color-border-filter);\n}\n.lintje-filter-sheet__title { font: var(--text-h2); }\n.lintje-filter-sheet__hint { font: var(--text-small); color: var(--color-text-muted); flex: 1; }\n\n.lintje-filter-sheet__body {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--space-4);\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n}\n\n.lintje-filter-sheet__summary {\n  display: flex; align-items: flex-start; gap: var(--space-2);\n  font: var(--text-ui); line-height: 1.4;\n  padding-top: var(--space-2);\n  border-top: 1px solid var(--color-border-filter);\n}\n\n.lintje-filter-sheet__footer {\n  display: flex; gap: var(--space-3);\n  padding: var(--space-4);\n  border-top: 1px solid var(--color-border-filter);\n  background: var(--color-bg-surface);\n}\n/* The <button> reading the height is in the `lintje-button` shadow root: set the token here. */\n.lintje-filter-sheet__action { flex: 1; height: var(--h-touch); --h-button: var(--h-touch); }\n", p = class extends t {
 	constructor(...e) {

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

@@ -1,5 +1,5 @@
-import { Gt as e, I as t, Jt as n, Kt as r, Q as i, Ut as a, Yt as o, Zt as s, en as c, lt as l, nn as u, st as d, ut as f } from "../chunks/base-CbmWxUig.js";
-import { t as p } from "../chunks/sentence-B19AyZBS.js";
+import { Gt as e, I as t, Jt as n, Kt as r, Q as i, Ut as a, Yt as o, Zt as s, en as c, lt as l, nn as u, st as d, ut as f } from "../chunks/base-CVKIPSLx.js";
+import { t as p } from "../chunks/sentence-mY0Iqu5H.js";
 function m(e) {
 	return e.open;
 }

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

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

package/dist-elements/tag/find.js

@@ -0,0 +1,132 @@
+import { Yt as e, Zt as t, en as n, f as r, lt as i, nn as a, st as o, ut as s } from "../chunks/base-CVKIPSLx.js";
+import { n as c } from "../chunks/input-DEHA2Z_0.js";
+import { t as l } from "../chunks/debounce-JXnLMCcF.js";
+//#region src/components/inputs/find/find.css?inline
+var u = "/* One box: the count and the buttons appear inside it, so typing moves nothing around it. */\n:host {\n  display: block;\n  min-width: 0;\n  width: calc(10 * var(--space-10));\n  max-width: 100%;\n}\n:host([hidden]) { display: none; }\n@media screen and (max-width: 767px) {\n  :host { width: 100%; }\n}\n\n/* --- */\n\n.lintje-find {\n  position: relative;\n  display: flex; align-items: center;\n  height: var(--h-control);\n  border: 1px solid var(--color-border-field);\n  border-radius: var(--radius);\n  background: var(--color-bg-surface);\n}\n/* The ring goes round the whole box, not round the input inside it. */\n.lintje-find:has(.lintje-find__control:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-find.is-disabled {\n  border-color: var(--color-border-strong);\n  background: var(--color-bg-subtle);\n}\n.lintje-find__icon {\n  position: absolute; left: var(--space-3);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n.lintje-find.is-disabled .lintje-find__icon { color: var(--color-text-disabled); }\n.lintje-find__control {\n  flex: 1; min-width: 0;\n  height: 100%;\n  padding: 0 var(--space-2) 0 var(--space-10);\n  border: 0;\n  background: transparent;\n  color: var(--color-text-primary);\n  font: var(--text-ui);\n}\n.lintje-find__control:focus-visible { outline: none; }\n.lintje-find__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-find__control:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-find__control:disabled::placeholder { color: var(--color-text-disabled); }\n.lintje-find__control::-webkit-search-cancel-button,\n.lintje-find__control::-webkit-search-decoration { appearance: none; }\n.lintje-find__count {\n  display: inline-flex; align-items: center; gap: var(--space-2);\n  flex: none;\n  padding: 0 var(--space-2);\n  font: var(--text-meta);\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-muted);\n  white-space: nowrap;\n}\n.lintje-find__divider {\n  flex: none;\n  width: 1px; height: var(--space-6);\n  background: var(--color-border-default);\n}\n.lintje-find__button {\n  display: flex; align-items: center; justify-content: center;\n  flex: none;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  color: var(--color-link);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-find__button:last-child { margin-right: var(--space-1); }\n.lintje-find__button:hover:not([aria-disabled='true']) { background: var(--color-bg-subtle); }\n.lintje-find__button:focus-visible { outline-offset: calc(var(--focus-width) * -1); }\n.lintje-find__button[aria-disabled='true'] { color: var(--color-text-disabled); cursor: not-allowed; }\n", d = "lintje-find-count", f = class extends c {
+	static {
+		this.styles = [i, t(u)];
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			placeholder: { type: String },
+			total: { type: Number },
+			current: { type: Number },
+			busy: {
+				type: Boolean,
+				reflect: !0
+			},
+			message: { state: !0 }
+		};
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	constructor() {
+		super(), this.value = "", this.placeholder = "", this.total = null, this.current = 0, this.busy = !1, this.message = "", this.typing = new l(this), this.#e = "", this.#t = !1, this.#n = !1, this.#r = 0, this.#i = 0, this.keepTyping = (e) => {
+			this.renderRoot.activeElement?.id === this.controlId && e.preventDefault();
+		}, this.holdFocus = (e) => {
+			this.renderRoot.activeElement || e.currentTarget.focus();
+		}, this.label = "Zoeken in de tekst";
+	}
+	get navigable() {
+		return this.value !== "" && !this.busy && !this.disabled && (this.total ?? 0) > 0;
+	}
+	get countText() {
+		return this.busy ? "Zoeken…" : this.total === null ? "" : this.total === 0 ? "Geen treffers" : this.current > 0 ? `${r(this.current)} van ${r(this.total)}` : this.total === 1 ? "1 treffer" : `${r(this.total)} treffers`;
+	}
+	willUpdate(e) {
+		super.willUpdate(e), e.has("value") && !this.#t && (this.#e = this.value), this.#t = !1;
+	}
+	updated(e) {
+		if (super.updated(e), this.busy || this.value === "" || this.total === null) return;
+		if (this.#n) {
+			this.#n = !1, this.#r = 0, this.say(this.total === 0 ? "Geen treffers" : this.countText);
+			return;
+		}
+		if (!this.#r || !e.has("current") || this.current < 1) return;
+		let t = e.get("current"), n = `${r(this.current)} van ${r(this.total)}`, i = this.#r > 0 ? t === this.total && this.current === 1 : t === 1 && this.current === this.total;
+		this.#r = 0, i ? this.say(`Terug bij de ${this.current === 1 ? "eerste" : "laatste"} treffer, ${n}`) : this.say(n);
+	}
+	disconnectedCallback() {
+		cancelAnimationFrame(this.#i), super.disconnectedCallback();
+	}
+	say(e) {
+		cancelAnimationFrame(this.#i), this.message = "", this.#i = requestAnimationFrame(() => this.message = e);
+	}
+	send(e) {
+		e !== this.#e && (this.#e = e, this.#n = e !== "", this.commit(e));
+	}
+	onInput(e) {
+		this.#t = !0, this.value = e.target.value, this.typing.schedule(() => this.send(this.value));
+	}
+	onKeydown(e) {
+		e.key === "Enter" && (e.preventDefault(), this.typing.pending ? this.typing.flush() : this.step(e.shiftKey ? -1 : 1)), e.key === "Escape" && this.value !== "" && (e.preventDefault(), e.stopPropagation(), this.clear());
+	}
+	step(e) {
+		this.navigable && (this.#r = e, this.emit("lintje-find-step", e));
+	}
+	clear() {
+		this.disabled || (this.typing.cancel(), this.value = "", this.message = "", this.send(""), this.focusControl());
+	}
+	renderButton(e, t, r, i, o) {
+		return a`<button
+      type="button"
+      class="lintje-find__button lintje-find__button--${o}"
+      title=${e}
+      aria-label=${e}
+      aria-disabled=${t ? n : "true"}
+      @mousedown=${this.keepTyping}
+      @click=${(e) => {
+			this.holdFocus(e), t && r();
+		}}
+    >
+      ${i}
+    </button>`;
+	}
+	render() {
+		let e = this.value !== "", t = this.navigable;
+		return a`<div
+        class=${o({
+			"lintje-find": !0,
+			"is-disabled": this.disabled
+		})}
+        role="search"
+      >
+        <label id=${this.labelId} for=${this.controlId} class="visually-hidden">${this.label}</label>
+        ${s("functioneel-zoek", {
+			size: 18,
+			className: "lintje-find__icon"
+		})}
+        <input
+          type="search"
+          id=${this.controlId}
+          class="lintje-find__control"
+          .value=${this.value}
+          placeholder=${this.placeholder || this.label}
+          enterkeyhint="search"
+          autocomplete="off"
+          aria-describedby=${e ? d : n}
+          ?disabled=${this.disabled}
+          @input=${this.onInput}
+          @keydown=${this.onKeydown}
+        />
+        ${e ? a`<span id=${d} class="lintje-find__count"
+                >${this.busy ? a`<lintje-spinner size="16"></lintje-spinner>` : n}${this.countText}</span
+              >
+              <span class="lintje-find__divider" aria-hidden="true"></span>
+              ${this.renderButton("Vorige treffer", t, () => this.step(-1), s("functioneel-delta-omlaag", {
+			size: 16,
+			rotate: 180
+		}), "previous")}
+              ${this.renderButton("Volgende treffer", t, () => this.step(1), s("functioneel-delta-omlaag", { size: 16 }), "next")}
+              ${this.renderButton("Zoektekst wissen", !this.disabled, () => this.clear(), s("functioneel-kruis", { size: 16 }), "clear")}` : n}
+      </div>
+      <p class="visually-hidden" role="status">${this.message}</p>`;
+	}
+};
+e("lintje-find", f);
+//#endregion
+export { f as LintjeFind };

package/dist-elements/tag/footer.js

@@ -1,4 +1,4 @@
-import { H as e, Jt as t, Yt as n, Zt as r, en as i, nn as a, nt as o } from "../chunks/base-CbmWxUig.js";
+import { H as e, Jt as t, Yt as n, Zt as r, en as i, nn as a, nt as o } from "../chunks/base-CVKIPSLx.js";
 //#region src/components/frame/footer/footer.css?inline
 var s = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-footer {\n  background: var(--color-footer-bg);\n  color: var(--color-footer-text);\n  font: var(--text-ui);\n}\n.lintje-footer :focus-visible { outline-color: var(--color-footer-focus); }\n\n/* The text keeps to the content column, as the bars above the page do. */\n.lintje-footer__inner {\n  display: flex; flex-direction: column;\n  gap: var(--space-8);\n  padding: var(--space-10) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-8);\n}\n\n.lintje-footer__tagline { margin: 0; font: var(--text-h2); }\n\n.lintje-footer__columns {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--w-footer-column)), 1fr));\n  gap: var(--space-8) var(--grid-gutter);\n}\n.lintje-footer__column { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n.lintje-footer__heading {\n  margin: 0;\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n}\n.lintje-footer__list,\n.lintje-footer__meta { list-style: none; margin: 0; padding: 0; }\n.lintje-footer__list { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.lintje-footer__link,\n.lintje-footer__meta-link {\n  display: inline-flex; align-items: center;\n  min-height: var(--h-touch);\n  color: inherit;\n  text-decoration: none;\n}\n/* A list of text links keeps the house style's rhythm: a line high, 12 px apart. */\n.lintje-footer__link { min-height: var(--h-target-text); }\n.lintje-footer__link:hover,\n.lintje-footer__meta-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }\n\n/* The links every page carries, apart from the columns by a line. */\n.lintje-footer__bottom {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;\n  gap: var(--space-2) var(--space-6);\n  padding-top: var(--space-4);\n  border-top: 1px solid var(--color-footer-line);\n}\n.lintje-footer__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }\n.lintje-footer__meta-link { font: var(--text-small); }\n/* The full text colour: a muted one would fall under 4.5:1 on the theme's fill. */\n.lintje-footer__note { margin: 0; font: var(--text-small); }\n\n@media screen and (max-width: 767px) {\n  .lintje-footer__inner { padding-top: var(--space-8); }\n  .lintje-footer__columns { grid-template-columns: minmax(0, 1fr); }\n}\n", c = class extends t {
 	static {

package/dist-elements/tag/form-actions.js

@@ -1,5 +1,5 @@
-import { Gt as e, Jt as t, Kt as n, Ut as r, Yt as i, Zt as a, en as o, lt as s, nn as c, nt as l, ut as u } from "../chunks/base-CbmWxUig.js";
-import { n as d, t as f } from "../chunks/controls-DxmnDSBr.js";
+import { Gt as e, Jt as t, Kt as n, Ut as r, Yt as i, Zt as a, en as o, lt as s, nn as c, nt as l, ut as u } from "../chunks/base-CVKIPSLx.js";
+import { n as d, t as f } from "../chunks/controls-_4ac1Lpz.js";
 //#region src/components/forms/form-actions/form-actions.css?inline
 var p = "/* The host is the sticky box. z-index 20: above the form, below the shell's menu (30) and popovers (46). */\n:host {\n  display: block;\n  min-width: 0;\n  position: sticky;\n  bottom: 0;\n  z-index: 20;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-form-actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3) var(--space-4);\n  padding: var(--space-3) var(--space-6);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-top: 2px solid var(--color-accent-line);\n}\n\n/* The words carry the state; the dot and the check only support it (rule 13). */\n.lintje-form-actions__status {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-width: 0;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-form-actions__dot {\n  flex: none;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--radius-round);\n  background: var(--color-attention);\n}\n.lintje-form-actions__check {\n  flex: none;\n  color: var(--color-success);\n}\n\n.lintje-form-actions__buttons {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-left: auto;\n}\n\n/* Phone: the bar sets `block` on each button, so it fills its row. */\n@media screen and (max-width: 767px) {\n  .lintje-form-actions {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .lintje-form-actions__buttons {\n    flex-direction: column-reverse;\n    margin-left: 0;\n  }\n}\n\n/* Forced colours: the dot is a fill only, which the palette drops; it keeps its drawing. */\n@media (forced-colors: active) {\n  .lintje-form-actions__dot { forced-color-adjust: none; background: CanvasText; }\n}\n", m = "Wijzigingen nog niet opgeslagen", h = "Bezig met opslaan";
 function g(e) {

package/dist-elements/tag/form-section.js

@@ -1,5 +1,5 @@
-import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
-import { a as o, n as s } from "../chunks/controls-DxmnDSBr.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CVKIPSLx.js";
+import { a as o, n as s } from "../chunks/controls-_4ac1Lpz.js";
 //#region src/components/forms/form-section/form-section.css?inline
 var c = "/* Slotted children keep clear of the sticky top bar when the error summary scrolls to them. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n::slotted(*) { scroll-margin-top: var(--h-sticky); }\n\n/* ------------------------------------------------------------------------ */\n\n/* The legend floats at full width so it lays out as a block, not on the fieldset's border. */\n.lintje-form-section {\n  margin: 0;\n  padding: 0;\n  min-width: 0;\n  border: 0;\n}\n.lintje-form-section__legend {\n  float: left;\n  width: 100%;\n  padding: 0;\n  font: var(--text-h2);\n  color: var(--color-text-primary);\n}\n.lintje-form-section__description {\n  clear: both;\n  padding-top: var(--space-2);\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n.lintje-form-section__fields {\n  clear: both;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  padding-top: var(--space-5);\n}\n\n/* Setting rows read as a list: a line between two of them. */\n.lintje-form-section__fields ::slotted([layout='row']:not(:first-child)) {\n  padding-top: var(--space-5);\n  border-top: 1px solid var(--color-border-default);\n}\n\n.lintje-form-section--tile {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--radius);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n.lintje-form-section--tile .lintje-form-section__legend { font: var(--text-tile-title); }\n/* The heading takes the legend's look; it is there for the outline, not to restyle. */\n.lintje-form-section__heading { margin: 0; font: inherit; color: inherit; }\n", l = class extends e {
 	constructor(...e) {

package/dist-elements/tag/form.js

@@ -1,5 +1,5 @@
-import { Gt as e, Jt as t, Kt as n, Q as r, Yt as i, Z as a, Zt as o, en as s, nn as c } from "../chunks/base-CbmWxUig.js";
-import { c as l, d as u, i as d, l as f, n as p, r as m, u as h } from "../chunks/controls-DxmnDSBr.js";
+import { Gt as e, Jt as t, Kt as n, Q as r, Yt as i, Z as a, Zt as o, en as s, nn as c } from "../chunks/base-CVKIPSLx.js";
+import { c as l, d as u, i as d, l as f, n as p, r as m, u as h } from "../chunks/controls-_4ac1Lpz.js";
 import "./error-summary.js";
 import "./form-actions.js";
 //#region src/components/forms/form/form.css?inline

package/dist-elements/tag/gallery.js

@@ -1,4 +1,4 @@
-import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CVKIPSLx.js";
 //#region src/components/content/gallery/gallery.css?inline
 var o = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-gallery { display: flex; flex-direction: column; gap: var(--space-3); }\n\n.lintje-gallery__figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }\n/* A screen whole, on the subtle surface: a screenshot is never cropped. */\n.lintje-gallery__image {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  object-fit: contain;\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  box-sizing: border-box;\n}\n.lintje-gallery__caption { font: var(--text-small); color: var(--color-text-muted); }\n\n.lintje-gallery__thumbs {\n  list-style: none; margin: 0; padding: 0;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--w-gallery-thumb), 1fr));\n  gap: var(--space-2);\n}\n.lintje-gallery__thumb {\n  display: block;\n  width: 100%;\n  padding: 0;\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-subtle);\n  cursor: pointer;\n}\n.lintje-gallery__thumb:hover { border-color: var(--color-border-heavy); }\n/* The chosen one carries the selected edge, and aria-current says it in words. */\n.lintje-gallery__thumb.is-selected { outline: 2px solid var(--color-accent-line); outline-offset: -2px; }\n.lintje-gallery__thumb:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }\n.lintje-gallery__thumb-image {\n  display: block;\n  width: 100%;\n  aspect-ratio: 16 / 10;\n  object-fit: cover;\n  object-position: top left;\n}\n\n@media (forced-colors: active) {\n  .lintje-gallery__thumb.is-selected { outline-color: Highlight; }\n}\n", s = class extends e {
 	constructor(...e) {

package/dist-elements/tag/grid-item.d.ts

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

package/dist-elements/tag/grid-item.js

@@ -1 +1 @@
-export { S as LintjeGridItem } from "../chunks/base-CbmWxUig.js";
+export { S as LintjeGridItem } from "../chunks/base-CVKIPSLx.js";

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

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

package/dist-elements/tag/grid.js

@@ -1 +1 @@
-export { C as LintjeGrid } from "../chunks/base-CbmWxUig.js";
+export { C as LintjeGrid } from "../chunks/base-CVKIPSLx.js";

package/dist-elements/tag/hero.js

@@ -1,4 +1,4 @@
-import { H as e, Jt as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-CbmWxUig.js";
+import { H as e, Jt as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-CVKIPSLx.js";
 //#region src/components/frame/hero/hero.css?inline
 var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The side padding is the content column's, taken of the full width the band stands in. */\n.lintje-hero__band {\n  padding: calc(var(--space-10) + var(--space-4)) calc(var(--page-pad-x) + var(--page-gutter))\n    calc(var(--space-10) + var(--space-2));\n  background: var(--color-hero-bg);\n  color: var(--color-hero-text);\n}\n/* With an aside the text keeps its column and the picture takes the room to its right. */\n.lintje-hero.has-aside .lintje-hero__band {\n  display: flex;\n  align-items: center;\n  gap: var(--space-10);\n}\n.lintje-hero.has-overlap .lintje-hero__band {\n  padding-bottom: calc(var(--space-10) + var(--space-2) + var(--hero-overlap));\n}\n.lintje-hero__band :focus-visible { outline-color: var(--color-hero-focus); }\n\n.lintje-hero__body {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);\n}\n\n.lintje-hero__aside {\n  flex: 0 1 var(--w-hero-aside);\n  min-width: 0;\n  display: flex; justify-content: flex-end;\n}\n.lintje-hero__aside ::slotted(*) { max-width: 100%; }\n/* A picture keeps its proportions when the column narrows it. */\n.lintje-hero__aside ::slotted(img) { height: auto; }\n.lintje-hero:not(.has-aside) .lintje-hero__aside { display: none; }\n\n/* Below 1024 px the text needs the room; the picture only supports it. */\n@media (max-width: 1023px) {\n  .lintje-hero.has-aside .lintje-hero__band { display: block; }\n  .lintje-hero__aside { display: none; }\n  .lintje-hero__panel { margin-top: var(--space-8); }\n}\n\n/* Content beside the text takes the other half from 1024 px; below it, it follows the text. */\n.lintje-hero:not(.has-panel) .lintje-hero__panel { display: none; }\n.lintje-hero__panel { display: flex; flex-direction: column; min-width: 0; }\n.lintje-hero__panel ::slotted(*) { flex: 1 1 auto; }\n.lintje-hero.has-panel .lintje-hero__aside { display: none; }\n@media (min-width: 1024px) {\n  .lintje-hero.has-panel .lintje-hero__band {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    align-items: stretch;\n    gap: var(--space-10);\n  }\n}\n.lintje-hero__heading { display: flex; flex-direction: column; gap: var(--space-3); }\n.lintje-hero__title { margin: 0; font: var(--text-h1-display); }\n.lintje-hero__description {\n  margin: 0;\n  max-width: var(--w-text);\n  font-size: 1.25rem;\n  line-height: 1.4;\n  text-wrap: pretty;\n}\n\n.lintje-hero__action {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  min-height: var(--h-touch);\n  color: inherit;\n  font-weight: 700;\n  text-decoration: underline;\n  text-underline-offset: 0.2em;\n}\n.lintje-hero__action:hover { text-decoration-thickness: 2px; }\n\n/* Pulled up by the room the band keeps for it; without content it takes no space. */\n.lintje-hero__overlap {\n  position: relative;\n  margin-top: calc(-1 * var(--hero-overlap));\n  padding: 0 calc(var(--page-pad-x) + var(--page-gutter));\n}\n.lintje-hero:not(.has-overlap) .lintje-hero__overlap { display: none; }\n\n@media screen and (max-width: 767px) {\n  .lintje-hero__band { padding-top: var(--space-8); padding-bottom: var(--space-8); }\n  .lintje-hero.has-overlap .lintje-hero__band {\n    padding-bottom: calc(var(--space-8) + var(--hero-overlap));\n  }\n  .lintje-hero__title { font: var(--text-h1); }\n  .lintje-hero__description { font-size: 1.125rem; }\n}\n", u = class extends t {
 	constructor(...e) {

package/dist-elements/tag/highlight.js

@@ -1,4 +1,4 @@
-import { Jt as e, Yt as t, Zt as n, nn as r, st as i } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Yt as t, Zt as n, nn as r, st as i } from "../chunks/base-CVKIPSLx.js";
 //#region src/components/content/highlight/highlight.css?inline
 var a = ":host { display: inline; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* `clone`: a marking that wraps paints its fill and line on every line it covers. */\n.lintje-highlight {\n  font: inherit;\n  color: var(--color-text-primary);\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n\n.lintje-highlight--uncertain {\n  background: var(--color-attention-bg);\n  border-bottom: 2px dotted var(--color-attention);\n}\n\n.lintje-highlight--term {\n  background: var(--color-bg-selected);\n  border: 0;\n  border-bottom: 2px solid var(--color-accent-line);\n  padding: 0;\n}\n.lintje-highlight--control { cursor: help; }\n.lintje-highlight--control:hover { background: var(--color-bg-subtle); }\n\n.lintje-highlight--match {\n  background: var(--color-warning);\n  color: var(--color-text-on-light-fill);\n}\n.lintje-highlight--match.is-current { outline: 2px solid var(--color-text-primary); }\n\n.lintje-highlight--removed {\n  background: var(--color-error-bg);\n  text-decoration: line-through;\n}\n.lintje-highlight--added {\n  background: var(--color-success-bg);\n  text-decoration: underline;\n}\n\n/* Forced colours: a match is only a fill, so it takes the system's marking colours. */\n@media (forced-colors: active) {\n  .lintje-highlight--match { forced-color-adjust: none; background: Mark; color: MarkText; }\n  .lintje-highlight--match.is-current { outline-color: CanvasText; }\n}\n", o = {
 	uncertain: "lage zekerheid",

package/dist-elements/tag/icon-button.d.ts

@@ -1 +1 @@
-export * from '../types/primitives/icon-button/icon-button.js'
+export * from '../types/components/actions/icon-button/icon-button.js'

package/dist-elements/tag/icon-button.js

@@ -1 +1 @@
-export { j as LintjeIconButton } from "../chunks/base-CbmWxUig.js";
+export { j as LintjeIconButton } from "../chunks/base-CVKIPSLx.js";

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

@@ -1 +1 @@
-export * from '../types/icons/icon/icon.js'
+export * from '../types/components/actions/icon/icon.js'

package/dist-elements/tag/icon.js

@@ -1 +1 @@
-export { Et as ICONS, b as ICON_NAMES, x as LintjeIcon } from "../chunks/base-CbmWxUig.js";
+export { Et as ICONS, b as ICON_NAMES, x as LintjeIcon } from "../chunks/base-CVKIPSLx.js";

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

@@ -1,4 +1,4 @@
-import { Jt as e, Q as t, X as n, Y as r, Yt as i, Zt as a, en as o, nn as s } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Q as t, X as n, Y as r, Yt as i, Zt as a, en as o, nn as s } from "../chunks/base-CVKIPSLx.js";
 import "./list.js";
 //#region src/components/feedback/job-list/job-list.css?inline
 var c = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The rows are the work list's (`lintje-list`); the job list adds no look of its own. */\n.lintje-job-list { display: block; }\n", l = Object.fromEntries(Object.keys(r).map((e) => [e, {

package/dist-elements/tag/kpi-row.js

@@ -1,4 +1,4 @@
-import { F as e, P as t, Yt as n, Zt as r, bt as i, en as a, nn as o } from "../chunks/base-CbmWxUig.js";
+import { F as e, P as t, Yt as n, Zt as r, bt as i, en as a, nn as o } from "../chunks/base-CVKIPSLx.js";
 import "./kpi.js";
 //#region src/components/charts/kpi-row/kpi-row.css?inline
 var s = "/* The KPIs render in this root, so these rules reach the items directly (no `::slotted()`). */\n:host { display: block; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-grid {\n  display: grid;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  gap: var(--grid-gutter);\n  align-items: stretch;\n  /* A view's held `min-height` is taken by the grid too, so the items fill the held box. */\n  min-height: inherit;\n}\n\n/* Lower bound 768 on purpose: the one-column rule below it has lower specificity. */\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  .lintje-grid > [style*='span 4']  { grid-column: span 6 !important; }\n  .lintje-grid > [style*='span 8']  { grid-column: span 12 !important; }\n}\n/* Grid sets grid-template-columns inline, so only !important beats it. */\n@media screen and (max-width: 767px) {\n  .lintje-grid { grid-template-columns: minmax(0, 1fr) !important; }\n  .lintje-grid > * { grid-column: span 1 !important; }\n}\n\n/* After the fallback rules above, so at equal specificity this wins on source order. */\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  .lintje-grid--kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }\n  .lintje-grid--kpi-row > * { grid-column: span 1 !important; }\n}\n@media screen and (max-width: 767px) {\n  .lintje-grid--kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }\n  .lintje-grid--kpi-row > * { grid-column: span 1 !important; }\n}\n", c = class extends t {