lintje 0.1.1 → 0.3.0

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

@@ -21,6 +21,17 @@ export interface LineSeriesData {
     comparison?: boolean;
     area?: boolean;
 }
+/**
+ * Something that happened at a category. The chart numbers its events 1, 2, … from left to
+ * right, in the host's order within one category; one whose `index` is not in `labels` is left
+ * out and takes no number.
+ */
+export interface ChartEvent {
+    /** Index into `labels`: the category it happened at. */
+    index: number;
+    /** What happened, in a few words; listed under the chart and shown in the tooltip. */
+    label: string;
+}
 export interface BarSeriesData {
     label: string;
     values: number[];
@@ -28,6 +39,25 @@ export interface BarSeriesData {
     /** One entry per value: the drilldown of that bar or segment, or null. */
     links?: (ChartLink | null)[];
 }
+/** One point of a scatter plot: a named record, clickable with a `href` like a table row. */
+export interface ScatterPoint {
+    label: string;
+    /** null = no data, never 0 (rule 15): the point is not drawn and stays in the table. */
+    x: number | null;
+    y: number | null;
+    /** The identity a click carries; without it the series' label and its own: `Loket · Utrecht`. */
+    id?: string;
+    href?: string;
+}
+/**
+ * A series of a scatter plot: a colour and the shape that colour has on a map (rule 13).
+ * Without a colour the series take the data colours in their order.
+ */
+export interface ScatterSeriesData {
+    label: string;
+    color?: ChartColor;
+    points: ScatterPoint[];
+}
 export type ChartSpec = {
     kind: 'line';
     labels: string[];
@@ -40,6 +70,8 @@ export type ChartSpec = {
     pendingHours?: number;
     fixedMax?: number;
     small?: boolean;
+    /** Events: a numbered square above their category, listed with their text under the chart. */
+    events?: ChartEvent[];
 } | {
     kind: 'bar';
     labels: string[];
@@ -86,6 +118,22 @@ export type ChartSpec = {
     normalized?: boolean;
     totalOnTop?: boolean;
     small?: boolean;
+} | {
+    kind: 'stacked-area';
+    labels: string[];
+    /**
+     * The parts of one variable, the first at the bottom. A `null` in any part breaks the whole
+     * stack at that point: no area bridges it and the period is hatched (rule 15).
+     */
+    series: {
+        label: string;
+        values: (number | null)[];
+    }[];
+    /** The variable the stack divides: its parts take this colour's tints. Default sky blue. */
+    color?: ChartColor;
+    axisTitle?: string;
+    unit?: string;
+    small?: boolean;
 } | {
     kind: 'pie';
     segments: {
@@ -124,6 +172,21 @@ export type ChartSpec = {
     thresholdLabel?: string;
     pendingHours?: number;
     small?: boolean;
+} | {
+    kind: 'scatter';
+    series: ScatterSeriesData[];
+    /** The vertical axis: its title above the chart, in the tooltip and as a table column. */
+    axisTitle: string;
+    unit?: string;
+    /** The horizontal axis: its title under its labels, right-aligned. */
+    xTitle: string;
+    xUnit?: string;
+    /** A horizontal norm on the vertical axis, dashed in the emphasis colour. */
+    threshold?: number;
+    thresholdLabel?: string;
+    /** The labels of the points that show their name; all of them, or none when one does not fit. */
+    dataLabels?: string[];
+    small?: boolean;
 } | {
     kind: 'heatmap';
     columnLabels: string[];
@@ -146,11 +209,40 @@ export type ChartSpec = {
         values: (number | null)[][];
         links?: (ChartLink | null)[][];
     };
+} | {
+    kind: 'histogram';
+    /**
+     * The classes in ascending order, each starting where the one before ends. `to: null` is
+     * an open last class ("30+"); `count: null` is no data, never 0 (rule 15).
+     */
+    bins: {
+        from: number;
+        to: number | null;
+        count: number | null;
+    }[];
+    /** What the classes count, in the legend and the tooltip. Default "Aantal". */
+    label?: string;
+    color?: ChartColor;
+    /** Above the y-axis, e.g. "aanvragen per twee dagen". */
+    axisTitle?: string;
+    /** Under the x labels, right-aligned, e.g. "doorlooptijd in dagen". */
+    xTitle?: string;
+    /** The unit of the x-axis, e.g. "dagen": in the tooltip and beside the lines. */
+    unit?: string;
+    /** A solid emphasis line at this x value. */
+    median?: number;
+    /** The text beside the median line; default "mediaan" with its value and unit. */
+    medianLabel?: string;
+    /** A dashed emphasis line at this x value. */
+    threshold?: number;
+    /** The text beside the threshold line; default "norm" with its value and unit. */
+    thresholdLabel?: string;
+    small?: boolean;
 };
 export type ChartKind = ChartSpec['kind'];
 /**
  * What a map draws. `polygons` are areas that carry their own outline (`MapValue.polygon`);
- * `plots` stacks several drawings, from `MapTileData.plots`.
+ * `plots` stacks several drawings, from `MapSpec.plots`.
  */
 export type MapVariant = 'flows' | 'points' | 'choropleth' | 'polygons' | 'plots' | 'scope-picker';
 /** A map point's data colour, by name: one of the data colours, each with its own shape. */
@@ -176,6 +268,45 @@ export interface MapValue {
     /** A URL the host minted, carried into `lintje-mark-select`. */
     href?: string;
 }
+/**
+ * An area drawn on the map to choose what lies in it: a lasso, a ring of `[lon, lat]` pairs with
+ * the first point not repeated, or a circle around a `[lon, lat]` centre.
+ */
+export type MapArea = {
+    kind: 'lasso';
+    ring: [number, number][];
+} | {
+    kind: 'circle';
+    centre: [number, number];
+    radiusKm: number;
+};
+/** A tool that draws an area on the map. */
+export type MapTool = 'lasso' | 'circle' | 'rect';
+/**
+ * The parts of a map a host switches on or off. Without a value each keeps its default: every
+ * part on, except the drawing tools, which choose for a host that filters on an area. With two
+ * or more tools on, one button opens a menu of them.
+ */
+export interface MapControls {
+    /** The + and − buttons, a double click and a pinch. Default on. */
+    zoom?: boolean;
+    /** Zooming on the wheel with Ctrl or ⌘ held. Default on. */
+    wheel?: boolean;
+    /** Panning with the mouse. Default on; on a phone a finger always scrolls the page. */
+    drag?: boolean;
+    /** The reset: the whole area in view and nothing chosen. Default on. */
+    reset?: boolean;
+    /** Choosing with a drawn lasso; sends `lintje-area-select`. Default off. */
+    lasso?: boolean;
+    /** Choosing with a drawn circle; sends `lintje-area-select`. Default off. */
+    circle?: boolean;
+    /** Choosing with a drawn rectangle, sent as a lasso of four corners. Default off. */
+    rect?: boolean;
+    /** A scale bar in km bottom right. Default on. */
+    scale?: boolean;
+    /** The legend above the map: a line per layer with its key and its series. Default on. */
+    legend?: boolean;
+}
 /** The basemap the map draws on, a WMS service the host configures. */
 export interface WmsBasemap {
     kind: 'wms';
@@ -213,12 +344,12 @@ export interface MapPlotData {
     };
     /**
      * What each series in this layer means, over the map's own `seriesLabels`. A colour may serve
-     * several layers; the legend above the map keeps one line per colour, named by the first.
+     * several layers; each layer's line in the legend names and switches its own.
      */
     seriesLabels?: Partial<Record<MapSeriesKey, string>>;
 }
-/** The map's data, as `MapTileData` in `src/types.ts` carries it, without the tile fields. */
-export interface MapTileData {
+/** The map's data, as `MapData` in `src/types.ts` carries it, without the tile fields. */
+export interface MapSpec {
     variant: MapVariant;
     geo?: 'world' | 'netherlands';
     /** The marks of a one-variant map; empty with `variant: 'plots'`. */
@@ -232,7 +363,7 @@ export interface MapTileData {
     };
     unit?: string;
     description: string;
-    /** Map height in px; default 400, 220 below 768 px. */
+    /** Map height in px; default 400, 280 below 768 px. */
     height?: number;
     selectedId?: string | null;
     layers?: {
@@ -247,6 +378,10 @@ export interface MapTileData {
     selectLabel?: string;
     /** The URL that undoes the selection, for a page that keeps it in the URL. */
     clearHref?: string;
-    /** With a basemap the map draws with Leaflet; without one it stays the SVG map. */
+    /** Tiles under the map: Leaflet draws the basemap, the map draws its data over it. */
     basemap?: WmsBasemap;
+    /** Which parts of the map show and answer; each left out keeps its default. */
+    controls?: MapControls;
+    /** The area the host keeps, from its URL: adopted when it changes, as `selectedId` is. */
+    selectedArea?: MapArea | null;
 }

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

@@ -0,0 +1,13 @@
+/**
+ * Stacked areas: the parts of one variable in its tints, the first at the bottom and darkest. A
+ * missing value breaks its part and every part above it; the parts below stay, and the rest of
+ * the column is hatched (rule 15). A part switched off shrinks out and the parts above settle.
+ */
+import { type TemplateResult } from 'lit';
+import { type ChartOptions } from '../shared/controller.js';
+import type { ChartSpec } from '../shared/types.js';
+type StackedAreaSpec = Extract<ChartSpec, {
+    kind: 'stacked-area';
+}>;
+export declare function renderStackedAreaChart(spec: StackedAreaSpec, options: ChartOptions): TemplateResult;
+export {};

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/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;