lintje 0.2.0 → 0.4.0

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

@@ -2,12 +2,12 @@
  * `<lintje-chat-strip>` — the strip under an answer's text: what the answer assumed, as
  * label/value pairs, and how it was calculated.
  *
- * A fixed value is plain text; one with `options` is a native `<select>` drawn as a term (the
- * browser's own list and phone picker); one with `pressed` is a suggestion. The strip keeps only
- * whether its details are open; a change is an event and the host sets the items again.
+ * A value with `options` is a choice, one with `pressed` a suggestion, the rest plain text. The
+ * strip keeps only whether its details are open: a change is an event, and the host sets the
+ * items again.
  *
- * Events: `lintje-strip-change` `{turnId, key, value}` — a state; `value` is the
- * chosen option's value, or the suggestion's new `pressed`.
+ * Events: `lintje-strip-change` `{ turnId, key, value }` (`value` is the chosen option's value, or
+ * the suggestion's new `pressed`).
  */
 import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';

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

@@ -1,13 +1,8 @@
 /**
- * `<lintje-chat-suggestions>` — sentences the reader can send with one press.
+ * `<lintje-chat-suggestions>` — sentences the reader can send with one press, on the reader's side.
  *
- * `kind` is a rule, not decoration: `suggestion` (dashed) is something the reader could ask;
- * `choice` (solid) is an answer the assistant is waiting for. In a conversation they stand on the
- * reader's side, on the right; `align="start"` sets them left and side by side, as the examples
- * under a question box on a start page.
- *
- * Events: `lintje-suggestion-select` `{turnId, kind, label, value}` — a trigger;
- * `value` is the item's own, or its label.
+ * Events: `lintje-suggestion-select` `{ turnId, kind, label, value }` (`value` is the item's own,
+ * or its label).
  */
 import { nothing, type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
@@ -15,14 +10,18 @@ import type { ChatSuggestion } from '../../../types.js';
 export type ChatSuggestionKind = 'suggestion' | 'choice';
 export type ChatSuggestionsAlign = 'end' | 'start';
 export declare class LintjeChatSuggestions extends LintjeElement {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
     /** The caps line above the sentences: "Jij, als vervolgvraag". */
     label?: string;
     /** The gray line under a set of choices. */
     hint?: string;
+    /**
+     * A rule, not decoration: `suggestion` (dashed) is something the reader could ask, `choice`
+     * (solid) an answer the assistant is waiting for.
+     */
     kind: ChatSuggestionKind;
-    /** `start`: left and side by side, outside a conversation. */
+    /** `start`: left and side by side, outside a conversation, as examples under a question box. */
     align: ChatSuggestionsAlign;
     items?: ChatSuggestion[];
     /** It comes back in the event. */

package/dist-elements/types/components/content/audio-player/audio-player.d.ts

@@ -1,35 +1,33 @@
 /**
- * `<lintje-audio-player>` — plays a recording: play between two 15-second skips, the position
- * as a slider, the time, the volume and the speed.
+ * `<lintje-audio-player>` — plays a recording: play between two 15-second skips, the position as a
+ * slider, the time, the volume and the speed.
  *
- * With `.peaks` (0–1) the slider is the waveform, without them a bar. With `.segments` — the
- * transcript's `{ start, speaker }[]` — every speaker takes a colour, named in a legend above
- * (`no-legend` leaves it to the transcript, which names the same colours).
- * `compact` puts everything on one line; a phone has no room for it and keeps the column.
- * `flush` drops its own frame, for a bar the page draws around it. Never autoplays.
- * `.currentTime` seeks.
+ * It never autoplays.
  *
- * Events: `lintje-time-change` (seconds, at most four times a second), `lintje-seek` (seconds:
- * the reader moved the position), `lintje-play`, `lintje-pause`.
+ * Events: `lintje-time-change` `number` (seconds, at most four times a second), `lintje-seek`
+ * `number` (seconds: the reader moved the position), `lintje-play`, `lintje-pause`.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import '../../../primitives/button/button.js';
-import '../../../primitives/skeleton/skeleton.js';
+import '../../actions/button/button.js';
+import '../../feedback/skeleton/skeleton.js';
 import '../../feedback/announcement/announcement.js';
 import '../../actions/menu-button/menu-button.js';
-import { type SpeakerTurn } from './playback.js';
-import { LintjePlayerElement } from './player.js';
-export type { SpeakerTurn } from './playback.js';
+import { type SpeakerTurn } from '../shared/playback.js';
+import { LintjePlayerElement } from '../shared/player.js';
+export type { SpeakerTurn } from '../shared/playback.js';
 export declare class LintjeAudioPlayer extends LintjePlayerElement {
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
     /** The waveform's peaks, 0–1. Without them the position is a bar. */
     peaks?: number[] | null;
-    /** Who speaks when: the transcript's segments, or any `{ start, speaker }[]` in time order. */
+    /**
+     * Who speaks when: the transcript's segments, or any `{ start, speaker }[]` in time order. Every
+     * speaker takes a colour, named in a legend above.
+     */
     segments: SpeakerTurn[];
     /** Leaves the legend out where the transcript beside it names every colour. */
     noLegend: boolean;
-    /** Everything on one line, for a row or a tile. */
+    /** Everything on one line, for a row or a tile; a phone has no room and keeps the column. */
     compact: boolean;
     /** No frame of its own: the page's bar around it is the frame. */
     flush: boolean;

package/dist-elements/types/components/content/code/code.d.ts

@@ -1,18 +1,17 @@
 /**
  * `<lintje-code>` — a block of code or JSON, on `--font-mono`; the host pretty-prints JSON.
  *
- * Scrolls sideways by default because a broken line is a changed line; the block is
- * `tabindex="0"` so the scroll is keyboard reachable (WCAG 2.1.1). `numbered` uses a CSS
- * counter, so a copy of the block is a copy of the code. No syntax colouring.
+ * It scrolls sideways by default, because a broken line is a changed line. No syntax colouring.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
 export declare class LintjeCode extends LintjeGridItemElement {
     static styles: import("lit").CSSResult;
     static properties: PropertyDeclarations;
     text?: string;
     /** Shown as the label top right: `json`, `sql`, `python`. */
     language?: string;
+    /** Line numbers beside the text, not in it: a copy of the block is a copy of the code. */
     numbered: boolean;
     /** Break long lines instead of scrolling the block sideways. */
     wrap: boolean;

package/dist-elements/types/components/content/document-viewer/document-viewer.d.ts

@@ -1,21 +1,18 @@
 /**
  * `<lintje-document-viewer>` — a document page by page: leaf, zoom and download.
  *
- * Shows images only: `.pages` is one URL per page, `src` a single image. The host renders a PDF
- * to page images; no PDF library is shipped. An image is no text: give each page's text in
- * `.texts` (same order), which a screen reader reads after the page. The file behind
- * "Downloaden" is the accessible version, so it is a tagged, accessible PDF, not a scan.
+ * It shows images only: the host renders a PDF to page images, and gives each page's text in
+ * `texts`, which a screen reader reads after the page. The file behind "Downloaden" is the
+ * accessible version: a tagged PDF, not a scan. Page and zoom are the element's; every change is
+ * reported.
  *
- * `page` (from 1) and `zoom` (50–400 in steps of 25, or `fit`) are the element's; every change
- * is reported.
- *
- * Events: `lintje-page-change` (the page, from 1), `lintje-zoom-change` (a percentage or
- * `'fit'`), `lintje-download`.
+ * Events: `lintje-page-change` `number` (the page, from 1), `lintje-zoom-change`
+ * `number | 'fit'` (a percentage), `lintje-download`.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/button/button.js';
-import '../../../primitives/skeleton/skeleton.js';
+import '../../actions/button/button.js';
+import '../../feedback/skeleton/skeleton.js';
 import '../../feedback/empty-state/empty-state.js';
 export type ZoomLevel = number | 'fit';
 export declare const ZOOM_MIN = 50;
@@ -40,7 +37,9 @@ export declare class LintjeDocumentViewer extends LintjeElement {
     src: string;
     /** The file name: the toolbar's title and part of the page's accessible name. */
     name: string;
+    /** The page shown, from 1. */
     page: number;
+    /** A percentage, 50–400 in steps of 25, or `fit`. */
     zoom: ZoomLevel;
     protected loaded: boolean;
     protected failed: boolean;

package/dist-elements/types/components/content/gallery/gallery.d.ts

@@ -1,8 +1,9 @@
 /**
- * `<lintje-gallery>` — pictures of one thing, such as the screens of an application: one large
- * with its caption, and under it a thumbnail of each to choose another. A single picture has no
- * thumbnails. Which picture stands is the element's; every change is reported, and read out
- * from a status region: "Afbeelding 2 van 4: <alt>".
+ * `<lintje-gallery>` — pictures of one thing, such as the screens of an application: one large with
+ * its caption, and under it a thumbnail of each to choose another; a single picture has none.
+ *
+ * Which picture stands is the element's; every change is reported, and read out as "Afbeelding 2
+ * van 4: <alt>".
  *
  * Events: `lintje-gallery-change` `{ index }`.
  */

package/dist-elements/types/components/content/highlight/highlight.d.ts

@@ -1,12 +1,13 @@
 /**
  * `<lintje-highlight>` — a marking in running text: low confidence, a glossary term, a search
- * match, or a difference. Each kind draws the element that means it and a line of its own, so
- * colour is never the only carrier. A difference also says what it is in hidden words, since a
- * screen reader does not name `<del>` and `<ins>`. The host wraps the words. Events: none.
+ * match, or a difference.
+ *
+ * The host wraps the words. Each kind draws the element that means it and a line of its own, so
+ * colour is never the only carrier.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/tooltip/tooltip.js';
+import '../../overlays/tooltip/tooltip.js';
 export type HighlightKind = 'uncertain' | 'term' | 'match' | 'added' | 'removed';
 export declare class LintjeHighlight extends LintjeElement {
     static styles: import("lit").CSSResult;

package/dist-elements/types/components/content/prose/prose.d.ts

@@ -1,12 +1,11 @@
 /**
- * `<lintje-prose>` — a block of text on the type scale. `html` wins over `text`, which wins over
- * the slot.
+ * `<lintje-prose>` — a block of text on the type scale: `html`, else `text`, else the slot.
  *
  * The host renders the markdown and sanitises it: `html` is written into the shadow root as it
- * stands, and no sanitiser lives here. Events: none.
+ * stands.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
 export type ProseTone = 'default' | 'muted';
 export declare class LintjeProse extends LintjeGridItemElement {
     static styles: import("lit").CSSResult;

package/dist-elements/types/components/content/token-value/token-value.d.ts

@@ -0,0 +1,42 @@
+/**
+ * `<lintje-token-value>` — what a design token computes to, here and now: a colour as a swatch
+ * and hex, a length in rem also in px, a text style as weight, size and line height.
+ *
+ * The value is read from the computed style, since a token ends in a `color-mix()` or an
+ * `oklch()` of the theme's `--primary`. A change of mode redraws it like any element; a change
+ * of theme is watched on the document.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+export declare const NO_VALUE = "\u2014";
+/**
+ * A computed sRGB colour as upper-case hex, with its alpha in percent when it is not opaque;
+ * `null` for anything else. Browsers compute to `rgb(14, 61, 110)` or `color(srgb 0.05 0.24 0.43)`.
+ */
+export declare function formatColour(computed: string): string | null;
+export declare class LintjeTokenValue extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    /** The custom property to show, with its dashes: `--color-accent`. */
+    name?: string;
+    /** Without the swatch, where the colour already stands beside it, larger. */
+    noSwatch: boolean;
+    private observer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    /**
+     * Set on the nodes, not bound: the probe exists only after render, and a reactive property
+     * set from `updated()` would schedule a second render per reading.
+     */
+    private reread;
+    /** The CSSOM keeps a valid declaration and drops the rest, so the probe tells what a value is. */
+    private colourOf;
+    private describe;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-token-value': LintjeTokenValue;
+    }
+}

package/dist-elements/types/components/content/transcript/transcript.d.ts

@@ -1,40 +1,25 @@
 /**
  * `<lintje-transcript>` — a recording's text in fragments, each with its speaker and timecode.
  *
- * `readonly` shows the text only, as a preview beside a running recording does: no editing, no
- * speaker menu and no seeking.
+ * Editing and the speakers are the host's state: the element asks, and the host changes
+ * `segments`, `editingId`, `busyId` and `errors`. It plays, saves and renames nothing itself. A
+ * speaker has the colour it has in the player's waveform. Above the fragments, the `note-label` and
+ * `note` slots say that a model made the text, and `lead` holds the AI work.
  *
- * Every speaker takes a colour, the same as in the player's waveform: a bar along the fragment,
- * the name beside it says who it is. `layout="chat"` draws each fragment as a message instead of
- * a row; `tinted` lays the speaker's colour under the whole fragment; `grouped` names a speaker
- * once over consecutive fragments, each keeping its own time. The fragment that sounds stands out
- * with a ring. Live, `speakingId` says who speaks now and a fragment's `pending` text is still
- * provisional.
- *
- * Above the fragments stands a row in the same columns: `note-label` beside `note` — the label
- * that a model made the text, and the host's sentence about it — and under it what the host
- * slots in `lead` (the AI work, each in its own expander).
- *
- * A fragment is edited from its pencil or by a double click on its text.
- *
- * Editing and the speakers are the host's state: the element asks, the host changes `segments`,
- * `editingId`, `busyId` and `errors`. It plays, saves and renames nothing itself. The search
- * property is `searchMatches`, not `matches` (that is `Element.matches()`).
- *
- * Events: `lintje-seek` (seconds), `lintje-segment-edit` (id), `lintje-segment-save`
- * `{ id, text }`, `lintje-segment-cancel` (id), `lintje-segment-speaker` `{ id, speaker }` (this
- * fragment to another speaker), `lintje-speaker-new` (id: this fragment to a speaker not named
- * yet), `lintje-speaker-rename` (the name to change everywhere).
+ * Events: `lintje-seek` `number` (seconds), `lintje-segment-edit` `string` (the id),
+ * `lintje-segment-save` `{ id, text }`, `lintje-segment-cancel` `string` (the id),
+ * `lintje-segment-speaker` `{ id, speaker }` (to another speaker), `lintje-speaker-new` `string`
+ * (the id, to a speaker not named yet), `lintje-speaker-rename` `string` (the speaker's name).
  */
 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 '../highlight/highlight.js';
 import '../../inputs/textarea/textarea.js';
 import '../../actions/menu-button/menu-button.js';
 import type { MenuEntry } from '../../actions/menu-button/menu-button.js';
-import { type BadgeTone } from '../../../primitives/badge/badge.js';
+import { type BadgeTone } from '../../feedback/badge/badge.js';
 export interface TranscriptSegment {
     id: string;
     /** When it starts, in seconds. */
@@ -86,6 +71,7 @@ export declare class LintjeTranscript extends LintjeElement {
      * its colours. Without it, those in `segments`.
      */
     speakers?: string[] | null;
+    /** The text only, as a preview beside a live recording: no editing, speaker menu or seeking. */
     readonly: boolean;
     /** Live: the segment of who speaks now. */
     speakingId?: string | null;
@@ -95,15 +81,16 @@ export declare class LintjeTranscript extends LintjeElement {
     layout: TranscriptLayout;
     /** The speaker's colour under the whole fragment, not only in its bar. */
     tinted: boolean;
-    /** A speaker's consecutive fragments under one name. */
+    /** A speaker's consecutive fragments under one name, each keeping its own time. */
     grouped: boolean;
-    /** The recording's position in seconds. */
+    /** The recording's position in seconds; the fragment that sounds stands out with a ring. */
     currentTime?: number | null;
     /** The segment in editing; the host sets it after `lintje-segment-edit`. */
     editingId?: string | null;
     busyId?: string | null;
     /** A save that failed: the message under the field, per segment id. */
     errors: Record<string, string>;
+    /** The search hits; not `matches`, which is `Element.matches()`. */
     searchMatches: TranscriptMatches;
     /** The hit framed as current; scrolled into view when it changes. */
     currentMatch?: TranscriptMatch | null;

package/dist-elements/types/components/content/translator/translator.d.ts

@@ -1,25 +1,18 @@
 /**
- * `<lintje-translator>` — a text and its translation in one surface of two halves: the source on
- * the left, the translation on the right, each with its language above and its actions below.
- * The two languages flank the swap on the line between them. Below 768 px the halves stack.
+ * `<lintje-translator>` — a text and its translation in one surface of two halves, each with its
+ * language above and its actions below; below 768 px the halves stack.
  *
- * The source is a plain `lintje-textarea`; the host keeps `value`. The translation, the language
- * choices and the actions are the host's, in slots: `source-language`, `target-language`,
- * `target` (a plain `lintje-streaming-text`), `source-actions`, `target-note` (the AI label, right
- * under the translation) and `target-actions`.
+ * The source is a `lintje-textarea` whose `value` the host keeps. The translation, the language
+ * choices and the actions are the host's, in slots: `target` takes a plain
+ * `lintje-streaming-text`, `target-note` the AI label under it. After a swap a status region says
+ * so, with the languages the host's choices then show.
  *
- * `variant="documents"` keeps the language bar and the swap and puts the default slot under them
- * at full width, for documents to translate: the upload and the queue.
- *
- * After the swap a status region says so, with the languages the host's choices then show
- * ("Talen omgewisseld: Engels naar Nederlands").
- *
- * Events: `lintje-text-change` (the source text), `lintje-languages-swap`.
+ * Events: `lintje-text-change` `string` (the source text), `lintje-languages-swap`.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
 import '../../inputs/textarea/textarea.js';
-import '../../../primitives/icon-button/icon-button.js';
+import '../../actions/icon-button/icon-button.js';
 export declare class LintjeTranslator extends LintjeElement {
     #private;
     static styles: import("lit").CSSResult;
@@ -32,7 +25,10 @@ export declare class LintjeTranslator extends LintjeElement {
     sourceLabel: string;
     /** The translation half's accessible name. */
     targetLabel: string;
-    /** `text` (default): the source and its translation; `documents`: the languages over the default slot. */
+    /**
+     * `text` (default): the source and its translation. `documents`: the language bar and the swap
+     * over the default slot at full width, for documents to translate: the upload and the queue.
+     */
     variant: 'text' | 'documents';
     /** What the status region says after a swap. */
     spoken: string;

package/dist-elements/types/components/content/video-player/video-player.d.ts

@@ -1,22 +1,17 @@
 /**
  * `<lintje-video-player>` — the picture of a recording, with the audio player's controls.
  *
- * The controls stand under the picture, never over it, also in full screen: the bar with the time
- * on one line; play, mute, "Meer opties" and full screen on the next, at any width. The menu holds
- * the captions (also on C), the audio description when `described-src` gives a version with one
- * (it switches at the same moment) and the speed; a speed other than 1× stands beside the time. The
- * controls are `aria-disabled` (in the tab order, the press swallowed) while the video loads or
- * cannot be loaded; a failed load says so on the picture, with "Opnieuw proberen". The `<video>`
- * has no controls of its own and never starts by itself. It does not fetch the captions. The big
- * play button stands on the picture only before the start, and the caption shows only without
- * it, so the two never cover each other.
+ * The controls stand under the picture, never over it, also in full screen. The video never starts
+ * by itself, and the element does not fetch the captions: the host gives them in `segments`. While
+ * the video loads or cannot be loaded, the controls stay in the tab order but do nothing; a failed
+ * load says so on the picture, with "Opnieuw proberen".
  *
- * Events: `lintje-time-change` (seconds, at most four times a second), `lintje-play`,
- * `lintje-pause`.
+ * Events: `lintje-time-change` `number` (seconds, at most four times a second), `lintje-seek`
+ * `number` (seconds: the reader moved the position), `lintje-play`, `lintje-pause`.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import '../../actions/menu-button/menu-button.js';
-import { LintjePlayerElement } from '../audio-player/player.js';
+import { LintjePlayerElement } from '../shared/player.js';
 export interface TimedText {
     start: number;
     text: string;
@@ -26,9 +21,12 @@ export declare class LintjeVideoPlayer extends LintjePlayerElement {
     static properties: PropertyDeclarations;
     /** The captions: the transcript's segments, or any `{ start, text }[]`. */
     segments: TimedText[];
-    /** Whether the captions show; the reader switches it. */
+    /** Whether the captions show; the reader switches it, in "Meer opties" or with C. */
     captions: boolean;
-    /** The same video with an audio description: "Meer opties" offers it when given. */
+    /**
+     * The same video with an audio description: "Meer opties" offers it when given, and the switch
+     * keeps the moment.
+     */
     describedSrc?: string;
     /** Whether the described version plays; the reader switches it. */
     described: boolean;

package/dist-elements/types/components/feedback/ai-label/ai-label.d.ts

@@ -1,16 +1,15 @@
 /**
  * `<lintje-ai-label>` — says that a model made the content below it.
  *
- * A neutral badge (provenance, not a verdict) and the one badge that may wrap, so a long name
- * stays on a 390 px screen. Place it above the block, once. `checked-by` turns it into
- * "Gecontroleerd door …", and the gear-and-brain mark into a check.
+ * A neutral badge: provenance, not a verdict. It is the one badge that may wrap, so a long name
+ * stays on a 390 px screen. Place it above the block, once.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
 export declare class LintjeAiLabel extends LintjeElement {
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
-    /** Who checked the text: "J. de Vries". */
+    /** Who checked the text: "J. de Vries". The label reads "Gecontroleerd door …", with a check. */
     checkedBy?: string;
     /** The line behind the badge; unchecked it defaults to the advice to check the text. */
     hint?: string;

package/dist-elements/types/components/feedback/announcement/announcement.d.ts

@@ -1,22 +1,19 @@
 /**
  * `<lintje-announcement>` — a status message: warning, outage, info or ok.
  *
- * A live region only with `live: true`; drawn empty first and filled on the next frame so screen
- * readers announce it. `slot="action"` stands under the text, `slot="media"` beside it: an image
- * that belongs to the message, such as a code to scan. Closed with the focus on its close button,
- * it hands the focus to the next stop on the page (else the one before) before it goes.
+ * It is a live region only with `live: true` in its data. `slot="media"` stands beside the text:
+ * an image that belongs to the message, such as a code to scan. Closed with the focus on its close
+ * button, it hands the focus to the next stop on the page, else the one before.
  */
 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 '../../../primitives/tile/tile.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
+import '../../layout/tile/tile.js';
 import type { AnnouncementViewData } from '../../../types.js';
 export declare class LintjeAnnouncement extends LintjeGridItemElement {
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
     data?: AnnouncementViewData | null;
-    /** The tighter form. Below 768 px every announcement is compact. */
-    compact: boolean;
     dismissed: string | null;
     filled: string | null;
     private fillFrame;
@@ -32,7 +29,6 @@ export declare class LintjeAnnouncement extends LintjeGridItemElement {
     protected updated(changed: PropertyValues<this>): void;
     protected render(): TemplateResult | typeof nothing;
     private block;
-    private content;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist-elements/types/{primitives → components/feedback}/badge/badge.d.ts

@@ -1,15 +1,14 @@
 /**
- * `<lintje-badge>` — a status as a word; two words at most (rule 13). `variant="count"` is the
- * quiet counter in a tab or button, `variant="unread"` the round counter of the menu.
+ * `<lintje-badge>` — a status as a word, two words at most; the word carries the meaning, also
+ * beside an `icon`.
  *
  * A root that draws a badge without the element calls `renderBadge()` and adopts `badgeStyles`,
  * as `renderIcon()` / `iconStyles` do.
  */
 import { type CSSResult, type PropertyDeclarations, type TemplateResult } from 'lit';
-import { LintjeElement } from '../../core/element.js';
-export type BadgeTone = 'neutral' | 'subtle' | 'busy' | 'success' | 'warning' | 'error' | 'info' | 'attention'
-/** A recording that runs now: the error fill with a dot before the word. */
- | 'live';
+import { LintjeElement } from '../../../core/element.js';
+import type { Tone } from '../../shared/tone.js';
+export type BadgeTone = Tone;
 export type BadgeVariant = 'label' | 'count' | 'unread';
 export declare const badgeStyles: CSSResult;
 export interface BadgeOptions {
@@ -23,14 +22,19 @@ export interface BadgeOptions {
     muted?: boolean;
     /** BEM classes of the surrounding block, space-separated. */
     className?: string;
+    /** An icon file name before the word, in the word's colour; a label badge only. */
+    icon?: string;
 }
 export declare function renderBadge(options: BadgeOptions): TemplateResult;
 export declare class LintjeBadge extends LintjeElement {
     static styles: CSSResult[];
     static properties: PropertyDeclarations;
     tone: BadgeTone;
+    /** `count`: the quiet counter in a tab or button; `unread`: the round counter of the menu. */
     variant: BadgeVariant;
     label?: string;
+    /** An icon file name before the word. */
+    icon?: string;
     protected render(): TemplateResult;
 }
 declare global {

package/dist-elements/types/components/feedback/conflict-alert/conflict-alert.d.ts

@@ -1,16 +1,15 @@
 /**
  * `<lintje-conflict-alert>` — someone else changed the item while the reader was editing it.
  *
- * A compact live warning announcement above the form with three actions. It takes the focus when
- * it appears, so the keyboard continues at its buttons. It saves nothing; the host answers the
- * events. `lintje-conflict-compare` lets a host fetch the differences only when asked.
+ * A live warning above the form, with three actions; it takes the focus when it appears. It saves
+ * nothing: the host answers the events, and fetches the differences only when asked.
  *
  * Events: `lintje-conflict-keep-mine`, `lintje-conflict-take-theirs`, `lintje-conflict-compare`
- * `{ open }`.
+ * `{ open }` (the differences open or close).
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/button/button.js';
+import '../../actions/button/button.js';
 import '../announcement/announcement.js';
 import '../../content/highlight/highlight.js';
 import type { AnnouncementViewData } from '../../../types.js';

package/dist-elements/types/components/feedback/empty-state/empty-state.d.ts

@@ -1,15 +1,13 @@
 /**
  * `<lintje-empty-state>` — the empty state on its own, outside a tile.
  *
- * Not an error: a failure is the tile's error state or an inline alert. It brings no action or
- * words of its own; the host chooses them and slots the action. `compact` is one muted line
- * with a link button after it. `status` puts it in a `role="status"` for when it appears after
- * an action: drawn empty first and filled on the next frame, since a region that arrives with
- * its words is not announced.
+ * Not an error: a failure is the tile's error state or an inline alert. It brings no words or
+ * action of its own; the host chooses them and slots the action.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-export type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+import { type HeadingLevel } from '../../shared/empty-state-block.js';
+export type { HeadingLevel } from '../../shared/empty-state-block.js';
 export declare class LintjeEmptyState extends LintjeElement {
     #private;
     static styles: import("lit").CSSResult[];
@@ -20,6 +18,7 @@ export declare class LintjeEmptyState extends LintjeElement {
     text?: string;
     /** An icon file name. Not drawn when `compact`. */
     icon?: string;
+    /** One muted line, with a link button after it. */
     compact: boolean;
     level: HeadingLevel;
     /** Announces the state: it appeared after an action. */
@@ -29,9 +28,7 @@ export declare class LintjeEmptyState extends LintjeElement {
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues<this>): void;
     private onSlotChange;
-    private renderHeading;
     protected render(): TemplateResult;
-    private content;
 }
 declare global {
     interface HTMLElementTagNameMap {