@fusion.dev/helix-headless 0.194.0 → 0.196.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.194.0",
+  "version": "0.196.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -53,14 +53,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.194.0",
-    "@fusion.dev/helix-icons": "0.194.0",
+    "@fusion.dev/helix-core": "0.196.0",
+    "@fusion.dev/helix-icons": "0.196.0",
     "tslib": "^2.8.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.194.0",
-    "@fusion.dev/helix-testing": "0.194.0",
+    "@fusion.dev/helix-cem": "0.196.0",
+    "@fusion.dev/helix-testing": "0.196.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.14.5",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -60705,27 +60705,30 @@ export type CustomElements = {
    *
    * **The prisms stand on a slab**, the `base`, which reaches a little past the
    * grid, so the relief reads as one object. The `start` and `end` slots name
-   * the two ends of the front edge, which is the strip's first and last column:
-   * the component writes where those corners are on the `footer`, and a
-   * stylesheet stands each label at its corner. A renderer tells the chart where
-   * it draws those corners, so the labels stand at them there too, and follow
-   * them as the view turns.
+   * the two ends of the front edge, the long edge nearer the reader, which is
+   * the strip's first and last column. The component measures where each label
+   * stands under its corner, clear of the drawing, and writes it on the label as
+   * `--spatial-heatmap-label-x` and `--spatial-heatmap-label-y`. A renderer
+   * tells the chart where it draws those corners, so the labels stand at them
+   * there too, and follow them as the view turns.
    *
    * **`gap` and `min-cell` set the smallest cell.** The drawing scales as a
    * whole, so a wider box draws larger cells and the gap grows with them. A box
    * too narrow for every column at `min-cell` draws the newest that fit.
    *
    * **The drawing is SVG and holds still.** It scales with its box through its
-   * `viewBox`, needs no WebGL, and has no motion to pause. Shift with an arrow
-   * turns it a step, or tilts it, from the isometric view it starts at.
+   * `viewBox`, needs no WebGL, and has no motion to pause. A drag turns it and
+   * tilts it, and Shift with an arrow turns it a step, from the isometric view
+   * it starts at.
    * **Under `selection-mode`, the prisms are painted back to front for the
    * view, and the grid's rows and cells stand beside them in the table's
    * order**, holding no drawing of their own, so a turned view paints
    * correctly and a screen reader still reads the grid in order.
    *
    * **A renderer can draw it in 3D instead.** Put a box for it in the
-   * `renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`
-   * draws the prisms in it with three.js, lit, in the same tones, in a view
+   * `renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`,
+   * given `threeHeatmapDriver` from `@fusion.dev/helix-plot/three`, draws the
+   * prisms in it with three.js, lit, in the same tones, in a view
    * that drags round and zooms. The chart publishes its readings in `field`,
    * and its own drawing stays under the renderer's, unseen, where a screen
    * reader and the keys still reach it. Shift with an arrow turns the view,
@@ -60975,7 +60978,7 @@ export type CustomElements = {
    * - `placeReading(at: { x: number; y: number } | undefined) => void`: Says where the renderer draws the reading, as fractions of the strip from
    * its top left, or `undefined` while it draws none. The tooltip points
    * there. Called by the connector.
-   * - `placeCorners(at: { end: { x: number; y: number }; start: { x: number; y: number } } | undefined) => void`: Says where the renderer draws the two ends of the front edge, under the
+   * - `placeCorners(at: DrawnCorners | undefined) => void`: Says where the renderer draws the two ends of the front edge, under the
    * first column and the last, as fractions of the strip from its top left,
    * or `undefined` while they are out of view, where the labels keep the
    * last place they had. The `start` and `end` labels stand there. Called by
@@ -61017,12 +61020,9 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--spatial-heatmap-depth`: 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-end-x`: 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-y`: 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-label-x`: Where the `start` or the `end` label stands clear of the drawing, from the footer's inline start, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns.
+   * - `--spatial-heatmap-label-y`: Where the `start` or the `end` label stands clear of the drawing, from the footer's top, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns.
    * - `--spatial-heatmap-span`: 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-start-x`: 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-y`: 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.
    * - `--heatmap-rows`: How many rows the strip lays out. The component writes it from the data, and the stylesheet that draws the strip reads it.
    * - `--heatmap-tone`: The tone of the cell it is set on. The component writes it, and the stylesheet that paints the cell reads it.
    * - `--heatmap-tone-1`: The weakest step of the magnitude ramp, used by `tones="1 …"`.
@@ -61108,11 +61108,12 @@ export type CustomElements = {
    *
    * **Helix draws the frame, and a renderer draws the points in 3D.** Put a
    * box for the renderer inside the chart, and `connectSpatialScatterChart` from
-   * `@fusion.dev/helix-plot` draws the points in it with three.js and keeps it
-   * in step with the chart. Until a renderer has drawn, and where none is
+   * `@fusion.dev/helix-plot`, given `threeScatterDriver` from
+   * `@fusion.dev/helix-plot/three`, draws the points in it with three.js and
+   * keeps it in step with the chart. Until a renderer has drawn, and where none is
    * connected, the chart draws the points in 3D itself, in SVG, from the same
-   * place the renderer's camera starts: a still picture the server, a print,
-   * and a page without WebGL all show, which Shift with an arrow turns.
+   * place the renderer's camera starts: a picture a print and a page without
+   * WebGL show too, which a drag or Shift with an arrow turns.
    *
    * **The table is the reading.** Every number is in it, and screen readers
    * read it. The `summary` part names the three measures and the number of
@@ -61378,11 +61379,12 @@ export type CustomElements = {
    *
    * **Helix draws the frame, and a renderer draws the surface in 3D.** Put a
    * box for the renderer inside the chart, and `connectSpatialSurfaceChart` from
-   * `@fusion.dev/helix-plot` draws the surface in it with three.js, shaded from
-   * low to high in the theme's colors. Until a renderer has drawn, and where
+   * `@fusion.dev/helix-plot`, given `threeSurfaceDriver` from
+   * `@fusion.dev/helix-plot/three`, draws the surface in it with three.js,
+   * shaded from low to high in the theme's colors. Until a renderer has drawn, and where
    * none is connected, the chart draws the surface in 3D itself, in SVG, from
-   * the same place the renderer's camera starts: a still picture the server, a
-   * print, and a page without WebGL all show, which Shift with an arrow turns.
+   * the same place the renderer's camera starts: a picture a print and a page
+   * without WebGL show too, which a drag or Shift with an arrow turns.
    *
    * **The table is the reading.** Every number is in it, and screen readers
    * read it. The `summary` part names the measures, the number of readings,
@@ -91683,27 +91685,30 @@ export type CustomElementsSolidJs = {
    *
    * **The prisms stand on a slab**, the `base`, which reaches a little past the
    * grid, so the relief reads as one object. The `start` and `end` slots name
-   * the two ends of the front edge, which is the strip's first and last column:
-   * the component writes where those corners are on the `footer`, and a
-   * stylesheet stands each label at its corner. A renderer tells the chart where
-   * it draws those corners, so the labels stand at them there too, and follow
-   * them as the view turns.
+   * the two ends of the front edge, the long edge nearer the reader, which is
+   * the strip's first and last column. The component measures where each label
+   * stands under its corner, clear of the drawing, and writes it on the label as
+   * `--spatial-heatmap-label-x` and `--spatial-heatmap-label-y`. A renderer
+   * tells the chart where it draws those corners, so the labels stand at them
+   * there too, and follow them as the view turns.
    *
    * **`gap` and `min-cell` set the smallest cell.** The drawing scales as a
    * whole, so a wider box draws larger cells and the gap grows with them. A box
    * too narrow for every column at `min-cell` draws the newest that fit.
    *
    * **The drawing is SVG and holds still.** It scales with its box through its
-   * `viewBox`, needs no WebGL, and has no motion to pause. Shift with an arrow
-   * turns it a step, or tilts it, from the isometric view it starts at.
+   * `viewBox`, needs no WebGL, and has no motion to pause. A drag turns it and
+   * tilts it, and Shift with an arrow turns it a step, from the isometric view
+   * it starts at.
    * **Under `selection-mode`, the prisms are painted back to front for the
    * view, and the grid's rows and cells stand beside them in the table's
    * order**, holding no drawing of their own, so a turned view paints
    * correctly and a screen reader still reads the grid in order.
    *
    * **A renderer can draw it in 3D instead.** Put a box for it in the
-   * `renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`
-   * draws the prisms in it with three.js, lit, in the same tones, in a view
+   * `renderer` slot, and `connectSpatialHeatmap` from `@fusion.dev/helix-plot`,
+   * given `threeHeatmapDriver` from `@fusion.dev/helix-plot/three`, draws the
+   * prisms in it with three.js, lit, in the same tones, in a view
    * that drags round and zooms. The chart publishes its readings in `field`,
    * and its own drawing stays under the renderer's, unseen, where a screen
    * reader and the keys still reach it. Shift with an arrow turns the view,
@@ -91953,7 +91958,7 @@ export type CustomElementsSolidJs = {
    * - `placeReading(at: { x: number; y: number } | undefined) => void`: Says where the renderer draws the reading, as fractions of the strip from
    * its top left, or `undefined` while it draws none. The tooltip points
    * there. Called by the connector.
-   * - `placeCorners(at: { end: { x: number; y: number }; start: { x: number; y: number } } | undefined) => void`: Says where the renderer draws the two ends of the front edge, under the
+   * - `placeCorners(at: DrawnCorners | undefined) => void`: Says where the renderer draws the two ends of the front edge, under the
    * first column and the last, as fractions of the strip from its top left,
    * or `undefined` while they are out of view, where the labels keep the
    * last place they had. The `start` and `end` labels stand there. Called by
@@ -91995,12 +92000,9 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--spatial-heatmap-depth`: 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-end-x`: 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-y`: 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-label-x`: Where the `start` or the `end` label stands clear of the drawing, from the footer's inline start, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns.
+   * - `--spatial-heatmap-label-y`: Where the `start` or the `end` label stands clear of the drawing, from the footer's top, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns.
    * - `--spatial-heatmap-span`: 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-start-x`: 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-y`: 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.
    * - `--heatmap-rows`: How many rows the strip lays out. The component writes it from the data, and the stylesheet that draws the strip reads it.
    * - `--heatmap-tone`: The tone of the cell it is set on. The component writes it, and the stylesheet that paints the cell reads it.
    * - `--heatmap-tone-1`: The weakest step of the magnitude ramp, used by `tones="1 …"`.
@@ -92087,11 +92089,12 @@ export type CustomElementsSolidJs = {
    *
    * **Helix draws the frame, and a renderer draws the points in 3D.** Put a
    * box for the renderer inside the chart, and `connectSpatialScatterChart` from
-   * `@fusion.dev/helix-plot` draws the points in it with three.js and keeps it
-   * in step with the chart. Until a renderer has drawn, and where none is
+   * `@fusion.dev/helix-plot`, given `threeScatterDriver` from
+   * `@fusion.dev/helix-plot/three`, draws the points in it with three.js and
+   * keeps it in step with the chart. Until a renderer has drawn, and where none is
    * connected, the chart draws the points in 3D itself, in SVG, from the same
-   * place the renderer's camera starts: a still picture the server, a print,
-   * and a page without WebGL all show, which Shift with an arrow turns.
+   * place the renderer's camera starts: a picture a print and a page without
+   * WebGL show too, which a drag or Shift with an arrow turns.
    *
    * **The table is the reading.** Every number is in it, and screen readers
    * read it. The `summary` part names the three measures and the number of
@@ -92358,11 +92361,12 @@ export type CustomElementsSolidJs = {
    *
    * **Helix draws the frame, and a renderer draws the surface in 3D.** Put a
    * box for the renderer inside the chart, and `connectSpatialSurfaceChart` from
-   * `@fusion.dev/helix-plot` draws the surface in it with three.js, shaded from
-   * low to high in the theme's colors. Until a renderer has drawn, and where
+   * `@fusion.dev/helix-plot`, given `threeSurfaceDriver` from
+   * `@fusion.dev/helix-plot/three`, draws the surface in it with three.js,
+   * shaded from low to high in the theme's colors. Until a renderer has drawn, and where
    * none is connected, the chart draws the surface in 3D itself, in SVG, from
-   * the same place the renderer's camera starts: a still picture the server, a
-   * print, and a page without WebGL all show, which Shift with an arrow turns.
+   * the same place the renderer's camera starts: a picture a print and a page
+   * without WebGL show too, which a drag or Shift with an arrow turns.
    *
    * **The table is the reading.** Every number is in it, and screen readers
    * read it. The `summary` part names the measures, the number of readings,
@@ -100377,18 +100381,12 @@ export type CustomCssProperties = {
   "--slider-marker-at"?: (string) | undefined;
   /** Where the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its `origin`. */
   "--slider-to"?: (string) | undefined;
-  /** How tall the drawing is for its width. The component writes it on the footer, and a stylesheet that stands the `start` and `end` labels at their corners reads it. */
-  "--spatial-heatmap-depth"?: (string) | undefined;
-  /** Where the front edge ends, under the newest column, across the drawing, from 0 at its inline start to 1. The component writes it on the footer, and a stylesheet that stands the `end` label there reads it. */
-  "--spatial-heatmap-end-x"?: (string) | undefined;
-  /** How far down the drawing the front edge ends, under the newest column, as a share of the drawing's width: its whole depth in the chart's own drawing, and wherever a renderer draws it. The component writes it on the footer, and a stylesheet that stands the `end` label there reads it. */
-  "--spatial-heatmap-end-y"?: (string) | undefined;
+  /** Where the `start` or the `end` label stands clear of the drawing, from the footer's inline start, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns. */
+  "--spatial-heatmap-label-x"?: (string) | undefined;
+  /** Where the `start` or the `end` label stands clear of the drawing, from the footer's top, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns. */
+  "--spatial-heatmap-label-y"?: (string) | undefined;
   /** How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it. */
   "--spatial-heatmap-span"?: (string) | undefined;
-  /** Where the front edge starts, under the first column, across the drawing, from 0 at its inline start to 1: 0 in the chart's own drawing, and wherever a renderer draws it. The component writes it on the footer, and a stylesheet that stands the `start` label there reads it. */
-  "--spatial-heatmap-start-x"?: (string) | undefined;
-  /** How far down the drawing the front edge starts, under the first column, as a share of the drawing's width. The component writes it on the footer, and a stylesheet that stands the `start` label there reads it. */
-  "--spatial-heatmap-start-y"?: (string) | undefined;
   /** How high a face of the surface stands between the lowest reading and the highest, from 0 to 1: its corners' average. The component writes it on each face, and the stylesheet that colors the face along the ramp reads it. */
   "--spatial-surface-chart-level"?: (string) | undefined;
   /** How far a face of the surface turns from the light, as a share of lightness to take from its color, from 0 facing it to about 0.3. The component writes it on each face, and the stylesheet that shades the face reads it. */

package/types/vue.d.ts

@@ -19801,18 +19801,12 @@ export type CustomCssProperties = {
   "--slider-marker-at"?: (string) | undefined;
   /** Where the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its `origin`. */
   "--slider-to"?: (string) | undefined;
-  /** How tall the drawing is for its width. The component writes it on the footer, and a stylesheet that stands the `start` and `end` labels at their corners reads it. */
-  "--spatial-heatmap-depth"?: (string) | undefined;
-  /** Where the front edge ends, under the newest column, across the drawing, from 0 at its inline start to 1. The component writes it on the footer, and a stylesheet that stands the `end` label there reads it. */
-  "--spatial-heatmap-end-x"?: (string) | undefined;
-  /** How far down the drawing the front edge ends, under the newest column, as a share of the drawing's width: its whole depth in the chart's own drawing, and wherever a renderer draws it. The component writes it on the footer, and a stylesheet that stands the `end` label there reads it. */
-  "--spatial-heatmap-end-y"?: (string) | undefined;
+  /** Where the `start` or the `end` label stands clear of the drawing, from the footer's inline start, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns. */
+  "--spatial-heatmap-label-x"?: (string) | undefined;
+  /** Where the `start` or the `end` label stands clear of the drawing, from the footer's top, in pixels. The component measures it and writes it on the label, with `data-placed`, as the view turns. */
+  "--spatial-heatmap-label-y"?: (string) | undefined;
   /** How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it. */
   "--spatial-heatmap-span"?: (string) | undefined;
-  /** Where the front edge starts, under the first column, across the drawing, from 0 at its inline start to 1: 0 in the chart's own drawing, and wherever a renderer draws it. The component writes it on the footer, and a stylesheet that stands the `start` label there reads it. */
-  "--spatial-heatmap-start-x"?: (string) | undefined;
-  /** How far down the drawing the front edge starts, under the first column, as a share of the drawing's width. The component writes it on the footer, and a stylesheet that stands the `start` label there reads it. */
-  "--spatial-heatmap-start-y"?: (string) | undefined;
   /** How high a face of the surface stands between the lowest reading and the highest, from 0 to 1: its corners' average. The component writes it on each face, and the stylesheet that colors the face along the ramp reads it. */
   "--spatial-surface-chart-level"?: (string) | undefined;
   /** How far a face of the surface turns from the light, as a share of lightness to take from its color, from 0 facing it to about 0.3. The component writes it on each face, and the stylesheet that shades the face reads it. */
@@ -20517,19 +20511,19 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessSparklineVueProps,
     HelixHeadlessSparklineVueEvents
   >;
-  /** The same strip as 'Heatmap', seen from above at an angle. Each reading is a prism: its top face takes the cell's tone, and its height repeats the value, measured from zero against the highest reading in the table. 'rows="7"' makes a contribution graph, with each week a column running down to the right.  **The height says what the tone says.** Read the exact value from the tooltip or the table, and compare readings by tone. A tall reading at the front can hide a short one behind it, so the newest column stands at the front, where nothing covers it.  **Everything else is 'Heatmap'.** The table named by 'for', the tones and thresholds, the keys, the tooltip, the overview, 'selection-mode', and the events all work as they do there. The class extends the headless heatmap, and its own entry point carries the drawing, so a page using only 'Heatmap' loads none of it.  **It was 'helix-isometric-heatmap' until 0.190.0**, and 'helix-headless-isometric-heatmap' in the headless tier. The old tags are gone, and so are the '--isometric-heatmap-*' hooks, which are '--spatial-heatmap-*', and the words key, which is 'helix-spatial-heatmap'. The two shade hooks now take a step of lightness, such as '0.07', where they took a percentage mixed toward black. Every attribute, part, and event kept its name.  **'flat' lays every prism down** at no height, which leaves the tones on a plane at the same angle.  **The prisms stand on a slab**, the 'base', which reaches a little past the grid, so the relief reads as one object. The 'start' and 'end' slots name the two ends of the front edge, which is the strip's first and last column: the component writes where those corners are on the 'footer', and a stylesheet stands each label at its corner. A renderer tells the chart where it draws those corners, so the labels stand at them there too, and follow them as the view turns.  **'gap' and 'min-cell' set the smallest cell.** The drawing scales as a whole, so a wider box draws larger cells and the gap grows with them. A box too narrow for every column at 'min-cell' draws the newest that fit.  **The drawing is SVG and holds still.** It scales with its box through its 'viewBox', needs no WebGL, and has no motion to pause. Shift with an arrow turns it a step, or tilts it, from the isometric view it starts at. **Under 'selection-mode', the prisms are painted back to front for the view, and the grid's rows and cells stand beside them in the table's order**, holding no drawing of their own, so a turned view paints correctly and a screen reader still reads the grid in order.  **A renderer can draw it in 3D instead.** Put a box for it in the 'renderer' slot, and 'connectSpatialHeatmap' from '@fusion.dev/helix-plot' draws the prisms in it with three.js, lit, in the same tones, in a view that drags round and zooms. The chart publishes its readings in 'field', and its own drawing stays under the renderer's, unseen, where a screen reader and the keys still reach it. Shift with an arrow turns the view, except under 'selection-mode="multiple"', where it selects.  **Keyboard.** The keys are 'Heatmap''s. Down moves to the next reading in a column, drawn down to the left, and Right to the same reading in the next column, drawn down to the right.  | Key | What it does | |---|---| | Tab | Moves focus to the strip and shows the first cell. | | Down, Up | Moves to the next or the previous cell. | | Right, Left | Moves a column on or back, a week with 'rows="7"'. On a right-to-left page, Left moves on. | | Home, End | Moves to the first or the last cell. | | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. | | Enter, Space | Presses the cell, which sends 'helix-reading-press', and selects it or lets it go under 'selection-mode'. | | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under 'selection-mode="multiple"'. | | Shift with an arrow | Turns the view a step, or a renderer's where one is connected, except under 'selection-mode="multiple"'. | | Escape | Puts the cell's tooltip away. | */
+  /** The same strip as 'Heatmap', seen from above at an angle. Each reading is a prism: its top face takes the cell's tone, and its height repeats the value, measured from zero against the highest reading in the table. 'rows="7"' makes a contribution graph, with each week a column running down to the right.  **The height says what the tone says.** Read the exact value from the tooltip or the table, and compare readings by tone. A tall reading at the front can hide a short one behind it, so the newest column stands at the front, where nothing covers it.  **Everything else is 'Heatmap'.** The table named by 'for', the tones and thresholds, the keys, the tooltip, the overview, 'selection-mode', and the events all work as they do there. The class extends the headless heatmap, and its own entry point carries the drawing, so a page using only 'Heatmap' loads none of it.  **It was 'helix-isometric-heatmap' until 0.190.0**, and 'helix-headless-isometric-heatmap' in the headless tier. The old tags are gone, and so are the '--isometric-heatmap-*' hooks, which are '--spatial-heatmap-*', and the words key, which is 'helix-spatial-heatmap'. The two shade hooks now take a step of lightness, such as '0.07', where they took a percentage mixed toward black. Every attribute, part, and event kept its name.  **'flat' lays every prism down** at no height, which leaves the tones on a plane at the same angle.  **The prisms stand on a slab**, the 'base', which reaches a little past the grid, so the relief reads as one object. The 'start' and 'end' slots name the two ends of the front edge, the long edge nearer the reader, which is the strip's first and last column. The component measures where each label stands under its corner, clear of the drawing, and writes it on the label as '--spatial-heatmap-label-x' and '--spatial-heatmap-label-y'. A renderer tells the chart where it draws those corners, so the labels stand at them there too, and follow them as the view turns.  **'gap' and 'min-cell' set the smallest cell.** The drawing scales as a whole, so a wider box draws larger cells and the gap grows with them. A box too narrow for every column at 'min-cell' draws the newest that fit.  **The drawing is SVG and holds still.** It scales with its box through its 'viewBox', needs no WebGL, and has no motion to pause. A drag turns it and tilts it, and Shift with an arrow turns it a step, from the isometric view it starts at. **Under 'selection-mode', the prisms are painted back to front for the view, and the grid's rows and cells stand beside them in the table's order**, holding no drawing of their own, so a turned view paints correctly and a screen reader still reads the grid in order.  **A renderer can draw it in 3D instead.** Put a box for it in the 'renderer' slot, and 'connectSpatialHeatmap' from '@fusion.dev/helix-plot', given 'threeHeatmapDriver' from '@fusion.dev/helix-plot/three', draws the prisms in it with three.js, lit, in the same tones, in a view that drags round and zooms. The chart publishes its readings in 'field', and its own drawing stays under the renderer's, unseen, where a screen reader and the keys still reach it. Shift with an arrow turns the view, except under 'selection-mode="multiple"', where it selects.  **Keyboard.** The keys are 'Heatmap''s. Down moves to the next reading in a column, drawn down to the left, and Right to the same reading in the next column, drawn down to the right.  | Key | What it does | |---|---| | Tab | Moves focus to the strip and shows the first cell. | | Down, Up | Moves to the next or the previous cell. | | Right, Left | Moves a column on or back, a week with 'rows="7"'. On a right-to-left page, Left moves on. | | Home, End | Moves to the first or the last cell. | | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. | | Enter, Space | Presses the cell, which sends 'helix-reading-press', and selects it or lets it go under 'selection-mode'. | | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under 'selection-mode="multiple"'. | | Shift with an arrow | Turns the view a step, or a renderer's where one is connected, except under 'selection-mode="multiple"'. | | Escape | Puts the cell's tooltip away. | */
   "helix-headless-spatial-heatmap": DefineCustomElement<
     HelixHeadlessSpatialHeatmap,
     HelixHeadlessSpatialHeatmapVueProps,
     HelixHeadlessSpatialHeatmapVueEvents
   >;
-  /** A 3D scatter chart shows how three measures relate. The table's first three numeric columns are measured across, up, and in depth, and each row is one point. 'group-by' names a column of text, such as a team or a cluster, and each group is drawn in its own color.  **Helix draws the frame, and a renderer draws the points in 3D.** Put a box for the renderer inside the chart, and 'connectSpatialScatterChart' from '@fusion.dev/helix-plot' draws the points in it with three.js and keeps it in step with the chart. Until a renderer has drawn, and where none is connected, the chart draws the points in 3D itself, in SVG, from the same place the renderer's camera starts: a still picture the server, a print, and a page without WebGL all show, which Shift with an arrow turns.  **The table is the reading.** Every number is in it, and screen readers read it. The 'summary' part names the three measures and the number of points, and describes the plot.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from point to point in the table's order, Home and End go to the first and the last, and the up and down arrows move among the measures the readout says first. The 'live' part says the point's row in words, and the renderer marks it. Shift with an arrow turns the view, and Escape lets the point go.  **A reading shows its row in a tooltip**, as on every chart: the point a mouse or a pen rests on in the drawing, the point tapped, or the one the keys move to, once a renderer has drawn.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, by pointer or key, and 'helix-reading-press' a point clicked, tapped, or pressed with Enter or Space, each with the row of the table in 'index'.  **Keyboard.** The plot is one tab stop once it has points.  | Key | What it does | |---|---| | Tab | Moves focus to the plot. | | Right, Left | Moves to the next or the previous point, in the table's order. | | Up, Down | Moves among the point's measures, which the readout says first. | | Home, End | Moves to the first or the last point. | | Shift with an arrow | Turns the view across, or tilts it up and down. | | Enter, Space | Presses the point, which sends 'helix-reading-press'. | | Escape | Lets the point go. | */
+  /** A 3D scatter chart shows how three measures relate. The table's first three numeric columns are measured across, up, and in depth, and each row is one point. 'group-by' names a column of text, such as a team or a cluster, and each group is drawn in its own color.  **Helix draws the frame, and a renderer draws the points in 3D.** Put a box for the renderer inside the chart, and 'connectSpatialScatterChart' from '@fusion.dev/helix-plot', given 'threeScatterDriver' from '@fusion.dev/helix-plot/three', draws the points in it with three.js and keeps it in step with the chart. Until a renderer has drawn, and where none is connected, the chart draws the points in 3D itself, in SVG, from the same place the renderer's camera starts: a picture a print and a page without WebGL show too, which a drag or Shift with an arrow turns.  **The table is the reading.** Every number is in it, and screen readers read it. The 'summary' part names the three measures and the number of points, and describes the plot.  **The plot is read by key.** It takes focus, named by 'label' or the caption. The left and right arrows move from point to point in the table's order, Home and End go to the first and the last, and the up and down arrows move among the measures the readout says first. The 'live' part says the point's row in words, and the renderer marks it. Shift with an arrow turns the view, and Escape lets the point go.  **A reading shows its row in a tooltip**, as on every chart: the point a mouse or a pen rests on in the drawing, the point tapped, or the one the keys move to, once a renderer has drawn.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, by pointer or key, and 'helix-reading-press' a point clicked, tapped, or pressed with Enter or Space, each with the row of the table in 'index'.  **Keyboard.** The plot is one tab stop once it has points.  | Key | What it does | |---|---| | Tab | Moves focus to the plot. | | Right, Left | Moves to the next or the previous point, in the table's order. | | Up, Down | Moves among the point's measures, which the readout says first. | | Home, End | Moves to the first or the last point. | | Shift with an arrow | Turns the view across, or tilts it up and down. | | Enter, Space | Presses the point, which sends 'helix-reading-press'. | | Escape | Lets the point go. | */
   "helix-headless-spatial-scatter-chart": DefineCustomElement<
     HelixHeadlessSpatialScatterChart,
     HelixHeadlessSpatialScatterChartVueProps,
     HelixHeadlessSpatialScatterChartVueEvents
   >;
-  /** A 3D surface chart shows how one measure varies over two others, such as load by hour and by day. Each row of the table is one reading: **the first numeric column is across, the second is in depth, and the third is the height.** The readings make a grid from every distinct place across and in depth, and a place with no reading is left open.  **Helix draws the frame, and a renderer draws the surface in 3D.** Put a box for the renderer inside the chart, and 'connectSpatialSurfaceChart' from '@fusion.dev/helix-plot' draws the surface in it with three.js, shaded from low to high in the theme's colors. Until a renderer has drawn, and where none is connected, the chart draws the surface in 3D itself, in SVG, from the same place the renderer's camera starts: a still picture the server, a print, and a page without WebGL all show, which Shift with an arrow turns.  **The table is the reading.** Every number is in it, and screen readers read it. The 'summary' part names the measures, the number of readings, and the range of heights, and describes the plot.  **The plot is read by key, across and in depth.** It takes focus, named by 'label' or the caption. The left and right arrows move across, the down and up arrows move in depth, forward and back, and Home and End go to the first and the last place. The 'live' part says the reading at the place in words, and the renderer marks it. Shift with an arrow turns the view, and Escape lets the place go.  **A reading shows its row in a tooltip**, as on every chart: the place a mouse or a pen rests on in the drawing, the place tapped, or the one the keys move to, once a renderer has drawn. A place with no reading shows none.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, and 'helix-reading-press' a place clicked or pressed with Enter or Space, each with the row of the table in 'index', or '-1' for a place with no reading.  **Keyboard.** The plot is one tab stop once it has readings.  | Key | What it does | |---|---| | Tab | Moves focus to the plot. | | Right, Left | Moves across to the next or the previous place. | | Down, Up | Moves in depth to the next or the previous place. | | Home, End | Moves to the first or the last place. | | Shift with an arrow | Turns the view across, or tilts it up and down. | | Enter, Space | Presses the place, which sends 'helix-reading-press'. | | Escape | Lets the place go. | */
+  /** A 3D surface chart shows how one measure varies over two others, such as load by hour and by day. Each row of the table is one reading: **the first numeric column is across, the second is in depth, and the third is the height.** The readings make a grid from every distinct place across and in depth, and a place with no reading is left open.  **Helix draws the frame, and a renderer draws the surface in 3D.** Put a box for the renderer inside the chart, and 'connectSpatialSurfaceChart' from '@fusion.dev/helix-plot', given 'threeSurfaceDriver' from '@fusion.dev/helix-plot/three', draws the surface in it with three.js, shaded from low to high in the theme's colors. Until a renderer has drawn, and where none is connected, the chart draws the surface in 3D itself, in SVG, from the same place the renderer's camera starts: a picture a print and a page without WebGL show too, which a drag or Shift with an arrow turns.  **The table is the reading.** Every number is in it, and screen readers read it. The 'summary' part names the measures, the number of readings, and the range of heights, and describes the plot.  **The plot is read by key, across and in depth.** It takes focus, named by 'label' or the caption. The left and right arrows move across, the down and up arrows move in depth, forward and back, and Home and End go to the first and the last place. The 'live' part says the reading at the place in words, and the renderer marks it. Shift with an arrow turns the view, and Escape lets the place go.  **A reading shows its row in a tooltip**, as on every chart: the place a mouse or a pen rests on in the drawing, the place tapped, or the one the keys move to, once a renderer has drawn. A place with no reading shows none.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, and 'helix-reading-press' a place clicked or pressed with Enter or Space, each with the row of the table in 'index', or '-1' for a place with no reading.  **Keyboard.** The plot is one tab stop once it has readings.  | Key | What it does | |---|---| | Tab | Moves focus to the plot. | | Right, Left | Moves across to the next or the previous place. | | Down, Up | Moves in depth to the next or the previous place. | | Home, End | Moves to the first or the last place. | | Shift with an arrow | Turns the view across, or tilts it up and down. | | Enter, Space | Presses the place, which sends 'helix-reading-press'. | | Escape | Lets the place go. | */
   "helix-headless-spatial-surface-chart": DefineCustomElement<
     HelixHeadlessSpatialSurfaceChart,
     HelixHeadlessSpatialSurfaceChartVueProps,