lintje 0.2.0 → 0.3.0

package/dist-elements/types/primitives/badge/badge.d.ts

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

package/dist-elements/types/primitives/button/button.d.ts

@@ -1,14 +1,9 @@
 /**
  * `<lintje-button>` — a button or, with `href`, a link with the same look.
  *
- * `disabled` and `busy` render `aria-disabled="true"`, never the native `disabled`: the button
- * stays in the tab order. A capturing `click` listener on the host swallows the activation, so
- * no host listener and no form sees it. `busy` keeps the variant's colours and the exact width.
- * A disabled or busy link renders no `href` and keeps `role="link"` and `tabindex="0"`.
- * `type="submit"|"reset"` acts on the nearest `<form>` itself: the inner `<button>` has no form
- * owner in a shadow root. ARIA on the host never reaches the inner control, so what a host needs
- * there (`expanded`, `pressed`, `haspopup`, `keyshortcuts`, `accessible-name`, `description`, `invalid`) is a
- * property; focusing the host focuses the inner control.
+ * `disabled` and `busy` keep it in the tab order but swallow the press: no listener on the host
+ * and no form sees it. ARIA on the host never reaches the inner control, so what a host needs
+ * there is a property; focusing the host focuses the inner control.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../core/element.js';
@@ -26,9 +21,17 @@ export declare class LintjeButton extends LintjeElement {
     disabled: boolean;
     /** Why it is disabled, read with the button. Say it on the page as well: a mouse does not hear it. */
     reason?: string;
+    /** At work: `aria-disabled`, with the variant's colours and the exact width kept. */
     busy: boolean;
+    /**
+     * `submit` and `reset` act on the nearest `<form>` themselves: the inner `<button>` has no form
+     * owner in a shadow root.
+     */
     type: 'button' | 'submit' | 'reset';
-    /** Makes the button an `<a>` with the same look; `type` is then ignored. */
+    /**
+     * Makes the button an `<a>` with the same look; `type` is then ignored. Disabled or busy, the
+     * link has no `href` but stays focusable, with `role="link"`.
+     */
     href?: string;
     /** The link's browsing context; `_blank` without a `rel` gets `noopener noreferrer`. */
     target?: string;

package/dist-elements/types/primitives/grid/grid.d.ts

@@ -1,7 +1,7 @@
 /**
- * `<lintje-grid>` — the 12-column grid. Its items are its own children; a tile carries `span`
- * itself and needs no wrapper.
- * Events: none.
+ * `<lintje-grid>` — the 12-column grid.
+ *
+ * Its items are its own children; a tile carries `span` itself and needs no wrapper.
  */
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../core/element.js';

package/dist-elements/types/primitives/grid-item/grid-item.d.ts

