lintje 0.3.0 → 0.4.0

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

@@ -1,4 +1,4 @@
-import { H as e, Jt as t, K as n, L as r, Yt as i, Zt as a, en as o, et as s, lt as c, nn as l, nt as u, rt as d, st as f, ut as p } from "../chunks/base-CbmWxUig.js";
+import { H as e, Jt as t, K as n, L as r, Yt as i, Zt as a, en as o, et as s, lt as c, nn as l, nt as u, rt as d, st as f, ut as p } from "../chunks/base-DRGvkF-r.js";
 //#region src/components/shared/menu.css?inline
 var m = "/* The rows of a menu, in the popover of a menu button, the user menu or a map's select button.\n   The trigger is the owner's. */\n\n.lintje-menu {\n  display: flex; flex-direction: column;\n  min-width: 240px;\n  padding: var(--space-1) 0;\n}\n\n.lintje-menu__row {\n  display: flex; align-items: center; gap: var(--space-2);\n  width: 100%;\n  height: var(--h-control);\n  padding: 0 var(--space-4);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n  text-align: left;\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-menu__row:hover:not(.is-disabled) { background: var(--color-bg-subtle); }\n.lintje-menu__icon { flex: none; }\n.lintje-menu__slot { width: 16px; height: 16px; }\n.lintje-menu__check { color: var(--color-accent-text); }\n/* One of a choice: the form's radio, at the size of the menu's icons. */\n.lintje-menu__radio {\n  box-sizing: border-box;\n  width: 16px; height: 16px;\n  border: 2px solid var(--color-border-choice);\n  border-radius: var(--radius-round);\n  background: var(--color-bg-surface);\n  display: inline-flex; align-items: center; justify-content: center;\n}\n.lintje-menu__radio.is-checked { border-color: var(--color-accent-line); }\n.lintje-menu__radio.is-checked::after {\n  content: '';\n  width: 6px; height: 6px;\n  border-radius: var(--radius-round);\n  background: var(--color-accent);\n}\n@media (forced-colors: active) {\n  .lintje-menu__radio.is-checked::after { forced-color-adjust: none; background: Highlight; }\n}\n.lintje-menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n.lintje-menu__hint {\n  flex: none;\n  margin-left: var(--space-4);\n  font-family: var(--font-mono);\n  font-size: 0.875rem;\n  color: var(--color-text-muted);\n}\n\n.lintje-menu__row.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-menu__row.is-disabled .lintje-menu__hint { color: var(--color-text-disabled); }\n.lintje-menu__row.is-danger { color: var(--color-error-text); font-weight: 700; }\n\n.lintje-menu__separator {\n  height: 1px;\n  margin: var(--space-1) 0;\n  background: var(--color-border-default);\n}\n\n.lintje-menu__tip { display: flex; }\n\n/* The heading stands in line with the labels: the row's padding, the icon and the gap. */\n/* A group's name stands at the menu's edge, over the checks and circles of its rows. */\n.lintje-menu__heading {\n  padding: var(--space-1) var(--space-4);\n  font: var(--text-small);\n  font-weight: 700;\n  color: var(--color-text-muted);\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-menu__row { height: var(--h-touch); }\n}\n", h = "/* The host is the trigger's box, with the busy sentence beside it; the menu is a fixed popover\n   and takes no space. */\n:host {\n  display: inline-flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-3);\n  min-width: 0;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-menu-button__trigger.lintje-button--secondary.is-open { background: var(--color-bg-selected); }\n.lintje-menu-button__trigger.lintje-button--tertiary.is-open { background: var(--color-bg-subtle); }\n.lintje-menu-button__trigger.lintje-icon-button--outlined.is-open { background: var(--color-bg-selected); }\n.lintje-menu-button__trigger.lintje-icon-button--flat.is-open { background: var(--color-bg-subtle); }\n\n\n.lintje-menu-button__trigger.lintje-button { padding-right: var(--space-3); }\n.lintje-menu-button__trigger--flat.lintje-button { padding: 0 var(--space-2); border-color: transparent; }\n/* Split: two halves of one button, the page showing through the 1 px between them. */\n.lintje-menu-button__split { display: inline-flex; gap: 1px; min-width: 0; }\n.lintje-menu-button__split .lintje-menu-button__trigger--split.lintje-button { width: var(--h-button); padding: 0; }\n/* Busy, a split button's ring takes its icon's square: the label stays and nothing moves. */\n.lintje-menu-button__busy {\n  flex: none;\n  width: 16px; height: 16px;\n  margin: 2px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: var(--radius-round);\n  animation: lintje-spin var(--dur-skeleton) linear infinite;\n}\n.lintje-menu-button__split .is-working { cursor: progress; }\n@media (prefers-reduced-motion: reduce) {\n  .lintje-menu-button__busy { animation: none; }\n}\n.lintje-menu-button__trigger.lintje-button--primary.is-open { background: var(--color-action-primary-hover); }\n/* Disabled, like the link button, it only loses its ink. */\n.lintje-menu-button__trigger--flat.lintje-button.is-disabled { background: none; border-color: transparent; }\n\n/* Without a sentence the live region stays in the tree but takes no room, and no gap. */\n.lintje-menu-button__status { position: absolute; }\n.lintje-menu-button__status.is-busy {\n  position: static;\n  display: flex; align-items: center; gap: var(--space-2);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n/* The breadcrumbs' \"…\" sits in a line of text, so it reaches the 48 px target upwards and\n   downwards only, through a transparent hit area. */\n.lintje-menu-button__trigger--ellipsis {\n  position: relative;\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: var(--h-chip-field); height: var(--h-chip-field);\n  padding: 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  color: var(--color-accent-text);\n  font: var(--text-small);\n  font-weight: 700;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-menu-button__trigger--ellipsis::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-menu-button__trigger--ellipsis:hover:not(.is-disabled),\n.lintje-menu-button__trigger--ellipsis.is-open { background: var(--color-bg-selected); }\n.lintje-menu-button__trigger--ellipsis.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n/* Forced colours: the disabled \"…\" is `aria-disabled`, so the browser does not gray it. */\n@media (forced-colors: active) {\n  .lintje-menu-button__trigger--ellipsis.is-disabled { color: GrayText; }\n}\n", g = (e) => e !== "separator" && !("heading" in e), _ = 0;
 function v(e, t, n) {

package/dist-elements/tag/modal.js

@@ -1,6 +1,6 @@
-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 { Jt as e, Yt as t, Zt as n, en as r, lt as i, nn as a, ut as o } from "../chunks/base-DRGvkF-r.js";
 import { t as s } from "../chunks/dialog-close-u75fVEw4.js";
-import { t as c } from "../chunks/dialog-DChINFxD.js";
+import { t as c } from "../chunks/dialog-B7aRBtjy.js";
 //#region src/components/overlays/modal/modal.css?inline
 var l = "/* `display: contents` keeps the host out of its parent's flex or grid layout. */\n:host {\n  display: contents;\n}\n\n/* ------------------------------------------------------------------------ */\n\n/* Covers the whole viewport, above the shell's menu (z-index 30). */\n.lintje-modal__scrim {\n  position: fixed; z-index: 80;\n  inset: 0;\n  background: var(--color-overlay-page);\n  display: flex; align-items: center; justify-content: center;\n  padding: var(--space-6);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n.lintje-modal {\n  width: min(1200px, 100%);\n  height: 100%;\n  max-height: 100%;\n  display: flex; flex-direction: column;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-strong);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-modal) var(--ease-in-motion);\n}\n.lintje-modal:focus { outline: none; }\n\n.lintje-modal__header {\n  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);\n  padding: var(--space-5) var(--space-6);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-modal__title { font: var(--text-h2); }\n.lintje-modal__subtitle { font: var(--text-tile-sub); color: var(--color-text-muted); margin-top: var(--space-1); }\n.lintje-modal__close:hover { color: var(--color-text-primary); }\n\n.lintje-modal__body {\n  flex: 1; min-height: 0; overflow: auto;\n  padding: var(--space-5) var(--space-6);\n  /* LintjeModal sets --chart-h-expanded on this body; a chart reads its own height token. */\n  --chart-h-main: var(--chart-h-expanded);\n  --chart-h-small: var(--chart-h-expanded);\n}\n\n.lintje-modal__footer {\n  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);\n  padding: var(--space-3) var(--space-6);\n  border-top: 1px solid var(--color-border-default);\n  font: var(--text-meta); color: var(--color-text-muted);\n}\n.lintje-modal__actions { display: flex; gap: var(--space-2); }\n.lintje-modal__actions[hidden] { display: none; }\n\n@media screen and (max-width: 767px) {\n  .lintje-modal__scrim { padding: 0; align-items: stretch; }\n  .lintje-modal { max-height: 100%; height: 100%; }\n  .lintje-modal__body { --chart-h-main: 320px; --chart-h-small: 320px; }\n}\n", u = class extends e {
 	constructor(...e) {

package/dist-elements/tag/multiselect.js

@@ -1,6 +1,7 @@
-import { $ as e, Q as t, Yt as n, Zt as r, bt as i, en as a, et as o, lt as s, nn as c, st as l, ut as u } from "../chunks/base-CbmWxUig.js";
-import "../chunks/focus-trap-BwOxE5BX.js";
-import { r as d, t as f } from "../chunks/input-CRW_exv_.js";
+import { $ as e, Q as t, Yt as n, Zt as r, bt as i, en as a, et as o, lt as s, nn as c, st as l, ut as u } from "../chunks/base-DRGvkF-r.js";
+import "../chunks/focus-trap-Dv8zu64A.js";
+import { n as d } from "../chunks/input-BGMLam-O.js";
+import { t as f } from "../chunks/input-lQTmOMOz.js";
 import "./checkbox.js";
 //#region src/components/inputs/multiselect/multiselect.css?inline
 var p = "/* The multi-select's trigger, chips and list. */\n\n/* --- Multi-select --------------------------------------------------------- */\n.lintje-multiselect { position: relative; }\n.lintje-multiselect__field {\n  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;\n  width: 100%; min-height: var(--h-control);\n  padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  text-align: left;\n  overflow: hidden;\n}\n.lintje-multiselect__shown { display: contents; }\n.lintje-multiselect__field.is-error { border: 2px solid var(--color-error); }\n.lintje-multiselect__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-multiselect__summary {\n  flex: 1 1 auto; min-width: 0;\n  padding-left: var(--space-1);\n  font: var(--text-ui);\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.lintje-multiselect__placeholder { color: var(--color-text-placeholder); font-size: 1rem; padding-left: 6px; }\n.lintje-multiselect__chip {\n  display: inline-flex; align-items: center; gap: 6px;\n  height: var(--h-chip-field);\n  padding: 0 0 0 var(--space-2);\n  background: var(--color-bg-subtle);\n  border: 1px solid var(--color-border-default);\n  font-size: 0.875rem; white-space: nowrap;\n  /* The label shortens with an ellipsis, the cross and counter never shrink; the whole\n     selection is in the field's `title`. */\n  flex: 0 1 auto; min-width: 0;\n}\n.lintje-multiselect__chip-label { overflow: hidden; text-overflow: ellipsis; min-width: 2ch; }\n/* A transparent hit area reaches the target height, not sideways: the label opens the list. */\n.lintje-multiselect__chip-remove {\n  position: relative;\n  flex: none;\n  width: var(--space-6); align-self: stretch;\n  display: flex; align-items: center; justify-content: center;\n  cursor: pointer; color: var(--color-text-muted); font-size: 1rem;\n}\n.lintje-multiselect__chip-remove::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((var(--h-chip-field) - var(--h-target)) / 2)) 0;\n}\n.lintje-multiselect__overflow { font-size: 0.875rem; color: var(--color-text-muted); flex: none; }\n.lintje-multiselect__scrim { position: fixed; inset: 0; z-index: 45; }\n/* Fixed to the viewport: an absolute popover is cut off by a scrolling box around it. A column,\n   so the list shrinks when the room is short. */\n.lintje-multiselect__popover {\n  position: fixed; z-index: 46;\n  min-width: 260px;\n  max-height: var(--lintje-multiselect-space, none);\n  display: flex; flex-direction: column;\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-multiselect__search { flex: none; padding: var(--space-2); border-bottom: 1px solid var(--color-border-default); }\n.lintje-multiselect__search-input {\n  width: 100%; height: var(--h-control); padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface); color: var(--color-text-primary); font-size: 1rem;\n}\n.lintje-multiselect__search-input::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-multiselect__list {\n  flex: 1 1 auto; min-height: 0;\n  max-height: 220px; overflow-y: auto;\n  padding: var(--space-2);\n  display: flex; flex-direction: column; gap: 2px;\n}\n/* The `lintje-checkbox` row reads `--h-target` in its shadow root: point it at the option height. */\n.lintje-multiselect__option { --h-target: var(--h-option); }\n.lintje-multiselect__no-results { font: var(--text-small); color: var(--color-text-muted); padding: var(--space-2); }\n.lintje-multiselect__footer {\n  flex: none;\n  display: flex; align-items: center; justify-content: space-between;\n  padding: var(--space-2) 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-multiselect__clear {\n  min-height: var(--h-target);\n  color: var(--color-link); font-weight: 700; text-decoration: underline;\n}\n", m = 4, h = 8, g = 260, _ = 180, v = "lintje-multiselect-value", y = "lintje-multiselect-shown";

package/dist-elements/tag/note.js

@@ -1,4 +1,4 @@
-import { F as e, P as t, Yt as n, Zt as r, en as i, nn as a } from "../chunks/base-CbmWxUig.js";
+import { F as e, P as t, Yt as n, Zt as r, en as i, nn as a } from "../chunks/base-DRGvkF-r.js";
 //#region src/components/charts/note/note.css?inline
 var o = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n@media print { :host { break-inside: avoid; } }\n.lintje-note { height: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-note {\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  display: flex; flex-direction: column; gap: var(--space-2);\n  min-width: 0;\n}\n.lintje-note__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }\n.lintje-note__title { font: var(--text-tile-title); }\n.lintje-note__date { font: var(--text-tile-sub); color: var(--color-text-muted); }\n.lintje-note__text { font: var(--text-small); line-height: 1.55; color: var(--color-text-secondary); }\n.lintje-note__author { font: var(--text-meta); color: var(--color-text-muted); }\n", s = class extends t {
 	static {

package/dist-elements/tag/notifications.js

@@ -1,5 +1,5 @@
-import { Gt as e, H as t, Ht as n, Jt as r, Kt as i, Q as a, Yt as o, Zt as s, en as c, et as l, lt as u, nn as d, q as f, st as p, ut as m } from "../chunks/base-CbmWxUig.js";
-import { t as h } from "../chunks/focus-trap-BwOxE5BX.js";
+import { Gt as e, H as t, Ht as n, Jt as r, Kt as i, Q as a, Yt as o, Zt as s, en as c, et as l, lt as u, nn as d, q as f, st as p, ut as m } from "../chunks/base-DRGvkF-r.js";
+import { t as h } from "../chunks/focus-trap-Dv8zu64A.js";
 import { t as g } from "../chunks/dialog-close-u75fVEw4.js";
 //#region src/components/frame/notifications/notifications.css?inline
 var _ = "/* The host is the bell's box; the panel is fixed and takes no space. */\n:host { display: inline-flex; flex: none; vertical-align: middle; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-notifications__bell {\n  position: relative;\n  display: flex; align-items: center; justify-content: center;\n  width: var(--h-touch); height: var(--lintje-tool-height, var(--h-touch));\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-notifications__bell:hover,\n.lintje-notifications__bell.is-open { background: var(--color-nav-hover); }\n\n/* The counter is placed from the bell's middle, so a bell as high as the bar does not carry it\n   up to the bar's edge. */\n.lintje-notifications__count {\n  position: absolute;\n  top: calc(50% - var(--h-touch) / 2 + var(--space-1)); right: var(--space-1);\n}\n/* The keyed figure is a new element per value, so the rise plays once per change. */\n.lintje-notifications__figure { display: inline-block; }\n.lintje-notifications__figure.is-replaced {\n  animation: lintje-rise var(--dur-badge) var(--ease-in-motion) both;\n}\n\n.lintje-notifications__panel {\n  width: 440px;\n  max-width: 100%;\n  max-height: 480px;\n  overflow-y: auto;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n\n.lintje-notifications__head {\n  display: flex; align-items: center; justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-notifications__heading { font: var(--text-tile-title); }\n/* The link-style button reaches the target height through a hit area above and below only. */\n.lintje-notifications__read {\n  position: relative;\n  min-height: var(--space-6);\n  margin-left: auto;\n  color: var(--color-link);\n  font-size: 0.875rem; font-weight: 700;\n  text-decoration: underline;\n}\n.lintje-notifications__read::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-notifications__read:hover { color: var(--color-link-hover); }\n\n.lintje-notifications__list { margin: 0; padding: 0; list-style: none; }\n.lintje-notifications__item {\n  display: flex; gap: var(--space-3);\n  padding: var(--space-3) var(--space-4);\n  border-bottom: 1px solid var(--color-border-default);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-notifications__item:last-child { border-bottom: 0; }\n.lintje-notifications__item.is-unread { background: var(--color-bg-selected); }\n.lintje-notifications__item:hover { background: var(--color-bg-subtle); }\n\n.lintje-notifications__dot,\n.lintje-notifications__dot-space { flex: 0 0 8px; height: 8px; margin-top: 7px; }\n.lintje-notifications__dot { border-radius: var(--radius-round); background: var(--color-accent-line); }\n\n.lintje-notifications__body { min-width: 0; }\n.lintje-notifications__title {\n  display: inline;\n  padding: 0;\n  color: var(--color-link);\n  font-size: 1rem; font-weight: 400;\n  text-align: left;\n  text-decoration: underline;\n}\n.lintje-notifications__title:hover { color: var(--color-link-hover); }\n.lintje-notifications__item.is-unread .lintje-notifications__title { font-weight: 700; }\n.lintje-notifications__text { margin: 0; font-size: 0.875rem; overflow-wrap: anywhere; }\n.lintje-notifications__when { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }\n\n.lintje-notifications__empty {\n  margin: 0;\n  padding: var(--space-6) var(--space-4);\n  color: var(--color-text-muted);\n  text-align: center;\n}\n\n/* Phone: the sheet takes focus only when the trap pulls back stray focus, and draws no ring. */\n.lintje-notifications__sheet {\n  position: fixed;\n  z-index: 85;\n  inset: 0;\n  overflow-y: auto;\n  background: var(--color-bg-surface);\n  animation: lintje-fade-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-notifications__sheet:focus { outline: none; }\n.lintje-notifications__panel.is-sheet { width: 100%; max-height: none; }\n.lintje-notifications__close { margin-right: calc(var(--space-2) * -1); }\n.lintje-notifications__close:hover { color: var(--color-text-primary); }\n.lintje-notifications__panel.is-sheet .lintje-notifications__head { padding-top: 0; padding-bottom: 0; min-height: var(--h-mobile-header); }\n\n/* Forced colours: the unread surface is dropped, so the dot keeps a system-colour fill. */\n@media (forced-colors: active) {\n  .lintje-notifications__dot { forced-color-adjust: none; background: CanvasText; }\n  .lintje-notifications__bell.is-open { outline: 1px solid Highlight; outline-offset: -1px; }\n}\n", v = 0;

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

@@ -1,5 +1,6 @@
-import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a, ut as o } from "../chunks/base-CbmWxUig.js";
-import { n as s, t as c } from "../chunks/input-CRW_exv_.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a, ut as o } from "../chunks/base-DRGvkF-r.js";
+import { t as s } from "../chunks/input-BGMLam-O.js";
+import { t as c } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/number-input/number-input.css?inline
 var l = "/* The number field with its stepper. */\n\n/* --- Number field --------------------------------------------------------- */\n.lintje-number-input {\n  display: flex; align-items: stretch;\n  height: var(--h-control);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  border-radius: var(--radius);\n}\n.lintje-number-input.is-error { border: 2px solid var(--color-error); }\n.lintje-number-input.is-readonly { border: 1px solid var(--color-border-strong); background: var(--color-bg-subtle); }\n.lintje-number-input.is-readonly .lintje-number-input__step {\n  border-color: var(--color-border-strong);\n  color: var(--color-text-disabled);\n  cursor: default;\n}\n.lintje-number-input.is-readonly .lintje-number-input__step:hover { background: none; }\n.lintje-number-input.is-readonly .lintje-number-input__control { cursor: default; }\n.lintje-number-input.is-disabled { border: 1px solid var(--color-border-strong); background: var(--color-bg-subtle); }\n.lintje-number-input__step {\n  width: var(--h-control); flex: none;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-number-input__step--down { border-right: 1px solid var(--color-border-field); }\n.lintje-number-input__step--up { border-left: 1px solid var(--color-border-field); }\n.lintje-number-input.is-disabled .lintje-number-input__step { border-color: var(--color-border-strong); }\n.lintje-number-input__step:hover:not(:disabled):not(.is-limit) { background: var(--color-bg-subtle); }\n/* At `min` or `max` the step keeps the focus (`aria-disabled`) and looks disabled. */\n.lintje-number-input__step:disabled,\n.lintje-number-input__step.is-limit { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-number-input__control {\n  flex: 1; min-width: 0;\n  border: none; background: none;\n  padding: 0 var(--space-2);\n  text-align: center;\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text-primary);\n  appearance: textfield;\n  -moz-appearance: textfield;\n}\n/* The browser's own spinner would sit beside the design's. */\n.lintje-number-input__control::-webkit-outer-spin-button,\n.lintje-number-input__control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n.lintje-number-input__control:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-number-input--unit .lintje-number-input__control { text-align: left; padding-left: 14px; }\n.lintje-number-input__unit {\n  display: flex; align-items: center; flex: none;\n  padding-right: 14px;\n  font-size: 1rem; color: var(--color-text-muted);\n}\n", u = "lintje-number-input-unit", d = class extends s {
 	constructor(...e) {

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

@@ -1,4 +1,4 @@
-import { Gt as e, I as t, Jt as n, Kt as r, Yt as i, Zt as a, en as o, nn as s, st as c, zt as l } from "../chunks/base-CbmWxUig.js";
+import { Gt as e, I as t, Jt as n, Kt as r, Yt as i, Zt as a, en as o, nn as s, st as c, zt as l } from "../chunks/base-DRGvkF-r.js";
 import "./menu-button.js";
 import "./announcement.js";
 //#region src/components/shared/overflow.ts

package/dist-elements/tag/pagination.js

@@ -1,4 +1,4 @@
-import { H as e, Jt as t, Yt as n, Zt as r, en as i, h as a, lt as o, nn as s, rt as c, s as l, st as u, ut as d } from "../chunks/base-CbmWxUig.js";
+import { H as e, Jt as t, Yt as n, Zt as r, d as i, en as a, h as o, lt as s, nn as c, rt as l, st as u, ut as d } from "../chunks/base-DRGvkF-r.js";
 import "./menu-button.js";
 //#region src/components/tables/pagination/pagination.css?inline
 var f = "/* \"Vorige\" and \"Volgende\" wear `.lintje-button--link` from the button's sheet. */\n/* In a flush tile the pages keep the heading's indent, as the rows above them do, and the tile's\n   padding below them when no footnote follows. */\n:host {\n  display: block; min-width: 0;\n  padding-inline: var(--lintje-inset, 0px);\n  padding-block-end: var(--lintje-inset-end, 0px);\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Three zones: the count left, the pages centred under what they page, the size choice right.\n   Stacked, the pages take the first line and the count and the choice share the second. */\n.lintje-pagination {\n  display: grid; grid-template-columns: 1fr auto 1fr;\n  grid-template-areas: \"count nav size\";\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.lintje-pagination.is-stacked {\n  grid-template-columns: 1fr auto;\n  grid-template-areas: \"nav nav\" \"count size\";\n}\n\n.lintje-pagination__nav {\n  grid-area: nav; justify-self: center;\n  display: flex; flex-wrap: wrap; align-items: center;\n  font: var(--text-ui);\n}\n.lintje-pagination__pages { display: contents; }\n\n/* The chevron and the bold word make a step a control without an underline at rest. */\n.lintje-pagination__step {\n  height: var(--h-target);\n  padding: 0 var(--space-3);\n  gap: var(--space-1);\n  text-decoration: none;\n}\n.lintje-pagination__step:not(:disabled):hover { text-decoration: underline; }\n/* Without its word a step is a square chevron, as large as a number. */\n.lintje-pagination.is-compact .lintje-pagination__step { width: var(--h-target); padding: 0; }\n\n/* Flat: a box around every number weighs more than the one that matters. */\n.lintje-pagination__page {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: var(--h-target); height: var(--h-target);\n  padding: 0 var(--space-1);\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--color-link);\n  font: var(--text-ui);\n  font-variant-numeric: tabular-nums;\n  text-decoration: none;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-pagination__page:hover { background: var(--color-bg-subtle); color: var(--color-link-hover); }\n\n/* The one filled square; its edge is the primary button's, the tint that carries it in dark. */\n.lintje-pagination__page.is-current {\n  background: var(--color-action-primary);\n  border-color: var(--color-action-primary-border);\n  color: var(--color-action-primary-text);\n  font-weight: 700;\n  cursor: default;\n}\n/* Choosing the current page does nothing, so it does not answer the pointer. */\n.lintje-pagination__page.is-current:hover { background: var(--color-action-primary); }\n\n/* As wide as a number, so the seven slots keep one length. */\n.lintje-pagination__gap {\n  min-width: var(--h-target);\n  text-align: center;\n  color: var(--color-text-muted);\n}\n\n.lintje-pagination__where { display: none; color: var(--color-text-primary); white-space: nowrap; }\n\n.lintje-pagination__count {\n  grid-area: count; justify-self: start;\n  margin: 0;\n  white-space: nowrap;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n  font-variant-numeric: tabular-nums;\n}\n\n.lintje-pagination__size { grid-area: size; justify-self: end; white-space: nowrap; }\n\n@media screen and (max-width: 767px) {\n  .lintje-pagination {\n    grid-template-columns: 1fr auto;\n    grid-template-areas: \"nav nav\" \"count size\";\n  }\n  .lintje-pagination__nav {\n    justify-self: stretch;\n    flex-wrap: nowrap; justify-content: space-between;\n  }\n  .lintje-pagination__pages { display: none; }\n  .lintje-pagination__where { display: block; }\n  .lintje-pagination__step { flex: 0 0 auto; padding: 0 var(--space-2); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-pagination__page { transition: none; }\n}\n\n/* Forced colours: the current page's fill is dropped, so its border turns Highlight. */\n@media (forced-colors: active) {\n  .lintje-pagination__page.is-current { border-color: Highlight; }\n}\n\n/* Paper keeps the count, which says that only these rows are on it; the steps are controls. */\n@media print {\n  .lintje-pagination__nav,\n  .lintje-pagination__size { display: none; }\n}\n", p = 7;
@@ -36,14 +36,14 @@ var h = {
 	many: "resultaten",
 	one: "resultaat"
 };
-function g(e, t, n, r = h, i) {
+function g(e, t, n, r = h, a) {
 	if (!t || n == null || Number.isNaN(n)) return null;
-	let a = i != null && i > n ? ` · gefilterd uit ${l(i)}` : "";
-	if (n <= 0) return `Geen ${r.many}${a}`;
-	let o = n === 1 ? r.one : r.many;
-	if (n <= t) return `${l(n)} ${o}${a}`;
-	let s = Math.min((e - 1) * t + 1, n), c = Math.min(e * t, n);
-	return `${s === c ? l(s) : `${l(s)}–${l(c)}`} van ${l(n)} ${o}${a}`;
+	let o = a != null && a > n ? ` · gefilterd uit ${i(a)}` : "";
+	if (n <= 0) return `Geen ${r.many}${o}`;
+	let s = n === 1 ? r.one : r.many;
+	if (n <= t) return `${i(n)} ${s}${o}`;
+	let c = Math.min((e - 1) * t + 1, n), l = Math.min(e * t, n);
+	return `${c === l ? i(c) : `${i(c)}–${i(l)}`} van ${i(n)} ${s}${o}`;
 }
 function _(e) {
 	if (!e) return;
@@ -56,8 +56,8 @@ var v = class extends t {
 	}
 	static {
 		this.styles = [
-			o,
-			r(c),
+			s,
+			r(l),
 			r(f)
 		];
 	}
@@ -147,17 +147,17 @@ var v = class extends t {
 	}
 	sizes() {
 		let e = this.pageSizes;
-		if (!e?.length) return i;
+		if (!e?.length) return a;
 		let t = this.pageSize ?? e[0], n = e.includes(t) ? e : [...e, t].sort((e, t) => e - t), r = this.countUnit.many;
-		return s`<lintje-menu-button
+		return c`<lintje-menu-button
       class="lintje-pagination__size"
       variant="flat"
       placement="bottom-end"
-      label=${`${l(t)} per pagina`}
-      accessible-label=${`${r[0].toUpperCase()}${r.slice(1)}: ${l(t)} per pagina`}
+      label=${`${i(t)} per pagina`}
+      accessible-label=${`${r[0].toUpperCase()}${r.slice(1)}: ${i(t)} per pagina`}
       .items=${n.map((e) => ({
 			value: String(e),
-			label: `${l(e)} per pagina`,
+			label: `${i(e)} per pagina`,
 			checked: e === t,
 			radio: !0
 		}))}
@@ -178,14 +178,14 @@ var v = class extends t {
 		let r = e === "previous", i = r ? "Vorige" : "Volgende", a = d("functioneel-delta-rechts", {
 			size: 16,
 			flip: r ? "horizontal" : void 0
-		}), o = s`<span
+		}), o = c`<span
       class=${u({
 			"lintje-pagination__word": !0,
 			"visually-hidden": this.compact
 		})}
       >${i}</span
-    >`, c = r ? s`${a}${o}` : s`${o}${a}`, l = this.hrefFor(t);
-		return n || !l ? s`<button
+    >`, s = r ? c`${a}${o}` : c`${o}${a}`, l = this.hrefFor(t);
+		return n || !l ? c`<button
         type="button"
         class=${u({
 			"lintje-button": !0,
@@ -197,53 +197,53 @@ var v = class extends t {
         ?disabled=${n}
         @click=${(n) => this.choose(n, t, e)}
       >
-        ${c}
-      </button>` : s`<a
+        ${s}
+      </button>` : c`<a
       class="lintje-button lintje-button--link lintje-pagination__step"
       data-step=${e}
       href=${l}
       @click=${(n) => this.choose(n, t, e)}
-      >${c}</a
+      >${s}</a
     >`;
 	}
 	number(e, t) {
 		let n = e === t, r = u({
 			"lintje-pagination__page": !0,
 			"is-current": n
-		}), a = n ? `Pagina ${e}, huidige pagina` : `Ga naar pagina ${e}`, o = this.hrefFor(e);
-		return o ? s`<a
+		}), i = n ? `Pagina ${e}, huidige pagina` : `Ga naar pagina ${e}`, o = this.hrefFor(e);
+		return o ? c`<a
         class=${r}
         href=${o}
         data-page=${e}
-        aria-label=${a}
-        aria-current=${n ? "page" : i}
+        aria-label=${i}
+        aria-current=${n ? "page" : a}
         @click=${(t) => this.choose(t, e, e)}
         >${e}</a
-      >` : s`<button
+      >` : c`<button
       type="button"
       class=${r}
       data-page=${e}
-      aria-label=${a}
-      aria-current=${n ? "page" : i}
+      aria-label=${i}
+      aria-current=${n ? "page" : a}
       @click=${(t) => this.choose(t, e, e)}
     >
       ${e}
     </button>`;
 	}
 	render() {
-		let e = this.count, t = this.current, n = m(t, e), r = n.indexOf(t), o = g(t, this.pageSize, this.total, this.countUnit, this.filteredFrom);
-		return s`<div
+		let e = this.count, t = this.current, n = m(t, e), r = n.indexOf(t), i = g(t, this.pageSize, this.total, this.countUnit, this.filteredFrom);
+		return c`<div
       class=${u({
 			"lintje-pagination": !0,
 			"is-compact": this.compact,
 			"is-stacked": this.stacked
 		})}
     >
-      ${o ? s`<p class="lintje-pagination__count">${o}</p>` : i}
+      ${i ? c`<p class="lintje-pagination__count">${i}</p>` : a}
       <nav class="lintje-pagination__nav" aria-label=${this.label}>
         ${this.step("previous", t - 1, t <= 1)}
         <span class="lintje-pagination__pages">
-          ${a(n, (e, t) => e === "gap" ? t < r ? "gap-before" : "gap-after" : e, (e) => e === "gap" ? s`<span class="lintje-pagination__gap" aria-hidden="true">…</span>` : this.number(e, t))}
+          ${o(n, (e, t) => e === "gap" ? t < r ? "gap-before" : "gap-after" : e, (e) => e === "gap" ? c`<span class="lintje-pagination__gap" aria-hidden="true">…</span>` : this.number(e, t))}
         </span>
         <span class="lintje-pagination__where">Pagina ${t} van ${e}</span>
         ${this.step("next", t + 1, t >= e)}

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

@@ -1 +1 @@
-export * from '../types/primitives/popover/popover.js'
+export * from '../types/components/overlays/popover/popover.js'

package/dist-elements/tag/popover.js

@@ -1 +1 @@
-export { U as LintjePopover } from "../chunks/base-CbmWxUig.js";
+export { U as LintjePopover } from "../chunks/base-DRGvkF-r.js";

package/dist-elements/tag/progress-bar.d.ts

@@ -1 +1 @@
-export * from '../types/primitives/progress-bar/progress-bar.js'
+export * from '../types/components/feedback/progress-bar/progress-bar.js'

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

@@ -1 +1 @@
-export { g as LintjeProgressBar } from "../chunks/base-CbmWxUig.js";
+export { g as LintjeProgressBar } from "../chunks/base-DRGvkF-r.js";

package/dist-elements/tag/prose.js

@@ -1,4 +1,4 @@
-import { P as e, St as t, Yt as n, Zt as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { P as e, St as t, Yt as n, Zt as r, nn as i, st as a } from "../chunks/base-DRGvkF-r.js";
 import { t as o } from "../chunks/prose-CmKVp5kL.js";
 //#region src/components/content/prose/prose.ts
 var s = class extends e {

package/dist-elements/tag/qr-code.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-DRGvkF-r.js";
 import "./toast.js";
 import { t as o } from "../chunks/copied-7BXYVkXT.js";
 //#region src/components/actions/qr-code/qr-code.css?inline

package/dist-elements/tag/radio-group.js

@@ -1,5 +1,6 @@
-import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
-import { r as o, t as s } from "../chunks/input-CRW_exv_.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a } from "../chunks/base-DRGvkF-r.js";
+import { n as o } from "../chunks/input-BGMLam-O.js";
+import { t as s } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/radio-group/radio-group.css?inline
 var c = "/* The radio group's stack; the radio itself is the shared `choice`. */\n\n.lintje-radio-group { display: flex; flex-direction: column; }\n/* Cards: the options side by side, each with a line under its label. The chosen one is quiet, as\n   in the segmented control: the choice's wash and an edge in the accent line. */\n.lintje-radio-group--cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(6 * var(--space-10))), 1fr));\n  gap: var(--space-2);\n}\n.lintje-radio-group__card {\n  align-items: flex-start;\n  padding: var(--space-3);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n}\n.lintje-radio-group__card:hover:not(.is-chosen, .is-disabled) { background: var(--color-bg-subtle); }\n.lintje-radio-group__card.is-chosen {\n  background: var(--color-choice-active-bg);\n  border-color: var(--color-accent-line);\n  box-shadow: inset 0 0 0 1px var(--color-accent-line);\n}\n.lintje-radio-group__card .lintje-choice__label { display: flex; flex-direction: column; font-weight: 700; }\n.lintje-radio-group__description { font: var(--text-small); font-weight: 400; color: var(--color-text-muted); }\n\n/* Below 768 px the two text fields take the touch height; the choice rows already have it. */\n@media screen and (max-width: 767px) {\n  :host(lintje-text-input),\n  :host(lintje-number-input) { --h-control: var(--h-touch); }\n}\n", l = class extends o {
 	constructor(...e) {

package/dist-elements/tag/range.js

@@ -1,5 +1,6 @@
-import { Yt as e, Zt as t, bt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
-import { r as o, t as s } from "../chunks/input-CRW_exv_.js";
+import { Yt as e, Zt as t, bt as n, en as r, nn as i, st as a } from "../chunks/base-DRGvkF-r.js";
+import { n as o } from "../chunks/input-BGMLam-O.js";
+import { t as s } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/range/range-ticks.ts
 var c = [
 	1,

package/dist-elements/tag/recording-status.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-DRGvkF-r.js";
 import "./description-list.js";
 import { levelWord as o } from "./level-meter.js";
 //#region src/components/feedback/recording-status/recording-status.css?inline

package/dist-elements/tag/repeater.js

@@ -1,4 +1,4 @@
-import { Jt as e, Yt as t, Zt as n, en as r, nn as i } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i } from "../chunks/base-DRGvkF-r.js";
 //#region src/components/forms/repeater/repeater.css?inline
 var a = ":host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-repeater {\n  min-width: 0;\n  margin: 0; padding: 0; border: 0;\n}\n/* The legend stands above its rows as a field's label does above its control; the gap lives in\n   the body, because browsers differ on whether a legend takes part in a fieldset's flex gap. */\n.lintje-repeater__legend {\n  padding: 0 0 6px;\n  font-size: 0.875rem; font-weight: 700;\n  color: var(--color-text-primary);\n}\n.lintje-repeater__body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n:host([disabled]) .lintje-repeater__legend { color: var(--color-text-disabled); }\n.lintje-repeater__rows { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n.lintje-repeater__foot {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.lintje-repeater__count { font: var(--text-meta); color: var(--color-text-muted); }\n\n@media screen and (max-width: 767px) {\n  .lintje-repeater__rows { gap: var(--space-5); }\n}\n", o = "/* One row of a repeater: the host's fields side by side, then the remove icon button. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n@media screen and (max-width: 767px) {\n  :host(:not([index='0'])) {\n    padding-top: var(--space-5);\n    border-top: 1px solid var(--color-border-default);\n  }\n}\n\n/* --- */\n\n/* The button aligns with the controls' bottom edge when a field carries its label above it. */\n.lintje-repeater-row { display: flex; align-items: flex-end; gap: var(--space-2); min-width: 0; }\n.lintje-repeater-row__fields { flex: 1; min-width: 0; display: flex; gap: var(--space-2); }\n.lintje-repeater-row__fields ::slotted(*) { flex: 1 1 0; min-width: 0; }\n/* A square as high as the controls beside it. */\n.lintje-repeater-row__remove { flex: none; --h-icon-button: var(--h-control); }\n\n/* Below 768 px the fields stack and the remove button stands beside the first. */\n@media screen and (max-width: 767px) {\n  .lintje-repeater-row { align-items: flex-start; }\n  .lintje-repeater-row__fields { flex-direction: column; }\n}\n", s = "input, select, textarea, button, [contenteditable=\"true\"], [tabindex]";
 function c(e) {

package/dist-elements/tag/segmented.js

@@ -1,5 +1,6 @@
-import { Yt as e, Zt as t, en as n, nn as r, st as i } from "../chunks/base-CbmWxUig.js";
-import { r as a, t as o } from "../chunks/input-CRW_exv_.js";
+import { Yt as e, Zt as t, en as n, nn as r, st as i } from "../chunks/base-DRGvkF-r.js";
+import { n as a } from "../chunks/input-BGMLam-O.js";
+import { t as o } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/segmented/segmented.css?inline
 var s = "/* The segmented control keeps `min-width: auto`: it never shrinks below its options. */\n:host { display: block; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The frame hugs its options: a wider host leaves its room outside the border, not in it. It\n   never grows past its room, so the element can read that room off the frame. */\n.lintje-segmented {\n  display: flex;\n  width: fit-content;\n  max-width: 100%;\n  height: var(--h-control);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n}\n.lintje-segmented.is-error { border: 2px solid var(--color-error); }\n/* Disabled keeps the quiet border, also over an error. */\n:host([disabled]) .lintje-segmented { border: 1px solid var(--color-border-strong); }\n.lintje-segmented__option {\n  display: flex; align-items: center; gap: var(--space-2);\n  padding: 0 var(--space-3);\n  font-size: 1rem;\n  color: var(--color-text-primary);\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-segmented__option:hover:not(.is-active) { background: var(--color-bg-subtle); }\n.lintje-segmented__option:disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-segmented__option:disabled:hover { background: var(--color-bg-subtle); }\n/* Chosen is quiet, not filled: a filled surface is the page's one primary action. The edge is a\n   ring half inside, half over the frame, so it covers the frame's line instead of standing in it;\n   a real border would push the neighbouring segments over. */\n.lintje-segmented__option.is-active {\n  position: relative;\n  z-index: 1;\n  background: var(--color-choice-active-bg);\n  color: var(--color-accent-text);\n  box-shadow: 0 0 0 1px var(--color-accent-line), inset 0 0 0 1px var(--color-accent-line);\n  font-weight: 700;\n}\n.lintje-segmented__option:disabled.is-active {\n  background: var(--color-border-strong);\n  color: var(--color-text-disabled);\n  box-shadow: none;\n}\n\n.lintje-segmented__description {\n  margin: var(--space-2) 0 0;\n  padding: var(--space-2) var(--space-3);\n  background: var(--color-bg-subtle);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n}\n\n/* The bar cannot reach into the shadow root, so the control carries the bar's breakpoints. */\n@media (min-width: 1024px) and (max-width: 1439px) {\n  :host(:not([stacked])) .lintje-segmented__option { padding: 0 10px; }\n}\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  :host { width: 100%; }\n  .lintje-segmented { width: 100%; }\n  .lintje-segmented__option { flex: 1; justify-content: center; }\n}\n:host([stacked]) .lintje-segmented { width: 100%; }\n:host([stacked]) .lintje-segmented__option { flex: 1; justify-content: center; }\n\n/* A row wider than its room: the options stand under each other, each the full width. */\n.lintje-segmented.is-column { flex-direction: column; width: 100%; height: auto; }\n.lintje-segmented.is-column .lintje-segmented__option { min-height: var(--h-touch); }\n\n/* Forced colours drop the fill and ring: every segment has a 1 px border, so nothing moves. */\n@media (forced-colors: active) {\n  .lintje-segmented__option { border: 1px solid Canvas; }\n  .lintje-segmented__option.is-active { border-color: Highlight; }\n  :host([disabled]) .lintje-segmented__option.is-active { border-color: GrayText; }\n}\n", c = "lintje-segmented-description", l = class extends a {
 	constructor(...e) {

package/dist-elements/tag/select.js

@@ -1,5 +1,6 @@
-import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a, ut as o } from "../chunks/base-CbmWxUig.js";
-import { r as s, t as c } from "../chunks/input-CRW_exv_.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a, ut as o } from "../chunks/base-DRGvkF-r.js";
+import { n as s } from "../chunks/input-BGMLam-O.js";
+import { t as c } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/select/select.css?inline
 var l = "/* The select. Its width is the host's, set from outside by tag. */\n:host { display: block; width: 180px; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-select { position: relative; display: flex; align-items: center; }\n.lintje-select__control {\n  appearance: none;\n  width: 100%;\n  height: var(--h-control);\n  padding: 0 34px 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  font-size: 1rem;\n  color: var(--color-text-primary);\n  border-radius: var(--radius);\n}\n.lintje-select__control.is-bold { font-weight: 700; }\n.lintje-select__control.is-error { border: 2px solid var(--color-error); }\n.lintje-select__control:disabled {\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-select__control:disabled { border: 1px solid var(--color-border-strong); }\n.lintje-select__icon { position: absolute; right: 12px; pointer-events: none; color: var(--color-text-primary); }\n", u = class extends s {
 	constructor(...e) {

package/dist-elements/tag/shell.js

@@ -1,6 +1,6 @@
-import { $ as e, Gt as t, H as n, Ht as r, I as i, Jt as a, Kt as o, Lt as s, Pt as c, Q as l, Ut as u, Yt as ee, Z as d, Zt as f, at as p, en as m, lt as te, nn as h, ot as g, qt as ne, st as _, ut as v } from "../chunks/base-CbmWxUig.js";
+import { $ as e, Gt as t, H as n, Ht as r, I as i, Jt as a, Kt as o, Lt as s, Pt as c, Q as l, Ut as u, Yt as ee, Z as d, Zt as f, at as p, en as m, lt as te, nn as h, ot as g, qt as ne, st as _, ut as v } from "../chunks/base-DRGvkF-r.js";
 import "./logo.js";
-import { n as y, r as re, t as b } from "../chunks/focus-trap-BwOxE5BX.js";
+import { n as y, r as re, t as b } from "../chunks/focus-trap-Dv8zu64A.js";
 import "./toast.js";
 import "./qr-code.js";
 import { t as ie } from "../chunks/dialog-close-u75fVEw4.js";
@@ -935,7 +935,7 @@ function ke(e, t) {
 }
 //#endregion
 //#region src/components/frame/shell/header.css?inline
-var Ae = "/* Header of the top layout, drawn by `header.ts` inside the caller's shadow root. */\n\n/* The logo bar sits above the veil, so an open submenu does not dim it. A box wider than a narrow\n   phone is cut at both sides alike, which keeps the ribbon centred. */\n.lintje-logobar {\n  position: relative;\n  z-index: 31;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  min-height: var(--h-logobar);\n  overflow: hidden;\n  background: var(--color-logobar-bg);\n  color: var(--color-logobar-text);\n}\n.lintje-logobar__home { display: block; flex: none; color: inherit; }\n/* The logo link's ring is drawn inside its box (`focus-inset`): the bar cuts what stands outside\n   its top edge. */\n\n/* The environment outside production: the accent, not a status. */\n.lintje-logobar__environment {\n  position: absolute;\n  top: var(--space-6);\n  right: calc(var(--page-pad-x) + var(--page-gutter));\n  height: var(--h-chip);\n  margin: 0;\n  padding: 0 var(--space-3);\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  line-height: var(--h-chip);\n  white-space: nowrap;\n}\n.lintje-logobar__environment-short { display: none; }\n/* On a phone the organisation's name reaches the right edge: the block shrinks to three letters above it. */\n:where(.lintje-shell.is-phone) .lintje-logobar__environment {\n  top: var(--space-2);\n  right: var(--space-4);\n  height: var(--h-chip-field);\n  line-height: var(--h-chip-field);\n}\n/* The full name stays for a screen reader; the three letters are only seen. */\n:where(.lintje-shell.is-phone) .lintje-logobar__environment-label {\n  position: absolute;\n  width: 1px; height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n:where(.lintje-shell.is-phone) .lintje-logobar__environment-short { display: inline; }\n\n/* The bar is the submenu's positioning context, which is why a group is not one. Hover, active\n   and edge are set on the bar for what inherits, and on each element at its end, because an\n   element with a shadow root declares the tokens again on its own host. */\n.lintje-navbar,\n.lintje-navbar__end > * {\n  --color-nav-hover: var(--color-navbar-hover);\n  --color-nav-active: var(--color-navbar-active);\n  --color-nav-active-edge: var(--color-navbar-active-edge);\n}\n.lintje-navbar__end > * { --lintje-tool-height: var(--h-navbar); }\n/* The colour runs to the edges; the content keeps to `--page-gutter`. */\n.lintje-navbar {\n  position: relative;\n  z-index: 30;\n  display: flex;\n  align-items: stretch;\n  justify-content: space-between;\n  gap: 0 var(--space-4);\n  height: var(--h-navbar);\n  padding: 0 calc(var(--space-3) + var(--page-gutter)) 0\n    calc(var(--page-pad-x) - var(--space-5) + var(--page-gutter));\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n}\n/* Both widths are measured (`SubmenuController`): neither may depend on whether the entries or\n   \"Menu\" stand there. */\n.lintje-navbar__start { display: flex; flex: 1 1 auto; align-items: stretch; min-width: 0; }\n.lintje-navbar__entries { display: flex; flex: 1 1 0; align-items: stretch; min-width: 0; }\n.lintje-navbar__list { display: flex; flex: none; align-items: stretch; width: max-content; }\n/* Hanging from the bar's end, the overflow falls off the left, where the page gains no scroll. */\n.lintje-navbar__list.is-hidden {\n  position: absolute;\n  top: 0;\n  right: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.lintje-navbar__group { display: flex; }\n.lintje-navbar__end { display: flex; flex: none; align-items: center; gap: var(--space-1); }\n/* The orange ring disappears on the theme's fill, so the bar takes `--color-focus-on-theme`. The\n   open entry and the submenu stand on the page's surface and keep the standard ring. */\n.lintje-navbar :focus-visible { outline-color: var(--color-focus-on-theme); }\n.lintje-navbar .lintje-navbar__entry.is-open:focus-visible,\n.lintje-navbar .lintje-navbar__submenu :focus-visible { outline-color: var(--color-focus); }\n\n/* The edge is always there on both sides so the word stays centred; transparent until active. */\n.lintje-navbar__entry {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  box-sizing: border-box;\n  height: var(--h-navbar);\n  padding: 0 var(--space-5);\n  border-top: var(--nav-edge) solid transparent;\n  border-bottom: var(--nav-edge) solid transparent;\n  color: var(--color-nav-text);\n  font: var(--text-body);\n  white-space: nowrap;\n  text-decoration: none;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-navbar__entry:hover:not(.is-unavailable) { background: var(--color-navbar-hover); }\n.lintje-navbar__entry:hover:not(.is-unavailable) .lintje-navbar__label { text-decoration: underline; }\n/* Not bold: the bold cut sets narrower and reads as another size beside its neighbours. */\n.lintje-navbar__entry.is-active {\n  background: var(--color-navbar-active);\n  border-bottom-color: var(--color-navbar-active-edge);\n  color: var(--color-nav-active-text);\n}\n.lintje-navbar__entry.is-open,\n.lintje-navbar__entry.is-open:hover {\n  background: var(--color-bg-surface);\n  border-bottom-color: transparent;\n  color: var(--color-navbar-open-text);\n}\n.lintje-navbar__entry.is-open .lintje-navbar__label { text-decoration: none; }\n.lintje-navbar__entry.is-unavailable { color: var(--color-nav-disabled); cursor: default; }\n\n/* The shadow falls down only: `clip-path` cuts what would fall on the bar, so the open entry and\n   the panel stay one shape. `--lintje-navbar-room` is measured. */\n.lintje-navbar__submenu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  padding: var(--space-8) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-10);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border-bottom: 1px solid var(--color-border-default);\n  box-shadow: var(--shadow-popover);\n  clip-path: inset(0 0 -32px 0);\n  max-height: var(--lintje-navbar-room, calc(100dvh - var(--h-navbar)));\n  box-sizing: border-box;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n.lintje-navbar__heading {\n  margin: var(--space-6) 0 var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n}\n.lintje-navbar__heading:first-child { margin-top: 0; }\n.lintje-navbar__pages {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  animation:\n    lintje-fade-in var(--dur-popover) linear,\n    lintje-drop-in var(--dur-submenu) ease;\n}\n@media (max-width: 1023px) {\n  .lintje-navbar__pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n.lintje-navbar__item { display: flex; }\n\n/* The 1 px edge is always there, so hover moves nothing. */\n.lintje-navbar__page {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  box-sizing: border-box;\n  min-width: 0;\n  min-height: 4rem;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  border: 1px solid transparent;\n  color: var(--color-text-primary);\n  font: var(--text-body);\n  text-decoration: none;\n  transition: border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-navbar__page-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }\n.lintje-navbar__page .lintje-navbar__label { font-weight: 700; }\n.lintje-navbar__metric { color: var(--color-text-muted); font: var(--text-small); }\n.lintje-navbar__metric-value { color: var(--color-text-primary); }\n.lintje-navbar__page:hover:not(.is-unavailable) { border-color: var(--color-accent-line); }\n.lintje-navbar__page:hover:not(.is-unavailable) .lintje-navbar__label { text-decoration: underline; }\n.lintje-navbar__page.is-active {\n  box-shadow: inset var(--nav-edge) 0 0 var(--color-accent-line);\n  color: var(--color-accent-text);\n}\n.lintje-navbar__page.is-unavailable,\n.lintje-navbar__page.is-unavailable .lintje-navbar__metric-value { color: var(--color-text-muted); cursor: default; }\n.lintje-navbar__page.is-no-access .lintje-navbar__label { text-decoration: line-through; }\n\n/* Fixed to the viewport: the header may stand in a box of its own height above the page. */\n.lintje-header-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n  background: var(--color-overlay-nav);\n  pointer-events: none;\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n@media print {\n  .lintje-logobar, .lintje-navbar, .lintje-header-scrim { display: none; }\n}\n\n/* Forced colours: the browser drops the fill that carries the active page and the open group. */\n@media (forced-colors: active) {\n  .lintje-navbar { border-bottom: 1px solid CanvasText; }\n  .lintje-navbar__entry.is-active { border-bottom-color: Highlight; }\n  .lintje-navbar__entry.is-open { outline: 1px solid CanvasText; outline-offset: -1px; }\n  .lintje-navbar__entry.is-unavailable,\n  .lintje-navbar__page.is-unavailable { color: GrayText; }\n  .lintje-navbar__page { border-color: CanvasText; }\n  .lintje-navbar__page.is-active { border-left: var(--nav-edge) solid Highlight; }\n  .lintje-navbar__page.is-unavailable { border-color: GrayText; }\n  .lintje-navbar__submenu { border: 1px solid CanvasText; }\n  .lintje-navbar :focus-visible,\n  .lintje-navbar .lintje-navbar__entry.is-open:focus-visible,\n  .lintje-navbar .lintje-navbar__submenu :focus-visible { outline-color: Highlight; }\n}\n", je = ":host { display: block; min-width: 0; min-height: 100vh; }\n:host([hidden]) { display: none; }\n/* A short page is one sheet, not one sheet with the rest left empty. */\n@media print { :host { min-height: 0; } }\n\n/* ------------------------------------------------------------------------ */\n\n/*\n * The page's left edge, for what pins itself to the viewport (the filter bar): the menu's width\n * beside the page, nothing above it. Custom properties reach the slotted content.\n */\n.lintje-shell {\n  --lintje-shell-left: 0px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: inherit;\n  background: var(--color-bg-page);\n  color: var(--color-text-primary);\n}\n/* A specimen's bars (z-index 25–31) would otherwise cover the outer shell's open menus. */\n.lintje-shell.is-nested { isolation: isolate; }\n.lintje-shell--side { --lintje-shell-left: var(--w-rail); flex-direction: row; }\n@media (min-width: 1440px) {\n  .lintje-shell--side:not(.is-unpinned) { --lintje-shell-left: var(--w-nav); }\n}\n.lintje-shell--side:where(.is-phone) { --lintje-shell-left: 0px; }\n.lintje-shell__column {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* \"Naar de inhoud\": hidden until focused. The ring is drawn inside the box (`focus-inset`):\n   outside it would lie on the theme fill (1.89:1, on Defensie 1:1); inside, its neighbour is\n   white. */\n.lintje-shell__skip {\n  position: absolute;\n  top: var(--space-2);\n  left: var(--space-2);\n  z-index: 50;\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--h-touch);\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-bg-surface);\n  color: var(--color-link);\n  font: var(--text-ui);\n  text-decoration: underline;\n  box-shadow: var(--shadow-popover);\n}\n.lintje-shell__skip:not(:focus) {\n  width: 1px;\n  height: 1px;\n  min-height: 0;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  box-shadow: none;\n}\n\n/* The main region takes the skip link's focus; it is not a control and draws no ring. */\n.lintje-shell__main {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  min-width: 0;\n}\n.lintje-shell__main:focus { outline: none; }\n/* Without content the last edge-to-edge part takes the room left: a conversation keeps its\n   question box at the bottom of a short page. */\n.lintje-shell__main.is-bare ::slotted([slot='full']) { flex: 1 0 auto; }\n\n/* The content keeps to the design system's maximum width, as the bars above it do. */\n.lintje-shell__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--grid-gutter);\n  padding: var(--page-pad-y) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-10);\n}\n.lintje-shell__content[hidden] { display: none; }\n:where(.lintje-shell.is-phone) .lintje-shell__content { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-3); }\n\n/*\n * Top layout. The navigation bar cannot be `sticky`: it would stick inside the header's own box\n * and leave with it, so its slot keeps the bar's height (`--h-navbar`) and the bar is pinned\n * once the slot has left the viewport.\n */\n.lintje-shell__sentinel { height: 1px; margin-bottom: -1px; }\n.lintje-shell__nav { position: relative; z-index: 25; min-height: var(--h-navbar); }\n.lintje-shell__nav.is-stuck .lintje-navbar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n/* Below 768 px the mobile header is the bar under the logo bar; its slot keeps the height. */\n.lintje-shell__mobile-bar { height: var(--h-topbar); }\n.lintje-shell__mobile-pin { position: relative; z-index: 25; }\n.lintje-shell__mobile-bar.is-stuck .lintje-shell__mobile-pin {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n.lintje-shell--top .lintje-mobile-header {\n  position: static;\n  height: var(--h-topbar);\n  align-items: center;\n  gap: var(--space-3);\n}\n.lintje-shell--top .lintje-mobile-header__actions { margin-top: 0; flex: none; }\n.lintje-shell--top .lintje-mobile-menu {\n  position: absolute;\n  inset: 100% 0 auto 0;\n  height: calc(100dvh - var(--h-topbar));\n}\n/* 16 px so two lines fit inside the 56 px bar; longer is cut with an ellipsis. */\n.lintje-mobile-header__title {\n  display: -webkit-box;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--color-nav-text);\n  font: var(--text-dashboard);\n  font-size: 1rem;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n/* The logo bar already shows the environment. */\n.lintje-shell--top .lintje-mobile-menu__environment { display: none; }\n\n/* The page's one h1; cut before it can push the entries out. */\n.lintje-shell__name {\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 24rem;\n  margin: 0;\n  padding: 0 var(--space-5);\n  overflow: hidden;\n  color: var(--color-nav-text);\n  font: var(--text-dashboard);\n  line-height: var(--h-navbar);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Bare glyphs in a bar; on the navigation bar their ring is the on-theme one (`header.css`). */\n.lintje-shell__tool {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--h-touch);\n  height: var(--lintje-tool-height, var(--h-touch));\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-shell__tool:hover { background: var(--color-nav-hover); }\n.lintje-shell__tool--text {\n  width: auto;\n  padding: 0 var(--space-3);\n  font: var(--text-ui);\n}\n.lintje-navbar .lintje-shell__tool { height: var(--h-navbar); }\n\n/* The panels hang from the bar, not the tool. They stand on the page's surface: standard ring. */\n.lintje-navbar .lintje-view,\n.lintje-navbar .lintje-share { position: static; }\n.lintje-navbar .lintje-view__popover,\n.lintje-navbar .lintje-share__popover {\n  top: 100%;\n  right: calc(var(--space-3) + var(--page-gutter));\n}\n.lintje-navbar .lintje-view__popover :focus-visible,\n.lintje-navbar .lintje-share__popover :focus-visible { outline-color: var(--color-focus); }\n\n.lintje-shell__sheet-user { border-top: 1px solid var(--color-nav-line); }\n\n/* On paper the bars give way to the logo and the application's name; the screen never shows it. */\n.lintje-shell__print-head { display: none; }\n\n@media print {\n  .lintje-shell__skip,\n  .lintje-shell__sentinel,\n  .lintje-shell__nav,\n  .lintje-shell__mobile-bar { display: none; }\n  .lintje-shell__print-head {\n    display: block;\n    border-bottom: 1px solid var(--color-border-default);\n  }\n  .lintje-shell__print-logo {\n    display: flex;\n    justify-content: center;\n    min-height: var(--h-logobar);\n  }\n  .lintje-shell__print-name {\n    margin: 0;\n    padding: var(--space-3) 0;\n    color: var(--color-text-primary);\n    font: var(--text-dashboard);\n  }\n}\n\n@media (forced-colors: active) {\n  .lintje-navbar .lintje-view__popover :focus-visible,\n  .lintje-navbar .lintje-share__popover :focus-visible { outline-color: Highlight; }\n}\n", Me = "\n/* Dark is its own surface, not an inversion: every colour here is a `--color-nav-*` token. */\n.lintje-nav {\n  width: var(--w-nav);\n  flex: none;\n  /* `align-self: flex-start`: a stretched flex child would make sticky do nothing. */\n  position: sticky;\n  top: 0;\n  align-self: flex-start;\n  height: 100vh;\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* Above the page also while the rail collapses: with a z-index only while expanded,\n     later positioned content (charts, KPI tiles) painted over the shrinking menu. */\n  z-index: 30;\n  box-shadow: var(--shadow-nav);\n  /* The margin mirrors the width growth, so width + margin-right is 72 px at every moment;\n     otherwise the content jumps 216 px for one frame. */\n  transition:\n    width var(--dur-rail) var(--ease-in-motion),\n    margin-right var(--dur-rail) var(--ease-in-motion);\n}\n/* The orange ring disappears into the theme fill: the menu takes the on-theme ring. */\n.lintje-nav :focus-visible { outline-color: var(--color-focus-on-theme); }\n.lintje-nav--rail { width: var(--w-rail); margin-right: 0; }\n/* Expanding lies on top of the content: 288 px drawn, 72 px taken. A negative right margin does\n   that; `fixed` or `absolute` would make the page jump. */\n.lintje-nav--rail.is-expanded {\n  width: var(--w-nav);\n  margin-right: calc(var(--w-rail) - var(--w-nav));\n}\n/* The overlay behind the expanded rail. A sibling of the nav: inside its stacking context it\n   would darken the menu itself. */\n.lintje-nav__scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 29;\n  background: var(--color-overlay-nav);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dur-rail) var(--ease-in-motion);\n}\n.lintje-nav__scrim.is-visible { opacity: 1; }\n\n.lintje-nav__header {\n  height: var(--h-nav-head);\n  flex: none;\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0 var(--space-4) 0 12px;\n}\n\n.lintje-nav__pin {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  margin-top: 12px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-nav-text);\n  background: transparent;\n  flex: none;\n}\n.lintje-nav__pin--text {\n  width: auto;\n  padding: 0 var(--space-2);\n  font-size: 0.875rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n/* The pin and Afmelden: a transparent hit area takes the target to 48 px. */\n.lintje-nav__pin::after,\n.lintje-nav__logout-button::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n.lintje-nav__pin { transition: background var(--dur-hover) var(--ease-in-motion); }\n.lintje-nav__pin:hover { background: var(--color-nav-hover); }\n\n/* No native bar: a styled one takes width in every browser and the rows' fill would stop short\n   of the menu's edge. `NavScrollbar` sizes and places the thumb drawn instead. */\n.lintje-nav__list { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }\n.lintje-nav__list::-webkit-scrollbar { display: none; }\n.lintje-nav__thumb {\n  position: absolute;\n  top: 0; right: 0;\n  width: var(--space-2);\n  height: 0;\n  /* The menu's second ink reads on its fill and on a hovered row. */\n  background: var(--color-nav-text-sub);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n}\n/* There while the pointer is on the menu or a drag lasts; the keyboard's focus shows it at once. */\n.lintje-nav:hover .lintje-nav__thumb,\n.lintje-nav__thumb.is-dragging,\n.lintje-nav__list:focus-within + .lintje-nav__thumb { opacity: 1; pointer-events: auto; }\n.lintje-nav__list:focus-within + .lintje-nav__thumb { transition: none; }\n.lintje-nav__group { display: flex; flex-direction: column; }\n\n/* The same height in both modes, so every row below stays in place when the rail expands. */\n.lintje-nav__section-heading {\n  position: relative;\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-nav-text-sub);\n  padding: 22px var(--space-5) 6px;\n  white-space: nowrap;\n  margin: 0;\n}\n/* A line in the rail, text once it expands: the text fades in 80 ms after the width starts. */\n.lintje-nav__section-label {\n  display: block;\n  transition: opacity 160ms var(--ease-in-motion) 80ms, transform var(--dur-base) var(--ease-in-motion) 80ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__section-label {\n  opacity: 0;\n  transform: translateX(-8px);\n  transition: opacity 60ms var(--ease-out-motion), transform 0ms linear 60ms;\n}\n.lintje-nav__separator {\n  position: absolute;\n  left: 14px; right: 14px;\n  top: 50%;\n  height: 1px;\n  background: var(--color-nav-line);\n  opacity: 0;\n  transform: scaleX(0);\n  transform-origin: left center;\n  transition: transform 140ms var(--ease-out-motion), opacity 0ms linear 140ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__separator {\n  opacity: 1;\n  transform: none;\n  transition: transform 160ms var(--ease-in-motion) 60ms;\n}\n\n/* One row in every mode. A 4 px border + 22 px padding centres the 20 px icon in the 72 px rail,\n   in line with the logo. Expanding animates only the width, so the icon stays in place. */\n.lintje-nav__item {\n  position: relative;\n  height: var(--h-nav-row);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--space-3);\n  padding: 0 22px;\n  border-left: var(--nav-edge) solid transparent;\n  font-size: 1rem;\n  color: var(--color-nav-text);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-nav__item:hover:not(.is-no-page):not(.is-no-access) {\n  background: var(--color-nav-hover);\n}\n.lintje-nav__item.is-active {\n  background: var(--color-nav-active);\n  border-left-color: var(--color-nav-active-edge);\n  color: var(--color-nav-active-text);\n  /* Not bold: the bold cut sets narrower and reads as another font size beside its neighbours. */\n}\n.lintje-nav__item:focus-visible { outline-offset: -3px; }\n\n.lintje-nav__item.is-no-page { color: var(--color-nav-disabled); cursor: default; }\n.lintje-nav__item.is-no-access { color: var(--color-nav-disabled); text-decoration: line-through; cursor: not-allowed; }\n\n.lintje-nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }\n.lintje-nav--rail.is-expanded .lintje-nav__label,\n.lintje-nav--rail.is-expanded .lintje-nav__metric {\n  animation: lintje-nav-text-in var(--dur-base) var(--ease-in-motion) 80ms backwards;\n}\n@keyframes lintje-nav-text-in { from { opacity: 0; transform: translateX(-8px); } }\n.lintje-nav__metric { font-size: 0.875rem; color: var(--color-nav-text-sub); flex: none; }\n.lintje-nav__item.is-no-access .lintje-nav__metric { text-decoration: none; }\n.lintje-nav__item.is-no-page .lintje-nav__metric { color: var(--color-nav-disabled); }\n\n/* The badge is the primitive's (`badge.css` adopted by the shell). In the rail a word (\"NIEUW\")\n   does not fit: it becomes a dot, so the rail does not overflow. */\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__badge {\n  position: absolute; top: 2px; right: var(--space-1);\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__badge--new {\n  min-width: 8px; width: 8px; height: 8px; padding: 0;\n  border-radius: 999px;\n  font-size: 0; overflow: hidden;\n}\n\n/* Environment band, only outside production. Its fill is the theme's accent, not the attention\n   status: on `defensie` (menu `#E17000`) the accent draws a blue band that reads against it. */\n.lintje-nav__environment {\n  position: relative;\n  flex: none;\n  height: 2rem;\n  margin: 0;\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 2rem;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.lintje-nav__environment-label,\n.lintje-nav__environment-short { position: absolute; inset: 0; }\n.lintje-nav__environment-label {\n  transition: opacity 160ms var(--ease-in-motion) 80ms;\n}\n.lintje-nav__environment-short { opacity: 0; transition: opacity 60ms var(--ease-out-motion); }\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__environment-label { opacity: 0; transition: opacity 60ms var(--ease-out-motion); }\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__environment-short { opacity: 1; transition: opacity 160ms var(--ease-in-motion) 80ms; }\n\n.lintje-nav__feedback { flex: none; }\n.lintje-nav__version { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .02em; margin-left: auto; }\n/* Without a contact the version gets a row with the menu row's geometry, so the user block does\n   not move; not `.lintje-nav__item`, which carries a hover. */\n.lintje-nav__version-row {\n  flex: none;\n  height: var(--h-nav-row);\n  margin: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 22px;\n  border-left: var(--nav-edge) solid transparent;\n}\n\n/* \"Afmelden\": a real form, because signing out is a POST that leaves the page. */\n/* The form is `hidden` in the rail, not transparent, so the button is out of the tab order. */\n.lintje-nav__logout { flex: none; margin-left: auto; }\n.lintje-nav__logout[hidden] { display: none; }\n.lintje-nav__logout-button {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  /* Quiet at rest; full text colour on hover and focus. */\n  color: var(--color-nav-text-sub);\n  background: transparent;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-nav__logout-button:hover,\n.lintje-nav__logout-button:focus-visible { background: var(--color-nav-hover); color: var(--color-nav-text); }\n.lintje-nav__logout-text { font-size: 0.875rem; font-weight: 700; white-space: nowrap; padding: 0 var(--space-2); }\n\n.lintje-nav__footer {\n  flex: none;\n  display: flex; align-items: center; gap: 10px;\n  padding: var(--space-4) var(--space-5) var(--space-5) var(--space-4);\n  border-top: 1px solid var(--color-nav-line);\n  font-size: 1rem;\n}\n/* As high as name and role together (two 1.25rem lines); the left padding keeps it centred in\n   the rail. */\n.lintje-nav__avatar {\n  width: 2.5rem; height: 2.5rem; flex: none;\n  display: flex; align-items: center; justify-content: center;\n  border-radius: var(--radius-round);\n  background: var(--color-nav-avatar-bg);\n  color: var(--color-nav-avatar-text);\n  font-size: 1rem; font-weight: 700;\n}\n/* Name and role fade and slide in like the headings; `nowrap` keeps one line. */\n.lintje-nav__user {\n  display: flex; flex-direction: column; line-height: 1.25rem;\n  min-width: 0; flex: 1 1 auto; white-space: nowrap;\n  transition: opacity 160ms var(--ease-in-motion) 80ms, transform var(--dur-base) var(--ease-in-motion) 80ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__user { opacity: 0; transform: translateX(-8px); transition: none; }\n.lintje-nav__user > b,\n.lintje-nav__role { overflow: hidden; text-overflow: ellipsis; }\n.lintje-nav__role { font-size: 0.875rem; color: var(--color-nav-text-sub); }\n\n:where(.lintje-shell.is-phone) .lintje-nav,\n:where(.lintje-shell.is-phone) .lintje-nav__scrim { display: none; }\n\n/* An emblem's black, if it has any, draws in the menu's text colour (`currentColor`). */\n.lintje-nav__home { display: block; flex: none; color: var(--color-nav-text); }\n\n\n@media print { .lintje-nav, .lintje-nav__scrim { display: none; } }\n\n/* Forced colours: the active row is a fill and a 4 px edge; the fill is dropped and the edge\n   turns Highlight. A row without a page or access is GrayText. The ring is Highlight. The\n   shadow is dropped, so an outline keeps the menu's edge against the page. */\n@media (forced-colors: active) {\n  .lintje-nav { outline: 1px solid CanvasText; }\n  .lintje-nav :focus-visible { outline-color: Highlight; }\n  .lintje-nav__item { border-left-color: Canvas; }\n  .lintje-nav__item.is-active { border-left-color: Highlight; }\n  .lintje-nav__item.is-no-page,\n  .lintje-nav__item.is-no-access { color: GrayText; }\n  .lintje-nav__avatar { border: 1px solid CanvasText; }\n  .lintje-nav__thumb { forced-color-adjust: none; background: CanvasText; }\n}\n", J = "\n/* One region: the open menu's dialog and the box its focus trap keeps Tab inside. It shows no\n   ring when the trap pulls back stray focus. The region sticks, not the header: a sticky box\n   stays inside its parent, and this one is as tall as the header. */\n.lintje-mobile-chrome { flex: none; position: sticky; top: 0; z-index: 25; }\n.lintje-mobile-chrome:focus { outline: none; }\n\n.lintje-mobile-header {\n  display: none;\n  height: var(--h-mobile-header);\n  flex: none;\n  background: var(--color-nav-bg);\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0 var(--space-4);\n  /* Tools that do not fit must not widen the page, or a phone zooms out and they seem to fit\n     (`headerCompact`). Sideways only: the focus ring stays inside the padding. */\n  overflow-x: clip;\n}\n:where(.lintje-shell.is-phone) .lintje-mobile-header { display: flex; }\n/* On the theme fill the ring is the on-theme one, as in the desktop menu. */\n.lintje-mobile-header :focus-visible,\n.lintje-mobile-menu :focus-visible { outline-color: var(--color-focus-on-theme); }\n/* \"Weergave\" and \"Delen\" open from this header as sheets on the page's surface: standard ring. */\n.lintje-mobile-header .lintje-view__popover :focus-visible,\n.lintje-mobile-header .lintje-share__popover :focus-visible { outline-color: var(--color-focus); }\n\n.lintje-mobile-header__actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }\n.lintje-mobile-header__button {\n  height: var(--h-touch);\n  padding: 0 var(--space-3);\n  background: var(--color-nav-active);\n  color: var(--color-nav-text);\n  border: 1px solid var(--color-nav-line);\n  font-size: 0.875rem;\n  font-weight: 700;\n  display: flex; align-items: center; justify-content: center; gap: var(--space-2);\n  /* Square when only the glyph shows (`headerCompact`). */\n  min-width: var(--h-touch);\n}\n/* Without room the words are read, not shown: the glyph and the badge stay. */\n.lintje-mobile-header.is-compact .lintje-mobile-header__word {\n  position: absolute;\n  width: 1px; height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n/* The modified-filters count is the primitive badge's `attention` tone: near-black on the\n   orange, because white on #E17000 is 3.2:1. */\n\n.lintje-mobile-menu {\n  position: fixed;\n  inset: var(--h-mobile-header) 0 0 0;\n  z-index: 24;\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  animation: lintje-menu-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-mobile-menu.is-leaving {\n  animation: lintje-menu-out var(--dur-sheet) var(--ease-out-motion) forwards;\n  pointer-events: none;\n}\n.lintje-mobile-menu__list { flex: 1; padding-bottom: var(--space-4); }\n.lintje-mobile-menu__heading {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-nav-text-sub);\n  padding: 22px var(--space-5) 6px;\n}\n.lintje-mobile-menu__item {\n  height: var(--h-touch);\n  display: flex; align-items: center; gap: var(--space-3);\n  padding: 0 var(--space-5);\n  border-left: var(--nav-edge) solid transparent;\n  color: var(--color-nav-text);\n  font-size: 1rem;\n  text-decoration: none;\n}\n.lintje-mobile-menu__item.is-active {\n  background: var(--color-nav-active);\n  border-left-color: var(--color-nav-active-edge);\n  color: var(--color-nav-active-text);\n  /* Not bold: the bold cut sets narrower and reads as another font size beside its neighbours. */\n}\n.lintje-mobile-menu__item.is-muted { color: var(--color-nav-disabled); }\n.lintje-mobile-menu__label { flex: 1; }\n.lintje-mobile-menu__meta { font-size: 0.875rem; color: var(--color-nav-disabled); flex: none; }\n/* The environment band and the feedback row with the version: below 768 px there is no rail,\n   and a page's own footer is the host's, so this is the only place they can stand. */\n.lintje-mobile-menu__environment {\n  flex: none;\n  height: 2rem;\n  margin: 0;\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 2rem;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.lintje-mobile-menu__feedback { flex: none; margin: 0; }\n.lintje-mobile-menu__version {\n  flex: none;\n  margin-left: auto;\n  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .02em;\n  color: var(--color-nav-text-sub);\n}\n\n.lintje-mobile-header__home { display: block; flex: none; color: var(--color-nav-text); }\n\n\n@media print { .lintje-mobile-header, .lintje-mobile-menu { display: none; } }\n\n/* Forced colours: the active row's 4 px edge is Highlight, a muted row GrayText. */\n@media (forced-colors: active) {\n  .lintje-mobile-header :focus-visible,\n  .lintje-mobile-menu :focus-visible { outline-color: Highlight; }\n  .lintje-mobile-header .lintje-view__popover :focus-visible,\n  .lintje-mobile-header .lintje-share__popover :focus-visible { outline-color: Highlight; }\n  .lintje-mobile-menu__item { border-left-color: Canvas; }\n  .lintje-mobile-menu__item.is-active { border-left-color: Highlight; }\n  .lintje-mobile-menu__item.is-muted { color: GrayText; }\n}\n", Ne = "/* The bar, the two toggle groups and the share popover are all drawn by the shell itself. */\n\n.lintje-top-bar {\n  height: var(--h-topbar);\n  flex: none;\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  background: var(--color-bg-surface);\n  border-bottom: 1px solid var(--color-border-default);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n}\n/* The name and the page's name share a baseline and stand in the middle of the bar as one. */\n.lintje-top-bar__name { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }\n.lintje-top-bar__words { display: flex; align-items: baseline; gap: 6px; min-width: 0; }\n/* The dashboard's name is a word, not a line, so it uses `--color-accent-text`. */\n.lintje-top-bar__dashboard {\n  font: var(--text-dashboard);\n  color: var(--color-accent-text);\n  white-space: nowrap;\n}\n.lintje-top-bar__page {\n  font-size: 1rem;\n  color: var(--color-text-muted);\n  opacity: 0;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n  white-space: nowrap;\n}\n.lintje-top-bar__page.is-visible { opacity: 1; }\n\n.lintje-top-bar__actions { display: flex; flex: none; align-items: center; gap: var(--space-3); }\n.lintje-top-bar__key { margin-left: var(--space-1); }\n/* The tools of the navigation bar stand here on the page's surface; an element with a shadow\n   root declares the tokens again on its own host, so they are set on each one too. */\n.lintje-top-bar__actions,\n.lintje-top-bar__actions > * {\n  --color-nav-text: var(--color-text-primary);\n  --color-nav-hover: var(--color-bg-subtle);\n  --lintje-tool-height: var(--h-button-chrome);\n}\n\n.lintje-toggle-group {\n  display: flex;\n  height: var(--h-button-chrome);\n  border: 1px solid var(--color-border-strong);\n}\n.lintje-toggle-group__option {\n  position: relative;\n  width: var(--h-button-chrome);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* Without a file for its icon the option shows its short Dutch word instead.\n   The group keeps its height; only the option gets as wide as the word. */\n.lintje-toggle-group__option--text {\n  width: auto;\n  padding: 0 var(--space-3);\n  font-size: 0.875rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n.lintje-toggle-group__option:hover { background: var(--color-bg-subtle); }\n/* A 40 px option reaches the 48 px target through a transparent hit area 4 px above and\n   below; the options of a group touch, so it does not reach sideways. */\n.lintje-toggle-group__option::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n/* The chosen half has no border of its own — the group draws one around both —\n   so the primary-fill border is an inset ring: the same\n   1 px line, drawn inside the box, so neither half moves a pixel. Invisible in\n   light (the token is the primary there), the tint in dark. */\n.lintje-toggle-group__option.is-active {\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}\n\n/* The panels' side inset: their own as they hang from a tool, the filter sheet's as a sheet. */\n.lintje-view__popover,\n.lintje-share__popover { --lintje-panel-inset: 14px; }\n\n/* \"Weergave\": the share menu's panel, with a group of words under each heading. */\n.lintje-view { position: relative; }\n/* A panel sets the text colour of its surface: on the navigation bar it would take the bar's. */\n.lintje-view__popover {\n  position: absolute;\n  right: 0; top: calc(100% + 4px);\n  z-index: 41;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 0;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-view__row { display: flex; padding: var(--space-1) var(--lintje-panel-inset) var(--space-2); }\n/* A theme's name stays one line; the panel grows to it. */\n.lintje-view__themes { white-space: nowrap; }\n\n.lintje-share { position: relative; }\n.lintje-share__scrim { position: fixed; inset: 0; z-index: 40; }\n.lintje-share__popover {\n  position: absolute;\n  right: 0; top: calc(100% + 4px);\n  z-index: 41;\n  width: 18.75rem;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 0;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-share__heading {\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  padding: var(--space-3) var(--lintje-panel-inset) 4px;\n}\n.lintje-share__item {\n  width: 100%;\n  display: flex; align-items: center; gap: 10px;\n  min-height: var(--h-target);\n  padding: 0 var(--lintje-panel-inset);\n  font-size: 1rem;\n  text-align: left;\n  color: var(--color-text-primary);\n}\n.lintje-share__item:hover { background: var(--color-bg-subtle); }\n/* Where an icon is still missing: the label keeps the column's text edge. */\n.lintje-share__gap { width: 16px; flex: none; }\n.lintje-share__qr {\n  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);\n  padding: var(--space-2) var(--lintje-panel-inset) var(--space-3);\n}\n.lintje-share__hint { text-align: center; }\n.lintje-share__code { align-self: stretch; }\n.lintje-share__footer {\n  font: var(--text-meta); color: var(--color-text-muted);\n  padding: var(--space-2) var(--lintje-panel-inset) 0;\n  margin-top: var(--space-2);\n  border-top: 1px solid var(--color-border-default);\n}\n\n:where(.lintje-shell.is-phone) .lintje-top-bar { display: none; }\n\n/* Below 768 px \"Weergave\" and \"Delen\" open from below, as the filter sheet does. A phone has its\n   own way to a phone, so the QR code is not offered there. */\n:where(.lintje-shell.is-phone) .lintje-share__scrim {\n  z-index: 60;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n:where(.lintje-shell.is-phone) .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-share__popover,\n:where(.lintje-shell.is-phone) .lintje-navbar .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-navbar .lintje-share__popover {\n  position: fixed;\n  inset: auto 0 0 0;\n  z-index: 61;\n  width: auto;\n  max-height: 88vh;\n  overflow-y: auto;\n  padding-bottom: var(--space-4);\n  border: 0;\n  border-top: 1px solid var(--color-border-popover);\n  box-shadow: none;\n  animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n}\n:where(.lintje-shell.is-phone) .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-share__popover { padding-top: 0; --lintje-panel-inset: var(--space-4); }\n:where(.lintje-shell.is-phone) .lintje-view__popover:focus,\n:where(.lintje-shell.is-phone) .lintje-share__popover:focus { outline: none; }\n:where(.lintje-shell.is-phone) .lintje-share__phone { display: none; }\n/* The filter sheet's head; it stays while the sheet scrolls. */\n.lintje-share__header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex; align-items: center; gap: var(--space-2);\n  margin-bottom: var(--space-2);\n  padding: var(--space-4);\n  background: var(--color-bg-surface);\n  border-bottom: 1px solid var(--color-border-popover);\n}\n.lintje-share__title { flex: 1; margin: 0; font: var(--text-h2); }\n\n\n/* On paper the chrome is not part of the page. */\n@media print { .lintje-top-bar { display: none; } }\n\n/* Forced colours: the chosen half is carried by its fill and an inset\n   ring, both of which the browser drops. Every half takes a 1 px border inside\n   its own box — Canvas at rest, Highlight when chosen — so nothing moves. */\n@media (forced-colors: active) {\n  .lintje-toggle-group__option { border: 1px solid Canvas; }\n  .lintje-toggle-group__option.is-active { border-color: Highlight; }\n}\n", Y = "lintje-shell-main", X = (e) => "links" in e, Z = (e) => e?.navigation?.flatMap((e) => X(e) ? e.links : [e]).find((e) => e.active);
+var Ae = "/* Header of the top layout, drawn by `header.ts` inside the caller's shadow root. */\n\n/* The logo bar sits above the veil, so an open submenu does not dim it. A box wider than a narrow\n   phone is cut at both sides alike, which keeps the ribbon centred. */\n.lintje-logobar {\n  position: relative;\n  z-index: 31;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  min-height: var(--h-logobar);\n  overflow: hidden;\n  background: var(--color-logobar-bg);\n  color: var(--color-logobar-text);\n}\n.lintje-logobar__home { display: block; flex: none; color: inherit; }\n/* The logo link's ring is drawn inside its box (`focus-inset`): the bar cuts what stands outside\n   its top edge. */\n\n/* The environment outside production: the accent, not a status. */\n.lintje-logobar__environment {\n  position: absolute;\n  top: var(--space-6);\n  right: calc(var(--page-pad-x) + var(--page-gutter));\n  height: var(--h-chip);\n  margin: 0;\n  padding: 0 var(--space-3);\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  line-height: var(--h-chip);\n  white-space: nowrap;\n}\n.lintje-logobar__environment-short { display: none; }\n/* On a phone the organisation's name reaches the right edge: the block shrinks to three letters above it. */\n:where(.lintje-shell.is-phone) .lintje-logobar__environment {\n  top: var(--space-2);\n  right: var(--space-4);\n  height: var(--h-chip-field);\n  line-height: var(--h-chip-field);\n}\n/* The full name stays for a screen reader; the three letters are only seen. */\n:where(.lintje-shell.is-phone) .lintje-logobar__environment-label {\n  position: absolute;\n  width: 1px; height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n:where(.lintje-shell.is-phone) .lintje-logobar__environment-short { display: inline; }\n\n/* The bar is the submenu's positioning context, which is why a group is not one. Hover, active\n   and edge are set on the bar for what inherits, and on each element at its end, because an\n   element with a shadow root declares the tokens again on its own host. */\n.lintje-navbar,\n.lintje-navbar__end > * {\n  --color-nav-hover: var(--color-navbar-hover);\n  --color-nav-active: var(--color-navbar-active);\n  --color-nav-active-edge: var(--color-navbar-active-edge);\n}\n.lintje-navbar__end > * { --lintje-tool-height: var(--h-navbar); }\n/* The colour runs to the edges; the content keeps to `--page-gutter`. */\n.lintje-navbar {\n  position: relative;\n  z-index: 30;\n  display: flex;\n  align-items: stretch;\n  justify-content: space-between;\n  gap: 0 var(--space-4);\n  height: var(--h-navbar);\n  padding: 0 calc(var(--space-3) + var(--page-gutter)) 0\n    calc(var(--page-pad-x) - var(--space-5) + var(--page-gutter));\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n}\n/* Both widths are measured (`SubmenuController`): neither may depend on whether the entries or\n   \"Menu\" stand there. */\n.lintje-navbar__start { display: flex; flex: 1 1 auto; align-items: stretch; min-width: 0; }\n.lintje-navbar__entries { display: flex; flex: 1 1 0; align-items: stretch; min-width: 0; }\n.lintje-navbar__list { display: flex; flex: none; align-items: stretch; width: max-content; }\n/* Hanging from the bar's end, the overflow falls off the left, where the page gains no scroll. */\n.lintje-navbar__list.is-hidden {\n  position: absolute;\n  top: 0;\n  right: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n.lintje-navbar__group { display: flex; }\n.lintje-navbar__end { display: flex; flex: none; align-items: center; gap: var(--space-1); }\n/* The orange ring disappears on the theme's fill, so the bar takes `--color-focus-on-theme`. The\n   open entry and the submenu stand on the page's surface and keep the standard ring. */\n.lintje-navbar :focus-visible { outline-color: var(--color-focus-on-theme); }\n.lintje-navbar .lintje-navbar__entry.is-open:focus-visible,\n.lintje-navbar .lintje-navbar__submenu :focus-visible { outline-color: var(--color-focus); }\n\n/* The edge is always there on both sides so the word stays centred; transparent until active. */\n.lintje-navbar__entry {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  box-sizing: border-box;\n  height: var(--h-navbar);\n  padding: 0 var(--space-5);\n  border-top: var(--nav-edge) solid transparent;\n  border-bottom: var(--nav-edge) solid transparent;\n  color: var(--color-nav-text);\n  font: var(--text-body);\n  white-space: nowrap;\n  text-decoration: none;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-navbar__entry:hover:not(.is-unavailable) { background: var(--color-navbar-hover); }\n.lintje-navbar__entry:hover:not(.is-unavailable) .lintje-navbar__label { text-decoration: underline; }\n/* Not bold: the bold cut sets narrower and reads as another size beside its neighbours. */\n.lintje-navbar__entry.is-active {\n  background: var(--color-navbar-active);\n  border-bottom-color: var(--color-navbar-active-edge);\n  color: var(--color-nav-active-text);\n}\n.lintje-navbar__entry.is-open,\n.lintje-navbar__entry.is-open:hover {\n  background: var(--color-bg-surface);\n  border-bottom-color: transparent;\n  color: var(--color-navbar-open-text);\n}\n.lintje-navbar__entry.is-open .lintje-navbar__label { text-decoration: none; }\n.lintje-navbar__entry.is-unavailable { color: var(--color-nav-disabled); cursor: default; }\n\n/* The shadow falls down only: `clip-path` cuts what would fall on the bar, so the open entry and\n   the panel stay one shape. `--lintje-navbar-room` is measured. */\n.lintje-navbar__submenu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  padding: var(--space-8) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-10);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border-bottom: 1px solid var(--color-border-default);\n  box-shadow: var(--shadow-popover);\n  clip-path: inset(0 0 -32px 0);\n  max-height: var(--lintje-navbar-room, calc(100dvh - var(--h-navbar)));\n  box-sizing: border-box;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n.lintje-navbar__heading {\n  margin: var(--space-6) 0 var(--space-3);\n  color: var(--color-text-muted);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n}\n.lintje-navbar__heading:first-child { margin-top: 0; }\n.lintje-navbar__pages {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  animation:\n    lintje-fade-in var(--dur-popover) linear,\n    lintje-drop-in var(--dur-submenu) ease;\n}\n@media (max-width: 1023px) {\n  .lintje-navbar__pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n.lintje-navbar__item { display: flex; }\n\n/* The 1 px edge is always there, so hover moves nothing. */\n.lintje-navbar__page {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  box-sizing: border-box;\n  min-width: 0;\n  min-height: 4rem;\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-subtle);\n  border: 1px solid transparent;\n  color: var(--color-text-primary);\n  font: var(--text-body);\n  text-decoration: none;\n  transition: border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-navbar__page-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }\n.lintje-navbar__page .lintje-navbar__label { font-weight: 700; }\n.lintje-navbar__metric { color: var(--color-text-muted); font: var(--text-small); }\n.lintje-navbar__metric-value { color: var(--color-text-primary); }\n.lintje-navbar__page:hover:not(.is-unavailable) { border-color: var(--color-accent-line); }\n.lintje-navbar__page:hover:not(.is-unavailable) .lintje-navbar__label { text-decoration: underline; }\n.lintje-navbar__page.is-active {\n  box-shadow: inset var(--nav-edge) 0 0 var(--color-accent-line);\n  color: var(--color-accent-text);\n}\n.lintje-navbar__page.is-unavailable,\n.lintje-navbar__page.is-unavailable .lintje-navbar__metric-value { color: var(--color-text-muted); cursor: default; }\n.lintje-navbar__page.is-no-access .lintje-navbar__label { text-decoration: line-through; }\n\n/* Fixed to the viewport: the header may stand in a box of its own height above the page. */\n.lintje-header-scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 20;\n  background: var(--color-overlay-nav);\n  pointer-events: none;\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n@media print {\n  .lintje-logobar, .lintje-navbar, .lintje-header-scrim { display: none; }\n}\n\n/* Forced colours: the browser drops the fill that carries the active page and the open group. */\n@media (forced-colors: active) {\n  .lintje-navbar { border-bottom: 1px solid CanvasText; }\n  .lintje-navbar__entry.is-active { border-bottom-color: Highlight; }\n  .lintje-navbar__entry.is-open { outline: 1px solid CanvasText; outline-offset: -1px; }\n  .lintje-navbar__entry.is-unavailable,\n  .lintje-navbar__page.is-unavailable { color: GrayText; }\n  .lintje-navbar__page { border-color: CanvasText; }\n  .lintje-navbar__page.is-active { border-left: var(--nav-edge) solid Highlight; }\n  .lintje-navbar__page.is-unavailable { border-color: GrayText; }\n  .lintje-navbar__submenu { border: 1px solid CanvasText; }\n  .lintje-navbar :focus-visible,\n  .lintje-navbar .lintje-navbar__entry.is-open:focus-visible,\n  .lintje-navbar .lintje-navbar__submenu :focus-visible { outline-color: Highlight; }\n}\n", je = ":host { display: block; min-width: 0; min-height: 100vh; }\n:host([hidden]) { display: none; }\n/* A short page is one sheet, not one sheet with the rest left empty. */\n@media print { :host { min-height: 0; } }\n\n/* ------------------------------------------------------------------------ */\n\n/*\n * The page's left edge, for what pins itself to the viewport (the filter bar): the menu's width\n * beside the page, nothing above it. Custom properties reach the slotted content.\n */\n.lintje-shell {\n  --lintje-shell-left: 0px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: inherit;\n  background: var(--color-bg-page);\n  color: var(--color-text-primary);\n}\n/* A specimen's bars (z-index 25–31) would otherwise cover the outer shell's open menus. */\n.lintje-shell.is-nested { isolation: isolate; }\n.lintje-shell--side { --lintje-shell-left: var(--w-rail); flex-direction: row; }\n@media (min-width: 1440px) {\n  .lintje-shell--side:not(.is-unpinned) { --lintje-shell-left: var(--w-nav); }\n}\n.lintje-shell--side:where(.is-phone) { --lintje-shell-left: 0px; }\n.lintje-shell__column {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* \"Naar de inhoud\": hidden until focused. The ring is drawn inside the box (`focus-inset`):\n   outside it would lie on the theme fill (1.89:1, on Defensie 1:1); inside, its neighbour is\n   white. */\n.lintje-shell__skip {\n  position: absolute;\n  top: var(--space-2);\n  left: var(--space-2);\n  z-index: 50;\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--h-touch);\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-bg-surface);\n  color: var(--color-link);\n  font: var(--text-ui);\n  text-decoration: underline;\n  box-shadow: var(--shadow-popover);\n}\n.lintje-shell__skip:not(:focus) {\n  width: 1px;\n  height: 1px;\n  min-height: 0;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  box-shadow: none;\n}\n\n/* The main region takes the skip link's focus; it is not a control and draws no ring. */\n.lintje-shell__main {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  min-width: 0;\n}\n.lintje-shell__main:focus { outline: none; }\n/* Without content the last edge-to-edge part takes the room left: a conversation keeps its\n   question box at the bottom of a short page. */\n.lintje-shell__main.is-bare ::slotted([slot='full']) { flex: 1 0 auto; }\n\n/* The content keeps to the design system's maximum width, as the bars above it do. */\n.lintje-shell__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--grid-gutter);\n  padding: var(--page-pad-y) calc(var(--page-pad-x) + var(--page-gutter)) var(--space-10);\n}\n.lintje-shell__content[hidden] { display: none; }\n:where(.lintje-shell.is-phone) .lintje-shell__content { padding: var(--space-4) var(--space-4) var(--space-8); gap: var(--space-3); }\n\n/*\n * Top layout. The navigation bar cannot be `sticky`: it would stick inside the header's own box\n * and leave with it, so its slot keeps the bar's height (`--h-navbar`) and the bar is pinned\n * once the slot has left the viewport.\n */\n.lintje-shell__sentinel { height: 1px; margin-bottom: -1px; }\n.lintje-shell__nav { position: relative; z-index: 25; min-height: var(--h-navbar); }\n.lintje-shell__nav.is-stuck .lintje-navbar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n\n/* Below 768 px the mobile header is the bar under the logo bar; its slot keeps the height. */\n.lintje-shell__mobile-bar { height: var(--h-topbar); }\n.lintje-shell__mobile-pin { position: relative; z-index: 25; }\n.lintje-shell__mobile-bar.is-stuck .lintje-shell__mobile-pin {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n}\n.lintje-shell--top .lintje-mobile-header {\n  position: static;\n  height: var(--h-topbar);\n  align-items: center;\n  gap: var(--space-3);\n}\n.lintje-shell--top .lintje-mobile-header__actions { margin-top: 0; flex: none; }\n.lintje-shell--top .lintje-mobile-menu {\n  position: absolute;\n  inset: 100% 0 auto 0;\n  height: calc(100dvh - var(--h-topbar));\n}\n/* 16 px so two lines fit inside the 56 px bar; longer is cut with an ellipsis. */\n.lintje-mobile-header__title {\n  display: -webkit-box;\n  min-width: 0;\n  overflow: hidden;\n  color: var(--color-nav-text);\n  font: var(--text-dashboard);\n  font-size: 1rem;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n/* The logo bar already shows the environment. */\n.lintje-shell--top .lintje-mobile-menu__environment { display: none; }\n\n/* The page's one h1; cut before it can push the entries out. */\n.lintje-shell__name {\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: 24rem;\n  margin: 0;\n  padding: 0 var(--space-5);\n  overflow: hidden;\n  color: var(--color-nav-text);\n  font: var(--text-dashboard);\n  line-height: var(--h-navbar);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Bare glyphs in a bar; on the navigation bar their ring is the on-theme one (`header.css`). */\n.lintje-shell__tool {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  width: var(--h-touch);\n  height: var(--lintje-tool-height, var(--h-touch));\n  color: var(--color-nav-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-shell__tool:hover { background: var(--color-nav-hover); }\n.lintje-shell__tool--text {\n  width: auto;\n  padding: 0 var(--space-3);\n  font: var(--text-ui);\n}\n.lintje-navbar .lintje-shell__tool { height: var(--h-navbar); }\n\n/* The panels hang from the bar, not the tool. They stand on the page's surface: standard ring. */\n.lintje-navbar .lintje-view,\n.lintje-navbar .lintje-share { position: static; }\n.lintje-navbar .lintje-view__popover,\n.lintje-navbar .lintje-share__popover {\n  top: 100%;\n  right: calc(var(--space-3) + var(--page-gutter));\n}\n.lintje-navbar .lintje-view__popover :focus-visible,\n.lintje-navbar .lintje-share__popover :focus-visible { outline-color: var(--color-focus); }\n\n.lintje-shell__sheet-user { border-top: 1px solid var(--color-nav-line); }\n\n/* On paper the bars give way to the logo and the application's name; the screen never shows it. */\n.lintje-shell__print-head { display: none; }\n\n@media print {\n  .lintje-shell__skip,\n  .lintje-shell__sentinel,\n  .lintje-shell__nav,\n  .lintje-shell__mobile-bar { display: none; }\n  .lintje-shell__print-head {\n    display: block;\n    border-bottom: 1px solid var(--color-border-default);\n  }\n  .lintje-shell__print-logo {\n    display: flex;\n    justify-content: center;\n    min-height: var(--h-logobar);\n  }\n  .lintje-shell__print-name {\n    margin: 0;\n    padding: var(--space-3) 0;\n    color: var(--color-text-primary);\n    font: var(--text-dashboard);\n  }\n}\n\n@media (forced-colors: active) {\n  .lintje-navbar .lintje-view__popover :focus-visible,\n  .lintje-navbar .lintje-share__popover :focus-visible { outline-color: Highlight; }\n}\n", Me = "\n/* Dark is its own surface, not an inversion: every colour here is a `--color-nav-*` token. */\n.lintje-nav {\n  width: var(--w-nav);\n  flex: none;\n  /* `align-self: flex-start`: a stretched flex child would make sticky do nothing. */\n  position: sticky;\n  top: 0;\n  align-self: flex-start;\n  height: 100vh;\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  /* Above the page also while the rail collapses: with a z-index only while expanded,\n     later positioned content (charts, KPI tiles) painted over the shrinking menu. */\n  z-index: 30;\n  box-shadow: var(--shadow-nav);\n  /* The margin mirrors the width growth, so width + margin-right is 72 px at every moment;\n     otherwise the content jumps 216 px for one frame. */\n  transition:\n    width var(--dur-rail) var(--ease-in-motion),\n    margin-right var(--dur-rail) var(--ease-in-motion);\n}\n/* The orange ring disappears into the theme fill: the menu takes the on-theme ring. */\n.lintje-nav :focus-visible { outline-color: var(--color-focus-on-theme); }\n.lintje-nav--rail { width: var(--w-rail); margin-right: 0; }\n/* Expanding lies on top of the content: 288 px drawn, 72 px taken. A negative right margin does\n   that; `fixed` or `absolute` would make the page jump. */\n.lintje-nav--rail.is-expanded {\n  width: var(--w-nav);\n  margin-right: calc(var(--w-rail) - var(--w-nav));\n}\n/* The overlay behind the expanded rail. A sibling of the nav: inside its stacking context it\n   would darken the menu itself. */\n.lintje-nav__scrim {\n  position: fixed;\n  inset: 0;\n  z-index: 29;\n  background: var(--color-overlay-nav);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dur-rail) var(--ease-in-motion);\n}\n.lintje-nav__scrim.is-visible { opacity: 1; }\n\n.lintje-nav__header {\n  height: var(--h-nav-head);\n  flex: none;\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0 var(--space-4) 0 12px;\n}\n\n.lintje-nav__pin {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  margin-top: 12px;\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-nav-text);\n  background: transparent;\n  flex: none;\n}\n.lintje-nav__pin--text {\n  width: auto;\n  padding: 0 var(--space-2);\n  font-size: 0.875rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n/* The pin and Afmelden: a transparent hit area takes the target to 48 px. */\n.lintje-nav__pin::after,\n.lintje-nav__logout-button::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n.lintje-nav__pin { transition: background var(--dur-hover) var(--ease-in-motion); }\n.lintje-nav__pin:hover { background: var(--color-nav-hover); }\n\n/* No native bar: a styled one takes width in every browser and the rows' fill would stop short\n   of the menu's edge. `NavScrollbar` sizes and places the thumb drawn instead. */\n.lintje-nav__list { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }\n.lintje-nav__list::-webkit-scrollbar { display: none; }\n.lintje-nav__thumb {\n  position: absolute;\n  top: 0; right: 0;\n  width: var(--space-2);\n  height: 0;\n  /* The menu's second ink reads on its fill and on a hovered row. */\n  background: var(--color-nav-text-sub);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n}\n/* There while the pointer is on the menu or a drag lasts; the keyboard's focus shows it at once. */\n.lintje-nav:hover .lintje-nav__thumb,\n.lintje-nav__thumb.is-dragging,\n.lintje-nav__list:focus-within + .lintje-nav__thumb { opacity: 1; pointer-events: auto; }\n.lintje-nav__list:focus-within + .lintje-nav__thumb { transition: none; }\n.lintje-nav__group { display: flex; flex-direction: column; }\n\n/* The same height in both modes, so every row below stays in place when the rail expands. */\n.lintje-nav__section-heading {\n  position: relative;\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-nav-text-sub);\n  padding: 22px var(--space-5) 6px;\n  white-space: nowrap;\n  margin: 0;\n}\n/* A line in the rail, text once it expands: the text fades in 80 ms after the width starts. */\n.lintje-nav__section-label {\n  display: block;\n  transition: opacity 160ms var(--ease-in-motion) 80ms, transform var(--dur-base) var(--ease-in-motion) 80ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__section-label {\n  opacity: 0;\n  transform: translateX(-8px);\n  transition: opacity 60ms var(--ease-out-motion), transform 0ms linear 60ms;\n}\n.lintje-nav__separator {\n  position: absolute;\n  left: 14px; right: 14px;\n  top: 50%;\n  height: 1px;\n  background: var(--color-nav-line);\n  opacity: 0;\n  transform: scaleX(0);\n  transform-origin: left center;\n  transition: transform 140ms var(--ease-out-motion), opacity 0ms linear 140ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__separator {\n  opacity: 1;\n  transform: none;\n  transition: transform 160ms var(--ease-in-motion) 60ms;\n}\n\n/* One row in every mode. A 4 px border + 22 px padding centres the 20 px icon in the 72 px rail,\n   in line with the logo. Expanding animates only the width, so the icon stays in place. */\n.lintje-nav__item {\n  position: relative;\n  height: var(--h-nav-row);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--space-3);\n  padding: 0 22px;\n  border-left: var(--nav-edge) solid transparent;\n  font-size: 1rem;\n  color: var(--color-nav-text);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-nav__item:hover:not(.is-no-page):not(.is-no-access) {\n  background: var(--color-nav-hover);\n}\n.lintje-nav__item.is-active {\n  background: var(--color-nav-active);\n  border-left-color: var(--color-nav-active-edge);\n  color: var(--color-nav-active-text);\n  /* Not bold: the bold cut sets narrower and reads as another font size beside its neighbours. */\n}\n.lintje-nav__item:focus-visible { outline-offset: -3px; }\n\n.lintje-nav__item.is-no-page { color: var(--color-nav-disabled); cursor: default; }\n.lintje-nav__item.is-no-access { color: var(--color-nav-disabled); text-decoration: line-through; cursor: not-allowed; }\n\n.lintje-nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }\n.lintje-nav--rail.is-expanded .lintje-nav__label,\n.lintje-nav--rail.is-expanded .lintje-nav__metric {\n  animation: lintje-nav-text-in var(--dur-base) var(--ease-in-motion) 80ms backwards;\n}\n@keyframes lintje-nav-text-in { from { opacity: 0; transform: translateX(-8px); } }\n.lintje-nav__metric { font-size: 0.875rem; color: var(--color-nav-text-sub); flex: none; }\n.lintje-nav__item.is-no-access .lintje-nav__metric { text-decoration: none; }\n.lintje-nav__item.is-no-page .lintje-nav__metric { color: var(--color-nav-disabled); }\n\n/* The badge is `badge.css`, adopted by the shell. In the rail a word (\"NIEUW\")\n   does not fit: it becomes a dot, so the rail does not overflow. */\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__badge {\n  position: absolute; top: 2px; right: var(--space-1);\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__badge--new {\n  min-width: 8px; width: 8px; height: 8px; padding: 0;\n  border-radius: 999px;\n  font-size: 0; overflow: hidden;\n}\n\n/* Environment band, only outside production. Its fill is the theme's accent, not the attention\n   status: on `defensie` (menu `#E17000`) the accent draws a blue band that reads against it. */\n.lintje-nav__environment {\n  position: relative;\n  flex: none;\n  height: 2rem;\n  margin: 0;\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 2rem;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.lintje-nav__environment-label,\n.lintje-nav__environment-short { position: absolute; inset: 0; }\n.lintje-nav__environment-label {\n  transition: opacity 160ms var(--ease-in-motion) 80ms;\n}\n.lintje-nav__environment-short { opacity: 0; transition: opacity 60ms var(--ease-out-motion); }\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__environment-label { opacity: 0; transition: opacity 60ms var(--ease-out-motion); }\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__environment-short { opacity: 1; transition: opacity 160ms var(--ease-in-motion) 80ms; }\n\n.lintje-nav__feedback { flex: none; }\n.lintje-nav__version { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .02em; margin-left: auto; }\n/* Without a contact the version gets a row with the menu row's geometry, so the user block does\n   not move; not `.lintje-nav__item`, which carries a hover. */\n.lintje-nav__version-row {\n  flex: none;\n  height: var(--h-nav-row);\n  margin: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 22px;\n  border-left: var(--nav-edge) solid transparent;\n}\n\n/* \"Afmelden\": a real form, because signing out is a POST that leaves the page. */\n/* The form is `hidden` in the rail, not transparent, so the button is out of the tab order. */\n.lintje-nav__logout { flex: none; margin-left: auto; }\n.lintje-nav__logout[hidden] { display: none; }\n.lintje-nav__logout-button {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  /* Quiet at rest; full text colour on hover and focus. */\n  color: var(--color-nav-text-sub);\n  background: transparent;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-nav__logout-button:hover,\n.lintje-nav__logout-button:focus-visible { background: var(--color-nav-hover); color: var(--color-nav-text); }\n.lintje-nav__logout-text { font-size: 0.875rem; font-weight: 700; white-space: nowrap; padding: 0 var(--space-2); }\n\n.lintje-nav__footer {\n  flex: none;\n  display: flex; align-items: center; gap: 10px;\n  padding: var(--space-4) var(--space-5) var(--space-5) var(--space-4);\n  border-top: 1px solid var(--color-nav-line);\n  font-size: 1rem;\n}\n/* As high as name and role together (two 1.25rem lines); the left padding keeps it centred in\n   the rail. */\n.lintje-nav__avatar {\n  width: 2.5rem; height: 2.5rem; flex: none;\n  display: flex; align-items: center; justify-content: center;\n  border-radius: var(--radius-round);\n  background: var(--color-nav-avatar-bg);\n  color: var(--color-nav-avatar-text);\n  font-size: 1rem; font-weight: 700;\n}\n/* Name and role fade and slide in like the headings; `nowrap` keeps one line. */\n.lintje-nav__user {\n  display: flex; flex-direction: column; line-height: 1.25rem;\n  min-width: 0; flex: 1 1 auto; white-space: nowrap;\n  transition: opacity 160ms var(--ease-in-motion) 80ms, transform var(--dur-base) var(--ease-in-motion) 80ms;\n}\n.lintje-nav--rail:not(.is-expanded) .lintje-nav__user { opacity: 0; transform: translateX(-8px); transition: none; }\n.lintje-nav__user > b,\n.lintje-nav__role { overflow: hidden; text-overflow: ellipsis; }\n.lintje-nav__role { font-size: 0.875rem; color: var(--color-nav-text-sub); }\n\n:where(.lintje-shell.is-phone) .lintje-nav,\n:where(.lintje-shell.is-phone) .lintje-nav__scrim { display: none; }\n\n/* An emblem's black, if it has any, draws in the menu's text colour (`currentColor`). */\n.lintje-nav__home { display: block; flex: none; color: var(--color-nav-text); }\n\n\n@media print { .lintje-nav, .lintje-nav__scrim { display: none; } }\n\n/* Forced colours: the active row is a fill and a 4 px edge; the fill is dropped and the edge\n   turns Highlight. A row without a page or access is GrayText. The ring is Highlight. The\n   shadow is dropped, so an outline keeps the menu's edge against the page. */\n@media (forced-colors: active) {\n  .lintje-nav { outline: 1px solid CanvasText; }\n  .lintje-nav :focus-visible { outline-color: Highlight; }\n  .lintje-nav__item { border-left-color: Canvas; }\n  .lintje-nav__item.is-active { border-left-color: Highlight; }\n  .lintje-nav__item.is-no-page,\n  .lintje-nav__item.is-no-access { color: GrayText; }\n  .lintje-nav__avatar { border: 1px solid CanvasText; }\n  .lintje-nav__thumb { forced-color-adjust: none; background: CanvasText; }\n}\n", J = "\n/* One region: the open menu's dialog and the box its focus trap keeps Tab inside. It shows no\n   ring when the trap pulls back stray focus. The region sticks, not the header: a sticky box\n   stays inside its parent, and this one is as tall as the header. */\n.lintje-mobile-chrome { flex: none; position: sticky; top: 0; z-index: 25; }\n.lintje-mobile-chrome:focus { outline: none; }\n\n.lintje-mobile-header {\n  display: none;\n  height: var(--h-mobile-header);\n  flex: none;\n  background: var(--color-nav-bg);\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 0 var(--space-4);\n  /* Tools that do not fit must not widen the page, or a phone zooms out and they seem to fit\n     (`headerCompact`). Sideways only: the focus ring stays inside the padding. */\n  overflow-x: clip;\n}\n:where(.lintje-shell.is-phone) .lintje-mobile-header { display: flex; }\n/* On the theme fill the ring is the on-theme one, as in the desktop menu. */\n.lintje-mobile-header :focus-visible,\n.lintje-mobile-menu :focus-visible { outline-color: var(--color-focus-on-theme); }\n/* \"Weergave\" and \"Delen\" open from this header as sheets on the page's surface: standard ring. */\n.lintje-mobile-header .lintje-view__popover :focus-visible,\n.lintje-mobile-header .lintje-share__popover :focus-visible { outline-color: var(--color-focus); }\n\n.lintje-mobile-header__actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); }\n.lintje-mobile-header__button {\n  height: var(--h-touch);\n  padding: 0 var(--space-3);\n  background: var(--color-nav-active);\n  color: var(--color-nav-text);\n  border: 1px solid var(--color-nav-line);\n  font-size: 0.875rem;\n  font-weight: 700;\n  display: flex; align-items: center; justify-content: center; gap: var(--space-2);\n  /* Square when only the glyph shows (`headerCompact`). */\n  min-width: var(--h-touch);\n}\n/* Without room the words are read, not shown: the glyph and the badge stay. */\n.lintje-mobile-header.is-compact .lintje-mobile-header__word {\n  position: absolute;\n  width: 1px; height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n}\n/* The modified-filters count is the badge's `attention` tone: near-black on the\n   orange, because white on #E17000 is 3.2:1. */\n\n.lintje-mobile-menu {\n  position: fixed;\n  inset: var(--h-mobile-header) 0 0 0;\n  z-index: 24;\n  background: var(--color-nav-bg);\n  color: var(--color-nav-text);\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  animation: lintje-menu-in var(--dur-sheet) var(--ease-in-motion);\n}\n.lintje-mobile-menu.is-leaving {\n  animation: lintje-menu-out var(--dur-sheet) var(--ease-out-motion) forwards;\n  pointer-events: none;\n}\n.lintje-mobile-menu__list { flex: 1; padding-bottom: var(--space-4); }\n.lintje-mobile-menu__heading {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-nav-text-sub);\n  padding: 22px var(--space-5) 6px;\n}\n.lintje-mobile-menu__item {\n  height: var(--h-touch);\n  display: flex; align-items: center; gap: var(--space-3);\n  padding: 0 var(--space-5);\n  border-left: var(--nav-edge) solid transparent;\n  color: var(--color-nav-text);\n  font-size: 1rem;\n  text-decoration: none;\n}\n.lintje-mobile-menu__item.is-active {\n  background: var(--color-nav-active);\n  border-left-color: var(--color-nav-active-edge);\n  color: var(--color-nav-active-text);\n  /* Not bold: the bold cut sets narrower and reads as another font size beside its neighbours. */\n}\n.lintje-mobile-menu__item.is-muted { color: var(--color-nav-disabled); }\n.lintje-mobile-menu__label { flex: 1; }\n.lintje-mobile-menu__meta { font-size: 0.875rem; color: var(--color-nav-disabled); flex: none; }\n/* The environment band and the feedback row with the version: below 768 px there is no rail,\n   and a page's own footer is the host's, so this is the only place they can stand. */\n.lintje-mobile-menu__environment {\n  flex: none;\n  height: 2rem;\n  margin: 0;\n  background: var(--color-nav-environment-bg);\n  color: var(--color-nav-environment-text);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: uppercase;\n  text-align: center;\n  line-height: 2rem;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.lintje-mobile-menu__feedback { flex: none; margin: 0; }\n.lintje-mobile-menu__version {\n  flex: none;\n  margin-left: auto;\n  font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: .02em;\n  color: var(--color-nav-text-sub);\n}\n\n.lintje-mobile-header__home { display: block; flex: none; color: var(--color-nav-text); }\n\n\n@media print { .lintje-mobile-header, .lintje-mobile-menu { display: none; } }\n\n/* Forced colours: the active row's 4 px edge is Highlight, a muted row GrayText. */\n@media (forced-colors: active) {\n  .lintje-mobile-header :focus-visible,\n  .lintje-mobile-menu :focus-visible { outline-color: Highlight; }\n  .lintje-mobile-header .lintje-view__popover :focus-visible,\n  .lintje-mobile-header .lintje-share__popover :focus-visible { outline-color: Highlight; }\n  .lintje-mobile-menu__item { border-left-color: Canvas; }\n  .lintje-mobile-menu__item.is-active { border-left-color: Highlight; }\n  .lintje-mobile-menu__item.is-muted { color: GrayText; }\n}\n", Ne = "/* The bar, the two toggle groups and the share popover are all drawn by the shell itself. */\n\n.lintje-top-bar {\n  height: var(--h-topbar);\n  flex: none;\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  background: var(--color-bg-surface);\n  border-bottom: 1px solid var(--color-border-default);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 calc(var(--space-6) + var(--page-gutter));\n}\n/* The name and the page's name share a baseline and stand in the middle of the bar as one. */\n.lintje-top-bar__name { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }\n.lintje-top-bar__words { display: flex; align-items: baseline; gap: 6px; min-width: 0; }\n/* The dashboard's name is a word, not a line, so it uses `--color-accent-text`. */\n.lintje-top-bar__dashboard {\n  font: var(--text-dashboard);\n  color: var(--color-accent-text);\n  white-space: nowrap;\n}\n.lintje-top-bar__page {\n  font-size: 1rem;\n  color: var(--color-text-muted);\n  opacity: 0;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n  white-space: nowrap;\n}\n.lintje-top-bar__page.is-visible { opacity: 1; }\n\n.lintje-top-bar__actions { display: flex; flex: none; align-items: center; gap: var(--space-3); }\n.lintje-top-bar__key { margin-left: var(--space-1); }\n/* The tools of the navigation bar stand here on the page's surface; an element with a shadow\n   root declares the tokens again on its own host, so they are set on each one too. */\n.lintje-top-bar__actions,\n.lintje-top-bar__actions > * {\n  --color-nav-text: var(--color-text-primary);\n  --color-nav-hover: var(--color-bg-subtle);\n  --lintje-tool-height: var(--h-button-chrome);\n}\n\n.lintje-toggle-group {\n  display: flex;\n  height: var(--h-button-chrome);\n  border: 1px solid var(--color-border-strong);\n}\n.lintje-toggle-group__option {\n  position: relative;\n  width: var(--h-button-chrome);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-primary);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* Without a file for its icon the option shows its short Dutch word instead.\n   The group keeps its height; only the option gets as wide as the word. */\n.lintje-toggle-group__option--text {\n  width: auto;\n  padding: 0 var(--space-3);\n  font-size: 0.875rem;\n  font-weight: 700;\n  white-space: nowrap;\n}\n.lintje-toggle-group__option:hover { background: var(--color-bg-subtle); }\n/* A 40 px option reaches the 48 px target through a transparent hit area 4 px above and\n   below; the options of a group touch, so it does not reach sideways. */\n.lintje-toggle-group__option::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n/* The chosen half has no border of its own — the group draws one around both —\n   so the primary-fill border is an inset ring: the same\n   1 px line, drawn inside the box, so neither half moves a pixel. Invisible in\n   light (the token is the primary there), the tint in dark. */\n.lintje-toggle-group__option.is-active {\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}\n\n/* The panels' side inset: their own as they hang from a tool, the filter sheet's as a sheet. */\n.lintje-view__popover,\n.lintje-share__popover { --lintje-panel-inset: 14px; }\n\n/* \"Weergave\": the share menu's panel, with a group of words under each heading. */\n.lintje-view { position: relative; }\n/* A panel sets the text colour of its surface: on the navigation bar it would take the bar's. */\n.lintje-view__popover {\n  position: absolute;\n  right: 0; top: calc(100% + 4px);\n  z-index: 41;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 0;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-view__row { display: flex; padding: var(--space-1) var(--lintje-panel-inset) var(--space-2); }\n/* A theme's name stays one line; the panel grows to it. */\n.lintje-view__themes { white-space: nowrap; }\n\n.lintje-share { position: relative; }\n.lintje-share__scrim { position: fixed; inset: 0; z-index: 40; }\n.lintje-share__popover {\n  position: absolute;\n  right: 0; top: calc(100% + 4px);\n  z-index: 41;\n  width: 18.75rem;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 0;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n.lintje-share__heading {\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  padding: var(--space-3) var(--lintje-panel-inset) 4px;\n}\n.lintje-share__item {\n  width: 100%;\n  display: flex; align-items: center; gap: 10px;\n  min-height: var(--h-target);\n  padding: 0 var(--lintje-panel-inset);\n  font-size: 1rem;\n  text-align: left;\n  color: var(--color-text-primary);\n}\n.lintje-share__item:hover { background: var(--color-bg-subtle); }\n/* Where an icon is still missing: the label keeps the column's text edge. */\n.lintje-share__gap { width: 16px; flex: none; }\n.lintje-share__qr {\n  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);\n  padding: var(--space-2) var(--lintje-panel-inset) var(--space-3);\n}\n.lintje-share__hint { text-align: center; }\n.lintje-share__code { align-self: stretch; }\n.lintje-share__footer {\n  font: var(--text-meta); color: var(--color-text-muted);\n  padding: var(--space-2) var(--lintje-panel-inset) 0;\n  margin-top: var(--space-2);\n  border-top: 1px solid var(--color-border-default);\n}\n\n:where(.lintje-shell.is-phone) .lintje-top-bar { display: none; }\n\n/* Below 768 px \"Weergave\" and \"Delen\" open from below, as the filter sheet does. A phone has its\n   own way to a phone, so the QR code is not offered there. */\n:where(.lintje-shell.is-phone) .lintje-share__scrim {\n  z-index: 60;\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n:where(.lintje-shell.is-phone) .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-share__popover,\n:where(.lintje-shell.is-phone) .lintje-navbar .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-navbar .lintje-share__popover {\n  position: fixed;\n  inset: auto 0 0 0;\n  z-index: 61;\n  width: auto;\n  max-height: 88vh;\n  overflow-y: auto;\n  padding-bottom: var(--space-4);\n  border: 0;\n  border-top: 1px solid var(--color-border-popover);\n  box-shadow: none;\n  animation: lintje-sheet-in var(--dur-sheet) var(--ease-in-motion);\n}\n:where(.lintje-shell.is-phone) .lintje-view__popover,\n:where(.lintje-shell.is-phone) .lintje-share__popover { padding-top: 0; --lintje-panel-inset: var(--space-4); }\n:where(.lintje-shell.is-phone) .lintje-view__popover:focus,\n:where(.lintje-shell.is-phone) .lintje-share__popover:focus { outline: none; }\n:where(.lintje-shell.is-phone) .lintje-share__phone { display: none; }\n/* The filter sheet's head; it stays while the sheet scrolls. */\n.lintje-share__header {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex; align-items: center; gap: var(--space-2);\n  margin-bottom: var(--space-2);\n  padding: var(--space-4);\n  background: var(--color-bg-surface);\n  border-bottom: 1px solid var(--color-border-popover);\n}\n.lintje-share__title { flex: 1; margin: 0; font: var(--text-h2); }\n\n\n/* On paper the chrome is not part of the page. */\n@media print { .lintje-top-bar { display: none; } }\n\n/* Forced colours: the chosen half is carried by its fill and an inset\n   ring, both of which the browser drops. Every half takes a 1 px border inside\n   its own box — Canvas at rest, Highlight when chosen — so nothing moves. */\n@media (forced-colors: active) {\n  .lintje-toggle-group__option { border: 1px solid Canvas; }\n  .lintje-toggle-group__option.is-active { border-color: Highlight; }\n}\n", Y = "lintje-shell-main", X = (e) => "links" in e, Z = (e) => e?.navigation?.flatMap((e) => X(e) ? e.links : [e]).find((e) => e.active);
 function Q(e) {
 	let t = [], n = null;
 	for (let r of e) X(r) ? (n = null, t.push({

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

@@ -1 +1 @@
-export * from '../types/primitives/skeleton/skeleton.js'
+export * from '../types/components/feedback/skeleton/skeleton.js'