lintje 0.2.0 → 0.4.0

package/dist-elements/types/bundle/actions.d.ts

@@ -1,8 +1,8 @@
 /** The actions category (Knoppen en iconen): importing it defines its tags. */
-import '../primitives/button/button.js';
-import '../primitives/icon-button/icon-button.js';
+import '../components/actions/button/button.js';
+import '../components/actions/icon-button/icon-button.js';
 import '../components/actions/menu-button/menu-button.js';
 import '../components/actions/copy-button/copy-button.js';
 import '../components/actions/qr-code/qr-code.js';
-import '../icons/icon/icon.js';
+import '../components/actions/icon/icon.js';
 import '../components/actions/logo/logo.js';

package/dist-elements/types/bundle/content.d.ts

@@ -2,6 +2,7 @@
 import '../components/content/prose/prose.js';
 import '../components/content/code/code.js';
 import '../components/content/highlight/highlight.js';
+import '../components/content/token-value/token-value.js';
 import '../components/content/translator/translator.js';
 import '../components/content/audio-player/audio-player.js';
 import '../components/content/video-player/video-player.js';

package/dist-elements/types/bundle/feedback.d.ts

@@ -3,11 +3,12 @@ import '../components/feedback/announcement/announcement.js';
 import '../components/feedback/toast/toast.js';
 import '../components/feedback/conflict-alert/conflict-alert.js';
 import '../components/feedback/empty-state/empty-state.js';
-import '../primitives/badge/badge.js';
-import '../primitives/status-dot/status-dot.js';
-import '../primitives/spinner/spinner.js';
-import '../primitives/skeleton/skeleton.js';
-import '../primitives/progress-bar/progress-bar.js';
+import '../components/feedback/error-page/error-page.js';
+import '../components/feedback/badge/badge.js';
+import '../components/feedback/status-dot/status-dot.js';
+import '../components/feedback/spinner/spinner.js';
+import '../components/feedback/skeleton/skeleton.js';
+import '../components/feedback/progress-bar/progress-bar.js';
 import '../components/feedback/job-list/job-list.js';
 import '../components/feedback/streaming-text/streaming-text.js';
 import '../components/feedback/ai-label/ai-label.js';

package/dist-elements/types/bundle/frame.d.ts

@@ -8,5 +8,3 @@ import '../components/frame/footer/footer.js';
 import '../components/frame/user-menu/user-menu.js';
 import '../components/frame/app-search/app-search.js';
 import '../components/frame/notifications/notifications.js';
-import '../components/frame/shortcuts/shortcuts.js';
-import '../components/frame/session-expiry/session-expiry.js';

package/dist-elements/types/bundle/index.d.ts

@@ -1,14 +1,4 @@
-/**
- * The bundle: one module a plain HTML page includes; every `lintje-…` tag is registered.
- * `define()` leaves a tag another copy already defined alone. `tokens.css` and `fonts.css` stay
- * files: themes are document-level and a shadow root ignores `@font-face`. A page takes this
- * module or the category/tag entries (`core.ts`, `forms.ts`, `tag/<name>.js`), never both: they
- * do not share module state.
- */
-import '../icons/icon/icon.js';
 export * from './core.js';
-export { LintjeIcon, ICON_NAMES } from '../icons/icon/icon.js';
-export * from '../primitives/index.js';
 export * from '../components/index.js';
 export * from '../components/shared/charts/index.js';
 export { CATEGORIES, SECTIONS, tagsOf } from '../categories.js';

package/dist-elements/types/bundle/inputs.d.ts

@@ -1,6 +1,7 @@
 /** The inputs category (Invoervelden): importing it defines its tags. */
 import '../components/inputs/field/field.js';
 import '../components/inputs/text-input/text-input.js';
+import '../components/inputs/find/find.js';
 import '../components/inputs/textarea/textarea.js';
 import '../components/inputs/number-input/number-input.js';
 import '../components/inputs/select/select.js';
