lintje 0.2.0 → 0.3.0

package/dist-elements/types/components/inputs/textarea/textarea.d.ts

@@ -1,15 +1,13 @@
 /**
- * `<lintje-textarea>` — the multi-line text field: three to twelve lines (`rows` sets the least),
- * with a counter when there is a `maxlength`. `variant="plain"` drops the field's box and its
- * focus ring, takes the type of where it stands and fills its height, for a surface that frames
- * the text and draws the ring itself (`lintje-translator`). Typing past the limit is allowed (a paste lands whole); the field
- * shows the error, alerted once as the text crosses the limit. The counter is read out from 90 %
- * of the limit on.
+ * `<lintje-textarea>` — the multi-line text field: three to twelve lines, with a counter when
+ * there is a `maxlength`.
  *
- * The counter is `part="counter"`, so a surface can stand it on its own line.
+ * It commits like `lintje-text-input`; Ctrl+Enter commits and submits a host's form. Typing past
+ * the limit is allowed, so a paste lands whole: the field shows the error. The counter is
+ * `part="counter"`, so a surface can stand it on its own line.
  *
- * Commits like `lintje-text-input`; Ctrl+Enter commits and submits a host's form.
- * Events: `lintje-change`, and `lintje-values-change` with a `name`.
+ * Events: `lintje-change` `string`, `lintje-values-change` `{ [name]: value }` (with a `name`),
+ * `lintje-reset` (the reset link was pressed).
  */
 import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeFormInputElement } from '../shared/input.js';
