lintje 0.1.1

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

@@ -0,0 +1,12 @@
+/**
+ * The downloads a tile offers: the numbers as CSV (semicolons, decimal comma and a byte order
+ * mark, so a Dutch spreadsheet opens columns) and the chart's `<svg>` as PNG.
+ * A missing value is an empty cell, never 0 (rule 15).
+ */
+export type CsvCell = string | number | null | undefined;
+export declare function toCsv(rows: CsvCell[][]): string;
+export declare function downloadCsv(filename: string, rows: CsvCell[][]): void;
+/** The surface a PNG is drawn on; an empty string leaves the PNG transparent. */
+export declare function surfaceColour(svg: Element): string;
+/** The chart's `<svg>` as a PNG, twice its size. The web font is not embedded: the system face. */
+export declare function downloadPng(filename: string, svg: SVGSVGElement): Promise<void>;

package/dist-elements/types/components/shared/focus-trap.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Keeps the keyboard inside an open dialog and gives the focus back to its opener.
+ *
+ * Focusables are counted at key time, through the composed tree (slots and shadow roots), and
+ * skip anything not rendered or `visibility: hidden`. Traps stack: only the topmost acts, so
+ * one Escape closes one dialog (`isTopmost()`). A popup that is no dialog asks
+ * `ownsEscape(this)` (`core/focus.ts`, re-exported here).
+ */
+export { deepActiveElement, modalAround, ownsEscape } from '../../core/focus.js';
+/** Every element under `root` that Tab stops on, in composed-tree order. */
+export declare function tabbables(root: ParentNode): HTMLElement[];
+/** The element itself when Tab stops on it, else its first stop (through its shadow root). */
+export declare function focusTarget(element: HTMLElement): HTMLElement;
+export declare class FocusTrap {
+    #private;
+    isTopmost(): boolean;
+    /**
+     * Remembers the focused element and focuses `container`, or `focus` when it is an element;
+     * `false` leaves the focus. Activated again while active, it keeps the original opener.
+     */
+    activate(container: HTMLElement, { focus }?: {
+        focus?: boolean | HTMLElement;
+    }): void;
+    /** Stops and, unless `restore` is false, refocuses the opener. May leave from mid-stack. */
+    deactivate(restore?: boolean): void;
+}

package/dist-elements/types/components/shared/sentence-end.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Where the last finished sentence in `text` ends. A stop at the very end does not count yet:
+ * the next message may turn "3." into "3.5".
+ */
+export declare function sentenceEnd(text: string): number;

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

@@ -0,0 +1,39 @@
+/**
+ * `<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.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../../../primitives/button/button.js';
+export interface ActivityEntry {
+    /** A name, or "Systeem". */
+    who: string;
+    /** The rest of the sentence: "wijzigde de omschrijving". */
+    what: string;
+    /** The moment as the host wrote it, in Dutch. */
+    when: string;
+    /** The same moment as ISO 8601, for `<time datetime>`. */
+    at?: string;
+}
+export declare class LintjeActivityLog extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    entries: ActivityEntry[];
+    heading?: string;
+    /** The heading's level on the page. */
+    level: 2 | 3 | 4 | 5 | 6;
+    /** How many entries show before "Toon eerdere". */
+    limit: number;
+    private showMore;
+    private renderHeading;
+    private entry;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-activity-log': LintjeActivityLog;
+    }
+}

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

