@fusion.dev/helix 0.188.0 → 0.189.0

package/types/vue.d.ts

@@ -59,7 +59,6 @@ import type {
   HelixIcon,
   HelixImage,
   HelixInput,
-  HelixIsometricHeatmap,
   HelixKbd,
   HelixLegend,
   HelixLightboxItem,
@@ -120,6 +119,9 @@ import type {
   HelixSkipLink,
   HelixSlider,
   HelixSparkline,
+  HelixSpatialHeatmap,
+  HelixSpatialScatterChart,
+  HelixSpatialSurfaceChart,
   HelixSpeedDialGroup,
   HelixSpeedDialItem,
   HelixSpeedDial,
@@ -245,6 +247,8 @@ import type {
   HelixEditEvent,
   HelixPanelResizeEvent,
   HelixSplitEvent,
+  HelixPlotChangeEvent,
+  HelixPlotTurnEvent,
   HelixBeforeCollapseEvent,
   HelixBeforeResizeEvent,
   HelixCollapseEvent,
@@ -10148,253 +10152,6 @@ export type HelixInputVueEvents = {
   input: HelixInputElementEvent;
 };
 
-/** `HelixIsometricHeatmap` component event */
-export type HelixIsometricHeatmapElementEvent<E = Event> = TypedEvent<
-  HelixIsometricHeatmap,
-  E
->;
-/** `helix-before-change` event type */
-export type HelixIsometricHeatmapHelixBeforeChangeElementEvent =
-  HelixIsometricHeatmapElementEvent<HelixBeforeChangeEvent>;
-/** `helix-reading-change` event type */
-export type HelixIsometricHeatmapHelixReadingChangeElementEvent =
-  HelixIsometricHeatmapElementEvent<HelixReadingChangeEvent>;
-/** `helix-reading-press` event type */
-export type HelixIsometricHeatmapHelixReadingPressElementEvent =
-  HelixIsometricHeatmapElementEvent<HelixReadingPressEvent>;
-/** `helix-resize` event type */
-export type HelixIsometricHeatmapHelixResizeElementEvent =
-  HelixIsometricHeatmapElementEvent<HelixResizeEvent>;
-
-export type HelixIsometricHeatmapVueProps = {
-  /** Draws every prism at no height, so the tones lie on a plane. */
-  flat?: (HelixIsometricHeatmap["flat"]) | undefined;
-  /** How tall the highest reading stands, in cells. Every other reading stands
-at its share of it. */
-  relief?: (HelixIsometricHeatmap["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"?: (HelixIsometricHeatmap["emptyText"]) | undefined;
-  /** The words shown in place of the drawing when the table has no readings,
-and the fallback of the `empty` slot. */
-  emptyText?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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"?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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"?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["positionLabel"]) | undefined;
-  /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
-`overview-label`. */
-  "busiest-label"?: (HelixIsometricHeatmap["busiestLabel"]) | undefined;
-  /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
-`overview-label`. */
-  busiestLabel?: (HelixIsometricHeatmap["busiestLabel"]) | undefined;
-  /** Space between cells, in CSS pixels. It is a number for the same reason
-`min-cell` is. */
-  gap?: (HelixIsometricHeatmap["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"?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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"?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["rows"]) | undefined;
-  /** What the readout added for a selected cell, under `selection-mode`. */
-  "selected-label"?: (HelixIsometricHeatmap["selectedLabel"]) | undefined;
-  /** What the readout added for a selected cell, under `selection-mode`. */
-  selectedLabel?: (HelixIsometricHeatmap["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"?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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"?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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"?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["selectionShape"]) | undefined;
-  /** The strip's name where the chart has none: no `aria-label`, `label`, or
-table caption. */
-  "strip-label"?: (HelixIsometricHeatmap["stripLabel"]) | undefined;
-  /** The strip's name where the chart has none: no `aria-label`, `label`, or
-table caption. */
-  stripLabel?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["tones"]) | undefined;
-  /** The name the `overview` gives the total of the readings drawn,
-`{totalLabel}` in `overview-label`. */
-  "total-label"?: (HelixIsometricHeatmap["totalLabel"]) | undefined;
-  /** The name the `overview` gives the total of the readings drawn,
-`{totalLabel}` in `overview-label`. */
-  totalLabel?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["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?: (HelixIsometricHeatmap["data"]) | undefined;
-};
-
-export type HelixIsometricHeatmapVueEvents = {
-  /** Fired once a press or a key has changed which cells are selected. */
-  change: HelixIsometricHeatmapElementEvent;
-  /** Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable. */
-  "helix-before-change": HelixIsometricHeatmapHelixBeforeChangeElementEvent;
-  /** 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": HelixIsometricHeatmapHelixReadingChangeElementEvent;
-  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
-  "helix-reading-press": HelixIsometricHeatmapHelixReadingPressElementEvent;
-  /** Fired when the number of cells drawn changes, with the new number. */
-  "helix-resize": HelixIsometricHeatmapHelixResizeElementEvent;
-};
-
 /** `HelixKbd` component event */
 export type HelixKbdElementEvent<E = Event> = TypedEvent<HelixKbd, E>;
 /** `helix-shortcut` event type */
@@ -16897,146 +16654,659 @@ chart is drawn over rather than a guess at it. */
   terminus?: (HelixSparkline["terminus"]) | undefined;
   /** How thick the line is drawn.
 
-Absent is the weight a sparkline is usually drawn at. `thin` suits one set
-in a table row among many; `thick` suits one standing on its own, where a
-hairline reads as an accident.
+Absent is the weight a sparkline is usually drawn at. `thin` suits one set
+in a table row among many; `thick` suits one standing on its own, where a
+hairline reads as an accident.
+
+Three steps rather than a number, because `--sparkline-width` is already
+the number and an attribute earns its place by being the thing a consumer
+reaches for without reading the stylesheet. The hook stays for anything the
+three do not cover. */
+  weight?: (HelixSparkline["weight"]) | undefined;
+  /** How the line is drawn from one reading to the next.
+
+**`smooth` is the resting curve.** A straight segment asserts nothing about
+the values between two readings and a curve invents them, which is why
+`straight` exists. What settles the default the other way is that the
+invention is bounded: the interpolation is monotone cubic, so it never
+leaves the band the data sets and never introduces a peak or a trough the
+series does not have. Within that bound the smoothed line is the easier one
+to follow across a long series, which is what the drawing is for. `straight`
+becomes the claim a consumer makes deliberately rather than the one they get
+by saying nothing.
+
+**The property stays optional and the default lives in the render.** A
+reflecting property with a default writes its attribute onto every host
+anybody renders, including the ones nobody configured, which the SSR specs
+assert against. So the resting state is still the attribute's absence, and
+`curve ?? 'smooth'` is what reads it.
+
+`step` claims the opposite of both, that a reading holds until the next.
+Bars ignore it, having no between to interpolate.
+
+**`AreaChart` rests at `straight` and is not disagreeing.** A line claims a
+position and a stacked band claims an amount: a curve fitted through one
+sum can pass under the curve fitted through the sum beneath it, so a
+smoothed stack can draw a part as less than nothing. There is no such edge
+here, which is what lets a line take the reading aid. */
+  curve?: (HelixSparkline["curve"]) | undefined;
+  /** The id of a table to read the readings from, when a table holds the data.
+
+The first column of numbers is the series drawn. This wins over `values`,
+because a table is the readable representation and a list of numbers in an
+attribute is not.
+
+**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?: (HelixSparkline["for"]) | undefined;
+  /** A sentence that describes what the line shows.
+
+"Sessions rose from 1,240 to 1,318 and fell to 1,102 over fourteen days" is
+the accessible representation of a sparkline, and a list of the fourteen
+numbers is not. Absent, the drawing is hidden from a screen reader rather
+than announced without a name. */
+  label?: (HelixSparkline["label"]) | undefined;
+  /** The locale the words, the readout's numbers and positions are in, such
+as `de` for `1.240`.
+
+Absent reads the nearest `lang`, then the runtime's own. A table's cells
+are shown as the table writes them, whatever this says. */
+  locale?: (HelixSparkline["locale"]) | undefined;
+  /** Which readings take a mark of their own: `high`, `low`, or both,
+separated by spaces.
+
+Absent marks none, and the drawing is what it was. Each mark is a part,
+placed at its reading, for a stylesheet to draw. */
+  marks?: (HelixSparkline["marks"]) | undefined;
+  /** What the readings come to, said after the name: `{first}` and `{last}`
+for the first and the last reading, `{high}` and `{low}` for the highest
+and the lowest, each written as the readout writes it.
+
+Set it to the words of the page's language, or to nothing to say no
+more than the name. Said only where the sparkline is named. */
+  "overview-label"?: (HelixSparkline["overviewLabel"]) | undefined;
+  /** What the readings come to, said after the name: `{first}` and `{last}`
+for the first and the last reading, `{high}` and `{low}` for the highest
+and the lowest, each written as the readout writes it.
+
+Set it to the words of the page's language, or to nothing to say no
+more than the name. Said only where the sparkline is named. */
+  overviewLabel?: (HelixSparkline["overviewLabel"]) | undefined;
+  /** What the readings are drawn as.
+
+Absent is `area`, a line with the region beneath it washed. `line` is the
+bare stroke, and `bar` is a column per reading.
+
+**A bar plot measures from zero and the other two measure from the data's
+own range**, which is the one way the plots are not interchangeable. A line
+says where the readings sit relative to each other, so a scale over their
+extent uses the whole box and claims nothing about absolute size. A bar's
+length *is* the value, so any baseline but zero makes the lengths
+proportional to nothing.
+
+**Which is a reason to prefer a line for readings in a narrow band far from
+zero.** Seven values between 1,102 and 1,408 drawn as columns from zero are
+seven columns of nearly the same height, and that is the true picture: they
+*are* nearly the same. The same readings as a line fill the box and show
+the movement, because a line is only ever claiming a shape.
+
+**Absent is `area`**, which is the departure from the rule that a resting
+arrangement is the plainest thing. At the size a sparkline is actually
+drawn, a hairline in a wide box is mostly box: the wash under it is what
+gives the shape a body and lets a reader see it at a glance rather than
+hunting for it, which is the entire job. `line` is the bare stroke for
+anywhere the fill would be noise, several of them in one box for instance.
+
+This tier rather than the one above: a plot type is geometry and geometry
+is markup, the same reason `curve` lives here. */
+  plot?: (HelixSparkline["plot"]) | 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. */
+  "position-label"?: (HelixSparkline["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. */
+  positionLabel?: (HelixSparkline["positionLabel"]) | undefined;
+  /** Two values a band is drawn between, behind the line, separated by a
+space: `range="60 100"` marks a normal range.
+
+The scale stretches to hold the band where the readings do not reach it.
+Absent draws none. */
+  range?: (HelixSparkline["range"]) | undefined;
+  /** The numbers, separated by whitespace or by commas.
+
+An array assigned to the property works too, which is what React 19 does
+with `values={[1240, 1318]}`. The attribute is the form to prefer, because
+a string is what survives React's hydration where an array property does
+not. */
+  values?: (HelixSparkline["values"]) | undefined;
+};
+
+export type HelixSparklineVueEvents = {
+  /** The reading shown moved, or was put away: `index` is the reading, or `-1` for none, with its row's `label` from a table and the `pointerType` that moved it. */
+  "helix-reading-change": HelixSparklineHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixSparklineHelixReadingPressElementEvent;
+};
+
+/** `HelixSpatialHeatmap` component event */
+export type HelixSpatialHeatmapElementEvent<E = Event> = TypedEvent<
+  HelixSpatialHeatmap,
+  E
+>;
+/** `helix-plot-change` event type */
+export type HelixSpatialHeatmapHelixPlotChangeElementEvent =
+  HelixSpatialHeatmapElementEvent<HelixPlotChangeEvent>;
+/** `helix-plot-turn` event type */
+export type HelixSpatialHeatmapHelixPlotTurnElementEvent =
+  HelixSpatialHeatmapElementEvent<HelixPlotTurnEvent>;
+/** `helix-before-change` event type */
+export type HelixSpatialHeatmapHelixBeforeChangeElementEvent =
+  HelixSpatialHeatmapElementEvent<HelixBeforeChangeEvent>;
+/** `helix-reading-change` event type */
+export type HelixSpatialHeatmapHelixReadingChangeElementEvent =
+  HelixSpatialHeatmapElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixSpatialHeatmapHelixReadingPressElementEvent =
+  HelixSpatialHeatmapElementEvent<HelixReadingPressEvent>;
+/** `helix-resize` event type */
+export type HelixSpatialHeatmapHelixResizeElementEvent =
+  HelixSpatialHeatmapElementEvent<HelixResizeEvent>;
+
+export type HelixSpatialHeatmapVueProps = {
+  /** Draws every prism at no height, so the tones lie on a plane. */
+  flat?: (HelixSpatialHeatmap["flat"]) | undefined;
+  /** How tall the highest reading stands, in cells. Every other reading stands
+at its share of it. */
+  relief?: (HelixSpatialHeatmap["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"?: (HelixSpatialHeatmap["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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"?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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"?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["positionLabel"]) | undefined;
+  /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
+`overview-label`. */
+  "busiest-label"?: (HelixSpatialHeatmap["busiestLabel"]) | undefined;
+  /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
+`overview-label`. */
+  busiestLabel?: (HelixSpatialHeatmap["busiestLabel"]) | undefined;
+  /** Space between cells, in CSS pixels. It is a number for the same reason
+`min-cell` is. */
+  gap?: (HelixSpatialHeatmap["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"?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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"?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["rows"]) | undefined;
+  /** What the readout added for a selected cell, under `selection-mode`. */
+  "selected-label"?: (HelixSpatialHeatmap["selectedLabel"]) | undefined;
+  /** What the readout added for a selected cell, under `selection-mode`. */
+  selectedLabel?: (HelixSpatialHeatmap["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"?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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"?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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"?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["selectionShape"]) | undefined;
+  /** The strip's name where the chart has none: no `aria-label`, `label`, or
+table caption. */
+  "strip-label"?: (HelixSpatialHeatmap["stripLabel"]) | undefined;
+  /** The strip's name where the chart has none: no `aria-label`, `label`, or
+table caption. */
+  stripLabel?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["tones"]) | undefined;
+  /** The name the `overview` gives the total of the readings drawn,
+`{totalLabel}` in `overview-label`. */
+  "total-label"?: (HelixSpatialHeatmap["totalLabel"]) | undefined;
+  /** The name the `overview` gives the total of the readings drawn,
+`{totalLabel}` in `overview-label`. */
+  totalLabel?: (HelixSpatialHeatmap["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?: (HelixSpatialHeatmap["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`.
 
-Three steps rather than a number, because `--sparkline-width` is already
-the number and an attribute earns its place by being the thing a consumer
-reaches for without reading the stylesheet. The hook stays for anything the
-three do not cover. */
-  weight?: (HelixSparkline["weight"]) | undefined;
-  /** How the line is drawn from one reading to the next.
+**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?: (HelixSpatialHeatmap["data"]) | undefined;
+};
 
-**`smooth` is the resting curve.** A straight segment asserts nothing about
-the values between two readings and a curve invents them, which is why
-`straight` exists. What settles the default the other way is that the
-invention is bounded: the interpolation is monotone cubic, so it never
-leaves the band the data sets and never introduces a peak or a trough the
-series does not have. Within that bound the smoothed line is the easier one
-to follow across a long series, which is what the drawing is for. `straight`
-becomes the claim a consumer makes deliberately rather than the one they get
-by saying nothing.
+export type HelixSpatialHeatmapVueEvents = {
+  /** The readings drawn or the reading the keys rest on changed, which a renderer is told. It stays on the chart. */
+  "helix-plot-change": HelixSpatialHeatmapHelixPlotChangeElementEvent;
+  /** Shift with an arrow asked a renderer's view to turn, by a step across or up. */
+  "helix-plot-turn": HelixSpatialHeatmapHelixPlotTurnElementEvent;
+  /** Fired once a press or a key has changed which cells are selected. */
+  change: HelixSpatialHeatmapElementEvent;
+  /** Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable. */
+  "helix-before-change": HelixSpatialHeatmapHelixBeforeChangeElementEvent;
+  /** 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": HelixSpatialHeatmapHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixSpatialHeatmapHelixReadingPressElementEvent;
+  /** Fired when the number of cells drawn changes, with the new number. */
+  "helix-resize": HelixSpatialHeatmapHelixResizeElementEvent;
+};
 
-**The property stays optional and the default lives in the render.** A
-reflecting property with a default writes its attribute onto every host
-anybody renders, including the ones nobody configured, which the SSR specs
-assert against. So the resting state is still the attribute's absence, and
-`curve ?? 'smooth'` is what reads it.
+/** `HelixSpatialScatterChart` component event */
+export type HelixSpatialScatterChartElementEvent<E = Event> = TypedEvent<
+  HelixSpatialScatterChart,
+  E
+>;
+/** `helix-plot-change` event type */
+export type HelixSpatialScatterChartHelixPlotChangeElementEvent =
+  HelixSpatialScatterChartElementEvent<HelixPlotChangeEvent>;
+/** `helix-plot-turn` event type */
+export type HelixSpatialScatterChartHelixPlotTurnElementEvent =
+  HelixSpatialScatterChartElementEvent<HelixPlotTurnEvent>;
+/** `helix-reading-change` event type */
+export type HelixSpatialScatterChartHelixReadingChangeElementEvent =
+  HelixSpatialScatterChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixSpatialScatterChartHelixReadingPressElementEvent =
+  HelixSpatialScatterChartElementEvent<HelixReadingPressEvent>;
 
-`step` claims the opposite of both, that a reading holds until the next.
-Bars ignore it, having no between to interpolate.
+export type HelixSpatialScatterChartVueProps = {
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixSpatialScatterChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixSpatialScatterChart["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.
 
-**`AreaChart` rests at `straight` and is not disagreeing.** A line claims a
-position and a stacked band claims an amount: a curve fitted through one
-sum can pass under the curve fitted through the sum beneath it, so a
-smoothed stack can draw a part as less than nothing. There is no such edge
-here, which is what lets a line take the reading aid. */
-  curve?: (HelixSparkline["curve"]) | undefined;
-  /** The id of a table to read the readings from, when a table holds the data.
+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?: (HelixSpatialScatterChart["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"?: (HelixSpatialScatterChart["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?: (HelixSpatialScatterChart["loadingText"]) | undefined;
+  /** The id of the table to read.
 
-The first column of numbers is the series drawn. This wins over `values`,
-because a table is the readable representation and a list of numbers in an
-attribute is not.
+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?: (HelixSparkline["for"]) | undefined;
-  /** A sentence that describes what the line shows.
+  for?: (HelixSpatialScatterChart["for"]) | undefined;
+  /** The chart's name, which starts the chart's text summary.
 
-"Sessions rose from 1,240 to 1,318 and fell to 1,102 over fourteen days" is
-the accessible representation of a sparkline, and a list of the fourteen
-numbers is not. Absent, the drawing is hidden from a screen reader rather
-than announced without a name. */
-  label?: (HelixSparkline["label"]) | undefined;
-  /** The locale the words, the readout's numbers and positions are in, such
-as `de` for `1.240`.
+Absent falls back to the table's own caption, which is usually the right
+words and is already written. */
+  label?: (HelixSpatialScatterChart["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. A table's cells
-are shown as the table writes them, whatever this says. */
-  locale?: (HelixSparkline["locale"]) | undefined;
-  /** Which readings take a mark of their own: `high`, `low`, or both,
-separated by spaces.
+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?: (HelixSpatialScatterChart["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`.
 
-Absent marks none, and the drawing is what it was. Each mark is a part,
-placed at its reading, for a stylesheet to draw. */
-  marks?: (HelixSparkline["marks"]) | undefined;
-  /** What the readings come to, said after the name: `{first}` and `{last}`
-for the first and the last reading, `{high}` and `{low}` for the highest
-and the lowest, each written as the readout writes it.
+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"?: (HelixSpatialScatterChart["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, or to nothing to say no
-more than the name. Said only where the sparkline is named. */
-  "overview-label"?: (HelixSparkline["overviewLabel"]) | undefined;
-  /** What the readings come to, said after the name: `{first}` and `{last}`
-for the first and the last reading, `{high}` and `{low}` for the highest
-and the lowest, each written as the readout writes it.
+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?: (HelixSpatialScatterChart["positionLabel"]) | undefined;
+  /** The column of text that puts each point in a group, by its heading. None by default. */
+  "group-by"?: (HelixSpatialScatterChart["groupBy"]) | undefined;
+  /** The column of text that puts each point in a group, by its heading. None by default. */
+  groupBy?: (HelixSpatialScatterChart["groupBy"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  "plot-label"?: (HelixSpatialScatterChart["plotLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  plotLabel?: (HelixSpatialScatterChart["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"?: (HelixSpatialScatterChart["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?: (HelixSpatialScatterChart["summaryLabel"]) | 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.
 
-Set it to the words of the page's language, or to nothing to say no
-more than the name. Said only where the sparkline is named. */
-  overviewLabel?: (HelixSparkline["overviewLabel"]) | undefined;
-  /** What the readings are drawn as.
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
 
-Absent is `area`, a line with the region beneath it washed. `line` is the
-bare stroke, and `bar` is a column per reading.
+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 bar plot measures from zero and the other two measure from the data's
-own range**, which is the one way the plots are not interchangeable. A line
-says where the readings sit relative to each other, so a scale over their
-extent uses the whole box and claims nothing about absolute size. A bar's
-length *is* the value, so any baseline but zero makes the lengths
-proportional to nothing.
+**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?: (HelixSpatialScatterChart["data"]) | undefined;
+};
 
-**Which is a reason to prefer a line for readings in a narrow band far from
-zero.** Seven values between 1,102 and 1,408 drawn as columns from zero are
-seven columns of nearly the same height, and that is the true picture: they
-*are* nearly the same. The same readings as a line fill the box and show
-the movement, because a line is only ever claiming a shape.
+export type HelixSpatialScatterChartVueEvents = {
+  /** The points or the point the keys rest on changed, which the renderer is told. It stays on the chart. */
+  "helix-plot-change": HelixSpatialScatterChartHelixPlotChangeElementEvent;
+  /** Shift with an arrow asked the view to turn, by a step across or up. */
+  "helix-plot-turn": HelixSpatialScatterChartHelixPlotTurnElementEvent;
+  /** 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": HelixSpatialScatterChartHelixReadingChangeElementEvent;
+  /** A point was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixSpatialScatterChartHelixReadingPressElementEvent;
+};
 
-**Absent is `area`**, which is the departure from the rule that a resting
-arrangement is the plainest thing. At the size a sparkline is actually
-drawn, a hairline in a wide box is mostly box: the wash under it is what
-gives the shape a body and lets a reader see it at a glance rather than
-hunting for it, which is the entire job. `line` is the bare stroke for
-anywhere the fill would be noise, several of them in one box for instance.
+/** `HelixSpatialSurfaceChart` component event */
+export type HelixSpatialSurfaceChartElementEvent<E = Event> = TypedEvent<
+  HelixSpatialSurfaceChart,
+  E
+>;
+/** `helix-plot-change` event type */
+export type HelixSpatialSurfaceChartHelixPlotChangeElementEvent =
+  HelixSpatialSurfaceChartElementEvent<HelixPlotChangeEvent>;
+/** `helix-plot-turn` event type */
+export type HelixSpatialSurfaceChartHelixPlotTurnElementEvent =
+  HelixSpatialSurfaceChartElementEvent<HelixPlotTurnEvent>;
+/** `helix-reading-change` event type */
+export type HelixSpatialSurfaceChartHelixReadingChangeElementEvent =
+  HelixSpatialSurfaceChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixSpatialSurfaceChartHelixReadingPressElementEvent =
+  HelixSpatialSurfaceChartElementEvent<HelixReadingPressEvent>;
 
-This tier rather than the one above: a plot type is geometry and geometry
-is markup, the same reason `curve` lives here. */
-  plot?: (HelixSparkline["plot"]) | undefined;
+export type HelixSpatialSurfaceChartVueProps = {
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixSpatialSurfaceChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixSpatialSurfaceChart["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?: (HelixSpatialSurfaceChart["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"?: (HelixSpatialSurfaceChart["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?: (HelixSpatialSurfaceChart["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?: (HelixSpatialSurfaceChart["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?: (HelixSpatialSurfaceChart["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?: (HelixSpatialSurfaceChart["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. */
-  "position-label"?: (HelixSparkline["positionLabel"]) | undefined;
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixSpatialSurfaceChart["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. */
-  positionLabel?: (HelixSparkline["positionLabel"]) | undefined;
-  /** Two values a band is drawn between, behind the line, separated by a
-space: `range="60 100"` marks a normal range.
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixSpatialSurfaceChart["positionLabel"]) | 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. */
+  "open-label"?: (HelixSpatialSurfaceChart["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?: (HelixSpatialSurfaceChart["openLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  "plot-label"?: (HelixSpatialSurfaceChart["plotLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  plotLabel?: (HelixSpatialSurfaceChart["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"?: (HelixSpatialSurfaceChart["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?: (HelixSpatialSurfaceChart["summaryLabel"]) | 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.
 
-The scale stretches to hold the band where the readings do not reach it.
-Absent draws none. */
-  range?: (HelixSparkline["range"]) | undefined;
-  /** The numbers, separated by whitespace or by commas.
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
 
-An array assigned to the property works too, which is what React 19 does
-with `values={[1240, 1318]}`. The attribute is the form to prefer, because
-a string is what survives React's hydration where an array property does
-not. */
-  values?: (HelixSparkline["values"]) | undefined;
+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?: (HelixSpatialSurfaceChart["data"]) | undefined;
 };
 
-export type HelixSparklineVueEvents = {
-  /** The reading shown moved, or was put away: `index` is the reading, or `-1` for none, with its row's `label` from a table and the `pointerType` that moved it. */
-  "helix-reading-change": HelixSparklineHelixReadingChangeElementEvent;
-  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
-  "helix-reading-press": HelixSparklineHelixReadingPressElementEvent;
+export type HelixSpatialSurfaceChartVueEvents = {
+  /** The readings or the place the keys rest on changed, which the renderer is told. It stays on the chart. */
+  "helix-plot-change": HelixSpatialSurfaceChartHelixPlotChangeElementEvent;
+  /** Shift with an arrow asked the view to turn, by a step across or up. */
+  "helix-plot-turn": HelixSpatialSurfaceChartHelixPlotTurnElementEvent;
+  /** 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": HelixSpatialSurfaceChartHelixReadingChangeElementEvent;
+  /** A place was clicked or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixSpatialSurfaceChartHelixReadingPressElementEvent;
 };
 
 export type HelixSpeedDialGroupVueProps = {
@@ -23011,16 +23281,6 @@ export type CustomCssProperties = {
   "--input-radius"?: (string) | undefined;
   /** Height of the field. */
   "--input-size"?: (string) | undefined;
-  /** The largest a cell grows, along its edge. The strip is never wider than its box, and draws smaller cells to fit. */
-  "--isometric-heatmap-cell-size"?: (string) | undefined;
-  /** How much darker the left face is than the top, as a percentage mixed toward black. */
-  "--isometric-heatmap-left-shade"?: (string) | undefined;
-  /** How much darker the right face is than the top, as a percentage mixed toward black. */
-  "--isometric-heatmap-right-shade"?: (string) | undefined;
-  /** The color of the dashed edges of a selected prism, under `selection-mode`. By default, white on a dark face and black on a light one. */
-  "--isometric-heatmap-selected-color"?: (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;
   /** The fill of the key. */
   "--kbd-background-color"?: (string) | undefined;
   /** The height of a key, and the least width of one, in `em` of the text around it. */
@@ -23919,6 +24179,38 @@ export type CustomCssProperties = {
   "--sparkline-readout-font-size"?: (string) | undefined;
   /** Thickness of the line, overriding `weight`. */
   "--sparkline-width"?: (string) | undefined;
+  /** The largest a cell grows, along its edge. The strip is never wider than its box, and draws smaller cells to fit. */
+  "--spatial-heatmap-cell-size"?: (string) | undefined;
+  /** How much less light the left face is than the top, as a step of OKLCH lightness from 0 to 1. 0.07 by default. */
+  "--spatial-heatmap-left-shade"?: (string) | undefined;
+  /** How much less light the right face is than the top, as a step of OKLCH lightness from 0 to 1. 0.14 by default. */
+  "--spatial-heatmap-right-shade"?: (string) | undefined;
+  /** The color of the dashed edges of a selected prism, under `selection-mode`. By default, white on a dark face and black on a light one. */
+  "--spatial-heatmap-selected-color"?: (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 tall the plot is. */
+  "--spatial-scatter-chart-block-size"?: (string) | undefined;
+  /** How tall the plot is. */
+  "--spatial-surface-chart-block-size"?: (string) | undefined;
+  /** The color of the highest reading, which the renderer reads too. */
+  "--spatial-surface-chart-high"?: (string) | undefined;
+  /** The color of the lowest reading, which the renderer reads too. */
+  "--spatial-surface-chart-low"?: (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;
   /** Color of the group's name. */
   "--speed-dial-group-label-color"?: (string) | undefined;
   /** Size of the group's name. */
@@ -24885,12 +25177,6 @@ export interface WcToolkitVueGlobalComponents {
     HelixInputVueProps,
     HelixInputVueEvents
   >;
-  /** Each reading is a prism. The top face takes the cell's tone, and the two sides are the same tone, shaded darker, so the whole relief follows your theme's colors.  'tones="1 2 3 4 5"' uses the same five-step ramp as 'Heatmap', so the tone and the height both show the value. Set '--isometric-heatmap-cell-size' to change how large a cell may grow. */
-  "helix-isometric-heatmap": DefineCustomElement<
-    HelixIsometricHeatmap,
-    HelixIsometricHeatmapVueProps,
-    HelixIsometricHeatmapVueEvents
-  >;
   /** Drawn as a physical key, with a hairline border, a sunken fill, and one inset shadow along the bottom edge.  Sized in 'em', so it stays in proportion with the text around it, including in a heading. */
   "helix-kbd": DefineCustomElement<
     HelixKbd,
@@ -25251,6 +25537,24 @@ export interface WcToolkitVueGlobalComponents {
     HelixSparklineVueProps,
     HelixSparklineVueEvents
   >;
+  /** Each reading is a prism. The top face takes the cell's tone, and the two sides are the same tone, shaded darker, so the whole relief follows your theme's colors.  'tones="1 2 3 4 5"' uses the same five-step ramp as 'Heatmap', so the tone and the height both show the value. Set '--spatial-heatmap-cell-size' to change how large a cell may grow. */
+  "helix-spatial-heatmap": DefineCustomElement<
+    HelixSpatialHeatmap,
+    HelixSpatialHeatmapVueProps,
+    HelixSpatialHeatmapVueEvents
+  >;
+  /** The points are drawn in 3D by a renderer the page connects, and as a flat scatter of the first two measures until it has drawn. Each group takes a series color from the theme, as every chart's series does. */
+  "helix-spatial-scatter-chart": DefineCustomElement<
+    HelixSpatialScatterChart,
+    HelixSpatialScatterChartVueProps,
+    HelixSpatialScatterChartVueEvents
+  >;
+  /** The surface is drawn in 3D by a renderer the page connects, and as a flat grid seen from above until it has drawn. Every height is shaded along one ramp from the theme's primary color, quiet where it is low and strong where it is high, so the two drawings agree. */
+  "helix-spatial-surface-chart": DefineCustomElement<
+    HelixSpatialSurfaceChart,
+    HelixSpatialSurfaceChartVueProps,
+    HelixSpatialSurfaceChartVueEvents
+  >;
   /** A column of actions with its name above them, in the small muted words a menu heads its sections with, lined up on the side the trigger is on. The space between two groups is the space between two actions. */
   "helix-speed-dial-group": DefineCustomElement<
     HelixSpeedDialGroup,