@@ -1,4 +1,4 @@
-/** `<lintje-grid-item>` — a grid cell for non-`lintje-` content. Events: none. */
+/** `<lintje-grid-item>` — a grid cell for non-`lintje-` content. */
 import { type TemplateResult } from 'lit';
 import { LintjeGridItemElement } from '../shared/grid-item-element.js';
 export declare class LintjeGridItem extends LintjeGridItemElement {

package/dist-elements/types/primitives/icon-button/icon-button.d.ts

@@ -1,9 +1,8 @@
 /**
  * `<lintje-icon-button>` — a square button with one icon, or its Dutch label as text when the
- * icon has no file. `disabled` renders `aria-disabled="true"` and a capturing `click` listener
- * swallows the activation, so the button stays focusable but no host listener sees it.
- * `live` is for what listens or speaks now (dictating, reading aloud): the primary fill and
- * moving bars beside the icon; the host still sets `pressed` and the label that stops it.
+ * icon has no file.
+ *
+ * `disabled` keeps it focusable but swallows the press: no listener on the host sees it.
  */
 import { type TemplateResult } from 'lit';
 import { LintjeElement } from '../../core/element.js';
@@ -58,7 +57,10 @@ export declare class LintjeIconButton extends LintjeElement {
     expanded?: boolean;
     /** Extra description read after the name; a wrapping `lintje-tooltip` sets its text here. */
     description?: string;
-    /** It listens or speaks now: the primary fill, with moving bars beside the icon. */
+    /**
+     * It listens or speaks now (dictating, reading aloud): the primary fill, with moving bars beside
+     * the icon. The host still sets `pressed` and the label that stops it.
+     */
     live: boolean;
     constructor();
     private refuseWhileDisabled;

package/dist-elements/types/primitives/index.d.ts

@@ -16,6 +16,8 @@ export type { ButtonSize, ButtonVariant } from './button/button.js';
 export { LintjeIconButton } from './icon-button/icon-button.js';
 export type { IconButtonVariant } from './icon-button/icon-button.js';
 export { LintjeStatusDot, STATUS_LABEL } from './status-dot/status-dot.js';
+export { TONE_ICON, TONE_WORD, WORK_STATE_LABEL, WORK_STATE_TONE } from './shared/tone.js';
+export type { ContentStateKind, Tone, WorkState } from './shared/tone.js';
 export { LintjeSkeleton } from './skeleton/skeleton.js';
 export { LintjeGrid } from './grid/grid.js';
 export { LintjeGridItem } from './grid-item/grid-item.js';
@@ -26,7 +28,7 @@ export type { BadgeOptions, BadgeTone, BadgeVariant } from './badge/badge.js';
 export { LintjeSpinner } from './spinner/spinner.js';
 export type { SpinnerSize } from './spinner/spinner.js';
 export { LintjeProgressBar } from './progress-bar/progress-bar.js';
-export type { ProgressTone } from './progress-bar/progress-bar.js';
+export type { ProgressState } from './progress-bar/progress-bar.js';
 export { LintjePopover } from './popover/popover.js';
 export { LintjeTooltip } from './tooltip/tooltip.js';
 export { place } from './shared/place.js';

package/dist-elements/types/primitives/popover/popover.d.ts

@@ -1,9 +1,10 @@
 /**
- * `<lintje-popover>` — the floating panel: a surface fixed to the viewport under its anchor
- * (`.anchor`, or the previous sibling). Content and padding come through the slot.
+ * `<lintje-popover>` — the floating panel: a surface fixed to the viewport under its anchor.
  *
- * The owner holds `open`: the popover only asks to be closed. Events: `lintje-close`
- * `{ reason: 'escape' | 'outside' }`; a component drawing a popover in its own root stops it.
+ * Content and padding come through the slot. The host holds `open`: the popover only asks to be
+ * closed. A component that draws a popover in its own root stops its `lintje-close`.
+ *
+ * Events: `lintje-close` `{ reason: 'escape' | 'outside' }`.
  */
 import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../core/element.js';

package/dist-elements/types/primitives/progress-bar/progress-bar.d.ts

@@ -1,11 +1,13 @@
 /**
- * `<lintje-progress-bar>` — how far a task is. Without a `value` the duration is unknown and a
- * block slides along the track. The default slot takes one action right of the label line.
- * Done, error and paused are said in the value text and marked by a glyph before the label.
+ * `<lintje-progress-bar>` — how far a task is; without a `value` a block slides along the track.
+ *
+ * The default slot takes one action right of the label line. Done, error and paused are said in
+ * the value text and marked by a glyph.
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../core/element.js';
-export type ProgressTone = 'run' | 'done' | 'error' | 'paused';
+import { type WorkState } from '../shared/tone.js';
+export type ProgressState = Extract<WorkState, 'busy' | 'done' | 'error' | 'paused'>;
 export declare class LintjeProgressBar extends LintjeElement {
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
@@ -17,10 +19,10 @@ export declare class LintjeProgressBar extends LintjeElement {
     hideLabel: boolean;
     /** The figure on the right: "62% · nog ongeveer 3 min". */
     detail?: string;
-    tone: ProgressTone;
+    state: ProgressState;
     private get known();
     private get percent();
-    private get resolvedTone();
+    private get resolvedState();
     private valueText;
     protected render(): TemplateResult;
 }

package/dist-elements/types/primitives/shared/announcement-block.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The announcement as a render function, so a tile draws its error with the same block as
+ * `<lintje-announcement>` draws itself. The element adds dismissal and focus; a tile adds
+ * nothing. A live block is drawn empty until `filled`: a region that arrives with its words is
+ * not announced.
+ */
+import { nothing, type CSSResult, type TemplateResult } from 'lit';
+import { type Tone } from './tone.js';
+/** `outage` interrupts and cannot be closed; `error` is a failure the reader may put away. */
+export type AnnouncementKind = 'warning' | 'outage' | 'error' | 'info' | 'ok';
+/** A message's kind in the one tone set: a warning is drawn in the attention tone. */
+export declare const ANNOUNCEMENT_TONE: Record<AnnouncementKind, Tone>;
+/** Only an outage interrupts the reader; the others wait their turn. */
+export declare const ANNOUNCEMENT_ROLE: Record<AnnouncementKind, 'alert' | 'status'>;
+/** The word a screen reader hears before the text, since the tint says nothing to it. */
+export declare const ANNOUNCEMENT_PREFIX: Record<AnnouncementKind, string>;
+export declare const announcementBlockStyles: CSSResult;
+export interface AnnouncementBlockOptions {
+    kind?: AnnouncementKind;
+    title?: string;
+    text?: string;
+    meta?: string;
+    link?: {
+        label: string;
+        href: string;
+    };
+    /** A live region: `role` from the kind, drawn empty until `filled`. */
+    live?: boolean;
+    /** Whether a live block shows its words yet; ignored when not live. */
+    filled?: boolean;
+    /** What stands under or beside the text: the element's `action` slot. */
+    action?: TemplateResult | typeof nothing;
+    /** What stands beside the body: the element's `media` slot. */
+    media?: TemplateResult | typeof nothing;
+    /** With a handler the block draws its close button. */
+    onClose?: () => void;
+}
+export declare function renderAnnouncementBlock(options: AnnouncementBlockOptions): TemplateResult;

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

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

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

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

package/dist-elements/types/primitives/skeleton/skeleton.d.ts

@@ -1,4 +1,4 @@
-/** `<lintje-skeleton>` — the shimmer that holds a box while its content loads. Events: none. */
+/** `<lintje-skeleton>` — the shimmer that holds a box while its content loads. */
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../core/element.js';
 export declare class LintjeSkeleton extends LintjeElement {

package/dist-elements/types/primitives/spinner/spinner.d.ts

@@ -1,7 +1,6 @@
 /**
  * `<lintje-spinner>` — the loading ring for content whose shape is not known; for a known shape
- * use `<lintje-skeleton>`. The label is what a screen reader hears (`role="status"`).
- * Events: none.
+ * use `<lintje-skeleton>`.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../core/element.js';

package/dist-elements/types/primitives/status-dot/status-dot.d.ts

@@ -1,9 +1,8 @@
-/**
- * `<lintje-status-dot>` — a status with its word; colour is never the only carrier (rule 13).
- * Events: none.
- */
+/** `<lintje-status-dot>` — a status as a dot with its word; colour is never the only carrier. */
 import { type TemplateResult } from 'lit';
 import { LintjeElement } from '../../core/element.js';
+import { type Tone } from '../shared/tone.js';
+/** A source's delivery status: the element's own words, each a tone. */
 export type StatusTone = 'complete' | 'delayed' | 'outage' | 'no-data';
 export declare const STATUS_LABEL: Record<StatusTone, string>;
 export declare class LintjeStatusDot extends LintjeElement {
@@ -20,7 +19,7 @@ export declare class LintjeStatusDot extends LintjeElement {
             type: NumberConstructor;
         };
     };
-    tone: StatusTone;
+    tone: Tone | StatusTone;
     /** Overrides the Dutch word for the tone. */
     label?: string;
     size: number;

package/dist-elements/types/primitives/tile/tile.d.ts

@@ -1,9 +1,12 @@
 /**
- * `<lintje-tile>` — the frame around a chart, map or table. Top to bottom: header, notice, intro,
- * legend, content, legend (`legend-below`), footnote. `slot="aside"` puts a key figure beside the
- * content, above it below 768 px. Hover actions show on focus too, always on touch screens.
+ * `<lintje-tile>` — the frame around a chart, map or table.
  *
- * Events: `lintje-tile-expand` and `lintje-tile-download`; the host acts on them.
+ * Top to bottom: header, notice, intro, legend, content, legend (`legend-below`), footnote.
+ * `slot="aside"` puts a key figure beside the content, above it below 768 px. Hover actions show
+ * on focus too, and always on touch screens. The tile expands and downloads nothing itself: the
+ * host answers its events.
+ *
+ * Events: `lintje-tile-expand`, `lintje-tile-download`.
  */
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeGridItemElement } from '../shared/grid-item-element.js';
@@ -11,7 +14,9 @@ import '../button/button.js';
 import '../icon-button/icon-button.js';
 import '../status-dot/status-dot.js';
 import '../skeleton/skeleton.js';
-export type ContentState = 'ready' | 'loading' | 'empty' | 'error';
+import type { ContentStateKind } from '../shared/tone.js';
+/** The same four as `ContentState` in the contract. */
+export type ContentState = ContentStateKind;
 export declare class LintjeTile extends LintjeGridItemElement {
     #private;
     static styles: import("lit").CSSResult[];
@@ -70,6 +75,10 @@ export declare class LintjeTile extends LintjeGridItemElement {
         flush: {
             type: BooleanConstructor;
         };
+        breakable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         filled: {
             state: boolean;
         };
@@ -97,6 +106,9 @@ export declare class LintjeTile extends LintjeGridItemElement {
     /** The content runs to the tile's edges and indents what it draws by the tile's padding: rows
      * whose lines reach the frame, as a work list's. */
     flush: boolean;
+    /** On paper the tile may break between two sheets, as a long table does; otherwise it moves to
+     * the next sheet whole where it fits. */
+    breakable: boolean;
     /** The words in the loading or error live region, or `null`; filled a frame after the region
      * is drawn, because a region that arrives with its text is not announced. */
     protected filled: string | null;

package/dist-elements/types/primitives/tooltip/tooltip.d.ts

@@ -1,9 +1,9 @@
 /**
- * `<lintje-tooltip>` — one short sentence about the element it wraps. Shows 300 ms after the
- * pointer rests, at once on keyboard focus; the pointer can move onto it, and Escape anywhere
- * hides it. Never the only place for something
- * the reader must know. The text is the wrapped element's description; `no-describe` leaves
- * that out when it is already its name.
+ * `<lintje-tooltip>` — one short sentence about the element it wraps.
+ *
+ * It shows 300 ms after the pointer rests and at once on keyboard focus; Escape anywhere hides it.
+ * Never the only place for something the reader must know. The text becomes the wrapped element's
+ * description.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../core/element.js';
@@ -16,7 +16,7 @@ export declare class LintjeTooltip extends LintjeElement {
     static styles: import("lit").CSSResult;
     static properties: PropertyDeclarations;
     text: string;
-    /** The text is already the element's accessible name. */
+    /** The text is already the element's accessible name: it is not given as its description too. */
     noDescribe: boolean;
     /** Above the element, or `left` of it, level with it: for a column of buttons along an edge. */
     placement: 'top' | 'left';

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

@@ -5,30 +5,36 @@
  * names come from their one list, `tokens/colors.ts`.
  */
 import type { DataColor } from './tokens/colors.js';
+import type { ContentStateKind, Tone } from './primitives/shared/tone.js';
+import type { StatusTone } from './primitives/status-dot/status-dot.js';
+import type { AnnouncementKind } from './primitives/shared/announcement-block.js';
 import type { ChartSpec, MapSpec } from './components/shared/charts/shared/types.js';
 import type { MenuEntry } from './components/actions/menu-button/menu-button.js';
 import type { NotificationItem } from './components/frame/notifications/notifications.js';
-export type { BarSeriesData, ChartColor, ChartKind, ChartSpec, LineSeriesData, MapSpec, MapValue, MapPlotData, MapPlotVariant, MapVariant, ScatterPoint, ScatterSeriesData, WmsBasemap, MapArea, MapControls, } from './components/shared/charts/shared/types.js';
+export type { BarSeriesData, ChartColor, ChartEvent, ChartKind, ChartSpec, LineSeriesData, MapSpec, MapValue, MapPlotData, MapPlotVariant, MapVariant, ScatterPoint, ScatterSeriesData, WmsBasemap, MapArea, MapControls, } from './components/shared/charts/shared/types.js';
 export type { DataColor } from './tokens/colors.js';
+export type { Tone, WorkState, ContentStateKind } from './primitives/shared/tone.js';
 /** Settings every view receives, taken from the URL by the host. */
 export interface FrameSettings {
     mode?: 'light' | 'dark';
 }
 export interface ContentState {
-    state?: 'ready' | 'loading' | 'empty' | 'error';
+    state?: ContentStateKind;
     /** Empty: why there is nothing, and the way out. Error: what failed. */
     message?: string;
     /** Error: the last known value, shown in the warning. */
     lastKnown?: string;
 }
-export type StatusTone = 'complete' | 'delayed' | 'outage' | 'no-data';
+/** A source's delivery status: the status column's and `lintje-status-dot`'s own words, each a `Tone`. */
+export type { StatusTone } from './primitives/status-dot/status-dot.js';
 export type TrendDirection = 'up' | 'down' | 'flat';
 /**
  * One colour per variable, named after the Rijkshuisstijl colour it is: a `DataColor`, the
  * names of `tokens/colors.ts`. `coverage` is a role, not a variable: gray.
  */
 export type KpiVariable = DataColor | 'coverage';
-export type KpiState = 'ready' | 'loading' | 'empty' | 'error';
+/** The same four as every tile's `ContentState`. */
+export type KpiState = ContentStateKind;
 export interface KpiItem {
     /** A string or number with one number in it; counts up like `value`. */
     value: string | number;
@@ -67,7 +73,8 @@ export interface KpiGauge {
     /** The word before the target's number: "doel" (default) or "norm". */
     targetLabel?: string;
 }
-export interface KpiData {
+/** `message` is the empty or error line under the figure, `lastKnown` the figure it had. */
+export interface KpiData extends ContentState {
     label: string;
     /** An icon file name (`dist-icons/`, without `.svg`). Decorative. */
     icon?: string;
@@ -84,7 +91,6 @@ export interface KpiData {
     /** A single figure on its scale; ignored with `items`. */
     gauge?: KpiGauge;
     variable?: KpiVariable;
-    state?: KpiState;
 }
 /** Events: none. */
 export interface KpiRowData extends FrameSettings {
@@ -155,8 +161,9 @@ export interface TableColumnData {
      * `change-compact`: only the ▲ ▼ ● of `change`; a screen reader hears the whole change, and
      * below 768 px the row's measure shows it whole.
      * `status`: a `StatusTone` (or mapped through `status.tones`) as the status dot with its label.
+     * `label`: the value as a badge with the word, tone and icon from `labels`.
      */
-    format?: 'text' | 'number' | 'percent' | 'decimal' | 'change' | 'change-compact' | 'status';
+    format?: 'text' | 'number' | 'percent' | 'decimal' | 'change' | 'change-compact' | 'status' | 'label';
     decimals?: number;
     /** Suffix after the value, e.g. "min". */
     unit?: string;
@@ -172,6 +179,11 @@ export interface TableColumnData {
         tones?: Record<string, StatusTone>;
         labels?: Record<string, string>;
     };
+    /**
+     * `label` format: value → the word, the badge's tone and an icon file name before the word. A
+     * value without an entry stands as plain text. Sorting and the CSV use the word.
+     */
+    labels?: Record<string, TableLabel>;
     /** Shown muted instead of an exact 0, where 0 means "none" (e.g. "—"). Missing stays `null`. */
     zeroText?: string;
     mobileSubline?: boolean;
@@ -271,13 +283,58 @@ export interface DataTableData extends FrameSettings, TileData, ContentState {
     filters?: Record<string, string[] | string>;
     /** The number of rows before filtering: "14 van 131 rijen" while a filter is active. */
     totalRows?: number;
-    /** A "Kolommen kiezen" button in the head of the actions column, to order and hide columns
-     *  (`lintje-columns-change`). Without row actions it adds that column. */
+    /**
+     * "Kolommen kiezen", a quiet icon in the head of the last column, to order and hide columns
+     * (`lintje-columns-change`). Without row actions it adds that column.
+     */
     columnChooser?: boolean;
     /** The keys of the columns not shown. The first column is always shown. */
     hiddenColumns?: string[];
+    /**
+     * The totals row under the rows, as the host computed it over every filtered row: the table
+     * never computes. A column without an entry stays empty.
+     */
+    totals?: Record<string, TableTotal>;
+    /** The first cell of the totals row; default "Totaal". */
+    totalsLabel?: string;
+    /**
+     * Fields shown under a row that opens, after the columns the chooser hides. With them, or with a
+     * hidden column, every row gets a button that opens its detail.
+     */
+    detailFields?: TableDetailField[];
+    /**
+     * Groups the rows on this column's value, in the order the groups first occur in `rows`. Rows
+     * sort within their group, a page holds whole groups, and the column itself is not shown.
+     */
+    groupBy?: string;
+    /** Per group value: its subtotal row, as the host computed it. */
+    groupTotals?: Record<string, Record<string, TableTotal>>;
+    /** With `groupBy`: groups per page, default 5; `pageSize` does not apply. */
+    groupsPerPage?: number;
+}
+/** A badge in a `label` column. */
+export interface TableLabel {
+    label: string;
+    /** One of the shared tones, as `lintje-badge` draws it; default `neutral`. */
+    tone?: Tone;
+    /** An icon file name, drawn before the word. */
+    icon?: string;
 }
-export type AnnouncementKind = 'warning' | 'outage' | 'info' | 'ok';
+/** A total: a value, or a value with the word that says how it was made ("gem."). */
+export type TableTotal = CellValue | {
+    value: CellValue;
+    how?: string;
+};
+/** A field in a row's detail: a key of the row, with its label and how its value shows. */
+export interface TableDetailField {
+    key: string;
+    label: string;
+    format?: TableColumnData['format'];
+    decimals?: number;
+    unit?: string;
+}
+/** `outage` interrupts and cannot be closed; `error` is a failure the reader may put away. */
+export type { AnnouncementKind } from './primitives/shared/announcement-block.js';
 export interface AnnouncementData {
     kind?: AnnouncementKind;
     title?: string;
@@ -344,6 +401,8 @@ export interface FilterOption {
      * `lintje-segmented` the chosen option's, in a box under the options.
      */
     description?: string;
+    /** The number of items with this value, as a count badge after the label where the control draws one (`lintje-segmented`). */
+    count?: number;
 }
 /** The control a declaration draws in. `range` has two handles, `slider` one. */
 export type FilterKind = 'select' | 'segmented' | 'multiselect' | 'date-range' | 'range' | 'slider' | 'toggle' | 'text' | 'number';
@@ -628,6 +687,7 @@ export interface ChatData extends FrameSettings {
 }
 export type { FormValues, FormErrors, StoredDraft } from './components/forms/form/form.js';
 export type { ErrorSummaryItem } from './components/forms/error-summary/error-summary.js';
+export type { ErrorPageLink } from './components/feedback/error-page/error-page.js';
 export type { UploadFile } from './components/inputs/file-upload/file-upload.js';
 export type { DateRange } from './components/inputs/date-range/date-range.js';
 export type { SlotDay, TimeSlot } from './components/inputs/slot-picker/slot-picker.js';

package/dist-icons/functioneel-kolommen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.9 4h3a.9.9 0 0 1 .9.9v14.2a.9.9 0 0 1-.9.9h-3a.9.9 0 0 1-.9-.9V4.9a.9.9 0 0 1 .9-.9Zm.7 1.6v12.8h1.6V5.6ZM10.5 4h3a.9.9 0 0 1 .9.9v14.2a.9.9 0 0 1-.9.9h-3a.9.9 0 0 1-.9-.9V4.9a.9.9 0 0 1 .9-.9Zm.7 1.6v12.8h1.6V5.6ZM17.1 4h3a.9.9 0 0 1 .9.9v14.2a.9.9 0 0 1-.9.9h-3a.9.9 0 0 1-.9-.9V4.9a.9.9 0 0 1 .9-.9Zm.7 1.6v12.8h1.6V5.6Z" fill-rule="evenodd"/></svg>

package/dist-icons/functioneel-trechter.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.6 4h16.8a.9.9 0 0 1 .7 1.47l-6.5 7.83v5.6a.9.9 0 0 1-.5.8l-3 1.5a.9.9 0 0 1-1.3-.8v-7.1L2.9 5.47A.9.9 0 0 1 3.6 4Zm1.9 1.8 5.6 6.7a.9.9 0 0 1 .2.58v6.04l1.5-.75v-5.29a.9.9 0 0 1 .2-.58l5.6-6.7Z" fill-rule="evenodd"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lintje",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Lintje: the Rijkshuisstijl design system as Lit web components",
   "license": "EUPL-1.2",

package/dist-elements/chunks/confirm-dialog-D5EVGuil.js

@@ -1,4 +0,0 @@
-//#region src/components/overlays/confirm-dialog/confirm-dialog.css?inline
-var e = ":host { display: contents; }\n\n/* ------------------------------------------------------------------------ */\n\n.lintje-confirm-dialog__scrim {\n  position: fixed;\n  z-index: 80;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-6);\n  background: var(--color-overlay-page);\n  animation: lintje-fade-in var(--dur-scrim) var(--ease-in-motion);\n}\n\n.lintje-confirm-dialog {\n  width: min(440px, 100%);\n  max-height: 100%;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  padding: var(--space-6);\n  background: var(--color-bg-surface);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border-strong);\n  border-radius: var(--radius);\n  box-shadow: var(--shadow-popover);\n  animation: lintje-rise var(--dur-modal) var(--ease-in-motion);\n}\n/* The window takes focus only when the trap pulls stray focus back; it draws no ring. */\n.lintje-confirm-dialog:focus { outline: none; }\n.lintje-confirm-dialog__heading { font: var(--text-h2); }\n.lintje-confirm-dialog__text { font: var(--text-body); }\n\n.lintje-confirm-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-top: var(--space-3);\n}\n\n/* Phone: the buttons stack, the confirm on top and the safe one at the bottom. */\n@media (max-width: 767px) {\n  .lintje-confirm-dialog__scrim { padding: var(--space-4); }\n  .lintje-confirm-dialog { width: 100%; }\n  .lintje-confirm-dialog__actions { flex-direction: column; }\n  .lintje-confirm-dialog__confirm { order: 1; }\n  .lintje-confirm-dialog__action { order: 2; }\n  .lintje-confirm-dialog__cancel { order: 3; }\n}\n";
-//#endregion
-export { e as t };