lintje 0.1.1 → 0.3.0

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

@@ -0,0 +1,86 @@
+export type ChartQuestion = 'time' | 'compare' | 'parts' | 'spread' | 'relation' | 'target';
+/** The questions in the order a page asks them, as a reader would put them. */
+export declare const CHART_QUESTIONS: Readonly<Record<ChartQuestion, string>>;
+export interface ChartKindGuide {
+    /** The kind's Dutch name. */
+    label: string;
+    question: ChartQuestion;
+    /** What the kind is for. */
+    use: string;
+    /** When another kind fits better, and which. */
+    avoid: string;
+}
+export declare const CHART_KINDS: {
+    readonly line: {
+        readonly label: 'Lijn';
+        readonly question: 'time';
+        readonly use: 'Het verloop van een of meer reeksen over de tijd, met een vergelijking in grijs, een peilmoment of wat er gebeurde.';
+        readonly avoid: 'Een paar losse groepen zonder volgorde: neem staven.';
+    };
+    readonly 'stacked-area': {
+        readonly label: 'Gestapeld vlak';
+        readonly question: 'time';
+        readonly use: 'Hoe de delen van één variabele samen het totaal vormen, door de tijd.';
+        readonly avoid: 'Delen die je los wilt volgen: alleen de onderste laag staat op de nullijn. Neem lijnen.';
+    };
+    readonly 'dual-axis': {
+        readonly label: 'Twee assen';
+        readonly question: 'time';
+        readonly use: 'Twee maten met een andere eenheid over dezelfde periode, zoals aantallen en een wachttijd met norm.';
+        readonly avoid: 'Twee maten in dezelfde eenheid: neem een lijn met twee reeksen. Waar de lijnen elkaar kruisen, kiest de schaal, niet de data.';
+    };
+    readonly bar: {
+        readonly label: 'Staven';
+        readonly question: 'compare';
+        readonly use: 'Eén waarde per groep of per periode, als de losse waarden tellen, met datalabels of een trendlijn.';
+        readonly avoid: 'Lange namen of veel groepen: neem horizontale staven.';
+    };
+    readonly 'horizontal-bar': {
+        readonly label: 'Horizontale staven';
+        readonly question: 'compare';
+        readonly use: 'Groepen met lange namen, op grootte, met een norm die laat zien wie erboven zit.';
+        readonly avoid: 'Een verloop in de tijd: tijd loopt van links naar rechts. Neem staven of een lijn.';
+    };
+    readonly 'grouped-bar': {
+        readonly label: 'Gegroepeerde staven';
+        readonly question: 'compare';
+        readonly use: 'Twee of drie reeksen naast elkaar per groep, om ze binnen de groep te vergelijken.';
+        readonly avoid: 'Meer dan drie reeksen: de groepen worden onleesbaar. Neem een lijn of een tabel.';
+    };
+    readonly 'stacked-bar': {
+        readonly label: 'Gestapelde staven';
+        readonly question: 'parts';
+        readonly use: 'De samenstelling per groep of per periode, in aantallen of op 100 %.';
+        readonly avoid: 'Eén geheel op één moment: neem een taart. Een deel boven de onderste laag precies vergelijken: neem gegroepeerde staven.';
+    };
+    readonly pie: {
+        readonly label: 'Taart of donut';
+        readonly question: 'parts';
+        readonly use: 'De delen van één geheel op één moment, tot vijf; meer vouwt tot "Overig". Een donut toont ook het deel van een geheel, met het cijfer in het midden.';
+        readonly avoid: 'Een verloop in de tijd, of delen die bijna even groot zijn: neem gestapelde staven.';
+    };
+    readonly histogram: {
+        readonly label: 'Histogram';
+        readonly question: 'spread';
+        readonly use: 'Hoe waarden over klassen vallen, zoals doorlooptijden, met een mediaan of een termijn.';
+        readonly avoid: 'Groepen zonder volgorde of zonder doorlopende as: neem staven.';
+    };
+    readonly heatmap: {
+        readonly label: 'Heatmap';
+        readonly question: 'spread';
+        readonly use: 'Een waarde over twee indelingen tegelijk, zoals uur en dag, in vijf klassen.';
+        readonly avoid: 'Precieze waarden aflezen: klassen ronden af. Neem een tabel.';
+    };
+    readonly scatter: {
+        readonly label: 'Spreiding';
+        readonly question: 'relation';
+        readonly use: 'Of twee maten samenhangen: een punt per eenheid, met een norm op de verticale as.';
+        readonly avoid: 'Een verloop in de tijd: neem een lijn.';
+    };
+    readonly 'target-progress': {
+        readonly label: 'Voortgang tegen een doel';
+        readonly question: 'target';
+        readonly use: 'Hoe ver een paar onderdelen zijn tegen één doel.';
+        readonly avoid: 'Eén kerncijfer tegen een doel: dat is een KPI op een schaal, in lintje-kpi.';
+    };
+};

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

