@fusion.dev/helix-headless 0.180.0 → 0.181.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.180.0",
+  "version": "0.181.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -49,13 +49,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.180.0",
-    "@fusion.dev/helix-icons": "0.180.0",
+    "@fusion.dev/helix-core": "0.181.0",
+    "@fusion.dev/helix-icons": "0.181.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.180.0",
-    "@fusion.dev/helix-testing": "0.180.0",
+    "@fusion.dev/helix-cem": "0.181.0",
+    "@fusion.dev/helix-testing": "0.181.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

@@ -15784,6 +15784,14 @@ Absent selects nothing, and a press or Space does what it did. */
 
 Absent selects nothing, and a press or Space does what it did. */
   selectionMode?: (HelixHeadlessHeatmap["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"?: (HelixHeadlessHeatmap["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?: (HelixHeadlessHeatmap["selectionShape"]) | undefined;
   /** The strip's name where the chart has none: no `aria-label`, `label`, or
 table caption. */
   "strip-label"?: (HelixHeadlessHeatmap["stripLabel"]) | undefined;
@@ -16004,6 +16012,14 @@ Absent selects nothing, and a press or Space does what it did. */
 
 Absent selects nothing, and a press or Space does what it did. */
   "prop:selectionMode"?: (HelixHeadlessHeatmap["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. */
+  "attr:selection-shape"?: (HelixHeadlessHeatmap["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. */
+  "prop:selectionShape"?: (HelixHeadlessHeatmap["selectionShape"]) | undefined;
   /** The strip's name where the chart has none: no `aria-label`, `label`, or
 table caption. */
   "attr:strip-label"?: (HelixHeadlessHeatmap["stripLabel"]) | undefined;
@@ -41939,6 +41955,9 @@ export type CustomElements = {
    * Methods that can be called to access component functionality.
    *
    * - `formResetCallback() => void`: Resets the box to the state set in its markup.
+   * - `click() => void`: Ticks or clears the box, as `click()` does a native checkbox: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `requestChecked(next: boolean) => boolean`: Requests a change to `checked`, and returns whether it was applied.
    *
    * Announces before it acts, so `preventDefault()` on the
@@ -48883,6 +48902,16 @@ export type CustomElements = {
    * `helix-before-change` and tells with `change`, and the `selection` part says
    * how many are selected, in `selection-label`.
    *
+   * **`selection-shape="rectangle"` selects a rectangle of cells** under
+   * `multiple`, as a spreadsheet selects a range: the cells between two corners
+   * by row and by column, such as the same weekdays across three weeks with
+   * `rows="7"`. Shift with a key that moves grows or shrinks it from the cell
+   * last pressed, Shift with a click takes it to the cell clicked, and a click
+   * with Ctrl or Command selects one cell or lets it go and starts the next
+   * rectangle there. The rectangle is the same cells on a right-to-left page,
+   * where the columns run from the right, a short last column adds only the
+   * cells it has, and `value` lists the selected days in the table's order.
+   *
    * **Under `selection-mode` the strip is a grid**, so the selection is state a
    * reader is told rather than words alone: each column of the strip is a `row`,
    * a week with `rows="7"`, and each cell a `gridcell` named by its row in the
@@ -48913,6 +48942,7 @@ export type CustomElements = {
    * | 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, Home, End, Page Up or Page Down, with `selection-shape="rectangle"` | Grows or shrinks the rectangle from the last cell pressed to where the key went, in rows and columns, under `selection-mode="multiple"`. |
    * | Escape | Puts the cell's tooltip away. |
    *
    * ## Attributes & Properties
@@ -48959,6 +48989,9 @@ export type CustomElements = {
    * - `selection-mode`/`selectionMode`: How many cells a reader can select: `single` or `multiple`.
    *
    * Absent selects nothing, and a press or Space does what it did.
+   * - `selection-shape`/`selectionShape`: 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.
    * - `strip-label`/`stripLabel`: The strip's name where the chart has none: no `aria-label`, `label`, or
    * table caption.
    * - `thresholds`: Lower bounds for the tone buckets, in the order the tones are given.
@@ -57557,6 +57590,9 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `click() => void`: Chooses the radio, as `click()` does a native radio: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `focusItem() => void`: Moves focus to the item's control, for the set's arrow keys.
    *
    * The set drives the keys and cannot reach the control itself, which is
@@ -60697,6 +60733,9 @@ export type CustomElements = {
    * Methods that can be called to access component functionality.
    *
    * - `formResetCallback() => void`: Returns the switch to the state its markup declared.
+   * - `click() => void`: Turns the switch on or off, as `click()` does a native checkbox: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `requestChecked(next: boolean) => boolean`: Requests a change to `checked`, and returns whether it was applied.
    *
    * Announces before it acts, so `preventDefault()` on the
@@ -64415,6 +64454,9 @@ export type CustomElements = {
    *
    * - `select() => boolean`: Chooses the item in its group, or, on its own, flips `selected` once
    * `helix-select` stands and sends `change`.
+   * - `click() => void`: Presses the toggle, as `click()` does a native button: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `focusItem() => void`: Moves focus to the item's control, for the set's arrow keys.
    *
    * The set drives the keys and cannot reach the control itself, which is
@@ -71630,6 +71672,9 @@ export type CustomElementsSolidJs = {
    * Methods that can be called to access component functionality.
    *
    * - `formResetCallback() => void`: Resets the box to the state set in its markup.
+   * - `click() => void`: Ticks or clears the box, as `click()` does a native checkbox: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `requestChecked(next: boolean) => boolean`: Requests a change to `checked`, and returns whether it was applied.
    *
    * Announces before it acts, so `preventDefault()` on the
@@ -78630,6 +78675,16 @@ export type CustomElementsSolidJs = {
    * `helix-before-change` and tells with `change`, and the `selection` part says
    * how many are selected, in `selection-label`.
    *
+   * **`selection-shape="rectangle"` selects a rectangle of cells** under
+   * `multiple`, as a spreadsheet selects a range: the cells between two corners
+   * by row and by column, such as the same weekdays across three weeks with
+   * `rows="7"`. Shift with a key that moves grows or shrinks it from the cell
+   * last pressed, Shift with a click takes it to the cell clicked, and a click
+   * with Ctrl or Command selects one cell or lets it go and starts the next
+   * rectangle there. The rectangle is the same cells on a right-to-left page,
+   * where the columns run from the right, a short last column adds only the
+   * cells it has, and `value` lists the selected days in the table's order.
+   *
    * **Under `selection-mode` the strip is a grid**, so the selection is state a
    * reader is told rather than words alone: each column of the strip is a `row`,
    * a week with `rows="7"`, and each cell a `gridcell` named by its row in the
@@ -78660,6 +78715,7 @@ export type CustomElementsSolidJs = {
    * | 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, Home, End, Page Up or Page Down, with `selection-shape="rectangle"` | Grows or shrinks the rectangle from the last cell pressed to where the key went, in rows and columns, under `selection-mode="multiple"`. |
    * | Escape | Puts the cell's tooltip away. |
    *
    * ## Attributes & Properties
@@ -78706,6 +78762,9 @@ export type CustomElementsSolidJs = {
    * - `selection-mode`/`selectionMode`: How many cells a reader can select: `single` or `multiple`.
    *
    * Absent selects nothing, and a press or Space does what it did.
+   * - `selection-shape`/`selectionShape`: 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.
    * - `strip-label`/`stripLabel`: The strip's name where the chart has none: no `aria-label`, `label`, or
    * table caption.
    * - `thresholds`: Lower bounds for the tone buckets, in the order the tones are given.
@@ -87411,6 +87470,9 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `click() => void`: Chooses the radio, as `click()` does a native radio: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `focusItem() => void`: Moves focus to the item's control, for the set's arrow keys.
    *
    * The set drives the keys and cannot reach the control itself, which is
@@ -90594,6 +90656,9 @@ export type CustomElementsSolidJs = {
    * Methods that can be called to access component functionality.
    *
    * - `formResetCallback() => void`: Returns the switch to the state its markup declared.
+   * - `click() => void`: Turns the switch on or off, as `click()` does a native checkbox: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `requestChecked(next: boolean) => boolean`: Requests a change to `checked`, and returns whether it was applied.
    *
    * Announces before it acts, so `preventDefault()` on the
@@ -94359,6 +94424,9 @@ export type CustomElementsSolidJs = {
    *
    * - `select() => boolean`: Chooses the item in its group, or, on its own, flips `selected` once
    * `helix-select` stands and sends `change`.
+   * - `click() => void`: Presses the toggle, as `click()` does a native button: passed to the control
+   * inside, so the one click a listener hears is the control's, after it has
+   * moved. See `HostClickController`.
    * - `focusItem() => void`: Moves focus to the item's control, for the set's arrow keys.
    *
    * The set drives the keys and cannot reach the control itself, which is

package/types/vue.d.ts

@@ -8116,6 +8116,14 @@ Absent selects nothing, and a press or Space does what it did. */
 
 Absent selects nothing, and a press or Space does what it did. */
   selectionMode?: (HelixHeadlessHeatmap["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"?: (HelixHeadlessHeatmap["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?: (HelixHeadlessHeatmap["selectionShape"]) | undefined;
   /** The strip's name where the chart has none: no `aria-label`, `label`, or
 table caption. */
   "strip-label"?: (HelixHeadlessHeatmap["stripLabel"]) | undefined;
@@ -19576,7 +19584,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessGraphVueProps,
     HelixHeadlessGraphVueEvents
   >;
-  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. PageUp and PageDown move a month, to the same day, where each row's header carries its date as a '<time datetime>', and four columns otherwise, which is four weeks with 'rows="7"'.  **The strip describes itself.** The 'overview' part says the busiest reading and the total of the readings drawn, "Busiest: 11 Jun, 12; Total 84", and the strip is described by it, as every chart is by its summary. Hide it visually. The 'summary' slot is still yours, for words of your own.  **'selection-mode' lets a reader select cells**: 'single' one at a time and 'multiple' any number. Space, Enter or a press selects the cell the keys or the pointer rest on, or lets it go, and under 'multiple' Shift with an arrow, Home, End, PageUp or PageDown takes in every cell from the last one pressed to where the key went. 'value' holds the selected days, separated by commas: each by its row's '<time datetime>', such as '2026-06-11', or by its row's name where the row carries no date. A change asks with 'helix-before-change' and tells with 'change', and the 'selection' part says how many are selected, in 'selection-label'.  **Under 'selection-mode' the strip is a grid**, so the selection is state a reader is told rather than words alone: each column of the strip is a 'row', a week with 'rows="7"', and each cell a 'gridcell' named by its row in the table and carrying 'aria-selected'. The strip says 'aria-multiselectable' under 'multiple' and points at the cell the keys rest on with 'aria-activedescendant', so a screen reader reads that cell, and the 'live' part stays quiet. Without 'selection-mode' nothing is selectable, and the strip is an application with the readout, as every chart's plot is.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' a reading clicked, tapped, or pressed with Enter or Space, each with the row of the table in 'index'.  **Nothing to draw.** A table with no readings shows 'empty-text', "No readings", under the strip, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in place of either, as on every chart.  **Keyboard.** The strip is one tab stop once it has cells.  | 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. | */
+  /** A grid of cells, each colored by a tone. 'rows="1"' makes a status strip, and 'rows="7"' makes a contribution graph. GitHub's contribution graph uses five discrete levels, which a set of tones covers.  Color in a heatmap is per cell. In every other Helix chart, color is per series, so ninety differently colored cells would need ninety series.  **The data is a real '<table>' named by 'for'**, as in every Helix chart, and the table is the accessible representation. Hide it with 'data-hidden-visually', and screen readers still read it.  A cell takes its tone from its own 'data-tone', or from 'thresholds' and 'tones' applied to its value. 'data-tone' wins, so when you already know a day was degraded, you can set the tone directly.  **The headless tier does not resolve tone names.** A tone named 'success' writes '--heatmap-tone: var(--heatmap-tone-success)', and the styled tier or your own stylesheet defines that property. The headless tier does not use 'var(--helix-color-*)'.  **The strip is read by key.** It takes focus once it has cells. The up and down arrows move a cell, the left and right arrows move a column, which is a week with 'rows="7"', and Home and End go to the first and the last. The tooltip follows, the 'live' part says the cell's row in words, and Escape puts the tooltip away. PageUp and PageDown move a month, to the same day, where each row's header carries its date as a '<time datetime>', and four columns otherwise, which is four weeks with 'rows="7"'.  **The strip describes itself.** The 'overview' part says the busiest reading and the total of the readings drawn, "Busiest: 11 Jun, 12; Total 84", and the strip is described by it, as every chart is by its summary. Hide it visually. The 'summary' slot is still yours, for words of your own.  **'selection-mode' lets a reader select cells**: 'single' one at a time and 'multiple' any number. Space, Enter or a press selects the cell the keys or the pointer rest on, or lets it go, and under 'multiple' Shift with an arrow, Home, End, PageUp or PageDown takes in every cell from the last one pressed to where the key went. 'value' holds the selected days, separated by commas: each by its row's '<time datetime>', such as '2026-06-11', or by its row's name where the row carries no date. A change asks with 'helix-before-change' and tells with 'change', and the 'selection' part says how many are selected, in 'selection-label'.  **'selection-shape="rectangle"' selects a rectangle of cells** under 'multiple', as a spreadsheet selects a range: the cells between two corners by row and by column, such as the same weekdays across three weeks with 'rows="7"'. Shift with a key that moves grows or shrinks it from the cell last pressed, Shift with a click takes it to the cell clicked, and a click with Ctrl or Command selects one cell or lets it go and starts the next rectangle there. The rectangle is the same cells on a right-to-left page, where the columns run from the right, a short last column adds only the cells it has, and 'value' lists the selected days in the table's order.  **Under 'selection-mode' the strip is a grid**, so the selection is state a reader is told rather than words alone: each column of the strip is a 'row', a week with 'rows="7"', and each cell a 'gridcell' named by its row in the table and carrying 'aria-selected'. The strip says 'aria-multiselectable' under 'multiple' and points at the cell the keys rest on with 'aria-activedescendant', so a screen reader reads that cell, and the 'live' part stays quiet. Without 'selection-mode' nothing is selectable, and the strip is an application with the readout, as every chart's plot is.  **Readings are sent as every chart sends them.** 'helix-reading-change' says each move of the reading, by pointer, tap or key, and 'helix-reading-press' a reading clicked, tapped, or pressed with Enter or Space, each with the row of the table in 'index'.  **Nothing to draw.** A table with no readings shows 'empty-text', "No readings", under the strip, and 'loading' shows 'loading-text' there until readings arrive. The 'empty' and 'loading' slots take markup in place of either, as on every chart.  **Keyboard.** The strip is one tab stop once it has cells.  | 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, Home, End, Page Up or Page Down, with 'selection-shape="rectangle"' | Grows or shrinks the rectangle from the last cell pressed to where the key went, in rows and columns, under 'selection-mode="multiple"'. | | Escape | Puts the cell's tooltip away. | */
   "helix-headless-heatmap": DefineCustomElement<
     HelixHeadlessHeatmap,
     HelixHeadlessHeatmapVueProps,