lintje 0.2.0 → 0.4.0

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

@@ -0,0 +1,49 @@
+/**
+ * `<lintje-dialog>` — the small window: a question that needs an answer, or a short form. The
+ * large window for content is `<lintje-modal>`.
+ *
+ * The host holds `open` and puts its own buttons in `actions`: Escape, the close button and the
+ * scrim only ask. Focus goes to the slotted element with `autofocus`, else the first field; an
+ * alert without one takes it itself, so Enter never confirms. Below 768 px the buttons stack
+ * with the last on top: put the safe one first.
+ *
+ * Events: `lintje-close` `{ reason: 'escape' | 'scrim' | 'button' }`.
+ */
+import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+export type DialogCloseReason = 'escape' | 'scrim' | 'button';
+export declare class LintjeDialog 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 or the task, and the dialog's accessible name. */
+    heading: string;
+    /** A question that needs an answer: an `alertdialog`, without a close button. */
+    alert: boolean;
+    /** Escape and the scrim ask nothing, for a question that must be answered. */
+    persistent: boolean;
+    /** As wide as a short form reads, instead of a question. */
+    wide: boolean;
+    /**
+     * The answer is under way: nothing asks to close, the last primary or danger button in
+     * `actions` turns busy and the others disabled.
+     */
+    busy: boolean;
+    protected footerSlotted: boolean;
+    private ask;
+    private get frame();
+    private get buttons();
+    /** Read once on opening, before the slots exist to report; `slotchange` keeps it current. */
+    protected willUpdate(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private onSlotChange;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-dialog': LintjeDialog;
+    }
+}

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

@@ -1,10 +1,8 @@
 /**
  * `<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.
+ * The host holds `open`: Escape, the close button and the scrim only ask. While `busy` none
+ * of them asks. Focus goes to the first field, else the close button.
  *
  * Events: `lintje-close` `{ reason: 'escape' | 'button' | 'scrim' }`.
  */
@@ -15,7 +13,10 @@ 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. */
+    /**
+     * The host's: the drawer only asks to be closed. Whether unsaved input needs confirming first
+     * is the host's call.
+     */
     open: boolean;
     /** The title and the dialog's accessible name; without it the dialog is "Zijpaneel". */
     heading: string;

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

@@ -1,33 +1,28 @@
 /**
- * `<lintje-modal>` — the expand modal: title, subtitle, slotted content, a footer.
+ * `<lintje-modal>` — the large window for content: a title, the content and a footer. A question
+ * or a short form goes in the small `<lintje-dialog>`.
  *
- * 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.
+ * The host holds `open`: Escape, the close button and the scrim only ask. It is `position: fixed`
+ * above the app frame, so no ancestor may carry a `transform`, `filter` or `contain`.
  *
- * `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`.
+ * Events: `lintje-close`, `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';
+import '../../actions/button/button.js';
+import '../../actions/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. */
+    /** The dialog's accessible name and its title line; without it the dialog is "Venster". */
     heading: string;
     subtitle?: string;
-    /** The footer's CSV and PNG buttons. Default `true`: bind as a property, `.csv=${false}`. */
+    /** The footer's CSV and PNG buttons, for content that can be downloaded. */
     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;

package/dist-elements/types/{primitives → components/overlays}/popover/popover.d.ts

@@ -1,13 +1,14 @@
 /**
- * `<lintje-popover>` — the floating panel: a surface fixed to the viewport under its anchor
- * (`.anchor`, or the previous sibling). Content and padding come through the slot.
+ * `<lintje-popover>` — the floating panel: a surface fixed to the viewport under its anchor.
  *
- * The owner holds `open`: the popover only asks to be closed. Events: `lintje-close`
- * `{ reason: 'escape' | 'outside' }`; a component drawing a popover in its own root stops it.
+ * Content and padding come through the slot. The host holds `open`: the popover only asks to be
+ * closed. A component that draws a popover in its own root stops its `lintje-close`.
+ *
+ * Events: `lintje-close` `{ reason: 'escape' | 'outside' }`.
  */
 import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import { LintjeElement } from '../../core/element.js';
