lintje 0.1.1 → 0.3.0

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

@@ -1,9 +1,11 @@
 /**
  * `<lintje-select>` — a select, bold once the value differs from the default.
- * The filter bar passes no `name` and sets `hide-label`. The width is the host's, not inline,
- * so `filter-layout.css` can narrow it from outside.
  *
- * Events: `lintje-change`; with a `name` also the composed `lintje-values-change`.
+ * In a filter bar it is `hide-label` and nameless. Its width is the host's, so the filter layout
+ * can narrow it from outside.
+ *
+ * Events: `lintje-change` `string`, `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';
@@ -12,6 +14,7 @@ export declare class LintjeSelect extends LintjeInputElement {
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
     value: string;
+    /** Bold the value, as a modified filter does. */
     bold: boolean;
     stacked: boolean;
     options?: FilterOption[];

package/dist-elements/types/components/inputs/slot-picker/slot-picker.d.ts

@@ -0,0 +1,42 @@
+/**
+ * `<lintje-slot-picker>` — a time for an appointment: days side by side, each with its times as
+ * options.
+ *
+ * The days are the host's: it sends the ones it offers, and pages them itself. One radio group
+ * spans every day, so Tab stops once. A full time stays, disabled, with the word "Vol" beside it.
+ *
+ * Events: `lintje-change` `string` (the chosen time's `value`), `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';
+export interface TimeSlot {
+    /** What crosses in `lintje-change`: an id, or an ISO date-time. */
+    value: string;
+    /** The time as the reader sees it: "09:30". */
+    label: string;
+    /** Taken: drawn disabled, with "Vol" beside the time. */
+    full?: boolean;
+}
+export interface SlotDay {
+    /** The day as ISO (`2026-10-12`); the heading and each time's name come from it. */
+    date: string;
+    /** In the order they are drawn; `[]` says "Geen tijden". */
+    slots: TimeSlot[];
+}
+export declare class LintjeSlotPicker extends LintjeInputElement {
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    /** The chosen time's `value`; `''` while nothing is chosen. */
+    value: string;
+    days?: SlotDay[];
+    private choose;
+    protected render(): TemplateResult;
+    private renderDay;
+    private renderSlot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-slot-picker': LintjeSlotPicker;
+    }
+}

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

@@ -1,10 +1,12 @@
 /**
- * `<lintje-tag-input>` — free keywords as chips in one field. Enter, a comma, a paste with commas
- * or leaving the field makes chips; a duplicate lights up its chip and is said instead of being
- * added. With `.options` it also suggests options, and still takes a word that is not among them.
- * A chip's cross is its one control: the arrows walk the crosses, Backspace and Delete remove.
+ * `<lintje-tag-input>` — free keywords as chips in one field.
  *
- * Events: `lintje-change`; with a `name` also the composed `lintje-values-change`.
+ * Enter, a comma, a paste with commas or leaving the field makes chips; a duplicate is pointed out
+ * instead of added. With `options` it also suggests, and still takes a word that is not among
+ * them.
+ *
+ * Events: `lintje-change` `string[]`, `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 '../../../primitives/popover/popover.js';

package/dist-elements/types/components/inputs/text-editor/text-editor.d.ts

@@ -1,11 +1,11 @@
 /**
- * `<lintje-text-editor>` — formatted text (bold, italic, one heading, a bullet list, a link);
- * the value is markdown (`markdown.ts`). Formatting uses `document.execCommand`, the one API
- * every browser has for a `contenteditable` selection; the markdown writer reads only the five
- * formats from whatever markup it leaves. Commits when the surface loses focus, if changed.
- * A link is http(s), mailto, tel or relative; any other scheme is dropped.
+ * `<lintje-text-editor>` — formatted text: bold, italic, one heading, a bullet list and a link.
  *
- * Events: `lintje-change` with the markdown; with a `name` also the composed `lintje-values-change`.
+ * The value is markdown, committed when the surface loses focus, if changed. A link is http(s),
+ * mailto, tel or relative; any other scheme is dropped.
+ *
+ * Events: `lintje-change` `string` (the markdown), `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/text-input/text-input.d.ts

@@ -1,10 +1,12 @@
 /**
- * `<lintje-text-input>` — a text field: `clearable`, `error`, `readonly`, and `type` text,
- * search, password or email. It checks nothing itself; the host sets `error`.
+ * `<lintje-text-input>` — a text field: text, search, password or email.
  *
- * It commits on `change` (leaving the field, Enter), since every commit is a URL change and a
- * tile reload. `commit="input"` bundles keystrokes and commits 300 ms after the last. The same
- * value is never committed twice. Events: `lintje-change`, and `lintje-values-change` with `name`.
+ * It checks nothing itself: the host sets `error`. It commits on `change` (leaving the field,
+ * Enter), since every commit is a URL change and a tile reload, and never commits the same value
+ * twice.
+ *
+ * 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 '../../../primitives/button/button.js';
@@ -22,7 +24,10 @@ export declare class LintjeTextInput extends LintjeFormInputElement {
     clearable: boolean;
     stacked: boolean;
     type: TextInputType;
-    /** The attribute `commit`; `commit()` is the method every input commits through. */
+    /**
+     * The attribute `commit`; `commit()` is the method every input commits through. `input`
+     * bundles keystrokes and commits 300 ms after the last.
+     */
     commitOn: CommitOn;
     /** Passed to the native input as is. */
     autocomplete: string;

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-format.d.ts

@@ -20,3 +20,7 @@ export declare function addMinutes(time: string, count: number): string;
 /** The time on the clock now, rounded to the nearest `step` minutes: 10:52 with 15 is 10:45. */
 export declare function nowRounded(step: number, now?: Date): string;
 export declare function clampTime(time: string, min?: string | null, max?: string | null): string;
