lintje 0.2.0 → 0.3.0

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 '../../primitives/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/tables/activity-log/activity-log.d.ts

@@ -1,9 +1,8 @@
 /**
  * `<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';

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 { type Tone } from '../../../primitives/shared/tone.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 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/data-table.d.ts

@@ -1,23 +1,21 @@
 /**
- * `<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';
@@ -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/filters.d.ts

@@ -8,6 +8,7 @@
 import { type TemplateResult } from 'lit';
 import '../../../primitives/popover/popover.js';
 import '../../../primitives/button/button.js';
+import '../../../primitives/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 { type Tone } from '../../../primitives/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,26 +1,15 @@
 /**
- * `<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';

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

@@ -1,15 +1,13 @@
 /**
- * `<lintje-pagination>` — the "21–40 van 131 documenten" count on the left, "Vorige", page
- * numbers and "Volgende" in the middle and, with `page-sizes`, the choice how many stand on a page
- * on the right. Where the three do not fit on one line the count and the choice go below.
+ * `<lintje-pagination>` — the "21–40 van 131 documenten" count, "Vorige", the page numbers and
+ * "Volgende" and, with `page-sizes`, the choice how many stand on a page.
  *
- * It does not write the URL. With `href-template` every page is a link and a plain click is
- * handed to the host as `lintje-navigate`; without one they are buttons. A choice shows at once
- * and the host confirms it through `page` and `page-size`. Pages count from 1.
+ * It does not write the URL: a choice shows at once, and the host confirms it through `page` and
+ * `page-size`. With `href-template` every page is a link; without one they are buttons. Pages
+ * count from 1.
  *
- * Events: `lintje-page-change` `{ page }`; `lintje-page-size-change` `{ pageSize, page }`, where
- * `page` is the one that keeps the first row in view; with `href-template` also
- * `lintje-navigate` `{ href }`.
+ * Events: `lintje-page-change` `{ page }`, `lintje-page-size-change` `{ pageSize, page }` (`page`
+ * keeps the first row in view), `lintje-navigate` `{ href }` (with `href-template`).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
@@ -27,9 +25,10 @@ export interface CountUnit {
 }
 /**
  * "21–40 van 131 documenten": the rows on `page`, or `null` when the host gave no total. When
- * everything fits on one page the range would repeat the total, so only the total stands.
+ * everything fits on one page the range would repeat the total, so only the total stands. With
+ * `from`, a filter narrowed the total: "· gefilterd uit 980" follows.
  */