-import { type Place, type Placement } from '../shared/place.js';
+import { LintjeElement } from '../../../core/element.js';
+import { type Place, type Placement } from '../../shared/place.js';
 export declare class LintjePopover extends LintjeElement {
     static styles: import("lit").CSSResult;
     static properties: PropertyDeclarations;

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

@@ -1,18 +1,14 @@
 /**
  * `<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.
+ * Escape closes it and stops there, so a modal or sheet around it stays open. The explanation is
+ * fixed to the viewport, so a scrolling tile cannot cut it off.
  *
- * Events: `lintje-toggle` (composed, bubbling), detail `{ open }`.
+ * Events: `lintje-toggle` `{ open }`.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import { type Place } from '../../../primitives/shared/place.js';
+import { type Place } from '../../shared/place.js';
 export type ToggletipPlacement = 'bottom-start' | 'bottom-end';
 export declare class LintjeToggletip extends LintjeElement {
     static styles: import("lit").CSSResult[];

package/dist-elements/types/{primitives → components/overlays}/tooltip/tooltip.d.ts

@@ -1,13 +1,13 @@
 /**
- * `<lintje-tooltip>` — one short sentence about the element it wraps. Shows 300 ms after the
- * pointer rests, at once on keyboard focus; the pointer can move onto it, and Escape anywhere
- * hides it. Never the only place for something
- * the reader must know. The text is the wrapped element's description; `no-describe` leaves
- * that out when it is already its name.
+ * `<lintje-tooltip>` — one short sentence about the element it wraps.
+ *
+ * It shows 300 ms after the pointer rests and at once on keyboard focus; Escape anywhere hides it.
+ * Never the only place for something the reader must know. The text becomes the wrapped element's
+ * description.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import { LintjeElement } from '../../core/element.js';
-import { type Place } from '../shared/place.js';
+import { LintjeElement } from '../../../core/element.js';
+import { type Place } from '../../shared/place.js';
 export declare const TOOLTIP_DELAY = 300;
 /** How long the bubble waits after the pointer leaves: time to cross the gap onto it. */
 export declare const TOOLTIP_LINGER = 150;
@@ -16,7 +16,7 @@ export declare class LintjeTooltip extends LintjeElement {
     static styles: import("lit").CSSResult;
     static properties: PropertyDeclarations;
     text: string;
-    /** The text is already the element's accessible name. */
+    /** The text is already the element's accessible name: it is not given as its description too. */
     noDescribe: boolean;
     /** Above the element, or `left` of it, level with it: for a column of buttons along an edge. */
     placement: 'top' | 'left';

package/dist-elements/types/components/shared/announcement-block.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The announcement as a render function, so a tile draws its error with the same block as
+ * `<lintje-announcement>` draws itself. The element adds dismissal and focus; a tile adds
+ * nothing. A live block is drawn empty until `filled`: a region that arrives with its words is
+ * not announced.
+ */
+import { nothing, type CSSResult, type TemplateResult } from 'lit';
+import { type Tone } from './tone.js';
+/** `outage` interrupts and cannot be closed; `error` is a failure the reader may put away. */
+export type AnnouncementKind = 'warning' | 'outage' | 'error' | 'info' | 'ok';
+/** A message's kind in the one tone set: a warning is drawn in the attention tone. */
+export declare const ANNOUNCEMENT_TONE: Record<AnnouncementKind, Tone>;
+/** Only an outage interrupts the reader; the others wait their turn. */
+export declare const ANNOUNCEMENT_ROLE: Record<AnnouncementKind, 'alert' | 'status'>;
+/** The word a screen reader hears before the text, since the tint says nothing to it. */
+export declare const ANNOUNCEMENT_PREFIX: Record<AnnouncementKind, string>;
+export declare const announcementBlockStyles: CSSResult;
+export interface AnnouncementBlockOptions {
+    kind?: AnnouncementKind;
+    title?: string;
+    text?: string;
+    meta?: string;
+    link?: {
+        label: string;
+        href: string;
+    };
+    /** A live region: `role` from the kind, drawn empty until `filled`. */
+    live?: boolean;
+    /** Whether a live block shows its words yet; ignored when not live. */
+    filled?: boolean;
+    /** What stands under or beside the text: the element's `action` slot. */
+    action?: TemplateResult | typeof nothing;
+    /** What stands beside the body: the element's `media` slot. */
+    media?: TemplateResult | typeof nothing;
+    /** With a handler the block draws its close button. */
+    onClose?: () => void;
+}
+export declare function renderAnnouncementBlock(options: AnnouncementBlockOptions): TemplateResult;

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

@@ -3,15 +3,19 @@
  * `renderMap` a map. See README.md for the contract.
  */
 export { renderChart } from './shared/render-chart.js';
+export { CHART_KINDS, CHART_QUESTIONS } from './kinds.js';
+export type { ChartKindGuide, ChartQuestion } from './kinds.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 { renderStackedAreaChart } from './stacked-area-chart/stacked-area-chart.js';
 export { renderPieChart } from './pie-chart/pie-chart.js';
 export { renderDualAxisChart } from './dual-axis-chart/dual-axis-chart.js';
 export { renderScatterChart } from './scatter-chart/scatter-chart.js';
+export { renderRadarChart } from './radar-chart/radar-chart.js';
 export { renderHeatmap, heatmapBounds, heatmapClasses } from './heatmap-chart/heatmap-chart.js';
 export type { HeatmapClass } from './heatmap-chart/heatmap-chart.js';
 export { renderHistogramChart } from './histogram-chart/histogram-chart.js';
@@ -20,7 +24,7 @@ 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 { renderChartSkeleton } 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';

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

@@ -0,0 +1,92 @@
+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 radar: {
+        readonly label: 'Spinnendiagram';
+        readonly question: 'compare';
+        readonly use: 'Het profiel van één tot drie eenheden over vijf tot acht maten op één schaal, tegen een vergelijking in grijs of een norm.';
+        readonly avoid: 'Maten met elk een eigen eenheid, of meer dan drie eenheden: neem horizontale staven of een tabel. Precies aflezen: 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/leaflet.d.ts

@@ -59,6 +59,11 @@ export declare class LeafletSurface {
         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

@@ -6,7 +6,7 @@
 import { type TemplateResult } from 'lit';
 import type { ChartOptions } from '../shared/controller.js';
 import type { MapArea, MapSpec, MapValue } from '../shared/types.js';
-import '../../../../primitives/popover/popover.js';
+import '../../../overlays/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;

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

@@ -0,0 +1,31 @@
+/**
+ * Radar chart: the profile of one to three variables over five to eight axes that share one
+ * scale, from 0 in the centre to `max` on the outer ring, with a grey comparison and a norm.
+ * Dashed is the norm only: a dashed comparison over it would read as a second norm.
+ * Overlapping areas mix into a colour no variable has, so of more layers only the one the
+ * reader points at in the legend fills. Below 768 px each axis becomes a row of bars (rule 9).
+ */
+import { type TemplateResult } from 'lit';
+import type { ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type RadarSpec = Extract<ChartSpec, {
+    kind: 'radar';
+}>;
+/**
+ * The runs of known values around the circle, as axis indices. Without a gap the one run closes
+ * on itself; a gap breaks the line there, as nothing is known to bridge it (rule 15).
+ */
+export declare function radarRuns(values: (number | null)[]): {
+    closed: boolean;
+    runs: number[][];
+};
+/** The rings: every `step` up to `max`, and `max` itself as the outer one. */
+export declare function radarTicks(max: number, step?: number): number[];
+/** Which layers fill: one alone does; of more, the emphasised one (`emphasis`), all or none. */
+export declare function radarFills(spec: Pick<RadarSpec, 'area'>, shown: {
+    label: string;
+    comparison: boolean;
+    complete: boolean;
+}[], emphasis: string | null): Set<string>;
+export declare function renderRadarChart(spec: RadarSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -23,9 +23,11 @@ export interface LegendItem {
  * 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, }: {
+export declare function renderLegend({ items, onToggle, onEmphasis, position, }: {
     items: LegendItem[];
     onToggle?: (label: string) => void;
+    /** A series pointed at or focused, and `null` once it is left. */
+    onEmphasis?: (label: string | null) => void;
     position?: 'top' | 'bottom' | 'right';
 }): TemplateResult;
 type XAnchor = 'start' | 'middle' | 'end';

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

@@ -31,12 +31,21 @@ export interface TooltipRow {
     value: 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;
+    /** A line instead of a square swatch, plain or dashed (a norm), as its legend draws it. */
+    marker?: 'line' | 'dashed';
 }
 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;
@@ -64,6 +73,8 @@ export declare class ChartController {
     /** What the keyboard's tooltip says, for the chart's status region; empty otherwise. */
     status: string;
     hiddenSeries: string[];
+    /** The series the reader points at or focuses in the legend; `null` for none. */
+    emphasis: string | null;
     /** The layers of a stacked map switched off in its legend, by their place in the stack. */
     hiddenLayers: number[];
     hoverSegment: number | null;
@@ -140,6 +151,7 @@ export declare class ChartController {
     private watchEscape;
     private unwatchEscape;
     toggleLayer(index: number): void;
+    emphasise(label: string | null): void;
     toggleSeries(label: string): void;
     private read;
     /**

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

@@ -21,6 +21,17 @@ export interface LineSeriesData {
     comparison?: boolean;
     area?: boolean;
 }
+/**
+ * Something that happened at a category. The chart numbers its events 1, 2, … from left to
+ * right, in the host's order within one category; one whose `index` is not in `labels` is left
+ * out and takes no number.
+ */
+export interface ChartEvent {
+    /** Index into `labels`: the category it happened at. */
+    index: number;
+    /** What happened, in a few words; listed under the chart and shown in the tooltip. */
+    label: string;
+}
 export interface BarSeriesData {
     label: string;
     values: number[];
@@ -59,6 +70,8 @@ export type ChartSpec = {
     pendingHours?: number;
     fixedMax?: number;
     small?: boolean;
+    /** Events: a numbered square above their category, listed with their text under the chart. */
+    events?: ChartEvent[];
 } | {
     kind: 'bar';
     labels: string[];
@@ -105,6 +118,22 @@ export type ChartSpec = {
     normalized?: boolean;
     totalOnTop?: boolean;
     small?: boolean;
+} | {
+    kind: 'stacked-area';
+    labels: string[];
+    /**
+     * The parts of one variable, the first at the bottom. A `null` in any part breaks the whole
+     * stack at that point: no area bridges it and the period is hatched (rule 15).
+     */
+    series: {
+        label: string;
+        values: (number | null)[];
+    }[];
+    /** The variable the stack divides: its parts take this colour's tints. Default sky blue. */
+    color?: ChartColor;
+    axisTitle?: string;
+    unit?: string;
+    small?: boolean;
 } | {
     kind: 'pie';
     segments: {
@@ -209,7 +238,40 @@ export type ChartSpec = {
     /** The text beside the threshold line; default "norm" with its value and unit. */
     thresholdLabel?: string;
     small?: boolean;
+} | {
+    kind: 'radar';
+    /** The axes' names, five to eight, clockwise from the top. All share one scale. */
+    axes: string[];
+    /** The layers: at most three variables and one comparison. */
+    series: RadarSeriesData[];
+    /** The outer ring. The scale starts at 0 in the centre: the area carries the value. */
+    max: number;
+    /** The distance between the rings; without it five rings. */
+    step?: number;
+    unit?: string;
+    /** A norm on every axis: a dashed polygon in the emphasis colour. */
+    threshold?: number;
+    thresholdLabel?: string;
+    /**
+     * Which layer fills. `emphasis` (the default): one layer always does, of more only the
+     * one the reader points at in the legend, as overlapping areas mix into a colour no
+     * variable has. `always` fills every layer, `never` none.
+     */
+    area?: 'emphasis' | 'always' | 'never';
+    /** The value under each axis name; with one layer only (all or nothing). Default true. */
+    dataLabels?: boolean;
+    small?: boolean;
 };
+/**
+ * A layer of a radar chart: one value per axis, `null` for no data (rule 15). Without a colour
+ * the layers take the data colours in their order; a comparison is grey and dashed.
+ */
+export interface RadarSeriesData {
+    label: string;
+    values: (number | null)[];
+    color?: ChartColor;
+    comparison?: boolean;
+}
 export type ChartKind = ChartSpec['kind'];
 /**
  * What a map draws. `polygons` are areas that carry their own outline (`MapValue.polygon`);

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

@@ -0,0 +1,13 @@
+/**
+ * Stacked areas: the parts of one variable in its tints, the first at the bottom and darkest. A
+ * missing value breaks its part and every part above it; the parts below stay, and the rest of
+ * the column is hatched (rule 15). A part switched off shrinks out and the parts above settle.
+ */
+import { type TemplateResult } from 'lit';
+import { type ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type StackedAreaSpec = Extract<ChartSpec, {
+    kind: 'stacked-area';
+}>;
+export declare function renderStackedAreaChart(spec: StackedAreaSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -4,7 +4,7 @@
  * 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 { LintjeGridItemElement } from './grid-item-element.js';
 import '../overlays/modal/modal.js';
 export interface ExpandModalOptions {
     heading?: string;