lintje 0.1.1

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

@@ -0,0 +1,142 @@
+import { type PlotArea } from './scale.js';
+import type { LeafletSurface } from '../map-chart/leaflet.js';
+import type { ChartSelection } from './mark-select.js';
+/** What every `render*` takes besides its data. */
+export interface ChartOptions {
+    /** The state this chart keeps between renders. One per chart. */
+    controller: ChartController;
+    /** The chart's `<desc>`: a readable summary, the accessible alternative. Required. */
+    description: string;
+    /** Phone representation (below 768 px). The host decides, by media query. */
+    mobile?: boolean;
+    /** Fixed px height, instead of the `--chart-h-main` / `--chart-h-small` token. */
+    height?: number;
+    /** A plot area of your own, instead of the measured one. */
+    plotArea?: PlotArea;
+    /** Drawn in the expand modal: takes the modal body's height and a looser layout. */
+    expanded?: boolean;
+    /** Cross-drill: the chosen mark's id. The chart keeps no selection of its own. */
+    selectedId?: string | null;
+    /** A mark that carries a `href` was activated. Without this the marks stay inert. */
+    onSelect?: (mark: ChartSelection) => void;
+    /** The selection was undone (chosen mark again, or Escape); the id travels for focus. */
+    onClear?: (previousId: string) => void;
+}
+/** The plot area a chart draws in: default margins, the chart's overrides, the measured size. */
+export declare function chartArea(options: ChartOptions, margins?: Partial<PlotArea>): PlotArea;
+export interface TooltipRow {
+    label: string;
+    value: string;
+    color: string;
+}
+export interface TooltipContent {
+    title: string;
+    rows: TooltipRow[];
+}
+export interface TooltipState {
+    x: number;
+    y: number;
+    content: TooltipContent;
+}
+/** What the chart asks the controller to watch; set by the chart, not by the host. */
+export interface MeasureSpec {
+    /** Follow the element's width with a `ResizeObserver` (every axis chart). */
+    width?: boolean;
+    /** Fixed height in px, or a token read on the element itself, e.g. '--chart-h-main'. */
+    height?: number | string;
+    /** The token is the height of the whole chart: legend, axis title and border come off it. */
+    fit?: boolean;
+}
+export declare class ChartController {
+    /** Stable per chart: `<desc>` and the hatch pattern are addressed by it. */
+    readonly id: string;
+    width: number;
+    height: number;
+    inView: boolean;
+    tooltip: TooltipState | null;
+    /** The category under the pointer or the keyboard; `null` for none. */
+    hoverIndex: number | null;
+    /** What the keyboard's tooltip says, for the chart's status region; empty otherwise. */
+    status: string;
+    hiddenSeries: string[];
+    hoverSegment: number | null;
+    selectedCell: {
+        row: number;
+        column: number;
+    } | null;
+    dimmedClass: number | null;
+    zoom: number;
+    /** The centre of the zoomed svg map, in its own units; `null` is the map's middle. */
+    mapCentre: {
+        x: number;
+        y: number;
+    } | null;
+    /** How far a revealed mark moved the view past the map's edge, in its units; `null` for none. */
+    mapNudge: {
+        x: number;
+        y: number;
+    } | null;
+    mapSelection: string | null;
+    hostSelection: string | null | undefined;
+    legendOpen: boolean | null;
+    /** The Leaflet map, created lazily when the data carries a basemap; `detach()` destroys it. */
+    leaflet: LeafletSurface | null;
+    /** Centre and zoom of the Leaflet map. `detach()` keeps it so a re-attach does not reset. */
+    leafletView: {
+        lat: number;
+        lon: number;
+        zoom: number;
+    } | null;
+    private readonly notify;
+    private element;
+    private measuring;
+    private resizeObserver;
+    private intersectionObserver;
+    constructor(requestUpdate: () => void);
+    requestUpdate(): void;
+    get fontFamily(): string;
+    /**
+     * What to measure; applied by `attach` once the element exists. A spec that changes under a
+     * standing chart is read here, since Lit calls a stable `ref` only when the element changes.
+     */
+    measure(spec: MeasureSpec): void;
+    /**
+     * `ref` callback for the chart's outermost element; a bound property, so lit keeps it.
+     * The viewBox is set 1:1 to the measured pixels so text is not squeezed in a narrow tile.
+     */
+    readonly attach: (element: Element | undefined) => void;
+    private watchSize;
+    /** Stop observing; the host calls it when the chart leaves the DOM for good. */
+    detach(): void;
+    private unwatch;
+    /**
+     * Coordinates are relative to the `data-tooltip-anchor` element, not the svg's parent.
+     * `from` starts the anchor search; Leaflet passes its container because its events
+     * do not have the drawn shape as `currentTarget`.
+     */
+    showTooltip(event: MouseEvent, content: TooltipContent, from?: Element): void;
+    /** The tooltip at a place relative to the `data-tooltip-anchor`: the keyboard's way in. */
+    showTooltipAt(x: number, y: number, content: TooltipContent): void;
+    hideTooltip(): void;
+    hoverAt(index: number | null, event?: MouseEvent, content?: TooltipContent): void;
+    /**
+     * Escape on the chart hides its tooltip, and only then is it the chart's: a second Escape
+     * goes on to a selection or an enclosing modal. Returns whether it hid one.
+     */
+    dismiss(event: KeyboardEvent): boolean;
+    private readonly onWindowKey;
+    private watching;
+    private watchEscape;
+    private unwatchEscape;
+    toggleSeries(label: string): void;
+    private read;
+    /**
+     * What the chart draws around its drawing (legend, axis title, border).
+     * Settles in one extra pass: the first read measures 0, the ResizeObserver then finds the
+     * real number, and the next render leaves the element token-high.
+     */
+    private extras;
+    /** `inView` gates the animations in chart.css; once only, and at once without the observer. */
+    private watchVisibility;
+    private enter;
+}

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

