@fusion.dev/helix-headless 0.184.0 → 0.186.0

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,
@@ -4889,6 +4890,16 @@ and the grid becomes a tree grid.
 Reflected, because the styled tier indents a tree grid's row headers by
 it. No default, so a table that sets none writes nothing onto its host. */
   childField?: (HelixHeadlessDataTable["childField"]) | undefined;
+  /** The column tracks, as a grid track list such as `2fr 1fr max-content`,
+dealt out one track to a column in the order the columns are written. A
+column's own `width` wins in its place, and a column it does not reach
+takes the track a column with no `width` takes.
+
+**The one track list a server can send.** A server rendering this element
+has no columns to read a `width` from, and neither has a stylesheet laying
+out the rows a page served before the table upgrades, so a table sized here
+lays those rows out at the widths it draws. */
+  columns?: (HelixHeadlessDataTable["columns"]) | undefined;
   /** The keys of the rows open at the start, separated by commas. Used until
 `expanded` is set. */
   "default-expanded"?: (HelixHeadlessDataTable["defaultExpanded"]) | undefined;
@@ -8471,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. */
@@ -8871,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,
@@ -15441,13 +15701,11 @@ and each column may say otherwise.
 **It is also the only track list a server can send.** The shim has no tree
 to walk, so a render there knows of no columns and this attribute is the
 whole answer: a table given one lays its grid out in the first paint, and a
-table sized only by its columns is one track wide until it upgrades.
+table sized only by its columns takes, until it upgrades, a track for each
+column at the width a column with no `width` takes (`helix.css`).
 
-**Data Table has none of this, and should not.** Its columns are its schema
-rather than an option, so there is always a column to write a `width` on
-and a list here would be a second way to say what that says. This table's
-cells are markup, and a table written as rows of cells with no column
-declared in it has nowhere else to be sized from. */
+Data Table takes the same list, for the same reason: a data table that
+serves its first page as rows is laid out by it before it upgrades. */
   columns?: (HelixHeadlessTable["columns"]) | undefined;
   /** The keys of the rows whose rows are shown at the start, separated by
 commas. Used until `expanded` is set. */
@@ -19203,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. */
@@ -19509,7 +19769,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessCopyButtonVueProps,
     HelixHeadlessCopyButtonVueEvents
   >;
