lintje 0.2.0 → 0.4.0

package/dist-elements/types/components/inputs/find/find.d.ts

@@ -0,0 +1,51 @@
+/**
+ * `<lintje-find>` — a field that finds a word in content already shown, and steps through the hits.
+ *
+ * It searches nothing itself: the host, or the element around it, counts the hits, sets `total`
+ * and `current`, and marks them in its content with `lintje-highlight`. Finding filters nothing.
+ * The count and the buttons stand inside the field, so nothing around it moves while typing. A
+ * host that counts asynchronously sets `busy` until it knows the total.
+ *
+ * Events: `lintje-change` `string` (the term, 300 ms after the last key; `''` when cleared),
+ * `lintje-values-change` `{ [name]: term }` (with a `name`), `lintje-find-step` `1 | -1` (to the
+ * next or the previous hit; the host answers with `current`).
+ */
+import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import '../../feedback/spinner/spinner.js';
+import { LintjeInputElement } from '../shared/input.js';
+export declare class LintjeFind extends LintjeInputElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static properties: PropertyDeclarations;
+    value: string;
+    /** Without one, the field shows its label. */
+    placeholder: string;
+    /** The number of hits; `null` while there is no count. */
+    total: number | null;
+    /** The current hit, from 1; `0` for none. */
+    current: number;
+    /** The host is still counting: the field says "Zoeken…" and cannot step. */
+    busy: boolean;
+    protected message: string;
+    private readonly typing;
+    constructor();
+    private get navigable();
+    private get countText();
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private say;
+    private send;
+    private onInput;
+    private onKeydown;
+    private step;
+    private clear;
+    private keepTyping;
+    private renderButton;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lintje-find': LintjeFind;
+    }
+}

package/dist-elements/types/components/inputs/multiselect/multiselect.d.ts

@@ -2,13 +2,11 @@
  * `<lintje-multiselect>` — several values in one field: chips in the field, a search and a
  * checkbox list in the popover.
  *
- * Rows are `<lintje-checkbox>` without a `name`, so no filter change escapes the popover. The
- * popover is a dialog, not a listbox: it holds a search field and buttons besides the rows. It is
- * fixed to the viewport and anchored to the field: an absolute one is cut off by the scrolling
- * filter bar and sheet around it. Escape closes only the popover (`ownsEscape`) and gives the
- * focus back to the field; so does Tab out of the element, without taking the focus back.
+ * The popover is fixed to the viewport, so a scrolling filter bar or sheet around it does not cut
+ * it off. Escape and Tab out of the element close only the popover.
  *