@@ -0,0 +1,136 @@
+/**
+ * `<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`.
+ *
+ * `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.
+ *
+ * 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).
+ */
+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';
+export interface CardStatus {
+    /** The word that carries the status: "Je hebt toegang". */
+    label: string;
+    tone?: CardStatusTone;
+    /** A glyph of the set instead of the tone's own mark; `neutral` has none of its own. */
+    icon?: string;
+}
+export interface CardAction {
+    label: string;
+    /** Makes the action a link in the button's shape. */
+    href?: string;
+    /** Sent in `lintje-card-action` by an action without `href`. Give one: without it the Dutch
+     * label is sent, and a host should not branch on interface text. */
+    value?: string;
+    /** `secondary` by default; one primary per card at most. A `link` stands at the end of the bar:
+     * the way to the item's own page, "Details". */
+    variant?: 'primary' | 'secondary' | 'link';
+    /** Opens in a new tab, with the external-link mark and a word for a screen reader. */
+    external?: boolean;
+}
+export interface CardIconAction {
+    /** Sent in `lintje-card-action`. */
+    value: string;
+    /** The accessible name and the tooltip, "Favoriet"; the card adds its title to it. */
+    label: string;
+    /** An icon file name; without a file the label stands as the text. */
+    icon: string;
+    /** Makes it a switch: drawn pressed while `true`. */
+    pressed?: boolean;
+    /** The icon while pressed, so the glyph carries the state too: the filled beside the outlined. */
+    iconPressed?: string;
+}
+export interface CardFact {
+    label: string;
+    /** Text the host formatted. Missing is a dash, never 0. */
+    value: string | null;
+}
+export interface CardMedia {
+    src: string;
+    /** Empty for a picture that only decorates. */
+    alt: string;
+    /** `image` is a screenshot above the card; `logo` a square beside the title. */
+    kind?: 'image' | 'logo';
+}
+export type CardLayout = 'vertical' | 'horizontal';
+export interface CardData {
+    id: string;
+    title: string;
+    /** Makes the title a link; without actions the whole card follows it. */
+    href?: string;
+    /** The muted line above the title, its parts joined by a dot: ["Dashboard", "Dienst Vergunningen"]. */
+    meta?: string[];
+    description?: string;
+    /** A few facts as a small table under the text: "Verversing", "Bron". Left out in compact. */
+    facts?: CardFact[];
+    media?: CardMedia;
+    status?: CardStatus;
+    /** At most two are drawn. */
+    actions?: CardAction[];
+    /** Icon buttons beside the title; at most two are drawn. */
+    iconActions?: CardIconAction[];
+}
+export declare class LintjeCard extends LintjeElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    data?: CardData;
+    /** `horizontal`: the picture in a column on the left, for a long list. */
+    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;
+    /** The muted line, title, status and the first action only: a narrow column or a phone. */
+    compact: boolean;
+    /** Draws the card's shape in skeletons, at the size the content will take. */
+    loading: boolean;
+    /** What the status region says once the card has loaded: filled a frame after it is drawn. */
+    spoken: string;
+    private hasRegion;
+    private wasBusy;
+    private fillFrame;
+    private get busy();
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /** A phone has no room for a column beside the text: there every card stands upright. */
+    private get horizontal();
+    private get actions();
+    private get isLink();
+    private onCardClick;
+    private onTitleClick;
+    private onAction;
+    private renderIconAction;
+    private heading;
+    private renderTitle;
+    private renderStatus;
+    private renderFacts;
+    private renderAction;
+    private renderMedia;
+    private renderLoading;
+    protected render(): TemplateResult;
+    private renderCard;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-card': LintjeCard;
+    }
+}

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

@@ -0,0 +1,48 @@
+/**
+ * `<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.
+ *
+ * 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.
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import { LintjeElement } from '../../../core/element.js';
+import '../card/card.js';
+import '../../feedback/empty-state/empty-state.js';
+import type { CardData, CardLayout } from '../card/card.js';
+export declare class LintjeCardList extends LintjeElement {
+    static styles: import("lit").CSSResult;
+    static properties: PropertyDeclarations;
+    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. */
+    layout: CardLayout;
+    /** The level of every card's title, 2 to 4. */
+    headingLevel: 2 | 3 | 4;
+    compact: boolean;
+    loading: boolean;
+    /** How many skeleton cards stand in while loading. */
+    loadingCount: number;
+    /** The most cards side by side: more than three stops reading as a row of choices. */
+    maxColumns: number;
+    emptyText: string;
+    /** What the status region says: drawn empty first and filled a frame later, so it is heard. */
+    spoken: string;
+    private fillFrame;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+    private renderBody;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-card-list': LintjeCardList;
+    }
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Actions in `<lintje-data-table>`: a menu at the end of every row (`rowActions`) and a bar of
+ * actions on the checked rows (`bulkActions`).
+ *
+ * A row choice is `lintje-row-action` `{ id, action }`, a bar choice `lintje-bulk-action`
+ * `{ ids, action }`. The table does not confirm: the host does before a destructive action.
+ */
+import { type TemplateResult } from 'lit';
+import '../../actions/menu-button/menu-button.js';
+import '../../../primitives/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[];
+export declare function withRange(checked: readonly string[], range: readonly string[]): string[];
+export declare function renderRowActions(actions: (TableAction | 'separator')[], name: string, onAction: (action: string) => void): TemplateResult;
+export declare function renderSelectionBar(actions: TableAction[], count: number, mobile: boolean, onAction: (action: string) => void, onClear: () => void): TemplateResult;

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

