@fusion.dev/helix-headless 0.178.0 → 0.179.0

package/types/jsx.d.ts

@@ -15664,6 +15664,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 +15681,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 +15738,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 +15797,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 +15882,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 +15901,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 +15958,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 +16017,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 +16101,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;
 
@@ -22283,6 +22315,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 +22359,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 +22380,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 +22424,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 +39546,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.
    *
@@ -43986,6 +44011,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.
@@ -46616,6 +46650,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
    *
@@ -48763,6 +48800,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 +48828,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 +48838,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 +48868,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 +48902,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 +49024,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 +49101,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 +49138,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 +49345,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.
@@ -53320,6 +53397,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 +54236,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 +54263,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
@@ -59434,6 +59510,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 +61836,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 +69130,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.
    *
@@ -73544,6 +73635,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.
@@ -76194,6 +76294,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
    *
@@ -78360,6 +78463,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 +78491,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 +78501,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 +78531,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 +78565,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 +78687,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 +78764,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 +78801,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 +79011,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.
@@ -82981,6 +83124,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 +83975,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 +84002,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
@@ -89162,6 +89304,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 +91668,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