@fusion.dev/helix-headless 0.185.0 → 0.186.1

package/types/svelte.d.ts

@@ -86,6 +86,7 @@ declare module 'svelte/elements' {
     'helix-headless-icon': Helix<'helix-headless-icon'>
     'helix-headless-image': Helix<'helix-headless-image'>
     'helix-headless-input': Helix<'helix-headless-input'>
+    'helix-headless-isometric-heatmap': Helix<'helix-headless-isometric-heatmap'>
     'helix-headless-kbd': Helix<'helix-headless-kbd'>
     'helix-headless-legend': Helix<'helix-headless-legend'>
     'helix-headless-lightbox-item': Helix<'helix-headless-lightbox-item'>

package/types/vue.d.ts

@@ -74,6 +74,7 @@ import type {
   HelixHeadlessIcon,
   HelixHeadlessImage,
   HelixHeadlessInput,
+  HelixHeadlessIsometricHeatmap,
   HelixHeadlessKbd,
   HelixHeadlessLegend,
   HelixHeadlessLightboxItem,
@@ -8481,10 +8482,12 @@ disagreeing with its own name for every reader who meant the left. */
   /** The name of the icon in the Helix set.
 
 **A lookup, and the reason both this and `icon` exist.** A name is a string,
-so it is what markup can carry, and resolving one means an index that no
-bundler can shake. The family's entry indexes a small set, `icon/all`
-indexes the whole set at 15 kB, and `icon/root` indexes nothing, for a
-page that registers the glyphs it names or hands over the value instead.
+so it is what markup can carry, and resolving one means an index of the
+whole set that no bundler can shake: 15 kB for a consumer who renders one
+mark. An attribute is the only thing an HTML author can write, and that is
+worth the index; a consumer who would rather not pay it imports the
+element from `icon/root` and registers the glyphs it names, or hands over
+the value instead.
 
 A name written `prefix:name` asks the library registered under that
 prefix. */
@@ -8881,6 +8884,253 @@ export type HelixHeadlessInputVueEvents = {
   input: HelixHeadlessInputElementEvent;
 };
 
+/** `HelixHeadlessIsometricHeatmap` component event */
+export type HelixHeadlessIsometricHeatmapElementEvent<E = Event> = TypedEvent<
+  HelixHeadlessIsometricHeatmap,
+  E
+>;
+/** `helix-before-change` event type */
+export type HelixHeadlessIsometricHeatmapHelixBeforeChangeElementEvent =
+  HelixHeadlessIsometricHeatmapElementEvent<HelixBeforeChangeEvent>;
+/** `helix-reading-change` event type */
+export type HelixHeadlessIsometricHeatmapHelixReadingChangeElementEvent =
+  HelixHeadlessIsometricHeatmapElementEvent<HelixReadingChangeEvent>;
+/** `helix-reading-press` event type */
+export type HelixHeadlessIsometricHeatmapHelixReadingPressElementEvent =
+  HelixHeadlessIsometricHeatmapElementEvent<HelixReadingPressEvent>;
+/** `helix-resize` event type */
+export type HelixHeadlessIsometricHeatmapHelixResizeElementEvent =
+  HelixHeadlessIsometricHeatmapElementEvent<HelixResizeEvent>;
+
+export type HelixHeadlessIsometricHeatmapVueProps = {
+  /** Draws every prism at no height, so the tones lie on a plane. */
+  flat?: (HelixHeadlessIsometricHeatmap["flat"]) | undefined;
+  /** How tall the highest reading stands, in cells. Every other reading stands
+at its share of it. */
+  relief?: (HelixHeadlessIsometricHeatmap["relief"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  "empty-text"?: (HelixHeadlessIsometricHeatmap["emptyText"]) | undefined;
+  /** The words shown in place of the drawing when the table has no readings,
+and the fallback of the `empty` slot. */
+  emptyText?: (HelixHeadlessIsometricHeatmap["emptyText"]) | undefined;
+  /** Whether the readings are still on their way. The chart shows
+`loading-text` in place of an empty drawing until it has readings.
+
+Reflected, so a stylesheet can treat the chart while it waits. A chart
+that already has readings keeps drawing them, so a refresh does not
+blank it. */
+  loading?: (HelixHeadlessIsometricHeatmap["loading"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  "loading-text"?: (HelixHeadlessIsometricHeatmap["loadingText"]) | undefined;
+  /** The words shown in place of the drawing while `loading` is set and
+there are no readings yet, and the fallback of the `loading` slot. */
+  loadingText?: (HelixHeadlessIsometricHeatmap["loadingText"]) | undefined;
+  /** The id of the table to read.
+
+Names a table in the same tree, so a chart inside another component's
+shadow root reads a table in that root rather than one in the document. A
+`<table>` or anything built from grid roles, including `helix-table`.
+
+**In React this arrives as a property and not as an attribute**, the way
+`Tooltip.for` does, so it does not reflect and nothing styles on it. */
+  for?: (HelixHeadlessIsometricHeatmap["for"]) | undefined;
+  /** The chart's name, which starts the chart's text summary.
+
+Absent falls back to the table's own caption, which is usually the right
+words and is already written. */
+  label?: (HelixHeadlessIsometricHeatmap["label"]) | undefined;
+  /** The locale the chart's own numbers are written in: its axis, its
+percentages and its totals, such as `de` for `1.240` and `32 %`.
+
+Absent reads the nearest `lang`, then the runtime's own. The table's
+cells are shown as the table writes them, whatever this says. */
+  locale?: (HelixHeadlessIsometricHeatmap["locale"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  "position-label"?: (HelixHeadlessIsometricHeatmap["positionLabel"]) | undefined;
+  /** Where a reading the keys moved to stands among the readings, said after
+it. `{position}` and `{count}` are replaced with the numbers, written in
+`locale`.
+
+Set it to the words of the page's language, such as `{position} von
+{count}`, or to nothing to say no position. A slice or a series a
+legend hid is not counted. */
+  positionLabel?: (HelixHeadlessIsometricHeatmap["positionLabel"]) | undefined;
+  /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
+`overview-label`. */
+  "busiest-label"?: (HelixHeadlessIsometricHeatmap["busiestLabel"]) | undefined;
+  /** The name the `overview` gives the busiest reading, `{busiestLabel}` in
+`overview-label`. */
+  busiestLabel?: (HelixHeadlessIsometricHeatmap["busiestLabel"]) | undefined;
+  /** Space between cells, in CSS pixels. It is a number for the same reason
+`min-cell` is. */
+  gap?: (HelixHeadlessIsometricHeatmap["gap"]) | undefined;
+  /** The smallest a cell may get before the strip draws fewer of them, in CSS pixels.
+
+**Set this only to overrule what the strip actually draws.** The arithmetic
+needs a width in pixels and the width is a length the stylesheet resolves,
+so a number written here that disagrees with the sheet is a promise the
+consumer has to keep by hand, and the one number a summary is told to trust
+is the one it gets wrong.
+
+The strip measures itself, so sizing the cells in a sheet is enough on its
+own and these two are the estimate used until the first measurement lands.
+Writing the attribute pins the value and stops the measurement being
+consulted, which is what a container query or a transition on the cell size
+wants, where what is drawn this frame is not what the arithmetic should
+plan around.
+
+Zero turns the dropping off altogether, which is right for a strip in a
+container that cannot get narrow. */
+  "min-cell"?: (HelixHeadlessIsometricHeatmap["minCell"] | `${number}`) | undefined;
+  /** The smallest a cell may get before the strip draws fewer of them, in CSS pixels.
+
+**Set this only to overrule what the strip actually draws.** The arithmetic
+needs a width in pixels and the width is a length the stylesheet resolves,
+so a number written here that disagrees with the sheet is a promise the
+consumer has to keep by hand, and the one number a summary is told to trust
+is the one it gets wrong.
+
+The strip measures itself, so sizing the cells in a sheet is enough on its
+own and these two are the estimate used until the first measurement lands.
+Writing the attribute pins the value and stops the measurement being
+consulted, which is what a container query or a transition on the cell size
+wants, where what is drawn this frame is not what the arithmetic should
+plan around.
+
+Zero turns the dropping off altogether, which is right for a strip in a
+container that cannot get narrow. */
+  minCell?: (HelixHeadlessIsometricHeatmap["minCell"]) | undefined;
+  /** The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
+`busiest-label` and `total-label`, `{busiest}` the busiest reading's name
+and its reading as the table writes it, and `{total}` the total of the
+readings drawn, written in the locale. */
+  "overview-label"?: (HelixHeadlessIsometricHeatmap["overviewLabel"]) | undefined;
+  /** The `overview`'s sentence. `{busiestLabel}` and `{totalLabel}` are
+`busiest-label` and `total-label`, `{busiest}` the busiest reading's name
+and its reading as the table writes it, and `{total}` the total of the
+readings drawn, written in the locale. */
+  overviewLabel?: (HelixHeadlessIsometricHeatmap["overviewLabel"]) | undefined;
+  /** How many rows the strip has.
+
+`1` is a status strip and `7` is a calendar week, which are the two readings
+this covers. Cells fill down the column and then across, which is what a
+calendar heatmap does: a week is a column, so the strip reads along the
+line in weeks, from the right on a right-to-left page, and top to bottom in
+days. */
+  rows?: (HelixHeadlessIsometricHeatmap["rows"]) | undefined;
+  /** What the readout added for a selected cell, under `selection-mode`. */
+  "selected-label"?: (HelixHeadlessIsometricHeatmap["selectedLabel"]) | undefined;
+  /** What the readout added for a selected cell, under `selection-mode`. */
+  selectedLabel?: (HelixHeadlessIsometricHeatmap["selectedLabel"]) | undefined;
+  /** What the `selection` part says after the selection changes. `{count}` is
+how many cells are selected, written in the locale, and a language that
+needs plural forms writes them: `{count, plural, one {# wybrany} few
+{# wybrane} many {# wybranych} other {# wybranego}}`. */
+  "selection-label"?: (HelixHeadlessIsometricHeatmap["selectionLabel"]) | undefined;
+  /** What the `selection` part says after the selection changes. `{count}` is
+how many cells are selected, written in the locale, and a language that
+needs plural forms writes them: `{count, plural, one {# wybrany} few
+{# wybrane} many {# wybranych} other {# wybranego}}`. */
+  selectionLabel?: (HelixHeadlessIsometricHeatmap["selectionLabel"]) | undefined;
+  /** How many cells a reader can select: `single` or `multiple`.
+
+Absent selects nothing, and a press or Space does what it did. */
+  "selection-mode"?: (HelixHeadlessIsometricHeatmap["selectionMode"]) | undefined;
+  /** How many cells a reader can select: `single` or `multiple`.
+
+Absent selects nothing, and a press or Space does what it did. */
+  selectionMode?: (HelixHeadlessIsometricHeatmap["selectionMode"]) | undefined;
+  /** What Shift takes in under `selection-mode="multiple"`: `linear`, every
+cell between two in the table's order, or `rectangle`, the cells between
+two corners by row and by column, as a spreadsheet selects a range. */
+  "selection-shape"?: (HelixHeadlessIsometricHeatmap["selectionShape"]) | undefined;
+  /** What Shift takes in under `selection-mode="multiple"`: `linear`, every
+cell between two in the table's order, or `rectangle`, the cells between
+two corners by row and by column, as a spreadsheet selects a range. */
+  selectionShape?: (HelixHeadlessIsometricHeatmap["selectionShape"]) | undefined;
+  /** The strip's name where the chart has none: no `aria-label`, `label`, or
+table caption. */
+  "strip-label"?: (HelixHeadlessIsometricHeatmap["stripLabel"]) | undefined;
+  /** The strip's name where the chart has none: no `aria-label`, `label`, or
+table caption. */
+  stripLabel?: (HelixHeadlessIsometricHeatmap["stripLabel"]) | undefined;
+  /** Lower bounds for the tone buckets, in the order the tones are given.
+
+`thresholds="1 3 6 9"` with `tones="1 2 3 4"` puts 1 and 2 in the ramp's
+first step, 3 to 5 in the second, 6 to 8 in the third, and 9 upward in the
+fourth. A value below the first bound gets no tone at all: an empty day in a
+contribution graph is a day with nothing in it, and painting it as the
+lowest bucket claims a reading that does not exist. */
+  thresholds?: (HelixHeadlessIsometricHeatmap["thresholds"]) | undefined;
+  /** The tone for each bucket, in the same order as `thresholds`.
+
+A name, resolved as `--heatmap-tone-<name>` by whichever tier answers.
+**`"1"` through `"5"` are a ramp and everything else is a category**, which
+is the distinction a heatmap lives or dies on: magnitude has to be one hue
+getting louder, because a reader compares two cells by weight and cannot
+compare two hues at all. `tones="surface info accent success primary"` for a
+commit count is five unrelated hues for five amounts, which is confetti with
+no order in it. */
+  tones?: (HelixHeadlessIsometricHeatmap["tones"]) | undefined;
+  /** The name the `overview` gives the total of the readings drawn,
+`{totalLabel}` in `overview-label`. */
+  "total-label"?: (HelixHeadlessIsometricHeatmap["totalLabel"]) | undefined;
+  /** The name the `overview` gives the total of the readings drawn,
+`{totalLabel}` in `overview-label`. */
+  totalLabel?: (HelixHeadlessIsometricHeatmap["totalLabel"]) | undefined;
+  /** The selected cells, separated by commas: each by the date its row's
+header carries in a `<time datetime>`, such as `2026-06-11`, or by the
+header's words where it carries none.
+
+Set it to start with cells selected. Written by a press or a key under
+`selection-mode`. */
+  value?: (HelixHeadlessIsometricHeatmap["value"]) | undefined;
+  /** The readings as data, in the shape of a table, where the page has no
+table to point `for` at. `for` wins where both are set.
+
+```js
+chart.data = {
+  caption: 'Sessions by channel',
+  columns: ['Month', 'Direct', 'Referral'],
+  rows: [['Jan', 10, 4], ['Feb', 20, 8]],
+}
+```
+
+The first column holds each row's label and every column after it a
+series, as in a table. A cell is a number, words, `null` for a blank,
+or `{ value, text }` for a number shown as words, such as `$128k`. A
+number is shown in `locale`.
+
+**A table is still the better source where the page can show one**:
+it reads with no script and before hydration, and a reader can sort and
+copy it. Data is drawn on the client only, so a server serves the
+frame, and the summary, the keys and the readout are then the whole of
+what a screen reader is given. Set a new object to redraw: the chart
+does not look inside the one it has. */
+  data?: (HelixHeadlessIsometricHeatmap["data"]) | undefined;
+};
+
+export type HelixHeadlessIsometricHeatmapVueEvents = {
+  /** Fired once a press or a key has changed which cells are selected. */
+  change: HelixHeadlessIsometricHeatmapElementEvent;
+  /** Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable. */
+  "helix-before-change": HelixHeadlessIsometricHeatmapHelixBeforeChangeElementEvent;
+  /** The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it. */
+  "helix-reading-change": HelixHeadlessIsometricHeatmapHelixReadingChangeElementEvent;
+  /** A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`. */
+  "helix-reading-press": HelixHeadlessIsometricHeatmapHelixReadingPressElementEvent;
+  /** Fired when the number of cells drawn changes, with the new number. */
+  "helix-resize": HelixHeadlessIsometricHeatmapHelixResizeElementEvent;
+};
+
 /** `HelixHeadlessKbd` component event */
 export type HelixHeadlessKbdElementEvent<E = Event> = TypedEvent<
   HelixHeadlessKbd,
@@ -19211,6 +19461,8 @@ export type CustomCssProperties = {
   "--heatmap-tone-success"?: (string) | undefined;
   /** The color of the `warning` tone. */
   "--heatmap-tone-warning"?: (string) | undefined;
+  /** How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it. */
+  "--isometric-heatmap-span"?: (string) | undefined;
   /** How far the zoomed item is moved across from the middle of the viewport, in pixels, toward the right. Written only while zoomed. */
   "--lightbox-pan-x"?: (string) | undefined;
   /** How far the zoomed item is moved down from the middle of the viewport, in pixels. Written only while zoomed. */
@@ -19631,7 +19883,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessFormatDateVueProps,
     HelixHeadlessFormatDateVueEvents
   >;
-  /** Helix draws no graph. A force layout of thousands of notes is physics and WebGL, which a renderer such as Sigma.js does. Put the renderer's box in the frame, and 'connectGraph' from '@fusion.dev/helix-graph' draws 'nodes' and 'links' in it and keeps it in step with the frame.  What the frame adds is what a drawing of a graph cannot do: a list of every note beside it, which is the graph for a screen reader and a quick way to find a note for anyone. The selected note comes first, then the notes it links to and from, then every other note, and the search field narrows it. Selecting a note in the list or in the drawing is the same selection.  Set 'depth' to show the local graph: only the notes within that many links of the selected one.  The search field is a combobox over the list. Down and Up move through the notes while the focus stays in the field, and Enter selects one.  **Walk the links with Alt and the arrow keys**, in the list or in the search field once its keys are on a note. The note the keys are on is marked in the drawing.  | Key | What it does | |---|---| | Alt+Right | Follows a link, to the first note the one the keys are on links to or from. | | Alt+Down, Alt+Up | Moves to the next or the previous note linked to the one the step came from, wrapping. | | Alt+Left | Goes back along the links walked. |  Right and Left swap on a right-to-left page. Each step says the note, how it stands to the note it came from, and its place among that note's links, such as "Hiring plan. Linked from Roadmap. 2 of 3". Enter selects the note.  Set 'legend' to name the groups over the drawing, each a button that shows or hides its notes. 'hiddenGroups' holds the groups turned off, and the list holds only what the drawing shows. The legend is a toolbar and one tab stop: the arrow keys, Home, End and a group's first letters move between its buttons, and Space or Enter presses one.  'nodes' and 'links' are properties, never markup: a graph of ten thousand notes as ten thousand elements would cost what the renderer exists to save. The list draws only the rows in view.  The list scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root. You still need to set a block size on the list, or it grows to hold every row. */
+  /** The frame draws no graph itself. A force layout of thousands of notes is physics and WebGL, which a renderer such as Sigma.js does, and an architecture diagram is drawn by 'isometricDriver' from '@fusion.dev/helix-graph/isometric'. Put the drawing's box in the frame, and 'connectGraph' from '@fusion.dev/helix-graph' draws 'nodes' and 'links' in it and keeps it in step with the frame.  What the frame adds is what a drawing of a graph cannot do: a list of every note beside it, which is the graph for a screen reader and a quick way to find a note for anyone. The selected note comes first, then the notes it links to and from, then every other note, and the search field narrows it. Selecting a note in the list or in the drawing is the same selection.  Set 'depth' to show the local graph: only the notes within that many links of the selected one.  The search field is a combobox over the list. Down and Up move through the notes while the focus stays in the field, and Enter selects one.  **Walk the links with Alt and the arrow keys**, in the list or in the search field once its keys are on a note. The note the keys are on is marked in the drawing.  | Key | What it does | |---|---| | Alt+Right | Follows a link, to the first note the one the keys are on links to or from. | | Alt+Down, Alt+Up | Moves to the next or the previous note linked to the one the step came from, wrapping. | | Alt+Left | Goes back along the links walked. |  Right and Left swap on a right-to-left page. Each step says the note, how it stands to the note it came from, and its place among that note's links, such as "Hiring plan. Linked from Roadmap. 2 of 3". Enter selects the note.  Set 'legend' to name the groups over the drawing, each a button that shows or hides its notes. 'hiddenGroups' holds the groups turned off, and the list holds only what the drawing shows. The legend is a toolbar and one tab stop: the arrow keys, Home, End and a group's first letters move between its buttons, and Space or Enter presses one.  'nodes' and 'links' are properties, never markup: a graph of ten thousand notes as ten thousand elements would cost what the renderer exists to save. The list draws only the rows in view.  The list scrolls on this tier. It carries 'data-scroller', and 'core' ships '[data-scroller] { overflow: auto }' into every shadow root. You still need to set a block size on the list, or it grows to hold every row. */
   "helix-headless-graph": DefineCustomElement<
     HelixHeadlessGraph,
     HelixHeadlessGraphVueProps,
@@ -19649,7 +19901,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessIconButtonVueProps,
     HelixHeadlessIconButtonVueEvents
   >;
-  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name is looked up in a registry.** The family's entry registers a small set: the four carets, 'arrow-left', 'arrow-right', 'check', 'x', 'plus', 'minus', 'magnifying-glass', 'info' and 'warning'. 'icon/all' registers the whole set, so any name in it draws, and a name that resolves to nothing says to import it. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  **Or point 'src' at an SVG file**, such as 'src="/icons/rocket.svg"', and the element fetches it and draws its shapes in 'currentColor' where the file does not color them. A file is fetched once a page, however many icons name it, and 'load' fires when it is drawn. Scripts, event handlers and 'javascript:' links in the file are taken out before it is drawn. A server fetches nothing, so a served icon with a 'src' is drawn once the script runs.  A name with no match, or a 'src' that is no SVG, renders nothing, and the element fires 'error', so a typo in a name can be heard. It waits until the page has loaded and painted first, so a library a later module registers is not taken for a typo.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name.  **A decorative icon that is all a control holds is reported.** In a development build, a button or a link whose only content is an icon with no 'label', and which has no name of its own, warns 'missing-name' once, through the runtime channel every Helix warning uses. */
+  /** The icons are Phosphor, drawn on a 256 box at stroke-width 16. Each glyph renders its full inner markup, because most icons are several elements, each with its own stroke and fill.  The markup is generated at build time from SVG files in this repository and never comes from user input, so rendering it with 'unsafeSVG' is safe.  The '<svg>' carries 'fill="currentColor"'. The generator keeps only the inner markup, and Phosphor sets its fill on the root tag that the generator discards. Without it, the 65 solid glyphs fall back to black and disappear on a dark background. Shapes that set their own 'fill' or 'stroke' are unaffected.  **A name is looked up in a registry.** The family's entry registers the whole set, so any name in it draws, and 'icon/all' registers the same set. The element's own entry, '@fusion.dev/helix-headless/icon/root', registers none: a page that imports it and calls 'registerIcons' with the glyphs it names ships those and no others. 'registerIconLibrary' resolves names under a prefix of your own, such as 'lucide:camera', at once or later, and the element fires 'load' when a glyph that came later is drawn. A glyph registered after the element rendered is drawn then.  **Or point 'src' at an SVG file**, such as 'src="/icons/rocket.svg"', and the element fetches it and draws its shapes in 'currentColor' where the file does not color them. A file is fetched once a page, however many icons name it, and 'load' fires when it is drawn. Scripts, event handlers and 'javascript:' links in the file are taken out before it is drawn. A server fetches nothing, so a served icon with a 'src' is drawn once the script runs.  A name with no match, or a 'src' that is no SVG, renders nothing, and the element fires 'error', so a typo in a name can be heard. It waits until the page has loaded and painted first, so a library a later module registers is not taken for a typo.  An icon is decorative by default and hidden from assistive technology. Set 'label' only when the icon is the only carrier of meaning, such as in a button with no text. An 'aria-label' on the element works too: the element is then an image with that name.  **A decorative icon that is all a control holds is reported.** In a development build, a button or a link whose only content is an icon with no 'label', and which has no name of its own, warns 'missing-name' once, through the runtime channel every Helix warning uses. */
   "helix-headless-icon": DefineCustomElement<
     HelixHeadlessIcon,
     HelixHeadlessIconVueProps,
@@ -19667,6 +19919,12 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessInputVueProps,
     HelixHeadlessInputVueEvents
   >;
+  /** The same strip as 'Heatmap', seen from above at an angle. Each reading is a prism: its top face takes the cell's tone, and its height repeats the value, measured from zero against the highest reading in the table. 'rows="7"' makes a contribution graph, with each week a column running down to the right.  **The height says what the tone says.** Read the exact value from the tooltip or the table, and compare readings by tone. A tall reading at the front can hide a short one behind it, so the newest column stands at the front, where nothing covers it.  **Everything else is 'Heatmap'.** The table named by 'for', the tones and thresholds, the keys, the tooltip, the overview, 'selection-mode', and the events all work as they do there. The class extends the headless heatmap, and its own entry point carries the drawing, so a page using only 'Heatmap' loads none of it.  **'flat' lays every prism down** at no height, which leaves the tones on a plane at the same angle.  **'gap' and 'min-cell' set the smallest cell.** The drawing scales as a whole, so a wider box draws larger cells and the gap grows with them. A box too narrow for every column at 'min-cell' draws the newest that fit.  **The drawing is SVG and holds still.** It scales with its box through its 'viewBox', needs no WebGL, and has no motion to pause.  **Keyboard.** The keys are 'Heatmap''s. Down moves to the next reading in a column, drawn down to the left, and Right to the same reading in the next column, drawn down to the right.  | Key | What it does | |---|---| | Tab | Moves focus to the strip and shows the first cell. | | Down, Up | Moves to the next or the previous cell. | | Right, Left | Moves a column on or back, a week with 'rows="7"'. On a right-to-left page, Left moves on. | | Home, End | Moves to the first or the last cell. | | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. | | Enter, Space | Presses the cell, which sends 'helix-reading-press', and selects it or lets it go under 'selection-mode'. | | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under 'selection-mode="multiple"'. | | Escape | Puts the cell's tooltip away. | */
+  "helix-headless-isometric-heatmap": DefineCustomElement<
+    HelixHeadlessIsometricHeatmap,
+    HelixHeadlessIsometricHeatmapVueProps,
+    HelixHeadlessIsometricHeatmapVueEvents
+  >;
   /** Renders a '<kbd>' element.  Each element holds one key, except when you use 'keys'. For a sequence or a chord, write one element per key and put the separator between them as text, such as "then" or "plus".  'keys' renders the right glyphs for the platform. Given 'mod', it renders '⌘K' on Apple devices and 'Ctrl+K' everywhere else. A '⌘K' typed into a template is wrong for anyone on Windows.  The element binds the shortcut only when 'within' is set. By default it draws the key and listens for nothing.  **'for' names the control the shortcut works**, and the key writes its chord onto that control's 'aria-keyshortcuts', in the platform's words ('Meta+K' on an Apple keyboard, 'Control+K' elsewhere), so a screen reader announces the shortcut with the control. A chord the page wrote there itself is left alone, and the key takes back only what it added.  A chord is drawn with the platform's modifiers first, in its order, so one 'keys' value is right everywhere: 'mod+shift+p' is '⇧⌘P' on an Apple keyboard and 'Ctrl+Shift+P' elsewhere. Where it is drawn in glyphs, it is read in words, such as 'Shift Command P'.  'caps' draws a chord as a key per key: each is a 'key' part and the '+' between two a 'separator' part, so a sheet can draw a cap for each. 'key-labels' renames any key, on every platform, such as 'key-labels='{"mod":"Command"}''. On an Apple keyboard a word joins the next key with a hyphen, as in 'Command-K'.  **'activate' makes the shortcut work the control 'for' names**, with no script: 'activate="focus"' moves focus to it, as '/' does to a search field, and 'activate="click"' presses it. It acts once 'helix-shortcut' has gone out and no listener canceled it, and only where 'within' listens. */
   "helix-headless-kbd": DefineCustomElement<
     HelixHeadlessKbd,

package/types/words.d.ts

@@ -1911,6 +1911,75 @@ declare module '@fusion.dev/helix-core' {
        */
       revealLabel: Message
     }
+    'helix-isometric-heatmap': {
+      /**
+       * The name the `overview` gives the busiest reading, `{busiestLabel}` in
+       * `overview-label`.
+       *
+       * English: `Busiest`
+       */
+      busiestLabel: Message
+      /**
+       * The words shown in place of the drawing when the table has no readings,
+       * and the fallback of the `empty` slot.
+       *
+       * English: `No readings`
+       */
+      emptyText: Message
+      /**
+       * 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.
+       *
+       * English: `Loading readings`
+       */
+      loadingText: Message
+      /**
+       * 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.
+       *
+       * English: `{busiestLabel}: {busiest}; {totalLabel} {total}.`
+       */
+      overviewLabel: Message
+      /**
+       * 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`.
+       *
+       * English: `{position} of {count}`
+       */
+      positionLabel: Message
+      /**
+       * What the readout added for a selected cell, under `selection-mode`.
+       *
+       * English: `selected`
+       */
+      selectedLabel: Message
+      /**
+       * 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}}`.
+       *
+       * English: `{count, plural, one {# selected} other {# selected}}`
+       */
+      selectionLabel: Message
+      /**
+       * The strip's name where the chart has none: no `aria-label`, `label`, or
+       * table caption.
+       *
+       * English: `Heatmap`
+       */
+      stripLabel: Message
+      /**
+       * The name the `overview` gives the total of the readings drawn,
+       * `{totalLabel}` in `overview-label`.
+       *
+       * English: `Total`
+       */
+      totalLabel: Message
+    }
     'helix-lightbox': {
       /**
        * The close control's accessible name. Translate it with the rest of your