@fusion.dev/helix 0.178.0 → 0.179.0

package/types/jsx.d.ts

@@ -1696,6 +1696,14 @@ hit-testable at rest, or it would swallow clicks meant for what is over it,
 and an element that is not hit-testable never receives the `pointermove`
 this listens for. Asking for the pointer is asking for the hit test. */
   interactive?: (HelixAura["interactive"]) | undefined;
+  /** Whether the aura draws its own control that pauses the field and starts it
+again, in its trailing corner. Absent draws none, for a page with a pause
+control of its own. */
+  "pause-control"?: (HelixAura["pauseControl"]) | undefined;
+  /** Whether the aura draws its own control that pauses the field and starts it
+again, in its trailing corner. Absent draws none, for a page with a pause
+control of its own. */
+  pauseControl?: (HelixAura["pauseControl"]) | undefined;
   /** Whether the field holds still on the frame it shows.
 
 Set it from a pause control on your page, so a reader can stop the motion,
@@ -1703,6 +1711,14 @@ as WCAG 2.2.2 asks of anything that moves for more than five seconds. A
 change to another property still repaints the frame. Clearing it starts
 the field from where it stopped. */
   paused?: (HelixAura["paused"]) | undefined;
+  /** The pause control's name, read by screen readers. The control is a toggle
+and says it is pressed while the field is paused, so the name stays the
+same. */
+  "pause-label"?: (HelixAura["pauseLabel"]) | undefined;
+  /** The pause control's name, read by screen readers. The control is a toggle
+and says it is pressed while the field is paused, so the name stays the
+same. */
+  pauseLabel?: (HelixAura["pauseLabel"]) | undefined;
   /** How far the pointer reaches into the field, `0` upward.
 
 Multiplied into the presence the pointer already fades in and out with, so
@@ -1773,6 +1789,8 @@ look, which is what `variant` is for by the rule the registry already
 states. */
   variant?: (HelixAura["variant"]) | undefined;
 
+  /** Fired when the aura's own pause control pauses the field or starts it again. */
+  onchange?: ((e: HelixAuraElementEvent) => void) | undefined;
   /** Fired each time the aura stops drawing its shader and shows its gradient, with the reason. */
   "onhelix-aura-fallback"?: ((e: HelixAuraHelixAuraFallbackElementEvent) => void) | undefined;
 };
@@ -1815,6 +1833,14 @@ hit-testable at rest, or it would swallow clicks meant for what is over it,
 and an element that is not hit-testable never receives the `pointermove`
 this listens for. Asking for the pointer is asking for the hit test. */
   "prop:interactive"?: (HelixAura["interactive"]) | undefined;
+  /** Whether the aura draws its own control that pauses the field and starts it
+again, in its trailing corner. Absent draws none, for a page with a pause
+control of its own. */
+  "bool:pause-control"?: (HelixAura["pauseControl"]) | undefined;
+  /** Whether the aura draws its own control that pauses the field and starts it
+again, in its trailing corner. Absent draws none, for a page with a pause
+control of its own. */
+  "prop:pauseControl"?: (HelixAura["pauseControl"]) | undefined;
   /** Whether the field holds still on the frame it shows.
 
 Set it from a pause control on your page, so a reader can stop the motion,
@@ -1822,6 +1848,14 @@ as WCAG 2.2.2 asks of anything that moves for more than five seconds. A
 change to another property still repaints the frame. Clearing it starts
 the field from where it stopped. */
   "prop:paused"?: (HelixAura["paused"]) | undefined;
+  /** The pause control's name, read by screen readers. The control is a toggle
+and says it is pressed while the field is paused, so the name stays the
+same. */
+  "attr:pause-label"?: (HelixAura["pauseLabel"]) | undefined;
+  /** The pause control's name, read by screen readers. The control is a toggle
+and says it is pressed while the field is paused, so the name stays the
+same. */
+  "prop:pauseLabel"?: (HelixAura["pauseLabel"]) | undefined;
   /** How far the pointer reaches into the field, `0` upward.
 
 Multiplied into the presence the pointer already fades in and out with, so
@@ -1891,6 +1925,8 @@ Aurora, braid and caustics are not geometries; they are eleven names for a
 look, which is what `variant` is for by the rule the registry already
 states. */
   "prop:variant"?: (HelixAura["variant"]) | undefined;
