lintje 0.1.1

package/dist-elements/types/components/overlays/confirm-dialog/confirm-dialog.d.ts

@@ -0,0 +1,41 @@
+/**
+ * `<lintje-confirm-dialog>` — a question that needs an answer before anything goes on.
+ *
+ * The owner holds `open`; Escape, the scrim and cancel only ask (`lintje-close`). The cancel
+ * button has the focus on open, so Enter never confirms by itself. While `busy` nothing closes.
+ * A dialog on the shared focus-trap stack.
+ *
+ * Events: `lintje-confirm`, `lintje-close` `{ reason: 'cancel' | 'escape' | 'scrim' }`,
+ * `lintje-action` from the third button.
+ */
+import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/button/button.js';
+export type ConfirmTone = 'danger' | 'primary';
+export type ConfirmCloseReason = 'cancel' | 'escape' | 'scrim';
+export declare class LintjeConfirmDialog extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    /** The owner's: the dialog asks to be closed and never closes itself. */
+    open: boolean;
+    /** The question, and the dialog's accessible name. */
+    heading: string;
+    /** The verb of the action ("Verwijderen"), never "OK". */
+    confirmLabel: string;
+    cancelLabel: string;
+    /** A third, tertiary button in front ("Weggooien"). */
+    actionLabel?: string;
+    tone: ConfirmTone;
+    /** The confirmed action is under way: nothing else can be pressed, Escape does nothing. */
+    busy: boolean;
+    private cancel;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-confirm-dialog': LintjeConfirmDialog;
+    }
+}

package/dist-elements/types/components/overlays/drawer/drawer.d.ts

@@ -0,0 +1,40 @@
+/**
+ * `<lintje-drawer>` — a side panel over the page, for a detail or a short form.
+ *
+ * The host holds `open`: Escape, the close button and the scrim only ask. Whether unsaved input
+ * needs confirming first is the host's call. While `busy` none of them asks. The footer slot is
+ * hidden when empty. A dialog on the shared focus-trap stack; focus goes to the first field,
+ * else the close button.
+ *
+ * Events: `lintje-close` `{ reason: 'escape' | 'button' | 'scrim' }`.
+ */
+import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+export type DrawerCloseReason = 'escape' | 'button' | 'scrim';
+export declare class LintjeDrawer extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    /** The host's: the drawer only asks to be closed. */
+    open: boolean;
+    /** The title and the dialog's accessible name; without it the dialog is "Zijpaneel". */
+    heading: string;
+    subtitle?: string;
+    /** Saving: every way of closing is blocked. */
+    busy: boolean;
+    protected footerSlotted: boolean;
+    private close;
+    private get panel();
+    private onFooterSlotChange;
+    /** Read once on opening, before the slot exists to report; `slotchange` keeps it current. */
+    protected willUpdate(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private focusFirst;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-drawer': LintjeDrawer;
+    }
+}

package/dist-elements/types/components/overlays/modal/modal.d.ts

@@ -0,0 +1,44 @@
+/**
+ * `<lintje-modal>` — the expand modal: title, subtitle, slotted content, a footer.
+ *
+ * It is `position: fixed` above the app frame, so no ancestor may carry a `transform`, `filter`
+ * or `contain`. The footer is hidden, not unrendered, when empty: an unrendered slot never
+ * reports its content again.
+ *
+ * `narrow` makes it a dialog with a form: as high as its content and as wide as a form reads,
+ * with a sentence in `footer` on the left and its buttons in `actions` on the right.
+ *
+ * Events: `lintje-close` (the host owns `open`), `lintje-download-csv`, `lintje-download-png`.
+ */
+import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/button/button.js';
+import '../../../primitives/icon-button/icon-button.js';
+export declare class LintjeModal extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    /** The host owns it; `lintje-close` asks for `false`. */
+    open: boolean;
+    /** The dialog's accessible name and its title line. */
+    heading: string;
+    subtitle?: string;
+    /** The footer's CSV and PNG buttons. Default `true`: bind as a property, `.csv=${false}`. */
+    csv: boolean;
+    png: boolean;
+    /** A dialog with a form: its content's height, a form's width. */
+    narrow: boolean;
+    footerSlotted: boolean;
+    actionsSlotted: boolean;
+    private onActionsSlotChange;
+    private onFooterSlotChange;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private close;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-modal': LintjeModal;
+    }
+}