@@ -0,0 +1,44 @@
+/**
+ * A chart mark that drills. A mark is clickable only when its data point carries a `href`
+ * (a `role="button"` with `aria-pressed`); without one it is inert.
+ *
+ * The selection is not kept here: the chosen mark is whatever `options.selectedId` says, so
+ * the URL is the only state. Clearing (the chosen mark again, or Escape) emits
+ * `{id: null, href: clearHref}`; without a `clearHref` the clear is inert.
+ */
+import { nothing } from 'lit';
+import type { ChartOptions } from './controller.js';
+import type { ChartLink } from './types.js';
+/** What travels to the host on a click. */
+export interface ChartSelection {
+    id: string;
+    label: string;
+    href?: string;
+}
+/** What a renderer writes onto its mark. `nothing` removes the attribute. */
+export interface MarkAttributes {
+    clickable: boolean;
+    /** The `is-*` states, to chain onto the mark's own BEM class. */
+    state: string;
+    markId: string | typeof nothing;
+    role: 'button' | typeof nothing;
+    tabIndex: 0 | typeof nothing;
+    pressed: 'true' | 'false' | typeof nothing;
+    label: string | typeof nothing;
+    click: (() => void) | typeof nothing;
+    keydown: ((event: KeyboardEvent) => void) | typeof nothing;
+}
+export interface MarkSelection {
+    active: string | null;
+    /** Some mark is a button: the drawing around them is then a group, not an image. */
+    interactive: boolean;
+    /** The attributes of one mark; `sentence` is what a screen reader hears, default the label. */
+    of(link: ChartLink | null | undefined, label: string, sentence?: string): MarkAttributes;
+    escape(event: KeyboardEvent): void;
+}
+/**
+ * The selection of one chart; without an `onSelect` every mark is inert. A `selectedId`
+ * that names none of `links` is not a selection: muting every mark for a highlight that is
+ * nowhere would leave a grey chart.
+ */
+export declare function markSelection(options: ChartOptions, links: Iterable<ChartLink | null | undefined>): MarkSelection;

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

