lintje 0.3.0 → 0.5.0

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

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

package/dist-elements/tag/modal.js

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

package/dist-elements/tag/multiselect.js

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

package/dist-elements/tag/note.js

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

package/dist-elements/tag/notifications.js

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

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

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

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

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

package/dist-elements/tag/pagination.js

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

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

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

package/dist-elements/tag/popover.js

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

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

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

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

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

package/dist-elements/tag/prose.js

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

package/dist-elements/tag/qr-code.js

@@ -1,4 +1,4 @@
-import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CVKIPSLx.js";
 import "./toast.js";
 import { t as o } from "../chunks/copied-7BXYVkXT.js";
 //#region src/components/actions/qr-code/qr-code.css?inline

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

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

package/dist-elements/tag/range.js

@@ -1,5 +1,6 @@
-import { Yt as e, Zt as t, bt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
-import { r as o, t as s } from "../chunks/input-CRW_exv_.js";
+import { Yt as e, Zt as t, bt as n, en as r, nn as i, st as a } from "../chunks/base-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/range/range-ticks.ts
 var c = [
 	1,

package/dist-elements/tag/recording-status.js

@@ -1,4 +1,4 @@
-import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CbmWxUig.js";
+import { Jt as e, Yt as t, Zt as n, en as r, nn as i, st as a } from "../chunks/base-CVKIPSLx.js";
 import "./description-list.js";
 import { levelWord as o } from "./level-meter.js";
 //#region src/components/feedback/recording-status/recording-status.css?inline

package/dist-elements/tag/repeater.js

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

package/dist-elements/tag/segmented.js

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

package/dist-elements/tag/select.js

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