@fusion.dev/helix-headless 0.188.0 → 0.189.0

package/types/vue.d.ts

@@ -74,7 +74,6 @@ import type {
   HelixHeadlessIcon,
   HelixHeadlessImage,
   HelixHeadlessInput,
-  HelixHeadlessIsometricHeatmap,
   HelixHeadlessKbd,
   HelixHeadlessLegend,
   HelixHeadlessLightboxItem,
@@ -135,6 +134,9 @@ import type {
   HelixHeadlessSkipLink,
   HelixHeadlessSlider,
   HelixHeadlessSparkline,
+  HelixHeadlessSpatialHeatmap,
+  HelixHeadlessSpatialScatterChart,
+  HelixHeadlessSpatialSurfaceChart,
   HelixHeadlessSpeedDialGroup,
   HelixHeadlessSpeedDialItem,
   HelixHeadlessSpeedDial,
@@ -249,6 +251,8 @@ import type {
   HelixReadEvent,
   HelixCompleteEvent,
   HelixPreviewEvent,
+  HelixPlotChangeEvent,
+  HelixPlotTurnEvent,
   HelixBeforeCollapseEvent,
   HelixBeforeResizeEvent,
   HelixCollapseEvent,
@@ -8884,253 +8888,6 @@ export type HelixHeadlessInputVueEvents = {
   input: HelixHeadlessInputElementEvent;
 };
 
-/** `HelixHeadlessIsometricHeatmap` component event */
-export type HelixHeadlessIsometricHeatmapElementEvent<E = Event> = TypedEvent<
-  HelixHeadlessIsometricHeatmap,
-  E
->;
-/** `helix-before-change` event type */
-export type HelixHeadlessIsometricHeatmapHelixBeforeChangeElementEvent =
-  HelixHeadlessIsometricHeatmapElementEvent<HelixBeforeChangeEvent>;
-/** `helix-reading-change` event type */
-export type HelixHeadlessIsometricHeatmapHelixReadingChangeElementEvent =
-  HelixHeadlessIsometricHeatmapElementEvent<HelixReadingChangeEvent>;
-/** `helix-reading-press` event type */
-export type HelixHeadlessIsometricHeatmapHelixReadingPressElementEvent =
-  HelixHeadlessIsometricHeatmapElementEvent<HelixReadingPressEvent>;
-/** `helix-resize` event type */
-export type HelixHeadlessIsometricHeatmapHelixResizeElementEvent =
-  HelixHeadlessIsometricHeatmapElementEvent<HelixResizeEvent>;
-
-export type HelixHeadlessIsometricHeatmapVueProps = {
-  /** Draws every prism at no height, so the tones lie on a plane. */
-  flat?: (HelixHeadlessIsometricHeatmap["flat"]) | undefined;
-  /** How tall the highest reading stands, in cells. Every other reading stands
-at its share of it. */
-  relief?: (HelixHeadlessIsometricHeatmap["relief"]) | undefined;
-  /** The words shown in place of the drawing when the table has no readings,
-and the fallback of the `empty` slot. */
-  "empty-text"?: (HelixHeadlessIsometricHeatmap["emptyText"]) | undefined;
-  /** The words shown in place of the drawing when the table has no readings,
-and the fallback of the `empty` slot. */
-  emptyText?: (HelixHeadlessIsometricHeatmap["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?: (HelixHeadlessIsometricHeatmap["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"?: (HelixHeadlessIsometricHeatmap["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?: (HelixHeadlessIsometricHeatmap["loadingText"]) | undefined;
-  /** The id of the table to read.
-
-Names a table in the same tree, so a chart inside another component's
-shadow root reads a table in that root rather than one in the document. A
-`<table>` or anything built from grid roles, including `helix-table`.
-
-**In React this arrives as a property and not as an attribute**, the way
-`Tooltip.for` does, so it does not reflect and nothing styles on it. */
-  for?: (HelixHeadlessIsometricHeatmap["for"]) | undefined;
-  /** The chart's name, which starts the chart's text summary.
-
-Absent falls back to the table's own caption, which is usually the right
-words and is already written. */
-  label?: (HelixHeadlessIsometricHeatmap["label"]) | undefined;
-  /** The locale the chart's own numbers are written in: its axis, its
-percentages and its totals, such as `de` for `1.240` and `32 %`.
-
-Absent reads the nearest `lang`, then the runtime's own. The table's
-cells are shown as the table writes them, whatever this says. */
-  locale?: (HelixHeadlessIsometricHeatmap["locale"]) | undefined;
-  /** Where a reading the keys moved to stands among the readings, said after
-it. `{position}` and `{count}` are replaced with the numbers, written in
-`locale`.
-
-Set it to the words of the page's language, such as `{position} von
-{count}`, or to nothing to say no position. A slice or a series a
-legend hid is not counted. */
-  "position-label"?: (HelixHeadlessIsometricHeatmap["positionLabel"]) | undefined;
-  /** Where a reading the keys moved to stands among the readings, said after
-it. `{position}` and `{count}` are replaced with the numbers, written in
-`locale`.
-
-Set it to the words of the page's language, such as `{position} von
-{count}`, or to nothing to say no position. A slice or a series a
-legend hid is not counted. */
-  positionLabel?: (HelixHeadlessIsometricHeatmap["positionLabel"]) | undefined;
-  /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
-`overview-label`. */
-  "busiest-label"?: (HelixHeadlessIsometricHeatmap["busiestLabel"]) | undefined;
-  /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
-`overview-label`. */
-  busiestLabel?: (HelixHeadlessIsometricHeatmap["busiestLabel"]) | undefined;
-  /** Space between cells, in CSS pixels. It is a number for the same reason
-`min-cell` is. */
-  gap?: (HelixHeadlessIsometricHeatmap["gap"]) | undefined;
-  /** The smallest a cell may get before the strip draws fewer of them, in CSS pixels.
-
-**Set this only to overrule what the strip actually draws.** The arithmetic
-needs a width in pixels and the width is a length the stylesheet resolves,
-so a number written here that disagrees with the sheet is a promise the
-consumer has to keep by hand, and the one number a summary is told to trust
-is the one it gets wrong.
-
-The strip measures itself, so sizing the cells in a sheet is enough on its
-own and these two are the estimate used until the first measurement lands.
-Writing the attribute pins the value and stops the measurement being
-consulted, which is what a container query or a transition on the cell size
-wants, where what is drawn this frame is not what the arithmetic should
-plan around.
-
-Zero turns the dropping off altogether, which is right for a strip in a
-container that cannot get narrow. */
-  "min-cell"?: (HelixHeadlessIsometricHeatmap["minCell"] | `${number}`) | undefined;
-  /** The smallest a cell may get before the strip draws fewer of them, in CSS pixels.
-
-**Set this only to overrule what the strip actually draws.** The arithmetic
-needs a width in pixels and the width is a length the stylesheet resolves,
-so a number written here that disagrees with the sheet is a promise the
-consumer has to keep by hand, and the one number a summary is told to trust
-is the one it gets wrong.
-
-The strip measures itself, so sizing the cells in a sheet is enough on its
-own and these two are the estimate used until the first measurement lands.
-Writing the attribute pins the value and stops the measurement being
-consulted, which is what a container query or a transition on the cell size
-wants, where what is drawn this frame is not what the arithmetic should
-plan around.
-
-Zero turns the dropping off altogether, which is right for a strip in a
-container that cannot get narrow. */
-  minCell?: (HelixHeadlessIsometricHeatmap["minCell"]) | undefined;
-  /** The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
-`busiest-label` and `total-label`, `{busiest}` the busiest reading's name
-and its reading as the table writes it, and `{total}` the total of the
-readings drawn, written in the locale. */
-  "overview-label"?: (HelixHeadlessIsometricHeatmap["overviewLabel"]) | undefined;
-  /** The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
-`busiest-label` and `total-label`, `{busiest}` the busiest reading's name
-and its reading as the table writes it, and `{total}` the total of the
-readings drawn, written in the locale. */
-  overviewLabel?: (HelixHeadlessIsometricHeatmap["overviewLabel"]) | undefined;
-  /** How many rows the strip has.
-
-`1` is a status strip and `7` is a calendar week, which are the two readings
-this covers. Cells fill down the column and then across, which is what a
-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?: (HelixHeadlessIsometricHeatmap["rows"]) | undefined;
-  /** What the readout added for a selected cell, under `selection-mode`. */
-  "selected-label"?: (HelixHeadlessIsometricHeatmap["selectedLabel"]) | undefined;
-  /** What the readout added for a selected cell, under `selection-mode`. */
-  selectedLabel?: (HelixHeadlessIsometricHeatmap["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
-needs plural forms writes them: `{count, plural, one {# wybrany} few
-{# wybrane} many {# wybranych} other {# wybranego}}`. */
-  "selection-label"?: (HelixHeadlessIsometricHeatmap["selectionLabel"]) | 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
-needs plural forms writes them: `{count, plural, one {# wybrany} few
-{# wybrane} many {# wybranych} other {# wybranego}}`. */
-  selectionLabel?: (HelixHeadlessIsometricHeatmap["selectionLabel"]) | undefined;
-  /** How many cells a reader can select: `single` or `multiple`.
-
-Absent selects nothing, and a press or Space does what it did. */
-  "selection-mode"?: (HelixHeadlessIsometricHeatmap["selectionMode"]) | undefined;
-  /** How many cells a reader can select: `single` or `multiple`.
-
-Absent selects nothing, and a press or Space does what it did. */
-  selectionMode?: (HelixHeadlessIsometricHeatmap["selectionMode"]) | undefined;
-  /** What Shift takes in under `selection-mode="multiple"`: `linear`, every
-cell between two in the table's order, or `rectangle`, the cells between
-two corners by row and by column, as a spreadsheet selects a range. */
-  "selection-shape"?: (HelixHeadlessIsometricHeatmap["selectionShape"]) | undefined;
-  /** What Shift takes in under `selection-mode="multiple"`: `linear`, every
-cell between two in the table's order, or `rectangle`, the cells between
-two corners by row and by column, as a spreadsheet selects a range. */
-  selectionShape?: (HelixHeadlessIsometricHeatmap["selectionShape"]) | undefined;
-  /** The strip's name where the chart has none: no `aria-label`, `label`, or
-table caption. */
-  "strip-label"?: (HelixHeadlessIsometricHeatmap["stripLabel"]) | undefined;
-  /** The strip's name where the chart has none: no `aria-label`, `label`, or
-table caption. */
-  stripLabel?: (HelixHeadlessIsometricHeatmap["stripLabel"]) | undefined;
-  /** Lower bounds for the tone buckets, in the order the tones are given.
-
-`thresholds="1 3 6 9"` with `tones="1 2 3 4"` puts 1 and 2 in the ramp's
-first step, 3 to 5 in the second, 6 to 8 in the third, and 9 upward in the
-fourth. A value below the first bound gets no tone at all: an empty day in a
-contribution graph is a day with nothing in it, and painting it as the
-lowest bucket claims a reading that does not exist. */
-  thresholds?: (HelixHeadlessIsometricHeatmap["thresholds"]) | undefined;
-  /** The tone for each bucket, in the same order as `thresholds`.
-
-A name, resolved as `--heatmap-tone-<name>` by whichever tier answers.
-**`"1"` through `"5"` are a ramp and everything else is a category**, which
-is the distinction a heatmap lives or dies on: magnitude has to be one hue
-getting louder, because a reader compares two cells by weight and cannot
-compare two hues at all. `tones="surface info accent success primary"` for a
-commit count is five unrelated hues for five amounts, which is confetti with
-no order in it. */
-  tones?: (HelixHeadlessIsometricHeatmap["tones"]) | undefined;
-  /** The name the `overview` gives the total of the readings drawn,
-`{totalLabel}` in `overview-label`. */
-  "total-label"?: (HelixHeadlessIsometricHeatmap["totalLabel"]) | undefined;
-  /** The name the `overview` gives the total of the readings drawn,
-`{totalLabel}` in `overview-label`. */
-  totalLabel?: (HelixHeadlessIsometricHeatmap["totalLabel"]) | undefined;
-  /** The selected cells, separated by commas: each by the date its row's
-header carries in a `<time datetime>`, such as `2026-06-11`, or by the
-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?: (HelixHeadlessIsometricHeatmap["value"]) | undefined;
-  /** The readings as data, in the shape of a table, where the page has no
-table to point `for` at. `for` wins where both are set.
-
-```js
-chart.data = {
-  caption: 'Sessions by channel',
-  columns: ['Month', 'Direct', 'Referral'],
-  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
-}
-```
-
-The first column holds each row's label and every column after it a
-series, as in a table. A cell is a number, words, `null` for a blank,
-or `{ value, text }` for a number shown as words, such as `$128k`. A
-number is shown in `locale`.
-
-**A table is still the better source where the page can show one**:
-it reads with no script and before hydration, and a reader can sort and
-copy it. Data is drawn on the client only, so a server serves the
-frame, and the summary, the keys and the readout are then the whole of
-what a screen reader is given. Set a new object to redraw: the chart
-does not look inside the one it has. */
-  data?: (HelixHeadlessIsometricHeatmap["data"]) | undefined;
-};
-
-export type HelixHeadlessIsometricHeatmapVueEvents = {
-  /** Fired once a press or a key has changed which cells are selected. */
-  change: HelixHeadlessIsometricHeatmapElementEvent;
-  /** Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable. */
-  "helix-before-change": HelixHeadlessIsometricHeatmapHelixBeforeChangeElementEvent;
-  /** 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-change": HelixHeadlessIsometricHeatmapHelixReadingChangeElementEvent;
-  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
-  "helix-reading-press": HelixHeadlessIsometricHeatmapHelixReadingPressElementEvent;
-  /** Fired when the number of cells drawn changes, with the new number. */
-  "helix-resize": HelixHeadlessIsometricHeatmapHelixResizeElementEvent;
-};
-
 /** `HelixHeadlessKbd` component event */
 export type HelixHeadlessKbdElementEvent<E = Event> = TypedEvent<
   HelixHeadlessKbd,
@@ -14759,53 +14516,562 @@ export type HelixHeadlessSparklineVueEvents = {
   "helix-reading-press": HelixHeadlessSparklineHelixReadingPressElementEvent;
 };
 
-export type HelixHeadlessSpeedDialGroupVueProps = {
-  /** The group's name, drawn above its actions and read by screen readers. */
-  label?: (HelixHeadlessSpeedDialGroup["label"]) | undefined;
-};
-
-export type HelixHeadlessSpeedDialGroupVueEvents = {};
-
-/** `HelixHeadlessSpeedDialItem` component event */
-export type HelixHeadlessSpeedDialItemElementEvent<E = Event> = TypedEvent<
-  HelixHeadlessSpeedDialItem,
+/** `HelixHeadlessSpatialHeatmap` component event */
+export type HelixHeadlessSpatialHeatmapElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessSpatialHeatmap,
   E
 >;
-/** `helix-select` event type */
-export type HelixHeadlessSpeedDialItemHelixSelectElementEvent =
-  HelixHeadlessSpeedDialItemElementEvent<HelixSelectEvent>;
+/** `helix-plot-change` event type */
+export type HelixHeadlessSpatialHeatmapHelixPlotChangeElementEvent =
+  HelixHeadlessSpatialHeatmapElementEvent<HelixPlotChangeEvent>;
+/** `helix-plot-turn` event type */
+export type HelixHeadlessSpatialHeatmapHelixPlotTurnElementEvent =
+  HelixHeadlessSpatialHeatmapElementEvent<HelixPlotTurnEvent>;
+/** `helix-before-change` event type */
+export type HelixHeadlessSpatialHeatmapHelixBeforeChangeElementEvent =
+  HelixHeadlessSpatialHeatmapElementEvent<HelixBeforeChangeEvent>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessSpatialHeatmapHelixReadingChangeElementEvent =
+  HelixHeadlessSpatialHeatmapElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessSpatialHeatmapHelixReadingPressElementEvent =
+  HelixHeadlessSpatialHeatmapElementEvent<HelixReadingPressEvent>;
+/** `helix-resize` event type */
+export type HelixHeadlessSpatialHeatmapHelixResizeElementEvent =
+  HelixHeadlessSpatialHeatmapElementEvent<HelixResizeEvent>;
 
-export type HelixHeadlessSpeedDialItemVueProps = {
-  /** Whether the action is disabled, so it cannot be chosen. */
-  disabled?: (HelixHeadlessSpeedDialItem["disabled"]) | undefined;
-  /** Whether the link downloads the file when the action is chosen. Only
-meaningful beside an `href`, and only for a file served from the page's
-origin. */
-  download?: (HelixHeadlessSpeedDialItem["download"]) | undefined;
-  /** The URL the action links to. Setting it draws the action as a link. */
-  href?: (HelixHeadlessSpeedDialItem["href"]) | undefined;
-  /** The link's `rel`. Set it whenever you set `target="_blank"`. */
-  rel?: (HelixHeadlessSpeedDialItem["rel"]) | undefined;
-  /** The action's keyboard shortcut as a chord, such as `mod+s`, carried as
-`aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple
-keyboard and Control elsewhere. Showing a shortcut does not bind it. */
-  shortcut?: (HelixHeadlessSpeedDialItem["shortcut"]) | undefined;
-  /** Where the link opens, such as `_blank` for a new tab. */
-  target?: (HelixHeadlessSpeedDialItem["target"]) | undefined;
-  /** The action's value, sent in `helix-select` when the action is chosen. */
-  value?: (HelixHeadlessSpeedDialItem["value"]) | undefined;
-};
+export type HelixHeadlessSpatialHeatmapVueProps = {
+  /** Draws every prism at no height, so the tones lie on a plane. */
+  flat?: (HelixHeadlessSpatialHeatmap["flat"]) | undefined;
+  /** How tall the highest reading stands, in cells. Every other reading stands
+at its share of it. */
+  relief?: (HelixHeadlessSpatialHeatmap["relief"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessSpatialHeatmap["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessSpatialHeatmap["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.
 
-export type HelixHeadlessSpeedDialItemVueEvents = {
-  /** The action was chosen. Cancelable: cancel it to keep the dial open. */
-  "helix-select": HelixHeadlessSpeedDialItemHelixSelectElementEvent;
-};
+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?: (HelixHeadlessSpatialHeatmap["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"?: (HelixHeadlessSpatialHeatmap["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?: (HelixHeadlessSpatialHeatmap["loadingText"]) | undefined;
+  /** The id of the table to read.
 
-/** `HelixHeadlessSpeedDial` component event */
-export type HelixHeadlessSpeedDialElementEvent<E = Event> = TypedEvent<
-  HelixHeadlessSpeedDial,
-  E
->;
+Names a table in the same tree, so a chart inside another component's
+shadow root reads a table in that root rather than one in the document. A
+`<table>` or anything built from grid roles, including `helix-table`.
+
+**In React this arrives as a property and not as an attribute**, the way
+`Tooltip.for` does, so it does not reflect and nothing styles on it. */
+  for?: (HelixHeadlessSpatialHeatmap["for"]) | undefined;
+  /** The chart's name, which starts the chart's text summary.
+
+Absent falls back to the table's own caption, which is usually the right
+words and is already written. */
+  label?: (HelixHeadlessSpatialHeatmap["label"]) | undefined;
+  /** The locale the chart's own numbers are written in: its axis, its
+percentages and its totals, such as `de` for `1.240` and `32 %`.
+
+Absent reads the nearest `lang`, then the runtime's own. The table's
+cells are shown as the table writes them, whatever this says. */
+  locale?: (HelixHeadlessSpatialHeatmap["locale"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixHeadlessSpatialHeatmap["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixHeadlessSpatialHeatmap["positionLabel"]) | undefined;
+  /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
+`overview-label`. */
+  "busiest-label"?: (HelixHeadlessSpatialHeatmap["busiestLabel"]) | undefined;
+  /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
+`overview-label`. */
+  busiestLabel?: (HelixHeadlessSpatialHeatmap["busiestLabel"]) | undefined;
+  /** Space between cells, in CSS pixels. It is a number for the same reason
+`min-cell` is. */
+  gap?: (HelixHeadlessSpatialHeatmap["gap"]) | undefined;
+  /** The smallest a cell may get before the strip draws fewer of them, in CSS pixels.
+
+**Set this only to overrule what the strip actually draws.** The arithmetic
+needs a width in pixels and the width is a length the stylesheet resolves,
+so a number written here that disagrees with the sheet is a promise the
+consumer has to keep by hand, and the one number a summary is told to trust
+is the one it gets wrong.
+
+The strip measures itself, so sizing the cells in a sheet is enough on its
+own and these two are the estimate used until the first measurement lands.
+Writing the attribute pins the value and stops the measurement being
+consulted, which is what a container query or a transition on the cell size
+wants, where what is drawn this frame is not what the arithmetic should
+plan around.
+
+Zero turns the dropping off altogether, which is right for a strip in a
+container that cannot get narrow. */
+  "min-cell"?: (HelixHeadlessSpatialHeatmap["minCell"] | `${number}`) | undefined;
+  /** The smallest a cell may get before the strip draws fewer of them, in CSS pixels.
+
+**Set this only to overrule what the strip actually draws.** The arithmetic
+needs a width in pixels and the width is a length the stylesheet resolves,
+so a number written here that disagrees with the sheet is a promise the
+consumer has to keep by hand, and the one number a summary is told to trust
+is the one it gets wrong.
+
+The strip measures itself, so sizing the cells in a sheet is enough on its
+own and these two are the estimate used until the first measurement lands.
+Writing the attribute pins the value and stops the measurement being
+consulted, which is what a container query or a transition on the cell size
+wants, where what is drawn this frame is not what the arithmetic should
+plan around.
+
+Zero turns the dropping off altogether, which is right for a strip in a
+container that cannot get narrow. */
+  minCell?: (HelixHeadlessSpatialHeatmap["minCell"]) | undefined;
+  /** The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
+`busiest-label` and `total-label`, `{busiest}` the busiest reading's name
+and its reading as the table writes it, and `{total}` the total of the
+readings drawn, written in the locale. */
+  "overview-label"?: (HelixHeadlessSpatialHeatmap["overviewLabel"]) | undefined;
+  /** The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
+`busiest-label` and `total-label`, `{busiest}` the busiest reading's name
+and its reading as the table writes it, and `{total}` the total of the
+readings drawn, written in the locale. */
+  overviewLabel?: (HelixHeadlessSpatialHeatmap["overviewLabel"]) | undefined;
+  /** How many rows the strip has.
+
+`1` is a status strip and `7` is a calendar week, which are the two readings
+this covers. Cells fill down the column and then across, which is what a
+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?: (HelixHeadlessSpatialHeatmap["rows"]) | undefined;
+  /** What the readout added for a selected cell, under `selection-mode`. */
+  "selected-label"?: (HelixHeadlessSpatialHeatmap["selectedLabel"]) | undefined;
+  /** What the readout added for a selected cell, under `selection-mode`. */
+  selectedLabel?: (HelixHeadlessSpatialHeatmap["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
+needs plural forms writes them: `{count, plural, one {# wybrany} few
+{# wybrane} many {# wybranych} other {# wybranego}}`. */
+  "selection-label"?: (HelixHeadlessSpatialHeatmap["selectionLabel"]) | 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
+needs plural forms writes them: `{count, plural, one {# wybrany} few
+{# wybrane} many {# wybranych} other {# wybranego}}`. */
+  selectionLabel?: (HelixHeadlessSpatialHeatmap["selectionLabel"]) | undefined;
+  /** How many cells a reader can select: `single` or `multiple`.
+
+Absent selects nothing, and a press or Space does what it did. */
+  "selection-mode"?: (HelixHeadlessSpatialHeatmap["selectionMode"]) | undefined;
+  /** How many cells a reader can select: `single` or `multiple`.
+
+Absent selects nothing, and a press or Space does what it did. */
+  selectionMode?: (HelixHeadlessSpatialHeatmap["selectionMode"]) | undefined;
+  /** What Shift takes in under `selection-mode="multiple"`: `linear`, every
+cell between two in the table's order, or `rectangle`, the cells between
+two corners by row and by column, as a spreadsheet selects a range. */
+  "selection-shape"?: (HelixHeadlessSpatialHeatmap["selectionShape"]) | undefined;
+  /** What Shift takes in under `selection-mode="multiple"`: `linear`, every
+cell between two in the table's order, or `rectangle`, the cells between
+two corners by row and by column, as a spreadsheet selects a range. */
+  selectionShape?: (HelixHeadlessSpatialHeatmap["selectionShape"]) | undefined;
+  /** The strip's name where the chart has none: no `aria-label`, `label`, or
+table caption. */
+  "strip-label"?: (HelixHeadlessSpatialHeatmap["stripLabel"]) | undefined;
+  /** The strip's name where the chart has none: no `aria-label`, `label`, or
+table caption. */
+  stripLabel?: (HelixHeadlessSpatialHeatmap["stripLabel"]) | undefined;
+  /** Lower bounds for the tone buckets, in the order the tones are given.
+
+`thresholds="1 3 6 9"` with `tones="1 2 3 4"` puts 1 and 2 in the ramp's
+first step, 3 to 5 in the second, 6 to 8 in the third, and 9 upward in the
+fourth. A value below the first bound gets no tone at all: an empty day in a
+contribution graph is a day with nothing in it, and painting it as the
+lowest bucket claims a reading that does not exist. */
+  thresholds?: (HelixHeadlessSpatialHeatmap["thresholds"]) | undefined;
+  /** The tone for each bucket, in the same order as `thresholds`.
+
+A name, resolved as `--heatmap-tone-<name>` by whichever tier answers.
+**`"1"` through `"5"` are a ramp and everything else is a category**, which
+is the distinction a heatmap lives or dies on: magnitude has to be one hue
+getting louder, because a reader compares two cells by weight and cannot
+compare two hues at all. `tones="surface info accent success primary"` for a
+commit count is five unrelated hues for five amounts, which is confetti with
+no order in it. */
+  tones?: (HelixHeadlessSpatialHeatmap["tones"]) | undefined;
+  /** The name the `overview` gives the total of the readings drawn,
+`{totalLabel}` in `overview-label`. */
+  "total-label"?: (HelixHeadlessSpatialHeatmap["totalLabel"]) | undefined;
+  /** The name the `overview` gives the total of the readings drawn,
+`{totalLabel}` in `overview-label`. */
+  totalLabel?: (HelixHeadlessSpatialHeatmap["totalLabel"]) | undefined;
+  /** The selected cells, separated by commas: each by the date its row's
+header carries in a `<time datetime>`, such as `2026-06-11`, or by the
+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?: (HelixHeadlessSpatialHeatmap["value"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeadlessSpatialHeatmap["data"]) | undefined;
+};
+
+export type HelixHeadlessSpatialHeatmapVueEvents = {
+  /** The readings drawn or the reading the keys rest on changed, which a renderer is told. It stays on the chart. */
+  "helix-plot-change": HelixHeadlessSpatialHeatmapHelixPlotChangeElementEvent;
+  /** Shift with an arrow asked a renderer's view to turn, by a step across or up. */
+  "helix-plot-turn": HelixHeadlessSpatialHeatmapHelixPlotTurnElementEvent;
+  /** Fired once a press or a key has changed which cells are selected. */
+  change: HelixHeadlessSpatialHeatmapElementEvent;
+  /** Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable. */
+  "helix-before-change": HelixHeadlessSpatialHeatmapHelixBeforeChangeElementEvent;
+  /** 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-change": HelixHeadlessSpatialHeatmapHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessSpatialHeatmapHelixReadingPressElementEvent;
+  /** Fired when the number of cells drawn changes, with the new number. */
+  "helix-resize": HelixHeadlessSpatialHeatmapHelixResizeElementEvent;
+};
+
+/** `HelixHeadlessSpatialScatterChart` component event */
+export type HelixHeadlessSpatialScatterChartElementEvent<E = Event> =
+  TypedEvent<HelixHeadlessSpatialScatterChart, E>;
+/** `helix-plot-change` event type */
+export type HelixHeadlessSpatialScatterChartHelixPlotChangeElementEvent =
+  HelixHeadlessSpatialScatterChartElementEvent<HelixPlotChangeEvent>;
+/** `helix-plot-turn` event type */
+export type HelixHeadlessSpatialScatterChartHelixPlotTurnElementEvent =
+  HelixHeadlessSpatialScatterChartElementEvent<HelixPlotTurnEvent>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessSpatialScatterChartHelixReadingChangeElementEvent =
+  HelixHeadlessSpatialScatterChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessSpatialScatterChartHelixReadingPressElementEvent =
+  HelixHeadlessSpatialScatterChartElementEvent<HelixReadingPressEvent>;
+
+export type HelixHeadlessSpatialScatterChartVueProps = {
+  /** The column of text that puts each point in a group, by its heading. None by default. */
+  "group-by"?: (HelixHeadlessSpatialScatterChart["groupBy"]) | undefined;
+  /** The column of text that puts each point in a group, by its heading. None by default. */
+  groupBy?: (HelixHeadlessSpatialScatterChart["groupBy"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  "plot-label"?: (HelixHeadlessSpatialScatterChart["plotLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  plotLabel?: (HelixHeadlessSpatialScatterChart["plotLabel"]) | undefined;
+  /** The `summary` part's sentence. `{count}` is the number of points, written
+in the locale, and `{x}`, `{y}`, and `{z}` are the three measures' names. */
+  "summary-label"?: (HelixHeadlessSpatialScatterChart["summaryLabel"]) | undefined;
+  /** The `summary` part's sentence. `{count}` is the number of points, written
+in the locale, and `{x}`, `{y}`, and `{z}` are the three measures' names. */
+  summaryLabel?: (HelixHeadlessSpatialScatterChart["summaryLabel"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessSpatialScatterChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessSpatialScatterChart["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?: (HelixHeadlessSpatialScatterChart["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"?: (HelixHeadlessSpatialScatterChart["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?: (HelixHeadlessSpatialScatterChart["loadingText"]) | undefined;
+  /** The id of the table to read.
+
+Names a table in the same tree, so a chart inside another component's
+shadow root reads a table in that root rather than one in the document. A
+`<table>` or anything built from grid roles, including `helix-table`.
+
+**In React this arrives as a property and not as an attribute**, the way
+`Tooltip.for` does, so it does not reflect and nothing styles on it. */
+  for?: (HelixHeadlessSpatialScatterChart["for"]) | undefined;
+  /** The chart's name, which starts the chart's text summary.
+
+Absent falls back to the table's own caption, which is usually the right
+words and is already written. */
+  label?: (HelixHeadlessSpatialScatterChart["label"]) | undefined;
+  /** The locale the chart's own numbers are written in: its axis, its
+percentages and its totals, such as `de` for `1.240` and `32 %`.
+
+Absent reads the nearest `lang`, then the runtime's own. The table's
+cells are shown as the table writes them, whatever this says. */
+  locale?: (HelixHeadlessSpatialScatterChart["locale"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixHeadlessSpatialScatterChart["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixHeadlessSpatialScatterChart["positionLabel"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeadlessSpatialScatterChart["data"]) | undefined;
+};
+
+export type HelixHeadlessSpatialScatterChartVueEvents = {
+  /** The points or the point the keys rest on changed, which the renderer is told. It stays on the chart. */
+  "helix-plot-change": HelixHeadlessSpatialScatterChartHelixPlotChangeElementEvent;
+  /** Shift with an arrow asked the view to turn, by a step across or up. */
+  "helix-plot-turn": HelixHeadlessSpatialScatterChartHelixPlotTurnElementEvent;
+  /** The reading moved, or was put away: `index` is the row, or `-1` for none, with its `label` and the `pointerType` that moved it. */
+  "helix-reading-change": HelixHeadlessSpatialScatterChartHelixReadingChangeElementEvent;
+  /** A point was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessSpatialScatterChartHelixReadingPressElementEvent;
+};
+
+/** `HelixHeadlessSpatialSurfaceChart` component event */
+export type HelixHeadlessSpatialSurfaceChartElementEvent<E = Event> =
+  TypedEvent<HelixHeadlessSpatialSurfaceChart, E>;
+/** `helix-plot-change` event type */
+export type HelixHeadlessSpatialSurfaceChartHelixPlotChangeElementEvent =
+  HelixHeadlessSpatialSurfaceChartElementEvent<HelixPlotChangeEvent>;
+/** `helix-plot-turn` event type */
+export type HelixHeadlessSpatialSurfaceChartHelixPlotTurnElementEvent =
+  HelixHeadlessSpatialSurfaceChartElementEvent<HelixPlotTurnEvent>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessSpatialSurfaceChartHelixReadingChangeElementEvent =
+  HelixHeadlessSpatialSurfaceChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessSpatialSurfaceChartHelixReadingPressElementEvent =
+  HelixHeadlessSpatialSurfaceChartElementEvent<HelixReadingPressEvent>;
+
+export type HelixHeadlessSpatialSurfaceChartVueProps = {
+  /** What the readout says for a place with no reading. `{x}` and `{z}` are
+the place's numbers across and in depth, and `{across}` and `{depth}`
+the two measures' names. */
+  "open-label"?: (HelixHeadlessSpatialSurfaceChart["openLabel"]) | undefined;
+  /** What the readout says for a place with no reading. `{x}` and `{z}` are
+the place's numbers across and in depth, and `{across}` and `{depth}`
+the two measures' names. */
+  openLabel?: (HelixHeadlessSpatialSurfaceChart["openLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  "plot-label"?: (HelixHeadlessSpatialSurfaceChart["plotLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  plotLabel?: (HelixHeadlessSpatialSurfaceChart["plotLabel"]) | undefined;
+  /** The `summary` part's sentence. `{count}` is the number of readings,
+written in the locale, `{x}`, `{z}`, and `{y}` are the measures across,
+in depth, and up, and `{low}` and `{high}` the lowest and the highest
+reading. */
+  "summary-label"?: (HelixHeadlessSpatialSurfaceChart["summaryLabel"]) | undefined;
+  /** The `summary` part's sentence. `{count}` is the number of readings,
+written in the locale, `{x}`, `{z}`, and `{y}` are the measures across,
+in depth, and up, and `{low}` and `{high}` the lowest and the highest
+reading. */
+  summaryLabel?: (HelixHeadlessSpatialSurfaceChart["summaryLabel"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessSpatialSurfaceChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessSpatialSurfaceChart["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?: (HelixHeadlessSpatialSurfaceChart["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"?: (HelixHeadlessSpatialSurfaceChart["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?: (HelixHeadlessSpatialSurfaceChart["loadingText"]) | undefined;
+  /** The id of the table to read.
+
+Names a table in the same tree, so a chart inside another component's
+shadow root reads a table in that root rather than one in the document. A
+`<table>` or anything built from grid roles, including `helix-table`.
+
+**In React this arrives as a property and not as an attribute**, the way
+`Tooltip.for` does, so it does not reflect and nothing styles on it. */
+  for?: (HelixHeadlessSpatialSurfaceChart["for"]) | undefined;
+  /** The chart's name, which starts the chart's text summary.
+
+Absent falls back to the table's own caption, which is usually the right
+words and is already written. */
+  label?: (HelixHeadlessSpatialSurfaceChart["label"]) | undefined;
+  /** The locale the chart's own numbers are written in: its axis, its
+percentages and its totals, such as `de` for `1.240` and `32 %`.
+
+Absent reads the nearest `lang`, then the runtime's own. The table's
+cells are shown as the table writes them, whatever this says. */
+  locale?: (HelixHeadlessSpatialSurfaceChart["locale"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixHeadlessSpatialSurfaceChart["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixHeadlessSpatialSurfaceChart["positionLabel"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeadlessSpatialSurfaceChart["data"]) | undefined;
+};
+
+export type HelixHeadlessSpatialSurfaceChartVueEvents = {
+  /** The readings or the place the keys rest on changed, which the renderer is told. It stays on the chart. */
+  "helix-plot-change": HelixHeadlessSpatialSurfaceChartHelixPlotChangeElementEvent;
+  /** Shift with an arrow asked the view to turn, by a step across or up. */
+  "helix-plot-turn": HelixHeadlessSpatialSurfaceChartHelixPlotTurnElementEvent;
+  /** The reading moved, or was put away: `index` is the row, or `-1` for none or a place with no reading, with its `label` and the `pointerType` that moved it. */
+  "helix-reading-change": HelixHeadlessSpatialSurfaceChartHelixReadingChangeElementEvent;
+  /** A place was clicked or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessSpatialSurfaceChartHelixReadingPressElementEvent;
+};
+
+export type HelixHeadlessSpeedDialGroupVueProps = {
+  /** The group's name, drawn above its actions and read by screen readers. */
+  label?: (HelixHeadlessSpeedDialGroup["label"]) | undefined;
+};
+
+export type HelixHeadlessSpeedDialGroupVueEvents = {};
+
+/** `HelixHeadlessSpeedDialItem` component event */
+export type HelixHeadlessSpeedDialItemElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessSpeedDialItem,
+  E
+>;
+/** `helix-select` event type */
+export type HelixHeadlessSpeedDialItemHelixSelectElementEvent =
+  HelixHeadlessSpeedDialItemElementEvent<HelixSelectEvent>;
+
+export type HelixHeadlessSpeedDialItemVueProps = {
+  /** Whether the action is disabled, so it cannot be chosen. */
+  disabled?: (HelixHeadlessSpeedDialItem["disabled"]) | undefined;
+  /** Whether the link downloads the file when the action is chosen. Only
+meaningful beside an `href`, and only for a file served from the page's
+origin. */
+  download?: (HelixHeadlessSpeedDialItem["download"]) | undefined;
+  /** The URL the action links to. Setting it draws the action as a link. */
+  href?: (HelixHeadlessSpeedDialItem["href"]) | undefined;
+  /** The link's `rel`. Set it whenever you set `target="_blank"`. */
+  rel?: (HelixHeadlessSpeedDialItem["rel"]) | undefined;
+  /** The action's keyboard shortcut as a chord, such as `mod+s`, carried as
+`aria-keyshortcuts` and drawn after the name. `mod` is Command on an Apple
+keyboard and Control elsewhere. Showing a shortcut does not bind it. */
+  shortcut?: (HelixHeadlessSpeedDialItem["shortcut"]) | undefined;
+  /** Where the link opens, such as `_blank` for a new tab. */
+  target?: (HelixHeadlessSpeedDialItem["target"]) | undefined;
+  /** The action's value, sent in `helix-select` when the action is chosen. */
+  value?: (HelixHeadlessSpeedDialItem["value"]) | undefined;
+};
+
+export type HelixHeadlessSpeedDialItemVueEvents = {
+  /** The action was chosen. Cancelable: cancel it to keep the dial open. */
+  "helix-select": HelixHeadlessSpeedDialItemHelixSelectElementEvent;
+};
+
+/** `HelixHeadlessSpeedDial` component event */
+export type HelixHeadlessSpeedDialElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessSpeedDial,
+  E
+>;
 /** `helix-before-close` event type */
 export type HelixHeadlessSpeedDialHelixBeforeCloseElementEvent =
   HelixHeadlessSpeedDialElementEvent<HelixBeforeCloseEvent>;
@@ -19461,8 +19727,6 @@ export type CustomCssProperties = {
   "--heatmap-tone-success"?: (string) | undefined;
   /** The color of the `warning` tone. */
   "--heatmap-tone-warning"?: (string) | undefined;
-  /** How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it. */
-  "--isometric-heatmap-span"?: (string) | undefined;
   /** How far the zoomed item is moved across from the middle of the viewport, in pixels, toward the right. Written only while zoomed. */
   "--lightbox-pan-x"?: (string) | undefined;
   /** How far the zoomed item is moved down from the middle of the viewport, in pixels. Written only while zoomed. */
@@ -19537,6 +19801,22 @@ export type CustomCssProperties = {
   "--slider-marker-at"?: (string) | undefined;
   /** Where the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its `origin`. */
   "--slider-to"?: (string) | undefined;
+  /** How tall the drawing is for its width. The component writes it on the footer, and a stylesheet that stands the `start` and `end` labels at their corners reads it. */
+  "--spatial-heatmap-depth"?: (string) | undefined;
+  /** Where the front edge ends, under the newest column, across the drawing, from 0 at its inline start to 1. The component writes it on the footer, and a stylesheet that stands the `end` label there reads it. */
+  "--spatial-heatmap-end-x"?: (string) | undefined;
+  /** How far down the drawing the front edge ends, under the newest column, as a share of the drawing's width: its whole depth in the chart's own drawing, and wherever a renderer draws it. The component writes it on the footer, and a stylesheet that stands the `end` label there reads it. */
+  "--spatial-heatmap-end-y"?: (string) | undefined;
+  /** How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it. */
+  "--spatial-heatmap-span"?: (string) | undefined;
+  /** Where the front edge starts, under the first column, across the drawing, from 0 at its inline start to 1: 0 in the chart's own drawing, and wherever a renderer draws it. The component writes it on the footer, and a stylesheet that stands the `start` label there reads it. */
+  "--spatial-heatmap-start-x"?: (string) | undefined;
+  /** How far down the drawing the front edge starts, under the first column, as a share of the drawing's width. The component writes it on the footer, and a stylesheet that stands the `start` label there reads it. */
+  "--spatial-heatmap-start-y"?: (string) | undefined;
+  /** How high a face of the surface stands between the lowest reading and the highest, from 0 to 1: its corners' average. The component writes it on each face, and the stylesheet that colors the face along the ramp reads it. */
+  "--spatial-surface-chart-level"?: (string) | undefined;
+  /** How far a face of the surface turns from the light, as a share of lightness to take from its color, from 0 facing it to about 0.3. The component writes it on each face, and the stylesheet that shades the face reads it. */
+  "--spatial-surface-chart-shade"?: (string) | undefined;
   /** Where a nested splitter crosses this one, as a percentage. */
   "--splitter-corner-at"?: (string) | undefined;
   /** Where the divider sits, as a percentage of the box. */
@@ -19919,12 +20199,6 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessInputVueProps,
     HelixHeadlessInputVueEvents
   >;
-  /** The same strip as 'Heatmap', seen from above at an angle. Each reading is a prism: its top face takes the cell's tone, and its height repeats the value, measured from zero against the highest reading in the table. 'rows="7"' makes a contribution graph, with each week a column running down to the right.  **The height says what the tone says.** Read the exact value from the tooltip or the table, and compare readings by tone. A tall reading at the front can hide a short one behind it, so the newest column stands at the front, where nothing covers it.  **Everything else is 'Heatmap'.** The table named by 'for', the tones and thresholds, the keys, the tooltip, the overview, 'selection-mode', and the events all work as they do there. The class extends the headless heatmap, and its own entry point carries the drawing, so a page using only 'Heatmap' loads none of it.  **'flat' lays every prism down** at no height, which leaves the tones on a plane at the same angle.  **'gap' and 'min-cell' set the smallest cell.** The drawing scales as a whole, so a wider box draws larger cells and the gap grows with them. A box too narrow for every column at 'min-cell' draws the newest that fit.  **The drawing is SVG and holds still.** It scales with its box through its 'viewBox', needs no WebGL, and has no motion to pause.  **Keyboard.** The keys are 'Heatmap''s. Down moves to the next reading in a column, drawn down to the left, and Right to the same reading in the next column, drawn down to the right.  | Key | What it does | |---|---| | Tab | Moves focus to the strip and shows the first cell. | | Down, Up | Moves to the next or the previous cell. | | 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 | 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. | */
-  "helix-headless-isometric-heatmap": DefineCustomElement<
-    HelixHeadlessIsometricHeatmap,
-    HelixHeadlessIsometricHeatmapVueProps,
-    HelixHeadlessIsometricHeatmapVueEvents
-  >;
   /** Renders a '<kbd>' element.  Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus".  'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows.  The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing.  **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added.  A chord is drawn with the platform's modifiers first, in its order, so one 'keys' value is right everywhere: 'mod+shift+p' is '⇧⌘P' on an Apple keyboard and 'Ctrl+Shift+P' elsewhere. Where it is drawn in glyphs, it is read in words, such as 'Shift Command P'.  'caps' draws a chord as a key per key: each is a 'key' part and the '+' between two a 'separator' part, so a sheet can draw a cap for each. 'key-labels' renames any key, on every platform, such as 'key-labels='{"mod":"Command"}''. On an Apple keyboard a word joins the next key with a hyphen, as in 'Command-K'.  **'activate' makes the shortcut work the control 'for' names**, with no script: 'activate="focus"' moves focus to it, as '/' does to a search field, and 'activate="click"' presses it. It acts once 'helix-shortcut' has gone out and no listener canceled it, and only where 'within' listens. */
   "helix-headless-kbd": DefineCustomElement<
     HelixHeadlessKbd,
@@ -20243,6 +20517,24 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSparklineVueProps,
     HelixHeadlessSparklineVueEvents
   >;
+  /** The same strip as 'Heatmap', seen from above at an angle. Each reading is a prism: its top face takes the cell's tone, and its height repeats the value, measured from zero against the highest reading in the table. 'rows="7"' makes a contribution graph, with each week a column running down to the right.  **The height says what the tone says.** Read the exact value from the tooltip or the table, and compare readings by tone. A tall reading at the front can hide a short one behind it, so the newest column stands at the front, where nothing covers it.  **Everything else is 'Heatmap'.** The table named by 'for', the tones and thresholds, the keys, the tooltip, the overview, 'selection-mode', and the events all work as they do there. The class extends the headless heatmap, and its own entry point carries the drawing, so a page using only 'Heatmap' loads none of it.  **It was 'helix-isometric-heatmap' until 0.189.0**, and 'helix-headless-isometric-heatmap' in the headless tier. The old tags are gone, and so are the '--isometric-heatmap-*' hooks, which are '--spatial-heatmap-*', and the words key, which is 'helix-spatial-heatmap'. The two shade hooks now take a step of lightness, such as '0.07', where they took a percentage mixed toward black. Every attribute, part, and event kept its name.  **'flat' lays every prism down** at no height, which leaves the tones on a plane at the same angle.  **The prisms stand on a slab**, the 'base', which reaches a little past the grid, so the relief reads as one object. The 'start' and 'end' slots name the two ends of the front edge, which is the strip's first and last column: the component writes where those corners are on the 'footer', and a stylesheet stands each label at its corner. A renderer tells the chart where it draws those corners, so the labels stand at them there too, and follow them as the view turns.  **'gap' and 'min-cell' set the smallest cell.** The drawing scales as a whole, so a wider box draws larger cells and the gap grows with them. A box too narrow for every column at 'min-cell' draws the newest that fit.  **The drawing is SVG and holds still.** It scales with its box through its 'viewBox', needs no WebGL, and has no motion to pause.  **A renderer can draw it in 3D instead.** Put a box for it in the 'renderer' slot, and 'connectSpatialHeatmap' from '@fusion.dev/helix-plot' draws the prisms in it with three.js, lit, in the same tones, in a view that drags round and zooms. The chart publishes its readings in 'field', and its own drawing stays under the renderer's, unseen, where a screen reader and the keys still reach it. Shift with an arrow turns the view, except under 'selection-mode="multiple"', where it selects.  **Keyboard.** The keys are 'Heatmap''s. Down moves to the next reading in a column, drawn down to the left, and Right to the same reading in the next column, drawn down to the right.  | Key | What it does | |---|---| | Tab | Moves focus to the strip and shows the first cell. | | Down, Up | Moves to the next or the previous cell. | | 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 | 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"'. | | Shift with an arrow | Turns a renderer's view, where one is connected and 'selection-mode' is not 'multiple'. | | Escape | Puts the cell's tooltip away. | */
+  "helix-headless-spatial-heatmap": DefineCustomElement<
+    HelixHeadlessSpatialHeatmap,
+    HelixHeadlessSpatialHeatmapVueProps,
+    HelixHeadlessSpatialHeatmapVueEvents
+  >;
+  /** A 3D scatter chart shows how three measures relate. The table's first three numeric columns are measured across, up, and in depth, and each row is one point. 'group-by' names a column of text, such as a team or a cluster, and each group is drawn in its own color.  **Helix draws the frame, and a renderer draws the points in 3D.** Put a box for the renderer inside the chart, and 'connectSpatialScatterChart' from '@fusion.dev/helix-plot' draws the points in it with three.js and keeps it in step with the chart. Until a renderer has drawn, and where none is connected, the chart draws the points in 3D itself, in SVG, from the same place the renderer's camera starts: a still picture the server, a print, and a page without WebGL all show, which Shift with an arrow turns.  **The table is the reading.** Every number is in it, and screen readers read it. The 'summary' part names the three measures and the number of points, and describes the plot.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from point to point in the table's order, Home and End go to the first and the last, and the up and down arrows move among the measures the readout says first. The 'live' part says the point's row in words, and the renderer marks it. Shift with an arrow turns the view, and Escape lets the point go.  **A reading shows its row in a tooltip**, as on every chart: the point a mouse or a pen rests on in the drawing, the point tapped, or the one the keys move to, once a renderer has drawn.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, by pointer or key, and 'helix-reading-press' a point clicked, tapped, or pressed with Enter or Space, each with the row of the table in 'index'.  **Keyboard.** The plot is one tab stop once it has points.  | Key | What it does | |---|---| | Tab | Moves focus to the plot. | | Right, Left | Moves to the next or the previous point, in the table's order. | | Up, Down | Moves among the point's measures, which the readout says first. | | Home, End | Moves to the first or the last point. | | Shift with an arrow | Turns the view across, or tilts it up and down. | | Enter, Space | Presses the point, which sends 'helix-reading-press'. | | Escape | Lets the point go. | */
+  "helix-headless-spatial-scatter-chart": DefineCustomElement<
+    HelixHeadlessSpatialScatterChart,
+    HelixHeadlessSpatialScatterChartVueProps,
+    HelixHeadlessSpatialScatterChartVueEvents
+  >;
+  /** A 3D surface chart shows how one measure varies over two others, such as load by hour and by day. Each row of the table is one reading: **the first numeric column is across, the second is in depth, and the third is the height.** The readings make a grid from every distinct place across and in depth, and a place with no reading is left open.  **Helix draws the frame, and a renderer draws the surface in 3D.** Put a box for the renderer inside the chart, and 'connectSpatialSurfaceChart' from '@fusion.dev/helix-plot' draws the surface in it with three.js, shaded from low to high in the theme's colors. Until a renderer has drawn, and where none is connected, the chart draws the surface in 3D itself, in SVG, from the same place the renderer's camera starts: a still picture the server, a print, and a page without WebGL all show, which Shift with an arrow turns.  **The table is the reading.** Every number is in it, and screen readers read it. The 'summary' part names the measures, the number of readings, and the range of heights, and describes the plot.  **The plot is read by key, across and in depth.** It takes focus, named by 'label' or the caption. The left and right arrows move across, the down and up arrows move in depth, forward and back, and Home and End go to the first and the last place. The 'live' part says the reading at the place in words, and the renderer marks it. Shift with an arrow turns the view, and Escape lets the place go.  **A reading shows its row in a tooltip**, as on every chart: the place a mouse or a pen rests on in the drawing, the place tapped, or the one the keys move to, once a renderer has drawn. A place with no reading shows none.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, and 'helix-reading-press' a place clicked or pressed with Enter or Space, each with the row of the table in 'index', or '-1' for a place with no reading.  **Keyboard.** The plot is one tab stop once it has readings.  | Key | What it does | |---|---| | Tab | Moves focus to the plot. | | Right, Left | Moves across to the next or the previous place. | | Down, Up | Moves in depth to the next or the previous place. | | Home, End | Moves to the first or the last place. | | Shift with an arrow | Turns the view across, or tilts it up and down. | | Enter, Space | Presses the place, which sends 'helix-reading-press'. | | Escape | Lets the place go. | */
+  "helix-headless-spatial-surface-chart": DefineCustomElement<
+    HelixHeadlessSpatialSurfaceChart,
+    HelixHeadlessSpatialSurfaceChartVueProps,
+    HelixHeadlessSpatialSurfaceChartVueEvents
+  >;
   /** A 'group' of the dial's menu, named by its label, as React Aria's menu sections and Menu's groups are: a reader hears the name on entering the set, and the arrow keys walk through every group's actions in order, from the last action of one group to the first of the next.  Put actions straight into the group, and the group straight into the dial. Anything else slotted here is drawn and is not an action. */
   "helix-headless-speed-dial-group": DefineCustomElement<
     HelixHeadlessSpeedDialGroup,