@@ -0,0 +1,24 @@
+/**
+ * The keyboard's way to the values a pointer reads from the tooltip: the drawing takes the
+ * focus once, and the arrow keys walk its categories, the tooltip standing on the one reached
+ * and a status region saying it. Home and End go to the ends.
+ */
+import { type TemplateResult } from 'lit';
+import type { ChartController, TooltipContent } from './controller.js';
+/** Where a category's tooltip stands, in the drawing's own px, and what it says. */
+export interface PlotPoint {
+    x: number;
+    y: number;
+    content: TooltipContent;
+}
+/** What the drawing (the `<svg>`) takes. */
+export interface PlotKeys {
+    keydown: (event: KeyboardEvent) => void;
+    focus: (event: FocusEvent) => void;
+    blur: () => void;
+}
+/** The tooltip's text as one sentence, for a screen reader. */
+export declare function tooltipSentence(content: TooltipContent): string;
+export declare function plotKeys(controller: ChartController, count: number, at: (index: number) => PlotPoint): PlotKeys;
+/** The status region the keyboard's tooltip is spoken from; always there, so a change speaks. */
+export declare function renderPlotStatus(controller: ChartController): TemplateResult;

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

@@ -0,0 +1,8 @@
+/**
+ * `renderChart(spec, options)` draws any `ChartSpec` by its kind. It stands apart from the
+ * barrel so the chart tile can import it without the map and Leaflet.
+ */
+import type { TemplateResult } from 'lit';
+import type { ChartOptions } from './controller.js';
+import type { ChartSpec } from './types.js';
+export declare function renderChart(spec: ChartSpec, options: ChartOptions): TemplateResult;

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