+  /** Fired when the aura's own pause control pauses the field or starts it again. */
+  "on:change"?: ((e: HelixAuraElementEvent) => void) | undefined;
   /** Fired each time the aura stops drawing its shader and shows its gradient, with the reason. */
   "on:helix-aura-fallback"?: ((
     e: HelixAuraHelixAuraFallbackElementEvent,
@@ -17909,11 +17945,36 @@ export type HelixHeatmapElementEvent<E = Event> = TypedEvent<HelixHeatmap, E>;
 /** `helix-before-change` event type */
 export type HelixHeatmapHelixBeforeChangeElementEvent =
   HelixHeatmapElementEvent<HelixBeforeChangeEvent>;
+/** `helix-reading-change` event type */
+export type HelixHeatmapHelixReadingChangeElementEvent =
+  HelixHeatmapElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeatmapHelixReadingPressElementEvent =
+  HelixHeatmapElementEvent<HelixReadingPressEvent>;
 /** `helix-resize` event type */
 export type HelixHeatmapHelixResizeElementEvent =
   HelixHeatmapElementEvent<HelixResizeEvent>;
 
 export type HelixHeatmapProps = {
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeatmap["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeatmap["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?: (HelixHeatmap["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"?: (HelixHeatmap["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?: (HelixHeatmap["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -17956,16 +18017,6 @@ legend hid is not counted. */
   /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
 `overview-label`. */
   busiestLabel?: (HelixHeatmap["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"?: (HelixHeatmap["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?: (HelixHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels. It is a number for the same reason
 `min-cell` is. */
   gap?: (HelixHeatmap["gap"]) | undefined;
@@ -18023,13 +18074,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?: (HelixHeatmap["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"?: (HelixHeatmap["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?: (HelixHeatmap["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
@@ -18116,11 +18163,38 @@ does not look inside the one it has. */
   "onhelix-before-change"?: ((
     e: HelixHeatmapHelixBeforeChangeElementEvent,
   ) => 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: HelixHeatmapHelixReadingChangeElementEvent,
+  ) => 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: HelixHeatmapHelixReadingPressElementEvent,
+  ) => void) | undefined;
   /** Fired when the number of cells drawn changes, with the new number. */
   "onhelix-resize"?: ((e: HelixHeatmapHelixResizeElementEvent) => void) | undefined;
 };
 
 export type HelixHeatmapSolidJsProps = {
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "attr:empty-text"?: (HelixHeatmap["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"?: (HelixHeatmap["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"?: (HelixHeatmap["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"?: (HelixHeatmap["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"?: (HelixHeatmap["loadingText"]) | undefined;
   /** The id of the table to read.
 
 Names a table in the same tree, so a chart inside another component's
@@ -18163,16 +18237,6 @@ legend hid is not counted. */
   /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
 `overview-label`. */
   "prop:busiestLabel"?: (HelixHeatmap["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"?: (HelixHeatmap["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"?: (HelixHeatmap["emptyText"]) | undefined;
   /** Space between cells, in CSS pixels. It is a number for the same reason
 `min-cell` is. */
   "prop:gap"?: (HelixHeatmap["gap"]) | undefined;
@@ -18230,13 +18294,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"?: (HelixHeatmap["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"?: (HelixHeatmap["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"?: (HelixHeatmap["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
@@ -18322,6 +18382,14 @@ does not look inside the one it has. */
   "on:helix-before-change"?: ((
     e: HelixHeatmapHelixBeforeChangeElementEvent,
   ) => 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: HelixHeatmapHelixReadingChangeElementEvent,
+  ) => 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: HelixHeatmapHelixReadingPressElementEvent,
+  ) => void) | undefined;
   /** Fired when the number of cells drawn changes, with the new number. */
   "on:helix-resize"?: ((e: HelixHeatmapHelixResizeElementEvent) => void) | undefined;
 
@@ -43076,8 +43144,8 @@ export type CustomElements = {
    * The shader stops drawing in these cases:
    * - The element is off screen or in a background tab.
    * - `prefers-reduced-motion` is set. The element shows one still frame.
-   * - `paused` is set, from a pause control on your page. The element holds the
-   *   frame it shows.
+   * - `paused` is set, from a pause control on your page or from the aura's own
+   *   under `pause-control`. The element holds the frame it shows.
    * - The browser takes back the drawing context, on a GPU reset or past its
    *   limit of about sixteen contexts. The gradient shows until the context
    *   returns.
@@ -43101,6 +43169,13 @@ export type CustomElements = {
    * changed while the aura draws, by a class, a style or the color mode,
    * reaches the shader on the next frame.
    *
+   * **`pause-control` draws a control that stops the motion and starts it
+   * again**, in the trailing corner of the field, as WCAG 2.2.2 asks of
+   * anything that moves for more than five seconds. It is a toggle button named
+   * by `pause-label`, which says it is pressed while the field is paused, and a
+   * press sends `change`. A reader who asked for reduced motion sees no motion
+   * and no control.
+   *
    * Where the gradient shows in place of the shader, the aura matches
    * `:state(fallback)` and sends `helix-aura-fallback` with the reason.
    *
@@ -43140,12 +43215,18 @@ export type CustomElements = {
    * hit-testable at rest, or it would swallow clicks meant for what is over it,
    * and an element that is not hit-testable never receives the `pointermove`
    * this listens for. Asking for the pointer is asking for the hit test.
+   * - `pause-control`/`pauseControl`: Whether the aura draws its own control that pauses the field and starts it
+   * again, in its trailing corner. Absent draws none, for a page with a pause
+   * control of its own.
    * - `paused`: Whether the field holds still on the frame it shows.
    *
    * Set it from a pause control on your page, so a reader can stop the motion,
    * as WCAG 2.2.2 asks of anything that moves for more than five seconds. A
    * change to another property still repaints the frame. Clearing it starts
    * the field from where it stopped.
+   * - `pause-label`/`pauseLabel`: The pause control's name, read by screen readers. The control is a toggle
+   * and says it is pressed while the field is paused, so the name stays the
+   * same.
    * - `reach`: How far the pointer reaches into the field, `0` upward.
    *
    * Multiplied into the presence the pointer already fades in and out with, so
@@ -43233,6 +43314,7 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
+   * - `change`: Fired when the aura's own pause control pauses the field or starts it again.
    * - `helix-aura-fallback`: Fired each time the aura stops drawing its shader and shows its gradient, with the reason.
    *
    * ## Slots
@@ -43248,6 +43330,7 @@ export type CustomElements = {
    * - `--aura-glow`: The bright stop of the ramp. Defaults to `--helix-color-primary`.
    * - `--aura-ground`: The page the field fades into. Defaults to `--helix-color-background`.
    * - `--aura-haze`: The faint stop between the ground and the glow. Defaults to `--helix-color-primary-subtle`.
+   * - `--aura-pause-background-color`: The pause control's ground. Defaults to `--helix-color-surface-overlay`.
    * - `--aura-peak`: The hottest stop, at the center of a shape. Defaults to `--helix-color-primary-active` on a light page and `--helix-color-foreground` on a dark one.
    *
    * ## CSS Parts
@@ -43256,6 +43339,8 @@ export type CustomElements = {
    *
    * - `canvas`: The surface the shader draws into.
    * - `content`: The box over the field that holds the content. It covers the aura.
+   * - `pause`: The control that pauses the field and starts it again, drawn under `pause-control`.
+   * - `pause-mark`: The glyph on the pause control: pause while the field moves, play while it is paused.
    *
    * ## CSS States
    *
@@ -44721,6 +44806,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.
    *
@@ -49051,6 +49145,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.
@@ -51574,6 +51677,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 Custom Properties
    *
@@ -53663,6 +53769,16 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `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
@@ -53689,10 +53805,6 @@ export type CustomElements = {
    * legend hid is not counted.
    * - `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.
@@ -53723,9 +53835,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
@@ -53844,6 +53954,8 @@ 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
@@ -53853,6 +53965,8 @@ export type CustomElements = {
    * - `end`: Below the strip, at the trailing edge.
    * - `start`: Below the strip, at the leading edge.
    * - `summary`: Below the strip, in the middle.
+   * - `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`.
+   * - `loading`: Content shown under the strip while `loading` is set and there are no readings yet. Falls back to `loading-text`.
    *
    * ## Methods
    *
@@ -53944,9 +54058,12 @@ export type CustomElements = {
    * - `tooltip-top`: The bubble while it is above the reading. Set alongside `tooltip`.
    * - `tooltip-value`: A column's value inside the tooltip.
    * - `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.
+   * - `loading`: The words under the strip while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
    * - `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.
    * - `summary`: The middle slot's box.
@@ -53958,6 +54075,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-heatmap": Partial<
@@ -54197,6 +54315,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.
@@ -58054,6 +58181,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 Custom Properties
    *
@@ -64931,6 +65061,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 Custom Properties
@@ -67153,6 +67286,9 @@ export type CustomElements = {
    * disabled or a listener cancels the event.
    * - `focus(options?: FocusOptions) => void`: Moves focus to the tab's control, the button or the link inside it, so a
    * script can focus the tab the way it focuses a native one.
+   * - `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.
    *
    * ## CSS Custom Properties
    *
@@ -72689,8 +72825,8 @@ export type CustomElementsSolidJs = {
    * The shader stops drawing in these cases:
    * - The element is off screen or in a background tab.
    * - `prefers-reduced-motion` is set. The element shows one still frame.
-   * - `paused` is set, from a pause control on your page. The element holds the
-   *   frame it shows.
+   * - `paused` is set, from a pause control on your page or from the aura's own
+   *   under `pause-control`. The element holds the frame it shows.
    * - The browser takes back the drawing context, on a GPU reset or past its
    *   limit of about sixteen contexts. The gradient shows until the context
    *   returns.
@@ -72714,6 +72850,13 @@ export type CustomElementsSolidJs = {
    * changed while the aura draws, by a class, a style or the color mode,
    * reaches the shader on the next frame.
    *
+   * **`pause-control` draws a control that stops the motion and starts it
+   * again**, in the trailing corner of the field, as WCAG 2.2.2 asks of
+   * anything that moves for more than five seconds. It is a toggle button named
+   * by `pause-label`, which says it is pressed while the field is paused, and a
+   * press sends `change`. A reader who asked for reduced motion sees no motion
+   * and no control.
+   *
    * Where the gradient shows in place of the shader, the aura matches
    * `:state(fallback)` and sends `helix-aura-fallback` with the reason.
    *
@@ -72753,12 +72896,18 @@ export type CustomElementsSolidJs = {
    * hit-testable at rest, or it would swallow clicks meant for what is over it,
    * and an element that is not hit-testable never receives the `pointermove`
    * this listens for. Asking for the pointer is asking for the hit test.
+   * - `pause-control`/`pauseControl`: Whether the aura draws its own control that pauses the field and starts it
+   * again, in its trailing corner. Absent draws none, for a page with a pause
+   * control of its own.
    * - `paused`: Whether the field holds still on the frame it shows.
    *
    * Set it from a pause control on your page, so a reader can stop the motion,
    * as WCAG 2.2.2 asks of anything that moves for more than five seconds. A
    * change to another property still repaints the frame. Clearing it starts
    * the field from where it stopped.
+   * - `pause-label`/`pauseLabel`: The pause control's name, read by screen readers. The control is a toggle
+   * and says it is pressed while the field is paused, so the name stays the
+   * same.
    * - `reach`: How far the pointer reaches into the field, `0` upward.
    *
    * Multiplied into the presence the pointer already fades in and out with, so
@@ -72846,6 +72995,7 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
+   * - `change`: Fired when the aura's own pause control pauses the field or starts it again.
    * - `helix-aura-fallback`: Fired each time the aura stops drawing its shader and shows its gradient, with the reason.
    *
    * ## Slots
@@ -72861,6 +73011,7 @@ export type CustomElementsSolidJs = {
    * - `--aura-glow`: The bright stop of the ramp. Defaults to `--helix-color-primary`.
    * - `--aura-ground`: The page the field fades into. Defaults to `--helix-color-background`.
    * - `--aura-haze`: The faint stop between the ground and the glow. Defaults to `--helix-color-primary-subtle`.
+   * - `--aura-pause-background-color`: The pause control's ground. Defaults to `--helix-color-surface-overlay`.
    * - `--aura-peak`: The hottest stop, at the center of a shape. Defaults to `--helix-color-primary-active` on a light page and `--helix-color-foreground` on a dark one.
    *
    * ## CSS Parts
@@ -72869,6 +73020,8 @@ export type CustomElementsSolidJs = {
    *
    * - `canvas`: The surface the shader draws into.
    * - `content`: The box over the field that holds the content. It covers the aura.
+   * - `pause`: The control that pauses the field and starts it again, drawn under `pause-control`.
+   * - `pause-mark`: The glyph on the pause control: pause while the field moves, play while it is paused.
    *
    * ## CSS States
    *
@@ -74362,6 +74515,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.
    *
@@ -78743,6 +78905,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.
@@ -81294,6 +81465,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 Custom Properties
    *
@@ -83424,6 +83598,16 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
+   * - `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
@@ -83450,10 +83634,6 @@ export type CustomElementsSolidJs = {
    * legend hid is not counted.
    * - `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.
@@ -83484,9 +83664,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
@@ -83605,6 +83783,8 @@ 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
@@ -83614,6 +83794,8 @@ export type CustomElementsSolidJs = {
    * - `end`: Below the strip, at the trailing edge.
    * - `start`: Below the strip, at the leading edge.
    * - `summary`: Below the strip, in the middle.
+   * - `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`.
+   * - `loading`: Content shown under the strip while `loading` is set and there are no readings yet. Falls back to `loading-text`.
    *
    * ## Methods
    *
@@ -83705,9 +83887,12 @@ export type CustomElementsSolidJs = {
    * - `tooltip-top`: The bubble while it is above the reading. Set alongside `tooltip`.
    * - `tooltip-value`: A column's value inside the tooltip.
    * - `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.
+   * - `loading`: The words under the strip while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
    * - `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.
    * - `summary`: The middle slot's box.
@@ -83719,6 +83904,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-heatmap": Partial<
@@ -83961,6 +84147,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.
@@ -87893,6 +88088,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 Custom Properties
    *
@@ -94894,6 +95092,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 Custom Properties
@@ -97165,6 +97366,9 @@ export type CustomElementsSolidJs = {
    * disabled or a listener cancels the event.
    * - `focus(options?: FocusOptions) => void`: Moves focus to the tab's control, the button or the link inside it, so a
    * script can focus the tab the way it focuses a native one.
+   * - `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.
    *
    * ## CSS Custom Properties
    *
@@ -101948,6 +102152,8 @@ export type CustomCssProperties = {
   "--aura-ground"?: (string) | undefined;
   /** The faint stop between the ground and the glow. Defaults to `--helix-color-primary-subtle`. */
   "--aura-haze"?: (string) | undefined;
+  /** The pause control's ground. Defaults to `--helix-color-surface-overlay`. */
+  "--aura-pause-background-color"?: (string) | undefined;
   /** The hottest stop, at the center of a shape. Defaults to `--helix-color-primary-active` on a light page and `--helix-color-foreground` on a dark one. */
   "--aura-peak"?: (string) | undefined;
   /** The fill of the count of avatars past `max`. */