lintje 0.2.0 → 0.4.0

package/dist-elements/types/components/{forms/form → shared}/controls.d.ts

@@ -1,6 +1,7 @@
 /**
- * What `lintje-form`, `lintje-form-section` and `lintje-form-actions` share: finding the controls
- * in their light DOM, and setting a property on them that can be handed back.
+ * What the holders of controls (`lintje-form`, `lintje-form-section`, `lintje-form-actions`,
+ * `lintje-dialog`) and the controls themselves share: finding the controls in a light DOM,
+ * reading and writing their values, and setting a property on them that can be handed back.
  *
  * A `<fieldset disabled>` in a shadow root disables nothing slotted into it, so each holder
  * disables controls itself and hands back the state it found, or a control the host had

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

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

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

@@ -0,0 +1,26 @@
+/**
+ * The empty state as a render function, so a tile draws "nothing here" with the same block as
+ * `<lintje-empty-state>`. With `status` it is a region drawn empty until `filled`: a region that
+ * arrives with its words is not announced.
+ */
+import { nothing, type CSSResult, type TemplateResult } from 'lit';
+export type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+export declare const emptyStateBlockStyles: CSSResult;
+export interface EmptyStateBlockOptions {
+    /** Not drawn when `compact`. */
+    heading?: string;
+    /** The one sentence below the heading, or the whole line when `compact`. */
+    text?: string;
+    /** An icon file name. Not drawn when `compact`. */
+    icon?: string;
+    level?: HeadingLevel;
+    /** One muted line with what follows it, for inside content. */
+    compact?: boolean;
+    /** A `role="status"` region, drawn empty until `filled`. */
+    status?: boolean;
+    filled?: boolean;
+    /** What the reader can do next: the element's default slot. Hidden while `actionShown` is off. */
+    action?: TemplateResult | typeof nothing;
+    actionShown?: boolean;
+}
+export declare function renderEmptyStateBlock(options: EmptyStateBlockOptions): TemplateResult;

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

