@fusion.dev/helix-headless 0.178.0 → 0.180.0

package/types/jsx.d.ts

@@ -10476,6 +10476,12 @@ for the page's language, then the English. */
 so a form in another language speaks it. Unset is the sentence registered
 for the page's language, then the English. */
   rangeLengthMessage?: (HelixHeadlessDateInput["rangeLengthMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "range-order-message"?: (HelixHeadlessDateInput["rangeOrderMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  rangeOrderMessage?: (HelixHeadlessDateInput["rangeOrderMessage"]) | undefined;
   /** The message shown when a date is after `max`. `{max}` is replaced with
 `max`, written the way the field writes dates. */
   "range-overflow-message"?: (HelixHeadlessDateInput["rangeOverflowMessage"]) | undefined;
@@ -11008,6 +11014,12 @@ for the page's language, then the English. */
 so a form in another language speaks it. Unset is the sentence registered
 for the page's language, then the English. */
   "prop:rangeLengthMessage"?: (HelixHeadlessDateInput["rangeLengthMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "attr:range-order-message"?: (HelixHeadlessDateInput["rangeOrderMessage"]) | undefined;
+  /** The message shown when a range ends before it starts. `{start}` is
+replaced with the start, written the way the field writes dates. */
+  "prop:rangeOrderMessage"?: (HelixHeadlessDateInput["rangeOrderMessage"]) | undefined;
   /** The message shown when a date is after `max`. `{max}` is replaced with
 `max`, written the way the field writes dates. */
   "attr:range-overflow-message"?: (HelixHeadlessDateInput["rangeOverflowMessage"]) | undefined;
@@ -11527,6 +11539,12 @@ it. */
   "previous-years-label"?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
   /** Accessible name for the control that moves back a page, in the years. */
   previousYearsLabel?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "range-order-message"?: (HelixHeadlessDatePicker["rangeOrderMessage"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  rangeOrderMessage?: (HelixHeadlessDatePicker["rangeOrderMessage"]) | undefined;
   /** The validation message for a date after `max`. `{max}` is replaced with
 `max`, written as a date in `locale`. */
   "range-overflow-message"?: (HelixHeadlessDatePicker["rangeOverflowMessage"]) | undefined;
@@ -11882,6 +11900,12 @@ it. */
   "attr:previous-years-label"?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
   /** Accessible name for the control that moves back a page, in the years. */
   "prop:previousYearsLabel"?: (HelixHeadlessDatePicker["previousYearsLabel"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "attr:range-order-message"?: (HelixHeadlessDatePicker["rangeOrderMessage"]) | undefined;
+  /** The validation message for a range that ends before it starts. `{start}`
+is replaced with the start, written as a date in `locale`. */
+  "prop:rangeOrderMessage"?: (HelixHeadlessDatePicker["rangeOrderMessage"]) | undefined;
   /** The validation message for a date after `max`. `{max}` is replaced with
 `max`, written as a date in `locale`. */
   "attr:range-overflow-message"?: (HelixHeadlessDatePicker["rangeOverflowMessage"]) | undefined;
@@ -15664,6 +15688,12 @@ export type HelixHeadlessHeatmapElementEvent<E = Event> = TypedEvent<
 /** `helix-before-change` event type */
 export type HelixHeadlessHeatmapHelixBeforeChangeElementEvent =
   HelixHeadlessHeatmapElementEvent<HelixBeforeChangeEvent>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessHeatmapHelixReadingChangeElementEvent =
+  HelixHeadlessHeatmapElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessHeatmapHelixReadingPressElementEvent =
+  HelixHeadlessHeatmapElementEvent<HelixReadingPressEvent>;
 /** `helix-resize` event type */
 export type HelixHeadlessHeatmapHelixResizeElementEvent =
   HelixHeadlessHeatmapElementEvent<HelixResizeEvent>;
@@ -15675,16 +15705,6 @@ export type HelixHeadlessHeatmapProps = {
   /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
 `overview-label`. */
   busiestLabel?: (HelixHeadlessHeatmap["busiestLabel"]) | undefined;
-  /** Shown when the table has no readings in it.
-
-Never shown while the table cannot be read at all, which is a server render
-and the hydrating one after it: see `sourceKnown`. */
-  "empty-text"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
-  /** Shown when the table has no readings in it.
-
-Never shown while the table cannot be read at all, which is a server render
-and the hydrating one after it: see `sourceKnown`. */
-  emptyText?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels. It is a number for the same reason
 `min-cell` is. */
   gap?: (HelixHeadlessHeatmap["gap"]) | undefined;
@@ -15742,13 +15762,9 @@ calendar heatmap does: a week is a column, so the strip reads along the
 line in weeks, from the right on a right-to-left page, and top to bottom in
 days. */
   rows?: (HelixHeadlessHeatmap["rows"]) | undefined;
-  /** What the readout adds for a selected cell, under `selection-mode`, after
-where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-nothing. */
+  /** What the readout added for a selected cell, under `selection-mode`. */
   "selected-label"?: (HelixHeadlessHeatmap["selectedLabel"]) | undefined;
-  /** What the readout adds for a selected cell, under `selection-mode`, after
-where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-nothing. */
+  /** What the readout added for a selected cell, under `selection-mode`. */
   selectedLabel?: (HelixHeadlessHeatmap["selectedLabel"]) | undefined;
   /** What the `selection` part says after the selection changes. `{count}` is
 how many cells are selected, written in the locale, and a language that
@@ -15805,6 +15821,25 @@ header's words where it carries none.
 Set it to start with cells selected. Written by a press or a key under
 `selection-mode`. */
   value?: (HelixHeadlessHeatmap["value"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
+  /** Whether the readings are still on their way. The chart shows
+`loading-text` in place of an empty drawing until it has readings.
+
+Reflected, so a stylesheet can treat the chart while it waits. A chart
+that already has readings keeps drawing them, so a refresh does not
+blank it. */
+  loading?: (HelixHeadlessHeatmap["loading"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  "loading-text"?: (HelixHeadlessHeatmap["loadingText"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  loadingText?: (HelixHeadlessHeatmap["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -15871,6 +15906,14 @@ does not look inside the one it has. */
   "onhelix-before-change"?: ((
     e: HelixHeadlessHeatmapHelixBeforeChangeElementEvent,
   ) => void) | undefined;
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "onhelix-reading-change"?: ((
+    e: HelixHeadlessHeatmapHelixReadingChangeElementEvent,
+  ) => void) | undefined;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "onhelix-reading-press"?: ((
+    e: HelixHeadlessHeatmapHelixReadingPressElementEvent,
+  ) => void) | undefined;
   /** Fired when the number of cells drawn changes, with the new number. */
   "onhelix-resize"?: ((e: HelixHeadlessHeatmapHelixResizeElementEvent) => void) | undefined;
 };
@@ -15882,16 +15925,6 @@ export type HelixHeadlessHeatmapSolidJsProps = {
   /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
 `overview-label`. */
   "prop:busiestLabel"?: (HelixHeadlessHeatmap["busiestLabel"]) | undefined;
-  /** Shown when the table has no readings in it.
-
-Never shown while the table cannot be read at all, which is a server render
-and the hydrating one after it: see `sourceKnown`. */
-  "attr:empty-text"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
-  /** Shown when the table has no readings in it.
-
-Never shown while the table cannot be read at all, which is a server render
-and the hydrating one after it: see `sourceKnown`. */
-  "prop:emptyText"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels. It is a number for the same reason
 `min-cell` is. */
   "prop:gap"?: (HelixHeadlessHeatmap["gap"]) | undefined;
@@ -15949,13 +15982,9 @@ calendar heatmap does: a week is a column, so the strip reads along the
 line in weeks, from the right on a right-to-left page, and top to bottom in
 days. */
   "prop:rows"?: (HelixHeadlessHeatmap["rows"]) | undefined;
-  /** What the readout adds for a selected cell, under `selection-mode`, after
-where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-nothing. */
+  /** What the readout added for a selected cell, under `selection-mode`. */
   "attr:selected-label"?: (HelixHeadlessHeatmap["selectedLabel"]) | undefined;
-  /** What the readout adds for a selected cell, under `selection-mode`, after
-where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-nothing. */
+  /** What the readout added for a selected cell, under `selection-mode`. */
   "prop:selectedLabel"?: (HelixHeadlessHeatmap["selectedLabel"]) | undefined;
   /** What the `selection` part says after the selection changes. `{count}` is
 how many cells are selected, written in the locale, and a language that
@@ -16012,6 +16041,25 @@ header's words where it carries none.
 Set it to start with cells selected. Written by a press or a key under
 `selection-mode`. */
   "prop:value"?: (HelixHeadlessHeatmap["value"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "attr:empty-text"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "prop:emptyText"?: (HelixHeadlessHeatmap["emptyText"]) | undefined;
+  /** Whether the readings are still on their way. The chart shows
+`loading-text` in place of an empty drawing until it has readings.
+
+Reflected, so a stylesheet can treat the chart while it waits. A chart
+that already has readings keeps drawing them, so a refresh does not
+blank it. */
+  "prop:loading"?: (HelixHeadlessHeatmap["loading"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  "attr:loading-text"?: (HelixHeadlessHeatmap["loadingText"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  "prop:loadingText"?: (HelixHeadlessHeatmap["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -16077,6 +16125,14 @@ does not look inside the one it has. */
   "on:helix-before-change"?: ((
     e: HelixHeadlessHeatmapHelixBeforeChangeElementEvent,
   ) => void) | undefined;
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "on:helix-reading-change"?: ((
+    e: HelixHeadlessHeatmapHelixReadingChangeElementEvent,
+  ) => void) | undefined;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "on:helix-reading-press"?: ((
+    e: HelixHeadlessHeatmapHelixReadingPressElementEvent,
+  ) => void) | undefined;
   /** Fired when the number of cells drawn changes, with the new number. */
   "on:helix-resize"?: ((e: HelixHeadlessHeatmapHelixResizeElementEvent) => void) | undefined;
 
@@ -19125,7 +19181,8 @@ React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
 
 **The list needs a height to scroll in**: the styled tier's
 `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-headless tier. Import the Option family as well, whose elements are drawn.
+headless tier. The options drawn are this tier's Option, which the page
+imports, as it imports the options it writes.
 A server sends the list empty, and the options are drawn once it hydrates. */
   items?: (HelixHeadlessListbox["items"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.
@@ -19423,7 +19480,8 @@ React Aria virtualizes a `ListBox` with its `Virtualizer`; this is core's
 
 **The list needs a height to scroll in**: the styled tier's
 `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-headless tier. Import the Option family as well, whose elements are drawn.
+headless tier. The options drawn are this tier's Option, which the page
+imports, as it imports the options it writes.
 A server sends the list empty, and the options are drawn once it hydrates. */
   "prop:items"?: (HelixHeadlessListbox["items"]) | undefined;
   /** Which option is chosen, as an index, or `-1` where none is.
@@ -22283,6 +22341,20 @@ empty string would give. */
   "default-read"?: (HelixHeadlessNotification["defaultRead"]) | undefined;
   /** Whether the notification starts as read, used until `read` is set. */
   defaultRead?: (HelixHeadlessNotification["defaultRead"]) | undefined;
+  /** The dismiss control's name, read by screen readers, with `{label}` for the
+row's own words.
+
+One sentence with the words in it, so a translation puts them where its
+language does: `registerWords('de', { 'helix-notification': { dismissLabel:
+'{label} schließen' } })`. */
+  "dismiss-label"?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
+  /** The dismiss control's name, read by screen readers, with `{label}` for the
+row's own words.
+
+One sentence with the words in it, so a translation puts them where its
+language does: `registerWords('de', { 'helix-notification': { dismissLabel:
+'{label} schließen' } })`. */
+  dismissLabel?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
   /** Locale for the timestamp.
 
 Empty is the runtime's own. */
@@ -22313,28 +22385,6 @@ its place. Translate it with the rest of your interface. */
   unreadLabel?: (HelixHeadlessNotification["unreadLabel"]) | undefined;
   /** Whether the element shows a control that dismisses it. */
   dismissible?: (HelixHeadlessNotification["dismissible"]) | undefined;
-  /** The dismiss control's label, read by screen readers.
-
-`attribute` is spelled out because Lit lowercases a property name to
-derive one rather than dash-casing it, so this would otherwise be
-reachable only as `dismisslabel`, which nobody would guess and no linter
-would catch.
-
-A word property: register it for a locale under the host's key. A family
-that names the control otherwise, such as Tag's `Remove {label}`,
-declares its own English with `@words` above the override. */
-  "dismiss-label"?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
-  /** The dismiss control's label, read by screen readers.
-
-`attribute` is spelled out because Lit lowercases a property name to
-derive one rather than dash-casing it, so this would otherwise be
-reachable only as `dismisslabel`, which nobody would guess and no linter
-would catch.
-
-A word property: register it for a locale under the host's key. A family
-that names the control otherwise, such as Tag's `Remove {label}`,
-declares its own English with `@words` above the override. */
-  dismissLabel?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
 
   /** Fired when the user dismisses the notification. Cancelable. */
   "onhelix-dismiss"?: ((
@@ -22356,6 +22406,20 @@ empty string would give. */
   "bool:default-read"?: (HelixHeadlessNotification["defaultRead"]) | undefined;
   /** Whether the notification starts as read, used until `read` is set. */
   "prop:defaultRead"?: (HelixHeadlessNotification["defaultRead"]) | undefined;
+  /** The dismiss control's name, read by screen readers, with `{label}` for the
+row's own words.
+
+One sentence with the words in it, so a translation puts them where its
+language does: `registerWords('de', { 'helix-notification': { dismissLabel:
+'{label} schließen' } })`. */
+  "attr:dismiss-label"?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
+  /** The dismiss control's name, read by screen readers, with `{label}` for the
+row's own words.
+
+One sentence with the words in it, so a translation puts them where its
+language does: `registerWords('de', { 'helix-notification': { dismissLabel:
+'{label} schließen' } })`. */
+  "prop:dismissLabel"?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
   /** Locale for the timestamp.
 
 Empty is the runtime's own. */
@@ -22386,28 +22450,6 @@ its place. Translate it with the rest of your interface. */
   "prop:unreadLabel"?: (HelixHeadlessNotification["unreadLabel"]) | undefined;
   /** Whether the element shows a control that dismisses it. */
   "prop:dismissible"?: (HelixHeadlessNotification["dismissible"]) | undefined;
-  /** The dismiss control's label, read by screen readers.
-
-`attribute` is spelled out because Lit lowercases a property name to
-derive one rather than dash-casing it, so this would otherwise be
-reachable only as `dismisslabel`, which nobody would guess and no linter
-would catch.
-
-A word property: register it for a locale under the host's key. A family
-that names the control otherwise, such as Tag's `Remove {label}`,
-declares its own English with `@words` above the override. */
-  "attr:dismiss-label"?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
-  /** The dismiss control's label, read by screen readers.
-
-`attribute` is spelled out because Lit lowercases a property name to
-derive one rather than dash-casing it, so this would otherwise be
-reachable only as `dismisslabel`, which nobody would guess and no linter
-would catch.
-
-A word property: register it for a locale under the host's key. A family
-that names the control otherwise, such as Tag's `Remove {label}`,
-declares its own English with `@words` above the override. */
-  "prop:dismissLabel"?: (HelixHeadlessNotification["dismissLabel"]) | undefined;
   /** Fired when the user dismisses the notification. Cancelable. */
   "on:helix-dismiss"?: ((
     e: HelixHeadlessNotificationHelixDismissElementEvent,
@@ -39530,6 +39572,15 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `click() => void`: Presses the button, as `click()` presses a native one: the command is sent,
+   * the form submits or resets, and `helix-press` says `virtual`.
+   *
+   * **Passed to the inner control, because a click on the host reaches nothing
+   * that acts.** The control in the shadow root is what answers a click, so
+   * `click()` from a script, an automation or a test, dispatched on the host,
+   * submitted nothing and sent no `helix-press`. The control's own click reaches
+   * the host's listeners once, retargeted, as one from a native button does. A
+   * disabled button does nothing, and a pending one refuses the press.
    * - `formAssociatedCallback(form: HTMLFormElement | null) => void`: Called by the browser when the button's form changes.
    * - `formDisabledCallback(disabled: boolean) => void`: Called by the browser when an ancestor fieldset is disabled or enabled.
    *
@@ -40913,7 +40964,8 @@ export type CustomElements = {
    * The composer clears only when no listener cancels the send, so the text is
    * kept when you cancel a send that failed.
    *
-   * **In a form, the draft is the composer's value**, submitted under `name`. A
+   * **In a form, the draft is the composer's value**, submitted under `name`,
+   * and an empty draft submits an empty entry, as a native textarea does. A
    * form reset puts back the `value` the markup declared, and a `<fieldset
    * disabled>` turns the composer off. Sending is still `helix-send`, and it
    * does not submit the form.
@@ -43198,6 +43250,18 @@ export type CustomElements = {
    * framework would re-render over an element the combobox inserted, so add the
    * option in your event handler.
    *
+   * **The options are an import of their own.** An option is the Option family's,
+   * which the combobox does not register, so a page that writes one imports it
+   * beside the combobox:
+   *
+   * ```js
+   * import '@fusion.dev/helix/combobox'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a combobox holding an option nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -43630,6 +43694,18 @@ export type CustomElements = {
    * Aria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and
    * the loading text are said in a polite live region.
    *
+   * **The commands are an import of their own.** A command is an option, the
+   * Option family's, which the palette does not register, so a page that writes
+   * one imports it beside the palette:
+   *
+   * ```js
+   * import '@fusion.dev/helix/command'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a palette holding an option nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -43986,6 +44062,15 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `click() => void`: Presses the button, as `click()` presses a native one: the command is sent,
+   * the form submits or resets, and `helix-press` says `virtual`.
+   *
+   * **Passed to the inner control, because a click on the host reaches nothing
+   * that acts.** The control in the shadow root is what answers a click, so
+   * `click()` from a script, an automation or a test, dispatched on the host,
+   * submitted nothing and sent no `helix-press`. The control's own click reaches
+   * the host's listeners once, retargeted, as one from a native button does. A
+   * disabled button does nothing, and a pending one refuses the press.
    * - `formAssociatedCallback(form: HTMLFormElement | null) => void`: Called by the browser when the control's form changes: watches the new
    * form's `checkValidity()`, as connecting does for the form it starts in.
    * - `formDisabledCallback(disabled: boolean) => void`: Called by the browser when an ancestor fieldset is disabled or enabled.
@@ -44196,6 +44281,18 @@ export type CustomElements = {
    * Written on `DataTable`, `columns` has no effect, so watch for it when you
    * move a table from `Table` to `DataTable`.
    *
+   * **The columns are an import of their own.** A column is the Table family's
+   * `TableColumn`, which the data table does not register, so a page that writes
+   * one imports the Table entry beside the data table:
+   *
+   * ```js
+   * import '@fusion.dev/helix/data-table'
+   * import '@fusion.dev/helix/table'
+   * ```
+   *
+   * In development, a data table holding a column nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -44594,6 +44691,8 @@ export type CustomElements = {
    * digits or the arrow keys. Alt+Down opens the calendar from a segment. A
    * `range` is two rows with a dash between them, the start and the end, as
    * React Aria's DateRangePicker draws them, and `multiple` keeps the text.
+   * A range whose end is before its start reports `rangeUnderflow`, as Date
+   * Picker does, with `range-order-message`.
    *
    * Text that is not a date gives the form an empty value, as a native date
    * field does, and `value` keeps the text so it can be corrected.
@@ -44714,6 +44813,8 @@ export type CustomElements = {
    * **Every sentence a control raises in the browser's bubble is a property**,
    * so a form in another language speaks it. Unset is the sentence registered
    * for the page's language, then the English.
+   * - `range-order-message`/`rangeOrderMessage`: The message shown when a range ends before it starts. `{start}` is
+   * replaced with the start, written the way the field writes dates.
    * - `range-overflow-message`/`rangeOverflowMessage`: The message shown when a date is after `max`. `{max}` is replaced with
    * `max`, written the way the field writes dates.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The message shown when a date is before `min`. `{min}` is replaced with
@@ -45118,7 +45219,8 @@ export type CustomElements = {
    * when Previous or Next is pressed. Neither moves past `min` or `max`, and the
    * keys stop at them too. A value outside the bounds, on a barred day, or off
    * `step` reports `rangeUnderflow`, `rangeOverflow`, `badInput` or
-   * `stepMismatch`, so a form does not submit it.
+   * `stepMismatch`, so a form does not submit it. A range set from a script
+   * whose end is before its start reports `rangeUnderflow` as well.
    *
    * ## Attributes & Properties
    *
@@ -45199,6 +45301,8 @@ export type CustomElements = {
    * it.
    * - `previous-year-label`/`previousYearLabel`: Accessible name for the control that moves back a year, in the months.
    * - `previous-years-label`/`previousYearsLabel`: Accessible name for the control that moves back a page, in the years.
+   * - `range-order-message`/`rangeOrderMessage`: The validation message for a range that ends before it starts. `{start}`
+   * is replaced with the start, written as a date in `locale`.
    * - `range-overflow-message`/`rangeOverflowMessage`: The validation message for a date after `max`. `{max}` is replaced with
    * `max`, written as a date in `locale`.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The validation message for a date before `min`. `{min}` is replaced with
@@ -46616,6 +46720,9 @@ export type CustomElements = {
    *
    * - `focusItem() => void`: Moves focus onto the row itself.
    * - `select() => void`: Fires `helix-select` for this row.
+   * - `click() => void`: Presses the row, as `click()` presses a native button: passed to the
+   * control inside, which is what answers a click, so a script's `click()`
+   * chooses the row, or follows its link, once.
    *
    * ## CSS Parts
    *
@@ -47848,6 +47955,19 @@ export type CustomElements = {
    *   filter goes. Set `chips` and the field adds, updates, and removes those
    *   chips itself, from every `helix-facet` you do not cancel.
    *
+   * **The suggestions you write are an import of their own.** A suggestion is an
+   * option, the Option family's, which the field does not register, so a page
+   * that slots one imports it beside the field:
+   *
+   * ```js
+   * import '@fusion.dev/helix/filter-input'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a field holding an option nobody registered says so once the
+   * page has loaded, with the line to add. The options `source` gives are drawn
+   * as this Option too, and need the same import.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -48763,6 +48883,25 @@ export type CustomElements = {
    * `helix-before-change` and tells with `change`, and the `selection` part says
    * how many are selected, in `selection-label`.
    *
+   * **Under `selection-mode` the strip is a grid**, so the selection is state a
+   * reader is told rather than words alone: each column of the strip is a `row`,
+   * a week with `rows="7"`, and each cell a `gridcell` named by its row in the
+   * table and carrying `aria-selected`. The strip says
+   * `aria-multiselectable` under `multiple` and points at the cell the keys rest
+   * on with `aria-activedescendant`, so a screen reader reads that cell, and the
+   * `live` part stays quiet. Without `selection-mode` nothing is selectable, and
+   * the strip is an application with the readout, as every chart's plot is.
+   *
+   * **Readings are sent as every chart sends them.** `helix-reading-change`
+   * says each move of the reading, by pointer, tap or key, and
+   * `helix-reading-press` a reading clicked, tapped, or pressed with Enter or
+   * Space, each with the row of the table in `index`.
+   *
+   * **Nothing to draw.** A table with no readings shows `empty-text`, "No
+   * readings", under the strip, and `loading` shows `loading-text` there until
+   * readings arrive. The `empty` and `loading` slots take markup in place of
+   * either, as on every chart.
+   *
    * **Keyboard.** The strip is one tab stop once it has cells.
    *
    * | Key | What it does |
@@ -48772,7 +48911,7 @@ export type CustomElements = {
    * | Right, Left | Moves a column on or back, a week with `rows="7"`. On a right-to-left page, Left moves on. |
    * | Home, End | Moves to the first or the last cell. |
    * | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |
-   * | Enter, Space | Selects the cell, or lets it go, under `selection-mode`. |
+   * | Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |
    * | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode="multiple"`. |
    * | Escape | Puts the cell's tooltip away. |
    *
@@ -48782,10 +48921,6 @@ export type CustomElements = {
    *
    * - `busiest-label`/`busiestLabel`: The name the `overview` gives the busiest reading, `{busiestLabel}` in
    * `overview-label`.
-   * - `empty-text`/`emptyText`: Shown when the table has no readings in it.
-   *
-   * Never shown while the table cannot be read at all, which is a server render
-   * and the hydrating one after it: see `sourceKnown`.
    * - `gap`: Space between cells, in CSS pixels. It is a number for the same reason
    * `min-cell` is.
    * - `min-cell`/`minCell`: The smallest a cell may get before the strip draws fewer of them, in CSS pixels.
@@ -48816,9 +48951,7 @@ export type CustomElements = {
    * calendar heatmap does: a week is a column, so the strip reads along the
    * line in weeks, from the right on a right-to-left page, and top to bottom in
    * days.
-   * - `selected-label`/`selectedLabel`: What the readout adds for a selected cell, under `selection-mode`, after
-   * where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-   * nothing.
+   * - `selected-label`/`selectedLabel`: What the readout added for a selected cell, under `selection-mode`.
    * - `selection-label`/`selectionLabel`: What the `selection` part says after the selection changes. `{count}` is
    * how many cells are selected, written in the locale, and a language that
    * needs plural forms writes them: `{count, plural, one {# wybrany} few
@@ -48852,6 +48985,16 @@ export type CustomElements = {
    *
    * Set it to start with cells selected. Written by a press or a key under
    * `selection-mode`.
+   * - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
+   * and the fallback of the `empty` slot.
+   * - `loading`: Whether the readings are still on their way. The chart shows
+   * `loading-text` in place of an empty drawing until it has readings.
+   *
+   * Reflected, so a stylesheet can treat the chart while it waits. A chart
+   * that already has readings keeps drawing them, so a refresh does not
+   * blank it.
+   * - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
+   * there are no readings yet, and the fallback of the `loading` slot.
    * - `for`: The id of the table to read.
    *
    * Names a table in the same tree, so a chart inside another component's
@@ -48964,13 +49107,17 @@ export type CustomElements = {
    *
    * - `change`: Fired once a press or a key has changed which cells are selected.
    * - `helix-before-change`: Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable.
+   * - `helix-reading-change`: The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
+   * - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
    * - `helix-resize`: Fired when the number of cells drawn changes, with the new number.
    *
    * ## Slots
    *
    * Areas where markup can be added to the component.
    *
+   * - `empty`: Content shown under the strip when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
    * - `end`: Below the strip, at the trailing edge: usually the newest date.
+   * - `loading`: Content shown under the strip while `loading` is set and there are no readings yet. Falls back to `loading-text`.
    * - `start`: Below the strip, at the leading edge: usually the oldest date.
    * - `summary`: Below the strip, in the middle: a summary of the range shown.
    *
@@ -49037,12 +49184,15 @@ export type CustomElements = {
    * - `cell`: One reading.
    * - `cell-active`: The cell the pointer or the keys rest on. Set alongside `cell`.
    * - `cell-selected`: A cell that is selected, under `selection-mode`. Set alongside `cell`.
-   * - `empty`: Shown when the table has no readings. It stays hidden until the table can be read: on the server and during hydration, there is no document to resolve `for` in.
+   * - `empty`: The words under the strip when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration, there being no document to resolve `for` in.
    * - `end`: The trailing slot's box.
    * - `footer`: The three-slot row under the strip.
    * - `live`: The readout: a polite live region that says the cell the keys moved to. Hide it visually.
+   * - `loading`: The words under the strip while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
    * - `mark`: The invisible point the tooltip is anchored to.
    * - `overview`: The busiest reading and the total of the readings drawn, written as a sentence for screen readers, which describes the strip. Rendered once there are cells. Hide it visually.
+   * - `plot`: The same element as `strip`, under the name every chart gives the drawing that takes focus.
+   * - `row`: A column of cells, which a grid reads as a row, under `selection-mode`. It draws no box.
    * - `selection`: A polite region that says how many cells are selected after a change, rendered from the first change. Hide it visually.
    * - `start`: The leading slot's box.
    * - `strip`: The grid of cells, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
@@ -49071,6 +49221,7 @@ export type CustomElements = {
    *
    * - `active`: While a cell is shown, under the pointer or the keys, with its tooltip open.
    * - `empty`: While the `empty` part stands in place of the cells.
+   * - `loading`: While the `loading` part stands in place of the cells.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-heatmap": Partial<
@@ -49277,6 +49428,15 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `click() => void`: Presses the button, as `click()` presses a native one: the command is sent,
+   * the form submits or resets, and `helix-press` says `virtual`.
+   *
+   * **Passed to the inner control, because a click on the host reaches nothing
+   * that acts.** The control in the shadow root is what answers a click, so
+   * `click()` from a script, an automation or a test, dispatched on the host,
+   * submitted nothing and sent no `helix-press`. The control's own click reaches
+   * the host's listeners once, retargeted, as one from a native button does. A
+   * disabled button does nothing, and a pending one refuses the press.
    * - `formAssociatedCallback(form: HTMLFormElement | null) => void`: Called by the browser when the control's form changes: watches the new
    * form's `checkValidity()`, as connecting does for the form it starts in.
    * - `formDisabledCallback(disabled: boolean) => void`: Called by the browser when an ancestor fieldset is disabled or enabled.
@@ -51382,6 +51542,19 @@ export type CustomElements = {
    *   filter narrows the list, under `layout="grid"`, or while the list is
    *   disabled.
    *
+   * **The options are an import of their own.** An option you write is the Option
+   * family's, which the list does not register, so a page that writes one imports
+   * it beside the list:
+   *
+   * ```js
+   * import '@fusion.dev/helix/listbox'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a list holding an option nobody registered says so once the
+   * page has loaded, with the line to add. The options `items` draws are this
+   * Option too, and need the same import.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -51550,7 +51723,8 @@ export type CustomElements = {
    *
    * **The list needs a height to scroll in**: the styled tier's
    * `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-   * headless tier. Import the Option family as well, whose elements are drawn.
+   * headless tier. The options drawn are this tier's Option, which the page
+   * imports, as it imports the options it writes.
    * A server sends the list empty, and the options are drawn once it hydrates. (property only)
    * - `selectedIndex`: Which option is chosen, as an index, or `-1` where none is.
    *
@@ -53320,6 +53494,9 @@ export type CustomElements = {
    * `focus()` above already puts focus on the control inside the row rather than
    * on the row, which is the whole of what moving here means.
    * - `select() => void`: Chooses the row, the same as pressing it.
+   * - `click() => void`: Presses the row, as `click()` presses a native button: passed to the
+   * control inside, which is what answers a click, so a script's `click()`
+   * chooses the row, or follows its link, once.
    *
    * ## CSS Parts
    *
@@ -54156,6 +54333,12 @@ export type CustomElements = {
    * shows no timestamp rather than showing the epoch, which is what parsing an
    * empty string would give.
    * - `default-read`/`defaultRead`: Whether the notification starts as read, used until `read` is set.
+   * - `dismiss-label`/`dismissLabel`: The dismiss control's name, read by screen readers, with `{label}` for the
+   * row's own words.
+   *
+   * One sentence with the words in it, so a translation puts them where its
+   * language does: `registerWords('de', { 'helix-notification': { dismissLabel:
+   * '{label} schließen' } })`.
    * - `locale`: Locale for the timestamp.
    *
    * Empty is the runtime's own.
@@ -54177,16 +54360,6 @@ export type CustomElements = {
    * The unread mark is drawn, so a reader who cannot see it hears this word in
    * its place. Translate it with the rest of your interface.
    * - `dismissible`: Whether the element shows a control that dismisses it.
-   * - `dismiss-label`/`dismissLabel`: The dismiss control's label, read by screen readers.
-   *
-   * `attribute` is spelled out because Lit lowercases a property name to
-   * derive one rather than dash-casing it, so this would otherwise be
-   * reachable only as `dismisslabel`, which nobody would guess and no linter
-   * would catch.
-   *
-   * A word property: register it for a locale under the host's key. A family
-   * that names the control otherwise, such as Tag's `Remove {label}`,
-   * declares its own English with `@words` above the override.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -57760,9 +57933,10 @@ export type CustomElements = {
    *
    * The plot runs left to right in every text direction, as a number line does.
    * The plot, its axes, and the axis names sit in a `plane` part with
-   * `dir="ltr"`. The axis names carry `dir="auto"`, so a name in Arabic or Hebrew
-   * reads in its own direction. The summary and the tooltip bubble follow the
-   * page's direction.
+   * `dir="ltr"`, and the arrow keys follow the drawing: Right moves to the next
+   * point on a right-to-left page too. The axis names carry `dir="auto"`, so a
+   * name in Arabic or Hebrew reads in its own direction. The summary and the
+   * tooltip bubble follow the page's direction.
    *
    * **A tap shows the reading under it**, and keeps it until a tap lands
    * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
@@ -57784,7 +57958,7 @@ export type CustomElements = {
    * | Key | What it does |
    * |---|---|
    * | Tab | Moves focus to the plot and shows the first reading. |
-   * | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. |
+   * | Right, Left | Moves to the next or the previous point, left to right across the plot, on a right-to-left page too. |
    * | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |
    * | Home, End | Moves to the first or the last point. |
    * | Page Down, Page Up | Moves a tenth of the points on or back. |
@@ -58236,6 +58410,18 @@ export type CustomElements = {
    * Set `autocomplete` to let a browser's autofill choose, as a native `<select>`
    * with the same attribute would.
    *
+   * **The options are an import of their own.** An option is the Option family's,
+   * which the select does not register, so a page that writes one imports it
+   * beside the select:
+   *
+   * ```js
+   * import '@fusion.dev/helix/select'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a select holding an option nobody registered says so once the
+   * page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -59434,6 +59620,9 @@ export type CustomElements = {
    * - `focus(options?: FocusOptions) => void`: Puts focus on the control inside the item.
    * - `focusItem() => void`: Moves focus to the action. Part of `NavigableItem`, which the shared
    * keyboard controller uses for the arrow keys.
+   * - `click() => void`: Presses the action, as `click()` presses a native button: passed to the
+   * control inside, which is what answers a click, so a script's `click()`
+   * chooses the action and follows its link, once.
    * - `select() => void`: Chooses the action, the same as pressing it.
    *
    * ## CSS Parts
@@ -61757,6 +61946,9 @@ export type CustomElements = {
    * listener refused it, or where the tab is not dismissible or is disabled.
    * The tab stays where it is either way: removing it is yours. Where the tab
    * had focus, focus moves to the tab beside it once you remove it.
+   * - `click() => void`: Presses the tab, as `click()` presses a native button: passed to the
+   * control inside, which is what answers a click, so a script's `click()`
+   * selects the tab, or follows its link, once.
    * - `focusItem() => void`: Moves focus to the item's control, for the set's arrow keys.
    *
    * The set drives the keys and cannot reach the control itself, which is
@@ -69048,6 +69240,15 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `click() => void`: Presses the button, as `click()` presses a native one: the command is sent,
+   * the form submits or resets, and `helix-press` says `virtual`.
+   *
+   * **Passed to the inner control, because a click on the host reaches nothing
+   * that acts.** The control in the shadow root is what answers a click, so
+   * `click()` from a script, an automation or a test, dispatched on the host,
+   * submitted nothing and sent no `helix-press`. The control's own click reaches
+   * the host's listeners once, retargeted, as one from a native button does. A
+   * disabled button does nothing, and a pending one refuses the press.
    * - `formAssociatedCallback(form: HTMLFormElement | null) => void`: Called by the browser when the button's form changes.
    * - `formDisabledCallback(disabled: boolean) => void`: Called by the browser when an ancestor fieldset is disabled or enabled.
    *
@@ -70448,7 +70649,8 @@ export type CustomElementsSolidJs = {
    * The composer clears only when no listener cancels the send, so the text is
    * kept when you cancel a send that failed.
    *
-   * **In a form, the draft is the composer's value**, submitted under `name`. A
+   * **In a form, the draft is the composer's value**, submitted under `name`,
+   * and an empty draft submits an empty entry, as a native textarea does. A
    * form reset puts back the `value` the markup declared, and a `<fieldset
    * disabled>` turns the composer off. Sending is still `helix-send`, and it
    * does not submit the form.
@@ -72750,6 +72952,18 @@ export type CustomElementsSolidJs = {
    * framework would re-render over an element the combobox inserted, so add the
    * option in your event handler.
    *
+   * **The options are an import of their own.** An option is the Option family's,
+   * which the combobox does not register, so a page that writes one imports it
+   * beside the combobox:
+   *
+   * ```js
+   * import '@fusion.dev/helix/combobox'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a combobox holding an option nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -73185,6 +73399,18 @@ export type CustomElementsSolidJs = {
    * Aria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and
    * the loading text are said in a polite live region.
    *
+   * **The commands are an import of their own.** A command is an option, the
+   * Option family's, which the palette does not register, so a page that writes
+   * one imports it beside the palette:
+   *
+   * ```js
+   * import '@fusion.dev/helix/command'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a palette holding an option nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -73544,6 +73770,15 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `click() => void`: Presses the button, as `click()` presses a native one: the command is sent,
+   * the form submits or resets, and `helix-press` says `virtual`.
+   *
+   * **Passed to the inner control, because a click on the host reaches nothing
+   * that acts.** The control in the shadow root is what answers a click, so
+   * `click()` from a script, an automation or a test, dispatched on the host,
+   * submitted nothing and sent no `helix-press`. The control's own click reaches
+   * the host's listeners once, retargeted, as one from a native button does. A
+   * disabled button does nothing, and a pending one refuses the press.
    * - `formAssociatedCallback(form: HTMLFormElement | null) => void`: Called by the browser when the control's form changes: watches the new
    * form's `checkValidity()`, as connecting does for the form it starts in.
    * - `formDisabledCallback(disabled: boolean) => void`: Called by the browser when an ancestor fieldset is disabled or enabled.
@@ -73755,6 +73990,18 @@ export type CustomElementsSolidJs = {
    * Written on `DataTable`, `columns` has no effect, so watch for it when you
    * move a table from `Table` to `DataTable`.
    *
+   * **The columns are an import of their own.** A column is the Table family's
+   * `TableColumn`, which the data table does not register, so a page that writes
+   * one imports the Table entry beside the data table:
+   *
+   * ```js
+   * import '@fusion.dev/helix/data-table'
+   * import '@fusion.dev/helix/table'
+   * ```
+   *
+   * In development, a data table holding a column nobody registered says so once
+   * the page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -74156,6 +74403,8 @@ export type CustomElementsSolidJs = {
    * digits or the arrow keys. Alt+Down opens the calendar from a segment. A
    * `range` is two rows with a dash between them, the start and the end, as
    * React Aria's DateRangePicker draws them, and `multiple` keeps the text.
+   * A range whose end is before its start reports `rangeUnderflow`, as Date
+   * Picker does, with `range-order-message`.
    *
    * Text that is not a date gives the form an empty value, as a native date
    * field does, and `value` keeps the text so it can be corrected.
@@ -74276,6 +74525,8 @@ export type CustomElementsSolidJs = {
    * **Every sentence a control raises in the browser's bubble is a property**,
    * so a form in another language speaks it. Unset is the sentence registered
    * for the page's language, then the English.
+   * - `range-order-message`/`rangeOrderMessage`: The message shown when a range ends before it starts. `{start}` is
+   * replaced with the start, written the way the field writes dates.
    * - `range-overflow-message`/`rangeOverflowMessage`: The message shown when a date is after `max`. `{max}` is replaced with
    * `max`, written the way the field writes dates.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The message shown when a date is before `min`. `{min}` is replaced with
@@ -74683,7 +74934,8 @@ export type CustomElementsSolidJs = {
    * when Previous or Next is pressed. Neither moves past `min` or `max`, and the
    * keys stop at them too. A value outside the bounds, on a barred day, or off
    * `step` reports `rangeUnderflow`, `rangeOverflow`, `badInput` or
-   * `stepMismatch`, so a form does not submit it.
+   * `stepMismatch`, so a form does not submit it. A range set from a script
+   * whose end is before its start reports `rangeUnderflow` as well.
    *
    * ## Attributes & Properties
    *
@@ -74764,6 +75016,8 @@ export type CustomElementsSolidJs = {
    * it.
    * - `previous-year-label`/`previousYearLabel`: Accessible name for the control that moves back a year, in the months.
    * - `previous-years-label`/`previousYearsLabel`: Accessible name for the control that moves back a page, in the years.
+   * - `range-order-message`/`rangeOrderMessage`: The validation message for a range that ends before it starts. `{start}`
+   * is replaced with the start, written as a date in `locale`.
    * - `range-overflow-message`/`rangeOverflowMessage`: The validation message for a date after `max`. `{max}` is replaced with
    * `max`, written as a date in `locale`.
    * - `range-underflow-message`/`rangeUnderflowMessage`: The validation message for a date before `min`. `{min}` is replaced with
@@ -76194,6 +76448,9 @@ export type CustomElementsSolidJs = {
    *
    * - `focusItem() => void`: Moves focus onto the row itself.
    * - `select() => void`: Fires `helix-select` for this row.
+   * - `click() => void`: Presses the row, as `click()` presses a native button: passed to the
+   * control inside, which is what answers a click, so a script's `click()`
+   * chooses the row, or follows its link, once.
    *
    * ## CSS Parts
    *
@@ -77440,6 +77697,19 @@ export type CustomElementsSolidJs = {
    *   filter goes. Set `chips` and the field adds, updates, and removes those
    *   chips itself, from every `helix-facet` you do not cancel.
    *
+   * **The suggestions you write are an import of their own.** A suggestion is an
+   * option, the Option family's, which the field does not register, so a page
+   * that slots one imports it beside the field:
+   *
+   * ```js
+   * import '@fusion.dev/helix/filter-input'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a field holding an option nobody registered says so once the
+   * page has loaded, with the line to add. The options `source` gives are drawn
+   * as this Option too, and need the same import.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -78360,6 +78630,25 @@ export type CustomElementsSolidJs = {
    * `helix-before-change` and tells with `change`, and the `selection` part says
    * how many are selected, in `selection-label`.
    *
+   * **Under `selection-mode` the strip is a grid**, so the selection is state a
+   * reader is told rather than words alone: each column of the strip is a `row`,
+   * a week with `rows="7"`, and each cell a `gridcell` named by its row in the
+   * table and carrying `aria-selected`. The strip says
+   * `aria-multiselectable` under `multiple` and points at the cell the keys rest
+   * on with `aria-activedescendant`, so a screen reader reads that cell, and the
+   * `live` part stays quiet. Without `selection-mode` nothing is selectable, and
+   * the strip is an application with the readout, as every chart's plot is.
+   *
+   * **Readings are sent as every chart sends them.** `helix-reading-change`
+   * says each move of the reading, by pointer, tap or key, and
+   * `helix-reading-press` a reading clicked, tapped, or pressed with Enter or
+   * Space, each with the row of the table in `index`.
+   *
+   * **Nothing to draw.** A table with no readings shows `empty-text`, "No
+   * readings", under the strip, and `loading` shows `loading-text` there until
+   * readings arrive. The `empty` and `loading` slots take markup in place of
+   * either, as on every chart.
+   *
    * **Keyboard.** The strip is one tab stop once it has cells.
    *
    * | Key | What it does |
@@ -78369,7 +78658,7 @@ export type CustomElementsSolidJs = {
    * | Right, Left | Moves a column on or back, a week with `rows="7"`. On a right-to-left page, Left moves on. |
    * | Home, End | Moves to the first or the last cell. |
    * | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |
-   * | Enter, Space | Selects the cell, or lets it go, under `selection-mode`. |
+   * | Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |
    * | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode="multiple"`. |
    * | Escape | Puts the cell's tooltip away. |
    *
@@ -78379,10 +78668,6 @@ export type CustomElementsSolidJs = {
    *
    * - `busiest-label`/`busiestLabel`: The name the `overview` gives the busiest reading, `{busiestLabel}` in
    * `overview-label`.
-   * - `empty-text`/`emptyText`: Shown when the table has no readings in it.
-   *
-   * Never shown while the table cannot be read at all, which is a server render
-   * and the hydrating one after it: see `sourceKnown`.
    * - `gap`: Space between cells, in CSS pixels. It is a number for the same reason
    * `min-cell` is.
    * - `min-cell`/`minCell`: The smallest a cell may get before the strip draws fewer of them, in CSS pixels.
@@ -78413,9 +78698,7 @@ export type CustomElementsSolidJs = {
    * calendar heatmap does: a week is a column, so the strip reads along the
    * line in weeks, from the right on a right-to-left page, and top to bottom in
    * days.
-   * - `selected-label`/`selectedLabel`: What the readout adds for a selected cell, under `selection-mode`, after
-   * where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-   * nothing.
+   * - `selected-label`/`selectedLabel`: What the readout added for a selected cell, under `selection-mode`.
    * - `selection-label`/`selectionLabel`: What the `selection` part says after the selection changes. `{count}` is
    * how many cells are selected, written in the locale, and a language that
    * needs plural forms writes them: `{count, plural, one {# wybrany} few
@@ -78449,6 +78732,16 @@ export type CustomElementsSolidJs = {
    *
    * Set it to start with cells selected. Written by a press or a key under
    * `selection-mode`.
+   * - `empty-text`/`emptyText`: The words shown in place of the drawing when the table has no readings,
+   * and the fallback of the `empty` slot.
+   * - `loading`: Whether the readings are still on their way. The chart shows
+   * `loading-text` in place of an empty drawing until it has readings.
+   *
+   * Reflected, so a stylesheet can treat the chart while it waits. A chart
+   * that already has readings keeps drawing them, so a refresh does not
+   * blank it.
+   * - `loading-text`/`loadingText`: The words shown in place of the drawing while `loading` is set and
+   * there are no readings yet, and the fallback of the `loading` slot.
    * - `for`: The id of the table to read.
    *
    * Names a table in the same tree, so a chart inside another component's
@@ -78561,13 +78854,17 @@ export type CustomElementsSolidJs = {
    *
    * - `change`: Fired once a press or a key has changed which cells are selected.
    * - `helix-before-change`: Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable.
+   * - `helix-reading-change`: The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
+   * - `helix-reading-press`: A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
    * - `helix-resize`: Fired when the number of cells drawn changes, with the new number.
    *
    * ## Slots
    *
    * Areas where markup can be added to the component.
    *
+   * - `empty`: Content shown under the strip when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
    * - `end`: Below the strip, at the trailing edge: usually the newest date.
+   * - `loading`: Content shown under the strip while `loading` is set and there are no readings yet. Falls back to `loading-text`.
    * - `start`: Below the strip, at the leading edge: usually the oldest date.
    * - `summary`: Below the strip, in the middle: a summary of the range shown.
    *
@@ -78634,12 +78931,15 @@ export type CustomElementsSolidJs = {
    * - `cell`: One reading.
    * - `cell-active`: The cell the pointer or the keys rest on. Set alongside `cell`.
    * - `cell-selected`: A cell that is selected, under `selection-mode`. Set alongside `cell`.
-   * - `empty`: Shown when the table has no readings. It stays hidden until the table can be read: on the server and during hydration, there is no document to resolve `for` in.
+   * - `empty`: The words under the strip when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration, there being no document to resolve `for` in.
    * - `end`: The trailing slot's box.
    * - `footer`: The three-slot row under the strip.
    * - `live`: The readout: a polite live region that says the cell the keys moved to. Hide it visually.
+   * - `loading`: The words under the strip while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
    * - `mark`: The invisible point the tooltip is anchored to.
    * - `overview`: The busiest reading and the total of the readings drawn, written as a sentence for screen readers, which describes the strip. Rendered once there are cells. Hide it visually.
+   * - `plot`: The same element as `strip`, under the name every chart gives the drawing that takes focus.
+   * - `row`: A column of cells, which a grid reads as a row, under `selection-mode`. It draws no box.
    * - `selection`: A polite region that says how many cells are selected after a change, rendered from the first change. Hide it visually.
    * - `start`: The leading slot's box.
    * - `strip`: The grid of cells, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
@@ -78668,6 +78968,7 @@ export type CustomElementsSolidJs = {
    *
    * - `active`: While a cell is shown, under the pointer or the keys, with its tooltip open.
    * - `empty`: While the `empty` part stands in place of the cells.
+   * - `loading`: While the `loading` part stands in place of the cells.
    * - `settled`: Set one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
    */
   "helix-headless-heatmap": Partial<
@@ -78877,6 +79178,15 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `click() => void`: Presses the button, as `click()` presses a native one: the command is sent,
+   * the form submits or resets, and `helix-press` says `virtual`.
+   *
+   * **Passed to the inner control, because a click on the host reaches nothing
+   * that acts.** The control in the shadow root is what answers a click, so
+   * `click()` from a script, an automation or a test, dispatched on the host,
+   * submitted nothing and sent no `helix-press`. The control's own click reaches
+   * the host's listeners once, retargeted, as one from a native button does. A
+   * disabled button does nothing, and a pending one refuses the press.
    * - `formAssociatedCallback(form: HTMLFormElement | null) => void`: Called by the browser when the control's form changes: watches the new
    * form's `checkValidity()`, as connecting does for the form it starts in.
    * - `formDisabledCallback(disabled: boolean) => void`: Called by the browser when an ancestor fieldset is disabled or enabled.
@@ -81011,6 +81321,19 @@ export type CustomElementsSolidJs = {
    *   filter narrows the list, under `layout="grid"`, or while the list is
    *   disabled.
    *
+   * **The options are an import of their own.** An option you write is the Option
+   * family's, which the list does not register, so a page that writes one imports
+   * it beside the list:
+   *
+   * ```js
+   * import '@fusion.dev/helix/listbox'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a list holding an option nobody registered says so once the
+   * page has loaded, with the line to add. The options `items` draws are this
+   * Option too, and need the same import.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -81179,7 +81502,8 @@ export type CustomElementsSolidJs = {
    *
    * **The list needs a height to scroll in**: the styled tier's
    * `--listbox-max-block-size`, or a `max-block-size` on `::part(items)` in the
-   * headless tier. Import the Option family as well, whose elements are drawn.
+   * headless tier. The options drawn are this tier's Option, which the page
+   * imports, as it imports the options it writes.
    * A server sends the list empty, and the options are drawn once it hydrates. (property only)
    * - `selectedIndex`: Which option is chosen, as an index, or `-1` where none is.
    *
@@ -82981,6 +83305,9 @@ export type CustomElementsSolidJs = {
    * `focus()` above already puts focus on the control inside the row rather than
    * on the row, which is the whole of what moving here means.
    * - `select() => void`: Chooses the row, the same as pressing it.
+   * - `click() => void`: Presses the row, as `click()` presses a native button: passed to the
+   * control inside, which is what answers a click, so a script's `click()`
+   * chooses the row, or follows its link, once.
    *
    * ## CSS Parts
    *
@@ -83829,6 +84156,12 @@ export type CustomElementsSolidJs = {
    * shows no timestamp rather than showing the epoch, which is what parsing an
    * empty string would give.
    * - `default-read`/`defaultRead`: Whether the notification starts as read, used until `read` is set.
+   * - `dismiss-label`/`dismissLabel`: The dismiss control's name, read by screen readers, with `{label}` for the
+   * row's own words.
+   *
+   * One sentence with the words in it, so a translation puts them where its
+   * language does: `registerWords('de', { 'helix-notification': { dismissLabel:
+   * '{label} schließen' } })`.
    * - `locale`: Locale for the timestamp.
    *
    * Empty is the runtime's own.
@@ -83850,16 +84183,6 @@ export type CustomElementsSolidJs = {
    * The unread mark is drawn, so a reader who cannot see it hears this word in
    * its place. Translate it with the rest of your interface.
    * - `dismissible`: Whether the element shows a control that dismisses it.
-   * - `dismiss-label`/`dismissLabel`: The dismiss control's label, read by screen readers.
-   *
-   * `attribute` is spelled out because Lit lowercases a property name to
-   * derive one rather than dash-casing it, so this would otherwise be
-   * reachable only as `dismisslabel`, which nobody would guess and no linter
-   * would catch.
-   *
-   * A word property: register it for a locale under the host's key. A family
-   * that names the control otherwise, such as Tag's `Remove {label}`,
-   * declares its own English with `@words` above the override.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -87470,9 +87793,10 @@ export type CustomElementsSolidJs = {
    *
    * The plot runs left to right in every text direction, as a number line does.
    * The plot, its axes, and the axis names sit in a `plane` part with
-   * `dir="ltr"`. The axis names carry `dir="auto"`, so a name in Arabic or Hebrew
-   * reads in its own direction. The summary and the tooltip bubble follow the
-   * page's direction.
+   * `dir="ltr"`, and the arrow keys follow the drawing: Right moves to the next
+   * point on a right-to-left page too. The axis names carry `dir="auto"`, so a
+   * name in Arabic or Hebrew reads in its own direction. The summary and the
+   * tooltip bubble follow the page's direction.
    *
    * **A tap shows the reading under it**, and keeps it until a tap lands
    * elsewhere. `helix-reading-change` says each move of the reading, by pointer,
@@ -87494,7 +87818,7 @@ export type CustomElementsSolidJs = {
    * | Key | What it does |
    * |---|---|
    * | Tab | Moves focus to the plot and shows the first reading. |
-   * | Right, Left | Moves to the next or the previous point, left to right across the plot. On a right-to-left page, Left moves to the next. |
+   * | Right, Left | Moves to the next or the previous point, left to right across the plot, on a right-to-left page too. |
    * | Down, Up | Moves among the series of the point. With one series, moves to the next or the previous point. |
    * | Home, End | Moves to the first or the last point. |
    * | Page Down, Page Up | Moves a tenth of the points on or back. |
@@ -87948,6 +88272,18 @@ export type CustomElementsSolidJs = {
    * Set `autocomplete` to let a browser's autofill choose, as a native `<select>`
    * with the same attribute would.
    *
+   * **The options are an import of their own.** An option is the Option family's,
+   * which the select does not register, so a page that writes one imports it
+   * beside the select:
+   *
+   * ```js
+   * import '@fusion.dev/helix/select'
+   * import '@fusion.dev/helix/option'
+   * ```
+   *
+   * In development, a select holding an option nobody registered says so once the
+   * page has loaded, with the line to add.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -89162,6 +89498,9 @@ export type CustomElementsSolidJs = {
    * - `focus(options?: FocusOptions) => void`: Puts focus on the control inside the item.
    * - `focusItem() => void`: Moves focus to the action. Part of `NavigableItem`, which the shared
    * keyboard controller uses for the arrow keys.
+   * - `click() => void`: Presses the action, as `click()` presses a native button: passed to the
+   * control inside, which is what answers a click, so a script's `click()`
+   * chooses the action and follows its link, once.
    * - `select() => void`: Chooses the action, the same as pressing it.
    *
    * ## CSS Parts
@@ -91523,6 +91862,9 @@ export type CustomElementsSolidJs = {
    * listener refused it, or where the tab is not dismissible or is disabled.
    * The tab stays where it is either way: removing it is yours. Where the tab
    * had focus, focus moves to the tab beside it once you remove it.
+   * - `click() => void`: Presses the tab, as `click()` presses a native button: passed to the
+   * control inside, which is what answers a click, so a script's `click()`
+   * selects the tab, or follows its link, once.
    * - `focusItem() => void`: Moves focus to the item's control, for the set's arrow keys.
    *
    * The set drives the keys and cannot reach the control itself, which is