@@ -8,6 +9,7 @@ import '../components/inputs/combobox/combobox.js';
 import '../components/inputs/multiselect/multiselect.js';
 import '../components/inputs/tag-input/tag-input.js';
 import '../components/inputs/checkbox/checkbox.js';
+import '../components/inputs/checkbox-group/checkbox-group.js';
 import '../components/inputs/radio-group/radio-group.js';
 import '../components/inputs/toggle/toggle.js';
 import '../components/inputs/segmented/segmented.js';

package/dist-elements/types/bundle/layout.d.ts

@@ -1,7 +1,7 @@
 /** The layout category (Indeling): importing it defines its tags. */
-import '../primitives/grid/grid.js';
-import '../primitives/grid-item/grid-item.js';
-import '../primitives/tile/tile.js';
+import '../components/layout/grid/grid.js';
+import '../components/layout/grid-item/grid-item.js';
+import '../components/layout/tile/tile.js';
 import '../components/layout/tabs/tabs.js';
 import '../components/layout/expander/expander.js';
 import '../components/layout/split-pane/split-pane.js';

package/dist-elements/types/bundle/overlays.d.ts

@@ -1,7 +1,7 @@
 /** The overlays category (Vensters en panelen): importing it defines its tags. */
 import '../components/overlays/modal/modal.js';
-import '../components/overlays/confirm-dialog/confirm-dialog.js';
+import '../components/overlays/dialog/dialog.js';
 import '../components/overlays/drawer/drawer.js';
-import '../primitives/popover/popover.js';
-import '../primitives/tooltip/tooltip.js';
+import '../components/overlays/popover/popover.js';
+import '../components/overlays/tooltip/tooltip.js';
 import '../components/overlays/toggletip/toggletip.js';

package/dist-elements/types/categories.d.ts

@@ -9,9 +9,13 @@ export interface Category {
     intro: string;
     /** Tags without `lintje-`, or the id of a style guide section that shows no single tag. */
     elements: readonly string[];
+    /** The composite tags among `elements`; every other tag is a building block. */
+    composite?: readonly string[];
 }
 export declare const CATEGORIES: readonly Category[];
 /** The style guide's sections that show no single tag. */
 export declare const SECTIONS: readonly string[];
+/** Every composite tag, with its prefix. */
+export declare const COMPOSITE: readonly string[];
 /** A category's tags, with their prefix. */
 export declare const tagsOf: (category: Category) => string[];

package/dist-elements/types/{primitives → components/actions}/button/button.d.ts

@@ -1,17 +1,12 @@
 /**
  * `<lintje-button>` — a button or, with `href`, a link with the same look.
  *
- * `disabled` and `busy` render `aria-disabled="true"`, never the native `disabled`: the button
- * stays in the tab order. A capturing `click` listener on the host swallows the activation, so
- * no host listener and no form sees it. `busy` keeps the variant's colours and the exact width.
- * A disabled or busy link renders no `href` and keeps `role="link"` and `tabindex="0"`.
- * `type="submit"|"reset"` acts on the nearest `<form>` itself: the inner `<button>` has no form
- * owner in a shadow root. ARIA on the host never reaches the inner control, so what a host needs
- * there (`expanded`, `pressed`, `haspopup`, `keyshortcuts`, `accessible-name`, `description`, `invalid`) is a
- * property; focusing the host focuses the inner control.
+ * `disabled` and `busy` keep it in the tab order but swallow the press: no listener on the host
+ * and no form sees it. ARIA on the host never reaches the inner control, so what a host needs
+ * there is a property; focusing the host focuses the inner control.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
-import { LintjeElement } from '../../core/element.js';
+import { LintjeElement } from '../../../core/element.js';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'link' | 'danger' | 'danger-secondary';
 export type ButtonSize = 'regular' | 'compact' | 'chrome';
 export declare class LintjeButton extends LintjeElement {
@@ -26,9 +21,17 @@ export declare class LintjeButton extends LintjeElement {
     disabled: boolean;
     /** Why it is disabled, read with the button. Say it on the page as well: a mouse does not hear it. */
     reason?: string;