@@ -1,6 +1,6 @@
 /**
- * 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.
+ * Line and area chart with comparison, hatching, as-of time and events. 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';

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

@@ -0,0 +1,16 @@
+import type { MapDrawing } from './drawings.js';
+import type { MapArea } from '../shared/types.js';
+/** The great-circle distance in km. */
+export declare function distanceKm([lon1, lat1]: [number, number], [lon2, lat2]: [number, number]): number;
+/**
+ * A rectangle between two corners, as a lasso of four: in Mercator a line of one longitude or
+ * latitude is straight, so the box on the screen is the box in degrees.
+ */
+export declare function rectRing([lon1, lat1]: [number, number], [lon2, lat2]: [number, number]): [number, number][];
+/** A ring of four corners that is a rectangle: what `rectRing` draws, for the panel's words. */
+export declare function isRect(ring: [number, number][]): boolean;
+/** A ring without any area: every corner on one line of longitude or of latitude. */
+export declare const flatRing: (ring: [number, number][]) => boolean;
+export declare function inArea(area: MapArea, point: [number, number]): boolean;
+/** The ids of the marks of every drawing that lie wholly in the area, in drawing order. */
+export declare function idsInArea(area: MapArea, drawings: MapDrawing[], geo?: string): string[];

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

@@ -3,16 +3,20 @@
  * 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';
