@fusion.dev/helix 0.197.1 → 0.199.0

package/types/vue.d.ts

@@ -84,6 +84,7 @@ import type {
   HelixMenu,
   HelixMenuSection,
   HelixMeter,
+  HelixMotionToggle,
   HelixNavigation,
   HelixNotificationGroup,
   HelixNotification,
@@ -119,9 +120,12 @@ import type {
   HelixSkipLink,
   HelixSlider,
   HelixSparkline,
+  HelixSpatialBarChart,
   HelixSpatialHeatmap,
+  HelixSpatialRibbonChart,
   HelixSpatialScatterChart,
   HelixSpatialSurfaceChart,
+  HelixSpatialTreemap,
   HelixSpeedDialGroup,
   HelixSpeedDialItem,
   HelixSpeedDial,
@@ -3083,7 +3087,13 @@ share the row and split it, dots to the start and arrows to the end,
 arrived at by two defaults rather than by a rule about the pair, so moving
 one leaves the other alone. */
   indicatorPlacement?: (HelixCarousel["indicatorPlacement"]) | undefined;
-  /** Whether the carousel advances on its own. */
+  /** Whether the carousel advances on its own.
+
+**Not where the reader asked for less motion**, or where the page has
+paused its motion, through `pauseMotion` or `Motion Toggle`: the carousel
+starts still, and its rotation control starts it. A page that pauses its
+motion later stops the rotation, and one that lets it run again starts it
+again, unless the reader stopped it. */
   autoplay?: (HelixCarousel["autoplay"]) | undefined;
   /** Whether the previous and next controls are shown.
 
@@ -9072,6 +9082,16 @@ the list then holds, written with `count-label`. */
 the drawing, with `{note}` for its name and `{count}` for how many notes
 the list then holds, written with `count-label`. */
   selectionLabel?: (HelixGraph["selectionLabel"]) | undefined;
+  /** What the `settling` part says while a layout runs unseen, where the reader
+asked for less motion or the page paused its motion. */
+  "settling-label"?: (HelixGraph["settlingLabel"]) | undefined;
+  /** What the `settling` part says while a layout runs unseen, where the reader
+asked for less motion or the page paused its motion. */
+  settlingLabel?: (HelixGraph["settlingLabel"]) | undefined;
+  /** What the button that stops a long layout says. */
+  "stop-layout-label"?: (HelixGraph["stopLayoutLabel"]) | undefined;
+  /** What the button that stops a long layout says. */
+  stopLayoutLabel?: (HelixGraph["stopLayoutLabel"]) | undefined;
   /** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
   "two-finger-hint-label"?: (HelixGraph["twoFingerHintLabel"]) | undefined;
   /** The hint shown when one finger swipes over the graph with `gestures="cooperative"`. */
@@ -9246,6 +9266,21 @@ export type HelixHeatmapHelixResizeElementEvent =
   HelixHeatmapElementEvent<HelixResizeEvent>;
 
 export type HelixHeatmapVueProps = {
+  /** How strongly the cells are drawn, as on every chart.
+
+`outlined` is a cell as its edge in its tone over a fill faded toward the
+page, and `subtle` a faint wash of the tone under the same edge. Absent is
+the filled cell, per the rule that a reflected property takes no default,
+and `solid` writes it out.
+
+It composes with `material`: emphasis decides what is drawn, and material
+how much of it comes through. The ring on the cell the keys rest on keeps
+its own ink. */
+  emphasis?: (HelixHeatmap["emphasis"]) | undefined;
+  /** How much of each mark comes through, as on every chart: `glass` admits the
+most of what is behind it, `frosted` less, and absent is opaque. The
+strength is the theme's, scaled by `--helix-material-opacity`. */
+  material?: (HelixHeatmap["material"]) | undefined;
   /** The words shown in place of the drawing when the table has no readings,
 and the fallback of the `empty` slot. */
   "empty-text"?: (HelixHeatmap["emptyText"]) | undefined;
@@ -12795,6 +12830,22 @@ export type HelixMeterVueEvents = {
   "helix-band": HelixMeterHelixBandElementEvent;
 };
 
+/** `HelixMotionToggle` component event */
+export type HelixMotionToggleElementEvent<E = Event> = TypedEvent<
+  HelixMotionToggle,
+  E
+>;
+
+export type HelixMotionToggleVueProps = {
+  /** The button's name, which stays the same whichever way it stands. */
+  label?: (HelixMotionToggle["label"]) | undefined;
+};
+
+export type HelixMotionToggleVueEvents = {
+  /** Fired after a press pauses the page's motion or lets it run. */
+  change: HelixMotionToggleElementEvent;
+};
+
 export type HelixNavigationVueProps = {
   /** Whether the arrow keys move focus between the destinations.
 
@@ -16796,6 +16847,160 @@ export type HelixSparklineVueEvents = {
   "helix-reading-press": HelixSparklineHelixReadingPressElementEvent;
 };
 
+/** `HelixSpatialBarChart` component event */
+export type HelixSpatialBarChartElementEvent<E = Event> = TypedEvent<
+  HelixSpatialBarChart,
+  E
+>;
+/** `helix-plot-change` event type */
+export type HelixSpatialBarChartHelixPlotChangeElementEvent =
+  HelixSpatialBarChartElementEvent<HelixPlotChangeEvent>;
+/** `helix-plot-turn` event type */
+export type HelixSpatialBarChartHelixPlotTurnElementEvent =
+  HelixSpatialBarChartElementEvent<HelixPlotTurnEvent>;
+/** `helix-reading-change` event type */
+export type HelixSpatialBarChartHelixReadingChangeElementEvent =
+  HelixSpatialBarChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixSpatialBarChartHelixReadingPressElementEvent =
+  HelixSpatialBarChartElementEvent<HelixReadingPressEvent>;
+
+export type HelixSpatialBarChartVueProps = {
+  /** How strongly the bars are drawn, as on every chart.
+
+`outlined` is a bar as its edges in its series' color over faces faded
+toward the page, and `subtle` the same edges over a faint wash, which
+shows the bars behind it. Absent is the filled bar, per the rule that a
+reflected property takes no default, and `solid` writes it out. A
+renderer draws the bars the same way.
+
+It composes with `material`: emphasis decides what is drawn, and material
+how much of it comes through. The outline on the bar the keys rest on
+keeps its own ink. */
+  emphasis?: (HelixSpatialBarChart["emphasis"]) | undefined;
+  /** How much of each mark comes through, as on every chart: `glass` admits the
+most of what is behind it, `frosted` less, and absent is opaque. The
+strength is the theme's, scaled by `--helix-material-opacity`. */
+  material?: (HelixSpatialBarChart["material"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixSpatialBarChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixSpatialBarChart["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?: (HelixSpatialBarChart["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"?: (HelixSpatialBarChart["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?: (HelixSpatialBarChart["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?: (HelixSpatialBarChart["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?: (HelixSpatialBarChart["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?: (HelixSpatialBarChart["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"?: (HelixSpatialBarChart["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?: (HelixSpatialBarChart["positionLabel"]) | undefined;
+  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
+alone and fill the plot, as a picture on a product's own page does. The
+table, the summary, the tooltip, and the keys still carry every value,
+and a renderer draws no box either. */
+  "no-box"?: (HelixSpatialBarChart["noBox"]) | undefined;
+  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
+alone and fill the plot, as a picture on a product's own page does. The
+table, the summary, the tooltip, and the keys still carry every value,
+and a renderer draws no box either. */
+  noBox?: (HelixSpatialBarChart["noBox"]) | undefined;
+  /** What the readout says for a place with no value. `{category}` and
+`{series}` name the place. */
+  "open-label"?: (HelixSpatialBarChart["openLabel"]) | undefined;
+  /** What the readout says for a place with no value. `{category}` and
+`{series}` name the place. */
+  openLabel?: (HelixSpatialBarChart["openLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  "plot-label"?: (HelixSpatialBarChart["plotLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  plotLabel?: (HelixSpatialBarChart["plotLabel"]) | undefined;
+  /** The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
+are the number of bars, series, and categories, written in the locale,
+and `{low}` and `{high}` the lowest and the highest value. */
+  "summary-label"?: (HelixSpatialBarChart["summaryLabel"]) | undefined;
+  /** The `summary` part's sentence. `{count}`, `{series}`, and `{categories}`
+are the number of bars, series, and categories, written in the locale,
+and `{low}` and `{high}` the lowest and the highest value. */
+  summaryLabel?: (HelixSpatialBarChart["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.
+
+```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?: (HelixSpatialBarChart["data"]) | undefined;
+};
+
+export type HelixSpatialBarChartVueEvents = {
+  /** The bars or the bar the keys rest on changed, which the renderer is told. It stays on the chart. */
+  "helix-plot-change": HelixSpatialBarChartHelixPlotChangeElementEvent;
+  /** Shift with an arrow asked the view to turn, by a step across or up. */
+  "helix-plot-turn": HelixSpatialBarChartHelixPlotTurnElementEvent;
+  /** 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": HelixSpatialBarChartHelixReadingChangeElementEvent;
+  /** A bar was clicked or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixSpatialBarChartHelixReadingPressElementEvent;
+};
+
 /** `HelixSpatialHeatmap` component event */
 export type HelixSpatialHeatmapElementEvent<E = Event> = TypedEvent<
   HelixSpatialHeatmap,
@@ -16821,6 +17026,22 @@ export type HelixSpatialHeatmapHelixResizeElementEvent =
   HelixSpatialHeatmapElementEvent<HelixResizeEvent>;
 
 export type HelixSpatialHeatmapVueProps = {
+  /** How strongly the prisms are drawn, as on every chart.
+
+`outlined` is a prism as its edges in its tone over faces faded toward the
+page, and `subtle` a faint wash of the tone under the same edges, which
+shows the prisms behind it. Absent is the filled prism, per the rule that
+a reflected property takes no default, and `solid` writes it out. A
+renderer draws the prisms the same way.
+
+It composes with `material`: emphasis decides what is drawn, and material
+how much of it comes through. The ring on the prism the keys rest on keeps
+its own ink. */
+  emphasis?: (HelixSpatialHeatmap["emphasis"]) | undefined;
+  /** How much of each mark comes through, as on every chart: `glass` admits the
+most of what is behind it, `frosted` less, and absent is opaque. The
+strength is the theme's, scaled by `--helix-material-opacity`. */
+  material?: (HelixSpatialHeatmap["material"]) | undefined;
   /** 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
@@ -17053,6 +17274,160 @@ export type HelixSpatialHeatmapVueEvents = {
   "helix-resize": HelixSpatialHeatmapHelixResizeElementEvent;
 };
 
+/** `HelixSpatialRibbonChart` component event */
+export type HelixSpatialRibbonChartElementEvent<E = Event> = TypedEvent<
+  HelixSpatialRibbonChart,
+  E
+>;
+/** `helix-plot-change` event type */
+export type HelixSpatialRibbonChartHelixPlotChangeElementEvent =
+  HelixSpatialRibbonChartElementEvent<HelixPlotChangeEvent>;
+/** `helix-plot-turn` event type */
+export type HelixSpatialRibbonChartHelixPlotTurnElementEvent =
+  HelixSpatialRibbonChartElementEvent<HelixPlotTurnEvent>;
+/** `helix-reading-change` event type */
+export type HelixSpatialRibbonChartHelixReadingChangeElementEvent =
+  HelixSpatialRibbonChartElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixSpatialRibbonChartHelixReadingPressElementEvent =
+  HelixSpatialRibbonChartElementEvent<HelixReadingPressEvent>;
+
+export type HelixSpatialRibbonChartVueProps = {
+  /** How strongly the ribbons are drawn, as on every chart.
+
+`outlined` is a ribbon as its edges in its series' color over faces
+faded toward the page, and `subtle` the same edges over a faint wash,
+which shows the ribbons behind it. Absent is the filled ribbon, per the
+rule that a reflected property takes no default, and `solid` writes it
+out. A renderer draws the ribbons the same way.
+
+It composes with `material`: emphasis decides what is drawn, and material
+how much of it comes through. The ring on the reading the keys rest on
+keeps its own ink. */
+  emphasis?: (HelixSpatialRibbonChart["emphasis"]) | undefined;
+  /** How much of each mark comes through, as on every chart: `glass` admits the
+most of what is behind it, `frosted` less, and absent is opaque. The
+strength is the theme's, scaled by `--helix-material-opacity`. */
+  material?: (HelixSpatialRibbonChart["material"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixSpatialRibbonChart["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixSpatialRibbonChart["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?: (HelixSpatialRibbonChart["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"?: (HelixSpatialRibbonChart["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?: (HelixSpatialRibbonChart["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?: (HelixSpatialRibbonChart["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?: (HelixSpatialRibbonChart["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?: (HelixSpatialRibbonChart["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"?: (HelixSpatialRibbonChart["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?: (HelixSpatialRibbonChart["positionLabel"]) | undefined;
+  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
+alone and fill the plot, as a picture on a product's own page does. The
+table, the summary, the tooltip, and the keys still carry every value,
+and a renderer draws no box either. */
+  "no-box"?: (HelixSpatialRibbonChart["noBox"]) | undefined;
+  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
+alone and fill the plot, as a picture on a product's own page does. The
+table, the summary, the tooltip, and the keys still carry every value,
+and a renderer draws no box either. */
+  noBox?: (HelixSpatialRibbonChart["noBox"]) | undefined;
+  /** What the readout says for a reading the table has no value for.
+`{place}` and `{series}` name it. */
+  "open-label"?: (HelixSpatialRibbonChart["openLabel"]) | undefined;
+  /** What the readout says for a reading the table has no value for.
+`{place}` and `{series}` name it. */
+  openLabel?: (HelixSpatialRibbonChart["openLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  "plot-label"?: (HelixSpatialRibbonChart["plotLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  plotLabel?: (HelixSpatialRibbonChart["plotLabel"]) | undefined;
+  /** The `summary` part's sentence. `{count}`, `{series}`, and `{places}` are
+the number of readings, series, and places, written in the locale,
+and `{low}` and `{high}` the lowest and the highest value. */
+  "summary-label"?: (HelixSpatialRibbonChart["summaryLabel"]) | undefined;
+  /** The `summary` part's sentence. `{count}`, `{series}`, and `{places}` are
+the number of readings, series, and places, written in the locale,
+and `{low}` and `{high}` the lowest and the highest value. */
+  summaryLabel?: (HelixSpatialRibbonChart["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.
+
+```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?: (HelixSpatialRibbonChart["data"]) | undefined;
+};
+
+export type HelixSpatialRibbonChartVueEvents = {
+  /** The readings or the reading the keys rest on changed, which the renderer is told. It stays on the chart. */
+  "helix-plot-change": HelixSpatialRibbonChartHelixPlotChangeElementEvent;
+  /** Shift with an arrow asked the view to turn, by a step across or up. */
+  "helix-plot-turn": HelixSpatialRibbonChartHelixPlotTurnElementEvent;
+  /** 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": HelixSpatialRibbonChartHelixReadingChangeElementEvent;
+  /** A reading was clicked or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixSpatialRibbonChartHelixReadingPressElementEvent;
+};
+
 /** `HelixSpatialScatterChart` component event */
 export type HelixSpatialScatterChartElementEvent<E = Event> = TypedEvent<
   HelixSpatialScatterChart,
@@ -17072,6 +17447,21 @@ export type HelixSpatialScatterChartHelixReadingPressElementEvent =
   HelixSpatialScatterChartElementEvent<HelixReadingPressEvent>;
 
 export type HelixSpatialScatterChartVueProps = {
+  /** How strongly the points are drawn, as on every chart.
+
+`outlined` is a point as a ring in its group's color over a dot faded
+toward the page, and `subtle` the same ring over a faint dot. Absent is
+the filled dot, per the rule that a reflected property takes no default,
+and `solid` writes it out. A renderer draws the points the same way.
+
+It composes with `material`: emphasis decides what is drawn, and material
+how much of it comes through. The ring on the point the keys rest on keeps
+its own ink. */
+  emphasis?: (HelixSpatialScatterChart["emphasis"]) | undefined;
+  /** How much of each mark comes through, as on every chart: `glass` admits the
+most of what is behind it, `frosted` less, and absent is opaque. The
+strength is the theme's, scaled by `--helix-material-opacity`. */
+  material?: (HelixSpatialScatterChart["material"]) | undefined;
   /** 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;
@@ -17127,10 +17517,28 @@ 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;
+  /** Draws a line from each point straight down to the floor of the box, in
+its group's color, so where a point stands across and in depth reads off
+the floor's grid. A renderer draws them too. */
+  "drop-lines"?: (HelixSpatialScatterChart["dropLines"]) | undefined;
+  /** Draws a line from each point straight down to the floor of the box, in
+its group's color, so where a point stands across and in depth reads off
+the floor's grid. A renderer draws them too. */
+  dropLines?: (HelixSpatialScatterChart["dropLines"]) | 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;
+  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
+alone and fill the plot, as a picture on a product's own page does. The
+table, the summary, the tooltip, and the keys still carry every value,
+and a renderer draws no box either. */
+  "no-box"?: (HelixSpatialScatterChart["noBox"]) | undefined;
+  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
+alone and fill the plot, as a picture on a product's own page does. The
+table, the summary, the tooltip, and the keys still carry every value,
+and a renderer draws no box either. */
+  noBox?: (HelixSpatialScatterChart["noBox"]) | 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. */
@@ -17196,6 +17604,23 @@ export type HelixSpatialSurfaceChartHelixReadingPressElementEvent =
   HelixSpatialSurfaceChartElementEvent<HelixReadingPressEvent>;
 
 export type HelixSpatialSurfaceChartVueProps = {
+  /** How strongly the surface is drawn, as on every chart.
+
+`outlined` is a wireframe in the ramp's colors over a surface faded toward
+the page, and `subtle` the same wireframe over a faint surface that the
+grid behind shows through, so a reading the surface hid from this side can
+be seen. Absent is the filled surface, per the rule that a reflected
+property takes no default, and `solid` writes it out. A renderer draws the
+surface the same way.
+
+It composes with `material`: emphasis decides what is drawn, and material
+how much of it comes through. The ring on the reading the keys rest on
+keeps its own ink. */
+  emphasis?: (HelixSpatialSurfaceChart["emphasis"]) | undefined;
+  /** How much of each mark comes through, as on every chart: `glass` admits the
+most of what is behind it, `frosted` less, and absent is opaque. The
+strength is the theme's, scaled by `--helix-material-opacity`. */
+  material?: (HelixSpatialSurfaceChart["material"]) | undefined;
   /** 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;
@@ -17251,6 +17676,20 @@ 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?: (HelixSpatialSurfaceChart["positionLabel"]) | undefined;
+  /** Draws the surface's contour lines on it, at each tick of its height, in
+the ramp's colors, so its shape reads as on a map and two places at the
+same height read as such. A renderer draws them too. */
+  contours?: (HelixSpatialSurfaceChart["contours"]) | undefined;
+  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
+alone and fill the plot, as a picture on a product's own page does. The
+table, the summary, the tooltip, and the keys still carry every value,
+and a renderer draws no box either. */
+  "no-box"?: (HelixSpatialSurfaceChart["noBox"]) | undefined;
+  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
+alone and fill the plot, as a picture on a product's own page does. The
+table, the summary, the tooltip, and the keys still carry every value,
+and a renderer draws no box either. */
+  noBox?: (HelixSpatialSurfaceChart["noBox"]) | 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. */
@@ -17309,6 +17748,158 @@ export type HelixSpatialSurfaceChartVueEvents = {
   "helix-reading-press": HelixSpatialSurfaceChartHelixReadingPressElementEvent;
 };
 
+/** `HelixSpatialTreemap` component event */
+export type HelixSpatialTreemapElementEvent<E = Event> = TypedEvent<
+  HelixSpatialTreemap,
+  E
+>;
+/** `helix-plot-change` event type */
+export type HelixSpatialTreemapHelixPlotChangeElementEvent =
+  HelixSpatialTreemapElementEvent<HelixPlotChangeEvent>;
+/** `helix-plot-turn` event type */
+export type HelixSpatialTreemapHelixPlotTurnElementEvent =
+  HelixSpatialTreemapElementEvent<HelixPlotTurnEvent>;
+/** `helix-reading-change` event type */
+export type HelixSpatialTreemapHelixReadingChangeElementEvent =
+  HelixSpatialTreemapElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixSpatialTreemapHelixReadingPressElementEvent =
+  HelixSpatialTreemapElementEvent<HelixReadingPressEvent>;
+
+export type HelixSpatialTreemapVueProps = {
+  /** How strongly the blocks are drawn, as on every chart.
+
+`outlined` is a block as its edges in its group's color over faces faded
+toward the page, and `subtle` the same edges over a faint wash, which
+shows the blocks behind it. Absent is the filled block, per the rule that a
+reflected property takes no default, and `solid` writes it out. A
+renderer draws the blocks the same way.
+
+It composes with `material`: emphasis decides what is drawn, and material
+how much of it comes through. The outline on the block the keys rest on
+keeps its own ink. */
+  emphasis?: (HelixSpatialTreemap["emphasis"]) | undefined;
+  /** How much of each mark comes through, as on every chart: `glass` admits the
+most of what is behind it, `frosted` less, and absent is opaque. The
+strength is the theme's, scaled by `--helix-material-opacity`. */
+  material?: (HelixSpatialTreemap["material"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixSpatialTreemap["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixSpatialTreemap["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?: (HelixSpatialTreemap["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"?: (HelixSpatialTreemap["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?: (HelixSpatialTreemap["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?: (HelixSpatialTreemap["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?: (HelixSpatialTreemap["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?: (HelixSpatialTreemap["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"?: (HelixSpatialTreemap["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?: (HelixSpatialTreemap["positionLabel"]) | undefined;
+  /** The column of text that gathers the rows into groups, by its heading. None by default. */
+  "group-by"?: (HelixSpatialTreemap["groupBy"]) | undefined;
+  /** The column of text that gathers the rows into groups, by its heading. None by default. */
+  groupBy?: (HelixSpatialTreemap["groupBy"]) | undefined;
+  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
+alone and fill the plot, as a picture on a product's own page does. The
+table, the summary, the tooltip, and the keys still carry every value,
+and a renderer draws no box either. */
+  "no-box"?: (HelixSpatialTreemap["noBox"]) | undefined;
+  /** Draws no box: no edges, grid, numbers, or names, so the readings stand
+alone and fill the plot, as a picture on a product's own page does. The
+table, the summary, the tooltip, and the keys still carry every value,
+and a renderer draws no box either. */
+  noBox?: (HelixSpatialTreemap["noBox"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  "plot-label"?: (HelixSpatialTreemap["plotLabel"]) | undefined;
+  /** The plot's name where the chart has none: no `aria-label`, `label`, or table caption. */
+  plotLabel?: (HelixSpatialTreemap["plotLabel"]) | undefined;
+  /** The `summary` part's sentence. `{count}` and `{groups}` are the number
+of items and groups, written in the locale, and `{low}` and `{high}` the
+smallest and the largest size. */
+  "summary-label"?: (HelixSpatialTreemap["summaryLabel"]) | undefined;
+  /** The `summary` part's sentence. `{count}` and `{groups}` are the number
+of items and groups, written in the locale, and `{low}` and `{high}` the
+smallest and the largest size. */
+  summaryLabel?: (HelixSpatialTreemap["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.
+
+```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?: (HelixSpatialTreemap["data"]) | undefined;
+};
+
+export type HelixSpatialTreemapVueEvents = {
+  /** The blocks or the block the keys rest on changed, which the renderer is told. It stays on the chart. */
+  "helix-plot-change": HelixSpatialTreemapHelixPlotChangeElementEvent;
+  /** Shift with an arrow asked the view to turn, by a step across or up. */
+  "helix-plot-turn": HelixSpatialTreemapHelixPlotTurnElementEvent;
+  /** 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": HelixSpatialTreemapHelixReadingChangeElementEvent;
+  /** A block was clicked or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixSpatialTreemapHelixReadingPressElementEvent;
+};
+
 export type HelixSpeedDialGroupVueProps = {
   /** The group's name, drawn above its actions and read by screen readers. */
   label?: (HelixSpeedDialGroup["label"]) | undefined;
@@ -21593,7 +22184,13 @@ it is muted.
 Forwarded to the video, which decides. Whether an unprompted play is
 permitted is the browser's policy, and what follows a refused autoplay is a
 paused player showing its start control, which is the correct thing to be
-looking at. */
+looking at.
+
+**Not where the reader asked for less motion**, or while the page has
+paused its motion, through `pauseMotion` or `Motion Toggle`: the player
+waits on its start control. A page that pauses its motion pauses a video
+that started itself, and one that lets it run again plays it again. A
+video the reader started is theirs, and neither touches it. */
   autoplay?: (HelixVideo["autoplay"]) | undefined;
   /** What the live region says when `c` turns captions off. */
   "captions-hidden-label"?: (HelixVideo["captionsHiddenLabel"]) | undefined;
@@ -23641,6 +24238,8 @@ export type CustomCssProperties = {
   "--meter-fraction"?: (string) | undefined;
   /** How much of the circle the arc covers, as a path length. */
   "--meter-sweep"?: (string) | undefined;
+  /** The button's fill. Defaults to the floating overlay surface. */
+  "--motion-toggle-background-color"?: (string) | undefined;
   /** Height of the bar in a row. Each destination fills it. */
   "--navigation-block-size"?: (string) | undefined;
   /** Space between destinations. */
@@ -24179,6 +24778,10 @@ export type CustomCssProperties = {
   "--sparkline-readout-font-size"?: (string) | undefined;
   /** Thickness of the line, overriding `weight`. */
   "--sparkline-width"?: (string) | undefined;
+  /** How tall the plot is. */
+  "--spatial-bar-chart-block-size"?: (string) | undefined;
+  /** How far a bar's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it. */
+  "--spatial-bar-chart-shade"?: (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. */
@@ -24194,6 +24797,10 @@ export type CustomCssProperties = {
   /** 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;
   /** How tall the plot is. */
+  "--spatial-ribbon-chart-block-size"?: (string) | undefined;
+  /** How far a ribbon's face turns from the light, from 0 for a level top. The component writes it on each face, and the stylesheet that shades the face reads it. */
+  "--spatial-ribbon-chart-shade"?: (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;
@@ -24205,6 +24812,10 @@ export type CustomCssProperties = {
   "--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;
+  /** How tall the plot is. */
+  "--spatial-treemap-block-size"?: (string) | undefined;
+  /** How far a block's face turns from the light, from 0 for its top. The component writes it on each face, and the stylesheet that shades the face reads it. */
+  "--spatial-treemap-shade"?: (string) | undefined;
   /** Color of the group's name. */
   "--speed-dial-group-label-color"?: (string) | undefined;
   /** Size of the group's name. */
@@ -25321,6 +25932,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixMeterVueProps,
     HelixMeterVueEvents
   >;
+  /** A quiet square button, as the controls over a map are, with the pause icon while motion runs and the play icon while it is paused. Text slotted into it stands beside the icon. */
+  "helix-motion-toggle": DefineCustomElement<
+    HelixMotionToggle,
+    HelixMotionToggleVueProps,
+    HelixMotionToggleVueEvents
+  >;
   /** One marker moves to the current destination. A moving marker is easier to follow than a background that switches from one item to another, and the movement shows which page you came from as well as which one is current.  The marker depends on 'variant', as 'Tabs'' mark does:  - Unset, it is a pill on the current destination, with nothing behind the   row. - 'underlined' makes it a bar along the bottom of the row, on a rule. - 'segmented' makes it a raised pill inside a sunken track. */
   "helix-navigation": DefineCustomElement<
     HelixNavigation,
@@ -25531,12 +26148,24 @@ export interface WcToolkitVueGlobalComponents {
     HelixSparklineVueProps,
     HelixSparklineVueEvents
   >;
+  /** Each series takes a series color from the theme, as every chart's series does, and each face of a bar is that color darkened by how far it turns from the light. The chart draws the bars in 3D in SVG, and '@fusion.dev/helix-plot' can draw them with three.js. */
+  "helix-spatial-bar-chart": DefineCustomElement<
+    HelixSpatialBarChart,
+    HelixSpatialBarChartVueProps,
+    HelixSpatialBarChartVueEvents
+  >;
   /** 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. The chart draws the relief in SVG, and '@fusion.dev/helix-plot' can draw it with three.js.  '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
   >;
+  /** Each series takes a series color from the theme, as every chart's series does, and each face of a ribbon is that color darkened by how far it turns from the light. The chart draws the ribbons in 3D in SVG, and '@fusion.dev/helix-plot' can draw them with three.js. */
+  "helix-spatial-ribbon-chart": DefineCustomElement<
+    HelixSpatialRibbonChart,
+    HelixSpatialRibbonChartVueProps,
+    HelixSpatialRibbonChartVueEvents
+  >;
   /** The chart draws the points in 3D in SVG, and '@fusion.dev/helix-plot' can draw them with three.js. Each group takes a series color from the theme, as every chart's series does, in both drawings. */
   "helix-spatial-scatter-chart": DefineCustomElement<
     HelixSpatialScatterChart,
@@ -25549,6 +26178,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixSpatialSurfaceChartVueProps,
     HelixSpatialSurfaceChartVueEvents
   >;
+  /** Each group takes a series color from the theme, as every chart's series does, and each face of a block is that color darkened by how far it turns from the light. The chart draws the blocks in 3D in SVG, and '@fusion.dev/helix-plot' can draw them with three.js. */
+  "helix-spatial-treemap": DefineCustomElement<
+    HelixSpatialTreemap,
+    HelixSpatialTreemapVueProps,
+    HelixSpatialTreemapVueEvents
+  >;
   /** 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,