+/** The times from `min` (default 00:00) to `max` (default the end of the day), `step` minutes apart. */
+export declare function timesBetween(min?: string | null, max?: string | null, step?: number): string[];
+/** The first of a sorted list at or after `time`, else its last; `''` for an empty list. */
+export declare function timeAtOrAfter(times: string[], time: string): string;

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

@@ -1,34 +1,52 @@
 /**
- * `<lintje-time-input>` — a time of day, `HH:MM` on a 24-hour clock, or `null` when empty.
- * Typed text is read on leaving the field or Enter (`time-format.ts`). It 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.
+ * `<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';
+import '../../../primitives/popover/popover.js';
 export declare class LintjeTimeInput extends LintjeInputElement {
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
     value: string | null;
-    /** The earliest time, `HH:MM`. */
+    /** The earliest time, `HH:MM`; the list starts here, else at 00:00. */
     min?: string;
-    /** The latest time, `HH:MM`. */
+    /** The latest time, `HH:MM`; the list ends at the last time at or before it, else 23:59. */
     max?: string;
-    /** The minutes PageUp and PageDown move. */
+    /** The minutes between the times in the list, and that PageUp and PageDown move in the field. */
     step: number;
     placeholder: string;
     stacked: boolean;
+    /** Whether the list is open. Reflected, so a sheet can leave Escape to it. */
+    open: boolean;
     hint: string | undefined;
     protected text: string;
     protected problem: string;
+    /** The time the keys stand on in the list. */
+    protected focusTime: string;
     private get message();
     protected get footMessage(): string;
+    private get times();
     protected willUpdate(changed: PropertyValues<this>): void;
     private outOfBounds;
     private choose;
     private onChange;
     private onKeydown;
+    private openList;
+    private toggle;
+    /** On opening the time stands mid-list, so earlier and later are both in view. */
+    private focusOption;
+    private onPopoverClose;
+    private onFocusOut;
+    private pick;
+    private onListKeydown;
+    private renderList;
     protected render(): TemplateResult;
 }
 declare global {

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-tile/map-tile.d.ts → map/map.d.ts}

@@ -1,33 +1,38 @@
 /**
- * `<lintje-map-tile>` — 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.
+ * 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';
 import { LintjeContentTileElement } from '../../shared/content-tile.js';
 import '../../feedback/announcement/announcement.js';
 import '../../../primitives/tile/tile.js';
-import type { MapTileViewData } from '../../../types.js';
-export declare class LintjeMapTile extends LintjeContentTileElement {
+import '../../../primitives/tooltip/tooltip.js';
+import type { MapData } from '../../../types.js';
+export declare class LintjeMap extends LintjeContentTileElement {
     #private;
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
-    data?: MapTileViewData | null;
+    data?: MapData | null;
     /** 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. */
@@ -36,6 +41,6 @@ export declare class LintjeMapTile extends LintjeContentTileElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'lintje-map-tile': LintjeMapTile;
+        'lintje-map': LintjeMap;
     }
 }

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

@@ -0,0 +1,33 @@
+/**
+ * A histogram: counts in classes that touch, on an x-axis that runs on, so the labels stand on
+ * the class bounds. A median is a solid emphasis line, a threshold a dashed one.
+ */
+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 HistogramSpec = Extract<ChartSpec, {
+    kind: 'histogram';
+}>;
+/** A class as the tooltip and the table name it: "8 tot 10 dagen", "30 dagen of meer". */
+export declare function binLabel(bin: {
+    from: number;
+    to: number | null;
+}, unit?: string): string;
+export interface LineLabel {
+    x: number;
+    text: string;
+    /** Bold, as the median's label is, and measured so. */
+    bold?: boolean;
+}
+/**
+ * Where the labels of the median and the threshold stand: right of their line, or left of it
+ * where they would leave the drawing, and the right one a line lower when the two would touch.
+ */
+export declare function placeLineLabels(labels: LineLabel[], area: PlotArea, fontFamily?: string): {
+    x: number;
+    y: number;
+    anchor: 'start' | 'end';
+}[];
+export declare function renderHistogramChart(spec: HistogramSpec, options: ChartOptions): TemplateResult;
+export {};

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

@@ -3,22 +3,27 @@
  * `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 { 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';
 export { renderMap } from './map-chart/map-chart.js';
 export type { MapOptions } from './map-chart/map-chart.js';
 export { renderChartFrame, renderLegend, renderAsOfMarker } from './shared/axes.js';
 export type { ChartFrameOptions, LegendItem, SvgSlot } from './shared/axes.js';
 export { renderTooltip } from './shared/tooltip.js';
-export { renderChartSkeleton, renderChartEmpty, renderChartError, liveAnnouncement, } from './shared/chart-states.js';
+export { 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';
@@ -34,4 +39,4 @@ export { staggerStyle, gridStaggerStyle } from './shared/stagger.js';
 export type { StyleInfo } from './shared/stagger.js';
 export { chartStyles, chartFrameStyles, pieChartStyles, heatmapStyles } from './shared/chart-styles.js';
 export { mapStyles, mapChartStyles } from './map-chart/map-styles.js';
-export type { ChartSpec, ChartKind, ChartColor, ChartLink, LineSeriesData, BarSeriesData, MapTileData, MapValue, MapVariant, MapPlotData, MapPlotVariant, } from './shared/types.js';
+export type { ChartSpec, ChartKind, ChartColor, ChartLink, LineSeriesData, BarSeriesData, ScatterPoint, ScatterSeriesData, MapSpec, MapValue, MapVariant, MapPlotData, MapPlotVariant, } from './shared/types.js';