+    /** At work: `aria-disabled`, with the variant's colours and the exact width kept. */
     busy: boolean;
+    /**
+     * `submit` and `reset` act on the nearest `<form>` themselves: the inner `<button>` has no form
+     * owner in a shadow root.
+     */
     type: 'button' | 'submit' | 'reset';
-    /** Makes the button an `<a>` with the same look; `type` is then ignored. */
+    /**
+     * Makes the button an `<a>` with the same look; `type` is then ignored. Disabled or busy, the
+     * link has no `href` but stays focusable, with `role="link"`.
+     */
     href?: string;
     /** The link's browsing context; `_blank` without a `rel` gets `noopener noreferrer`. */
     target?: string;

package/dist-elements/types/components/actions/copy-button/copy-button.d.ts

@@ -1,20 +1,19 @@
 /**
- * `<lintje-copy-button>` — text to the clipboard, with a confirmation.
+ * `<lintje-copy-button>` — a button that copies text to the clipboard, and confirms it.
  *
- * Copies `text`, or the text of the element whose id is in `for` (same root, read on press).
- * Disabled with nothing to copy; a `for` target that appears later enables it. A second copy
- * empties the status first so a screen reader hears it again.
+ * It copies `text`, or the text of the element named in `for`, read on press. With nothing to
+ * copy it is disabled; a `for` target that appears later enables it.
  *
- * Events: `lintje-copy` (detail: the text) after a copy, `lintje-copy-error` (detail: the
- * text) when the browser refused.
+ * Events: `lintje-copy` `string` (the text copied), `lintje-copy-error` `string` (the browser
+ * refused).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/button/button.js';
-import '../../../primitives/icon-button/icon-button.js';
+import '../button/button.js';
+import '../icon-button/icon-button.js';
 import '../../feedback/toast/toast.js';
 export declare class LintjeCopyButton extends LintjeElement {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
     /** The string to copy. */
     text?: string;

package/dist-elements/types/{icons → components/actions}/icon/icon.d.ts

@@ -1,13 +1,12 @@
 /**
  * `<lintje-icon>` — one icon, named by its file in `dist-icons/` (without `.svg`).
  *
- * For plain HTML pages; inside a component use `renderIcon()` (`../render.ts`), which this
- * element also draws through. Resolution: `src`, the register, loaded icons, then nothing.
- * Events: none.
+ * For plain HTML pages; inside a component use `renderIcon()`, which this element also draws
+ * through. It takes `src`, else the register, else a loaded file; without any it draws nothing.
  */
 import { nothing, type TemplateResult } from 'lit';
-import { LintjeElement } from '../../core/element.js';
-import { ICONS, type IconGlyph, type IconName } from '../register.js';
+import { LintjeElement } from '../../../core/element.js';
+import { ICONS, type IconGlyph, type IconName } from '../../../icons/register.js';
 export type { IconName, IconGlyph };
 export { ICONS };
 /** The names the bundle carries; every other name is fetched. */

package/dist-elements/types/{primitives → components/actions}/icon-button/icon-button.d.ts

@@ -1,12 +1,11 @@
 /**
  * `<lintje-icon-button>` — a square button with one icon, or its Dutch label as text when the
- * icon has no file. `disabled` renders `aria-disabled="true"` and a capturing `click` listener
- * swallows the activation, so the button stays focusable but no host listener sees it.
- * `live` is for what listens or speaks now (dictating, reading aloud): the primary fill and
- * moving bars beside the icon; the host still sets `pressed` and the label that stops it.
+ * icon has no file.
+ *
+ * `disabled` keeps it focusable but swallows the press: no listener on the host sees it.
  */
 import { type TemplateResult } from 'lit';