@@ -0,0 +1,56 @@
+/** Scale helpers for the hand-made SVG charts. Pure geometry. */
+export interface PlotArea {
+    width: number;
+    height: number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+/** The margins a chart starts from; `left` is the fallback when there is no measured axis column. */
+export declare const DEFAULT_PLOT_AREA: PlotArea;
+export declare const AXIS_GAP = 8;
+export declare const AXIS_COLUMN_MAX = 96;
+export declare const AXIS_COLUMN_SHARE = 0.25;
+export declare const ROW_LABEL_SHARE = 0.3;
+export declare const ROW_LABEL_MAX = 320;
+export interface RowLabelColumn {
+    /** Where the labels end (`text-anchor="end"`). */
+    labelEnd: number;
+    barStart: number;
+    /** A label as drawn: whole when it fits the column, otherwise shortened with an ellipsis. */
+    fit: (label: string) => string;
+}
+/**
+ * The label column of a chart with a label per row: as wide as the widest label, capped at
+ * `ROW_LABEL_SHARE` of the chart and `ROW_LABEL_MAX`.
+ */
+export declare function rowLabelColumn(labels: string[], chartWidth: number, { fontFamily }?: {
+    fontFamily?: string;
+}): RowLabelColumn;
+export interface AxisColumn {
+    width: number;
+    /** How the ticks are written: in full, or compact when full does not fit the caps. */
+    format: (tick: number) => string;
+}
+/**
+ * The column an axis takes: its widest tick label (measured) plus the gap, capped by
+ * `AXIS_COLUMN_MAX` and `AXIS_COLUMN_SHARE`; past the caps the ticks go compact ("1,2 mln").
+ */
+export declare function axisColumn(ticks: number[], chartWidth: number, { minimum, fontFamily }?: {
+    minimum?: number;
+    fontFamily?: string;
+}): AxisColumn;
+export declare function plotWidth(v: PlotArea): number;
+export declare function axisScale(max: number, steps?: number): {
+    max: number;
+    ticks: number[];
+};
+export declare function yPosition(value: number, max: number, v: PlotArea): number;
+export declare function xPosition(index: number, count: number, v: PlotArea): number;
+export declare function band(index: number, count: number, v: PlotArea, margin?: number): {
+    x: number;
+    width: number;
+    center: number;
+    bandWidth: number;
+};

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

@@ -0,0 +1,14 @@
+/** The series names: the data colours, in their canonical order. */
+export declare const SERIES_KEYS: readonly ["sky-blue", "dark-yellow", "red", "green", "mint-green", "violet", "orange", "pink", "dark-green", "purple", "ruby-red", "yellow", "dark-brown", "brown", "dark-blue", "light-blue", "moss-green"];
+export type SeriesKey = (typeof SERIES_KEYS)[number];
+export declare function isSeriesKey(value: unknown): value is SeriesKey;
+declare const SHAPES: readonly ['circle', 'square', 'triangle', 'diamond', 'hexagon', 'triangle-down', 'pentagon', 'plus', 'cross', 'octagon', 'triangle-right', 'triangle-left', 'star', 'star-4', 'hourglass', 'rectangle', 'kite'];
+export type SeriesShape = (typeof SHAPES)[number];
+export declare function seriesShape(series: SeriesKey): SeriesShape;
+/** The corners of a series' shape around (0, 0); `null` for the circle. Exported for tests. */
+export declare function seriesShapePoints(shape: SeriesShape, radius?: number): [number, number][] | null;
+/** The `d` of a series' shape, centred on (0, 0) or on `cx`/`cy`. */
+export declare function seriesShapePath(shape: SeriesShape, radius?: number, cx?: number, cy?: number): string;
+/** The `d` of the point a map draws for `series`; a circle without one. */
+export declare function markPath(series: SeriesKey | undefined, radius: number, cx?: number, cy?: number): string;
+export {};

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

@@ -0,0 +1,6 @@
+/** Draw-in stagger, returned in the shape `styleProps` (`core/style-props.ts`) takes. */
+export type StyleInfo = Record<string, string>;
+/** Place of a mark in the staggered draw-in: 0 for the first, 1 for the last. */
+export declare function staggerStyle(index: number, count: number): StyleInfo;
+/** Place of a cell in a grid's draw-in: columns weigh 0.7, rows 0.3, so the columns lead. */
+export declare function gridStaggerStyle(column: number, row: number, columns: number, rows: number): StyleInfo;

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

@@ -0,0 +1,2 @@
+/** The tint tokens for `n` parts of one variable, darkest first. */
+export declare function tintsFor(n: number, color?: string): string[];

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

@@ -0,0 +1,4 @@
+/** Chart tooltip: a heading, then every series with a color swatch and value. */
+import { nothing, type TemplateResult } from 'lit';
+import type { ChartController } from './controller.js';
+export declare function renderTooltip(controller: ChartController): TemplateResult | typeof nothing;

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

@@ -0,0 +1,252 @@
+/** The chart data contract, field for field as `src/types.ts` carries it. */
+import type { DataColor } from '../../../../tokens/colors.js';
+/**
+ * A chart color: a variable's name (the one list in `tokens/colors.ts`) maps to its token,
+ * `other`, `remainder` and `emphasis` to their roles, and anything else passes through as CSS.
+ */
+export type ChartColor = DataColor | 'other' | 'remainder' | 'emphasis' | (string & {});
+/**
+ * What makes a mark clickable: the host's identity for it and the URL the host minted. A bare
+ * number takes them from the chart's `links` array. Without a `href` the mark is not clickable.
+ */
+export interface ChartLink {
+    id: string;
+    href?: string;
+}
+export interface LineSeriesData {
+    label: string;
+    /** null = no data, never 0 (rule 15). */
+    values: (number | null)[];
+    color?: ChartColor;
+    comparison?: boolean;
+    area?: boolean;
+}
+export interface BarSeriesData {
+    label: string;
+    values: number[];
+    color?: ChartColor;
+    /** One entry per value: the drilldown of that bar or segment, or null. */
+    links?: (ChartLink | null)[];
+}
+export type ChartSpec = {
+    kind: 'line';
+    labels: string[];
+    series: LineSeriesData[];
+    axisTitle?: string;
+    unit?: string;
+    /** Index of the last complete point; after it the data is incomplete. */
+    asOfIndex?: number;
+    asOfLabel?: string;
+    pendingHours?: number;
+    fixedMax?: number;
+    small?: boolean;
+} | {
+    kind: 'bar';
+    labels: string[];
+    values: (number | null)[];
+    color?: ChartColor;
+    axisTitle?: string;
+    /** Trend line over the bars. */
+    trend?: (number | null)[];
+    dataLabels?: boolean;
+    small?: boolean;
+    /** One entry per value: the drilldown of that bar, or null. */
+    links?: (ChartLink | null)[];
+} | {
+    kind: 'horizontal-bar';
+    rows: {
+        label: string;
+        value: number;
+        id?: string;
+        href?: string;
+    }[];
+    threshold?: number;
+    thresholdLabel?: string;
+    unit?: string;
+    color?: ChartColor;
+    aboveThresholdColor?: ChartColor;
+} | {
+    kind: 'target-progress';
+    rows: {
+        label: string;
+        value: number;
+    }[];
+    target?: number;
+} | {
+    kind: 'grouped-bar';
+    labels: string[];
+    series: BarSeriesData[];
+    axisTitle?: string;
+    small?: boolean;
+} | {
+    kind: 'stacked-bar';
+    labels: string[];
+    series: BarSeriesData[];
+    axisTitle?: string;
+    normalized?: boolean;
+    totalOnTop?: boolean;
+    small?: boolean;
+} | {
+    kind: 'pie';
+    segments: {
+        label: string;
+        value: number;
+        color?: ChartColor;
+        remainder?: boolean;
+        id?: string;
+        href?: string;
+    }[];
+    /** The variable the pie divides: its parts take this colour's tints. Default sky blue. */
+    color?: ChartColor;
+    donut?: boolean;
+    centerValue?: string;
+    centerLabel?: string;
+    legendTable?: boolean;
+    /** Header of the legend table's first column: what the segments are. */
+    labelHeader?: string;
+    size?: number;
+} | {
+    kind: 'dual-axis';
+    labels: string[];
+    left: {
+        label: string;
+        values: (number | null)[];
+        color?: ChartColor;
+        unit?: string;
+    };
+    right: {
+        label: string;
+        values: (number | null)[];
+        color?: ChartColor;
+        unit?: string;
+    };
+    threshold?: number;
+    thresholdLabel?: string;
+    pendingHours?: number;
+    small?: boolean;
+} | {
+    kind: 'heatmap';
+    columnLabels: string[];
+    rowLabels: string[];
+    /** null = no measurement, never 0 (rule 15); the cell stays empty. */
+    values: (number | null)[][];
+    unit?: string;
+    compact?: boolean;
+    /** The four ascending bounds between the classes; without them they move with the data. */
+    bounds?: number[];
+    /** One entry per cell, row for row: that cell's drilldown, or null. */
+    links?: (ChartLink | null)[][];
+    /**
+     * The compact representation below 768 px (rule 9): its own labels, values and `links`.
+     * Without it a grid wider than tall is drawn on its side there.
+     */
+    mobile?: {
+        columnLabels: string[];
+        rowLabels: string[];
+        values: (number | null)[][];
+        links?: (ChartLink | null)[][];
+    };
+};
+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`.
+ */
+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. */
+export type MapSeriesKey = DataColor;
+/** One row of a map: an area, a point or the origin of a flow. */
+export interface MapValue {
+    /** Key: ISO code for choropleth, place id for points and flows. */
+    id: string;
+    label: string;
+    value: number | null;
+    /** Second measure for the selection panel, e.g. the number of files. */
+    detail?: string;
+    lon?: number;
+    lat?: number;
+    /** A data colour by name, and with it that colour's shape (rule 13). No series, no legend. */
+    series?: MapSeriesKey;
+    /**
+     * The outline of an area that is not in the map's own geometry: a ring of `[lon, lat]` pairs,
+     * the first point not repeated. Drawn by `polygons`; a ring of fewer than three points draws
+     * nothing.
+     */
+    polygon?: [number, number][];
+    /** A URL the host minted, carried into `lintje-mark-select`. */
+    href?: string;
+}
+/** The basemap the map draws on, a WMS service the host configures. */
+export interface WmsBasemap {
+    kind: 'wms';
+    url: string;
+    /** Comma separated. */
+    layers: string;
+    /** Default `image/png`. */
+    format?: string;
+    /** Default `1.3.0`, so the request asks for `CRS=EPSG:3857`. */
+    version?: string;
+    /** Default `false`: a basemap is the bottom layer and has nothing to show through. */
+    transparent?: boolean;
+    /** Shown bottom right; the service's terms usually require it. Required. */
+    attribution: string;
+}
+/** What one layer of a stacked map draws: a map's variant, without the scope picker. */
+export type MapPlotVariant = 'polygons' | 'points' | 'flows' | 'choropleth';
+/**
+ * One layer of a stacked map. The first layer draws at the bottom and the last on top, except a
+ * choropleth, which colours the land itself and so always lies under the rest. The ids are
+ * unique across the layers: the map keeps one selection.
+ */
+export interface MapPlotData {
+    variant: MapPlotVariant;
+    values: MapValue[];
+    /** The layer's name in the legend and the CSV; without it the word for its variant. */
+    label?: string;
+    /** The unit of this layer's figures; without it the map's `unit`. */
+    unit?: string;
+    /** For `flows`: where this layer's arcs go; without it the map's `destination`. */
+    destination?: {
+        lon: number;
+        lat: number;
+        label: string;
+    };
+    /**
+     * 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.
+     */
+    seriesLabels?: Partial<Record<MapSeriesKey, string>>;
+}
+/** The map's data, as `MapTileData` in `src/types.ts` carries it, without the tile fields. */
+export interface MapTileData {
+    variant: MapVariant;
+    geo?: 'world' | 'netherlands';
+    /** The marks of a one-variant map; empty with `variant: 'plots'`. */
+    values: MapValue[];
+    /** With `variant: 'plots'`: the layers, bottom first. */
+    plots?: MapPlotData[];
+    destination?: {
+        lon: number;
+        lat: number;
+        label: string;
+    };
+    unit?: string;
+    description: string;
+    /** Map height in px; default 400, 220 below 768 px. */
+    height?: number;
+    selectedId?: string | null;
+    layers?: {
+        value: string;
+        label: string;
+    }[];
+    /** The `value` of the layer shown; a choice is kept until the host's next `data` changes it. */
+    layer?: string;
+    /** What each series means, keyed by colour name; each used series gets a legend line. */
+    seriesLabels?: Partial<Record<MapSeriesKey, string>>;
+    /** The label of the link in the selection panel; default "Zet als bereik". */
+    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. */
+    basemap?: WmsBasemap;
+}

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

@@ -0,0 +1,9 @@
+/** Stacked bars, sequential and normalized to 100 %: tints of one color, darkest at the bottom. */
+import { type TemplateResult } from 'lit';
+import { type ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type StackedBarSpec = Extract<ChartSpec, {
+    kind: 'stacked-bar';
+}>;
+export declare function renderStackedBarChart(spec: StackedBarSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -0,0 +1,9 @@
+/** Progress against a target. The axis runs to 110 so a bar visibly crosses the line. */
+import { type TemplateResult } from 'lit';
+import type { ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type TargetProgressSpec = Extract<ChartSpec, {
+    kind: 'target-progress';
+}>;
+export declare function renderTargetProgressChart(spec: TargetProgressSpec, options: ChartOptions): TemplateResult;
+export {};

package/dist-elements/types/components/shared/content-tile.d.ts

@@ -0,0 +1,25 @@
+/**
+ * What the content tiles (chart, map, data table) share: the expand action.
+ * The content is rendered a second time in `<lintje-modal>`, owned by the element that has the
+ * data. The modal's events stop here, like the tile's own, so one action is one line in a log.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeGridItemElement } from '../../primitives/shared/grid-item-element.js';
+import '../overlays/modal/modal.js';
+export interface ExpandModalOptions {
+    heading?: string;
+    subtitle?: string;
+    footnote?: string;
+    /** Writes the CSV; without it the button stays away. */
+    csv?: () => void;
+    /** Writes the PNG — only for content that is an svg. */
+    png?: () => void;
+}
+export declare class LintjeContentTileElement extends LintjeGridItemElement {
+    static properties: PropertyDeclarations;
+    expanded: boolean;
+    protected expand(open: boolean): void;
+    /** Hook for what an element sets up or tears down when the modal opens or closes. */
+    protected expandChanged(_open: boolean): void;
+    protected renderExpandModal(content: unknown, options: ExpandModalOptions): TemplateResult;
+}

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

@@ -0,0 +1,4 @@
+/** How long a copy control says "gekopieerd", and the pause that lets a repeat be heard. */
+export declare const COPIED_FOR = 2000;
+/** The same words again are no change to a live region: it is emptied for this long first. */
+export declare const ANNOUNCE_GAP = 100;

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

@@ -0,0 +1,16 @@
+/**
+ * One pending call, run once typing has stopped for `delay` ms.
+ * `flush()` runs it at once (Enter, leaving the field); a disconnected host drops it.
+ */
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare const TYPING_DELAY = 300;
+export declare class Debounce implements ReactiveController {
+    #private;
+    readonly delay: number;
+    constructor(host: ReactiveControllerHost, delay?: number);
+    get pending(): boolean;
+    schedule(run: () => void): void;
+    flush(): void;
+    cancel(): void;
+    hostDisconnected(): void;
+}

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

@@ -0,0 +1,35 @@
+/**
+ * The disclosure shared by `<lintje-expander>` and `<lintje-explainer>` (`disclosure.css`).
+ * `DisclosureSettle` times the open transition off the body's own `transition-duration`, not
+ * `--dur-collapse`: reduced motion zeroes the token but `tokens/base.css` still gives 80 ms.
+ */
+import { type ReactiveController, type ReactiveControllerHost, type TemplateResult } from 'lit';
+export declare function nextDisclosureId(): string;
+export declare class DisclosureSettle implements ReactiveController {
+    #private;
+    /** False while the body is growing; the box clips until then. */
+    settled: boolean;
+    constructor(host: ReactiveControllerHost);
+    hostDisconnected(): void;
+    /** Call from `updated()`. */
+    observe(open: boolean, body: HTMLElement | null): void;
+}
+export interface DisclosureHeaderOptions {
+    bodyId: string;
+    open: boolean;
+    /** The title text, drawn inside an `<h3>`. */
+    title: unknown;
+    subtitle?: string;
+    /** An icon file name. Decorative. */
+    icon?: string;
+    /** The chevron before the title instead of at the end of the row. */
+    leading?: boolean;
+    toggle: () => void;
+}
+/**
+ * The heading holds the button, not the reverse: an `<h3>` inside a `<button>` is presentational
+ * and reaches no assistive technology. Inside the button only phrasing content.
+ */
+export declare function disclosureHeader(options: DisclosureHeaderOptions): TemplateResult;
+/** The content stays in the DOM; closed it is `visibility: hidden`. */
+export declare function disclosureBody(bodyId: string, content: unknown, contentClass?: string): TemplateResult;