lintje 0.1.1 → 0.2.0

package/dist-elements/types/components/shared/charts/shared/types.d.ts

@@ -28,6 +28,25 @@ export interface BarSeriesData {
     /** One entry per value: the drilldown of that bar or segment, or null. */
     links?: (ChartLink | null)[];
 }
+/** One point of a scatter plot: a named record, clickable with a `href` like a table row. */
+export interface ScatterPoint {
+    label: string;
+    /** null = no data, never 0 (rule 15): the point is not drawn and stays in the table. */
+    x: number | null;
+    y: number | null;
+    /** The identity a click carries; without it the series' label and its own: `Loket · Utrecht`. */
+    id?: string;
+    href?: string;
+}
+/**
+ * A series of a scatter plot: a colour and the shape that colour has on a map (rule 13).
+ * Without a colour the series take the data colours in their order.
+ */
+export interface ScatterSeriesData {
+    label: string;
+    color?: ChartColor;
+    points: ScatterPoint[];
+}
 export type ChartSpec = {
     kind: 'line';
     labels: string[];
@@ -124,6 +143,21 @@ export type ChartSpec = {
     thresholdLabel?: string;
     pendingHours?: number;
     small?: boolean;
+} | {
+    kind: 'scatter';
+    series: ScatterSeriesData[];
+    /** The vertical axis: its title above the chart, in the tooltip and as a table column. */
+    axisTitle: string;
+    unit?: string;
+    /** The horizontal axis: its title under its labels, right-aligned. */
+    xTitle: string;
+    xUnit?: string;
+    /** A horizontal norm on the vertical axis, dashed in the emphasis colour. */
+    threshold?: number;
+    thresholdLabel?: string;
+    /** The labels of the points that show their name; all of them, or none when one does not fit. */
+    dataLabels?: string[];
+    small?: boolean;
 } | {
     kind: 'heatmap';
     columnLabels: string[];
@@ -146,11 +180,40 @@ export type ChartSpec = {
         values: (number | null)[][];
         links?: (ChartLink | null)[][];
     };
+} | {
+    kind: 'histogram';
+    /**
+     * The classes in ascending order, each starting where the one before ends. `to: null` is
+     * an open last class ("30+"); `count: null` is no data, never 0 (rule 15).
+     */
+    bins: {
+        from: number;
+        to: number | null;
+        count: number | null;
+    }[];
+    /** What the classes count, in the legend and the tooltip. Default "Aantal". */
+    label?: string;
+    color?: ChartColor;
+    /** Above the y-axis, e.g. "aanvragen per twee dagen". */
+    axisTitle?: string;
+    /** Under the x labels, right-aligned, e.g. "doorlooptijd in dagen". */
+    xTitle?: string;
+    /** The unit of the x-axis, e.g. "dagen": in the tooltip and beside the lines. */
+    unit?: string;
+    /** A solid emphasis line at this x value. */
+    median?: number;
+    /** The text beside the median line; default "mediaan" with its value and unit. */
+    medianLabel?: string;
+    /** A dashed emphasis line at this x value. */
+    threshold?: number;
+    /** The text beside the threshold line; default "norm" with its value and unit. */
+    thresholdLabel?: string;
+    small?: boolean;
 };
 export type ChartKind = ChartSpec['kind'];
 /**
  * What a map draws. `polygons` are areas that carry their own outline (`MapValue.polygon`);
- * `plots` stacks several drawings, from `MapTileData.plots`.
+ * `plots` stacks several drawings, from `MapSpec.plots`.
  */
 export type MapVariant = 'flows' | 'points' | 'choropleth' | 'polygons' | 'plots' | 'scope-picker';
 /** A map point's data colour, by name: one of the data colours, each with its own shape. */
@@ -176,6 +239,45 @@ export interface MapValue {
     /** A URL the host minted, carried into `lintje-mark-select`. */
     href?: string;
 }
+/**
+ * An area drawn on the map to choose what lies in it: a lasso, a ring of `[lon, lat]` pairs with
+ * the first point not repeated, or a circle around a `[lon, lat]` centre.
+ */
+export type MapArea = {
+    kind: 'lasso';
+    ring: [number, number][];
+} | {
+    kind: 'circle';
+    centre: [number, number];
+    radiusKm: number;
+};
+/** A tool that draws an area on the map. */
+export type MapTool = 'lasso' | 'circle' | 'rect';
+/**
+ * The parts of a map a host switches on or off. Without a value each keeps its default: every
+ * part on, except the drawing tools, which choose for a host that filters on an area. With two
+ * or more tools on, one button opens a menu of them.
+ */
+export interface MapControls {
+    /** The + and − buttons, a double click and a pinch. Default on. */
+    zoom?: boolean;
+    /** Zooming on the wheel with Ctrl or ⌘ held. Default on. */
+    wheel?: boolean;
+    /** Panning with the mouse. Default on; on a phone a finger always scrolls the page. */
+    drag?: boolean;
+    /** The reset: the whole area in view and nothing chosen. Default on. */
+    reset?: boolean;
+    /** Choosing with a drawn lasso; sends `lintje-area-select`. Default off. */
+    lasso?: boolean;
+    /** Choosing with a drawn circle; sends `lintje-area-select`. Default off. */
+    circle?: boolean;
+    /** Choosing with a drawn rectangle, sent as a lasso of four corners. Default off. */
+    rect?: boolean;
+    /** A scale bar in km bottom right. Default on. */
+    scale?: boolean;
+    /** The legend above the map: a line per layer with its key and its series. Default on. */
+    legend?: boolean;
+}
 /** The basemap the map draws on, a WMS service the host configures. */
 export interface WmsBasemap {
     kind: 'wms';
@@ -213,12 +315,12 @@ export interface MapPlotData {
     };
     /**
      * What each series in this layer means, over the map's own `seriesLabels`. A colour may serve
-     * several layers; the legend above the map keeps one line per colour, named by the first.
+     * several layers; each layer's line in the legend names and switches its own.
      */
     seriesLabels?: Partial<Record<MapSeriesKey, string>>;
 }
-/** The map's data, as `MapTileData` in `src/types.ts` carries it, without the tile fields. */
-export interface MapTileData {
+/** The map's data, as `MapData` in `src/types.ts` carries it, without the tile fields. */
+export interface MapSpec {
     variant: MapVariant;
     geo?: 'world' | 'netherlands';
     /** The marks of a one-variant map; empty with `variant: 'plots'`. */
@@ -232,7 +334,7 @@ export interface MapTileData {
     };
     unit?: string;
     description: string;
-    /** Map height in px; default 400, 220 below 768 px. */
+    /** Map height in px; default 400, 280 below 768 px. */
     height?: number;
     selectedId?: string | null;
     layers?: {
@@ -247,6 +349,10 @@ export interface MapTileData {
     selectLabel?: string;
     /** The URL that undoes the selection, for a page that keeps it in the URL. */
     clearHref?: string;
-    /** With a basemap the map draws with Leaflet; without one it stays the SVG map. */
+    /** Tiles under the map: Leaflet draws the basemap, the map draws its data over it. */
     basemap?: WmsBasemap;
+    /** Which parts of the map show and answer; each left out keeps its default. */
+    controls?: MapControls;
+    /** The area the host keeps, from its URL: adopted when it changes, as `selectedId` is. */
+    selectedArea?: MapArea | null;
 }

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

@@ -8,6 +8,9 @@ export declare function formatDataLabel(n: number, available: number): string;
 export declare function dataLabelFits(text: string, available: number): boolean;
 /** `text` shortened with an ellipsis until it fits `maxWidth` px in the axis label font. */
 export declare function truncateToWidth(text: string, maxWidth: number, fontFamily?: string): string;
-/** Width in px of `text` in the 12 px axis label font; ~6.5 px per character without a canvas. */
-export declare function textWidth(text: string, fontFamily?: string): number;
+/**
+ * Width in px of `text` in the 12 px chart font, at `weight` (400 for an axis label, 700 for a
+ * data label); ~6.5 px per character without a canvas.
+ */
+export declare function textWidth(text: string, fontFamily?: string, weight?: number): number;
 export declare function formatPercent(n: number, decimals?: number): string;

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

@@ -5,7 +5,7 @@
  * Every other icon is fetched by name when a name needs it
  * (`src/icons/loader.ts`); the name is always the file name.
  *
- * 59 icons, of 1192 in `dist-icons/`.
+ * 62 icons, of 1198 in `dist-icons/`.
  */
 export interface IconGlyph {
     /** The file's own viewBox: 64 or 48 in RVO's set, 24 for an own icon, 346x75 for an emblem. */

package/dist-elements/types/primitives/shared/place.d.ts

@@ -3,7 +3,7 @@
  * gap, flipped when the room is too small and the other side has more, never past the viewport.
  * Shared by the popover and the tooltip.
  */
-export type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'top-center';
+export type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'top-center' | 'left-center' | 'left-start';
 /** `bottom` is set instead of `top` when the box stands above the anchor. */
 export interface Place {
     top: number | null;

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

@@ -18,6 +18,8 @@ export declare class LintjeTooltip extends LintjeElement {
     text: string;
     /** The text is already the element's accessible name. */
     noDescribe: boolean;
+    /** Above the element, or `left` of it, level with it: for a column of buttons along an edge. */
+    placement: 'top' | 'left';
     open: boolean;
     protected spot: Place | null;
     private timer;

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

@@ -5,10 +5,10 @@
  * names come from their one list, `tokens/colors.ts`.
  */
 import type { DataColor } from './tokens/colors.js';
-import type { ChartSpec, MapTileData } from './components/shared/charts/shared/types.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, ChartKind, ChartSpec, LineSeriesData, MapTileData, MapValue, MapPlotData, MapPlotVariant, MapVariant, WmsBasemap, } from './components/shared/charts/shared/types.js';
+export type { BarSeriesData, ChartColor, ChartKind, ChartSpec, LineSeriesData, MapSpec, MapValue, MapPlotData, MapPlotVariant, MapVariant, ScatterPoint, ScatterSeriesData, WmsBasemap, MapArea, MapControls, } from './components/shared/charts/shared/types.js';
 export type { DataColor } from './tokens/colors.js';
 /** Settings every view receives, taken from the URL by the host. */
 export interface FrameSettings {
@@ -43,6 +43,30 @@ export interface KpiTrend {
     /** For variables where rising is bad (wait time, refusals). */
     inverted?: boolean;
 }
+/**
+ * The figure's own recent values as a small line with the area under it: no axes, scaled from
+ * the lowest to the highest value, in the variable's colour. A `null` breaks the line (rule 15).
+ */
+export interface KpiSparkline {
+    /** The values in order, the current one last; at least two numbers draw a line. */
+    values: (number | null)[];
+    /** A readable summary with the unit, the line's `<desc>`: the accessible alternative. */
+    description: string;
+}
+/** Where the figure stands on a scale, drawn under or around the value. */
+export interface KpiGauge {
+    /** `arc`: a half circle with the value in its mouth. `linear`: a bar under the value. */
+    shape?: 'arc' | 'linear';
+    /** Where the scale starts; default 0. */
+    min?: number;
+    max: number;
+    /** The figure on the scale; default the number in the KPI's `value`. `null` draws no fill. */
+    value?: number | null;
+    /** A dashed mark on the scale, in the emphasis colour. */
+    target?: number;
+    /** The word before the target's number: "doel" (default) or "norm". */
+    targetLabel?: string;
+}
 export interface KpiData {
     label: string;
     /** An icon file name (`dist-icons/`, without `.svg`). Decorative. */
@@ -54,8 +78,11 @@ export interface KpiData {
     emphasis?: 'equal' | 'primary';
     dividers?: boolean;
     trend?: KpiTrend;
+    sparkline?: KpiSparkline;
     note?: string;
     detail?: string;
+    /** A single figure on its scale; ignored with `items`. */
+    gauge?: KpiGauge;
     variable?: KpiVariable;
     state?: KpiState;
 }
@@ -92,7 +119,7 @@ export interface TileData {
  * Events: `lintje-mark-select` `{id, label, href}` when a mark with a `href` is clicked,
  * `{id: null, href: clearHref}` when the selection is undone.
  */
-export interface ChartTileData extends FrameSettings, TileData, ContentState {
+export interface ChartData extends FrameSettings, TileData, ContentState {
     chart: ChartSpec;
     /** The chart's `<desc>`: a readable summary, the accessible alternative. Required. */
     description: string;
@@ -105,9 +132,11 @@ export interface ChartTileData extends FrameSettings, TileData, ContentState {
 }
 /**
  * Events: `lintje-mark-select` `{id, label, href?}` on a click on an area or point,
- * `{id: null, href: clearHref}` when undone; `lintje-layer-change` with the chosen layer.
+ * `{id: null, href: clearHref}` when undone; `lintje-layer-change` with the chosen layer;
+ * with `controls.lasso` or `controls.circle`, `lintje-area-select` `{area, ids}` for a drawn area and
+ * `{area: null, ids: []}` when it is undone.
  */
-export interface MapTileViewData extends FrameSettings, TileData, ContentState, MapTileData {
+export interface MapData extends FrameSettings, TileData, ContentState, MapSpec {
 }
 export type CellValue = string | number | null;
 export interface TableColumnData {
@@ -518,8 +547,8 @@ export type ChatBlock = {
     kind: 'kpi-row';
     data: KpiRowData;
 } | {
-    kind: 'chart-tile';
-    data: ChartTileData;
+    kind: 'chart';
+    data: ChartData;
 } | {
     kind: 'data-table';
     data: DataTableData;
@@ -601,6 +630,7 @@ export type { FormValues, FormErrors, StoredDraft } from './components/forms/for
 export type { ErrorSummaryItem } from './components/forms/error-summary/error-summary.js';
 export type { UploadFile } from './components/inputs/file-upload/file-upload.js';
 export type { DateRange } from './components/inputs/date-range/date-range.js';
+export type { SlotDay, TimeSlot } from './components/inputs/slot-picker/slot-picker.js';
 export type { TabItem } from './components/layout/tabs/tabs.js';
 export type { Step, StepState, StepperOrientation } from './components/forms/stepper/stepper.js';
 export type { MenuEntry, MenuHeading, MenuItem } from './components/actions/menu-button/menu-button.js';

package/dist-icons/functioneel-cirkelselectie.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.5a9.5 9.5 0 1 0 0 19 9.5 9.5 0 0 0 0-19Zm0 2a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Z" fill-rule="evenodd"/><path d="M12 9.75a2.25 2.25 0 1 0 2.1 3.25h3.4v-2h-3.4A2.25 2.25 0 0 0 12 9.75Z"/></svg>

package/dist-icons/functioneel-lasso.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M13 2.5c-5.2 0-9.5 2.9-9.5 6.5 0 1.8 1.1 3.5 2.9 4.7l-.3.8a2.2 2.2 0 0 0 .3 3.3c-.3 1.6.4 3.3 2.2 4.5l1.1-1.6c-1.2-.8-1.6-1.8-1.5-2.7a2.2 2.2 0 0 0 1.4-2.6l.3-.7c1 .3 2 .4 3.1.4 5.2 0 9.5-2.9 9.5-6.5S18.2 2.5 13 2.5Zm0 2c4.3 0 7.5 2.3 7.5 4.5S17.3 13.5 13 13.5c-1 0-2-.1-2.8-.4a2.2 2.2 0 0 0-2.7-.6C6.3 11.7 5.5 10.4 5.5 9c0-2.2 3.2-4.5 7.5-4.5Z" fill-rule="evenodd"/></svg>

package/dist-icons/functioneel-punaise-outline.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 2h8a1 1 0 0 1 0 2h-.8v5.6l3.2 3.2c.4.4.6.9.6 1.4v.8c0 .5-.4 1-1 1H13v5.2l-1 1.8-1-1.8V16H6c-.6 0-1-.5-1-1v-.8c0-.5.2-1 .6-1.4l3.2-3.2V4H8a1 1 0 0 1 0-2Zm2.8 2v6.4l-3.6 3.6h9.6l-3.6-3.6V4h-2.4Z" fill-rule="evenodd"/></svg>

package/dist-icons/functioneel-punaise.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 2h8a1 1 0 0 1 0 2h-.8v5.6l3.2 3.2c.4.4.6.9.6 1.4v.8c0 .5-.4 1-1 1H13v5.2l-1 1.8-1-1.8V16H6c-.6 0-1-.5-1-1v-.8c0-.5.2-1 .6-1.4l3.2-3.2V4H8a1 1 0 0 1 0-2Z"/></svg>

package/dist-icons/functioneel-rechthoekselectie.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 4h18v12h-2V6H5v12h9v2H3V4Z"/><path d="M16 15.5a1 1 0 0 1 1.4-.9l4 1.9a.8.8 0 0 1-.1 1.5l-1.5.4-.4 1.5a.8.8 0 0 1-1.5.1l-1.9-4a1 1 0 0 1 0-.5Z"/></svg>

package/dist-icons/functioneel-selectie.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 3h4v2H5v2H3V3Zm6 0h4v2H9V3Zm6 0h4v4h-2V5h-2V3ZM3 9h2v4H3V9Zm14 0h2v3h-2V9ZM3 15h2v2h2v2H3v-4Zm6 4h3v2H9v-2Z"/><path d="M13 12.5a1 1 0 0 1 1.4-.9l6.8 3.2a.8.8 0 0 1-.1 1.5l-2.7.7-.7 2.7a.8.8 0 0 1-1.5.1L13 13a1 1 0 0 1 0-.5Z"/></svg>

package/package.json

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

package/dist-elements/chunks/disclosure-Z7Ny17sS.js

@@ -1,4 +0,0 @@
-//#region src/components/shared/disclosure.css?inline
-var e = "/*\n * The disclosure shared by `lintje-expander` and `lintje-explainer`: the surface stays with each\n * element. The body unfolds with `grid-template-rows: 0fr -> 1fr`, as the filter zone does;\n * `--dur-collapse` is 0 ms under reduced motion (`tokens/base.css`).\n */\n:host(lintje-expander) {\n  display: block;\n  min-width: 0;\n}\n:host([hidden]) { display: none; }\n\n/* --- */\n\n.lintje-disclosure__heading { margin: 0; font: inherit; }\n.lintje-disclosure__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  min-height: var(--h-target);\n  gap: var(--space-3);\n  text-align: left;\n}\n/* Spans, because a button holds phrasing content only. */\n.lintje-disclosure__title { display: block; font: var(--text-tile-title); color: var(--color-text-primary); }\n/* A grid only with an icon or subtitle: the subtitle then sits under the title text. */\n.lintje-disclosure__label {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  min-width: 0;\n}\n.lintje-disclosure__label--plain { display: block; }\n.lintje-disclosure__icon { grid-row: 1; }\n.lintje-disclosure__label .lintje-disclosure__title,\n.lintje-disclosure__label .lintje-disclosure__sub { grid-column: 2; }\n.lintje-disclosure__label--plain .lintje-disclosure__title,\n.lintje-disclosure__label--plain .lintje-disclosure__sub { grid-column: auto; }\n.lintje-disclosure__sub { display: block; font: var(--text-tile-sub); color: var(--color-text-muted); margin-top: 2px; }\n\n/* --- Opening and closing -------------------------------------------------- */\n.lintje-disclosure__body {\n  display: grid;\n  grid-template-rows: 0fr;\n  /* Named column: an implicit `auto` track takes the max-content width, so a code block with\n     `wrap: false` would run out of the box instead of scrolling. */\n  grid-template-columns: minmax(0, 1fr);\n  transition: grid-template-rows var(--dur-collapse) var(--ease-in-motion);\n}\n.lintje-disclosure.is-open .lintje-disclosure__body { grid-template-rows: 1fr; }\n\n.lintje-disclosure__body-inner {\n  min-height: 0;\n  overflow: hidden;\n  opacity: 0;\n  /* Closed: out of the tab order and the accessibility tree; hiding waits for the collapse. */\n  visibility: hidden;\n  transition:\n    opacity var(--dur-collapse) var(--ease-in-motion),\n    visibility 0s linear var(--dur-collapse);\n}\n.lintje-disclosure.is-open .lintje-disclosure__body-inner {\n  opacity: 1;\n  visibility: visible;\n  transition: opacity var(--dur-collapse) var(--ease-in-motion), visibility 0s;\n}\n/* Standing open, nothing clips: slotted content may hang a popover out of the box. */\n.lintje-disclosure.is-open.is-settled .lintje-disclosure__body-inner { overflow: visible; }\n\n/* Inside the clipped box: on the body it would show under a closed disclosure. */\n.lintje-disclosure__content { margin-top: var(--space-3); }\n\n.lintje-disclosure__chevron {\n  flex: none;\n  transform-origin: 50% 50%;\n  transition: transform var(--dur-collapse) var(--ease-in-motion);\n}\n.lintje-disclosure.is-open .lintje-disclosure__chevron { transform: rotate(180deg); }\n/* Leading: the chevron first, the title after it, and the content in line with the title. */\n.lintje-disclosure--leading .lintje-disclosure__header { justify-content: flex-start; align-items: flex-start; padding-top: var(--space-3); }\n/* The chevron stands in line with the title's first line, not between title and subtitle. */\n.lintje-disclosure--leading .lintje-disclosure__chevron { margin-top: calc((1lh - 16px) / 2); }\n.lintje-disclosure--leading .lintje-disclosure__label { flex: 1 1 auto; }\n.lintje-disclosure--leading .lintje-disclosure__content { margin-left: calc(16px + var(--space-3)); }\n\n/* Columns: the title in its own column, the content beside it in the text's column, the actions\n   at the end; the host's width decides, so a narrow one stacks again. */\n:host([columns]) { container-type: inline-size; }\n.lintje-expander--columns {\n  display: grid;\n  grid-template-columns: var(--lintje-expander-label, calc(4 * var(--space-10))) minmax(0, 1fr) auto;\n  grid-template-areas: 'head body actions';\n  column-gap: var(--space-5);\n  align-items: start;\n}\n.lintje-expander--columns .lintje-expander__top { display: contents; }\n.lintje-expander--columns .lintje-disclosure__heading { grid-area: head; }\n.lintje-expander--columns .lintje-expander__actions { grid-area: actions; }\n.lintje-expander--columns .lintje-disclosure__body { grid-area: body; }\n.lintje-expander--columns .lintje-disclosure__content { margin: 0; padding-top: var(--space-3); }\n@container (max-width: 40rem) {\n  .lintje-expander--columns {\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-areas: 'head actions' 'body body';\n  }\n  .lintje-expander--columns .lintje-disclosure__content { margin-left: calc(16px + var(--space-3)); padding-top: 0; }\n}\n\n.lintje-expander {\n  background: var(--color-bg-surface);\n  border: 1px solid var(--color-border-default);\n  padding: var(--tile-pad-y) var(--tile-pad-x);\n}\n/* `flat`: an expander inside a tile is not a second card. */\n.lintje-expander--flat { background: none; border: none; padding: 0; }\n.lintje-expander__content { font: var(--text-body); color: var(--color-text-secondary); }\n/* The actions stand beside the title's button, never inside it. */\n.lintje-expander__top { display: flex; align-items: flex-start; gap: var(--space-2); }\n.lintje-expander__top .lintje-disclosure__heading { flex: 1 1 auto; min-width: 0; }\n.lintje-expander__actions { display: flex; flex: none; align-items: center; gap: var(--space-1); }\n";
-//#endregion
-export { e as t };

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

@@ -1,226 +0,0 @@
-import { $ as e, Gt as t, Jt as n, Kt as r, O as i, et as a, ut as o } from "./base-rBLTcEIv.js";
-import "../tag/modal.js";
-//#region src/components/shared/content-tile.ts
-var s = class extends i {
-	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, n) {
-		let { heading: i, subtitle: a, footnote: o, csv: s, png: c } = n;
-		return r`<lintje-modal
-      .open=${this.expanded}
-      heading=${i ?? "Vergroot"}
-      subtitle=${a ?? t}
-      .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 ? r`<span slot="footer">${o}</span>` : t}
-    </lintje-modal>`;
-	}
-};
-//#endregion
-//#region src/components/shared/charts/shared/chart-icons.ts
-function c(e, n, r = 16) {
-	let i = a(e, { size: r });
-	return i === t ? n : i;
-}
-var l = [
-	{
-		action: "in",
-		name: "functioneel-plus",
-		text: "+",
-		label: "Inzoomen"
-	},
-	{
-		action: "out",
-		name: "functioneel-minus",
-		text: "−",
-		label: "Uitzoomen"
-	},
-	{
-		action: "home",
-		name: "functioneel-home",
-		text: "Terug",
-		label: "Terug naar het hele gebied"
-	}
-];
-//#endregion
-//#region src/components/shared/charts/shared/chart-states.ts
-function u(e = "100%", t = 12, n = "") {
-	let i = (e) => typeof e == "number" ? `${e}px` : e;
-	return r`<span class="lintje-skeleton ${n}"
-                    ${o({
-		width: i(e),
-		height: i(t)
-	})} aria-hidden="true"></span>`;
-}
-function d({ kind: e = "line", height: n } = {}) {
-	return r`
-    <div class="lintje-chart-skeleton lintje-chart-skeleton--${e}"
-         ${o({ height: n ?? (e === "table" ? void 0 : "var(--chart-h-main)") })}
-         role="status">
-      <!-- In words, not only in a label: a status region is spoken from its content. -->
-      <span class="visually-hidden">Gegevens laden…</span>
-      ${e === "line" || e === "bar" ? r`
-        <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>
-      ` : t}
-      ${e === "pie" || e === "donut" ? r`
-        <!-- 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>
-      ` : t}
-      ${e === "heatmap" ? Array.from({ length: 35 }, () => u("100%", "100%")) : t}
-      ${e === "map" ? r`
-        ${u("100%", "100%", "lintje-chart-skeleton__fill")}
-        <div class="lintje-chart-skeleton__zoom" aria-hidden="true">
-          ${l.map((e) => r`
-            <span class="lintje-chart-skeleton__zoom-button">${c(e.name, e.text)}</span>
-          `)}
-        </div>
-      ` : t}
-      ${e === "table" ? Array.from({ length: 5 }, () => r`
-        <div class="lintje-chart-skeleton__row">
-          ${u("32%")}
-          ${u("12%", 12, "lintje-chart-skeleton__measure")}
-          ${u("12%")}
-        </div>
-      `) : t}
-    </div>
-  `;
-}
-function f(e, t = "var(--chart-h-main)") {
-	return r`
-    <div class="lintje-chart-state lintje-chart-state--empty" ${o({ height: t })}>
-      <p>${e}</p>
-    </div>
-  `;
-}
-function p(e) {
-	return r`<lintje-announcement
-    compact
-    .data=${{
-		kind: "warning",
-		text: String(e ?? ""),
-		live: !0
-	}}
-  ></lintje-announcement>`;
-}
-function m({ message: e, lastKnown: n, height: i = "var(--chart-h-main)", announcement: a = p }) {
-	return r`
-    <div class="lintje-chart-state lintje-chart-state--error" ${o({ "min-height": i })}>
-      ${a(e)}
-      ${n ? r`<div class="lintje-chart-state__last-known">${n}</div>` : t}
-    </div>
-  `;
-}
-//#endregion
-//#region src/components/shared/charts/shared/chart.css?inline
-var h = ".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.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): a halo in the surface color. Invisible on the tile, it cuts the\n   dotted line where a value just under the norm puts its label across it. */\n.lintje-chart__data-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}\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.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  /* 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\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 { 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 { 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-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.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__value { font-weight: 700; margin-left: var(--space-3); }\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\n\n/* --- States -------------------------------------------------------------- */\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; font: var(--text-small); color: var(--color-text-muted); gap: var(--space-3); }\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/* 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-legend__marker,\n  .lintje-chart-tooltip__marker { 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 { 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 { 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}\n", g = ".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", _ = ".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", v = n(h), y = [
-	v,
-	n(g),
-	n(_),
-	e
-];
-//#endregion
-//#region src/components/shared/download.ts
-function b(e) {
-	if (e == null) return "";
-	let t = typeof e == "number" ? String(e).replace(".", ",") : e;
-	return /[";\n\r]/.test(t) ? `"${t.replace(/"/g, "\"\"")}"` : t;
-}
-function x(e) {
-	return e.map((e) => e.map(b).join(";")).join("\r\n");
-}
-function S(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 C(e, t) {
-	let n = e.toLowerCase().endsWith(".csv") ? e : `${e}.csv`;
-	S(new Blob(["", x(t)], { type: "text/csv;charset=utf-8" }), n);
-}
-var w = [
-	"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 T(e, t) {
-	let n = getComputedStyle(e), r = t.style;
-	for (let e of w) 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 && T(i[e], t);
-	}
-}
-function E(e) {
-	let t = (e) => getComputedStyle(e).getPropertyValue("--color-bg-surface").trim();
-	return t(e) || t(document.documentElement);
-}
-async function D(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)), T(t, o);
-	let s = E(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 && S(f, n);
-}
-//#endregion
-export { p as a, d as c, s as d, y as i, l, D as n, f as o, v as r, m as s, C as t, c as u };

package/dist-elements/tag/chart-tile.d.ts

@@ -1 +0,0 @@
-export * from '../types/components/charts/chart-tile/chart-tile.js'