@@ -24,14 +22,17 @@ export declare class LintjeTextarea extends LintjeFormInputElement {
     static properties: PropertyDeclarations;
     value: string;
     placeholder: string;
-    /** The limit the counter counts to. */
+    /** The limit the counter counts to; the counter is read out from 90 % of it on. */
     maxlength?: number;
     /** The attribute `commit`; `commit()` is the method every input commits through. */
     commitOn: CommitOn;
     stacked: boolean;
     /** The least number of lines the field shows. */
     rows: number;
-    /** `field` (default): the bordered field; `plain`: no box, the type of where it stands. */
+    /**
+     * `field` (default): the bordered field. `plain`: no box and no focus ring, the type of where it
+     * stands and the full height, for a surface that frames the text and draws the ring itself.
+     */
     variant: TextareaVariant;
     private readonly typing;
     private get counterId();

package/dist-elements/types/components/inputs/time-input/time-input.d.ts

@@ -1,13 +1,12 @@
 /**
- * `<lintje-time-input>` — a time of day, `HH:MM` on a 24-hour clock, or `null` when empty, typed
- * or picked from a list. Typed text is read on leaving the field or Enter (`time-format.ts`).
- * The list holds the times from `min` to `max`, `step` minutes apart; a typed value between two
- * of them stays as typed, and the list opens on the first time at or after it without selecting
- * one. The element checks its own text and shows a message in place of the hint; a host's
- * `error` wins. It knows no day or time zone. Tab out of the element closes the list, so it does
- * not cover the next field.
+ * `<lintje-time-input>` — a time of day, `HH:MM` on a 24-hour clock, typed or picked from a list.
  *
- * Events: `lintje-change` with `HH:MM` or `null`; with a `name` also `lintje-values-change`.
+ * The element reads typed text on leaving the field or Enter, checks it and shows a message in
+ * place of the hint; a host's `error` wins. A typed time between two in the list stays as typed.
+ * It knows no day or time zone. Tab out of the element closes the list.
+ *
+ * Events: `lintje-change` `string | null` (`HH:MM`), `lintje-values-change` `{ [name]: value }`
+ * (with a `name`), `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeInputElement } from '../shared/input.js';

package/dist-elements/types/components/inputs/toggle/toggle.d.ts

@@ -1,8 +1,10 @@
 /**
  * `<lintje-toggle>` — a switch for immediate effect: it commits when switched, never in a form.
+ *
  * A value that waits for a button is a checkbox.
  *
- * Events: `lintje-change`; with a `name` also the composed `lintje-values-change`.
+ * Events: `lintje-change` `boolean`, `lintje-values-change` `{ [name]: value }` (with a `name`),
+ * `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeInputElement } from '../shared/input.js';

package/dist-elements/types/components/layout/expander/expander.d.ts

@@ -1,15 +1,11 @@
 /**
  * `<lintje-expander>` — a title you press; what is slotted under it shows or hides.
  *
- * Shares its disclosure (`shared/disclosure.ts`) with `lintje-explainer` (rule 2). Closed, the
- * content stays in the DOM, out of the tab order and the accessibility tree. What is slotted in
- * `actions` stands beside the title, outside its button: a few icon buttons about the content.
- * `leading` puts the chevron before the title and the content in line with the title's text, for
- * a stack of expanders that read as rows. `columns` sets the title in a column of its own
- * (`--lintje-expander-label`) with the content beside it, as rows of text do beside their speaker;
- * a narrow expander stacks them again.
+ * Closed, the content stays in the DOM, out of the tab order and the accessibility tree. What is
+ * slotted in `actions` stands beside the title, outside its button: a few icon buttons about the
+ * content.
  *
- * Events: `lintje-toggle` (open, after the reader pressed the title).
+ * Events: `lintje-toggle` `boolean` (open, after the reader pressed the title).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
@@ -24,9 +20,12 @@ export declare class LintjeExpander extends LintjeGridItemElement {
     open: boolean;
     /** No surface of its own: an expander inside a tile is not a second card. */
     flat: boolean;
-    /** The chevron before the title, the content under the title's text. */
+    /** The chevron before the title, the content under the title's text: expanders read as rows. */
     leading: boolean;
-    /** The title in a column of its own, the content beside it. */
+    /**
+     * The title in a column of its own (`--lintje-expander-label`), the content beside it, as rows
+     * of text beside their speaker; a narrow expander stacks them again.
+     */
     columns: boolean;
     protected updated(changed: PropertyValues<this>): void;
     protected render(): TemplateResult;

package/dist-elements/types/components/layout/split-pane/split-pane.d.ts

@@ -1,13 +1,12 @@
 /**
  * `<lintje-split-pane>` — two panels side by side with a split the reader moves.
  *
- * Without dragging (WCAG 2.5.7): a click on the strip lifts the split, and the next click places
- * it where it lands; Escape or a click outside puts it back. A double click returns to 50/50.
+ * It moves without dragging too: a click on the strip lifts the split and the next click places
+ * it; Escape or a click outside puts it back, a double click returns to 50/50. Below 768 px there
+ * are never two panels: a segmented control chooses which one shows.
  *
- * Below 768 px there are never two panels: a `<lintje-segmented>` chooses which one shows. That
- * choice is `pane`; a host that keeps it in the URL sets `pane` back.
- *
- * Events: `lintje-split-change` (the percentage), `lintje-pane-change` (`'start'` | `'end'`).
+ * Events: `lintje-split-change` `number` (the percentage), `lintje-pane-change`
+ * `'start' | 'end'`.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
@@ -31,6 +30,7 @@ export declare class LintjeSplitPane extends LintjeElement {
     /** The two panels' names, for the phone's choice. */
     startLabel: string;
     endLabel: string;
+    /** The panel shown below 768 px; a host that keeps it in the URL sets it back. */
     pane: SplitPaneSide;
     protected dragging: boolean;
     protected willUpdate(changed: PropertyValues<this>): void;

package/dist-elements/types/components/layout/tabs/tabs.d.ts

@@ -1,13 +1,12 @@
 /**
- * `<lintje-tabs>` — switches between panels slotted under each tab's `value`. The host holds
- * `value`; the tabs only ask. A modified click on a link tab is the browser's.
- * The row is one tab stop: arrows choose at once, and a disabled tab is reached but not chosen.
- * `variant="panel"` draws large tabs that head a panel: each with an icon and a hint, the chosen
- * one running into the panel below; on a phone the icon stands above the label and the hint goes.
- * When every tab is a link, the row is a `<nav>` of links, the chosen one `aria-current="page"`,
- * with the same look: pages are no tabs, and the content under it is the page's, not a tabpanel.
+ * `<lintje-tabs>` — switches between panels slotted under each tab's `value`.
  *
- * Events: `lintje-tab-change` (the value), `lintje-navigate` `{ href }` for a tab with an `href`.
+ * The host holds `value`: the tabs only ask. The row is one tab stop; arrows choose at once. When
+ * every tab is a link, the row is a `<nav>` of links with the same look, and the content under it
+ * is the page's, not a tab panel.
+ *
+ * Events: `lintje-tab-change` `string` (the value), `lintje-navigate` `{ href }` (a tab with an
+ * `href`).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
@@ -40,7 +39,10 @@ export declare class LintjeTabs extends LintjeElement {
     /** The chosen tab's value; the first tab when unset. */
     value?: string;
     label: string;
-    /** `line` (default): a row over the content; `panel`: large tabs that head a bordered panel. */
+    /**
+     * `line` (default): a row over the content. `panel`: large tabs that head a bordered panel, each
+     * with an icon and a hint; on a phone the icon stands above the label and the hint goes.
+     */
     variant: TabsVariant;
     protected edges: {
         start: boolean;

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

@@ -1,15 +1,14 @@
 /**
- * `<lintje-map>` — a map in its tile. The map shows a new layer at once and expects the host
- * to confirm it in the next `data`. `tile.expandable` shows the same map again in the modal; the
- * modal's own events stop here.
+ * `<lintje-map>` — a map in its tile.
  *
- * Events: `lintje-mark-select` `{id, label, href?}` (`href` is the one the server minted on that
- * mark) and `lintje-layer-change` (the chosen layer's `value`). Undoing a selection is
- * `lintje-mark-select` with `id: null` and `data.clearHref`, so a page that keeps the selection
- * in the URL can drop it. With `data.controls.lasso`, `.circle` or `.rect` a drawn area chooses
- * every mark in it — two or more tools share one button that opens their menu:
- * `lintje-area-select` `{area, ids}`, and `{area: null, ids: []}` when it is undone; the host
+ * A new layer shows at once and expects the host to confirm it in the next `data`. With
+ * `tile.expandable` the same map shows again in the modal, whose own events stop here. With
+ * `data.controls.lasso`, `.circle` or `.rect` a drawn area chooses every mark in it; the host
  * keeps the area in its URL and sends it back as `selectedArea`.
+ *
+ * Events: `lintje-mark-select` `{ id, label, href? }` (deselected, `id: null` and
+ * `href: data.clearHref`), `lintje-layer-change` `string` (the chosen layer's value),
+ * `lintje-area-select` `{ area, ids }` (undone, `{ area: null, ids: [] }`).
  */
 import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { type FrameSettings } from '../../../core/element.js';
@@ -26,12 +25,14 @@ export declare class LintjeMap extends LintjeContentTileElement {
     /** The chosen layer, shown before the host confirms it. */
     layer?: string;
     protected get dataSettings(): FrameSettings | undefined;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected expandChanged(open: boolean): void;
     protected willUpdate(changed: PropertyValues<this>): void;
     private png;
     private csv;
     protected render(): TemplateResult | typeof nothing;
+    /** The map, or its skeleton for the tile's `loading` slot; empty and error are the tile's. */
     private content;
     /** Refocuses the chosen mark so clearing does not drop a keyboard user at the top; the map area
      * takes the focus when the mark is gone after a redraw. */

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,14 +1,11 @@
 /**
- * `<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';
@@ -20,14 +17,12 @@ export declare class LintjeModal extends LintjeElement {
     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/components/overlays/toggletip/toggletip.d.ts

@@ -1,14 +1,10 @@
 /**
  * `<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';

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

@@ -3,12 +3,15 @@
  * `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';
@@ -20,7 +23,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,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/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/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,19 @@ 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;
 }
 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;

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: {

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/dialog.d.ts

@@ -0,0 +1,9 @@
+export declare class DialogHold {
+    #private;
+    constructor(onEscape: () => void);
+    get held(): boolean;
+    isTopmost(): boolean;
+    /** The focus stays where it is: the window moves it once its content has drawn. */
+    hold(container: HTMLElement): void;
+    release(): void;
+}