@@ -0,0 +1,161 @@
+/**
+ * `<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).
+ *
+ * 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.
+ *
+ * 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}`.
+ */
+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 '../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 type { DataTableData, SortState } from '../../../types.js';
+import { type FilterValue } from './filters.js';
+type Panel = {
+    kind: 'filter';
+    column: string;
+    edges: ScrollEdges;
+} | {
+    kind: 'columns';
+    edges: ScrollEdges;
+} | {
+    kind: 'sheet';
+    edges: ScrollEdges;
+};
+/**
+ * Which sides of a horizontal scroller hide columns. One per table on screen (tile and modal): a
+ * single `ref` would flip between the two elements and watch neither.
+ */
+declare class ScrollEdges {
+    #private;
+    start: boolean;
+    end: boolean;
+    constructor(notify: () => void);
+    readonly measure: () => void;
+    /** A bound property, so lit keeps the `ref` callback. */
+    readonly watch: (element: Element | undefined) => void;
+    disconnect(): void;
+}
+export declare class LintjeDataTable extends LintjeContentTileElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    data?: DataTableData | null;
+    bare: boolean;
+    /** On an application page: no tile, so no title or tile buttons; the page's heading names it. */
+    plain: boolean;
+    /** The sort and checked rows are shown before the host confirms them. */
+    sort: SortState | null;
+    checkedIds: string[];
+    page: number;
+    /** Each representation pages on its own. */
+    mobilePage: number;
+    filterValues: Record<string, FilterValue>;
+    /** What the open filter holds before "Toepassen". */
+    filterDraft: Record<string, FilterValue>;
+    columnOrder: string[] | null;
+    hiddenKeys: string[];
+    panel: Panel | null;
+    /** The phone rows whose other columns are open. */
+    mobileOpen: string[];
+    /** What the table's status region says: a sort, a page, a selection, a filter's result. */
+    liveMessage: string;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected get dataSettings(): FrameSettings | undefined;
+    disconnectedCallback(): void;
+    protected expandChanged(open: boolean): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private get columns();
+    private get rows();
+    private rowKey;
+    /** The row's key, the name in its first column and the `href` the host minted on the row. */
+    private rowDetail;
+    private get initialSort();
+    private get activeSort();
+    /** Missing sorts lowest. */
+    private sortValue;
+    private get sortedRows();
+    private toggleSort;
+    private setSort;
+    /** Empties the region and fills it a frame later, so the same words are read again. */
+    private announce;
+    private setChecked;
+    private get shown();
+    private get filterColumns();
+    private get uncheckable();
+    private openPanel;
+    /** A column panel is a dialog: the focus goes to its first field, else its first control. */
+    private focusPanel;
+    /** With `which`, only when that panel is still the open one; `refocus` false leaves the focus. */
+    private closePanel;
+    /**
+     * Tab past the panel's first stop is its anchor, past its last the stop after the anchor. False
+     * when nothing in the table follows the anchor: the browser's Tab goes on past the table, and
+     * the focus leaving closes the panel.
+     */
+    private leavePanel;
+    private applyFilters;
+    private clearFilter;
+    private chooserItems;
+    private changeColumns;
+    protected render(): TemplateResult | typeof nothing;
+    private csv;
+    private content;
+    private table;
+    private toolbar;
+    /**
+     * Below 768 px only one measure has a header: "Sorteren" reaches every sortable column. Hidden
+     * from 768 px, where every column's header sorts.
+     */
+    private sortMenu;
+    private get mobileMeasure();
+    private selectionBar;
+    private panels;
+    private fullTable;
+    private editableCell;
+    private mobileTable;
+    private toggleMobileRow;
+    /** 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. */
+    private pager;
+    /** The name of an `openable` row: a button in the shape of a link, since it opens, not goes. */
+    private opener;
+    private cell;
+    /**
+     * A `truncate` column's cell: the drawn value on one line, cut with an ellipsis, its words in
+     * the `title` for a pointer; a reader hears them whole from the hidden copy.
+     */
+    private truncatedCell;
+    private get sublineColumns();
+    private get hasSubline();
+    private subline;
+    private mobileStatus;
+    /** The header box covers all rows, not only this page. */
+    private headerCheck;
+    private rowCheck;
+    /** The checkbox markup of `inputs/shared/input.css`, without an element of its own. */
+    private checkbox;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-data-table': LintjeDataTable;
+    }
+}
+export {};

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