- * Events: `lintje-change`; with a `name` also `lintje-values-change` (`shared/input.ts`).
+ * Events: `lintje-change` `string[]`, `lintje-values-change` `{ [name]: value }` (with a `name`),
+ * `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeInputElement } from '../shared/input.js';

package/dist-elements/types/components/inputs/number-input/number-input.d.ts

@@ -1,11 +1,12 @@
 /**
- * `<lintje-number-input>` — a −/+ stepper around a centred value, or a unit on the right
- * without the stepper. Commits on `change`; a press on − or + commits at once.
+ * `<lintje-number-input>` — a −/+ stepper around a centred value, or a unit on the right without
+ * the stepper.
  *
- * `stepper` defaults to `true`, so it can only be turned off as a property: `?stepper=${false}`
- * removes an attribute that was never there. A shown unit describes the field. At `min` or `max`
- * the step is `aria-disabled`, not disabled, so the focus on it stays. Events: `lintje-change`,
- * and `lintje-values-change` with a `name`.
+ * It commits on `change`; a press on − or + commits at once. At `min` or `max` the step stays
+ * focusable but does nothing.
+ *
+ * Events: `lintje-change` `number | null`, `lintje-values-change` `{ [name]: value }` (with a
+ * `name`), `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeFormInputElement } from '../shared/input.js';
@@ -17,7 +18,7 @@ export declare class LintjeNumberInput extends LintjeFormInputElement {
     min?: number;
     max?: number;
     step: number;
-    /** The unit on the right, e.g. "min"; shown only without the stepper. */
+    /** The unit on the right, e.g. "min", which describes the field; only without the stepper. */
     unit?: string;
     /** The −/+ buttons. Bind as `.stepper=${false}`, never `?stepper=`. */
     stepper: boolean;

package/dist-elements/types/components/inputs/radio-group/radio-group.d.ts

@@ -1,10 +1,8 @@
 /**
  * `<lintje-radio-group>` — one option per line, for options that do not fit `lintje-segmented`.
- * Options are `FilterOption[]`. Arrow keys are the browser's: the inputs share one `name` inside
- * this shadow root, so two groups never collide. `variant="cards"` draws each option as a card in
- * a grid, its `description` under the label, the chosen one quiet as in `lintje-segmented`.
  *
- * Events: `lintje-change`; with a `name` also `lintje-values-change` (`shared/input.ts`).
+ * Events: `lintje-change` `string`, `lintje-values-change` `{ [name]: value }` (with a `name`),
+ * `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeInputElement } from '../shared/input.js';

package/dist-elements/types/components/inputs/range/range.d.ts

@@ -1,13 +1,12 @@
 /**
  * `<lintje-range>` — one track, one or two handles, over labeled steps.
  *
- * Two handles: `from` and `to` are indexes into `steps`, and a change is `[from, to]`. With
- * `single`, `value` is the step itself, not its index, and a change is that step. A drag commits
- * when the pointer is let go (`draft`/`draftPair` show it meanwhile); a key press commits at once.
- * With two handles only the thumbs take the pointer, so a press on the track moves the nearer
- * handle there; on stacked handles the side of the press decides.
+ * With two handles `from` and `to` are indexes into `steps`, and a change is `[from, to]`; with
+ * `single`, `value` is the step itself, and a change is that step. A drag commits when the pointer
+ * is let go, a key press at once.
  *
- * Events: `lintje-change`; with a `name` also `lintje-values-change` (`shared/input.ts`).
+ * Events: `lintje-change` `[number, number] | number | string`, `lintje-values-change`
+ * `{ [name]: value }` (with a `name`), `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeInputElement } from '../shared/input.js';

package/dist-elements/types/components/inputs/segmented/segmented.d.ts

@@ -1,11 +1,14 @@
 /**
- * `<lintje-segmented>` — one row of options, the chosen one marked. A row wider than its room
- * stands as a column instead, each option a row of its own.
- * In a filter bar it is `hide-label` and nameless; the bar decides what to commit.
+ * `<lintje-segmented>` — one row of options, the chosen one marked; a row wider than its room
+ * stands as a column.
  *
- * Events: `lintje-change`; with a `name` also the composed `lintje-values-change`.
+ * In a filter bar it is `hide-label` and nameless: the bar decides what to commit.
+ *
+ * Events: `lintje-change` `string`, `lintje-values-change` `{ [name]: value }` (with a `name`),
+ * `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
+import '../../feedback/badge/badge.js';
 import { LintjeInputElement } from '../shared/input.js';
 import type { FilterOption } from '../../../types.js';
 export declare class LintjeSegmented extends LintjeInputElement {

package/dist-elements/types/components/inputs/select/select.d.ts

@@ -1,9 +1,11 @@
 /**
  * `<lintje-select>` — a select, bold once the value differs from the default.
- * The filter bar passes no `name` and sets `hide-label`. The width is the host's, not inline,
- * so `filter-layout.css` can narrow it from outside.
  *
- * Events: `lintje-change`; with a `name` also the composed `lintje-values-change`.
+ * In a filter bar it is `hide-label` and nameless. Its width is the host's, so the filter layout
+ * can narrow it from outside.
+ *
+ * Events: `lintje-change` `string`, `lintje-values-change` `{ [name]: value }` (with a `name`),
+ * `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeInputElement } from '../shared/input.js';
@@ -12,6 +14,7 @@ export declare class LintjeSelect extends LintjeInputElement {
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;
     value: string;
+    /** Bold the value, as a modified filter does. */
     bold: boolean;
     stacked: boolean;
     options?: FilterOption[];

package/dist-elements/types/components/inputs/shared/input.d.ts

@@ -6,7 +6,7 @@
  * is set, so an input inside another component's shadow root does not leak a filter change.
  */
 import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
 /** What an input may commit. A host serialises it into the URL. */
 export type InputValue = string | number | boolean | null;
 export declare abstract class LintjeInputElement extends LintjeGridItemElement {

package/dist-elements/types/components/inputs/slot-picker/slot-picker.d.ts

@@ -1,11 +1,12 @@
 /**
  * `<lintje-slot-picker>` — a time for an appointment: days side by side, each with its times as
- * options. One radio group over every day, so the arrow keys walk the times and Tab stops once;
- * a time's name carries its day. A full time stays, disabled, with the word "Vol" beside it
- * (rule 13), and a day without times says so. The days are the host's: it sends the ones it
- * offers, and pages them itself.
+ * options.
  *
- * Events: `lintje-change` with the chosen time's `value`; with a `name` also `lintje-values-change`.
+ * The days are the host's: it sends the ones it offers, and pages them itself. One radio group
+ * spans every day, so Tab stops once. A full time stays, disabled, with the word "Vol" beside it.
+ *
+ * Events: `lintje-change` `string` (the chosen time's `value`), `lintje-values-change`
+ * `{ [name]: value }` (with a `name`), `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeInputElement } from '../shared/input.js';

package/dist-elements/types/components/inputs/tag-input/tag-input.d.ts

@@ -1,13 +1,15 @@
 /**
- * `<lintje-tag-input>` — free keywords as chips in one field. Enter, a comma, a paste with commas
- * or leaving the field makes chips; a duplicate lights up its chip and is said instead of being
- * added. With `.options` it also suggests options, and still takes a word that is not among them.
- * A chip's cross is its one control: the arrows walk the crosses, Backspace and Delete remove.
+ * `<lintje-tag-input>` — free keywords as chips in one field.
  *
- * Events: `lintje-change`; with a `name` also the composed `lintje-values-change`.
+ * Enter, a comma, a paste with commas or leaving the field makes chips; a duplicate is pointed out
+ * instead of added. With `options` it also suggests, and still takes a word that is not among
+ * them.
+ *
+ * Events: `lintje-change` `string[]`, `lintje-values-change` `{ [name]: value }` (with a `name`),
+ * `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import '../../../primitives/popover/popover.js';
+import '../../overlays/popover/popover.js';
 import { LintjeInputElement } from '../shared/input.js';
 import type { FilterOption } from '../../../types.js';
 export declare function splitWords(text: string): string[];

package/dist-elements/types/components/inputs/text-editor/text-editor.d.ts

@@ -1,16 +1,16 @@
 /**
- * `<lintje-text-editor>` — formatted text (bold, italic, one heading, a bullet list, a link);
- * the value is markdown (`markdown.ts`). Formatting uses `document.execCommand`, the one API
- * every browser has for a `contenteditable` selection; the markdown writer reads only the five
- * formats from whatever markup it leaves. Commits when the surface loses focus, if changed.
- * A link is http(s), mailto, tel or relative; any other scheme is dropped.
+ * `<lintje-text-editor>` — formatted text: bold, italic, one heading, a bullet list and a link.
  *
- * Events: `lintje-change` with the markdown; with a `name` also the composed `lintje-values-change`.
+ * The value is markdown, committed when the surface loses focus, if changed. A link is http(s),
+ * mailto, tel or relative; any other scheme is dropped.
+ *
+ * Events: `lintje-change` `string` (the markdown), `lintje-values-change` `{ [name]: value }`
+ * (with a `name`), `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeInputElement } from '../shared/input.js';
-import '../../../primitives/popover/popover.js';
-import '../../../primitives/button/button.js';
+import '../../overlays/popover/popover.js';
+import '../../actions/button/button.js';
 import '../text-input/text-input.js';
 export type EditorFormat = 'bold' | 'italic' | 'heading' | 'list' | 'link';
 export declare class LintjeTextEditor extends LintjeInputElement {

package/dist-elements/types/components/inputs/text-input/text-input.d.ts

@@ -1,13 +1,15 @@
 /**
- * `<lintje-text-input>` — a text field: `clearable`, `error`, `readonly`, and `type` text,
- * search, password or email. It checks nothing itself; the host sets `error`.
+ * `<lintje-text-input>` — a text field: text, search, password or email.
  *
- * It commits on `change` (leaving the field, Enter), since every commit is a URL change and a
- * tile reload. `commit="input"` bundles keystrokes and commits 300 ms after the last. The same
- * value is never committed twice. Events: `lintje-change`, and `lintje-values-change` with `name`.
+ * It checks nothing itself: the host sets `error`. It commits on `change` (leaving the field,
+ * Enter), since every commit is a URL change and a tile reload, and never commits the same value
+ * twice.
+ *
+ * Events: `lintje-change` `string`, `lintje-values-change` `{ [name]: value }` (with a `name`),
+ * `lintje-reset` (the reset link was pressed).
  */
 import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import '../../../primitives/button/button.js';
+import '../../actions/button/button.js';
 import { LintjeFormInputElement } from '../shared/input.js';
 export type TextInputType = 'text' | 'search' | 'password' | 'email';
 /** When a typed value is committed: on leaving the field, or 300 ms after the last key. */
@@ -22,7 +24,10 @@ export declare class LintjeTextInput extends LintjeFormInputElement {
     clearable: boolean;
     stacked: boolean;
     type: TextInputType;
-    /** The attribute `commit`; `commit()` is the method every input commits through. */
+    /**
+     * The attribute `commit`; `commit()` is the method every input commits through. `input`
+     * bundles keystrokes and commits 300 ms after the last.
+     */
     commitOn: CommitOn;
     /** Passed to the native input as is. */
     autocomplete: string;

package/dist-elements/types/components/inputs/textarea/textarea.d.ts

@@ -1,15 +1,13 @@
 /**
- * `<lintje-textarea>` — the multi-line text field: three to twelve lines (`rows` sets the least),
- * with a counter when there is a `maxlength`. `variant="plain"` drops the field's box and its
- * focus ring, takes the type of where it stands and fills its height, for a surface that frames
- * the text and draws the ring itself (`lintje-translator`). Typing past the limit is allowed (a paste lands whole); the field
- * shows the error, alerted once as the text crosses the limit. The counter is read out from 90 %
- * of the limit on.
+ * `<lintje-textarea>` — the multi-line text field: three to twelve lines, with a counter when
+ * there is a `maxlength`.
  *
- * The counter is `part="counter"`, so a surface can stand it on its own line.
+ * It commits like `lintje-text-input`; Ctrl+Enter commits and submits a host's form. Typing past
+ * the limit is allowed, so a paste lands whole: the field shows the error. The counter is
+ * `part="counter"`, so a surface can stand it on its own line.
  *
- * Commits like `lintje-text-input`; Ctrl+Enter commits and submits a host's form.
- * Events: `lintje-change`, and `lintje-values-change` with a `name`.
+ * Events: `lintje-change` `string`, `lintje-values-change` `{ [name]: value }` (with a `name`),
+ * `lintje-reset` (the reset link was pressed).
  */
 import { nothing, type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeFormInputElement } from '../shared/input.js';
@@ -24,14 +22,17 @@ export declare class LintjeTextarea extends LintjeFormInputElement {
     static properties: PropertyDeclarations;
     value: string;
     placeholder: string;
-    /** The limit the counter counts to. */
+    /** The limit the counter counts to; the counter is read out from 90 % of it on. */
     maxlength?: number;
     /** The attribute `commit`; `commit()` is the method every input commits through. */
     commitOn: CommitOn;
     stacked: boolean;
     /** The least number of lines the field shows. */
     rows: number;
-    /** `field` (default): the bordered field; `plain`: no box, the type of where it stands. */
+    /**
+     * `field` (default): the bordered field. `plain`: no box and no focus ring, the type of where it
+     * stands and the full height, for a surface that frames the text and draws the ring itself.
+     */
     variant: TextareaVariant;
     private readonly typing;
     private get counterId();

package/dist-elements/types/components/inputs/time-input/time-input.d.ts

@@ -1,17 +1,16 @@
 /**
- * `<lintje-time-input>` — a time of day, `HH:MM` on a 24-hour clock, or `null` when empty, typed
- * or picked from a list. Typed text is read on leaving the field or Enter (`time-format.ts`).
- * The list holds the times from `min` to `max`, `step` minutes apart; a typed value between two
- * of them stays as typed, and the list opens on the first time at or after it without selecting
- * one. The element checks its own text and shows a message in place of the hint; a host's
- * `error` wins. It knows no day or time zone. Tab out of the element closes the list, so it does
- * not cover the next field.
+ * `<lintje-time-input>` — a time of day, `HH:MM` on a 24-hour clock, typed or picked from a list.
  *
- * Events: `lintje-change` with `HH:MM` or `null`; with a `name` also `lintje-values-change`.
+ * The element reads typed text on leaving the field or Enter, checks it and shows a message in
+ * place of the hint; a host's `error` wins. A typed time between two in the list stays as typed.
+ * It knows no day or time zone. Tab out of the element closes the list.
+ *
+ * Events: `lintje-change` `string | null` (`HH:MM`), `lintje-values-change` `{ [name]: value }`
+ * (with a `name`), `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeInputElement } from '../shared/input.js';
-import '../../../primitives/popover/popover.js';
+import '../../overlays/popover/popover.js';
 export declare class LintjeTimeInput extends LintjeInputElement {
     static styles: import("lit").CSSResult[];
     static properties: PropertyDeclarations;

package/dist-elements/types/components/inputs/toggle/toggle.d.ts

@@ -1,8 +1,10 @@
 /**
  * `<lintje-toggle>` — a switch for immediate effect: it commits when switched, never in a form.
+ *
  * A value that waits for a button is a checkbox.
  *
- * Events: `lintje-change`; with a `name` also the composed `lintje-values-change`.
+ * Events: `lintje-change` `boolean`, `lintje-values-change` `{ [name]: value }` (with a `name`),
+ * `lintje-reset` (the reset link was pressed).
  */
 import { type PropertyDeclarations, type TemplateResult } from 'lit';
 import { LintjeInputElement } from '../shared/input.js';

package/dist-elements/types/components/layout/expander/expander.d.ts

@@ -1,18 +1,14 @@
 /**
  * `<lintje-expander>` — a title you press; what is slotted under it shows or hides.
  *
- * Shares its disclosure (`shared/disclosure.ts`) with `lintje-explainer` (rule 2). Closed, the
- * content stays in the DOM, out of the tab order and the accessibility tree. What is slotted in
- * `actions` stands beside the title, outside its button: a few icon buttons about the content.
- * `leading` puts the chevron before the title and the content in line with the title's text, for
- * a stack of expanders that read as rows. `columns` sets the title in a column of its own
- * (`--lintje-expander-label`) with the content beside it, as rows of text do beside their speaker;
- * a narrow expander stacks them again.
+ * Closed, the content stays in the DOM, out of the tab order and the accessibility tree. What is
+ * slotted in `actions` stands beside the title, outside its button: a few icon buttons about the
+ * content.
  *
- * Events: `lintje-toggle` (open, after the reader pressed the title).
+ * Events: `lintje-toggle` `boolean` (open, after the reader pressed the title).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
-import { LintjeGridItemElement } from '../../../primitives/shared/grid-item-element.js';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
 export declare class LintjeExpander extends LintjeGridItemElement {
     #private;
     static styles: import("lit").CSSResult[];
@@ -24,9 +20,12 @@ export declare class LintjeExpander extends LintjeGridItemElement {
     open: boolean;
     /** No surface of its own: an expander inside a tile is not a second card. */
     flat: boolean;
-    /** The chevron before the title, the content under the title's text. */
+    /** The chevron before the title, the content under the title's text: expanders read as rows. */
     leading: boolean;
-    /** The title in a column of its own, the content beside it. */
+    /**
+     * The title in a column of its own (`--lintje-expander-label`), the content beside it, as rows
+     * of text beside their speaker; a narrow expander stacks them again.
+     */
     columns: boolean;
     protected updated(changed: PropertyValues<this>): void;
     protected render(): TemplateResult;

package/dist-elements/types/{primitives → components/layout}/grid/grid.d.ts

@@ -1,10 +1,10 @@
 /**
- * `<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';
+import { LintjeElement } from '../../../core/element.js';
 export declare class LintjeGrid extends LintjeElement {
     static styles: import("lit").CSSResult;
     static properties: {

package/dist-elements/types/{primitives → components/layout}/grid-item/grid-item.d.ts

@@ -1,6 +1,6 @@
-/** `<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';
+import { LintjeGridItemElement } from '../../shared/grid-item-element.js';
 export declare class LintjeGridItem extends LintjeGridItemElement {
     static styles: import("lit").CSSResult;
     protected render(): TemplateResult;

package/dist-elements/types/components/layout/split-pane/split-pane.d.ts

@@ -1,13 +1,12 @@
 /**
  * `<lintje-split-pane>` — two panels side by side with a split the reader moves.
  *
- * Without dragging (WCAG 2.5.7): a click on the strip lifts the split, and the next click places
- * it where it lands; Escape or a click outside puts it back. A double click returns to 50/50.
+ * It moves without dragging too: a click on the strip lifts the split and the next click places
+ * it; Escape or a click outside puts it back, a double click returns to 50/50. Below 768 px there
+ * are never two panels: a segmented control chooses which one shows.
  *
- * Below 768 px there are never two panels: a `<lintje-segmented>` chooses which one shows. That
- * choice is `pane`; a host that keeps it in the URL sets `pane` back.
- *
- * Events: `lintje-split-change` (the percentage), `lintje-pane-change` (`'start'` | `'end'`).
+ * Events: `lintje-split-change` `number` (the percentage), `lintje-pane-change`
+ * `'start' | 'end'`.
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
@@ -31,6 +30,7 @@ export declare class LintjeSplitPane extends LintjeElement {
     /** The two panels' names, for the phone's choice. */
     startLabel: string;
     endLabel: string;
+    /** The panel shown below 768 px; a host that keeps it in the URL sets it back. */
     pane: SplitPaneSide;
     protected dragging: boolean;
     protected willUpdate(changed: PropertyValues<this>): void;

package/dist-elements/types/components/layout/tabs/tabs.d.ts

@@ -1,17 +1,16 @@
 /**
- * `<lintje-tabs>` — switches between panels slotted under each tab's `value`. The host holds
- * `value`; the tabs only ask. A modified click on a link tab is the browser's.
- * The row is one tab stop: arrows choose at once, and a disabled tab is reached but not chosen.
- * `variant="panel"` draws large tabs that head a panel: each with an icon and a hint, the chosen
- * one running into the panel below; on a phone the icon stands above the label and the hint goes.
- * When every tab is a link, the row is a `<nav>` of links, the chosen one `aria-current="page"`,
- * with the same look: pages are no tabs, and the content under it is the page's, not a tabpanel.
+ * `<lintje-tabs>` — switches between panels slotted under each tab's `value`.
  *
- * Events: `lintje-tab-change` (the value), `lintje-navigate` `{ href }` for a tab with an `href`.
+ * The host holds `value`: the tabs only ask. The row is one tab stop; arrows choose at once. When
+ * every tab is a link, the row is a `<nav>` of links with the same look, and the content under it
+ * is the page's, not a tab panel.
+ *
+ * Events: `lintje-tab-change` `string` (the value), `lintje-navigate` `{ href }` (a tab with an
+ * `href`).
  */
 import { type PropertyDeclarations, type PropertyValues, type TemplateResult } from 'lit';
 import { LintjeElement } from '../../../core/element.js';
-import '../../../primitives/badge/badge.js';
+import '../../feedback/badge/badge.js';
 export interface TabItem {
     /** What `lintje-tab-change` carries and the name of the panel's slot. */
     value: string;
@@ -40,7 +39,10 @@ export declare class LintjeTabs extends LintjeElement {
     /** The chosen tab's value; the first tab when unset. */
     value?: string;
     label: string;
-    /** `line` (default): a row over the content; `panel`: large tabs that head a bordered panel. */
+    /**
+     * `line` (default): a row over the content. `panel`: large tabs that head a bordered panel, each
+     * with an icon and a hint; on a phone the icon stands above the label and the hint goes.
+     */
     variant: TabsVariant;
     protected edges: {
         start: boolean;

package/dist-elements/types/{primitives → components/layout}/tile/tile.d.ts

@@ -1,17 +1,22 @@
 /**
- * `<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';
-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 { LintjeGridItemElement } from '../../shared/grid-item-element.js';
+import '../../actions/button/button.js';
+import '../../actions/icon-button/icon-button.js';
+import '../../feedback/status-dot/status-dot.js';
+import '../../feedback/skeleton/skeleton.js';
+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/components/map/map/map.d.ts

@@ -1,22 +1,21 @@
 /**
- * `<lintje-map>` — a map in its tile. The map shows a new layer at once and expects the host
- * to confirm it in the next `data`. `tile.expandable` shows the same map again in the modal; the
- * modal's own events stop here.
+ * `<lintje-map>` — a map in its tile.
  *
- * Events: `lintje-mark-select` `{id, label, href?}` (`href` is the one the server minted on that
- * mark) and `lintje-layer-change` (the chosen layer's `value`). Undoing a selection is
- * `lintje-mark-select` with `id: null` and `data.clearHref`, so a page that keeps the selection
- * in the URL can drop it. With `data.controls.lasso`, `.circle` or `.rect` a drawn area chooses
- * every mark in it — two or more tools share one button that opens their menu:
- * `lintje-area-select` `{area, ids}`, and `{area: null, ids: []}` when it is undone; the host
+ * A new layer shows at once and expects the host to confirm it in the next `data`. With
+ * `tile.expandable` the same map shows again in the modal, whose own events stop here. With
+ * `data.controls.lasso`, `.circle` or `.rect` a drawn area chooses every mark in it; the host
  * keeps the area in its URL and sends it back as `selectedArea`.
+ *
+ * Events: `lintje-mark-select` `{ id, label, href? }` (deselected, `id: null` and
+ * `href: data.clearHref`), `lintje-layer-change` `string` (the chosen layer's value),
+ * `lintje-area-select` `{ area, ids }` (undone, `{ area: null, ids: [] }`).
  */
 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 '../../../primitives/tile/tile.js';
-import '../../../primitives/tooltip/tooltip.js';
+import '../../layout/tile/tile.js';
+import '../../overlays/tooltip/tooltip.js';
 import type { MapData } from '../../../types.js';
 export declare class LintjeMap extends LintjeContentTileElement {
     #private;
@@ -26,12 +25,14 @@ export declare class LintjeMap extends LintjeContentTileElement {
     /** The chosen layer, shown before the host confirms it. */
     layer?: string;
     protected get dataSettings(): FrameSettings | undefined;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected expandChanged(open: boolean): void;
     protected willUpdate(changed: PropertyValues<this>): void;
     private png;
     private csv;
     protected render(): TemplateResult | typeof nothing;
+    /** The map, or its skeleton for the tile's `loading` slot; empty and error are the tile's. */
     private content;
     /** Refocuses the chosen mark so clearing does not drop a keyboard user at the top; the map area
      * takes the focus when the mark is gone after a redraw. */