-  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **Write the first page as rows, so the served HTML carries the values.** The table reads each cell from its column, and a server does not pass the column children to this element, so on its own it serves the headings and no values. Write the first page under the columns as 'TableRow' and 'TableCell' elements, in the table's sort and page size and formatted as its columns draw them. The table shows your rows until 'rows' holds a row, then draws its own in their place and leaves yours in the page, unshown. A development build warns when the two differ. In React, map the first page of the same array in the same server component.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one last   chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. Under 'selection-behavior="replace"', selects it alone, and Control or Command with Space adds or takes out the row. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  When a fetch fails, set 'error-text', such as "The files did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you.  'DataTable' has no 'columns' attribute. Each 'TableColumn' is part of the schema, so you size a column with its own 'width'. 'Table' has 'columns' because its cells are markup you write and it can have no columns at all. Written on 'DataTable', 'columns' has no effect, so watch for it when you move a table from 'Table' to 'DataTable'.  **The columns are an import of their own.** A column is the Table family's 'TableColumn', which the data table does not register, so a page that writes one imports the Table entry beside the data table:  '''js import '@fusion.dev/helix/data-table' import '@fusion.dev/helix/table' '''  In development, a data table holding a column nobody registered says so once the page has loaded, with the line to add. */
+  /** Declare the columns as 'TableColumn' children and pass the rows as an array. The schema stays readable in the HTML, and the rows can be windowed, which ten thousand row elements cannot be.  '''html <helix-headless-data-table .rows=${rows} sort="name:asc" page-size="20">   <helix-headless-table-column field="name" sortable>Name</helix-headless-table-column>   <helix-headless-table-column field="size" text-align="end" sortable .cell=${bytes}>Size</helix-headless-table-column> </helix-headless-data-table> '''  For a short table written out by hand, use 'Table', which takes rows as markup.  Sort and filter apply to the whole set, including the rows on other pages.  **Write the first page as rows, so the served HTML carries the values.** The table reads each cell from its column, and a server does not pass the column children to this element, so on its own it serves the headings and no values. Write the first page under the columns as 'TableRow' and 'TableCell' elements, in the table's sort and page size and formatted as its columns draw them. The table shows your rows until 'rows' holds a row, then draws its own in their place and leaves yours in the page, unshown. A development build warns when the two differ. In React, map the first page of the same array in the same server component.  'selectable' adds a column of checkboxes, keyed on 'row-key':  - A row is selected by its key, so the selection survives a sort, a filter,   and a page change. - 'selected' holds the chosen keys, comma separated, the same shape 'Listbox'   uses for a multiple choice. As with 'sort', writing it applies the   selection, and 'default-selected' holds what the markup declared. - The checkbox in the heading selects every row in the result, across pages,   and shows a dash while only some are chosen. - Shift with a press on a checkbox selects every row between it and the row   last chosen. - 'selection-behavior="replace"' makes a press or a move select the row   alone, as a file list does. Control or Command with a press adds or takes   out one row, and Shift with a press selects every row from the one last   chosen.  To act on a single row, such as opening it, put a link or a button in a cell.  **Keyboard.** The grid is one tab stop, and the arrow keys move between its cells, the headings included.  | Key | What it does | |---|---| | Right, Left | Moves one cell along the row. Left moves on, on a right-to-left page. | | Down, Up | Moves one row, the heading row and the 'load-more' row included. | | Home, End | Moves to the first or the last cell of the row. | | Control with Home or End | Moves to the first or the last cell of the grid. | | Page Down, Page Up | Moves by the rows that fit in view. | | Enter, F2 | Moves into the cell's controls. Escape moves back to the cell, and Tab moves between the controls of one cell. | | Enter, Space on a sortable heading | Sorts by the column. | | Enter, Space on the 'load-more' row | Sends 'helix-load-more'. | | Space on a row | Selects the row, in a 'selectable' table. Under 'selection-behavior="replace"', selects it alone, and Control or Command with Space adds or takes out the row. | | Down, Up, Page Down, Page Up under 'selection-behavior="replace"' | Selects the row it moves to alone. Control or Command with the key moves without selecting. | | Shift with Down or Up | Selects the rows it moves across, in a 'selectable' table. | | Shift with Space | Selects every row from the one last chosen, in a 'selectable' table. | | Control or Command with A | Selects every row, in a 'selectable' table. | | Right on a row header in a tree grid | Opens a closed row, and moves one cell along an open one. | | Left on a row header in a tree grid | Closes an open row, and moves to the parent of a closed one. | | A letter or a word | Moves to the next row whose row header starts with what you typed. |  'selected' and 'expanded' hold their keys in the order of the rows, as do 'helix-select', 'helix-selected' and 'helix-expand'.  Each row is named by its row header, the column marked 'row-header', or the first column with a 'field' where none is. A screen reader says it as a reader moves between rows.  **Rows that hold rows.** 'child-field' names the field that holds a row's child rows, and the grid becomes a tree grid. The row header column draws a mark that a press opens and closes a row by, and 'expanded' holds the keys of the open rows, which 'row-key' names. Right on a closed row's header opens it, Left on an open one closes it, and Left on a child moves to its parent. A sort orders the rows under each parent, and a search shows the rows that lead to each match, open.  'load-more' adds a row after the last one with a button that sends 'helix-load-more'. A 'windowed' table also sends it by itself once a reader scrolls within one screen of the end, once for each number of rows. Add the next rows to 'rows', and set 'loading' while they are on their way.  When a fetch fails, set 'error-text', such as "The files did not load", and put a button that tries again in the 'error' slot. The line shows after the rows in place of the empty and loading lines, the live region says it, and the table takes the 'error' state. Clear it once you try again.  The controls inside the cells leave the tab order, so Tab moves past the whole grid. A windowed table keeps the row holding focus drawn while the rest scroll away.  People can resize and reorder the columns. 'resizable' on a column puts a separator on its edge. 'reorderable' on the table puts a grip on each heading that has a 'field', moved by dragging or with the arrow keys. The new order is written to 'order' as a list of fields. Your markup is not rewritten: the table assigns the headings to its header in that order.  **'reorderable-rows' lets people move rows.** A column of grips leads each row, named by 'move-row-label'. Drag a grip to move its row, and the table scrolls near an edge. Or press Space or Enter on a grip, or click it, to pick up its row, move it with Down and Up, Home and End, and press Space or Enter again to drop it. A click on another row drops it there, and Escape puts it back. The table says each step in its 'live' region. A drop sends 'helix-before-reorder', which you can refuse, and then 'helix-reorder' with 'kind' set to 'row', whose 'keys' hold every key of 'rows' in the new order. **You move the rows**: set 'rows' to the new order, and the table draws it. Set 'row-key', so a row is known by its key once it has moved. The grips do nothing while a 'sort' is set, since the sort decides the order, and a tree grid draws none.  'csv()' returns the result as text: every row that passes the filter, in the order and the columns on screen. Saving the file is up to you.  Size a column with its own 'width', or every column at once with 'columns', a track list dealt out one track to a column in the order they are written, as 'Table' deals it. A column's 'width' wins in its place. **A table that serves its first page takes its widths from 'columns'**: a server and a stylesheet can read the table's own attributes and not its columns', so the served rows are laid out at the widths the table draws.  **The columns are an import of their own.** A column is the Table family's 'TableColumn', which the data table does not register, so a page that writes one imports the Table entry beside the data table:  '''js import '@fusion.dev/helix/data-table' import '@fusion.dev/helix/table' '''  In development, a data table holding a column nobody registered says so once the page has loaded, with the line to add. */
   "helix-headless-data-table": DefineCustomElement<
     HelixHeadlessDataTable,
     HelixHeadlessDataTableVueProps,
@@ -19623,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,
@@ -19641,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,
@@ -19659,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