npm - lintje - Versions diffs - 0.3.0 → 0.5.0 - Mend

lintje 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (260) hide show

package/dist-elements/tag/shell.js CHANGED Viewed

@@ -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-CVKIPSLx.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-rje9Oz19.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 CHANGED Viewed

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

package/dist-elements/tag/skeleton.js CHANGED Viewed

	@@ -1 +1 @@
1	- export { D as LintjeSkeleton } from "../chunks/base-~~CbmWxUig~~.js";
1	+ export { D as LintjeSkeleton } from "../chunks/base-CVKIPSLx.js";

package/dist-elements/tag/slot-picker.js CHANGED Viewed

@@ -1,6 +1,7 @@
-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 { o as c, p as l } from "../chunks/date-format-mHtZyBys.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, st as a } from "../chunks/base-CVKIPSLx.js";
+import { n as o } from "../chunks/input-DEHA2Z_0.js";
+import { t as s } from "../chunks/input-lQTmOMOz.js";
+import { o as c, p as l } from "../chunks/date-format-DxP9yfDp.js";
 //#region src/components/inputs/slot-picker/slot-picker.css?inline
 var u = "/* The slot picker: a column per day, every time a chip; the radio itself is the shared `choice` input. */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* Every day takes an equal column, however many the host sends. */\n.lintje-slot-picker {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: minmax(0, 1fr);\n  gap: var(--space-3);\n}\n.lintje-slot-picker__day { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }\n.lintje-slot-picker__heading {\n  margin: 0;\n  padding: 0 0 var(--space-1);\n  border-bottom: 1px solid var(--color-border-default);\n  text-align: center;\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n:host([disabled]) .lintje-slot-picker__heading { color: var(--color-text-disabled); }\n\n/* A time is a dense option; the chosen one is quiet, as in the segmented control. */\n.lintje-slot-picker__slot {\n  position: relative;\n  display: flex; align-items: center; justify-content: center; gap: var(--space-1);\n  min-height: var(--h-option);\n  padding: 0 var(--space-2);\n  border: 1px solid var(--color-border-default);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-slot-picker__slot:hover:not(.is-chosen, .is-disabled) { background: var(--color-bg-subtle); }\n.lintje-slot-picker__slot.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  color: var(--color-accent-text);\n  font-weight: 700;\n}\n/* Disabled wins over chosen: the whole chip back to the quiet disabled surface. */\n.lintje-slot-picker__slot.is-disabled {\n  background: var(--color-bg-subtle);\n  border-color: var(--color-border-strong);\n  box-shadow: none;\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n/* The input is hidden, so its focus ring goes on the chip. */\n.lintje-slot-picker__slot:has(.lintje-choice__input:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-slot-picker__full { font: var(--text-small); }\n.lintje-slot-picker__none {\n  margin: 0;\n  padding: var(--space-2) 0;\n  text-align: center;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n/* Without any day the words stand where the days would, at the left. */\n.lintje-field > .lintje-slot-picker__none { padding: 0; text-align: left; }\n\n/* Below 768 px the days stand under each other, each with its times in rows. */\n@media screen and (max-width: 767px) {\n  .lintje-slot-picker { grid-auto-flow: row; gap: var(--space-4); }\n  .lintje-slot-picker__day {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(calc(2 * var(--space-10)), 1fr));\n  }\n  .lintje-slot-picker__heading,\n  .lintje-slot-picker__none { grid-column: 1 / -1; text-align: left; }\n}\n\n/* Forced colours drop the fill and ring: the chosen chip keeps its edge in Highlight. */\n@media (forced-colors: active) {\n  .lintje-slot-picker__slot.is-chosen { border-color: Highlight; box-shadow: none; }\n  .lintje-slot-picker__slot.is-disabled { border-color: GrayText; color: GrayText; }\n  .lintje-slot-picker__slot:has(.lintje-choice__input:focus-visible) { outline-color: Highlight; }\n}\n", d = class extends o {
 	constructor(...e) {

package/dist-elements/tag/sortable-list.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Jt as e, Yt as t, Zt as n, bt as r, en as i, h as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Yt as t, Zt as n, bt as r, en as i, g as a, lt as o, nn as s, st as c, ut as l } from "../chunks/base-CVKIPSLx.js";
 import "./checkbox.js";
 //#region src/components/tables/sortable-list/sortable-list.css?inline
 var u = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-sortable-list { display: flex; flex-direction: column; gap: var(--space-2); }\n\n.lintje-sortable-list__rows {\n  list-style: none; margin: 0; padding: 0;\n  display: flex; flex-direction: column;\n  gap: var(--space-1);\n  font: var(--text-ui);\n}\n\n.lintje-sortable-list__row {\n  position: relative;\n  display: flex; align-items: center;\n  gap: var(--space-2);\n  height: var(--h-touch);\n  padding: 0 var(--space-2);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  color: var(--color-text-primary);\n}\n.lintje-sortable-list__row.is-lifted {\n  z-index: 1;\n  border-color: var(--color-accent-line);\n  box-shadow: var(--shadow-popover);\n  font-weight: 700;\n}\n/* The row follows the pointer through the CSSOM; nothing eases it. */\n.lintje-sortable-list__row.is-dragging { transition: none; }\n\n.lintje-sortable-list__row.is-drop-before::before,\n.lintje-sortable-list__row.is-drop-after::after {\n  content: '';\n  position: absolute;\n  left: -1px; right: -1px;\n  height: 3px;\n  background: var(--color-accent-line);\n  pointer-events: none;\n}\n.lintje-sortable-list__row.is-drop-before::before { top: -4px; }\n.lintje-sortable-list__row.is-drop-after::after { bottom: -4px; }\n\n/* The grip is the only handle, so a finger on the row still scrolls. Its hit area reaches the\n   row's full height, up and down only. */\n.lintje-sortable-list__grip {\n  position: relative;\n  flex: none;\n  display: inline-flex; align-items: center; justify-content: center;\n  width: var(--h-chip-field); height: var(--h-chip-field);\n  color: var(--color-text-muted);\n  cursor: grab;\n  touch-action: none;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-sortable-list__grip::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-sortable-list__grip:hover { color: var(--color-text-primary); }\n.lintje-sortable-list__row.is-lifted .lintje-sortable-list__grip {\n  color: var(--color-accent-text);\n  cursor: grabbing;\n}\n\n.lintje-sortable-list__label {\n  min-width: 0;\n  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n.lintje-sortable-list__check { min-width: 0; }\n\n.lintje-sortable-list__status {\n  margin: 0;\n  min-height: 1lh;\n  font: var(--text-small);\n  color: var(--color-text-muted);\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-sortable-list__row { padding-left: 0; }\n  .lintje-sortable-list__grip { width: var(--h-touch); height: 100%; }\n}\n\n/* Reduced motion: nothing eases; the state still shows at once. */\n@media (prefers-reduced-motion: reduce) {\n  .lintje-sortable-list__grip { transition: none; }\n}\n\n/* Forced colours: the lifted row's shadow is dropped, so its edge turns Highlight; likewise the drop line. */\n@media (forced-colors: active) {\n  .lintje-sortable-list__row.is-lifted { border-color: Highlight; }\n  .lintje-sortable-list__row.is-drop-before::before,\n  .lintje-sortable-list__row.is-drop-after::after { border-top: 3px solid Highlight; }\n}\n";

package/dist-elements/tag/spinner.d.ts CHANGED Viewed

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

package/dist-elements/tag/spinner.js CHANGED Viewed

	@@ -1 +1 @@
1	- export { V as LintjeSpinner } from "../chunks/base-~~CbmWxUig~~.js";
1	+ export { V as LintjeSpinner } from "../chunks/base-CVKIPSLx.js";

package/dist-elements/tag/split-pane.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Gt as e, Jt as t, Kt as n, Yt as r, Zt as i, bt as a, en as o, nn as s, st as c } from "../chunks/base-CbmWxUig.js";
+import { Gt as e, Jt as t, Kt as n, Yt as r, Zt as i, bt as a, en as o, nn as s, st as c } from "../chunks/base-CVKIPSLx.js";
 import "./segmented.js";
 //#region src/components/layout/split-pane/split-pane.css?inline
 var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The first panel's share is `--lintje-split` (a percentage, set through the CSSOM). */\n.lintje-split-pane {\n  display: flex;\n  border: 1px solid var(--color-border-default);\n}\n.lintje-split-pane__pane { min-width: 0; padding: var(--space-4); overflow: auto; }\n.lintje-split-pane__pane--start { flex: 0 0 calc((100% - 9px) * var(--lintje-split, 50) / 100); }\n.lintje-split-pane__pane--end { flex: 1 1 0; }\n\n.lintje-split-pane__strip {\n  flex: 0 0 9px;\n  display: flex; align-items: center; justify-content: center;\n  background: var(--color-bg-subtle);\n  border-left: 1px solid var(--color-border-default);\n  border-right: 1px solid var(--color-border-default);\n  cursor: col-resize;\n  touch-action: none;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-split-pane__handle {\n  flex: none;\n  width: 7px; height: var(--h-touch);\n  background: var(--color-border-heavy);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-split-pane__strip:hover .lintje-split-pane__handle,\n.lintje-split-pane.is-dragging .lintje-split-pane__handle { background: var(--color-accent-line); }\n\n/* Dragging: no text is selected until release. */\n.lintje-split-pane.is-dragging { user-select: none; cursor: col-resize; }\n.lintje-split-pane.is-dragging .lintje-split-pane__strip { background: var(--color-bg-selected); transition: none; }\n\n.lintje-split-pane__choice { display: block; margin-bottom: var(--space-3); }\n.lintje-split-pane--phone { display: block; border: 0; }\n.lintje-split-pane--phone .lintje-split-pane__pane { padding: 0; }\n\n/* Forced colours: the grip is a fill, which the mode drops; it is drawn in the text colour. */\n@media (forced-colors: active) {\n  .lintje-split-pane__handle { forced-color-adjust: none; background: CanvasText; }\n  .lintje-split-pane__strip:hover .lintje-split-pane__handle,\n  .lintje-split-pane.is-dragging .lintje-split-pane__handle { background: Highlight; }\n}\n", u = 5, d = 50, f = 3;

package/dist-elements/tag/status-dot.d.ts CHANGED Viewed

	@@ -1 +1 @@
1	- export * from '../types/~~primitives~~/status-dot/status-dot.js'
1	+ export * from '../types/components/feedback/status-dot/status-dot.js'

package/dist-elements/tag/status-dot.js CHANGED Viewed

	@@ -1 +1 @@
1	- export { k as LintjeStatusDot, A as STATUS_LABEL } from "../chunks/base-~~CbmWxUig~~.js";
1	+ export { k as LintjeStatusDot, A as STATUS_LABEL } from "../chunks/base-CVKIPSLx.js";

package/dist-elements/tag/stepper.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Gt as e, H as t, Jt as n, Kt as r, Yt as i, Zt as a, en as o, lt as s, nn as c, st as l, ut as u } from "../chunks/base-CbmWxUig.js";
+import { Gt as e, H as t, Jt as n, Kt as r, Yt as i, Zt as a, en as o, lt as s, nn as c, st as l, ut as u } from "../chunks/base-CVKIPSLx.js";
 //#region src/components/forms/stepper/stepper.css?inline
 var d = "/* The host is the full width of where it stands: what the steps are measured against. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-stepper { font: var(--text-ui); color: var(--color-text-primary); }\n\n/* The row never wraps: its overflow is what tells the element to stand the steps up. */\n.lintje-stepper__list { display: flex; }\n.lintje-stepper__list--row { flex-direction: row; gap: var(--space-2); overflow: hidden; }\n.lintje-stepper__list--column { flex-direction: column; }\n\n/* The label's line is as tall as the pointer target: the row's `overflow: hidden` would cut off more. */\n.lintje-stepper__step {\n  position: relative;\n  display: flex; align-items: flex-start; gap: var(--space-3);\n  flex: none;\n}\n.lintje-stepper__list--row .lintje-stepper__step { flex: 1 1 auto; white-space: nowrap; }\n.lintje-stepper__list--row .lintje-stepper__step:last-child { flex: none; }\n.lintje-stepper__list--column .lintje-stepper__step:not(:last-child) { padding-bottom: var(--space-4); }\n\n/* The line to the next step: drawn through from a done step, dashed from the current one on. */\n.lintje-stepper__line { border: 0 dashed var(--color-border-heavy); }\n.lintje-stepper__step--done .lintje-stepper__line { border-style: solid; border-color: var(--color-accent-line); }\n/* In the row the line fills the room up to the next marker. */\n.lintje-stepper__list--row .lintje-stepper__body { flex: 1 1 auto; }\n.lintje-stepper__list--row .lintje-stepper__line {\n  flex: 1 1 0;\n  min-width: var(--space-8);\n  border-top-width: 2px;\n}\n/* In the column it runs from the marker's foot to the top of the next one. */\n.lintje-stepper__list--column .lintje-stepper__line {\n  position: absolute;\n  top: calc((var(--h-target) + var(--h-chip-field)) / 2);\n  bottom: calc((var(--h-chip-field) - var(--h-target)) / 2);\n  left: calc(var(--h-chip-field) / 2 - 1px);\n  border-left-width: 2px;\n}\n\n.lintje-stepper__body { display: flex; flex-direction: column; }\n.lintje-stepper__list--column .lintje-stepper__body { min-width: 0; }\n.lintje-stepper__head {\n  display: flex; align-items: center; gap: var(--space-2);\n  min-height: var(--h-target);\n}\n/* What stands under the label starts level with the marker's foot. */\n.lintje-stepper__head + .lintje-stepper__description,\n.lintje-stepper__head + .lintje-stepper__meta { margin-top: calc((var(--h-chip-field) - var(--h-target)) / 2); }\n.lintje-stepper__description { margin: 0 0 var(--space-1); color: var(--color-text-secondary); }\n.lintje-stepper__meta { font: var(--text-meta); color: var(--color-text-secondary); }\n\n.lintje-stepper__marker {\n  display: inline-flex; align-items: center; justify-content: center;\n  flex: none;\n  width: var(--h-chip-field); height: var(--h-chip-field);\n  margin-top: calc((var(--h-target) - var(--h-chip-field)) / 2);\n  border: 1px solid transparent;\n  font-size: 0.875rem; font-weight: 700;\n}\n.lintje-stepper__marker--next { border-color: var(--color-text-muted); color: var(--color-text-muted); font-weight: 400; }\n.lintje-stepper__step--next .lintje-stepper__name { color: var(--color-text-muted); }\n.lintje-stepper__marker--current {\n  background: var(--color-action-primary);\n  border-color: var(--color-action-primary-border);\n  color: var(--color-action-primary-text);\n}\n.lintje-stepper__step--current .lintje-stepper__name { font-weight: 700; }\n/* Done: the frame is a line (3:1), the check stands for a word (4.5:1). */\n.lintje-stepper__marker--done { border-color: var(--color-accent-line); color: var(--color-accent-text); }\n.lintje-stepper__marker--done.is-error { border-color: var(--color-error); color: var(--color-error); }\n\n.lintje-stepper__name--link {\n  position: relative;\n  color: var(--color-link);\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-stepper__name--link::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n.lintje-stepper__name--link:hover { color: var(--color-link-hover); }\n\n.lintje-stepper__errors { font: var(--text-meta); font-weight: 700; color: var(--color-error-text); }\n\n.lintje-stepper--phone { display: flex; flex-direction: column; gap: var(--space-2); }\n.lintje-stepper__summary {\n  display: flex; justify-content: space-between; gap: var(--space-3);\n}\n.lintje-stepper__current { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.lintje-stepper__count { flex: none; color: var(--color-text-muted); }\n\n/* Forced colours: the current step's fill is dropped, so its border turns Highlight. */\n@media (forced-colors: active) {\n  .lintje-stepper__marker--current { border-color: Highlight; }\n}\n";
 //#endregion

package/dist-elements/tag/streaming-text.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Jt as e, Q as t, Yt as n, Zt as r, en as i, nn as a, st as o } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Q as t, Yt as n, Zt as r, en as i, nn as a, st as o } from "../chunks/base-CVKIPSLx.js";
 import { t as s } from "../chunks/sentence-end-8jlqKJ5P.js";
 //#region src/components/feedback/streaming-text/streaming-text.css?inline
 var c = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n/* Plain takes the type of where it stands, past the UI type every element sets on itself. */\n:host([variant='plain']) { font: inherit; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-streaming-text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }\n\n.lintje-streaming-text__box {\n  padding: var(--space-3);\n  background: var(--color-bg-page);\n  border: 1px solid var(--color-border-default);\n  font: var(--text-body);\n  color: var(--color-text-primary);\n  overflow-wrap: anywhere;\n}\n/* Keeps a line break the server sends; slotted prose keeps its own rules. */\n.lintje-streaming-text__plain { white-space: pre-wrap; }\n.lintje-streaming-text__box--waiting {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  font: var(--text-ui);\n}\n.lintje-streaming-text__waiting { color: var(--color-text-muted); }\n\n.lintje-streaming-text__caret {\n  display: inline-block;\n  width: 8px;\n  height: 18px;\n  margin-left: var(--space-1);\n  vertical-align: text-bottom;\n  background: var(--color-accent-line);\n  animation: lintje-caret-blink var(--dur-skeleton) steps(1, end) infinite;\n}\n/* A keyframe only works in the root that uses it. */\n@keyframes lintje-caret-blink {\n  0%   { opacity: 1; }\n  50%  { opacity: 0; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lintje-streaming-text__caret { animation: none; }\n}\n/* Paper holds the text as it stood; the caret only says that more is coming. */\n@media print {\n  .lintje-streaming-text__caret { display: none; }\n}\n\n/* Plain: the surface around it is the box. */\n.lintje-streaming-text--plain .lintje-streaming-text__box {\n  padding: 0;\n  background: transparent;\n  border: 0;\n  font: inherit;\n}\n.lintje-streaming-text--plain .lintje-streaming-text__box--waiting { font: var(--text-ui); }\n\n.lintje-streaming-text__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-4);\n}\n.lintje-streaming-text__note { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-streaming-text__note--error { font: var(--text-meta); font-weight: 700; color: var(--color-error-text); }\n", l = "Gestopt", u = "De verbinding viel weg. De tekst is niet af.", d = class extends e {

package/dist-elements/tag/sub-nav.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Gt as e, H as t, Jt as n, Kt as r, Q as i, Yt as a, Zt as o, at as s, en as c, lt as l, nn as u, ot as d, st as f, ut as p } from "../chunks/base-CbmWxUig.js";
+import { Gt as e, H as t, Jt as n, Kt as r, Q as i, Yt as a, Zt as o, at as s, en as c, lt as l, nn as u, ot as d, st as f, ut as p } from "../chunks/base-CVKIPSLx.js";
 //#region src/components/frame/sub-nav/sub-nav.css?inline
 var m = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Typographic, as the Rijkshuisstijl's side-nav: links in the link colour, the reader's page in\n   the text colour and bold, groups apart by space alone. No fill and no edge. */\n.lintje-sub-nav { font: var(--text-ui); }\n\n.lintje-sub-nav__group + .lintje-sub-nav__group { margin-top: var(--space-6); }\n\n.lintje-sub-nav__heading {\n  margin: 0;\n  padding: var(--space-3) 0 var(--space-1);\n  font-size: var(--label-size);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  line-height: 1.3;\n  text-transform: uppercase;\n  color: var(--color-text-muted);\n}\n\n.lintje-sub-nav__list { list-style: none; margin: 0; padding: 0; }\n\n/* The second level hangs from a line, the width of the separators the house style draws. */\n.lintje-sub-nav__list--nested {\n  margin-bottom: var(--space-1);\n  padding-left: calc(var(--space-6) - 2px);\n  border-left: 2px solid var(--color-border-default);\n}\n\n/* The row reaches past the text column on both sides, so the inset focus ring clears the word. */\n.lintje-sub-nav__link {\n  display: flex; align-items: flex-start; gap: var(--space-2);\n  box-sizing: border-box;\n  min-height: var(--h-nav-row);\n  margin: 0 calc(var(--space-2) * -1);\n  padding: var(--space-3) var(--space-2);\n  border: 0;\n  background: none;\n  font: inherit;\n  line-height: 1.5;\n  color: var(--color-link);\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  transition: color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-sub-nav__link--action { width: calc(100% + var(--space-2) * 2); }\n\n/* Only the word is underlined: an icon or a count under a line reads as part of the link text. */\n.lintje-sub-nav__label { min-width: 0; text-underline-offset: 0.2em; }\n.lintje-sub-nav__link:hover { color: var(--color-link-hover); }\n.lintje-sub-nav__link:hover .lintje-sub-nav__label { text-decoration: underline; }\n\n/* Bold carries the reader's page beside the colour (rule 13); on a fill, the side menu does not. */\n.lintje-sub-nav__link.is-current { color: var(--color-text-primary); font-weight: 700; cursor: default; }\n.lintje-sub-nav__link.is-current .lintje-sub-nav__label { text-decoration: none; }\n.lintje-sub-nav__link.is-ancestor { color: var(--color-text-primary); }\n\n.lintje-sub-nav__link.is-no-page,\n.lintje-sub-nav__link.is-no-access { color: var(--color-text-disabled); cursor: default; }\n.lintje-sub-nav__link.is-no-access { cursor: not-allowed; }\n.lintje-sub-nav__link.is-no-access .lintje-sub-nav__label { text-decoration: line-through; }\n\n/* Icon, lock and count stand on the first line of a label that wraps. */\n.lintje-sub-nav__icon { flex: none; margin-top: 2px; }\n.lintje-sub-nav__lock { flex: none; margin-top: var(--space-1); }\n.lintje-sub-nav__count { flex: none; }\n\n/* Below 768 px: one button with the reader's page, which opens the list in place. */\n.lintje-sub-nav__toggle {\n  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);\n  width: 100%;\n  min-height: var(--h-control);\n  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-sub-nav__toggle:hover { background: var(--color-bg-subtle); }\n.lintje-sub-nav__toggle-text { display: flex; flex-direction: column; min-width: 0; }\n.lintje-sub-nav__toggle-group { font: var(--text-small); color: var(--color-text-muted); }\n.lintje-sub-nav__toggle-current { font-weight: 700; }\n.lintje-sub-nav__toggle-icon { flex: none; transition: transform var(--dur-hover) var(--ease-in-motion); }\n.lintje-sub-nav__toggle.is-open .lintje-sub-nav__toggle-icon { transform: rotate(180deg); }\n\n.lintje-sub-nav__panel {\n  padding: var(--space-1) var(--space-6) var(--space-2);\n  border: 1px solid var(--color-border-field);\n  border-top: 0;\n  background: var(--color-bg-surface);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .lintje-sub-nav__link,\n  .lintje-sub-nav__toggle,\n  .lintje-sub-nav__toggle-icon { transition: none; }\n}\n\n@media (forced-colors: active) {\n  .lintje-sub-nav__link.is-current { text-decoration: underline; }\n  .lintje-sub-nav__link.is-no-page,\n  .lintje-sub-nav__link.is-no-access { color: GrayText; }\n}\n", h = (e) => !!e.active || !!e.items?.some(h);
 function g(e) {

package/dist-elements/tag/tabs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { H as e, Jt as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-CbmWxUig.js";
+import { H as e, Jt as t, Yt as n, Zt as r, en as i, lt as a, nn as o, st as s, ut as c } from "../chunks/base-CVKIPSLx.js";
 //#region src/components/layout/tabs/tabs.css?inline
 var l = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* `position: relative` makes the row the tabs' offset parent, for scrolling the chosen tab into sight. */\n.lintje-tabs__list {\n  position: relative;\n  display: flex; flex-wrap: wrap;\n  border-bottom: 1px solid var(--color-border-heavy);\n}\n\n/* A transparent bottom edge in reserve, so the chosen tab's line takes no space of its own. */\n.lintje-tabs__tab {\n  display: inline-flex; align-items: center; gap: var(--space-2);\n  height: var(--h-touch);\n  padding: 0 var(--space-4);\n  background: transparent;\n  color: var(--color-text-primary);\n  border-bottom: 3px solid transparent;\n  font: var(--text-ui);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) {\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-heavy);\n}\n\n/* The chosen tab: the line is a line (3:1) and the word is text (4.5:1), hence two tokens. */\n.lintje-tabs__tab.is-active {\n  border-bottom-color: var(--color-accent-line);\n  color: var(--color-accent-text);\n  font-weight: 700;\n}\n\n.lintje-tabs__tab.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n.lintje-tabs__panel { padding-top: var(--space-4); }\n.lintje-tabs__panel.is-pressed:focus-visible { outline: none; }\n\n@media screen and (max-width: 767px) {\n  .lintje-tabs__list {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scrollbar-width: none;\n  }\n  .lintje-tabs__list::-webkit-scrollbar { display: none; }\n  .lintje-tabs__tab { flex: 0 0 auto; }\n  .lintje-tabs__list.is-scroll-start { box-shadow: var(--shadow-scroll-start); }\n  .lintje-tabs__list.is-scroll-end { box-shadow: var(--shadow-scroll-end); }\n  .lintje-tabs__list.is-scroll-start.is-scroll-end {\n    box-shadow: var(--shadow-scroll-start), var(--shadow-scroll-end);\n  }\n}\n\n/* Forced colours: the chosen tab's line turns Highlight, a disabled tab GrayText. */\n@media (forced-colors: active) {\n  .lintje-tabs__tab.is-active { border-bottom-color: Highlight; }\n  .lintje-tabs__tab.is-disabled { color: GrayText; }\n}\n\n/* --- The panel variant --------------------------------------------------------\n   Large tabs that head a bordered panel. The chosen tab is the panel's own surface and runs into\n   it; the others stand on the subtle fill. No line: surface, accent word and weight say it. */\n.lintje-tabs--panel {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__list {\n  flex-wrap: nowrap;\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__tab {\n  flex: 1 1 0;\n  min-width: 0;\n  height: auto;\n  min-height: var(--h-touch);\n  margin-bottom: -1px;\n  align-items: flex-start;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-right: 1px solid var(--color-border-default);\n  border-bottom: 1px solid var(--color-border-default);\n  white-space: normal;\n  text-align: left;\n}\n.lintje-tabs--panel .lintje-tabs__tab:last-child { border-right: 0; }\n.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) {\n  background: var(--color-bg-subtle);\n  border-bottom-color: var(--color-border-default);\n}\n.lintje-tabs--panel .lintje-tabs__tab:hover:not(.is-active):not(.is-disabled) .lintje-tabs__label {\n  text-decoration: underline;\n}\n/* The bottom edge takes the surface, so the tab and the panel are one shape. */\n.lintje-tabs--panel .lintje-tabs__tab.is-active {\n  background: var(--color-bg-surface);\n  border-bottom-color: var(--color-bg-surface);\n  color: var(--color-accent-text);\n}\n.lintje-tabs__icon { flex: none; }\n.lintje-tabs__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n.lintje-tabs__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }\n.lintje-tabs__hint { font: var(--text-meta); color: var(--color-text-muted); }\n.lintje-tabs--panel .lintje-tabs__panel { padding: var(--space-6); }\n\n@media screen and (max-width: 767px) {\n  .lintje-tabs--panel .lintje-tabs__tab {\n    flex-direction: column;\n    align-items: center;\n    gap: var(--space-2);\n    padding: var(--space-3) var(--space-2);\n    text-align: center;\n  }\n  .lintje-tabs--panel .lintje-tabs__text { align-items: center; }\n  .lintje-tabs--panel .lintje-tabs__head { justify-content: center; }\n  .lintje-tabs--panel .lintje-tabs__hint { display: none; }\n  .lintje-tabs--panel .lintje-tabs__panel { padding: var(--space-4); }\n}\n\n/* Forced colours drop the surface: the chosen tab's label is underlined instead. */\n@media (forced-colors: active) {\n  .lintje-tabs--panel .lintje-tabs__tab.is-active .lintje-tabs__label { text-decoration: underline; }\n}\n";
 //#endregion

package/dist-elements/tag/tag-input.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { Yt as e, Zt as t, en as n, lt as r, m as i, nn as a, st as o, ut as s } from "../chunks/base-CbmWxUig.js";
-import { r as c, t as l } from "../chunks/input-CRW_exv_.js";
+import { Yt as e, Zt as t, en as n, lt as r, nn as i, s as a, st as o, ut as s } from "../chunks/base-CVKIPSLx.js";
+import { n as c } from "../chunks/input-DEHA2Z_0.js";
+import { t as l } from "../chunks/input-lQTmOMOz.js";
 import { filterOptions as u, splitMatch as d } from "./combobox.js";
 //#region src/components/inputs/tag-input/tag-input.css?inline
 var f = "/* The keyword field: chips and the typing part in one box that grows in height. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n/* Below 768 px: the touch height and the full width, as `stacked`. */\n@media screen and (max-width: 767px) {\n  :host {\n    width: 100%;\n    --h-control: var(--h-touch);\n  }\n}\n\n/* --- */\n\n/* The padding centres a chip in the control height; wrapped chips grow the box. */\n.lintje-tag-input {\n  display: flex; flex-wrap: wrap; align-items: center;\n  gap: 6px;\n  min-height: var(--h-control);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);\n  border: 1px solid var(--color-border-field);\n  border-radius: var(--radius);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n}\n/* The ring is around the whole field; a chip draws it around itself when its cross has the focus. */\n.lintje-tag-input:has(.lintje-tag-input__input:focus-visible),\n.lintje-tag-input__chip:has(.lintje-tag-input__remove:focus-visible) {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n.lintje-tag-input__input:focus-visible,\n.lintje-tag-input__remove:focus-visible { outline: none; }\n/* The padding gives back the pixel the 2 px error border takes. */\n.lintje-tag-input.is-error {\n  border: 2px solid var(--color-error);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 2px) calc(var(--space-2) - 1px);\n}\n/* Disabled wins over error: placed after it. */\n.lintje-tag-input.is-disabled {\n  border: 1px solid var(--color-border-strong);\n  padding: calc((var(--h-control) - var(--h-chip-field)) / 2 - 1px) var(--space-2);\n  background: var(--color-bg-subtle);\n  cursor: not-allowed;\n}\n\n.lintje-tag-input__chips { display: contents; }\n.lintje-tag-input__item { display: flex; min-width: 0; }\n.lintje-tag-input__chip {\n  display: inline-flex; align-items: center;\n  min-width: 0;\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}\n.lintje-tag-input.is-disabled .lintje-tag-input__chip { padding-right: var(--space-2); }\n/* A word typed twice flashes its chip. */\n.lintje-tag-input__chip.is-flash { border-color: var(--color-accent-line); }\n.lintje-tag-input.is-disabled .lintje-tag-input__chip { color: var(--color-text-disabled); }\n/* A transparent hit area, above and below only, reaches the target height. */\n.lintje-tag-input__remove {\n  position: relative;\n  flex: none;\n  width: var(--space-6); align-self: stretch;\n  display: inline-flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-tag-input__remove:hover { color: var(--color-text-primary); }\n.lintje-tag-input__remove::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((var(--h-chip-field) - var(--h-target)) / 2)) 0;\n}\n\n.lintje-tag-input__input {\n  flex: 1 1 60px; min-width: 0;\n  height: var(--h-chip-field);\n  padding: 0 var(--space-1);\n  border: 0;\n  background: none;\n  color: inherit;\n  font-size: 1rem;\n}\n.lintje-tag-input__input::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-tag-input__input:disabled { cursor: not-allowed; }\n\n.lintje-tag-input__list {\n  max-height: calc(7 * var(--h-option) + var(--space-2));\n  overflow-y: auto;\n  padding: var(--space-1) 0;\n  font: var(--text-ui);\n}\n.lintje-tag-input__option {\n  display: flex; align-items: center;\n  min-height: var(--h-option);\n  padding: 0 14px;\n  cursor: pointer;\n}\n.lintje-tag-input__option:hover,\n.lintje-tag-input__option.is-active { background: var(--color-bg-subtle); }\n/* The option the keys stand on: the fill alone is about 1.1:1, so the focus ring inside the row. */\n.lintje-tag-input__option.is-active {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n\n/* Forced colours drop the fill: the row takes an edge inside, keeping its size. */\n@media (forced-colors: active) {\n  .lintje-tag-input__option.is-active { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n";
@@ -155,12 +156,12 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
 	}
 	renderChip(e, t) {
 		let r = this.labelOf(e);
-		return a`<li class="lintje-tag-input__item">
+		return i`<li class="lintje-tag-input__item">
       <span class=${o({
 			"lintje-tag-input__chip": !0,
 			"is-flash": this.flash === e
 		})}
-        >${r}${this.disabled ? n : a`<button
+        >${r}${this.disabled ? n : i`<button
               type="button"
               class="lintje-tag-input__remove"
               tabindex="-1"
@@ -175,7 +176,7 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
     </li>`;
 	}
 	renderSuggestions() {
-		return this.listOpen ? a`<ul
+		return this.listOpen ? i`<ul
       id=${g}
       class="lintje-tag-input__list"
       role="listbox"
@@ -183,8 +184,8 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
       aria-labelledby=${this.labelId}
     >
       ${this.suggestions.map((e, t) => {
-			let [r, i, s] = d(e.label, this.text);
-			return a`<li
+			let [r, a, s] = d(e.label, this.text);
+			return i`<li
           id=${v(t)}
           class=${o({
 				"lintje-tag-input__option": !0,
@@ -194,14 +195,14 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
           aria-selected="false"
           @click=${() => this.add([e.label])}
         >
-          ${r}${i ? a`<strong>${i}</strong>` : n}${s}
+          ${r}${a ? i`<strong>${a}</strong>` : n}${s}
         </li>`;
 		})}
     </ul>` : n;
 	}
 	render() {
 		let e = this.listOpen, t = !!this.options;
-		return a`<div class="lintje-field">
+		return i`<div class="lintje-field">
       ${this.renderLabel(this.controlId)}
       <div
         class=${o({
@@ -219,7 +220,7 @@ var h = 1e3, g = "lintje-tag-input-list", _ = "lintje-tag-input-keys", v = (e) =
           type="text"
           id=${this.controlId}
           class="lintje-tag-input__input"
-          .value=${i(this.text)}
+          .value=${a(this.text)}
           placeholder=${this.value.length ? n : this.placeholder || n}
           autocomplete="off"
           enterkeyhint="enter"

package/dist-elements/tag/text-editor.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { Yt as e, Zt as t, en as n, et as r, lt as i, nn as a, st 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, et as r, lt as i, nn as a, st as o } from "../chunks/base-CVKIPSLx.js";
+import { n as s } from "../chunks/input-DEHA2Z_0.js";
+import { t as c } from "../chunks/input-lQTmOMOz.js";
 import { t as l } from "../chunks/prose-CmKVp5kL.js";
 import "./text-input.js";
 //#region src/components/inputs/text-editor/text-editor.css?inline

package/dist-elements/tag/text-input.js CHANGED Viewed

@@ -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 { a as s, n as c, t as l } 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-CVKIPSLx.js";
+import { i as s, t as c } from "../chunks/input-DEHA2Z_0.js";
+import { t as l } from "../chunks/input-lQTmOMOz.js";
 import { t as u } from "../chunks/debounce-JXnLMCcF.js";
 //#region src/components/inputs/text-input/text-input.css?inline
 var d = "/* The text field. */\n\n/* --- Text field ----------------------------------------------------------- */\n.lintje-text-input { position: relative; display: flex; align-items: center; }\n.lintje-text-input__control {\n  width: 100%; height: var(--h-control);\n  padding: 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  border-radius: var(--radius);\n}\n.lintje-text-input__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-text-input__control.is-error { border: 2px solid var(--color-error); }\n/* Read-only: the subtle surface, the strong border, the text still primary. */\n.lintje-text-input__control.is-readonly {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-primary);\n  cursor: default;\n}\n.lintje-text-input__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n.lintje-text-input--clearable .lintje-text-input__control {\n  padding-right: calc(var(--h-icon-button) + var(--space-1));\n}\n/* The hit area reaches the target height above and below only: sideways it would cover the text. */\n.lintje-text-input__clear {\n  position: absolute; right: var(--space-1);\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  display: flex; align-items: center; justify-content: center;\n  color: var(--color-text-muted);\n}\n.lintje-text-input__clear:hover { color: var(--color-text-primary); }\n.lintje-text-input__clear::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n/* --- Search ---------------------------------------------------------------- */\n/* The browser's own clear button and decoration go: the field draws its own cross. */\n.lintje-text-input--search .lintje-text-input__control { padding-left: var(--space-10); }\n.lintje-text-input__search {\n  position: absolute; left: var(--space-3);\n  color: var(--color-text-muted);\n  pointer-events: none;\n}\n.lintje-text-input__control::-webkit-search-cancel-button,\n.lintje-text-input__control::-webkit-search-decoration { appearance: none; }\n\n/* --- Password -------------------------------------------------------------- */\n.lintje-text-input--password .lintje-text-input__control { border-right: 0; }\n.lintje-text-input__reveal { flex: none; --h-button: var(--h-control); }\n", f = class extends c {

package/dist-elements/tag/textarea.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { Yt as e, Zt as t, bt as n, en as r, lt as i, nn as a, st as o } from "../chunks/base-CbmWxUig.js";
-import { a as s, i as c, n as l, t as u } from "../chunks/input-CRW_exv_.js";
+import { Yt as e, Zt as t, bt as n, en as r, lt as i, nn as a, st as o } from "../chunks/base-CVKIPSLx.js";
+import { i as s, r as c, t as l } from "../chunks/input-DEHA2Z_0.js";
+import { t as u } from "../chunks/input-lQTmOMOz.js";
 import { t as d } from "../chunks/debounce-JXnLMCcF.js";
 //#region src/components/inputs/textarea/textarea.css?inline
 var f = "/* The multi-line text field. */\n:host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n/* Plain takes the type of where it stands, past the UI type every element sets on itself, and\n   fills the height the surface gives it. */\n:host([variant='plain']) { display: flex; flex-direction: column; font: inherit; }\n/* Below 768 px: the full width, as `stacked`. */\n@media screen and (max-width: 767px) {\n  :host { width: 100%; }\n}\n\n/* --- */\n\n/* `rows` lines at least (three by default); grows with its content up to twelve, then scrolls. */\n.lintje-textarea__control {\n  display: block;\n  width: 100%;\n  min-height: calc(var(--lintje-rows, 3) * 1lh + var(--space-4) + 2px);\n  max-height: calc(12lh + var(--space-4) + 2px);\n  field-sizing: content;\n  padding: var(--space-2) 14px;\n  border: 1px solid var(--color-border-field);\n  border-radius: var(--radius);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font: var(--text-body);\n  resize: vertical;\n  overflow-y: auto;\n}\n.lintje-textarea__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n/* The padding gives back the pixel the 2 px error border takes. */\n.lintje-textarea__control.is-error { border: 2px solid var(--color-error); padding: 7px 13px; }\n/* Disabled wins over read-only, read-only over error. */\n.lintje-textarea__control.is-readonly {\n  border: 1px solid var(--color-border-strong);\n  padding: var(--space-2) 14px;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-primary);\n  cursor: default;\n}\n.lintje-textarea__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  padding: var(--space-2) 14px;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n/* Plain: the surface around it is the field, and draws the focus ring around itself, so the\n   ring does not sit tight against the text. It keeps growing; the surface decides the height. */\n:host([variant='plain']) .lintje-field { flex: 1; }\n.lintje-textarea__control--plain { flex: 1; }\n.lintje-textarea__control--plain:focus-visible { outline: none; }\n.lintje-textarea__control--plain,\n.lintje-textarea__control--plain.is-readonly,\n.lintje-textarea__control--plain:disabled {\n  min-height: calc(var(--lintje-rows, 3) * 1lh);\n  max-height: none;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  font: inherit;\n  resize: none;\n}\n.lintje-textarea__control--plain.is-error { padding: 0 0 var(--space-1); border: 0; border-bottom: 2px solid var(--color-error); }\n\n.lintje-textarea__counter {\n  align-self: flex-end;\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n}\n.lintje-textarea__counter.is-over { color: var(--color-error-text); font-weight: 700; }\n", p = new Intl.NumberFormat("nl-NL");

package/dist-elements/tag/tile.d.ts CHANGED Viewed

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

package/dist-elements/tag/tile.js CHANGED Viewed

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

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

@@ -1,5 +1,6 @@
-import { Yt as e, Zt as t, en as n, et as r, lt as i, m as a, nn as o, st as s, ut as c } from "../chunks/base-CbmWxUig.js";
-import { r as l, t as u } from "../chunks/input-CRW_exv_.js";
+import { Yt as e, Zt as t, en as n, et as r, lt as i, nn as a, s as o, st as s, ut as c } from "../chunks/base-CVKIPSLx.js";
+import { n as l } from "../chunks/input-DEHA2Z_0.js";
+import { t as u } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/time-input/time-input.css?inline
 var d = "/* The time input: a text field with a list button, and the list in a `lintje-popover`. */\n:host {\n  display: block;\n  min-width: 0;\n  width: 120px;\n}\n:host([hidden]) { display: none; }\n:host([stacked]) {\n  width: 100%;\n  --h-control: var(--h-touch);\n}\n@media screen and (max-width: 767px) {\n  :host {\n    width: 100%;\n    --h-control: var(--h-touch);\n  }\n}\n\n/* --- */\n\n/* --- The field ----------------------------------------------------------- */\n.lintje-time-input { position: relative; display: flex; align-items: center; }\n.lintje-time-input__control {\n  width: 100%; height: var(--h-control);\n  padding: 0 calc(var(--h-control) - 2px + var(--space-2)) 0 14px;\n  border: 1px solid var(--color-border-field);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  font-size: 1rem;\n  font-variant-numeric: tabular-nums;\n  border-radius: var(--radius);\n}\n.lintje-time-input__control::placeholder { color: var(--color-text-placeholder); opacity: 1; }\n.lintje-time-input__control.is-error { border: 2px solid var(--color-error); }\n/* Disabled wins over error: after it, the whole border back to 1 px strong. */\n.lintje-time-input__control:disabled {\n  border: 1px solid var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n.lintje-time-input__toggle {\n  position: absolute; top: 1px; right: 1px;\n  width: calc(var(--h-control) - 2px); height: calc(var(--h-control) - 2px);\n  display: flex; align-items: center; justify-content: center;\n  border-left: 1px solid var(--color-border-default);\n  background: transparent;\n  color: var(--color-accent-text);\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n/* A transparent hit area reaches the target height, never to the left where the typing part is. */\n.lintje-time-input__toggle::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) min(0px, calc(100% - var(--h-target)))\n    min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n/* The button steps in past the 2 px error border; a disabled field has 1 px again. */\n.lintje-time-input__control.is-error:not(:disabled) + .lintje-time-input__toggle {\n  top: 2px; right: 2px;\n  width: calc(var(--h-control) - 4px); height: calc(var(--h-control) - 4px);\n}\n.lintje-time-input__toggle:hover:not(:disabled) { background: var(--color-bg-selected); }\n.lintje-time-input__toggle:disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n\n/* --- The list ------------------------------------------------------------ */\n/* A dense list (`--h-option`): at most seven rows in view, then it scrolls. */\n.lintje-time-input__panel { padding: var(--space-1) 0; }\n.lintje-time-input__list {\n  max-height: calc(7 * var(--h-option));\n  overflow-y: auto;\n  font: var(--text-ui);\n}\n.lintje-time-input__option {\n  display: flex; align-items: center;\n  width: 100%;\n  min-height: var(--h-option);\n  padding: 0 14px;\n  background: transparent;\n  color: var(--color-text-primary);\n  font-variant-numeric: tabular-nums;\n  cursor: pointer;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-time-input__option:hover { background: var(--color-bg-subtle); }\n.lintje-time-input__option.is-selected { background: var(--color-bg-selected); font-weight: 700; }\n/* The fill alone is about 1.1:1, so the focus ring stands inside the row. */\n.lintje-time-input__option:focus-visible {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-width) * -1);\n}\n\n/* Forced colours drop fills: the chosen row takes an edge inside the row, so none changes size. */\n@media (forced-colors: active) {\n  .lintje-time-input__option.is-selected { outline: 2px solid Highlight; outline-offset: -2px; }\n  .lintje-time-input__option:focus-visible { outline-color: Highlight; }\n}\n", f = 1440, p = /^(\d{1,2})[:.](\d{2})$/, m = /^\d{1,4}$/, h = /^(\d{2}):(\d{2})$/, g = (e) => String(e).padStart(2, "0");
 function _(e, t) {
@@ -164,14 +165,14 @@ var D = class extends l {
 		this.focusTime = t[a], this.focusOption();
 	}
 	renderList() {
-		return o`<div class="lintje-time-input__panel"><div
+		return a`<div class="lintje-time-input__panel"><div
       class="lintje-time-input__list"
       role="listbox"
       tabindex="-1"
       aria-label="Tijden"
       @keydown=${this.onListKeydown}
     >
-      ${this.times.map((e) => o`<button
+      ${this.times.map((e) => a`<button
           type="button"
           role="option"
           class=${s({
@@ -188,7 +189,7 @@ var D = class extends l {
 	}
 	render() {
 		let e = this.message;
-		return o`<div class="lintje-field" @focusout=${this.onFocusOut}>
+		return a`<div class="lintje-field" @focusout=${this.onFocusOut}>
       ${this.renderLabel(this.controlId)}
       <div class="lintje-time-input">
         <input
@@ -200,7 +201,7 @@ var D = class extends l {
 			"lintje-time-input__control": !0,
 			"is-error": !!e
 		})}
-          .value=${a(this.text)}
+          .value=${o(this.text)}
           placeholder=${this.placeholder || n}
           aria-labelledby=${this.labelId}
           aria-describedby=${this.describedBy}

package/dist-elements/tag/toast.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { $ as e, J as t, Jt as n, Q as r, Yt as i, Z as a, Zt as o, en as s, lt as c, nn as l, nt as u, ut as d } from "../chunks/base-CbmWxUig.js";
-import "../chunks/focus-trap-BwOxE5BX.js";
+import { $ as e, J as t, Jt as n, Q as r, Yt as i, Z as a, Zt as o, en as s, lt as c, nn as l, nt as u, ut as d } from "../chunks/base-CVKIPSLx.js";
+import "../chunks/focus-trap-rje9Oz19.js";
 //#region src/components/feedback/toast/toast.css?inline
 var f = ":host {\n  display: contents;\n}\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-toast {\n  position: fixed;\n  right: var(--space-6);\n  bottom: var(--space-6);\n  z-index: 70;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  min-width: 320px;\n  max-width: 480px;\n  font: var(--text-ui);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-toast) var(--ease-in-motion);\n}\n.lintje-toast--ok   { background: var(--color-success-bg); color: var(--color-text-primary); }\n.lintje-toast--error { background: var(--color-error-bg);   color: var(--color-text-primary); }\n\n.lintje-toast__icon { flex: none; display: flex; }\n.lintje-toast--ok    .lintje-toast__icon { color: var(--color-success-line); }\n.lintje-toast--error .lintje-toast__icon { color: var(--color-error-line); }\n\n.lintje-toast--info { background: var(--color-info-bg); color: var(--color-text-primary); }\n.lintje-toast--info .lintje-toast__icon { color: var(--color-info-line); }\n.lintje-toast--warning { background: var(--color-attention-bg); color: var(--color-text-primary); }\n.lintje-toast--warning .lintje-toast__icon { color: var(--color-attention-line); }\n\n.lintje-toast__text { flex: 1; }\n.lintje-toast__action { position: relative; font-weight: 700; text-decoration: underline; color: var(--color-link-on-status); flex: none; }\n/* The close and the action reach the target height through a transparent hit area; the gap\n   between them keeps the hit areas apart. */\n.lintje-toast__close {\n  position: relative;\n  width: var(--h-icon-button); height: var(--h-icon-button);\n  color: var(--color-text-muted);\n  display: flex; align-items: center; justify-content: center; flex: none;\n}\n.lintje-toast__close::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n.lintje-toast__action::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n@media screen and (max-width: 767px) {\n  .lintje-toast { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); min-width: 0; max-width: none; }\n}\n\n/* Forced colours: the fill and shadow are dropped, so the toast takes a CanvasText line. */\n@media (forced-colors: active) {\n  .lintje-toast { outline: 1px solid CanvasText; outline-offset: -1px; }\n}\n", p = 6e3, m = {
 	ok: "success",

package/dist-elements/tag/toggle.js CHANGED Viewed

@@ -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-CVKIPSLx.js";
+import { n as o } from "../chunks/input-DEHA2Z_0.js";
+import { t as s } from "../chunks/input-lQTmOMOz.js";
 //#region src/components/inputs/toggle/toggle.ts
 var c = class extends o {
 	constructor(...e) {

package/dist-elements/tag/toggletip.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { $ as e, G as t, Jt as n, L as r, W as i, Yt as a, Zt as o, bt as s, en as c, et as l, lt as u, nn as d, st as f, ut as p } from "../chunks/base-CbmWxUig.js";
-import "../chunks/focus-trap-BwOxE5BX.js";
+import { $ as e, G as t, Jt as n, L as r, W as i, Yt as a, Zt as o, bt as s, en as c, et as l, lt as u, nn as d, st as f, ut as p } from "../chunks/base-CVKIPSLx.js";
+import "../chunks/focus-trap-rje9Oz19.js";
 //#region src/components/overlays/toggletip/toggletip.css?inline
 var m = "/* The trigger is the icon button's drawing (`icon-button.css`); what stands here is the popover. */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Closed, the `role=\"status\"` region is empty and `.visually-hidden`, never `display: none`:\n   a region that appeared together with its text would not be announced. */\n\n/* Fixed to the viewport, so a scrolling tile or table cannot cut it off. It stands on the\n   popover's layer (85): above a modal's or a drawer's scrim, under the tooltip (90). */\n.lintje-toggletip__popover.is-open {\n  position: fixed;\n  z-index: 85;\n  min-width: min(12rem, calc(100vw - 2 * var(--space-2)));\n  max-width: min(20rem, calc(100vw - 2 * var(--space-2)));\n  padding: var(--space-3) var(--space-4);\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-popover);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n  text-align: start;\n  white-space: normal;\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n", h = 4, g = 0, _ = class extends n {
 	static {

package/dist-elements/tag/token-value.d.ts ADDED Viewed

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