lintje 0.3.0 → 0.4.0

package/dist-elements/types/components/tables/card/card.d.ts

@@ -13,10 +13,10 @@
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import { type Tone } from '../../../primitives/shared/tone.js';
-import '../../../primitives/button/button.js';
-import '../../../primitives/icon-button/icon-button.js';
-import '../../../primitives/skeleton/skeleton.js';
+import { type Tone } from '../../shared/tone.js';
+import '../../actions/button/button.js';
+import '../../actions/icon-button/icon-button.js';
+import '../../feedback/skeleton/skeleton.js';
 export type CardStatusTone = Tone;
 export interface CardStatus {
     /** The word that carries the status: "Je hebt toegang". */

package/dist-elements/types/components/tables/data-table/actions.d.ts

@@ -7,7 +7,7 @@
  */
 import { type TemplateResult } from 'lit';
 import '../../actions/menu-button/menu-button.js';
-import '../../../primitives/button/button.js';
+import '../../actions/button/button.js';
 import type { TableAction } from '../../../types.js';
 /** The rows a Shift+click checks: `anchor` to `target` inclusive; only `target` without an anchor. */
 export declare function rangeIds(order: readonly string[], anchor: string | null, target: string): string[];

package/dist-elements/types/components/tables/data-table/data-table.d.ts

@@ -19,9 +19,9 @@ import '../../feedback/empty-state/empty-state.js';
 import '../description-list/description-list.js';
 import '../../actions/menu-button/menu-button.js';
 import '../pagination/pagination.js';
-import '../../../primitives/status-dot/status-dot.js';
-import '../../../primitives/skeleton/skeleton.js';
-import '../../../primitives/tile/tile.js';
+import '../../feedback/status-dot/status-dot.js';
+import '../../feedback/skeleton/skeleton.js';
+import '../../layout/tile/tile.js';
 import type { DataTableData, SortState } from '../../../types.js';
 import { type FilterValue } from './filters.js';
 type Panel = {

package/dist-elements/types/components/tables/data-table/editing.d.ts

@@ -7,7 +7,7 @@
  * never keeps the value. Only the desktop table edits.
  */
 import { type TemplateResult } from 'lit';
-import '../../../primitives/spinner/spinner.js';
+import '../../feedback/spinner/spinner.js';
 import type { CellValue, DataTableData, TableCellRef, TableColumnData } from '../../../types.js';
 export interface CellPosition {
     row: number;

package/dist-elements/types/components/tables/data-table/filters.d.ts

@@ -6,9 +6,9 @@
  * stays first and shown. Range and period filters are not here.
  */
 import { type TemplateResult } from 'lit';
-import '../../../primitives/popover/popover.js';
-import '../../../primitives/button/button.js';
-import '../../../primitives/tooltip/tooltip.js';
+import '../../overlays/popover/popover.js';
+import '../../actions/button/button.js';
+import '../../overlays/tooltip/tooltip.js';
 import '../../overlays/drawer/drawer.js';
 import '../sortable-list/sortable-list.js';
 import type { SortableItem } from '../sortable-list/sortable-list.js';

package/dist-elements/types/components/tables/description-list/description-list.d.ts

@@ -7,8 +7,8 @@
  * Events: `lintje-navigate` `{ href }`.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
-import { type Tone } from '../../../primitives/shared/tone.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
+import { type Tone } from '../../shared/tone.js';
 /** A link on the right of the value, for changing it ("Locatie wijzigen" as accessible name). */
 export interface DescriptionAction {
     href: string;

package/dist-elements/types/components/tables/list/list.d.ts

@@ -16,11 +16,11 @@ import { LintjeElement } from '../../../core/element.js';
 import '../../feedback/empty-state/empty-state.js';
 import '../../actions/menu-button/menu-button.js';
 import '../../inputs/text-input/text-input.js';
-import '../../../primitives/badge/badge.js';
-import '../../../primitives/button/button.js';
-import '../../../primitives/progress-bar/progress-bar.js';
+import '../../feedback/badge/badge.js';
+import '../../actions/button/button.js';
+import '../../feedback/progress-bar/progress-bar.js';
 import type { MenuEntry } from '../../actions/menu-button/menu-button.js';
-import type { BadgeTone } from '../../../primitives/badge/badge.js';
+import type { BadgeTone } from '../../feedback/badge/badge.js';
 export interface ListItem {
     id: string;
     title: string;

package/dist-elements/types/components/tables/tree-view/tree-view.d.ts

@@ -9,7 +9,7 @@
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/spinner/spinner.js';
+import '../../feedback/spinner/spinner.js';
 export interface TreeNode {
     id: string;
     label: string;

package/dist-elements/types/core/focus.d.ts

@@ -1,6 +1,6 @@
 /**
  * Where the focus is, through every shadow root, and whether a modal dialog stands around a
- * node. In `core/` because primitives and components both need it.
+ * node. In `core/` because tags in every category need it.
  */
 /** The element that really has focus, through every shadow root below it. */
 export declare function deepActiveElement(): HTMLElement | null;

package/dist-elements/types/types.d.ts

@@ -5,15 +5,15 @@
  * names come from their one list, `tokens/colors.ts`.
  */
 import type { DataColor } from './tokens/colors.js';
-import type { ContentStateKind, Tone } from './primitives/shared/tone.js';
-import type { StatusTone } from './primitives/status-dot/status-dot.js';
-import type { AnnouncementKind } from './primitives/shared/announcement-block.js';
+import type { ContentStateKind, Tone } from './components/shared/tone.js';
+import type { StatusTone } from './components/feedback/status-dot/status-dot.js';
+import type { AnnouncementKind } from './components/shared/announcement-block.js';
 import type { ChartSpec, MapSpec } from './components/shared/charts/shared/types.js';
 import type { MenuEntry } from './components/actions/menu-button/menu-button.js';
 import type { NotificationItem } from './components/frame/notifications/notifications.js';
-export type { BarSeriesData, ChartColor, ChartEvent, ChartKind, ChartSpec, LineSeriesData, MapSpec, MapValue, MapPlotData, MapPlotVariant, MapVariant, ScatterPoint, ScatterSeriesData, WmsBasemap, MapArea, MapControls, } from './components/shared/charts/shared/types.js';
+export type { BarSeriesData, ChartColor, ChartEvent, ChartKind, ChartSpec, LineSeriesData, MapSpec, MapValue, MapPlotData, MapPlotVariant, MapVariant, ScatterPoint, ScatterSeriesData, WmsBasemap, MapArea, MapControls, RadarSeriesData, } from './components/shared/charts/shared/types.js';
 export type { DataColor } from './tokens/colors.js';
-export type { Tone, WorkState, ContentStateKind } from './primitives/shared/tone.js';
+export type { Tone, WorkState, ContentStateKind } from './components/shared/tone.js';
 /** Settings every view receives, taken from the URL by the host. */
 export interface FrameSettings {
     mode?: 'light' | 'dark';
@@ -26,7 +26,7 @@ export interface ContentState {
     lastKnown?: string;
 }
 /** A source's delivery status: the status column's and `lintje-status-dot`'s own words, each a `Tone`. */
-export type { StatusTone } from './primitives/status-dot/status-dot.js';
+export type { StatusTone } from './components/feedback/status-dot/status-dot.js';
 export type TrendDirection = 'up' | 'down' | 'flat';
 /**
  * One colour per variable, named after the Rijkshuisstijl colour it is: a `DataColor`, the
@@ -334,7 +334,7 @@ export interface TableDetailField {
     unit?: string;
 }
 /** `outage` interrupts and cannot be closed; `error` is a failure the reader may put away. */
-export type { AnnouncementKind } from './primitives/shared/announcement-block.js';
+export type { AnnouncementKind } from './components/shared/announcement-block.js';
 export interface AnnouncementData {
     kind?: AnnouncementKind;
     title?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lintje",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "Lintje: the Rijkshuisstijl design system as Lit web components",
   "license": "EUPL-1.2",

package/dist-elements/chunks/download-Ct9q2anY.js

@@ -1,206 +0,0 @@
-import { P as e, bt as t, en as n, in as r, lt as i, nn as a, ut as o } from "./base-CbmWxUig.js";
-import "../tag/modal.js";
-//#region src/components/shared/content-tile.ts
-var s = class extends e {
-	constructor(...e) {
-		super(...e), this.expanded = !1;
-	}
-	static {
-		this.properties = { expanded: { state: !0 } };
-	}
-	expand(e) {
-		this.expanded !== e && (this.expanded = e, this.expandChanged(e));
-	}
-	expandChanged(e) {}
-	renderExpandModal(e, t) {
-		let { heading: r, subtitle: i, footnote: o, csv: s, png: c } = t;
-		return a`<lintje-modal
-      .open=${this.expanded}
-      heading=${r ?? "Vergroot"}
-      subtitle=${i ?? n}
-      .csv=${s !== void 0}
-      .png=${c !== void 0}
-      @lintje-close=${(e) => {
-			e.stopPropagation(), this.expand(!1);
-		}}
-      @lintje-download-csv=${(e) => {
-			e.stopPropagation(), s?.();
-		}}
-      @lintje-download-png=${(e) => {
-			e.stopPropagation(), c?.();
-		}}
-    >
-      ${e}${o ? a`<span slot="footer">${o}</span>` : n}
-    </lintje-modal>`;
-	}
-};
-//#endregion
-//#region src/components/shared/charts/shared/chart-icons.ts
-function c(e, t, r = 16, i) {
-	let a = o(e, {
-		size: r,
-		flip: i
-	});
-	return a === n ? t : a;
-}
-var l = [
-	{
-		action: "in",
-		name: "functioneel-plus",
-		text: "+",
-		label: "Inzoomen"
-	},
-	{
-		action: "out",
-		name: "functioneel-minus",
-		text: "−",
-		label: "Uitzoomen"
-	},
-	{
-		action: "home",
-		name: "functioneel-refresh",
-		flip: "horizontal",
-		text: "Terug",
-		label: "Kaart terugzetten"
-	}
-];
-//#endregion
-//#region src/components/shared/charts/shared/chart-states.ts
-function u(e = "100%", n = 12, r = "") {
-	let i = (e) => typeof e == "number" ? `${e}px` : e;
-	return a`<span class="lintje-skeleton ${r}"
-                    ${t({
-		width: i(e),
-		height: i(n)
-	})} aria-hidden="true"></span>`;
-}
-function d({ kind: e = "line", height: r, status: i = !0 } = {}) {
-	return a`
-    <div class="lintje-chart-skeleton lintje-chart-skeleton--${e}"
-         ${t({ height: r ?? (e === "table" ? void 0 : "var(--chart-h-main)") })}
-         role=${i ? "status" : n}
-         aria-hidden=${i ? n : "true"}>
-      <!-- In words, not only in a label: a status region is spoken from its content. -->
-      ${i ? a`<span class="visually-hidden">Gegevens laden…</span>` : n}
-      ${e === "line" || e === "bar" ? a`
-        <div class="lintje-chart-skeleton__y-labels">
-          ${[
-		0,
-		1,
-		2,
-		3
-	].map(() => u(24, 10))}
-        </div>
-        <div class="lintje-chart-skeleton__x-labels">
-          ${[
-		0,
-		1,
-		2
-	].map(() => u(32, 10))}
-        </div>
-        <div class="lintje-chart-skeleton__plot">
-          ${u("100%", "100%", "lintje-chart-skeleton__fill")}
-        </div>
-      ` : n}
-      ${e === "pie" || e === "donut" ? a`
-        <!-- Sized by the skeleton's own box, so it always fits beside its lines. -->
-        ${u("min(100cqh, 60cqw, 200px)", "auto", "lintje-chart-skeleton__disc")}
-        <div class="lintje-chart-skeleton__lines">
-          ${[
-		"80%",
-		"64%",
-		"48%"
-	].map((e) => u(e, 13))}
-        </div>
-      ` : n}
-      ${e === "heatmap" ? Array.from({ length: 35 }, () => u("100%", "100%")) : n}
-      ${e === "map" ? a`
-        ${u("100%", "100%", "lintje-chart-skeleton__fill")}
-        <div class="lintje-chart-skeleton__zoom" aria-hidden="true">
-          ${l.map((e) => a`
-            <span class="lintje-chart-skeleton__zoom-button">${c(e.name, e.text, 16, "flip" in e ? e.flip : void 0)}</span>
-          `)}
-        </div>
-      ` : n}
-      ${e === "table" ? Array.from({ length: 5 }, () => a`
-        <div class="lintje-chart-skeleton__row">
-          ${u("32%")}
-          ${u("12%", 12, "lintje-chart-skeleton__measure")}
-          ${u("12%")}
-        </div>
-      `) : n}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/shared/chart.css?inline
-var f = ".lintje-chart { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }\n/* Charts that are as high as their rows (horizontal bars, target progress) center in a taller\n   tile instead of leaving the space below them empty. */\n.lintje-chart--rows { margin-block: auto; }\n.lintje-chart__axis-title { font: var(--text-axis); color: var(--color-text-muted); }\n/* The title of the x axis (`xTitle` in `renderChartFrame`): the axis title's type, in the\n   drawing, under the x labels at the right. */\n.lintje-chart__x-title { font: var(--text-axis); fill: var(--color-text-muted); }\n.lintje-chart__svg {\n  width: 100%;\n  display: block;\n  overflow: visible;\n}\n\n.lintje-chart__axis-label {\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  font-weight: 400;\n  fill: var(--color-chart-axis);\n}\n/* Data labels are bold so they read as values rather than axis labels. */\n.lintje-chart__data-label {\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  font-weight: 700;\n  fill: var(--color-text-primary);\n}\n/* On a mark the label takes the text of the fill it stands on: white on a dark rung, ink on a\n   light one. The fills are the same in both modes, so the label is too. */\n.lintje-chart__data-label--inside { fill: var(--color-text-on-fill); }\n.lintje-chart__data-label--inside-light { fill: var(--color-text-on-light-fill); }\n/* On a threshold line (horizontal bars) or beside one (histogram, scatter): a halo in the surface color.\n   Invisible on the tile, it cuts a line or a bar where the label crosses it. */\n.lintje-chart__data-label--halo,\n.lintje-chart__axis-label--halo {\n  stroke: var(--color-bg-surface);\n  stroke-width: 4px;\n  stroke-linejoin: round;\n  paint-order: stroke fill;\n}\n.lintje-chart__as-of-label {\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  font-weight: 700;\n  fill: var(--color-text-primary);\n}\n.lintje-chart__as-of-note {\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  fill: var(--color-text-muted);\n  /* A halo in the surface, as a data label on a line has: an event line may cross it. */\n  stroke: var(--color-bg-surface);\n  stroke-width: 4px;\n  stroke-linejoin: round;\n  paint-order: stroke fill;\n}\n\n.lintje-chart__line { stroke-width: 2.5; fill: none; stroke-linejoin: round; }\n/* 1 px either side of the line, under it (`lineCasing`). */\n.lintje-chart__line--casing { stroke-width: 4.5; }\n\n/* Bars. transform-box: fill-box puts the origin in the bar's own box instead of the svg's:\n   a bar widens around its own middle. A horizontal bar is anchored at the category axis. */\n.lintje-chart__bar {\n  transform-box: fill-box;\n  transform-origin: 50% 100%;\n  transition: transform var(--dur-hover) var(--ease-in-motion), filter var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-chart__bar--horizontal { transform-origin: 0 50%; }\n\n/* The bar under the pointer widens a little and lifts with a light\n   shadow, so it is clear what the tooltip describes — the same lift as a pie segment. Only the\n   width grows: the length carries the value. A stacked column lifts as a whole. */\n.lintje-chart__bar-group:hover .lintje-chart__bar,\n.lintje-chart__bar-group.is-hovered .lintje-chart__bar {\n  transform: scaleX(1.06);\n  filter: drop-shadow(var(--shadow-chart-hover));\n}\n/* A histogram's classes touch: its lift is a copy drawn over its neighbours. */\n.lintje-chart__bar--lifted {\n  transform: scaleX(1.06);\n  filter: drop-shadow(var(--shadow-chart-hover));\n  pointer-events: none;\n}\n.lintje-chart__bar-row:hover .lintje-chart__bar--horizontal,\n.lintje-chart__bar-row.is-hovered .lintje-chart__bar--horizontal {\n  transform: scaleY(1.12);\n  filter: drop-shadow(var(--shadow-chart-hover));\n}\n\n/* A mark that drills. The same three states wherever a mark can carry a\n   href — bars, stacked segments, pie slices — and the same ones the map draws: the chosen\n   mark takes the text colour as a 2 px outline (the outline is the carrier, not the colour,\n   rule 13) and every other mark steps back so it reads against them; .45 is the legend's own\n   dimming. The focus ring is the orange 3 px of every other control, around the shape with\n   a 1 px gap in the surface (`renderFocusRing`, axes.ts), so an orange mark keeps it too: the\n   box an outline draws around a slice or a stacked segment is not the shape the reader is on. */\n.lintje-chart__mark.is-clickable { cursor: pointer; }\n.lintje-chart__mark.is-selected { stroke: var(--color-text-primary); stroke-width: 2; }\n.lintje-chart__mark.is-muted { fill-opacity: .45; }\n/* A focused SVG element with a tabindex gets the browser's own box even where `:focus-visible`\n   does not match, after a click: the ring below is the only one. */\n.lintje-chart__mark:focus { outline: none; }\n/* Weighs as much as the hover's lift and stands after it, so the ring is what a focused bar\n   under the pointer shows. Only a clickable mark takes the focus. */\n.lintje-chart__mark.is-clickable:focus-visible {\n  outline: none;\n  filter: var(--lintje-focus-ring);\n}\n.lintje-chart__focus-ring { flood-color: var(--color-focus); }\n.lintje-chart__focus-gap { flood-color: var(--color-bg-surface); }\n/* Stacked segments and slices of neighbouring tints part with a 1 px line in the surface:\n   two rungs of the ladder differ by 1.2–1.5:1. */\n.lintje-chart__segment { stroke: var(--color-bg-surface); stroke-width: 1px; }\n\n/* Draw-in takes 900 ms for data marks only. Axes, grid and titles appear immediately. */\n@media (prefers-reduced-motion: no-preference) {\n  /* A line and the area below it are uncovered together from left to right. The clip opens over the box\n     of the series; the negative insets leave room for the stroke outside that box. */\n  .lintje-chart__reveal { animation: lintje-reveal var(--dur-draw) var(--ease-in-motion) backwards; }\n  /* Bars grow from the axis one after another: left to right, or top to bottom when horizontal\n     --lintje-stagger (0 to 1, set per bar) spreads the starts over the first\n     40 % of the draw and each bar grows in the other 60 %, so all are done at --dur-draw. A\n     column grows as a whole, so stacked segments stay together. Fill mode `backwards`, not\n     `both`: a transform held after the end would override the hover transform. */\n  .lintje-chart__bar-group,\n  .lintje-chart__bar--horizontal {\n    animation-duration: calc(var(--dur-draw) * 0.6);\n    animation-timing-function: var(--ease-in-motion);\n    animation-delay: calc(var(--dur-draw) * 0.4 * var(--lintje-stagger, 0));\n    animation-fill-mode: backwards;\n  }\n  .lintje-chart__bar-group {\n    transform-box: fill-box;\n    transform-origin: 50% 100%;\n    animation-name: lintje-grow;\n  }\n  .lintje-chart__bar--horizontal { animation-name: lintje-grow-x; }\n  .lintje-chart__bar--lifted { animation: lintje-lift var(--dur-hover) var(--ease-in-motion) backwards; }\n  /* Data labels fade in once the marks are drawn, eased at both ends. */\n  .lintje-chart__data-label { animation: lintje-fade-in var(--dur-data-label) ease-in-out var(--dur-draw) both; }\n  /* A reference line comes in with its label once the marks are drawn, as a data label does;\n     a data label inside it does not fade a second time. */\n  .lintje-chart__reference { animation: lintje-fade-in var(--dur-data-label) ease-in-out var(--dur-draw) both; }\n  /* A scatter point grows from its middle as a map point does, one after another along x, with\n     the bars' timing. */\n  .lintje-chart__point {\n    transform-box: fill-box;\n    transform-origin: 50% 50%;\n    animation: lintje-point-grow calc(var(--dur-draw) * 0.6) var(--ease-in-motion)\n      calc(var(--dur-draw) * 0.4 * var(--lintje-stagger, 0)) backwards;\n  }\n  .lintje-chart__reference .lintje-chart__data-label { animation: none; }\n\n  /* Draw in only once the chart comes into view. By default the marks are\n     paused on their first frame (series covered, bar flat, label gone); as soon\n     as usePlotArea sets data-in-view on the outermost chart element, they run.\n     These rules come after the `animation` shorthands above: those set\n     animation-play-state back to running and would otherwise win at equal\n     specificity. They sit inside this media block because with reduced motion\n     there is no animation — and a paused fill-mode would keep the marks\n     invisible there. */\n  .lintje-chart__reveal,\n  .lintje-chart__bar-group,\n  .lintje-chart__bar--horizontal,\n  .lintje-chart__data-label,\n  .lintje-chart__reference,\n  .lintje-chart__point { animation-play-state: paused; }\n  [data-in-view] .lintje-chart__reveal,\n  [data-in-view] .lintje-chart__bar-group,\n  [data-in-view] .lintje-chart__bar--horizontal,\n  [data-in-view] .lintje-chart__data-label,\n  [data-in-view] .lintje-chart__reference,\n  [data-in-view] .lintje-chart__point { animation-play-state: running; }\n}\n@keyframes lintje-reveal {\n  from { clip-path: inset(-8px calc(100% + 8px) -8px -8px); }\n  to   { clip-path: inset(-8px); }\n}\n@keyframes lintje-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }\n@keyframes lintje-lift { from { transform: none; filter: none; } }\n@keyframes lintje-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }\n\n/* --- Legend -------------------------------------------------------------- */\n.lintje-legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n}\n/* A legend above the chart keeps 12 px to the axis title below it. */\n.lintje-chart-wrap > .lintje-legend { margin-bottom: var(--space-3); }\n.lintje-legend--right { flex-direction: column; flex-wrap: nowrap; }\n.lintje-legend__item { display: flex; align-items: center; gap: 6px; }\n.lintje-legend__button { display: flex; align-items: center; gap: 6px; font: inherit; color: inherit; }\n/* A series switched off: the marker steps back and the name is struck through, at full\n   contrast — the strike and `aria-pressed` carry the state, not a faded word. */\n.lintje-legend__item.is-hidden .lintje-legend__marker { opacity: 0.45; }\n.lintje-legend__item.is-hidden .lintje-legend__label { text-decoration: line-through; }\n\n.lintje-legend__marker { flex: none; display: block; }\n.lintje-legend__marker--symbol { width: 14px; height: 14px; }\n.lintje-legend__marker--square    { width: 12px; height: 12px; background: currentColor; }\n.lintje-legend__marker--line  { width: 14px; height: 3px;  background: currentColor; }\n/* \"No data\" on a map: the hatch the mark carries, on the surface (rule 15). */\n.lintje-legend__marker--hatch {\n  width: 16px; height: 10px;\n  background: repeating-linear-gradient(45deg, var(--color-chart-hatch) 0 2px, transparent 2px 6px);\n  border: 1px solid var(--color-border-default);\n}\n.lintje-legend__marker--dashed {\n  width: 14px; height: 0;\n  border-top: 2px dashed currentColor;\n}\n\n/* --- Tooltip ------------------------------------------------------------- */\n.lintje-chart-tooltip {\n  position: absolute;\n  z-index: 55;\n  pointer-events: none;\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-popover);\n  box-shadow: var(--shadow-popover);\n  padding: var(--space-2) 10px;\n  font: var(--text-small);\n  min-width: 160px;\n  /* Its own width, whatever its position: shrink-to-fit narrowed it near the right edge. */\n  width: max-content;\n  max-width: 320px;\n}\n.lintje-chart-tooltip__title { font-weight: 700; margin-bottom: 4px; }\n.lintje-chart-tooltip__row { display: flex; align-items: center; gap: 6px; justify-content: space-between; }\n.lintje-chart-tooltip__label { display: flex; align-items: center; gap: 6px; }\n.lintje-chart-tooltip__marker { width: 10px; height: 10px; flex: none; }\n.lintje-chart-tooltip__marker--symbol { width: 14px; height: 14px; }\n.lintje-chart-tooltip__row--divider {\n  border-top: 1px solid var(--color-border-popover);\n  margin-top: var(--space-1);\n  padding-top: var(--space-1);\n}\n.lintje-chart-tooltip__value { font-weight: 700; margin-left: var(--space-3); }\n.lintje-chart-tooltip__event {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-2);\n  margin-top: var(--space-1);\n  padding-top: var(--space-1);\n  border-top: 1px solid var(--color-border-default);\n}\n/* One line divides the values from the events, not one event from the next. */\n.lintje-chart-tooltip__event + .lintje-chart-tooltip__event { padding-top: 0; border-top: 0; }\n\n.lintje-chart-wrap { position: relative; min-width: 0; }\n\n/* Chart tooltip anchor: coordinates and positioning both share this element. */\n[data-tooltip-anchor] { position: relative; }\n\n/* Hover point on a line: 4 px in the series color — the size of the as-of point —\n   with a ring in the surface color, so it stays legible on the line and on the\n   filled area below it. No animation: hover does not redraw. */\n.lintje-chart__hover-point { stroke: var(--color-bg-surface); stroke-width: 2; pointer-events: none; }\n/* A point of a series the legend hides keeps its node, so it does not grow again. */\n.lintje-chart__point.is-hidden { visibility: hidden; }\n/* The edge of a dark-yellow hover point (`lineCasing`), over its ring. */\n.lintje-chart__hover-casing { fill: none; stroke-width: 1; pointer-events: none; }\n\n/* The scatter plot's one pointer target, under its points: the nearest point within half of\n   --h-target answers (`pick`, scatter-chart.ts), so a small point is a full target. */\n.lintje-chart__hit { fill: transparent; }\n.lintje-chart__hit.is-clickable { cursor: pointer; }\n\n/* An event: a numbered square above the plot with a solid line to the zero line — apart from\n   the dashed as-of line — and its text in a list under the chart and in the tooltip. */\n.lintje-chart__event-line { stroke: var(--color-chart-axis); stroke-width: 1px; }\n.lintje-chart__event-chip { fill: var(--color-text-primary); }\n.lintje-chart__event-number {\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  font-weight: 700;\n  fill: var(--color-text-inverse);\n}\n/* The square stands in a box one line of its text tall, so it centres on the first line. The\n   size comes from the drawing (`--lintje-event-size`), where the squares are measured. */\n.lintje-event-chip { flex: none; display: flex; align-items: center; height: 1lh; }\n.lintje-event-chip__number {\n  width: var(--lintje-event-size);\n  height: var(--lintje-event-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--color-text-primary);\n  color: var(--color-text-inverse);\n  font-family: var(--font-ui);\n  font-size: 0.75rem;\n  font-weight: 700;\n}\n.lintje-chart-events {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  margin-top: var(--space-3);\n  font: var(--text-small);\n  color: var(--color-text-primary);\n}\n.lintje-chart-events__item { display: flex; align-items: flex-start; gap: var(--space-2); }\n.lintje-chart-events__category { font-weight: 700; }\n\n\n/* --- States -------------------------------------------------------------- */\n/* Loading uses a skeleton per chart type, exactly as tall as the chart it stands in for. */\n/* The stand-in grows into a tile that is taller than it: a tile that holds its height\n   while it fetches again or stretches to its row. `height` stays\n   the basis, so where there is no room to take nothing changes; in a held box that is\n   shorter than the stand-in it shrinks to fit. */\n.lintje-chart-skeleton { position: relative; min-width: 0; overflow: hidden; flex: 1 1 auto; min-height: 0; }\n/* Line, area and bars: \"assen echt, datavlak één glanzend blok\". Real axis lines around one\n   shimmering block, in the charts' plot area (left 52, right 8, top 16, bottom 28). The axis\n   labels load with the data: four bars in the gutter, from the top line to the zero line where\n   the labels sit, and three below the axis, so the gutter doesn't read as empty. */\n.lintje-chart-skeleton__plot {\n  position: absolute;\n  top: 16px; right: 8px; bottom: 28px; left: 52px;\n  border-left: 1px solid var(--color-chart-grid);\n  border-bottom: 1px solid var(--color-chart-zero);\n}\n.lintje-chart-skeleton__fill { position: absolute; inset: 0; }\n.lintje-chart-skeleton__y-labels {\n  position: absolute;\n  top: 11px; bottom: 23px; left: 0; width: 44px;\n  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;\n}\n.lintje-chart-skeleton__x-labels {\n  position: absolute;\n  right: 8px; bottom: 7px; left: 52px;\n  display: flex; justify-content: space-between;\n}\n/* Pie and donut: \"ring + drie legendaregels\", a disc for the pie and a ring\n   with a 62 % hole for the donut, beside three lines. The skeleton is a size container: the disc\n   is never taller than the skeleton, never wider than 60 % of it and at most 200 px, so the lines\n   keep their room in a narrow tile. */\n.lintje-chart-skeleton--pie,\n.lintje-chart-skeleton--donut { container-type: size; display: flex; align-items: center; gap: var(--space-5); }\n.lintje-chart-skeleton__disc {\n  position: relative;\n  flex: none;\n  aspect-ratio: 1;\n  border-radius: var(--radius-round);\n}\n.lintje-chart-skeleton--donut .lintje-chart-skeleton__disc::after {\n  content: '';\n  position: absolute;\n  inset: 19%;\n  border-radius: var(--radius-round);\n  background: var(--color-bg-surface);\n}\n.lintje-chart-skeleton__lines {\n  flex: 1;\n  min-width: 0;\n  max-width: 240px;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n/* Heatmap: \"cellen glanzen individueel\" — cells with the heatmap's 3 px gutter, each with its\n   own sweep. */\n.lintje-chart-skeleton--heatmap {\n  display: grid;\n  grid-template-columns: repeat(7, minmax(0, 1fr));\n  grid-template-rows: repeat(5, minmax(0, 1fr));\n  gap: 3px;\n}\n/* Map: \"kaartvlak glanst, overlays echt\" — the map area shimmers; the zoom buttons are drawn\n   as on the map (48 px, top right). */\n.lintje-chart-skeleton__zoom {\n  position: absolute;\n  top: var(--space-2); right: var(--space-2);\n  display: flex;\n  flex-direction: column;\n}\n.lintje-chart-skeleton__zoom-button {\n  width: var(--h-target); height: var(--h-target);\n  display: flex; align-items: center; justify-content: center;\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-strong);\n  margin-top: -1px;\n}\n.lintje-chart-skeleton__zoom-button:first-child { margin-top: 0; }\n/* Table: \"5 rijen\" — five rows at the table's row height. */\n.lintje-chart-skeleton--table { display: flex; flex-direction: column; }\n.lintje-chart-skeleton__row {\n  flex: none;\n  height: var(--h-table-row);\n  display: flex;\n  align-items: center;\n  gap: var(--space-6);\n  padding: 0 var(--space-3);\n  border-bottom: 1px solid var(--color-border-default);\n}\n.lintje-chart-skeleton__measure { margin-left: auto; }\n\n/* --- Forced colours ------------------------------------------------------- */\n/* One colour per variable is what tells the series apart, and the legend's\n   marker is what ties a colour to a name: with the reader's palette they would\n   all come out one colour. So the data marks and the markers keep their drawing\n   (`forced-color-adjust: none`) — the bars, segments and slices, the lines and\n   their areas, the hover point, the legend's and the tooltip's markers — and\n   nothing else does: the axes, the grid, the labels and the titles take the\n   reader's palette. A data label is forced again even where it stands in a\n   group that is not (the stacked column), except one drawn ON a mark, which keeps\n   its own colour against that mark. The halo behind a label is the surface, so\n   Canvas, and so are the gap between segments and the one inside the focus\n   ring. The chosen mark is outlined in CanvasText and the focused one ringed in\n   Highlight. */\n@media (forced-colors: active) {\n  .lintje-chart__bar,\n  .lintje-chart__mark,\n  .lintje-chart__line,\n  .lintje-chart__reveal,\n  .lintje-chart__hover-point,\n  .lintje-chart__hover-casing,\n  .lintje-chart__hit,\n  .lintje-legend__marker,\n  .lintje-chart-tooltip__marker,\n  .lintje-event-chip__number { forced-color-adjust: none; }\n  .lintje-chart__data-label { forced-color-adjust: auto; }\n  /* Text in the reader's palette by name, not left to the engine: not every\n     engine repaints an SVG `fill`, and near-black on a black Canvas is nothing. */\n  .lintje-chart__axis-label,\n  .lintje-chart__data-label,\n  .lintje-chart__as-of-label,\n  .lintje-chart__as-of-note,\n  .lintje-chart__x-title { fill: CanvasText; }\n  .lintje-chart__data-label--inside { forced-color-adjust: none; fill: var(--color-text-on-fill); }\n  .lintje-chart__data-label--inside-light { forced-color-adjust: none; fill: var(--color-text-on-light-fill); }\n  .lintje-chart__data-label--halo,\n  .lintje-chart__as-of-note { stroke: Canvas; }\n  .lintje-chart__axis-label--halo { stroke: Canvas; }\n  .lintje-chart__segment { stroke: Canvas; }\n  .lintje-chart__mark.is-selected { stroke: CanvasText; }\n  .lintje-chart__focus-ring { flood-color: Highlight; }\n  .lintje-chart__focus-gap { flood-color: Canvas; }\n  /* An event's square in the reader's text colour, its number in the canvas. */\n  .lintje-chart__event-line { stroke: CanvasText; }\n  .lintje-chart__event-chip { fill: CanvasText; }\n  .lintje-chart__event-number { fill: Canvas; }\n  .lintje-event-chip__number { background: CanvasText; color: Canvas; }\n}\n", p = ".lintje-pie-chart {\n  display: flex; gap: var(--space-8); align-items: center; justify-content: center; flex-wrap: wrap;\n  padding-top: var(--space-3);\n}\n.lintje-pie-chart--expanded { gap: var(--space-10); height: 100%; padding-top: 0; }\n.lintje-pie-chart--expanded .lintje-pie-chart__table { flex: 0 1 440px; min-width: 260px; }\n.lintje-pie-chart__center { font-family: var(--font-ui); font-size: 1.5rem; font-weight: 700; fill: var(--color-text-primary); }\n.lintje-pie-chart__table { flex: 1; min-width: 200px; border-collapse: collapse; font: var(--text-small); }\n.lintje-pie-chart__column-label,\n.lintje-pie-chart__label,\n.lintje-pie-chart__value,\n.lintje-pie-chart__total-label,\n.lintje-pie-chart__total { padding: 5px 0; text-align: left; font-weight: 400; }\n.lintje-pie-chart__column-label {\n  font-size: var(--label-size); font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking); text-transform: uppercase;\n  color: var(--color-text-muted);\n  border-bottom: 1px solid var(--color-border-default);\n}\n/* The numeric columns sit right-aligned under their heading, a fixed step from their neighbour. */\n.lintje-pie-chart__column-label--numeric,\n.lintje-pie-chart__value,\n.lintje-pie-chart__total { padding-left: var(--space-4); text-align: right; }\n.lintje-pie-chart__value,\n.lintje-pie-chart__total { font-variant-numeric: tabular-nums; }\n.lintje-pie-chart__label { display: flex; align-items: center; gap: 6px; }\n.lintje-pie-chart__total-label,\n.lintje-pie-chart__total {\n  font-weight: 700; border-top: 1px solid var(--color-border-default); padding-top: 6px;\n}\n.lintje-pie-chart__marker { width: 10px; height: 10px; flex: none; display: block; }\n\n/* Hover scales the segment around the center, so its side edges keep their angle. The shadow\n   sits on a copy on top (`__lift`); the segment itself only scales and eases back. */\n.lintje-pie-chart__svg { overflow: visible; flex: none; }\n.lintje-pie-chart__segment { transition: transform var(--dur-hover) var(--ease-in-motion); }\n.lintje-pie-chart__segment.is-hovered { transform: scale(1.03); }\n.lintje-pie-chart__lift {\n  pointer-events: none;\n  transform: scale(1.03);\n  filter: drop-shadow(var(--shadow-chart-hover));\n  animation: lintje-pie-lift var(--dur-hover) var(--ease-in-motion) backwards;\n}\n@keyframes lintje-pie-lift { from { transform: none; filter: none; } }\n.lintje-pie-chart__row.is-hovered { background: var(--color-bg-subtle); }\n/* The chosen row carries the outline the chosen slice has (rule 13). */\n.lintje-pie-chart__row.is-muted .lintje-pie-chart__marker { opacity: .45; }\n.lintje-pie-chart__row.is-selected .lintje-pie-chart__marker { outline: 2px solid var(--color-text-primary); }\n.lintje-pie-chart__row.is-selected .lintje-pie-chart__label { font-weight: 700; }\n\n/* Forced colours: the slices, the lifted copy and the table's swatches keep their colours (as\n   `chart.css`); the chosen row's swatch is outlined in CanvasText. */\n@media (forced-colors: active) {\n  .lintje-pie-chart__lift,\n  .lintje-pie-chart__marker { forced-color-adjust: none; }\n  .lintje-pie-chart__center { fill: CanvasText; }\n  .lintje-pie-chart__row.is-selected .lintje-pie-chart__marker { outline-color: CanvasText; }\n}\n", m = ".lintje-heatmap { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }\n.lintje-heatmap__grid { border-collapse: separate; border-spacing: 3px; width: 100%; }\n.lintje-heatmap__column-label,\n.lintje-heatmap__row-label {\n  font: var(--text-axis);\n  font-weight: 400;\n  color: var(--color-text-muted);\n  text-align: center;\n  padding: 2px;\n}\n/* `width: 1%` keeps the auto table layout from handing the label column surplus width; a longer\n   label ends in an ellipsis. */\n.lintje-heatmap__row-label { text-align: right; padding-right: var(--space-2); white-space: nowrap; width: 1%; }\n.lintje-heatmap__row-label-text { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }\n.lintje-heatmap__slot { padding: 0; }\n\n.lintje-heatmap__cell {\n  width: 100%;\n  height: 34px;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 0.75rem;\n  font-weight: 700;\n  font-variant-numeric: tabular-nums;\n  /* The class range is the same in both modes, so the text on it is too: ink up to the fourth\n     rung (5.9:1), white on the darkest (4.5:1). */\n  background: var(--lintje-cell);\n  color: var(--color-text-on-light-fill);\n  transition: background-color var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-heatmap__cell--class-4 { color: var(--color-text-on-fill); }\n.lintje-heatmap__cell--class-0 { box-shadow: inset 0 0 0 1px var(--color-border-default); }\n.lintje-heatmap__cell.is-selected { outline: 2px solid currentColor; outline-offset: -2px; }\n/* A cell steps back by its fill alone, mixed into the surface; the figure stays in the text\n   colour, which reaches 4.5:1 on every rung so mixed, in both modes. */\n.lintje-heatmap__cell.is-dimmed {\n  background: color-mix(in srgb, var(--lintje-cell) 25%, var(--color-bg-surface));\n  color: var(--color-text-primary);\n}\n/* A drilling cell that is not chosen steps back while a cell is chosen; less than the legend's\n   dimming, which answers \"show me this class\". */\n.lintje-heatmap__cell.is-muted {\n  background: color-mix(in srgb, var(--lintje-cell) 40%, var(--color-bg-surface));\n  color: var(--color-text-primary);\n}\n.lintje-heatmap__cell.is-empty { background: var(--color-bg-subtle); }\n\n/* Cells fade in left to right, then top to bottom. Fill mode `backwards`: a held opacity would\n   override a dimmed class. The paused declaration follows the shorthand, see chart.css. */\n@media (prefers-reduced-motion: no-preference) {\n  .lintje-heatmap__cell:not(.is-empty) {\n    animation: lintje-fade-in calc(var(--dur-draw) * 0.6) ease-in-out calc(var(--dur-draw) * 0.4 * var(--lintje-stagger, 0)) backwards;\n    animation-play-state: paused;\n  }\n  [data-in-view] .lintje-heatmap__cell:not(.is-empty) { animation-play-state: running; }\n}\n\n.lintje-heatmap__selection {\n  min-height: var(--h-touch);\n  display: flex; align-items: center; gap: 6px;\n  padding: 0 var(--space-3);\n  background: var(--color-bg-subtle);\n  font: var(--text-small);\n}\n\n.lintje-heatmap__legend { display: flex; gap: var(--space-2) var(--space-4); flex-wrap: wrap; font: var(--text-small); }\n.lintje-heatmap__legend-item {\n  display: flex; align-items: center; gap: 6px;\n  font: inherit; color: var(--color-text-primary);\n}\n.lintje-heatmap__legend-item[aria-pressed='true'] { font-weight: 700; }\n/* Only the swatch steps back: the word keeps its contrast. */\n.lintje-heatmap__legend-item.is-dimmed .lintje-heatmap__swatch { opacity: 0.45; }\n.lintje-heatmap__swatch {\n  width: 12px; height: 12px; display: block; flex: none;\n  transition: opacity var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-heatmap__swatch--class-0 { box-shadow: inset 0 0 0 1px var(--color-border-default); }\n\n/* Forced colours: the class colours are the heatmap, so cells and swatches keep them\n   (`forced-color-adjust: none`). */\n@media (forced-colors: active) {\n  .lintje-heatmap__cell,\n  .lintje-heatmap__swatch { forced-color-adjust: none; }\n}\n", h = r(f), g = [
-	h,
-	r(p),
-	r(m),
-	i
-];
-//#endregion
-//#region src/components/shared/download.ts
-function _(e) {
-	if (e == null) return "";
-	let t = typeof e == "number" ? String(e).replace(".", ",") : e;
-	return /[";\n\r]/.test(t) ? `"${t.replace(/"/g, "\"\"")}"` : t;
-}
-function v(e) {
-	return e.map((e) => e.map(_).join(";")).join("\r\n");
-}
-function y(e, t) {
-	let n = URL.createObjectURL(e), r = document.createElement("a");
-	r.href = n, r.download = t, r.click(), setTimeout(() => URL.revokeObjectURL(n), 0);
-}
-function b(e, t) {
-	let n = e.toLowerCase().endsWith(".csv") ? e : `${e}.csv`;
-	y(new Blob(["", v(t)], { type: "text/csv;charset=utf-8" }), n);
-}
-var x = [
-	"fill",
-	"fill-opacity",
-	"stroke",
-	"stroke-width",
-	"stroke-dasharray",
-	"stroke-linecap",
-	"stroke-linejoin",
-	"opacity",
-	"font-family",
-	"font-size",
-	"font-weight",
-	"text-anchor",
-	"dominant-baseline",
-	"letter-spacing"
-];
-function S(e, t) {
-	let n = getComputedStyle(e), r = t.style;
-	for (let e of x) r.setProperty(e, n.getPropertyValue(e));
-	let i = e.children, a = t.children;
-	for (let e = 0; e < i.length; e += 1) {
-		let t = a[e];
-		t && S(i[e], t);
-	}
-}
-function C(e) {
-	let t = (e) => getComputedStyle(e).getPropertyValue("--color-bg-surface").trim();
-	return t(e) || t(document.documentElement);
-}
-async function w(e, t) {
-	let n = e.toLowerCase().endsWith(".png") ? e : `${e}.png`, r = t.getBoundingClientRect(), i = Math.max(1, Math.round(r.width)), a = Math.max(1, Math.round(r.height)), o = t.cloneNode(!0);
-	o.setAttribute("xmlns", "http://www.w3.org/2000/svg"), o.setAttribute("width", String(i)), o.setAttribute("height", String(a)), S(t, o);
-	let s = C(t), c = new XMLSerializer().serializeToString(o), l = new Image();
-	l.decoding = "sync", await new Promise((e, t) => {
-		l.onload = () => e(), l.onerror = () => t(/* @__PURE__ */ Error("svg")), l.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(c)}`;
-	});
-	let u = document.createElement("canvas");
-	u.width = i * 2, u.height = a * 2;
-	let d = u.getContext("2d");
-	if (!d) return;
-	s && (d.fillStyle = s, d.fillRect(0, 0, u.width, u.height)), d.drawImage(l, 0, 0, u.width, u.height);
-	let f = await new Promise((e) => u.toBlob(e, "image/png"));
-	f && y(f, n);
-}
-//#endregion
-export { d as a, s as c, g as i, w as n, l as o, h as r, c as s, b as t };

package/dist-elements/chunks/input-CRW_exv_.js

@@ -1,195 +0,0 @@
-import { P as e, en as t, nn as n, st as r, ut as i } from "./base-CbmWxUig.js";
-import { d as a, s as o, u as s } from "./controls-DxmnDSBr.js";
-//#region src/components/inputs/shared/field-foot.ts
-function c(e, n, r) {
-	return n ? r.errorId : e ? r.hintId : t;
-}
-function l(e, r, a, o = !0) {
-	return r ? n`<span id=${a.errorId} class="lintje-field__error" role=${o ? "alert" : t}
-      >${i("functioneel-waarschuwing", { size: 14 })}${r}</span
-    >` : e ? n`<span id=${a.hintId} class="lintje-field__hint">${e}</span>` : t;
-}
-//#endregion
-//#region src/components/inputs/shared/input.ts
-var u = "(niet verplicht)", d = "afwijkend van standaard", f = class extends e {
-	static {
-		this.properties = {
-			name: { type: String },
-			label: { type: String },
-			hideLabel: {
-				type: Boolean,
-				attribute: "hide-label"
-			},
-			hint: { type: String },
-			error: { type: String },
-			disabled: {
-				type: Boolean,
-				reflect: !0
-			},
-			modified: {
-				type: Boolean,
-				reflect: !0
-			},
-			required: {
-				type: Boolean,
-				reflect: !0
-			},
-			optional: { type: Boolean },
-			layout: {
-				type: String,
-				reflect: !0
-			},
-			resetLabel: {
-				type: String,
-				attribute: "reset-label"
-			}
-		};
-	}
-	static {
-		this.formAssociated = !0;
-	}
-	#e;
-	#t;
-	constructor() {
-		super(), this.name = "", this.label = "", this.hideLabel = !1, this.disabled = !1, this.modified = !1, this.required = !1, this.optional = !1, this.internals = typeof this.attachInternals == "function" ? this.attachInternals() : null, this.#t = !1, this.addController({ hostUpdated: () => this.syncForm() });
-	}
-	get postedValue() {
-		return s(this);
-	}
-	syncForm() {
-		if (this.#t || (this.#t = !0, this.#e = structuredClone(s(this))), !this.internals) return;
-		let e = new FormData();
-		if (this.name && !this.disabled) for (let [t, n] of o(this.name, this.postedValue)) e.append(t, n);
-		this.internals.setFormValue(e);
-	}
-	formResetCallback() {
-		a(this, structuredClone(this.#e));
-	}
-	formDisabledCallback(e) {
-		this.disabled = e;
-	}
-	get labelId() {
-		return "lintje-input-label";
-	}
-	get controlId() {
-		return "lintje-input-control";
-	}
-	focusControl(e) {
-		if (this.disabled) return;
-		let t = this.renderRoot;
-		(t.querySelector(`#${this.controlId}`) ?? t.querySelector("input[type=\"radio\"]:checked:not(:disabled)") ?? [...t.querySelectorAll("input, select, button, textarea")].find((e) => !e.disabled))?.focus(e);
-	}
-	focus(e) {
-		this.focusControl(e);
-	}
-	get hintId() {
-		return "lintje-input-hint";
-	}
-	get errorId() {
-		return "lintje-input-error";
-	}
-	get footMessage() {
-		return this.error ?? "";
-	}
-	get describedBy() {
-		return c(this.hint, this.footMessage, {
-			hintId: this.hintId,
-			errorId: this.errorId
-		});
-	}
-	commit(e) {
-		this.announce(e);
-	}
-	announce(e, t = e) {
-		this.disabled || (this.emitLocal("lintje-change", e), this.name && this.emit("lintje-values-change", { [this.name]: t }));
-	}
-	renderLabel(e, i = t) {
-		let a = () => this.focusControl();
-		if (this.hideLabel) {
-			let t = this.renderLabelSuffix();
-			return e ? n`<label id=${this.labelId} for=${e} class="visually-hidden">${this.label} ${t}</label>` : n`<span id=${this.labelId} class="visually-hidden" @click=${a}>${this.label} ${t}</span>`;
-		}
-		let o = r({
-			"lintje-label": !0,
-			"is-modified": this.modified
-		}), s = this.modified ? n`<span class="lintje-label__dot"><span class="visually-hidden">${d}</span></span>` : t, c = this.renderLabelSuffix();
-		return e ? n`<label id=${this.labelId} for=${e} class=${o}>${this.label} ${c} ${s} ${i}</label>` : n`<span id=${this.labelId} class=${o} @click=${a}>${this.label} ${c} ${s} ${i}</span>`;
-	}
-	renderLabelSuffix() {
-		return this.isOptional ? n`<span class="lintje-label__optional">${u}</span>` : t;
-	}
-	get isOptional() {
-		return this.optional && !this.required;
-	}
-	get labelSuffixText() {
-		return [this.isOptional ? u : "", this.modified && !this.hideLabel ? d : ""].filter(Boolean).map((e) => ` ${e}`).join("");
-	}
-	get labelText() {
-		return this.label ? `${this.label}${this.labelSuffixText}` : "";
-	}
-	renderFoot() {
-		let e = l(this.hint, this.footMessage, {
-			hintId: this.hintId,
-			errorId: this.errorId
-		});
-		return !this.modified || !this.resetLabel ? e : n`${e}<button
-        type="button"
-        class="lintje-field__reset"
-        ?disabled=${this.disabled}
-        @click=${() => {
-			this.focusControl(), this.emitLocal("lintje-reset");
-		}}
-      >
-        ${this.resetLabel}
-      </button>`;
-	}
-}, p = class extends f {
-	constructor(...e) {
-		super(...e), this.readonly = !1, this.initialValue = void 0;
-	}
-	static {
-		this.properties = {
-			name: {
-				type: String,
-				reflect: !0
-			},
-			readonly: {
-				type: Boolean,
-				reflect: !0
-			}
-		};
-	}
-	get nativeControl() {
-		return this.renderRoot.querySelector(`#${this.controlId}`);
-	}
-	announce(e, t = e) {
-		this.readonly || super.announce(e, t);
-	}
-	firstUpdated(e) {
-		super.firstUpdated(e), this.initialValue = this.value;
-	}
-	syncForm() {}
-	updated(e) {
-		super.updated(e);
-		let t = this.internals;
-		if (!t) return;
-		t.setFormValue(this.disabled ? null : this.formValue);
-		let n = this.nativeControl;
-		this.required && !this.disabled && !this.readonly && this.formValue === "" && n ? t.setValidity({ valueMissing: !0 }, n.validationMessage || "Vul dit veld in.", n) : t.setValidity({});
-	}
-	submitOnEnter(e, t) {
-		if (e.key !== "Enter" || e.isComposing || this.readonly || this.disabled) return;
-		t();
-		let n = this.internals?.form;
-		n && typeof n.requestSubmit == "function" && setTimeout(() => {
-			e.defaultPrevented || n.requestSubmit();
-		});
-	}
-	formResetCallback() {
-		this.value = this.initialValue;
-		let e = this.nativeControl;
-		e && (e.value = this.formValue), this.requestUpdate();
-	}
-}, m = "/*\n * The fields' own boxes and the `.lintje-choice` rules of the checkbox, radio and toggle.\n * `lintje-data-table` adopts this sheet too for its selectable rows' checkbox; the\n * `:host(lintje-multiselect)` blocks do not match there.\n */\n:host(lintje-multiselect) {\n  display: block;\n  min-width: 0;\n  width: 180px;\n}\n:host(lintje-range) {\n  display: block;\n  min-width: 0;\n  width: 180px;\n}\n:host(lintje-text-input),\n:host(lintje-number-input),\n:host(lintje-checkbox),\n:host(lintje-checkbox-group),\n:host(lintje-toggle),\n:host(lintje-radio-group) {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n/* Order matters in every field sheet: disabled wins over read-only, read-only over error, at\n   equal specificity. A disabled control cannot be in error, so its rule sets the whole border. */\n\n.lintje-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }\n.lintje-label {\n  display: flex; align-items: baseline; gap: var(--space-2);\n  font-size: 0.875rem; font-weight: 700; color: var(--color-text-primary);\n  padding: 0;\n}\n.lintje-label.is-modified { color: var(--color-accent-text); }\n.lintje-label__dot {\n  width: 6px; height: 6px; border-radius: var(--radius-round);\n  background: var(--color-attention);\n  flex: none; align-self: center;\n}\n:host([disabled]) .lintje-label { color: var(--color-text-disabled); }\n.lintje-label__optional { font-weight: 400; color: var(--color-text-muted); }\n:host([disabled]) .lintje-label__optional { color: var(--color-text-disabled); }\n/* A value and its unit stay together when a long label wraps. */\n.lintje-field__value { font-weight: 400; color: var(--color-text-muted); white-space: nowrap; }\n.lintje-field__hint { font: var(--text-meta); color: var(--color-text-muted); }\n.lintje-field__error {\n  display: flex; align-items: center; gap: 6px;\n  font: var(--text-meta); color: var(--color-error-text); font-weight: 700;\n}\n\n/* --- A setting's row: name and hint on the left, the control on the right ----- */\n/* A row reads its own width, not the screen's: in a drawer it stays a column. */\n:host([layout='row']) { width: 100%; container-type: inline-size; }\n@container (min-width: 35rem) {\n  :host([layout='row']) .lintje-field {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, calc(8 * var(--space-10)));\n    gap: var(--space-1) var(--space-8);\n    align-items: center;\n  }\n  :host([layout='row']) .lintje-field > * { grid-column: 2; }\n  /* Regular weight: the bold above it is the section's heading, the grey under it the hint. */\n  :host([layout='row']) .lintje-field > .lintje-label {\n    grid-column: 1; grid-row: 1;\n    font: var(--text-ui);\n  }\n  :host([layout='row']) .lintje-field > .lintje-field__hint,\n  :host([layout='row']) .lintje-field > .lintje-field__error { grid-column: 1; grid-row: 2; align-self: start; }\n  :host([layout='row']) .lintje-field > .lintje-field__reset { grid-column: 1; grid-row: 3; }\n  /* A switch is its own label: the row is the label, the switch stands at its right edge. */\n  :host([layout='row']) .lintje-field > .lintje-choice {\n    grid-column: 1 / -1; grid-row: 1;\n    flex-direction: row-reverse; justify-content: space-between;\n  }\n}\n\n/* Back to the default: a link, so it stays quieter than the field it belongs to. */\n.lintje-field__reset {\n  align-self: flex-start;\n  justify-self: start;\n  min-height: var(--h-target);\n  padding: 0;\n  border: 0;\n  background: none;\n  color: var(--color-link);\n  font: var(--text-meta);\n  font-weight: 700;\n  text-decoration: underline;\n  cursor: pointer;\n}\n.lintje-field__reset:hover { color: var(--color-link-hover); }\n\n/* --- Checkbox, radio, toggle ---------------------------------------------- */\n.lintje-choice {\n  display: flex; align-items: center; gap: 10px;\n  min-height: var(--h-target);\n  font-size: 1rem;\n  cursor: pointer;\n}\n.lintje-choice__input { position: absolute; opacity: 0; width: 0; height: 0; }\n.lintje-choice__label.is-modified { color: var(--color-accent-text); font-weight: 700; }\n\n.lintje-choice__box {\n  width: 24px; height: 24px; flex: none;\n  display: flex; align-items: center; justify-content: center;\n  border: 2px solid var(--color-border-choice);\n  background: var(--color-bg-surface);\n  color: var(--color-action-primary-text); font-size: 0.875rem; font-weight: 700; line-height: 1;\n  transition: background-color var(--dur-hover) var(--ease-in-motion),\n    border-color var(--dur-hover) var(--ease-in-motion);\n}\n/* The mark is always drawn and grows in when the box is checked, so checking and unchecking both move. */\n.lintje-choice__mark {\n  opacity: 0; transform: scale(0.4);\n  transition: opacity var(--dur-hover) var(--ease-in-motion),\n    transform var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-choice__input:checked ~ .lintje-choice__box .lintje-choice__mark,\n.lintje-choice__input:indeterminate ~ .lintje-choice__box .lintje-choice__mark {\n  opacity: 1; transform: none;\n}\n/* The border takes the primary-fill border: in dark the tint, so the box is no dark square. */\n.lintje-choice__input:checked ~ .lintje-choice__box,\n.lintje-choice__input:indeterminate ~ .lintje-choice__box {\n  background: var(--color-accent); border-color: var(--color-action-primary-border);\n}\n.lintje-choice__input:focus-visible ~ .lintje-choice__box,\n.lintje-choice__input:focus-visible ~ .lintje-choice__radio,\n.lintje-choice__input:focus-visible ~ .lintje-choice__switch {\n  outline: var(--focus-width) solid var(--color-focus);\n  outline-offset: var(--focus-offset);\n}\n\n.lintje-choice__radio {\n  width: 24px; height: 24px; flex: none;\n  border: 2px solid var(--color-border-choice);\n  border-radius: 50%;\n  background: var(--color-bg-surface);\n  display: flex; align-items: center; justify-content: center;\n}\n/* Ring and dot take the line accent: the dot stands on the surface by itself, so the primary\n   fill would sink into the dark surface. */\n.lintje-choice__input:checked ~ .lintje-choice__radio { border-color: var(--color-accent-line); }\n.lintje-choice__input:checked ~ .lintje-choice__radio::after {\n  content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent-line);\n}\n\n/* Off: edged with the field's edge (3:1, WCAG 1.4.11) as an inset ring, keeping the box size. */\n.lintje-choice__switch {\n  box-sizing: border-box;\n  width: 40px; height: 22px; flex: none;\n  border-radius: 11px;\n  /* Off is a filled track, not a pale one with a ring: the fill alone reaches 3:1. */\n  background: var(--color-border-field);\n  display: flex; align-items: center;\n  padding: 2px;\n  transition: background var(--dur-hover) var(--ease-in-motion);\n}\n.lintje-choice__knob {\n  width: 18px; height: 18px; display: block;\n  border-radius: 50%;\n  background: var(--color-bg-surface);\n  transition: transform var(--dur-hover) var(--ease-in-motion);\n}\n/* An inset ring, not a border: a border would eat into the knob's inset and travel. */\n.lintje-choice__input:checked ~ .lintje-choice__switch {\n  background: var(--color-accent);\n  box-shadow: inset 0 0 0 1px var(--color-action-primary-border);\n}\n.lintje-choice__input:checked ~ .lintje-choice__switch .lintje-choice__knob { transform: translateX(18px); }\n\n.lintje-choice.is-disabled { color: var(--color-text-disabled); cursor: not-allowed; }\n.lintje-choice__input:disabled ~ .lintje-choice__box,\n.lintje-choice__input:disabled ~ .lintje-choice__radio {\n  border-color: var(--color-border-strong);\n  background: var(--color-bg-subtle);\n  color: var(--color-text-disabled);\n}\n.lintje-choice__input:disabled:checked ~ .lintje-choice__box {\n  background: var(--color-border-strong);\n}\n.lintje-choice__input:disabled:checked ~ .lintje-choice__radio::after {\n  background: var(--color-border-strong);\n}\n/* After the checked rule, so a disabled switch also loses its inset ring. */\n.lintje-choice__input:disabled ~ .lintje-choice__switch { background: var(--color-border-default); box-shadow: none; }\n\n/* --- Stacked in the filter sheet ----------------------------------------- */\n:host([stacked]) {\n  width: 100%;\n  --h-control: var(--h-touch);\n}\n\n/* --- Forced colours ------------------------------------------------------- */\n/* Fills and box-shadows are dropped: the dot, pill and knob keep their drawing in system\n   colours. The pill takes a 1 px border and gives up 1 px of its inset, so the knob's travel stays. */\n@media (forced-colors: active) {\n  .lintje-label__dot { forced-color-adjust: none; background: CanvasText; }\n\n  .lintje-choice__input:focus-visible ~ .lintje-choice__box,\n  .lintje-choice__input:focus-visible ~ .lintje-choice__radio,\n  .lintje-choice__input:focus-visible ~ .lintje-choice__switch { outline-color: Highlight; }\n\n  .lintje-choice__input:checked ~ .lintje-choice__box,\n  .lintje-choice__input:indeterminate ~ .lintje-choice__box,\n  .lintje-choice__input:checked ~ .lintje-choice__radio { border-color: Highlight; }\n  .lintje-choice__radio::after { forced-color-adjust: none; }\n  .lintje-choice__input:checked ~ .lintje-choice__radio::after { background: Highlight; }\n\n  .lintje-choice__switch { border: 1px solid CanvasText; padding: 1px; }\n  .lintje-choice__input:checked ~ .lintje-choice__switch { border-color: Highlight; }\n  .lintje-choice__knob { forced-color-adjust: none; background: CanvasText; }\n  .lintje-choice__input:checked ~ .lintje-choice__switch .lintje-choice__knob { background: Highlight; }\n\n  .lintje-choice__input:disabled ~ .lintje-choice__box,\n  .lintje-choice__input:disabled ~ .lintje-choice__radio,\n  .lintje-choice__input:disabled ~ .lintje-choice__switch { border-color: GrayText; }\n  .lintje-choice__input:disabled:checked ~ .lintje-choice__radio::after,\n  .lintje-choice__input:disabled ~ .lintje-choice__switch .lintje-choice__knob { background: GrayText; }\n  .lintje-choice.is-disabled { color: GrayText; }\n}\n";
-//#endregion
-export { l as a, c as i, p as n, f as r, m as t };