-export declare function rangeText(page: number, pageSize?: number, total?: number, unit?: CountUnit): string | null;
+export declare function rangeText(page: number, pageSize?: number, total?: number, unit?: CountUnit, from?: number): string | null;
 /** `"10, 20, 50"` → `[10, 20, 50]`: whole, positive, each once, in the host's order. */
 export declare function parsePageSizes(value: string | null): number[] | undefined;
 export declare class LintjePagination extends LintjeElement {
@@ -41,6 +40,8 @@ export declare class LintjePagination extends LintjeElement {
     pageCount?: number;
     /** Rows over all pages, for the count. */
     total?: number;
+    /** The rows before a filter narrowed them to `total`; the count then says it was filtered. */
+    filteredFrom?: number;
     pageSize?: number;
     /** `"10, 20, 50"`: draws the choice how many stand on a page. */
     pageSizes?: number[];

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

@@ -1,13 +1,12 @@
 /**
  * `<lintje-sortable-list>` — rows reordered by dragging a grip or with the keyboard.
  *
- * Only the grip starts a drag, so on a phone the list still scrolls under a finger on the row. A
- * tap on a grip picks its row up as the keyboard does, and a tap on a grip puts it down there.
- * It reorders its own copy of `items` until the host sends new ones and tells an order once, when
- * a row is put down at a new place. Every step is read out by a `role="status"`.
+ * Only the grip starts a drag, so on a phone the list still scrolls under a finger. It reorders
+ * its own copy of `items` until the host sends new ones, and tells an order once, when a row is
+ * put down at a new place.
  *
- * Events: `lintje-change` (ids, not composed); `lintje-values-change` `{ [name]: ids }` with a
- * `name`; `lintje-checked-change` (ids) with `checkable`.
+ * Events: `lintje-change` `string[]` (the ids in order), `lintje-values-change`
+ * `{ [name]: value }` (with a `name`), `lintje-checked-change` `string[]` (with `checkable`).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';

package/dist-elements/types/components/tables/tree-view/tree-view.d.ts

@@ -1,11 +1,11 @@
 /**
  * `<lintje-tree-view>` — a hierarchy that folds open and shut, one tab stop with roving focus.
  *
- * `expanded` is the host's: the element folds its own copy and reports each fold, so a host that
- * loads children on demand answers with `loading` and then `children`. It fetches nothing.
+ * It fetches nothing: it folds its own copy of `expanded` and reports each fold, so a host that
+ * loads children on demand answers with `loading` and then `children`.
  *
- * Events: `lintje-node-toggle` `{ id, open }`; `lintje-change` (id, not composed);
- * `lintje-values-change` `{ [name]: id }` with a `name`.
+ * Events: `lintje-node-toggle` `{ id, open }`, `lintje-change` `string` (the chosen node's id),
+ * `lintje-values-change` `{ [name]: value }` (with a `name`).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';

package/dist-elements/types/core/media.d.ts

@@ -3,8 +3,8 @@
  * per query string is shared by every controller.
  */
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
-/** Below this the views take their phone representation (rule 9). */
-export declare const MOBILE = "(max-width: 767px)";
+/** Below this the views take their phone representation (rule 9); on screen only, so paper keeps the desktop form. */
+export declare const MOBILE = "screen and (max-width: 767px)";
 /** From here the menu can be pinned. The frame's markup changes at both breakpoints. */
 export declare const WIDE = "(min-width: 1440px)";
 export declare class MediaController implements ReactiveController {

package/dist-elements/types/core/motion.d.ts

@@ -4,5 +4,10 @@
  * The unit is parsed: a minifier writes `900ms` as `.9s`, which `parseFloat` alone reads as 0.9 ms.
  */
 export declare function durationMs(element: Element, token: string): number;
+/**
+ * A timing-function token as a function of progress, for motion drawn frame by frame: `linear`
+ * or `cubic-bezier(…)`; anything else runs linear.
+ */
+export declare function easing(element: Element, token: string): (t: number) => number;
 /** Whether the reader asked for less motion. */
 export declare function prefersReducedMotion(): boolean;

package/dist-elements/types/core/print.d.ts

@@ -0,0 +1,15 @@
+/**
+ * What an element finishes before the page goes to paper: one `beforeprint` listener for the
+ * page, and every element that registers runs before the browser lays out the print.
+ *
+ * A callback must leave its final state in the DOM before it returns. "Afdrukken" in the shell
+ * calls `window.print()` inside a frame callback, so `beforeprint` fires with a script on the
+ * stack and a Lit update queued as a microtask would land after the print layout.
+ */
+/** Runs `callback` before every print; the returned function unregisters it. */
+export declare function onBeforePrint(callback: () => void): () => void;
+/**
+ * Runs `callback` with `true` when the page is laid out for paper and `false` when it is back on
+ * screen. Inside the call a box measures its paper size, which `beforeprint` is too early for.
+ */
+export declare function onPrintMedia(callback: (printing: boolean) => void): () => void;

package/dist-elements/types/core/shortcuts.d.ts

@@ -1,7 +1,7 @@
 /**
  * The page's one register of keyboard shortcuts: one `keydown` listener; `shortcuts()` lists
- * them for `<lintje-shortcuts>`. Without Ctrl, Alt or Meta a key never fires in a field; with
- * one, only when registered with `inFields`. A key registered twice warns in development.
+ * them for the overview a page shows. Without Ctrl, Alt or Meta a key never fires in a field;
+ * with one, only when registered with `inFields`. A key registered twice warns in development.
  *
  * A one-character key (`/`, `?`) can be switched off by the reader (WCAG 2.1.4, for speech
  * input and stray keystrokes): `setCharacterKeys(false)`, remembered in `localStorage`.

package/dist-elements/types/icons/icon/icon.d.ts

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

package/dist-elements/types/icons/register.d.ts

@@ -5,7 +5,7 @@
  * Every other icon is fetched by name when a name needs it
  * (`src/icons/loader.ts`); the name is always the file name.
  *
- * 62 icons, of 1198 in `dist-icons/`.
+ * 63 icons, of 1200 in `dist-icons/`.
  */
 export interface IconGlyph {
     /** The file's own viewBox: 64 or 48 in RVO's set, 24 for an own icon, 346x75 for an emblem. */