+import type { MapSeriesKey, MapSpec, MapValue, MapVariant } from '../shared/types.js';
 export type DrawingVariant = Exclude<MapVariant, 'plots'>;
 export interface MapDrawing {
     variant: DrawingVariant;
     values: MapValue[];
+    /** The layer's place in the stack, from the bottom; what keys a series switched off. */
+    index: number;
     /** 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;
+    /** The smallest figure a mark carries, for the legend's range; `max` without any. */
+    min: number;
     destination?: {
         lon: number;
         lat: number;
@@ -21,6 +25,6 @@ export interface MapDrawing {
     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[];
+export declare function mapDrawings(data: MapSpec, 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/geo.d.ts

@@ -0,0 +1,6 @@
+export type FeatureCollection = GeoJSON.FeatureCollection<GeoJSON.MultiPolygon, {
+    id: string;
+    name: string;
+}>;
+export declare const GEOS: Record<string, FeatureCollection>;
+export declare function geoOf(name: string | undefined): FeatureCollection;

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

@@ -1,8 +1,33 @@
+/**
+ * The map's surface: Leaflet carries the map — the projection, the panes, dragging, zooming and
+ * the tiles of a basemap — and the design system draws the data itself, into Leaflet's svg
+ * renderer (`marks.ts`). One instance hangs on the `ChartController`; `sync()` runs on every
+ * render. Geometry is unprojected (`*.lonlat.json`) and projected here once, at the zoom the
+ * map opens on; a pan or a zoom moves the drawing's group, not its paths.
+ */
+import * as L from 'leaflet';
 import type { ChartController } from '../shared/controller.js';
-import type { MapTileData, MapValue } from '../shared/types.js';
+import type { MapArea, MapSpec, MapTool, MapValue } from '../shared/types.js';
 export interface LeafletSyncOptions {
     unit: string;
     active: string | null;
+    /** The series the legend switched off, as `seriesKey()` names them. */
+    hidden: string[];
+    /** The layers of a stack switched off, by their place in it. */
+    hiddenLayers: number[];
+    /** The area that chose marks, and the marks it chose. */
+    area: MapArea | null;
+    chosen: string[];
+    /** The drawing tool that is on, and what a finished area goes to. */
+    tool: MapTool | null;
+    drawn: (area: MapArea) => void;
+    /** Escape with no area being drawn: the tool goes off. */
+    stopTool: () => void;
+    /** Panning with the mouse, and zooming by double click and pinch; the host may switch them off. */
+    drag: boolean;
+    zoom: boolean;
+    /** The scale bar shows: a move redraws the map so it follows. */
+    scale: boolean;
     select: (value: MapValue) => void;
     clear: () => void;
     /** Below 768 px, where a one-finger drag belongs to the page (rule 9). */
@@ -11,6 +36,8 @@ export interface LeafletSyncOptions {
 export declare class LeafletSurface {
     #private;
     constructor(controller: ChartController);
+    /** The Leaflet map, once the container has a size; a test looks at it. */
+    get map(): L.Map | null;
     /**
      * `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
@@ -18,9 +45,25 @@ export declare class LeafletSurface {
      */
     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;
+    sync(data: MapSpec, options: LeafletSyncOptions): void;
     zoomIn(): void;
     zoomOut(): void;
+    /** A wheel with its key: so many doublings around the pointer, fractional. */
+    zoomBy(event: MouseEvent, doublings: number): void;
+    /**
+     * The scale bar: a round distance in metres (1, 2 or 5 times a power of ten), at most `room`
+     * px wide, measured across the middle of the view, where Mercator's scale holds for what the
+     * reader looks at.
+     */
+    scaleBar(room?: number): {
+        width: number;
+        metres: number;
+    } | null;
+    /**
+     * On paper the box has another size, and Leaflet would keep the screen's pixels and cut the
+     * rest off: the area the reader saw fills the paper's box instead, and returns afterwards.
+     */
+    print(printing: boolean): void;
     home(): void;
     destroy(): void;
 }

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

@@ -1,7 +1,19 @@
-/** The map: draws the pre-projected geometry from `assets/geo/`. */
+/**
+ * The map: its chrome — the legend above it, the layer switcher, the zoom buttons, the select
+ * button with its menu of tools, the scale and the selection panel — around the surface that
+ * draws it (`leaflet.ts`).
+ */
 import { type TemplateResult } from 'lit';
 import type { ChartOptions } from '../shared/controller.js';
-import type { MapTileData, MapValue } from '../shared/types.js';
+import type { MapArea, MapSpec, MapValue } from '../shared/types.js';
+import '../../../../primitives/popover/popover.js';
+/** The map's own height in a tile: on a phone taller, so all its buttons fit on the touch size. */
+export declare const MAP_HEIGHT: {
+    readonly desktop: 400;
+    readonly mobile: 280;
+};
+/** The distance of the scale, in m or km: the figure beside the bracket. */
+export declare function scaleLabel(metres: number): string;
 /**
  * What the map sends back. `description` and `selectedId` come from the map's own data, so
  * the chart options of those names are omitted.
@@ -13,5 +25,7 @@ export interface MapOptions extends Omit<ChartOptions, 'description' | 'onSelect
     /** The selection was undone (chosen mark again, empty map, Escape, close); travels the id. */
     onClear?: (previousId: string) => void;
     onLayerChange?: (value: string) => void;
+    /** An area was drawn, or undone (`null`); travels the ids of every mark in it. */
+    onArea?: (area: MapArea | null, ids: string[]) => void;
 }
-export declare function renderMap(data: MapTileData, options: MapOptions): TemplateResult;
+export declare function renderMap(data: MapSpec, options: MapOptions): TemplateResult;

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

@@ -0,0 +1,26 @@
+/**
+ * The legend above the map: a line per layer — its name, which switches the layer; its key,
+ * what its figures mean; its series, each a switch; and the hatch where it has gaps. The key is
+ * the same drawing as the map's: the classes, the sizes or the widths of its marks.
+ */
+import { type TemplateResult } from 'lit';
+import { type MapDrawing } from './drawings.js';
+/** The lines a tile shows before the rest folds under "Nog n lagen". */
+export declare const LEGEND_ROWS = 3;
+export interface MapLegendOptions {
+    drawings: MapDrawing[];
+    /** The layers switched off, by their place in the stack. */
+    hiddenLayers: number[];
+    /** The series switched off, as `seriesKey()` names them. */
+    hiddenSeries: string[];
+    /** The modal: every layer, the classes with their bounds, the sizes nested at true size. */
+    expanded: boolean;
+    /** Below 768 px: one column, the series of a layer on their own line. */
+    mobile: boolean;
+    /** A tile's legend of more than `LEGEND_ROWS` layers is unfolded. */
+    open: boolean;
+    onLayer: (index: number) => void;
+    onSeries: (key: string) => void;
+    onOpen: (open: boolean) => void;
+}
+export declare function renderMapLegend(options: MapLegendOptions): TemplateResult;

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

@@ -0,0 +1,47 @@
+/**
+ * The data on the map, drawn by the design system itself into Leaflet's svg: the land, then every
+ * drawing in the host's order, the first at the bottom. Geometry is projected once, at the zoom
+ * the surface took as its reference; a pan or a zoom moves the group that holds it, so a mark
+ * with a pixel size (a point, the destination of the flows) is a `__symbol` the surface places
+ * and scales back by itself. Every event a mark answers stops at the mark: the map's own click
+ * clears the selection, and its double click zooms.
+ */
+import { nothing, type SVGTemplateResult } from 'lit';
+import type { ChartController } from '../shared/controller.js';
+import { type MapDrawing } from './drawings.js';
+import type { MapArea, MapSeriesKey, MapValue } from '../shared/types.js';
+/** Longitude and latitude to the surface's reference pixels. */
+export type Project = (lon: number, lat: number) => [number, number];
+/** A shape of the map's own geometry, as a path in reference pixels. */
+export interface LandShape {
+    id: string;
+    name: string;
+    d: string;
+}
+export declare const CLASSES: string[];
+export declare function classFor(value: number, max: number): number;
+/** What every mark draws with. */
+export interface MarksContext {
+    /** The controller's id, which names the hatch pattern. */
+    id: string;
+    active: string | null;
+    /** The marks a drawn area chose: outlined as a chosen mark is, the flows beside them muted. */
+    chosen: Set<string>;
+    controller: ChartController;
+    select: (value: MapValue) => void;
+    project: Project;
+    /** On a basemap the tiles are the land: only the areas with a row are drawn. */
+    tiled: boolean;
+    /** The series the legend switched off, as `seriesKey(drawing, series)`: not drawn. */
+    hidden: Set<string>;
+    /** The layers the legend switched off, by their place in the stack: drawn `is-off`, so they can go with a motion. */
+    hiddenLayers: Set<number>;
+}
+/** The radius of a point with a figure: between 3 and 18 px, by the square root of its share. */
+export declare function pointRadius(value: number, max: number): number;
+/** A series of one layer, as the legend switches it: a colour may serve several layers. */
+export declare const seriesKey: (drawing: MapDrawing, series: MapSeriesKey) => string;
+/** A drawn area, in the reference pixels; a circle with its middle. `draft` is the area while it is drawn. */
+export declare function renderRegion(area: MapArea | null, project: Project, draft?: boolean): SVGTemplateResult | typeof nothing;
+/** The whole drawing: the hatch, the land, then the drawings in order, each as one of three kinds. */
+export declare function renderData(land: LandShape[], drawings: MapDrawing[], context: MarksContext, area?: MapArea | null): SVGTemplateResult;

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

@@ -11,7 +11,7 @@ export interface Box {
 /** 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";
+export declare const OVERLAYS = ".lintje-map-chart__layers, .lintje-map-chart__zoom, .lintje-map-chart__selection, .lintje-map-chart__scale-bar, .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[];
 /**

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

@@ -0,0 +1,29 @@
+/**
+ * Scatter plot: two value axes, a point per record. A series is a colour and the shape that
+ * colour has on a map (rule 13); a point without both values is not drawn (rule 15).
+ */
+import { type TemplateResult } from 'lit';
+import { type PlotArea } from '../shared/scale.js';
+import { type ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type ScatterSpec = Extract<ChartSpec, {
+    kind: 'scatter';
+}>;
+interface DataLabel {
+    label: string;
+    x: number;
+    y: number;
+    anchor: 'start' | 'end';
+}
+/**
+ * The named points' labels, above-left of their point or above-right where the left has no
+ * room. A label must stay in the drawing, clear of the other labels and of every other point;
+ * when one cannot, none shows (all or nothing).
+ */
+export declare function placeDataLabels(points: {
+    label: string;
+    x: number;
+    y: number;
+}[], names: string[], area: PlotArea, fontFamily: string): DataLabel[];
+export declare function renderScatterChart(spec: ScatterSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -8,26 +8,41 @@ export type SvgSlot = SVGTemplateResult | typeof nothing | false | null | undefi
 export interface LegendItem {
     label: string;
     color?: string;
-    shape?: 'square' | 'line' | 'dashed';
+    /** `point`: the series' symbol alone, as a scatter plot or a map draws it; `hatch` is "no data". */
+    shape?: 'square' | 'line' | 'dashed' | 'point' | 'hatch';
     /** The shape the line carries at its end, drawn on its line marker (rule 13). */
     symbol?: SeriesKey;
     hidden?: boolean;
+    /** Not a series but a reference, such as a norm: never a toggle. */
+    fixed?: boolean;
+    /** What `onToggle` receives; without it the label. */
+    key?: string;
 }
+/**
+ * A series' symbol as a scatter plot draws it, for a marker: its shape in `currentColor`, and a
+ * dark-yellow one with the edge of its text colour (`lineCasing`).
+ */
+export declare function renderSymbol(symbol: SeriesKey, color: string | undefined, centre: number): SVGTemplateResult;
 export declare function renderLegend({ items, onToggle, position, }: {
     items: LegendItem[];
     onToggle?: (label: string) => void;
     position?: 'top' | 'bottom' | 'right';
 }): TemplateResult;
+type XAnchor = 'start' | 'middle' | 'end';
 export interface ChartFrameOptions {
     area?: PlotArea;
     ticks: number[];
     max: number;
     /** Unit above the axis, e.g. "Afgehandelde aanvragen". */
     axisTitle?: string;
+    /** `anchor` defaults to the middle; the last label of a value axis ends at the plot's edge. */
     xLabels?: {
         label: string;
         x: number;
+        anchor?: XAnchor;
     }[];
+    /** The title of a value axis along the bottom, under its labels at the right. */
+    xTitle?: string;
     /** Description for screen readers; replaces the chart in the accessibility tree. */
     description: string;
     height?: number;
@@ -57,14 +72,15 @@ export declare function renderFocusRing(id: string): SVGTemplateResult;
 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.
+ * third, … from the first on. Neighbours are measured pair by pair, each where its anchor puts
+ * it, 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;
+    anchor?: XAnchor;
 }>(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;
+export declare function renderChartFrame({ area, ticks, max, axisTitle, xLabels, xTitle, 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.
@@ -77,3 +93,4 @@ export declare function renderAsOfMarker({ area, index, count, label, lastValue,
     lastValue?: string;
     pendingHours: number;
 }): SvgSlot;
+export {};

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

@@ -5,7 +5,7 @@
  */
 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;
+export declare function chartIcon(name: string, text: string, size?: number, flip?: 'horizontal' | 'vertical'): 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';
@@ -19,7 +19,8 @@ export declare const ZOOM_CONTROLS: readonly [{
     readonly label: 'Uitzoomen';
 }, {
     readonly action: 'home';
-    readonly name: 'functioneel-home';
+    readonly name: 'functioneel-refresh';
+    readonly flip: 'horizontal';
     readonly text: 'Terug';
-    readonly label: 'Terug naar het hele gebied';
+    readonly label: 'Kaart terugzetten';
 }];

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

@@ -1,27 +1,16 @@
 /**
- * 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`.
+ * The loading skeleton in the shape of the chart. Empty and error are the tile's: it draws them
+ * with the shared blocks. The skeleton writes the markup of `lintje-skeleton`, not its CSS.
  */
 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.
+ * Loading skeleton in the shape of the chart, exactly `height` tall so the tile keeps its size.
+ * Inside a tile's `loading` slot the tile's region speaks (`status: false`); on its own it is
+ * the region, in words.
  */
-export declare function renderChartError({ message, lastKnown, height, announcement, }: {
-    message: unknown;
-    lastKnown?: unknown;
+export declare function renderChartSkeleton({ kind, height, status, }?: {
+    kind?: ChartSkeletonKind;
     height?: string;
-    /** The host's own announcement; without one, `liveAnnouncement`. */
-    announcement?: (message: unknown) => TemplateResult;
+    status?: boolean;
 }): TemplateResult;

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

@@ -1,6 +1,8 @@
 import { type PlotArea } from './scale.js';
 import type { LeafletSurface } from '../map-chart/leaflet.js';
 import type { ChartSelection } from './mark-select.js';
+import type { SeriesKey } from './series-shapes.js';
+import type { MapArea, MapTool } from './types.js';
 /** What every `render*` takes besides its data. */
 export interface ChartOptions {
     /** The state this chart keeps between renders. One per chart. */
@@ -27,11 +29,21 @@ export declare function chartArea(options: ChartOptions, margins?: Partial<PlotA
 export interface TooltipRow {
     label: string;
     value: string;
-    color: string;
+    /** The swatch; a row without one is a plain figure. */
+    color?: string;
+    /** A line above the row, which sums up the rows before it: a total. */
+    divider?: boolean;
+    /** The series' shape instead of a square swatch, as its legend draws it. */
+    symbol?: SeriesKey;
 }
 export interface TooltipContent {
     title: string;
     rows: TooltipRow[];
+    /** The events at this category, under the values: their number and text. */
+    events?: {
+        number: number;
+        label: string;
+    }[];
 }
 export interface TooltipState {
     x: number;
@@ -59,27 +71,32 @@ export declare class ChartController {
     /** What the keyboard's tooltip says, for the chart's status region; empty otherwise. */
     status: string;
     hiddenSeries: string[];
+    /** The layers of a stacked map switched off in its legend, by their place in the stack. */
+    hiddenLayers: number[];
     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;
+    /** What a wheel without its modifier shows, until its timer clears it. */
+    mapHint: string | null;
+    mapHintTimer: ReturnType<typeof setTimeout> | null;
     mapSelection: string | null;
+    /** The drawing tool that is on: a pointer on the map then draws instead of panning. */
+    mapTool: MapTool | null;
+    /** The tool the map's one select button shows: the last one used, until a shape is chosen. */
+    mapLastTool: MapTool | null;
+    /** The menu of tools stands open, and which row takes the focus once it has drawn. */
+    mapMenuOpen: boolean;
+    mapMenuFocus: 'first' | 'last' | 'checked' | null;
+    /** A legend of more than three layers is unfolded. */
+    mapLegendOpen: boolean;
+    /** The area that chose marks, and the last one the host sent, compared as JSON. */
+    mapArea: MapArea | null;
+    hostArea: string | undefined;
     hostSelection: string | null | undefined;
-    legendOpen: boolean | null;
-    /** The Leaflet map, created lazily when the data carries a basemap; `detach()` destroys it. */
+    /** The map's surface, created on the first render; `detach()` destroys it. */
     leaflet: LeafletSurface | null;
     /** Centre and zoom of the Leaflet map. `detach()` keeps it so a re-attach does not reset. */
     leafletView: {
@@ -88,7 +105,8 @@ export declare class ChartController {
         zoom: number;
     } | null;
     private readonly notify;
-    private element;
+    /** The chart's box, once attached; the map finds its own buttons in it. */
+    element: HTMLElement | null;
     private measuring;
     private resizeObserver;
     private intersectionObserver;
@@ -128,6 +146,7 @@ export declare class ChartController {
     private watching;
     private watchEscape;
     private unwatchEscape;
+    toggleLayer(index: number): void;
     toggleSeries(label: string): void;
     private read;
     /**