-import { LintjeElement } from '../../core/element.js';
+import { LintjeElement } from '../../../core/element.js';
 export type IconButtonVariant = 'flat' | 'outlined' | 'tile';
 export declare class LintjeIconButton extends LintjeElement {
     static styles: import("lit").CSSResult[];
@@ -58,7 +57,10 @@ export declare class LintjeIconButton extends LintjeElement {
     expanded?: boolean;
     /** Extra description read after the name; a wrapping `lintje-tooltip` sets its text here. */
     description?: string;
-    /** It listens or speaks now: the primary fill, with moving bars beside the icon. */
+    /**
+     * It listens or speaks now (dictating, reading aloud): the primary fill, with moving bars beside
+     * the icon. The host still sets `pressed` and the label that stops it.
+     */
     live: boolean;
     constructor();
     private refuseWhileDisabled;

package/dist-elements/types/components/actions/menu-button/menu-button.d.ts

@@ -1,26 +1,17 @@
 /**
  * `<lintje-menu-button>` — a button with a menu of actions.
  *
- * The trigger is a native `<button>` so `aria-haspopup`, `aria-expanded` and `aria-controls` sit
- * on the focused element; `aria-controls` names the popover because the `role="menu"` panel is
- * in the popover's shadow root. A disabled trigger is `aria-disabled`: it stays in the tab order
- * and refuses to open. Keys reach disabled rows too, so their `reason` tooltip shows on focus.
- * While `busyLabel` is set the trigger is disabled and the sentence stands beside it with a
- * spinner; the `role="status"` is always present so the sentence is read out when it appears.
+ * A disabled trigger stays in the tab order and refuses to open. The keys reach disabled rows
+ * too, so their `reason` tooltip shows on focus.
  *
- * `split` makes it two halves of one button, 1 px apart: the label does the usual action
- * (`action`), the arrow beside it opens the other ways to do it. Busy, a split button keeps its
- * size and colours: only its icon turns into the spinner, and the sentence is for the screen
- * reader.
- *
- * Events: `lintje-action` (the row's value, or `action` from a split button's own half),
- * `lintje-navigate` `{ href }` for a link row.
+ * Events: `lintje-action` `string` (the row's value, or `action` from a split button's own half),
+ * `lintje-navigate` `{ href }` (a link row).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/popover/popover.js';
-import '../../../primitives/spinner/spinner.js';
-import '../../../primitives/tooltip/tooltip.js';
+import '../../overlays/popover/popover.js';
+import '../../feedback/spinner/spinner.js';
+import '../../overlays/tooltip/tooltip.js';
 export interface MenuItem {
     /** What `lintje-action` carries. */
     value: string;
@@ -79,13 +70,20 @@ export declare class LintjeMenuButton extends LintjeElement {
     /** An icon file name before the label, saying what the label is a value of (the speed's "1×"). */
     leadingIcon: string;
     disabled: boolean;
-    /** An action is under way: the sentence beside the spinner. Empty when none is. */
+    /**
+     * An action is under way: the trigger is disabled and this sentence stands beside the spinner,
+     * read out when it appears. A split button keeps its size and colours: only its icon turns into
+     * the spinner, and the sentence is for the screen reader. Empty when none is.
+     */
     busyLabel: string;
     placement: 'bottom-start' | 'bottom-end' | 'top-end';
     items: MenuEntry[];
     /** Reflected, so a sheet around it can see a menu is open and leave Escape to it. */
     open: boolean;
-    /** The label is a button of its own, and the arrow beside it opens the menu. */
+    /**
+     * Two halves of one button, 1 px apart: the label does the usual action (`action`), the arrow
+     * beside it opens the other ways to do it.
+     */
     split: boolean;
     /** What a split button's own half sends as `lintje-action`. */
     action: string;

package/dist-elements/types/components/actions/qr-code/qr-code.d.ts

@@ -1,25 +1,25 @@
 /**
- * `<lintje-qr-code>` — a QR code a phone camera reads, with a button that copies it as an
- * image.
+ * `<lintje-qr-code>` — a QR code a phone camera reads, with a button that copies it as an image.
  *
- * The host sets `value`, the text the code holds, and the element makes the code. A host that
- * makes its own sets `src` instead: an image of only the dark modules, without a margin. The
- * element sets the code on a light quiet zone in every mode and theme, because many camera apps do
- * not read an inverted code.
+ * The element makes the code from `value`, or shows the host's own image in `src`. The code stands
+ * on a light quiet zone in every mode and theme, because many camera apps do not read an inverted
+ * code.
  *
- * Events: `lintje-copy` after the image is on the clipboard, `lintje-copy-error` when the
- * browser refused.
+ * Events: `lintje-copy` (the image is on the clipboard), `lintje-copy-error` (the browser refused).
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/button/button.js';
+import '../button/button.js';
 import '../../feedback/toast/toast.js';
 /** The code of `text` as an SVG of its dark modules, one path of horizontal runs. */
 export declare function codeImage(text: string, colour: string): string;
 export declare class LintjeQrCode extends LintjeElement {
     static styles: import("lit").CSSResult;
     static properties: PropertyDeclarations;
-    /** URL or data URI of an image of the code the host made; it goes before `value`. */
+    /**
+     * URL or data URI of an image of the code the host made: only the dark modules, without a
+     * margin. It goes before `value`.
+     */
     src: string;
     /** The text the code holds, usually a link: the element makes the code. */
     value: string;

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

@@ -1,11 +1,11 @@
 /**
  * `<lintje-chart>` — a chart in its tile, with loading, empty and error states.
  *
- * Events: `lintje-mark-select` `{id, label, href}` when a mark with a `href` is clicked, and
- * `{id: null, label: null, href: clearHref}` when it is deselected. Expand and download stay here.
+ * Expand and download are handled here. The table view is the element's own state, built from the
+ * CSV rows; it never reaches the URL.
  *
- * Two controllers: the tile and the modal draw the same chart and must not share hover or width.
- * The table view is built from the CSV rows; it is element state, not URL state (rule 14).
+ * Events: `lintje-mark-select` `{ id, label, href }` (a mark with an `href` was clicked;
+ * deselected, `{ id: null, label: null, href: data.clearHref }`).
  */
 import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
 import { type FrameSettings } from '../../../core/element.js';
@@ -13,7 +13,7 @@ import { LintjeContentTileElement } from '../../shared/content-tile.js';
 import '../../feedback/announcement/announcement.js';
 import '../../tables/data-table/data-table.js';
 import '../../inputs/segmented/segmented.js';
-import '../../../primitives/tile/tile.js';
+import '../../layout/tile/tile.js';
 import type { ChartData } from '../../../types.js';
 type ChartView = 'chart' | 'table';
 export declare class LintjeChart extends LintjeContentTileElement {
@@ -32,6 +32,7 @@ export declare class LintjeChart extends LintjeContentTileElement {
     private png;
     protected expandChanged(open: boolean): void;
     protected render(): TemplateResult | typeof nothing;
+    /** The drawing, or the skeleton in its shape for the tile's `loading` slot; empty and error are the tile's. */
     private content;
     /** Header actions from 768 px; below that a row of its own in the `notice` slot. */
     private viewSwitch;

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

@@ -6,7 +6,7 @@
  */
 import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { type FrameSettings } from '../../../core/element.js';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
 import type { ExplainerData } from '../../../types.js';
 export declare class LintjeExplainer extends LintjeGridItemElement {
     #private;

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

@@ -1,15 +1,14 @@
 /**
- * `<lintje-kpi>` — the KPI tile: one figure, or several of the same variable (`items`). Rich
- * values go in as properties. The value counts up from zero and the sparkline draws in once
- * 35 % of the tile is in view, and not under `prefers-reduced-motion`. A single figure can stand
- * on its scale (`gauge`): a half circle around the value or a bar under it, with the target
- * dashed; the trend or note says in words how the figure stands to the target. Events: none.
+ * `<lintje-kpi>` — the KPI tile: one figure, or several of the same variable (`items`).
+ *
+ * The value counts up from zero and the sparkline draws in once 35 % of the tile is in view; under
+ * `prefers-reduced-motion` both stand at once.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
-import '../../../primitives/status-dot/status-dot.js';
-import '../../../primitives/skeleton/skeleton.js';
-import type { KpiGauge, KpiItem, KpiSparkline, KpiState, KpiTrend, KpiVariable } from '../../../types.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
+import '../../feedback/status-dot/status-dot.js';
+import '../../feedback/skeleton/skeleton.js';
+import type { KpiGauge, KpiItem, KpiSparkline, ContentStateKind, KpiTrend, KpiVariable } from '../../../types.js';
 type Point = [number, number];
 /** The points of each unbroken run of values: a `null` ends a run (rule 15). */
 export declare function sparklineRuns(values: (number | null)[], width: number, height: number): Point[][];
@@ -34,14 +33,21 @@ export declare class LintjeKpi extends LintjeGridItemElement {
     trend?: KpiTrend;
     /** The figure's recent values as a line with its area, under the figure. */
     sparkline?: KpiSparkline;
-    /** The single figure on its scale, as a half circle (`arc`) or a bar (`linear`); not with `items`. */
+    /**
+     * The single figure on its scale, as a half circle (`arc`) or a bar (`linear`), the target
+     * dashed; not with `items`. The trend or note says in words how the figure stands to the target.
+     */
     gauge?: KpiGauge;
     /** A line without an arrow, for when there is no direction. */
     note?: string;
     detail?: string;
     /** A data colour's name (`DataColor`); `coverage` is the gray one. */
     variable: KpiVariable;
-    state: KpiState;
+    state: ContentStateKind;
+    /** Explains an empty or failed result instead of the default message. */
+    message?: string;
+    /** The last known value and its date, shown below a failed result. */
+    lastKnown?: string;
     index: number;
     counting: (string | null)[];
     /** The sparkline draws in once the tile is in view, like the count. */
@@ -55,6 +61,8 @@ export declare class LintjeKpi extends LintjeGridItemElement {
     private get reduced();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Paper shows the value, never a figure halfway or the zero it counts up from. */
+    private finishCount;
     /** Measures the sparkline's box; the svg takes that size instead of stretching into it. */
     private observeSparkline;
     protected willUpdate(changed: PropertyValues<this>): void;

package/dist-elements/types/components/charts/kpi-row/kpi-row.d.ts

@@ -1,13 +1,7 @@
-/**
- * `<lintje-kpi-row>` — the KPI row: one grid, the KPIs staggered in from left to right.
- *
- * The grid and the KPIs share one shadow root, so `kpi-row.css` reaches the `<lintje-kpi>` hosts.
- * `dividers` is set as a property: a boolean attribute can't turn off a `true` default.
- * Events: none.
- */
+/** `<lintje-kpi-row>` — the KPI row: one grid, the KPIs staggered in from left to right. */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { type FrameSettings } from '../../../core/element.js';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
 import '../kpi/kpi.js';
 import type { KpiRowData } from '../../../types.js';
 export declare class LintjeKpiRow extends LintjeGridItemElement {

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

@@ -1,7 +1,7 @@
-/** `<lintje-note>` — the analyst's note ("Toelichting analist"). Events: none. */
+/** `<lintje-note>` — the analyst's note ("Toelichting analist"). */
 import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
 import { type FrameSettings } from '../../../core/element.js';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
 import type { NoteData } from '../../../types.js';
 export declare class LintjeNote extends LintjeGridItemElement {
     static styles: import("lit").CSSResult[];

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

@@ -1,20 +1,18 @@
 /**
- * `<lintje-chat>` — a conversation with data; takes `ChatData`. The host owns the transport.
+ * `<lintje-chat>` — a conversation with data, from `ChatData`; the host owns the transport.
  *
- * An answer arrives by setting `data` again; keep the objects of what did not change so only
- * the changed part is redrawn. It stands in the flow and scrolls with what scrolls around it —
- * the page, or the nearest box that scrolls — and its question box stays in view at the bottom.
+ * An answer arrives by setting `data` again: keep the objects that did not change, so only the
+ * changed part is redrawn. It scrolls with what scrolls around it, and its question box stays in
+ * view at the bottom.
  *
- * Events: none of its own; its parts' events reach the host as they are (`lintje-message-send`,
- * `lintje-answer-stop`, `lintje-sources-change`, `lintje-draft-change`) and, with the `turnId`,
- * `lintje-suggestion-select`, `lintje-message-edit`, `lintje-answer-retry`,
- * `lintje-answer-rate`, `lintje-strip-change`, `lintje-mark-select`, `lintje-row-click` and
- * `lintje-sort-change`. The host replies: send adds a turn and answers it; message-edit asks
- * again and drops that turn and all after it; strip-change answers again with the new assumption.
+ * It sends no events of its own: those of its question box, messages and answers reach the host,
+ * with the `turnId` where a turn sent them. The host answers `lintje-message-send` with a new turn,
+ * `lintje-message-edit` by asking again without that turn and all after it, and
+ * `lintje-strip-change` by answering again with the new assumption.
  */
 import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement, type FrameSettings } from '../../../core/element.js';
-import '../../../primitives/button/button.js';
+import '../../actions/button/button.js';
 import '../chat-answer/chat-answer.js';
 import '../chat-composer/chat-composer.js';
 import '../chat-message/chat-message.js';

package/dist-elements/types/components/chat/chat-answer/chat-answer.d.ts

@@ -1,21 +1,19 @@
 /**
  * `<lintje-chat-answer>` — what the assistant answered, as a list of existing blocks.
  *
- * It draws none of the blocks itself; only the bold lead, strip, actions and follow-ups are its
- * own. A block still to come is that block with `state: 'loading'`. Only the `current` answer
- * can be retried, changed through its strip or followed up. The thumbs and "Gekopieerd" are
- * the element's own state; the conversation is not stored.
+ * It draws none of the blocks itself: a block still to come is that block with `state: 'loading'`.
+ * The thumbs and "Gekopieerd" are its own state; it stores nothing of the conversation. The events
+ * of its strip, suggestions and blocks pass through unchanged.
  *
- * Events: `lintje-answer-retry` `{turnId}` and `lintje-answer-rate` `{turnId, rating, reason}`
- * (`rating` is `'up'`, `'down'` or `null` when taken back; a `'down'` is followed by a second
- * event once the reader picks a reason). The strip's, the suggestions' and the blocks' events
- * pass through untouched.
+ * Events: `lintje-answer-retry` `{ turnId }`, `lintje-answer-rate` `{ turnId, rating, reason }`
+ * (`rating` is `'up'`, `'down'` or `null` when taken back; a `'down'` comes again with the
+ * `reason` once the reader picks one).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/button/button.js';
-import '../../../primitives/icon-button/icon-button.js';
-import '../../../primitives/spinner/spinner.js';
+import '../../actions/button/button.js';
+import '../../actions/icon-button/icon-button.js';
+import '../../feedback/spinner/spinner.js';
 import '../../feedback/announcement/announcement.js';
 import '../../charts/chart/chart.js';
 import '../chat-strip/chat-strip.js';
@@ -46,6 +44,7 @@ export declare class LintjeChatAnswer extends LintjeElement {
     choices?: ChatSuggestion[];
     /** Suggested next questions; drawn on the current answer only. */
     followUps?: ChatSuggestion[];
+    /** The latest answer: only it can be retried, changed through its strip or followed up. */
     current: boolean;
     /** The turn this answers; it comes back in the events. */
     turnId?: string;

package/dist-elements/types/components/chat/chat-composer/chat-composer.d.ts

@@ -1,22 +1,19 @@
 /**
  * `<lintje-chat-composer>` — the question box: text field, source picker and split send button.
  *
- * The field is a plain-text `contenteditable`; the element never writes markup into it. Terms
- * are painted with the CSS Custom Highlight API so typing, input methods and undo stay the
- * browser's; without the API the field is unmarked. Terms come from `vocabulary` (matched while
- * typing) or from the host's `draftTerms`, which win while the text is unchanged.
- * The source selection is the host's; the draft, send key (in `localStorage`) and answer form
- * are the element's own.
+ * The field is plain text; the element never writes markup into it. Terms are marked through the
+ * CSS Custom Highlight API, so typing and undo stay the browser's; without it the field is
+ * unmarked. The source selection is the host's; the draft, the send key (kept in `localStorage`)
+ * and the answer form are the element's own.
  *
- * Events: `lintje-message-send` `{text, terms, sources, form}`, `lintje-answer-stop`,
- * `lintje-sources-change` `{ids}`, `lintje-draft-change` `{text}` (200 ms after the last key).
- * In `variant="edit"` it sends `lintje-submit` `{text, terms}` and `lintje-cancel` instead, both
- * not composed.
+ * Events: `lintje-message-send` `{ text, terms, sources, form }`, `lintje-answer-stop`,
+ * `lintje-sources-change` `{ ids }`, `lintje-draft-change` `{ text }` (200 ms after the last key);
+ * with `variant="edit"` instead `lintje-submit` `{ text, terms }` and `lintje-cancel`.
  */
 import { type PropertyDeclarations, type PropertyValues, 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';
 import '../../inputs/multiselect/multiselect.js';
 import '../../inputs/radio-group/radio-group.js';
 import type { ChatAnswerForm, ChatDraftTerms, ChatSourceData, ChatTermData } from '../../../types.js';
@@ -48,6 +45,7 @@ export declare class LintjeChatComposer extends LintjeElement {
     form: ChatAnswerForm;
     /** Sources given and none `selected`: sending is off. The host sets them again on a change. */
     sources?: ChatSourceData[];
+    /** The terms marked in the field while the reader types. */
     vocabulary?: ChatTermData[];
     /** The host's own reading of the text; it wins while the text is unchanged. */
     draftTerms?: ChatDraftTerms;

package/dist-elements/types/components/chat/chat-message/chat-message.d.ts

@@ -1,17 +1,16 @@
 /**
- * `<lintje-chat-message>` — what the reader asked: a filled bar on the right. A visually hidden
- * "Jij:" carries the role.
+ * `<lintje-chat-message>` — what the reader asked: a filled bar on the right.
  *
- * Editing is the message's own state (`lintje-chat-composer variant="edit"`). The message never
- * changes its own text: asking again is an event and the host replaces the turn.
+ * Editing is the message's own state, in a `lintje-chat-composer`. It never changes its own text:
+ * asking again is an event, and the host replaces the turn.
  *
- * Events: `lintje-message-edit` `{turnId, text, terms}` — ask this instead, replacing the answer
- * and everything after it. `lintje-editing-change` `{turnId, editing}` is not composed: it tells
- * the holding view which answers are about to be replaced.
+ * Events: `lintje-message-edit` `{ turnId, text, terms }` (ask this instead, replacing the answer
+ * and all after it), `lintje-editing-change` `{ turnId, editing }` (tells the holding view which
+ * answers are about to be replaced).
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/icon-button/icon-button.js';
+import '../../actions/icon-button/icon-button.js';
 import '../chat-composer/chat-composer.js';
 import type { ChatSourceData, ChatTermData, ChatTermRange } from '../../../types.js';
 export declare class LintjeChatMessage extends LintjeElement {