@@ -0,0 +1,64 @@
+/**
+ * Editing a cell in `<lintje-data-table>`: the column's `editor` turns its cells into tab stops.
+ *
+ * A save is a request, `lintje-cell-edit` `{ id, column, value }`; until the host's next `data`
+ * the new value stands muted behind a spinner. That `data` answers it: `busyCells` is still
+ * saving, `cellErrors` reopens the field with the message, a cell in neither is saved. The table
+ * never keeps the value. Only the desktop table edits.
+ */
+import { type TemplateResult } from 'lit';
+import '../../../primitives/spinner/spinner.js';
+import type { CellValue, DataTableData, TableCellRef, TableColumnData } from '../../../types.js';
+export interface CellPosition {
+    row: number;
+    column: number;
+}
+export type CellMove = 'down' | 'next' | 'previous';
+/** The cell a save moves to, or `null`; next and previous skip what `editable` refuses. */
+export declare function nextEditableCell(from: CellPosition, move: CellMove, rows: number, columns: number, editable: (row: number, column: number) => boolean): CellPosition | null;
+export declare function cellKey(ref: TableCellRef): string;
+export declare function editText(value: CellValue): string;
+export type CellMode = {
+    kind: 'rest';
+} | {
+    kind: 'busy';
+    value: string;
+} | {
+    kind: 'editor';
+    value: string;
+    error?: string;
+};
+export interface EditGrid {
+    ids: string[];
+    columns: TableColumnData[];
+    /** The first row on this page is row `offset + 1` (for the field label). */
+    offset: number;
+    /** The tile's table or the expanded modal's: both stand in one shadow root, so ids name it. */
+    copy: 'tile' | 'modal';
+}
+/** The table one save is about, and how the controller reaches it. */
+export interface EditingHost {
+    requestUpdate(): void;
+    editCell(detail: TableCellRef & {
+        value: string;
+    }): void;
+}
+export declare class CellEditing {
+    #private;
+    editing: TableCellRef | null;
+    /** What the table's status line reads out: saving, saved, refused. */
+    message: string;
+    constructor(host: EditingHost);
+    get hintId(): string;
+    sync(data: DataTableData | null | undefined): void;
+    mode(ref: TableCellRef, original: CellValue): CellMode;
+    open(ref: TableCellRef, from: Element): void;
+    cancel(ref: TableCellRef): void;
+    commit(ref: TableCellRef, value: string, original: CellValue, move: CellMove | null, grid: EditGrid): void;
+    editable(ref: TableCellRef, column: TableColumnData | undefined): boolean;
+    restoreFocus(root: ParentNode): void;
+    content(ref: TableCellRef, column: TableColumnData, original: CellValue, content: unknown, label: string, grid: EditGrid): unknown;
+    cellClasses(ref: TableCellRef, original: CellValue): Record<string, boolean>;
+    cellKeydown(ref: TableCellRef, event: KeyboardEvent): void;
+    renderStatus(): TemplateResult;
+}

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