@@ -0,0 +1,58 @@
+/**
+ * Actions that do not fit on one line give way to one menu, "Meer", in front of the ones that
+ * stay: the page header's actions today. `overflowCount` is the arithmetic; `OverflowController`
+ * measures and applies it for an element whose actions are slotted `lintje-button`s.
+ *
+ * Both widths compared are independent of the outcome, so the choice cannot flip back and forth:
+ * an action in the menu stays laid out, invisible (`data-lintje-overflow`, hidden by the owner's
+ * `::slotted` rule), and the menu's trigger stays laid out the same way while it is spare, so
+ * every natural width can be read in either state. The owner's order is the priority: the first
+ * action goes first, the last never goes, and a menu of one row does not exist.
+ */
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { LintjeButton } from '../actions/button/button.js';
+import type { MenuEntry } from '../actions/menu-button/menu-button.js';
+export interface OverflowItem {
+    width: number;
+    /** Never goes into the menu: the last action, and anything that is not a button. */
+    fixed: boolean;
+}
+/**
+ * How many of the collapsible items, from the first, go into the menu so that the rest and the
+ * menu's trigger fit in `room` on one line. One alone never goes: then two go, or, with no second
+ * one to go with it, none.
+ */
+export declare function overflowCount(items: OverflowItem[], menuWidth: number, gap: number, room: number): number;
+export interface OverflowHost extends ReactiveControllerHost, HTMLElement {
+    readonly renderRoot: HTMLElement | DocumentFragment;
+}
+export interface OverflowOptions {
+    /** The box the actions must fit in on one line, in the host's render root. */
+    row: string;
+    /** The `lintje-menu-button` that is "Meer", in the host's render root. */
+    menu: string;
+    /** The name of the slot the actions are in. */
+    slot: string;
+}
+export declare class OverflowController implements ReactiveController {
+    #private;
+    private readonly host;
+    private readonly options;
+    /** The buttons that went into the menu, in order. */
+    collapsed: LintjeButton[];
+    constructor(host: OverflowHost, options: OverflowOptions);
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    /** The actions in the slot, in order. */
+    get actions(): HTMLElement[];
+    /** The menu's rows: one per collapsed button, a danger button after a separator. */
+    items(): MenuEntry[];
+    /** A chosen row clicks its button, so the owner's own listener sees the click. */
+    activate(value: string): void;
+    /**
+     * Reads the room and every natural width, and asks for a render when the count changes. The
+     * attributes are written after that render (`hostUpdated`), never inside the observer: a
+     * synchronous change there would resize the row during the observer's own delivery.
+     */
+    measure(): void;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * The one set of tones, and the one set of work states, every element translates its own words
+ * into. A tone is a colour with its glyph; a state is what a task is doing. A host never maps:
+ * an element that speaks its own vocabulary (the table's delivery status, a message's kind)
+ * translates it here.
+ */
+/** A status colour with its glyph. `subtle` and `live` are the quiet and the recording form. */
+export type Tone = 'neutral' | 'subtle' | 'busy' | 'success' | 'warning' | 'error' | 'info' | 'attention' | 'live';
+/** The glyph that says what the tone means; the colour is never the only carrier (rule 13). */
+export declare const TONE_ICON: Partial<Record<Tone, string>>;
+/** The word a tone stands for when an element has nothing more specific to say. */
+export declare const TONE_WORD: Record<Tone, string>;
+/** What a task is doing: the queue, a progress bar and a status word share it. */
+export type WorkState = 'queued' | 'busy' | 'paused' | 'done' | 'error' | 'cancelled';
+export declare const WORK_STATE_TONE: Record<WorkState, Tone>;
+export declare const WORK_STATE_LABEL: Record<WorkState, string>;
+/** How content stands: drawn, still coming, nothing to draw, or failed. */
+export type ContentStateKind = 'ready' | 'loading' | 'empty' | 'error';

package/dist-elements/types/components/tables/activity-log/activity-log.d.ts

@@ -1,13 +1,12 @@
 /**
  * `<lintje-activity-log>` — a timeline of what happened to one item, newest first.
  *
- * Shows `limit` entries and "Toon eerdere" for ten more; when that press removes the button,
- * focus moves to the first new entry. The host sends the entries in order with `when` already
- * written in Dutch.
+ * The host sends the entries in order, with `when` already written in Dutch. "Toon eerdere" shows
+ * ten more.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/button/button.js';
+import '../../actions/button/button.js';
 export interface ActivityEntry {
     /** A name, or "Systeem". */
     who: string;

package/dist-elements/types/components/tables/card/card.d.ts

@@ -1,32 +1,23 @@
 /**
- * `<lintje-card>` — one item of a collection: a product, a dataset, a recording, an app. A muted
- * line above the title (its kind, its owner), the title, a line of text, optionally a few facts
- * as a small table, a status as a glyph and its word, and at most two actions. A screenshot stands above it, a logo beside the title.
- * Square and flat; in a grid it is drawn by `lintje-card-list`.
+ * `<lintje-card>` — one item of a collection: a product, a dataset, a recording, an app.
  *
- * `layout="horizontal"` puts the picture or logo in a column on the left, for a long list; below
- * 768 px it stands as the vertical card.
- *
- * A card is either a link or carries actions, never both. Without actions and with `href` the
- * whole card is clickable and the title is its one tab stop; with actions only the title and the
- * actions are. The card knows no domain: "toegang" or "eigenaar" are the host's words.
- *
- * `iconActions` stand beside the title as icon buttons, also on a card that is a link: an action
- * on the item itself, such as marking it. One with `pressed` is a switch; the card keeps nothing
- * and the host sets the new `pressed` after the event.
- *
- * `layout="horizontal"` wants a column of at least `--w-card-wide`; `lintje-card-list` keeps to it.
+ * Square and flat; in a grid it is drawn by `lintje-card-list`. A card is either a link or carries
+ * actions, never both: with an `href` and no actions the whole card is clickable. Icon actions
+ * stand beside the title, also on a card that is a link; one with `pressed` is a switch, and the
+ * host sets the new `pressed` after the event. The card knows no domain: "toegang" or "eigenaar"
+ * are the host's words.
  *
  * Events: `lintje-navigate` `{ href }` (a plain click on the title, the card or an action with an
- * `href` in this tab), `lintje-card-action` `{ id, value }` (an action without `href`) and
- * `{ id, value, pressed }` (an icon action, with a switch's value asked for).
+ * `href`), `lintje-card-action` `{ id, value, pressed? }` (an action without `href`; `pressed`
+ * from an icon action that is a switch).
  */
 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/skeleton/skeleton.js';
-export type CardStatusTone = 'neutral' | 'success' | 'info' | 'attention' | 'error';
+import { type Tone } from '../../shared/tone.js';
+import '../../actions/button/button.js';
+import '../../actions/icon-button/icon-button.js';
+import '../../feedback/skeleton/skeleton.js';
+export type CardStatusTone = Tone;
 export interface CardStatus {
     /** The word that carries the status: "Je hebt toegang". */
     label: string;
@@ -94,7 +85,10 @@ export declare class LintjeCard extends LintjeElement {
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
     data?: CardData;
-    /** `horizontal`: the picture in a column on the left, for a long list. */
+    /**
+     * `horizontal`: the picture or logo in a column on the left, for a long list; below 768 px the
+     * vertical card. It wants a column of at least `--w-card-wide`, as `lintje-card-list` keeps.
+     */
     layout: CardLayout;
     /** The level of the title, 2 to 4: a card stands under the page's or a section's heading. */
     headingLevel: 2 | 3 | 4;

package/dist-elements/types/components/tables/card-list/card-list.d.ts

@@ -1,15 +1,10 @@
 /**
- * `<lintje-card-list>` — a collection as cards: a real list, in as many columns as fit up to
- * `max-columns`, every card in a row as tall as the tallest. Below 768 px one column.
- * `layout="horizontal"` draws every card across, two side by side at most where they fit.
+ * `<lintje-card-list>` — a collection as cards: a real list, in as many columns as fit, every
+ * card in a row as tall as the tallest; below 768 px one column.
  *
- * Slots: `empty` for the way out under the empty text (a link, a button).
- *
- * It draws `lintje-card` for each item and adds nothing of its own; the cards' events pass
- * through. While `loading` it holds skeleton cards, so the page does not jump; a status region
- * that is always there says it loads, and then how many it loaded.
- *
- * Events: those of its cards.
+ * It draws a `lintje-card` for each item and adds nothing of its own: the cards' events reach the
+ * host as they are. While `loading` it holds skeleton cards, so the page does not jump. The
+ * `empty` slot takes the way out under the empty text, such as a link.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
@@ -22,7 +17,10 @@ export declare class LintjeCardList extends LintjeElement {
     items: CardData[];
     /** Names the list for a screen reader when no heading right above it does. */
     label?: string;
-    /** `horizontal`: every card with its picture in a column on the left, for a long list. */
+    /**
+     * `horizontal`: every card with its picture in a column on the left, for a long list; two side
+     * by side at most, where they fit.
+     */
     layout: CardLayout;
     /** The level of every card's title, 2 to 4. */
     headingLevel: 2 | 3 | 4;

package/dist-elements/types/components/tables/data-table/actions.d.ts

@@ -7,7 +7,7 @@
  */
 import { type TemplateResult } from 'lit';
 import '../../actions/menu-button/menu-button.js';
-import '../../../primitives/button/button.js';
+import '../../actions/button/button.js';
 import type { TableAction } from '../../../types.js';
 /** The rows a Shift+click checks: `anchor` to `target` inclusive; only `target` without an anchor. */
 export declare function rangeIds(order: readonly string[], anchor: string | null, target: string): string[];

package/dist-elements/types/components/tables/data-table/data-table.d.ts

@@ -1,29 +1,27 @@
 /**
- * `<lintje-data-table>` — the data table, inside a tile. Below 768 px it switches to a
- * two-column representation. Missing values are a muted dash, never 0 (rule 15).
+ * `<lintje-data-table>` — the data table, inside a tile; below 768 px a two-column list.
  *
- * The table never filters, saves or confirms: it asks and the host answers in `data`. Its
- * extensions live in `editing.ts`, `actions.ts` and `filters.ts`. `bare` draws the table alone,
- * for a component that already stands in a tile; `plain` draws it on an application page,
- * without a tile but with its states.
+ * A missing value is a muted dash, never 0. The table never filters, saves or confirms: it shows a
+ * change at once, and the host confirms it in the next `data`. Open rows and collapsed groups are
+ * the table's own: it sends nothing for them.
  *
- * Events: `lintje-sort-change` `{key, direction} | null`, `lintje-row-click` `{id, label, href?}`,
- * `lintje-row-open` `{id, label, href?}`,
- * `lintje-checked-change` (the keys). Each shows the change at once and expects the host to
- * confirm it in the next `data`. With the extensions: `lintje-cell-edit` `{id, column, value}`,
- * `lintje-row-action` `{id, action}`, `lintje-bulk-action` `{ids, action}`,
- * `lintje-filter-change` `{column, value}`, `lintje-columns-change` `{order, hidden}`.
+ * Events: `lintje-sort-change` `{ key, direction } | null`, `lintje-row-click`
+ * `{ id, label, href? }`, `lintje-row-open` `{ id, label, href? }`, `lintje-checked-change`
+ * `string[]`, `lintje-cell-edit` `{ id, column, value }`, `lintje-row-action` `{ id, action }`,
+ * `lintje-bulk-action` `{ ids, action }`, `lintje-filter-change` `{ column, value }`,
+ * `lintje-columns-change` `{ order, hidden }`.
  */
 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 '../../feedback/empty-state/empty-state.js';
 import '../description-list/description-list.js';
 import '../../actions/menu-button/menu-button.js';
 import '../pagination/pagination.js';
-import '../../../primitives/status-dot/status-dot.js';
-import '../../../primitives/skeleton/skeleton.js';
-import '../../../primitives/tile/tile.js';
+import '../../feedback/status-dot/status-dot.js';
+import '../../feedback/skeleton/skeleton.js';
+import '../../layout/tile/tile.js';
 import type { DataTableData, SortState } from '../../../types.js';
 import { type FilterValue } from './filters.js';
 type Panel = {
@@ -56,8 +54,12 @@ export declare class LintjeDataTable extends LintjeContentTileElement {
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
     data?: DataTableData | null;
+    /** The table alone, for a component that already stands in a tile. */
     bare: boolean;
-    /** On an application page: no tile, so no title or tile buttons; the page's heading names it. */
+    /**
+     * On an application page: no tile, so no title or tile buttons, but with its states; the page's
+     * heading names it.
+     */
     plain: boolean;
     /** The sort and checked rows are shown before the host confirms them. */
     sort: SortState | null;
@@ -71,8 +73,10 @@ export declare class LintjeDataTable extends LintjeContentTileElement {
     columnOrder: string[] | null;
     hiddenKeys: string[];
     panel: Panel | null;
-    /** The phone rows whose other columns are open. */
-    mobileOpen: string[];
+    /** The rows whose detail is open: on the phone the same list, so turning the screen keeps them. */
+    openRows: string[];
+    /** The groups of `groupBy` that stand collapsed, by their value. */
+    collapsedGroups: string[];
     /** What the table's status region says: a sort, a page, a selection, a filter's result. */
     liveMessage: string;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
@@ -83,6 +87,22 @@ export declare class LintjeDataTable extends LintjeContentTileElement {
     protected updated(changed: PropertyValues<this>): void;
     private get columns();
     private get rows();
+    /** The column `groupBy` names; it heads its groups and is not a column of its own. */
+    private get groupColumn();
+    private get grouped();
+    private get groupsPerPage();
+    /**
+     * `rows` in groups: the groups in the order they first occur in the host's rows, each group's
+     * rows in the order of `rows` as given (already sorted).
+     */
+    private groupsOf;
+    private toggleGroup;
+    /**
+     * What a row's detail lists: the columns the chooser hides, then `detailFields`. Empty: rows
+     * have no detail on desktop.
+     */
+    private get detailColumns();
+    private toggleRow;
     private rowKey;
     /** The row's key, the name in its first column and the `href` the host minted on the row. */
     private rowDetail;
@@ -114,11 +134,24 @@ export declare class LintjeDataTable extends LintjeContentTileElement {
     private clearFilter;
     private chooserItems;
     private changeColumns;
+    /** Every column shown, in the order the host declared them. */
+    private get columnsAreDefault();
+    private resetColumns;
+    /** "Filters wissen": one `lintje-filter-change` per active column, as a chip would send. */
+    private clearAllFilters;
     protected render(): TemplateResult | typeof nothing;
     private csv;
+    /**
+     * The table, or its state. In a tile the skeleton goes in the tile's `loading` slot and empty
+     * and error are the tile's; `plain`, without a tile, composes the elements itself.
+     */
     private content;
     private table;
+    /** "6 van 131 rijen" while a filter narrows the rows and the host gave the total. */
+    private get filteredCount();
     private toolbar;
+    /** "Alles inklappen" while any group is open, else "Alles uitklappen". */
+    private groupToggle;
     /**
      * Below 768 px only one measure has a header: "Sorteren" reaches every sortable column. Hidden
      * from 768 px, where every column's header sorts.
@@ -128,9 +161,45 @@ export declare class LintjeDataTable extends LintjeContentTileElement {
     private selectionBar;
     private panels;
     private fullTable;
+    /**
+     * A row of no height with each column's widest value over every row, not only this page's: a
+     * sort or another page shows other rows, and the columns keep their width.
+     */
+    private sizerRow;
+    /** Per column the value whose words are longest, over every row; kept while the data stands. */
+    private widestRow;
+    /** A column's head: the sort button and, for a filterable column, its funnel. */
+    private headerCell;
+    /** The desktop's last column: the rows' menus, and in its head the column chooser. */
+    private get actionColumn();
+    private alignsRight;
+    /** One body row and, while it is open, its detail under it. */
+    private fullRow;
+    /** The button that opens a row's detail; the phone's row and the desktop's share it. */
+    private rowToggle;
+    /** What a row's columns leave out, as label and value. */
+    private detailList;
+    /**
+     * A group's heading: a button with the group's word and its count. Collapsed, the row carries
+     * the group's subtotals, so a collapsed table still reads.
+     */
+    private groupRow;
+    private subtotalRow;
+    private totalsRow;
+    /** A totals or subtotal row: its label in the name's place, the host's values under their columns. */
+    private sumRow;
+    private totalCell;
     private editableCell;
     private mobileTable;
-    private toggleMobileRow;
+    /** A phone row: the name and its line, one measure, the toggle and the menu; its list under it. */
+    private mobileRow;
+    private mobileGroupRow;
+    private mobileSumRow;
+    /**
+     * A total's value with the word before it that says how it was made. A threshold judges one
+     * row, not a sum: a total shows its figure plain.
+     */
+    private totalContent;
     /** Enter or Space on the row itself; a key meant for a control inside it stays that control's. */
     private rowKeydown;
     /** The page is view state, not a number: it stays out of the URL. The table counts from 0. */

package/dist-elements/types/components/tables/data-table/editing.d.ts

@@ -7,7 +7,7 @@
  * never keeps the value. Only the desktop table edits.
  */
 import { type TemplateResult } from 'lit';
-import '../../../primitives/spinner/spinner.js';
+import '../../feedback/spinner/spinner.js';
 import type { CellValue, DataTableData, TableCellRef, TableColumnData } from '../../../types.js';
 export interface CellPosition {
     row: number;

package/dist-elements/types/components/tables/data-table/filters.d.ts

@@ -6,8 +6,9 @@
  * stays first and shown. Range and period filters are not here.
  */
 import { type TemplateResult } from 'lit';
-import '../../../primitives/popover/popover.js';
-import '../../../primitives/button/button.js';
+import '../../overlays/popover/popover.js';
+import '../../actions/button/button.js';
+import '../../overlays/tooltip/tooltip.js';
 import '../../overlays/drawer/drawer.js';
 import '../sortable-list/sortable-list.js';
 import type { SortableItem } from '../sortable-list/sortable-list.js';
@@ -28,7 +29,6 @@ export declare function columnsChange(first: string, order: readonly string[], c
 /** How the focus left a column panel: Tab past its first or last stop, or anywhere else. */
 export type PanelLeave = 'back' | 'forward' | 'away';
 export declare function renderFunnel(column: TableColumnData, value: FilterValue | null | undefined, expanded: boolean, onOpen: (anchor: HTMLElement) => void): TemplateResult;
-export declare function renderFilterDot(): TemplateResult;
 export declare function renderFilterField(column: TableColumnData, value: FilterValue | undefined, onChange: (value: FilterValue) => void): TemplateResult;
 export declare function renderFilterPopover(options: {
     column: TableColumnData;
@@ -52,14 +52,20 @@ export declare function renderFiltersSheet(options: {
 export declare function renderToolbar(options: {
     columns: TableColumnData[];
     values: Record<string, FilterValue>;
-    shown: number;
-    total: number | undefined;
+    /** "6 van 131 rijen" while a filter is active and no pager below says it; else empty. */
+    count: string;
     /** Below 768 px, beside "Filters": the sort on any column. */
     sortMenu?: unknown;
+    /** The table's own controls at the toolbar's end ("Alles inklappen"). */
+    chooser?: unknown;
     onClearFilter: (column: string, button: HTMLElement) => void;
+    onClearAll: (button: HTMLElement) => void;
     onOpenSheet: () => void;
 }): TemplateResult;
-/** The column chooser's button, in the head of the actions column: as narrow as the row menus. */
+/**
+ * "Kolommen kiezen": a quiet icon at the end of the head, above the rows' menus, where the columns
+ * are. The tooltip says its name, which is already the button's own.
+ */
 export declare function renderChooserButton(expanded: boolean, onOpen: (anchor: HTMLElement) => void): TemplateResult;
 export declare function renderColumnChooser(options: {
     first: TableColumnData;
@@ -67,6 +73,9 @@ export declare function renderColumnChooser(options: {
     anchor: Element | null;
     onOrder: (order: string[]) => void;
     onChecked: (checked: string[]) => void;
+    /** Every column shown, in the host's order; disabled while that is what stands. */
+    onReset: () => void;
+    isDefault: boolean;
     onClose: () => void;
     onLeave: (how: PanelLeave) => boolean;
 }): TemplateResult;

package/dist-elements/types/components/tables/description-list/description-list.d.ts

@@ -1,18 +1,14 @@
 /**
  * `<lintje-description-list>` — label-value pairs for a detail or a review screen, a real `<dl>`.
  *
- * A missing value (`null`, `undefined` or `''`) is a muted dash, never 0 (rule 15). A plain click
- * on a link is cancelled and sent as `lintje-navigate`; a modified click is the browser's.
- *
- * `layout="grid"` sets the pairs as cells side by side, for a summary of what is about to happen
- * ("Deze opname"): a cell can take two columns, carry an icon and a tone, show its value as tags,
- * and take richer content through a slot named by the item (`slot`). Below 30rem of its own width
- * it has two columns.
+ * A missing value (`null`, `undefined` or `''`) is a muted dash, never 0. A plain click on a link
+ * is cancelled and sent as `lintje-navigate`.
  *
  * Events: `lintje-navigate` `{ href }`.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
+import { type Tone } from '../../shared/tone.js';
 /** A link on the right of the value, for changing it ("Locatie wijzigen" as accessible name). */
 export interface DescriptionAction {
     href: string;
@@ -35,14 +31,14 @@ export interface DescriptionItem {
     /** Grid: the one figure a reader looks at, as large as a key figure. */
     large?: boolean;
     /**
-     * `changed`: differs from the default, and says "Aangepast". `warning` and `error`: something to
-     * act on; the glyph comes with it, the words are the host's (in the value or its slot).
+     * `changed`: differs from the default, and says "Aangepast". A shared tone carries its
+     * glyph when it has one, and the words are the host's (in the value or its slot).
      */
     tone?: DescriptionTone;
     /** The name of a slot drawn under the value, for what a string cannot say (a meter, a button). */
     slot?: string;
 }
-export type DescriptionTone = 'changed' | 'warning' | 'error';
+export type DescriptionTone = 'changed' | Tone;
 export type DescriptionListLayout = 'row' | 'column' | 'grid';
 export declare class LintjeDescriptionList extends LintjeGridItemElement {
     static styles: import("lit").CSSResult[];
@@ -52,7 +48,12 @@ export declare class LintjeDescriptionList extends LintjeGridItemElement {
     columns: number;
     /** Grid: the cells take the surface and a frame, for a wash such as the hero's. */
     surface: boolean;
-    /** `column` keeps the label above the value at every width; `row` only below 768 px; `grid`: cells. */
+    /**
+     * `column` keeps the label above the value at every width; `row` only below 768 px. `grid` sets
+     * the pairs as cells side by side, for a summary of what is about to happen ("Deze opname"): a
+     * cell can take two columns, an icon and a tone, show its value as tags, and take richer content
+     * through a slot named by the item (`slot`).
+     */
     layout: DescriptionListLayout;
     private follow;
     private value;

package/dist-elements/types/components/tables/list/list.d.ts

@@ -1,37 +1,26 @@
 /**
- * `<lintje-list>` — rows for what needs no columns: title, a muted line, a fact or actions. It is
- * also the work list: what someone made or had made, in progress or done, with the kind as an
- * icon, the state as a word, the progress as a bar, and rows grouped under a moment ("Vandaag").
- * A row's title is one line, cut with an ellipsis; it wraps where no pointer shows its tooltip:
- * below 768 px, without hover, and under the keyboard's focus. A run's moment is a heading at
- * `heading-level`.
+ * `<lintje-list>` — rows for what needs no columns: title, a muted line, a fact or actions.
  *
- * The whole row is clickable but the title is the one tab stop; a row with `clickable: false` opens
- * nothing, and its title is plain text or, with an `href`, only a link. It does not navigate: a plain
- * click is cancelled and sent as `lintje-row-click`; a modifier click on a title link is the
- * browser's. A menu's `lintje-action` is stopped and sent again with its row. When the focused
- * control leaves with an update (a row removed, an action replaced), the focus goes to the same
- * row's other control, else the next row, the previous one, or the list itself. A rename that ends
- * gives the focus to its row's first control, found by its id or, saved under a new one, its place.
+ * It is also the work list: what someone made or had made, with its kind, state and progress, in
+ * runs under a moment ("Vandaag"). It does not navigate: a plain click on a row is cancelled and
+ * sent as `lintje-row-click`, and a link row in a menu also sends `lintje-navigate` after its
+ * `lintje-row-action`. A row with `rename` turns its title into a field in place; the host keeps
+ * that state, as for every row.
  *
- * A row with `rename` turns its title into a field in place, with its save and cancel: renaming
- * needs no dialog. The host keeps the state, as it does for every row.
- *
- * Events: `lintje-row-click` `{ id, label, href? }`, `lintje-row-action` `{ id, label, value }`
- * (every chosen menu row, a link row included, and the row's own `action`), `lintje-navigate` `{ href }` (from a link row in a
- * menu, after its `lintje-row-action`), `lintje-row-rename` `{ id, value }` and
- * `lintje-row-rename-cancel` `{ id }` (Enter and Escape too).
+ * Events: `lintje-row-click` `{ id, label, href? }`, `lintje-row-action` `{ id, label, value }` (a
+ * chosen menu row or the row's own action), `lintje-row-rename` `{ id, value }`,
+ * `lintje-row-rename-cancel` `{ id }`.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
 import '../../feedback/empty-state/empty-state.js';
 import '../../actions/menu-button/menu-button.js';
 import '../../inputs/text-input/text-input.js';
-import '../../../primitives/badge/badge.js';
-import '../../../primitives/button/button.js';
-import '../../../primitives/progress-bar/progress-bar.js';
+import '../../feedback/badge/badge.js';
+import '../../actions/button/button.js';
+import '../../feedback/progress-bar/progress-bar.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 ListItem {
     id: string;
     title: string;