package/dist-elements/types/components/overlays/toggletip/toggletip.d.ts

@@ -0,0 +1,47 @@
+/**
+ * `<lintje-toggletip>` — a small "i" button that shows a short explanation on a click.
+ *
+ * The trigger is a real `<button>` in this root, not a nested `<lintje-icon-button>`, because
+ * `aria-controls` cannot point across a shadow boundary. The explanation is a `role="status"`
+ * region that is always rendered, empty and `.visually-hidden` while closed: filling a region
+ * that already exists is what a screen reader announces. Escape is taken in the capture phase
+ * and stopped, so a modal or sheet around it stays open. The popover is fixed to the viewport
+ * and placed by `place()`, so a scrolling tile cannot cut it off.
+ *
+ * Events: `lintje-toggle` (composed, bubbling), detail `{ open }`.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import { type Place } from '../../../primitives/shared/place.js';
+export type ToggletipPlacement = 'bottom-start' | 'bottom-end';
+export declare class LintjeToggletip extends LintjeElement {
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    /** The trigger's accessible name and tooltip. */
+    label: string;
+    placement: ToggletipPlacement;
+    open: boolean;
+    protected spot: Place | null;
+    private readonly popoverId;
+    private reflowFrame;
+    private get trigger();
+    private setOpen;
+    private readonly onOutsideClick;
+    /** Escape works with the focus anywhere: a mouse click in Safari leaves the trigger unfocused. */
+    private readonly onEscape;
+    private readonly onFocusout;
+    private readonly onReflow;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private measure;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private spotStyle;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-toggletip': LintjeToggletip;
+    }
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Vertical bars with data labels and an optional trend line. When one label doesn't fit,
+ * all data labels drop rather than leaving single bars unlabeled.
+ */
+import { type TemplateResult } from 'lit';
+import { type ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+/** Tints of one color, for a subdivision of a single variable. */
+export declare const TINTS: string[];
+type BarSpec = Extract<ChartSpec, {
+    kind: 'bar';
+}>;
+export declare function renderBarChart(spec: BarSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -0,0 +1,12 @@
+/**
+ * Two y-axes, each in the color of its series. Yellow text on white is too light, so axis
+ * text takes dark-yellow-80 % (#B07A00).
+ */
+import { type TemplateResult } from 'lit';
+import { type ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type DualAxisSpec = Extract<ChartSpec, {
+    kind: 'dual-axis';
+}>;
+export declare function renderDualAxisChart(spec: DualAxisSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -0,0 +1,9 @@
+/** Grouped bars: several variables side by side per category; the second is the comparison. */
+import { type TemplateResult } from 'lit';
+import { type ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type GroupedBarSpec = Extract<ChartSpec, {
+    kind: 'grouped-bar';
+}>;
+export declare function renderGroupedBarChart(spec: GroupedBarSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -0,0 +1,16 @@
+/** Heatmap with class legend; below 768 px the days become columns, the hours rows. */
+import { type TemplateResult } from 'lit';
+import type { ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+export type { HeatmapClass } from './heatmap-classes.js';
+export { heatmapBounds, heatmapClasses } from './heatmap-classes.js';
+type HeatmapSpec = Extract<ChartSpec, {
+    kind: 'heatmap';
+}>;
+type HeatmapGrid = NonNullable<HeatmapSpec['mobile']>;
+/**
+ * The phone's grid when the host sent none: a grid wider than it is tall turns on its side, so
+ * the long axis runs down the page (rule 9). It is compact, as the host's own would be.
+ */
+export declare function phoneGrid(spec: HeatmapSpec): HeatmapGrid | undefined;
+export declare function renderHeatmap(spec: HeatmapSpec, options: ChartOptions): TemplateResult;

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

@@ -0,0 +1,24 @@
+export interface HeatmapClass {
+    /** Upper bound, exclusive; `Infinity` for the top class. */
+    limit: number;
+    color: string;
+    label: string;
+    /**
+     * The step of the sequential ramp, 0…4; not the list position. A single class takes 4,
+     * because the CSS that turns the text white keys on this number.
+     */
+    ramp: number;
+}
+/** The four bounds between the classes; none when empty, all-null or a single distinct value. */
+export declare function heatmapBounds(values: readonly (readonly (number | null)[])[]): number[];
+/** A number with its unit: "87%" with no space, "11 min" with one, the bare number without. */
+export declare function formatWithUnit(value: number, unit?: string, decimals?: number): string;
+/**
+ * The classes a heatmap draws with: colours and legend labels. `bounds` (four ascending
+ * numbers) overrides the automatic ones; `unit` is written once per label.
+ */
+export declare function heatmapClasses(values: readonly (readonly (number | null)[])[], options?: {
+    bounds?: readonly number[];
+    unit?: string;
+}): HeatmapClass[];
+export declare function heatmapClassFor(classes: readonly HeatmapClass[], value: number): number;

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

@@ -0,0 +1,15 @@
+/**
+ * Horizontal bars with a threshold. The threshold is black and dashed,
+ * never a second data color; a row above it takes variable c's color, so the
+ * exceedance is carried by more than the bar length alone.
+ */
+import { type TemplateResult } from 'lit';
+import type { ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type HorizontalBarSpec = Extract<ChartSpec, {
+    kind: 'horizontal-bar';
+}>;
+/** Horizontal bars draw 26 px per row plus the axis line. */
+export declare function rowsHeight(count: number): number;
+export declare function renderHorizontalBarChart(spec: HorizontalBarSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -0,0 +1,37 @@
+/**
+ * The charts as lit-html templates: `renderChart(spec, options)` draws any `ChartSpec`,
+ * `renderMap` a map. See README.md for the contract.
+ */
+export { renderChart } from './shared/render-chart.js';
+export { renderLineChart } from './line-chart/line-chart.js';
+export { renderBarChart, TINTS } from './bar-chart/bar-chart.js';
+export { renderHorizontalBarChart, rowsHeight } from './horizontal-bar-chart/horizontal-bar-chart.js';
+export { renderTargetProgressChart } from './target-progress-chart/target-progress-chart.js';
+export { renderGroupedBarChart } from './grouped-bar-chart/grouped-bar-chart.js';
+export { renderStackedBarChart } from './stacked-bar-chart/stacked-bar-chart.js';
+export { renderPieChart } from './pie-chart/pie-chart.js';
+export { renderDualAxisChart } from './dual-axis-chart/dual-axis-chart.js';
+export { renderHeatmap, heatmapBounds, heatmapClasses } from './heatmap-chart/heatmap-chart.js';
+export type { HeatmapClass } from './heatmap-chart/heatmap-chart.js';
+export { renderMap } from './map-chart/map-chart.js';
+export type { MapOptions } from './map-chart/map-chart.js';
+export { renderChartFrame, renderLegend, renderAsOfMarker } from './shared/axes.js';
+export type { ChartFrameOptions, LegendItem, SvgSlot } from './shared/axes.js';
+export { renderTooltip } from './shared/tooltip.js';
+export { renderChartSkeleton, renderChartEmpty, renderChartError, liveAnnouncement, } from './shared/chart-states.js';
+export type { ChartSkeletonKind } from './shared/chart-states.js';
+export { ChartController, chartArea } from './shared/controller.js';
+export type { ChartOptions, MeasureSpec, TooltipContent, TooltipRow, TooltipState, } from './shared/controller.js';
+export { markSelection } from './shared/mark-select.js';
+export type { ChartSelection, MarkAttributes, MarkSelection } from './shared/mark-select.js';
+export { chartColor } from './shared/colors.js';
+export { tintsFor } from './shared/tints.js';
+export { DATA_COLORS, chartToken, isDataColor } from '../../../tokens/colors.js';
+export type { DataColor } from '../../../tokens/colors.js';
+export * from './shared/scale.js';
+export * from '../../../core/format.js';
+export { staggerStyle, gridStaggerStyle } from './shared/stagger.js';
+export type { StyleInfo } from './shared/stagger.js';
+export { chartStyles, chartFrameStyles, pieChartStyles, heatmapStyles } from './shared/chart-styles.js';
+export { mapStyles, mapChartStyles } from './map-chart/map-styles.js';
+export type { ChartSpec, ChartKind, ChartColor, ChartLink, LineSeriesData, BarSeriesData, MapTileData, MapValue, MapVariant, MapPlotData, MapPlotVariant, } from './shared/types.js';

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

@@ -0,0 +1,12 @@
+/**
+ * Line and area chart with comparison, hatching and as-of time. Missing data is never drawn
+ * as 0 (rule 15): `null` points are skipped and the missing part is hatched or cut off.
+ */
+import { type TemplateResult } from 'lit';
+import { type ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type LineSpec = Extract<ChartSpec, {
+    kind: 'line';
+}>;
+export declare function renderLineChart(spec: LineSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -0,0 +1,26 @@
+/**
+ * A map as a stack of drawings: its `plots`, or its own variant and values as a stack of one. The
+ * svg map, the basemap and the tile's CSV read the same list, so a figure always speaks the unit
+ * and the series names of its own layer.
+ */
+import type { MapSeriesKey, MapTileData, MapValue, MapVariant } from '../shared/types.js';
+export type DrawingVariant = Exclude<MapVariant, 'plots'>;
+export interface MapDrawing {
+    variant: DrawingVariant;
+    values: MapValue[];
+    /** The layer's name in the legend and the CSV: its `label`, or the word for its variant. */
+    name: string;
+    unit: string;
+    /** The largest figure, at least 1: what the classes, widths and sizes scale to. */
+    max: number;
+    destination?: {
+        lon: number;
+        lat: number;
+        label: string;
+    };
+    seriesLabels?: Partial<Record<MapSeriesKey, string>>;
+}
+/** The drawings in the order they draw, bottom first; `unit` is the map's own. */
+export declare function mapDrawings(data: MapTileData, unit: string): MapDrawing[];
+/** A figure and its unit, without a dangling space when the unit is empty. */
+export declare function withUnit(figure: string, unit: string): string;

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

@@ -0,0 +1,26 @@
+import type { ChartController } from '../shared/controller.js';
+import type { MapTileData, MapValue } from '../shared/types.js';
+export interface LeafletSyncOptions {
+    unit: string;
+    active: string | null;
+    select: (value: MapValue) => void;
+    clear: () => void;
+    /** Below 768 px, where a one-finger drag belongs to the page (rule 9). */
+    mobile: boolean;
+}
+export declare class LeafletSurface {
+    #private;
+    constructor(controller: ChartController);
+    /**
+     * `ref` callback for the container. The map is built by the `ResizeObserver`, not here: Lit
+     * commits a `ref` while the node is in its template fragment (0 × 0), and Leaflet would write
+     * `position: relative` over the stylesheet.
+     */
+    readonly attach: (element: Element | undefined) => void;
+    /** Applying synchronously is deliberate: a selection must land in the frame of its panel. */
+    sync(data: MapTileData, options: LeafletSyncOptions): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    home(): void;
+    destroy(): void;
+}

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

@@ -0,0 +1,17 @@
+/** The map: draws the pre-projected geometry from `assets/geo/`. */
+import { type TemplateResult } from 'lit';
+import type { ChartOptions } from '../shared/controller.js';
+import type { MapTileData, MapValue } from '../shared/types.js';
+/**
+ * What the map sends back. `description` and `selectedId` come from the map's own data, so
+ * the chart options of those names are omitted.
+ */
+export interface MapOptions extends Omit<ChartOptions, 'description' | 'onSelect' | 'selectedId'> {
+    description?: string;
+    /** An area or point was clicked; the whole mark travels, as the panel needs its figure. */
+    onSelect?: (mark: MapValue) => void;
+    /** The selection was undone (chosen mark again, empty map, Escape, close); travels the id. */
+    onClear?: (previousId: string) => void;
+    onLayerChange?: (value: string) => void;
+}
+export declare function renderMap(data: MapTileData, options: MapOptions): TemplateResult;

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

@@ -0,0 +1,8 @@
+/**
+ * The map's CSS for a host that renders into a shadow root: `[...chartStyles, ...mapStyles]`.
+ * Kept apart from `chart-styles.ts` so a page without a map carries no Leaflet.
+ */
+import { type CSSResult } from 'lit';
+export declare const mapChartStyles: CSSResult;
+/** `iconStyles` closes the list: Lit keeps the last place of a sheet named twice. */
+export declare const mapStyles: CSSResult[];

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

@@ -0,0 +1,25 @@
+/**
+ * Where a focused mark must move so that the overlays on the map do not cover it (WCAG 2.4.11):
+ * plain box arithmetic, shared by the svg map and the one on a basemap.
+ */
+export interface Box {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** How far a revealed mark stands off the overlay or edge it passed, in px. */
+export declare const REVEAL_MARGIN = 8;
+/** What stands over the drawing: the tile's own overlays and Leaflet's credit. */
+export declare const OVERLAYS = ".lintje-map-chart__layers, .lintje-map-chart__zoom, .lintje-map-chart__legend, .lintje-map-chart__selection, .leaflet-control";
+/** The overlays in `area`, as boxes in client pixels; one that is not drawn has no size. */
+export declare function overlayBoxes(area: Element): Box[];
+/**
+ * The smallest move of the drawing that puts `mark` inside `view` and clear of every overlay,
+ * `margin` off what it had to pass: `[0, 0]` when it already is, `null` when no move does it.
+ */
+export declare function clearance(mark: Box, view: Box, overlays: Box[], margin: number): [number, number] | null;
+/** Whether nothing of `mark` shows: outside `view`, or what is inside lies under one overlay. */
+export declare function hidden(mark: Box, view: Box, overlays: Box[]): boolean;
+/** Whether the focus came from the keyboard: a pointer's focus must not move what it pressed. */
+export declare function keyboardFocus(element: Element): boolean;

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

@@ -0,0 +1,17 @@
+/**
+ * Pie and donut: at most five parts, largest first and darkest first, whatever order the host
+ * sends. The parts take the tints of one variable (the spec's `color`, or the default) spread
+ * over the ladder with their number. "Overig" and a `remainder` segment (the open part of an
+ * occupancy donut) are not parts: they draw last, gray and light gray, unless the data colours
+ * them; a segment's own `color` always wins. More than five parts fold into four and one gray
+ * "Overig" that is not clickable: a merged slice has no single place to drill into. The legend
+ * is a table, in the drawn order.
+ */
+import { type TemplateResult } from 'lit';
+import type { ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type PieSpec = Extract<ChartSpec, {
+    kind: 'pie';
+}>;
+export declare function renderPieChart(spec: PieSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -0,0 +1,79 @@
+/** The chart frame: axes, grid, zero line, hatching, as-of line, description and legend. */
+import { nothing, type SVGTemplateResult, type TemplateResult } from 'lit';
+import { type PlotArea } from './scale.js';
+import type { PlotKeys } from './plot-keys.js';
+import { type SeriesKey } from './series-shapes.js';
+/** Anything that may go inside the `<svg>`; built with lit's `svg`, since `html` draws nothing. */
+export type SvgSlot = SVGTemplateResult | typeof nothing | false | null | undefined | readonly SvgSlot[];
+export interface LegendItem {
+    label: string;
+    color?: string;
+    shape?: 'square' | 'line' | 'dashed';
+    /** The shape the line carries at its end, drawn on its line marker (rule 13). */
+    symbol?: SeriesKey;
+    hidden?: boolean;
+}
+export declare function renderLegend({ items, onToggle, position, }: {
+    items: LegendItem[];
+    onToggle?: (label: string) => void;
+    position?: 'top' | 'bottom' | 'right';
+}): TemplateResult;
+export interface ChartFrameOptions {
+    area?: PlotArea;
+    ticks: number[];
+    max: number;
+    /** Unit above the axis, e.g. "Afgehandelde aanvragen". */
+    axisTitle?: string;
+    xLabels?: {
+        label: string;
+        x: number;
+    }[];
+    /** Description for screen readers; replaces the chart in the accessibility tree. */
+    description: string;
+    height?: number;
+    /** Extra definitions (hatch patterns etc.). */
+    defs?: SvgSlot;
+    zeroLine?: boolean;
+    /** How a tick is written; `axisColumn` decides between full and compact. Default full. */
+    formatTick?: (tick: number) => string;
+    /** The resolved `--font-ui`, for measuring the x labels. */
+    fontFamily?: string;
+    id: string;
+    /** Some mark is a button: the drawing is a group named by its description, not an image. */
+    interactive?: boolean;
+    /** The arrow keys over the categories; the drawing then takes the focus. */
+    keys?: PlotKeys;
+}
+/** `role` and the focus of a chart's `<svg>`: an image, unless it holds buttons (WCAG 4.1.2). */
+export declare function drawingRole(interactive: boolean | undefined): 'group' | 'img';
+/**
+ * The focus ring of a mark: 3 px of `--color-focus` outside a 1 px gap in the surface, so it
+ * stands apart from an orange mark too. A filter, as an outline does not follow a slice; the
+ * drawing hands its id to the CSS as `--lintje-focus-ring` (`focusRingStyle`). Any alpha
+ * counts as the shape, so a muted mark's ring is as strong as any other.
+ */
+export declare function renderFocusRing(id: string): SVGTemplateResult;
+/** The custom property that points a drawing's marks at its focus ring. */
+export declare function focusRingStyle(id: string): Record<string, string>;
+/**
+ * The x labels that fit: every one while no two neighbours touch, otherwise every second,
+ * third, … from the first on. Neighbours are measured pair by pair, so one long name beside
+ * a short one can fit where equal day labels do not.
+ */
+export declare function thinLabels<T extends {
+    label: string;
+    x: number;
+}>(labels: T[], fontFamily?: string): T[];
+export declare function renderChartFrame({ area, ticks, max, axisTitle, xLabels, description, defs, zeroLine, formatTick, id, height, fontFamily, interactive, keys, }: ChartFrameOptions, children: SvgSlot): TemplateResult;
+/**
+ * The as-of marker. Up to 6 pending hours (tail) it draws nothing and the missing hours are
+ * hatched; beyond that (early) the series is cut off, with a line, a label and a note.
+ */
+export declare function renderAsOfMarker({ area, index, count, label, lastValue, pendingHours, }: {
+    area?: PlotArea;
+    index: number;
+    count: number;
+    label: string;
+    lastValue?: string;
+    pendingHours: number;
+}): SvgSlot;

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

@@ -0,0 +1,25 @@
+/**
+ * The icons a chart draws itself (zoom controls, the pin in "Zet als bereik"), through
+ * `renderIcon`. An icon-only control shows text when its file is missing (`+`, `−`), keeping
+ * its size; what a control does is its `action`, never its icon's name.
+ */
+import { type TemplateResult } from 'lit';
+/** One icon, or the text that stands in for it while no file has that name. */
+export declare function chartIcon(name: string, text: string, size?: number): TemplateResult | string;
+/** The map's zoom controls, in the order the map and its skeleton draw them. */
+export declare const ZOOM_CONTROLS: readonly [{
+    readonly action: 'in';
+    readonly name: 'functioneel-plus';
+    readonly text: '+';
+    readonly label: 'Inzoomen';
+}, {
+    readonly action: 'out';
+    readonly name: 'functioneel-minus';
+    readonly text: '−';
+    readonly label: 'Uitzoomen';
+}, {
+    readonly action: 'home';
+    readonly name: 'functioneel-home';
+    readonly text: 'Terug';
+    readonly label: 'Terug naar het hele gebied';
+}];

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

@@ -0,0 +1,27 @@
+/**
+ * Empty, error and loading states: the tile keeps its header, size and axes; only the data is
+ * missing. This module writes the markup of `lintje-skeleton` and `lintje-announcement`, not
+ * their CSS. A host with its own announcement element passes it in `announcement`.
+ */
+import { type TemplateResult } from 'lit';
+export type ChartSkeletonKind = 'line' | 'bar' | 'pie' | 'donut' | 'heatmap' | 'map' | 'table';
+/** Loading skeleton in the shape of the chart, exactly `height` tall so the tile keeps its size. */
+export declare function renderChartSkeleton({ kind, height, }?: {
+    kind?: ChartSkeletonKind;
+    height?: string;
+}): TemplateResult;
+/** Axes, grid and zero line stay; the message names the way out itself. */
+export declare function renderChartEmpty(message: unknown, height?: string): TemplateResult;
+/** The error announcement for a component: `live: true`, so a screen reader speaks it. */
+export declare function liveAnnouncement(message: unknown): TemplateResult;
+/**
+ * Error state: the announcement with the last known value, without "Opnieuw proberen". The
+ * calling component defines the element; a host with its own announcement passes it in.
+ */
+export declare function renderChartError({ message, lastKnown, height, announcement, }: {
+    message: unknown;
+    lastKnown?: unknown;
+    height?: string;
+    /** The host's own announcement; without one, `liveAnnouncement`. */
+    announcement?: (message: unknown) => TemplateResult;
+}): TemplateResult;

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

@@ -0,0 +1,10 @@
+/**
+ * The charts' CSS for a host that renders into a shadow root: `static styles = [...chartStyles]`.
+ * The button reset, `visually-hidden` and the keyframes come from `tokens/base.css`.
+ */
+import { type CSSResult } from 'lit';
+export declare const chartFrameStyles: CSSResult;
+export declare const pieChartStyles: CSSResult;
+export declare const heatmapStyles: CSSResult;
+/** Everything a chart needs, in one list; the map adds `mapStyles`. */
+export declare const chartStyles: CSSResult[];

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

@@ -0,0 +1,12 @@
+import type { ChartColor } from './types.js';
+/** What a figure draws when its data names no colour; the stylesheets name the same token. */
+export declare const DEFAULT_SERIES_COLOR = "var(--color-chart-default)";
+export declare function chartColor(color: ChartColor | undefined): string | undefined;
+/**
+ * The edge under a line drawn in dark yellow: its own text colour, so the line reaches 3:1 on
+ * the light surface where the yellow is 1.8:1. In dark that token is the yellow itself and the
+ * edge melts into the line.
+ */
+export declare function lineCasing(color: string | undefined): string | undefined;
+/** The colour of a map point's series; colour names only. */
+export declare function seriesColor(series: string | undefined): string | undefined;