@@ -0,0 +1,72 @@
+/**
+ * Column filters and the column chooser in `<lintje-data-table>`.
+ *
+ * Applying a filter is `lintje-filter-change` `{ column, value }`; the table does not filter, the
+ * host does. The chooser sends `lintje-columns-change` `{ order, hidden }`; the first column
+ * 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/drawer/drawer.js';
+import '../sortable-list/sortable-list.js';
+import type { SortableItem } from '../sortable-list/sortable-list.js';
+import type { TableColumnData } from '../../../types.js';
+export type FilterValue = string[] | string;
+export declare function isFilterActive(value: FilterValue | null | undefined): value is FilterValue;
+/** A filter's value as reported: `null` when it filters nothing. */
+export declare function filterOut(value: FilterValue | null | undefined): FilterValue | null;
+export declare function chipText(column: TableColumnData, value: FilterValue): string;
+export declare function funnelLabel(column: TableColumnData, value: FilterValue | null | undefined): string;
+/** The first column always first and shown; the rest in `order` (unnamed keys last) minus `hidden`. */
+export declare function shownColumns(columns: readonly TableColumnData[], order: readonly string[] | null, hidden: readonly string[]): TableColumnData[];
+/** The `lintje-columns-change` payload. */
+export declare function columnsChange(first: string, order: readonly string[], checked: readonly string[]): {
+    order: string[];
+    hidden: string[];
+};
+/** 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;
+    anchor: Element | null;
+    draft: FilterValue | undefined;
+    onDraft: (value: FilterValue) => void;
+    onApply: () => void;
+    onClear: () => void;
+    onClose: () => void;
+    onLeave: (how: PanelLeave) => boolean;
+}): TemplateResult;
+/** Below 768 px every column's filter is in one drawer. */
+export declare function renderFiltersSheet(options: {
+    columns: TableColumnData[];
+    draft: Record<string, FilterValue>;
+    onDraft: (column: string, value: FilterValue) => void;
+    onApply: () => void;
+    onClear: () => void;
+    onClose: () => void;
+}): TemplateResult;
+export declare function renderToolbar(options: {
+    columns: TableColumnData[];
+    values: Record<string, FilterValue>;
+    shown: number;
+    total: number | undefined;
+    /** Below 768 px, beside "Filters": the sort on any column. */
+    sortMenu?: unknown;
+    onClearFilter: (column: string, button: HTMLElement) => void;
+    onOpenSheet: () => void;
+}): TemplateResult;
+/** The column chooser's button, in the head of the actions column: as narrow as the row menus. */
+export declare function renderChooserButton(expanded: boolean, onOpen: (anchor: HTMLElement) => void): TemplateResult;
+export declare function renderColumnChooser(options: {
+    first: TableColumnData;
+    items: SortableItem[];
+    anchor: Element | null;
+    onOrder: (order: string[]) => void;
+    onChecked: (checked: string[]) => void;
+    onClose: () => void;
+    onLeave: (how: PanelLeave) => boolean;
+}): TemplateResult;

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

@@ -0,0 +1,67 @@
+/**
+ * `<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.
+ *
+ * Events: `lintje-navigate` `{ href }`.
+ */
+import { type PropertyDeclarations, type TemplateResult } from 'lit';
+import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+/** A link on the right of the value, for changing it ("Locatie wijzigen" as accessible name). */
+export interface DescriptionAction {
+    href: string;
+    /** The link's word; "Wijzigen" without it. */
+    label?: string;
+}
+export interface DescriptionItem {
+    label: string;
+    /** Text the host formatted. Missing is a dash, never 0. */
+    value?: string | number | null;
+    /** Makes the value a link. */
+    href?: string;
+    action?: DescriptionAction;
+    /** The value as separate tags (word lists, people); `value` is then left out. */
+    tags?: string[];
+    /** Grid: an icon by the label, by file name. */
+    icon?: string;
+    /** Grid: two columns instead of one. */
+    span?: 1 | 2;
+    /** 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).
+     */
+    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 DescriptionListLayout = 'row' | 'column' | 'grid';
+export declare class LintjeDescriptionList extends LintjeGridItemElement {
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    items: DescriptionItem[];
+    /** Grid: how many cells stand side by side where there is room; two below 30rem. */
+    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. */
+    layout: DescriptionListLayout;
+    private follow;
+    private value;
+    private action;
+    private renderItem;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-description-list': LintjeDescriptionList;
+    }
+}