lintje 0.3.0 → 0.4.0

package/README.md

@@ -95,7 +95,7 @@ opent.
 
 | | |
 |---|---|
-| [`examples/styleguide/`](examples/styleguide/) | de styleguide: een pagina per element, met zijn voorbeelden, hun code en zijn referentie — properties, events, slots en de velden van `data` |
+| [`examples/styleguide/`](examples/styleguide/) | de styleguide: de tokens met hun waarde en commentaar, en een pagina per element, met zijn voorbeelden, hun code en zijn referentie — properties, events, slots en de velden van `data` |
 | [`docs/guides/`](docs/guides/start.md) | de elementen gebruiken op een eigen pagina: [een eerste pagina](docs/guides/start.md), [laden](docs/guides/loading.md), [thema's](docs/guides/theming.md), [eigen iconen](docs/guides/icons.md), [events](docs/guides/events.md), [een dashboard](docs/guides/dashboard.md), [een inhoudsopgave op de pagina](docs/guides/page-contents.md) |
 | [`docs/DESIGN_SYSTEM.md`](docs/DESIGN_SYSTEM.md) | de uitgangspunten en besluiten van het ontwerp |
 | [`CONTRIBUTING.md`](CONTRIBUTING.md) | bijdragen, en het recept voor een component |

package/dist-elements/actions.js

@@ -1,4 +1,4 @@
-import "./chunks/base-CbmWxUig.js";
+import "./chunks/base-DRGvkF-r.js";
 import "./tag/logo.js";
 import "./tag/qr-code.js";
 import "./tag/menu-button.js";

package/dist-elements/chunks/{base-CbmWxUig.js → base-DRGvkF-r.js}

@@ -1,5 +1,5 @@
 //#region src/core/version.ts
-var e = "0.3.0", t = globalThis, n = t.ShadowRoot && (t.ShadyCSS === void 0 || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, r = Symbol(), i = /* @__PURE__ */ new WeakMap(), a = class {
+var e = "0.4.0", t = globalThis, n = t.ShadowRoot && (t.ShadyCSS === void 0 || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, r = Symbol(), i = /* @__PURE__ */ new WeakMap(), a = class {
 	constructor(e, t, n) {
 		if (this._$cssResult$ = !0, n !== r) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
 		this.cssText = e, this.t = t;
@@ -1486,7 +1486,7 @@ var yn = class extends j {
 };
 M("lintje-badge", yn);
 //#endregion
-//#region src/primitives/button/button.css?inline
+//#region src/components/actions/button/button.css?inline
 var bn = "/*\n * Above the divider: what the element itself needs (`lintje-button` is the box the page lays\n * out). Below it: the block's own BEM CSS, in the shadow root.\n */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n:host(.lintje-button--block),\n:host([block]) { display: flex; }\n:host([block]) .lintje-button { width: 100%; }\n:host([span]) .lintje-button { width: 100%; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-button {\n  /* Never wider than its place: in a narrow cell the label is cut with an ellipsis. */\n  max-width: 100%;\n  min-width: 0;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  height: var(--h-button);\n  padding: 0 var(--space-4);\n  border: 1px solid transparent;\n  font-family: var(--font-ui);\n  font-size: 1rem;\n  font-weight: 700;\n  text-decoration: none;\n  cursor: pointer;\n  border-radius: var(--radius);\n  transition: background var(--dur-hover) var(--ease-in-motion),\n              color var(--dur-hover) var(--ease-in-motion),\n              border-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-button__label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.lintje-button--compact { height: var(--h-button-compact); padding: 0 var(--space-3); }\n.lintje-button--chrome  { height: var(--h-button-chrome);  padding: 0 14px; }\n/* The compact and chrome button reach the 48 px target through a transparent hit area, 4 px out\n   on each side. A row of them keeps 8 px between the boxes, so hit areas never overlap. */\n.lintje-button--compact::after,\n.lintje-button--chrome::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2)) 0;\n}\n\n/* The 1 px border is transparent, so the primary fill fills it in light; in dark it draws the\n   tint, the only thing that separates a #0E3B6E box from a #282828 page (1.31:1). */\n.lintje-button--primary {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  border-color: var(--color-action-primary-border);\n}\n.lintje-button--primary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-action-primary-hover); }\n\n.lintje-button--secondary {\n  background: var(--color-bg-surface);\n  color: var(--color-accent-text);\n  border-color: var(--color-action-secondary-border);\n}\n.lintje-button--secondary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-bg-selected); }\n\n.lintje-button--tertiary {\n  background: transparent;\n  color: var(--color-text-primary);\n  border-color: var(--color-border-strong);\n}\n.lintje-button--tertiary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-bg-subtle); }\n\n/* The destructive weight; in dark the border is the red's tint, the only thing reaching 3:1. */\n.lintje-button--danger {\n  background: var(--color-action-danger);\n  color: var(--color-text-on-fill);\n  border-color: var(--color-action-danger-border);\n}\n.lintje-button--danger:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-action-danger-hover); }\n\n/* `danger-secondary`: the quieter destructive form, for a row where the fill would shout. The\n   colour is `--color-action-danger-text`. The hover is the tertiary's `--color-bg-subtle`:\n   the red word on `--color-error-bg` was 3.96:1 in light. */\n.lintje-button--danger-secondary {\n  background: var(--color-bg-surface);\n  color: var(--color-action-danger-text);\n  border-color: var(--color-action-danger-text);\n}\n.lintje-button--danger-secondary:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { background: var(--color-bg-subtle); }\n\n.lintje-button--link {\n  height: auto;\n  padding: 0;\n  color: var(--color-link);\n  text-decoration: underline;\n  background: none;\n}\n.lintje-button--link:not(.is-disabled, .is-busy, :disabled, [aria-disabled='true']):hover { color: var(--color-link-hover); }\n/* The link reaches the text target (24 px) through a transparent hit area. */\n.lintje-button--link::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target-text)) / 2)) 0;\n}\n\n/* Disabled is `aria-disabled`: the button keeps its tab order and focus ring. A busy button is\n   not `is-disabled`: it keeps its variant's colours. Native `<button>`s with these classes get\n   the look from `:disabled` or `aria-disabled`, without the class. */\n.lintje-button.is-disabled,\n.lintje-button:disabled,\n.lintje-button[aria-disabled='true']:not(.is-busy) {\n  opacity: 1;\n  cursor: not-allowed;\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n  border-color: var(--color-border-default);\n}\n.lintje-button--link.is-disabled,\n.lintje-button--link:disabled,\n.lintje-button--link[aria-disabled='true']:not(.is-busy) {\n  background: none;\n  border-color: transparent;\n  text-decoration: none;\n}\n\n/* --- Busy --------------------------------------------------------------- */\n/*\n * An action that round-trips. The button keeps its width: label and icons only lose their ink,\n * and the ring is drawn over the middle, so nothing re-flows. The label is transparent, not\n * `visibility: hidden`, so the focused button keeps its name.\n */\n.lintje-button.is-busy { cursor: progress; }\n.lintje-button.is-busy .lintje-button__label { opacity: 0; }\n.lintje-button.is-busy .lintje-button__icon { visibility: hidden; }\n.lintje-button__busy {\n  position: absolute;\n  top: 50%; left: 50%;\n  width: 16px; height: 16px;\n  margin: -8px 0 0 -8px;\n  border: 2px solid currentColor;\n  border-top-color: transparent;\n  border-radius: var(--radius-round);\n  opacity: 0.85;\n  animation: lintje-spin var(--dur-skeleton) linear infinite;\n}\n/* A keyframe only works in the root that uses it. */\n@keyframes lintje-spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n/* Reduced motion: the ring stands still; `aria-busy` carries the state. */\n@media (prefers-reduced-motion: reduce) {\n  .lintje-button__busy { animation: none; }\n}\n\n/* Forced colours: `aria-disabled` is not grayed out by the browser. */\n@media (forced-colors: active) {\n  .lintje-button.is-disabled,\n  .lintje-button:disabled,\n  .lintje-button[aria-disabled='true']:not(.is-busy) { color: GrayText; border-color: GrayText; }\n}\n", xn = "/*\n * Adopted by a control that has nothing to say on paper: a button, a question box, a bar of\n * actions. What the reader chose stays in the elements that show it; what to press does not.\n * `!important`, so a page's own `display` on the tag does not bring it back.\n */\n@media print {\n  :host { display: none !important; }\n}\n", Sn = "lintje-button-reason", Cn = class extends j {
 	static {
 		this.styles = [
@@ -1658,7 +1658,7 @@ function kn(e) {
 	return t !== null && On(t, e);
 }
 //#endregion
-//#region src/primitives/shared/tone.ts
+//#region src/components/shared/tone.ts
 var An = {
 	success: "functioneel-cirkel-vinkje",
 	warning: "functioneel-waarschuwing",
@@ -1752,10 +1752,10 @@ function qn() {
 	};
 }
 //#endregion
-//#region src/primitives/popover/popover.css?inline
+//#region src/components/overlays/popover/popover.css?inline
 var Jn = ":host { display: contents; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* Fixed, not absolute: an `overflow` ancestor would cut it off. z-index 85: above the scrim (80),\n   below the tooltip (90). */\n.lintje-popover {\n  position: fixed;\n  z-index: 85;\n  max-width: calc(100vw - var(--space-4));\n  max-height: var(--lintje-popover-space, none);\n  overflow: auto;\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  font: var(--text-ui);\n  animation: lintje-popover-in var(--dur-popover) var(--ease-in-motion);\n}\n";
 //#endregion
-//#region src/primitives/popover/popover.ts
+//#region src/components/overlays/popover/popover.ts
 function Yn(e, t) {
 	return e ? {
 		top: e.top === null ? null : `${e.top}px`,
@@ -1851,7 +1851,7 @@ function Zn(e) {
 	return e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
 }
 //#endregion
-//#region src/primitives/spinner/spinner.css?inline
+//#region src/components/feedback/spinner/spinner.css?inline
 var Qn = ":host { display: inline-flex; vertical-align: middle; }\n:host([stacked]) { display: flex; justify-content: center; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-spinner {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n.lintje-spinner--stacked { flex-direction: column; gap: var(--space-3); }\n\n/* A line on a surface (3:1): the accent line, not the fill. */\n.lintje-spinner__ring {\n  flex: none;\n  width: 1rem; height: 1rem;\n  border: 2px solid var(--color-accent-line);\n  border-top-color: transparent;\n  border-radius: var(--radius-round);\n  animation: lintje-spin var(--dur-skeleton) linear infinite;\n}\n/* 16, 24 and 40 px: 1, 1.5 and 2.5rem, so the ring grows with the text beside it. */\n.lintje-spinner--24 .lintje-spinner__ring { width: 1.5rem; height: 1.5rem; }\n.lintje-spinner--40 .lintje-spinner__ring { width: 2.5rem; height: 2.5rem; border-width: 3px; }\n.lintje-spinner--current .lintje-spinner__ring {\n  border-color: currentColor;\n  border-top-color: transparent;\n}\n\n/* A keyframe only works in the root that uses it. */\n@keyframes lintje-spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lintje-spinner__ring { animation: none; }\n}\n\n/* Forced colours: the ring draws in CanvasText with its open quarter in Canvas, so it still turns. */\n@media (forced-colors: active) {\n  .lintje-spinner__ring,\n  .lintje-spinner--current .lintje-spinner__ring {\n    border-color: CanvasText;\n    border-top-color: Canvas;\n  }\n}\n", $n = class extends j {
 	constructor(...e) {
 		super(...e), this.size = 16, this.stacked = !1, this.current = !1, this.filled = null, this.#e = 0;
@@ -1908,7 +1908,7 @@ var Qn = ":host { display: inline-flex; vertical-align: middle; }\n:host([stacke
 };
 M("lintje-spinner", $n);
 //#endregion
-//#region src/primitives/tooltip/tooltip.css?inline
+//#region src/components/overlays/tooltip/tooltip.css?inline
 var er = "/* A box of its own for the pointer and focus to enter; inline, so flow is unchanged. */\n:host { display: inline-flex; vertical-align: middle; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n/* The pointer can rest on it, to read it at a larger zoom; Escape takes it away. */\n.lintje-tooltip {\n  position: fixed;\n  z-index: 90;\n  max-width: 15rem;\n  padding: var(--space-2) var(--space-3);\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  font: var(--text-small);\n  animation: lintje-fade-in var(--dur-hover) var(--ease-in-motion);\n}\n", tr = 300, nr = 150;
 function rr(e) {
 	return e ? {
@@ -2000,7 +2000,7 @@ var ir = class extends j {
 };
 M("lintje-tooltip", ir);
 //#endregion
-//#region src/primitives/icon-button/icon-button.css?inline
+//#region src/components/actions/icon-button/icon-button.css?inline
 var ar = "/* Above the divider: what the element itself needs. Below it: the block's own BEM CSS. */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-icon-button {\n  position: relative;\n  width: var(--h-icon-button);\n  height: var(--h-icon-button);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  border-radius: var(--radius);\n  transition: opacity var(--dur-hover) var(--ease-in-motion),\n              background var(--dur-hover) var(--ease-in-motion);\n}\n/* The target reaches `--h-target` through a transparent hit area; 100 % is the box's own size,\n   so the label variant's wider box only grows it upwards and downwards. */\n.lintje-icon-button::after {\n  content: '';\n  position: absolute;\n  inset: min(0px, calc((100% - var(--h-target)) / 2));\n}\n/* Without a file for its icon the label becomes the text; the square grows as wide as the word. */\n.lintje-icon-button--text { width: auto; min-width: var(--h-icon-button); padding: 0 var(--space-3); }\n.lintje-icon-button__label { font-size: 0.875rem; font-weight: 700; white-space: nowrap; }\n\n/* The box is a line (3:1), the glyph stands in for a word (4.5:1): different tokens. */\n.lintje-icon-button--outlined {\n  border: 1px solid var(--color-accent-line);\n  background: var(--color-bg-surface);\n  color: var(--color-accent-text);\n}\n.lintje-icon-button--outlined:not(.is-disabled):hover { background: var(--color-bg-selected); }\n\n.lintje-icon-button--flat { background: transparent; color: var(--color-text-primary); }\n.lintje-icon-button--flat:not(.is-disabled):hover { background: var(--color-bg-subtle); }\n\n/* Tile actions stand back in the muted text colour, never below 3:1; hover and focus darken them. */\n.lintje-icon-button--tile { background: transparent; color: var(--color-text-muted); }\n.lintje-icon-button--tile:not(.is-disabled):hover, .lintje-icon-button--tile:focus-visible { color: var(--color-text-primary); }\n\n/* The active button takes the primary-fill border, so the square keeps an edge in dark. */\n.lintje-icon-button.is-active {\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n  border-color: var(--color-action-primary-border);\n}\n\n/* Live: it listens or speaks now. The primary fill with its border, and bars that move beside\n   the icon, so the state is never colour alone; the box grows to hold them. */\n.lintje-icon-button.is-live {\n  width: auto;\n  gap: var(--space-2);\n  padding: 0 var(--space-3);\n  border: 1px solid var(--color-action-primary-border);\n  background: var(--color-action-primary);\n  color: var(--color-action-primary-text);\n}\n.lintje-icon-button.is-live:not(.is-disabled):hover { background: var(--color-action-primary-hover); }\n.lintje-icon-button__waves { display: inline-flex; align-items: center; gap: 2px; height: 16px; }\n.lintje-icon-button__wave {\n  width: 2px;\n  height: 100%;\n  background: currentColor;\n  animation: lintje-icon-button-wave var(--dur-wave) var(--ease-in-motion) infinite alternate;\n}\n.lintje-icon-button__wave:nth-child(2) { animation-delay: calc(var(--dur-wave) * -0.5); }\n.lintje-icon-button__wave:nth-child(3) { animation-delay: calc(var(--dur-wave) * -0.25); }\n.lintje-icon-button__wave:nth-child(4) { animation-delay: calc(var(--dur-wave) * -0.75); }\n@keyframes lintje-icon-button-wave {\n  from { transform: scaleY(0.25); }\n  to { transform: scaleY(1); }\n}\n/* Without motion the bars stand still at different heights: still a wave, never a pulse. */\n@media (prefers-reduced-motion: reduce) {\n  .lintje-icon-button__wave { animation: none; transform: scaleY(0.5); }\n  .lintje-icon-button__wave:nth-child(2) { transform: scaleY(1); }\n  .lintje-icon-button__wave:nth-child(4) { transform: scaleY(0.75); }\n}\n\n/* Disabled is `aria-disabled`: tab order and focus ring stay. After is-active, so it loses the fill. */\n.lintje-icon-button.is-disabled { cursor: not-allowed; color: var(--color-text-disabled); }\n.lintje-icon-button--outlined.is-disabled { background: var(--color-bg-surface); border-color: var(--color-border-default); }\n\n/* Forced colours: the active fill is dropped, so its border turns Highlight. */\n@media (forced-colors: active) {\n  .lintje-icon-button.is-active,\n  .lintje-icon-button.is-live { border-color: Highlight; }\n  .lintje-icon-button.is-disabled { color: GrayText; border-color: GrayText; }\n}\n";
 //#endregion
 //#region src/core/length.ts
@@ -2013,7 +2013,7 @@ function sr() {
 	return Number.isFinite(e) && e > 0 ? e : 16;
 }
 //#endregion
-//#region src/primitives/shared/grid-item-element.ts
+//#region src/components/shared/grid-item-element.ts
 var cr = A("/* `min-width: auto` is the default; tiles hold long words and wide tables that would overflow. */\n:host {\n  min-width: 0;\n}\n:host(lintje-grid-item) {\n  display: block;\n}\n:host([span]) {\n  grid-column: span var(--lintje-span, 1);\n}\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  :host([span='4']) { grid-column: span 6; }\n  :host([span='8']) { grid-column: span 12; }\n}\n@media screen and (max-width: 767px) {\n  :host([span]) { grid-column: span 1; }\n}\n"), lr = class extends j {
 	static {
 		this.properties = { span: {
@@ -2086,13 +2086,13 @@ function _r(e, t) {
         </button>` : T}`;
 }
 //#endregion
-//#region src/primitives/shared/length.ts
+//#region src/components/shared/length.ts
 var vr = /^-?\d+(?:\.\d+)?$/;
 function yr(e) {
 	if (e !== void 0) return typeof e == "number" || vr.test(e) ? `${e}px` : e;
 }
 //#endregion
-//#region src/primitives/icon-button/icon-button.ts
+//#region src/components/actions/icon-button/icon-button.ts
 var br = class extends j {
 	static {
 		this.styles = [
@@ -2165,7 +2165,7 @@ var br = class extends j {
 };
 M("lintje-icon-button", br);
 //#endregion
-//#region src/primitives/status-dot/status-dot.css?inline
+//#region src/components/feedback/status-dot/status-dot.css?inline
 var xr = ":host { display: inline-flex; vertical-align: middle; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-status { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--text-small); }\n.lintje-status__dot { border-radius: var(--radius-round); flex: none; display: block; }\n.lintje-status__dot--success { background: var(--color-success); }\n.lintje-status__dot--warning { background: var(--color-warning); }\n.lintje-status__dot--attention { background: var(--color-attention); }\n.lintje-status__dot--error { background: var(--color-error); }\n.lintje-status__dot--info { background: var(--color-info); }\n.lintje-status__dot--busy { background: var(--color-action-primary); }\n.lintje-status__dot--neutral { background: var(--color-text-muted); }\n.lintje-status__dot--subtle { background: var(--color-text-muted); }\n.lintje-status__dot--live { background: var(--color-error); }\n\n/* Forced colours: the dot's fill is dropped, so it keeps its drawing as one CanvasText dot. */\n@media (forced-colors: active) {\n  .lintje-status__dot { forced-color-adjust: none; background: CanvasText; }\n}\n", Sr = {
 	complete: "success",
 	delayed: "warning",
@@ -2209,7 +2209,7 @@ var xr = ":host { display: inline-flex; vertical-align: middle; }\n:host([hidden
 };
 M("lintje-status-dot", wr);
 //#endregion
-//#region src/primitives/skeleton/skeleton.css?inline
+//#region src/components/feedback/skeleton/skeleton.css?inline
 var Tr = "/* The size is on the host so a percentage has a box to resolve against. */\n:host { display: block; }\n:host(lintje-skeleton) .lintje-skeleton { width: 100%; height: 100%; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-skeleton {\n  display: block;\n  background: linear-gradient(90deg,\n    var(--color-bg-subtle) 25%,\n    var(--color-border-default) 37%,\n    var(--color-bg-subtle) 63%);\n  background-size: 200% 100%;\n  animation: lintje-shimmer var(--dur-skeleton) linear infinite;\n}\n@media (prefers-reduced-motion: reduce) {\n  .lintje-skeleton { animation: none; background: var(--color-bg-subtle); }\n}\n\n/* Forced colours: the gradient is dropped, so the placeholder keeps a 1 px GrayText line. */\n@media (forced-colors: active) {\n  .lintje-skeleton { outline: 1px solid GrayText; outline-offset: -1px; }\n}\n", Er = class extends j {
 	constructor(...e) {
 		super(...e), this.width = "100%", this.height = 12;
@@ -2232,7 +2232,7 @@ var Tr = "/* The size is on the host so a percentage has a box to resolve agains
 };
 M("lintje-skeleton", Er);
 //#endregion
-//#region src/primitives/shared/empty-state-block.ts
+//#region src/components/shared/empty-state-block.ts
 var Dr = A(".lintje-empty-state {\n  display: flex; flex-direction: column; align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-8) var(--space-4);\n  text-align: center;\n  font: var(--text-ui);\n  color: var(--color-text-primary);\n}\n.lintje-empty-state__icon { color: var(--color-text-muted); }\n.lintje-empty-state__heading {\n  margin: var(--space-1) 0 0;\n  font: var(--text-tile-title);\n  color: var(--color-text-primary);\n}\n.lintje-empty-state__text {\n  max-width: 280px;\n  margin: 0;\n  color: var(--color-text-muted);\n}\n.lintje-empty-state__action { margin-top: var(--space-2); }\n\n.lintje-empty-state--compact {\n  display: block;\n  padding: var(--space-4);\n  text-align: left;\n  color: var(--color-text-muted);\n}\n\n/* Phone: the action runs the full width. */\n@media screen and (max-width: 767px) {\n  .lintje-empty-state:not(.lintje-empty-state--compact) .lintje-empty-state__action {\n    align-self: stretch;\n  }\n}\n");
 function Or(e, t) {
 	switch (t) {
@@ -2263,7 +2263,7 @@ function Ar(e) {
         </div>`}`;
 }
 //#endregion
-//#region src/primitives/tile/tile.css?inline
+//#region src/components/layout/tile/tile.css?inline
 var jr = "/*\n * Above the divider: the host, the grid item the tile fills by its height or, when the host has\n * only a floor, by `min-height: inherit`. Below it: the block's BEM CSS.\n */\n:host {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n.lintje-tile {\n  height: 100%;\n  min-height: inherit;\n}\n/* On paper a tile stays on one sheet where it fits, unless it is `breakable`. */\n@media print { :host(:not([breakable])) { break-inside: avoid; } }\n.lintje-chart-state {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  justify-content: center;\n  align-items: center;\n  min-width: 0;\n}\n.lintje-chart-state--empty { text-align: center; gap: var(--space-3); }\n.lintje-chart-state--empty .lintje-empty-state--compact { text-align: center; font: var(--text-small); }\n/* An announcement measures as a container, so it has no width of its own to centre by. */\n.lintje-chart-state--error { justify-content: flex-start; align-items: stretch; gap: var(--space-4); }\n.lintje-chart-state__last-known { font: var(--text-small); color: var(--color-text-muted); text-align: center; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-tile {\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  min-width: 0;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  border-radius: var(--radius);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n\n.lintje-tile__head {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  gap: var(--space-4);\n}\n.lintje-tile__heading { min-width: 0; }\n/* With an icon the heading becomes two columns, which centres the icon on the title's line and\n   keeps the subtitle under the title text. */\n.lintje-tile__heading--icon {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n}\n/* Only the placement is the tile's; the alignment is `.lintje-leading-icon`. */\n.lintje-tile__icon { grid-row: 1; }\n.lintje-tile__heading--icon .lintje-tile__title,\n.lintje-tile__heading--icon .lintje-tile__sub { grid-column: 2; }\n.lintje-tile__title { font: var(--text-tile-title); color: var(--color-text-primary); }\n.lintje-tile__sub { font: var(--text-tile-sub); color: var(--color-text-muted); margin-top: 2px; }\n/* The actions are 40 px icon buttons beside a title of one line: they stand out above and below\n   it, so the head is the title's height and a tile without a subtitle keeps no empty band. */\n.lintje-tile__actions {\n  display: flex; gap: var(--space-2); flex: none;\n  margin-block: calc(var(--space-2) * -1);\n}\n/* Expand and download appear only while the tile is hovered or holds keyboard focus; without\n   hover they stay visible. The tile only hides the action; how the visible action looks is the\n   icon button's own. */\n.lintje-tile:not(:hover):not(:focus-within) lintje-icon-button[variant='tile'] { opacity: 0; }\n@media (hover: none) {\n  .lintje-tile:not(:hover):not(:focus-within) lintje-icon-button[variant='tile'] { opacity: 1; }\n}\n\n.lintje-tile__intro { font: var(--text-small); color: var(--color-text-secondary); }\n\n/* Body and content are flex columns, so slotted content can place itself in a taller tile. */\n.lintje-tile__body { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }\n.lintje-tile__content { flex: 1; min-height: 0; display: flex; flex-direction: column; }\n/* A tile with a height of its own scrolls what does not fit (`content-scroll`). */\n:host([content-scroll]) .lintje-tile__content { overflow: auto; }\n.lintje-tile__body--aside { flex-direction: row; gap: var(--space-5); align-items: stretch; }\n.lintje-tile__body--aside .lintje-tile__content { flex: 1; min-width: 0; }\n.lintje-tile__aside { flex: none; display: flex; flex-direction: column; justify-content: center; }\n/* On a phone the content keeps its full width and the key figure leads above it. */\n@media screen and (max-width: 767px) {\n  .lintje-tile__body--aside { flex-direction: column; }\n}\n\n.lintje-tile__footnote {\n  font: var(--text-meta);\n  color: var(--color-text-muted);\n  border-top: 1px solid var(--color-border-default);\n  padding-top: var(--space-2);\n  margin-top: auto;\n}\n\n/* Flush: the rows' lines reach the frame, and what they draw keeps the heading's indent through\n   --lintje-inset, as does a pager under them. The last row's line is the footnote's rule. */\n.lintje-tile--flush .lintje-tile__body {\n  margin-inline: calc(var(--tile-pad-x) * -1);\n  --lintje-inset: var(--tile-pad-x);\n}\n.lintje-tile--flush .lintje-tile__footnote { border-top: 0; padding-top: 0; }\n/* Without a footnote the last row's line is the frame's: no empty strip under it. A pager under\n   the rows gives the strip back through --lintje-inset-end. */\n.lintje-tile--flush:has(> .lintje-tile__footnote[hidden]) > .lintje-tile__body {\n  margin-bottom: calc(var(--tile-pad-y) * -1 - 1px);\n  --lintje-inset-end: calc(var(--tile-pad-y) + 1px);\n}\n\n/* Enlarging and downloading are for the screen. A tile split over two sheets is a block:\n   Chromium sizes a flex column that breaks too short, and what follows overlaps its rows. */\n@media print {\n  .lintje-tile__actions { display: none; }\n  :host([breakable]) .lintje-tile { display: block; }\n  :host([breakable]) .lintje-tile > :not(:first-child) { margin-top: 14px; }\n}\n", Mr = "Gegevens laden…", Nr = class e extends lr {
 	constructor(...e) {
 		super(...e), this.footnoteSlotted = !1, this.asideSlotted = !1, this.legendBelow = !1, this.expandable = !1, this.download = !1, this.state = "ready", this.contentHeight = "var(--chart-h-main)", this.contentScroll = !1, this.flush = !1, this.breakable = !1, this.filled = null, this.#e = 0;
@@ -2437,7 +2437,7 @@ var jr = "/*\n * Above the divider: the host, the grid item the tile fills by it
 };
 M("lintje-tile", Nr);
 //#endregion
-//#region src/primitives/grid/grid.css?inline
+//#region src/components/layout/grid/grid.css?inline
 var Pr = "/*\n * Written with `:host(…)` and `::slotted()`: a selector from outside cannot reach into an item's\n * own root. An item's width comes from `--lintje-span`, so a media rule can override `grid-column`.\n */\n\n/* --- The grid ------------------------------------------------------------ */\n:host {\n  display: grid;\n  grid-template-columns: repeat(var(--lintje-grid-columns, 12), minmax(0, 1fr));\n  gap: var(--grid-gutter);\n  align-items: stretch;\n}\n:host([hidden]) { display: none; }\n\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  :host([variant='kpi-row']) { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n}\n@media screen and (max-width: 767px) {\n  :host { grid-template-columns: minmax(0, 1fr); }\n  :host([variant='kpi-row']) { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n}\n\n/* --- Every item its column ------------------------------------------------ */\n\n::slotted([span]) {\n  min-width: 0;\n  grid-column: span var(--lintje-span, 1);\n}\n\n@media (min-width: 768px) and (max-width: 1023px), print and (max-width: 1023px) {\n  ::slotted([span='4']) { grid-column: span 6; }\n  ::slotted([span='8']) { grid-column: span 12; }\n}\n@media screen and (max-width: 767px) {\n  ::slotted([span]) { grid-column: span 1; }\n}\n", Fr = class extends j {
 	constructor(...e) {
 		super(...e), this.columns = 12;
@@ -2463,7 +2463,7 @@ var Pr = "/*\n * Written with `:host(…)` and `::slotted()`: a selector from ou
 };
 M("lintje-grid", Fr);
 //#endregion
-//#region src/primitives/grid-item/grid-item.ts
+//#region src/components/layout/grid-item/grid-item.ts
 var Ir = class extends lr {
 	static {
 		this.styles = cr;
@@ -2493,7 +2493,7 @@ function Hr(e) {
 	Rr.delete(e), X?.unobserve(e);
 }
 //#endregion
-//#region src/icons/icon/icon.css?inline
+//#region src/components/actions/icon/icon.css?inline
 var Ur = "/* `<lintje-icon>`'s own box: the host is the flex child; the glyph inside is a plain block. */\n:host {\n  display: inline-flex;\n  flex: none;\n}\n:host([hidden]) { display: none; }\n.lintje-icon {\n  display: block;\n}\n", Wr = Object.keys(Ft), Gr = class extends j {
 	constructor(...e) {
 		super(...e), this.size = 16, this.lazy = !1, this.#e = null, this.#t = !1;
@@ -2556,7 +2556,7 @@ function Jr() {
 	return typeof matchMedia < "u" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
 //#endregion
-//#region src/primitives/progress-bar/progress-bar.css?inline
+//#region src/components/feedback/progress-bar/progress-bar.css?inline
 var Yr = ":host { display: block; min-width: 0; }\n:host([hidden]) { display: none; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-progress { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }\n.lintje-progress__head {\n  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;\n  gap: var(--space-1) var(--space-4);\n  font: var(--text-small);\n}\n.lintje-progress__label { font-weight: 700; color: var(--color-text-primary); }\n.lintje-progress__detail { color: var(--color-text-muted); }\n.lintje-progress__mark { margin-right: var(--space-1); vertical-align: -0.125em; }\n.lintje-progress--done .lintje-progress__mark { color: var(--color-success-line); }\n.lintje-progress--error .lintje-progress__mark { color: var(--color-error-line); }\n.lintje-progress--paused .lintje-progress__mark { color: var(--color-text-muted); }\n\n/* The accent LINE, not the fill colour, keeps 3:1 on the dark surface. */\n.lintje-progress__track { height: 6px; background: var(--color-border-default); overflow: hidden; }\n.lintje-progress__fill {\n  height: 100%;\n  background: var(--color-accent-line);\n  transition: width var(--dur-base) var(--ease-in-motion);\n}\n\n.lintje-progress--done .lintje-progress__fill { background: var(--color-success); }\n.lintje-progress--error .lintje-progress__fill { background: var(--color-error); }\n.lintje-progress--error .lintje-progress__label { color: var(--color-error-text); }\n.lintje-progress--paused .lintje-progress__fill { background: var(--color-text-muted); }\n\n.lintje-progress__track.is-indeterminate .lintje-progress__fill {\n  width: 30%;\n  animation: lintje-progress-slide var(--dur-skeleton) linear infinite alternate;\n}\n@keyframes lintje-progress-slide {\n  from { margin-left: 0; }\n  to   { margin-left: 70%; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lintje-progress__fill { transition: none; }\n  .lintje-progress__track.is-indeterminate .lintje-progress__fill { animation: none; margin-left: 35%; }\n}\n\n/* Forced colours: the browser drops fills, so the track keeps a CanvasText edge and the fill\n   draws as Highlight. */\n@media (forced-colors: active) {\n  .lintje-progress__track { outline: 1px solid CanvasText; outline-offset: -1px; }\n  .lintje-progress__fill { forced-color-adjust: none; background: Highlight; }\n}\n", Xr = class extends j {
 	constructor(...e) {
 		super(...e), this.label = "", this.hideLabel = !1, this.state = "busy";
@@ -2683,7 +2683,46 @@ var Zr = (e, t, n) => {
 		}
 		return this.ut = o, zn(e, c), w;
 	}
-}), $r = R(class extends z {
+});
+//#endregion
+//#region src/core/format.ts
+function Z(e, t = 0) {
+	return e.toLocaleString("nl-NL", {
+		minimumFractionDigits: t,
+		maximumFractionDigits: t
+	});
+}
+function $r(e) {
+	return Math.abs(e) >= 1e6 ? `${Z(e / 1e6, 1)} mln` : Math.abs(e) >= 1e4 ? `${Math.round(e / 1e3)}k` : Z(e);
+}
+function ei(e, t) {
+	let n = Z(e);
+	return ni(n, t) ? n : $r(e);
+}
+var ti = 6.5;
+function ni(e, t) {
+	return e.length * ti <= t;
+}
+var ri = "'RijksSans', 'Source Sans 3', sans-serif", Q;
+function ii(e, t, n = "") {
+	if (ai(e, n) <= t) return e;
+	let r = e.length;
+	for (; r > 1;) {
+		--r;
+		let i = `${e.slice(0, r).trimEnd()}…`;
+		if (ai(i, n) <= t) return i;
+	}
+	return "…";
+}
+function ai(e, t = "", n = 400) {
+	return Q === void 0 && (Q = typeof document > "u" ? null : document.createElement("canvas").getContext("2d") ?? null), Q ? (Q.font = `${n} 12px ${t.trim() || ri}`, Q.measureText(e).width) : e.length * ti;
+}
+function oi(e, t = 0) {
+	return `${Z(e, t)}%`;
+}
+//#endregion
+//#region node_modules/lit-html/directives/live.js
+var si = R(class extends z {
 	constructor(e) {
 		if (super(e), e.type !== L.PROPERTY && e.type !== L.ATTRIBUTE && e.type !== L.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
 		if (!In(e)) throw Error("`live` bindings can only contain a single expression");
@@ -2701,48 +2740,48 @@ var Zr = (e, t, n) => {
 		} else if (e.type === L.ATTRIBUTE && n.getAttribute(r) === t + "") return w;
 		return zn(e), t;
 	}
-}), Z = (e, t) => {
+}), $ = (e, t) => {
 	let n = e._$AN;
 	if (n === void 0) return !1;
-	for (let e of n) e._$AO?.(t, !1), Z(e, t);
+	for (let e of n) e._$AO?.(t, !1), $(e, t);
 	return !0;
-}, ei = (e) => {
+}, ci = (e) => {
 	let t, n;
 	do {
 		if ((t = e._$AM) === void 0) break;
 		n = t._$AN, n.delete(e), e = t;
 	} while (n?.size === 0);
-}, ti = (e) => {
+}, li = (e) => {
 	for (let t; t = e._$AM; e = t) {
 		let n = t._$AN;
 		if (n === void 0) t._$AN = n = /* @__PURE__ */ new Set();
 		else if (n.has(e)) break;
-		n.add(e), ii(t);
+		n.add(e), fi(t);
 	}
 };
-function ni(e) {
-	this._$AN === void 0 ? this._$AM = e : (ei(this), this._$AM = e, ti(this));
+function ui(e) {
+	this._$AN === void 0 ? this._$AM = e : (ci(this), this._$AM = e, li(this));
 }
-function ri(e, t = !1, n = 0) {
+function di(e, t = !1, n = 0) {
 	let r = this._$AH, i = this._$AN;
 	if (i !== void 0 && i.size !== 0) {
 		if (t) {
-			if (Array.isArray(r)) for (let e = n; e < r.length; e++) Z(r[e], !1), ei(r[e]);
-			else r != null && (Z(r, !1), ei(r));
-		} else Z(this, e);
+			if (Array.isArray(r)) for (let e = n; e < r.length; e++) $(r[e], !1), ci(r[e]);
+			else r != null && ($(r, !1), ci(r));
+		} else $(this, e);
 	}
 }
-var ii = (e) => {
-	e.type == L.CHILD && (e._$AP ??= ri, e._$AQ ??= ni);
-}, ai = class extends z {
+var fi = (e) => {
+	e.type == L.CHILD && (e._$AP ??= di, e._$AQ ??= ui);
+}, pi = class extends z {
 	constructor() {
 		super(...arguments), this._$AN = void 0;
 	}
 	_$AT(e, t, n) {
-		super._$AT(e, t, n), ti(this), this.isConnected = e._$AU;
+		super._$AT(e, t, n), li(this), this.isConnected = e._$AU;
 	}
 	_$AO(e, t = !0) {
-		e !== this.isConnected && (this.isConnected = e, e ? this.reconnected?.() : this.disconnected?.()), t && (Z(this, e), ei(this));
+		e !== this.isConnected && (this.isConnected = e, e ? this.reconnected?.() : this.disconnected?.()), t && ($(this, e), ci(this));
 	}
 	setValue(e) {
 		if (In(this._$Ct)) this._$Ct._$AI(e, this);
@@ -2753,7 +2792,7 @@ var ii = (e) => {
 	}
 	disconnected() {}
 	reconnected() {}
-}, oi = /* @__PURE__ */ new WeakMap(), si = R(class extends ai {
+}, mi = /* @__PURE__ */ new WeakMap(), hi = R(class extends pi {
 	render(e) {
 		return T;
 	}
@@ -2764,13 +2803,13 @@ var ii = (e) => {
 	rt(e) {
 		if (this.G !== void 0) {
 			if (this.isConnected || (e = void 0), typeof this.G == "function") {
-				let t = this.ht ?? globalThis, n = oi.get(t);
-				n === void 0 && (n = /* @__PURE__ */ new WeakMap(), oi.set(t, n)), n.get(this.G) !== void 0 && this.G.call(this.ht, void 0), n.set(this.G, e), e !== void 0 && this.G.call(this.ht, e);
+				let t = this.ht ?? globalThis, n = mi.get(t);
+				n === void 0 && (n = /* @__PURE__ */ new WeakMap(), mi.set(t, n)), n.get(this.G) !== void 0 && this.G.call(this.ht, void 0), n.set(this.G, e), e !== void 0 && this.G.call(this.ht, e);
 			} else this.G.value = e;
 		}
 	}
 	get lt() {
-		return typeof this.G == "function" ? oi.get(this.ht ?? globalThis)?.get(this.G) : this.G?.value;
+		return typeof this.G == "function" ? mi.get(this.ht ?? globalThis)?.get(this.G) : this.G?.value;
 	}
 	disconnected() {
 		this.lt === this.ct && this.rt(void 0);
@@ -2778,55 +2817,19 @@ var ii = (e) => {
 	reconnected() {
 		this.rt(this.ct);
 	}
-}), ci = /* @__PURE__ */ new Set(), li = !1;
-function ui() {
-	for (let e of ci) e();
+}), gi = /* @__PURE__ */ new Set(), _i = !1;
+function vi() {
+	for (let e of gi) e();
 }
-function di(e) {
-	return !li && typeof window < "u" && (window.addEventListener("beforeprint", ui), li = !0), ci.add(e), () => ci.delete(e);
-}
-var fi = /* @__PURE__ */ new Set(), pi = null;
-function mi(e) {
-	for (let t of fi) t(e.matches);
-}
-function hi(e) {
-	return !pi && typeof matchMedia < "u" && (pi = matchMedia("print"), pi.addEventListener("change", mi)), fi.add(e), () => fi.delete(e);
-}
-//#endregion
-//#region src/core/format.ts
-function Q(e, t = 0) {
-	return e.toLocaleString("nl-NL", {
-		minimumFractionDigits: t,
-		maximumFractionDigits: t
-	});
-}
-function gi(e) {
-	return Math.abs(e) >= 1e6 ? `${Q(e / 1e6, 1)} mln` : Math.abs(e) >= 1e4 ? `${Math.round(e / 1e3)}k` : Q(e);
-}
-function _i(e, t) {
-	let n = Q(e);
-	return yi(n, t) ? n : gi(e);
-}
-var vi = 6.5;
-function yi(e, t) {
-	return e.length * vi <= t;
-}
-var bi = "'RijksSans', 'Source Sans 3', sans-serif", $;
-function xi(e, t, n = "") {
-	if (Si(e, n) <= t) return e;
-	let r = e.length;
-	for (; r > 1;) {
-		--r;
-		let i = `${e.slice(0, r).trimEnd()}…`;
-		if (Si(i, n) <= t) return i;
-	}
-	return "…";
+function yi(e) {
+	return !_i && typeof window < "u" && (window.addEventListener("beforeprint", vi), _i = !0), gi.add(e), () => gi.delete(e);
 }
-function Si(e, t = "", n = 400) {
-	return $ === void 0 && ($ = typeof document > "u" ? null : document.createElement("canvas").getContext("2d") ?? null), $ ? ($.font = `${n} 12px ${t.trim() || bi}`, $.measureText(e).width) : e.length * vi;
+var bi = /* @__PURE__ */ new Set(), xi = null;
+function Si(e) {
+	for (let t of bi) t(e.matches);
 }
-function Ci(e, t = 0) {
-	return `${Q(e, t)}%`;
+function Ci(e) {
+	return !xi && typeof matchMedia < "u" && (xi = matchMedia("print"), xi.addEventListener("change", Si)), bi.add(e), () => bi.delete(e);
 }
 //#endregion
 //#region src/tokens/colors.ts
@@ -2856,4 +2859,4 @@ function Ei(e) {
 	return `var(--color-chart-${e})`;
 }
 //#endregion
-export { Dn as $, Ue as $t, Cr as A, Nt as At, nr as B, ht as Bt, Fr as C, R as Ct, Er as D, Pt as Dt, kr as E, Ft as Et, cr as F, _t as Ft, qn as G, et as Gt, Zn as H, lt as Ht, or as I, dt as It, An as J, j as Jt, Un as K, it as Kt, ar as L, ft as Lt, mr as M, Ct as Mt, hr as N, Mt as Nt, Tr as O, St as Ot, lr as P, gt as Pt, kn as Q, Ve as Qt, ir as R, mt as Rt, Ir as S, Lt as St, Dr as T, L as Tt, Xn as U, st as Ut, $n as V, ct as Vt, Gn as W, ot as Wt, Mn as X, We as Xt, Nn as Y, M as Yt, wn as Z, A as Zt, Kr as _, an as _t, gi as a, e as an, _n as at, Wr as b, B as bt, Ci as c, pn as ct, di as d, mn as dt, T as en, On as et, hi as f, nn as ft, Xr as g, rn as gt, Qr as h, tn as ht, yi as i, o as in, yn as it, br as j, jt, wr as k, kt, Si as l, G as lt, $r as m, cn as mt, Ei as n, C as nn, xn as nt, _i as o, vn as ot, si as p, en as pt, Hn as q, tt as qt, Ti as r, Ce as rn, bn as rt, Q as s, q as st, wi as t, Ie as tn, Cn as tt, xi as u, K as ut, qr as v, sn as vt, Nr as w, z as wt, Gr as x, zt as xt, Jr as y, $t as yt, tr as z, pt as zt };
+export { Dn as $, Ue as $t, Cr as A, Nt as At, nr as B, ht as Bt, Fr as C, R as Ct, Er as D, Pt as Dt, kr as E, Ft as Et, cr as F, _t as Ft, qn as G, et as Gt, Zn as H, lt as Ht, or as I, dt as It, An as J, j as Jt, Un as K, it as Kt, ar as L, ft as Lt, mr as M, Ct as Mt, hr as N, Mt as Nt, Tr as O, St as Ot, lr as P, gt as Pt, kn as Q, Ve as Qt, ir as R, mt as Rt, Ir as S, Lt as St, Dr as T, L as Tt, Xn as U, st as Ut, $n as V, ct as Vt, Gn as W, ot as Wt, Mn as X, We as Xt, Nn as Y, M as Yt, wn as Z, A as Zt, Kr as _, an as _t, Ci as a, e as an, _n as at, Wr as b, B as bt, ni as c, pn as ct, Z as d, mn as dt, T as en, On as et, oi as f, nn as ft, Xr as g, rn as gt, Qr as h, tn as ht, yi as i, o as in, yn as it, br as j, jt, wr as k, kt, $r as l, G as lt, ii as m, cn as mt, Ei as n, C as nn, xn as nt, hi as o, vn as ot, ai as p, en as pt, Hn as q, tt as qt, Ti as r, Ce as rn, bn as rt, si as s, q as st, wi as t, Ie as tn, Cn as tt, ei as u, K as ut, qr as v, sn as vt, Nr as w, z as wt, Gr as x, zt as xt, Jr as y, $t as yt, tr as z, pt as zt };

package/dist-elements/chunks/{controls-DxmnDSBr.js → controls-_4ac1Lpz.js}

@@ -1,4 +1,4 @@
-//#region src/components/forms/form/controls.ts
+//#region src/components/shared/controls.ts
 var e = /* @__PURE__ */ new Set([
 	"input",
 	"select",

package/dist-elements/chunks/{date-format-mHtZyBys.js → date-format-DxP9yfDp.js}

@@ -1,4 +1,4 @@
-//#region src/components/inputs/date-input/date-format.ts
+//#region src/components/shared/date-format.ts
 var e = /^(\d{4})-(\d{2})-(\d{2})$/, t = /^(\d{1,2})[-./](\d{1,2})[-./](\d{2}|\d{4})$/, n = (e, t = 2) => String(e).padStart(t, "0");
 function r(e, t) {
 	return new Date(Date.UTC(e, t, 0)).getUTCDate();

package/dist-elements/chunks/{dialog-DChINFxD.js → dialog-B7aRBtjy.js}

@@ -1,5 +1,5 @@
-import { Ht as e } from "./base-CbmWxUig.js";
-import { t } from "./focus-trap-BwOxE5BX.js";
+import { Ht as e } from "./base-DRGvkF-r.js";
+import { t } from "./focus-trap-Dv8zu64A.js";
 //#region src/components/shared/dialog.ts
 var n = class {
 	#e = new t();

package/dist-elements/chunks/{disclosure-DLkXPUpV.js → disclosure-DirPLy2E.js}

@@ -1,4 +1,4 @@
-import { dt as e, en as t, nn as n, ut as r } from "./base-CbmWxUig.js";
+import { dt as e, en as t, nn as n, ut as r } from "./base-DRGvkF-r.js";
 //#region src/components/shared/disclosure.ts
 var i = 0;
 function a() {