@fusion.dev/helix-headless 0.180.0 → 0.181.0

package/custom-elements.json

@@ -29727,6 +29727,19 @@
               },
               "description": "Asks the slot, and records the answer as a state.\n\nCalled on `slotchange` and after every update, and the second is not\nbelt-and-braces: **`slotchange` does not fire when nothing is assigned.**\nWithout it a checkbox labeled only by its property, which is most of them,\nnever hears about its own label and renders without one.\n\n**`:state(has-label)` and not `data-has-label`.** The answer comes from\n`assignedNodes` and a server has no tree to ask, so an attribute would\nappear on every labeled checkbox the instant it upgraded and on none that\nany server sent. See `HelixElement.toggleState`."
             },
+            {
+              "kind": "method",
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Ticks or clears the box, as `click()` does a native checkbox: passed to the control\ninside, so the one click a listener hears is the control's, after it has\nmoved. See `HostClickController`.",
+              "type": {
+                "text": "click() => void"
+              }
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -79050,6 +79063,90 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/heatmap/rectangle.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "rectangleOf",
+          "return": {
+            "type": {
+              "text": "number[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "count",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "rows",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "from",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "to",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "The cells between `from` and `to` by row and by column, in the order the\ncells are drawn: every cell whose column lies between theirs and whose row\nlies between theirs. A place past the end of a short last column holds no\ncell and is skipped. With one row, it is the run of cells from one to the\nother."
+        },
+        {
+          "kind": "function",
+          "name": "inSequence",
+          "return": {
+            "type": {
+              "text": "string[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "picked",
+              "type": {
+                "text": "readonly string[]"
+              }
+            },
+            {
+              "name": "order",
+              "type": {
+                "text": "readonly string[]"
+              }
+            }
+          ],
+          "description": "`picked` without repeats, in the order `order` gives: the selected cells in\nthe order the table lists them. A value `order` does not hold keeps its\nplace after the rest, so a selected day the strip no longer draws stays\nselected."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "rectangleOf",
+          "declaration": {
+            "name": "rectangleOf",
+            "module": "src/heatmap/rectangle.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "inSequence",
+          "declaration": {
+            "name": "inSequence",
+            "module": "src/heatmap/rectangle.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/heatmap/root/buckets.ts",
@@ -79214,7 +79311,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A grid of cells, each colored by a tone. `rows=\"1\"` makes a status strip, and\n`rows=\"7\"` makes a contribution graph. GitHub's contribution graph uses five\ndiscrete levels, which a set of tones covers.\n\nColor in a heatmap is per cell. In every other Helix chart, color is per\nseries, so ninety differently colored cells would need ninety series.\n\n**The data is a real `<table>` named by `for`**, as in every Helix chart, and\nthe table is the accessible representation. Hide it with\n`data-hidden-visually`, and screen readers still read it.\n\nA cell takes its tone from its own `data-tone`, or from `thresholds` and\n`tones` applied to its value. `data-tone` wins, so when you already know a\nday was degraded, you can set the tone directly.\n\n**The headless tier does not resolve tone names.** A tone named `success`\nwrites `--heatmap-tone: var(--heatmap-tone-success)`, and the styled tier or\nyour own stylesheet defines that property. The headless tier does not use\n`var(--helix-color-*)`.\n\n**The strip is read by key.** It takes focus once it has cells. The up and\ndown arrows move a cell, the left and right arrows move a column, which is a\nweek with `rows=\"7\"`, and Home and End go to the first and the last. The\ntooltip follows, the `live` part says the cell's row in words, and Escape\nputs the tooltip away. PageUp and PageDown move a month, to the same day,\nwhere each row's header carries its date as a `<time datetime>`, and four\ncolumns otherwise, which is four weeks with `rows=\"7\"`.\n\n**The strip describes itself.** The `overview` part says the busiest\nreading and the total of the readings drawn, \"Busiest: 11 Jun, 12; Total\n84\", and the strip is described by it, as every chart is by its summary.\nHide it visually. The `summary` slot is still yours, for words of your own.\n\n**`selection-mode` lets a reader select cells**: `single` one at a time and\n`multiple` any number. Space, Enter or a press selects the cell the keys or\nthe pointer rest on, or lets it go, and under `multiple` Shift with an arrow,\nHome, End, PageUp or PageDown takes in every cell from the last one pressed\nto where the key went. `value` holds the selected days, separated by\ncommas: each by its row's `<time datetime>`, such as `2026-06-11`, or by\nits row's name where the row carries no date. A change asks with\n`helix-before-change` and tells with `change`, and the `selection` part says\nhow many are selected, in `selection-label`.\n\n**Under `selection-mode` the strip is a grid**, so the selection is state a\nreader is told rather than words alone: each column of the strip is a `row`,\na week with `rows=\"7\"`, and each cell a `gridcell` named by its row in the\ntable and carrying `aria-selected`. The strip says\n`aria-multiselectable` under `multiple` and points at the cell the keys rest\non with `aria-activedescendant`, so a screen reader reads that cell, and the\n`live` part stays quiet. Without `selection-mode` nothing is selectable, and\nthe strip is an application with the readout, as every chart's plot is.\n\n**Readings are sent as every chart sends them.** `helix-reading-change`\nsays each move of the reading, by pointer, tap or key, and\n`helix-reading-press` a reading clicked, tapped, or pressed with Enter or\nSpace, each with the row of the table in `index`.\n\n**Nothing to draw.** A table with no readings shows `empty-text`, \"No\nreadings\", under the strip, and `loading` shows `loading-text` there until\nreadings arrive. The `empty` and `loading` slots take markup in place of\neither, as on every chart.\n\n**Keyboard.** The strip is one tab stop once it has cells.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the strip and shows the first cell. |\n| Down, Up | Moves to the next or the previous cell. |\n| Right, Left | Moves a column on or back, a week with `rows=\"7\"`. On a right-to-left page, Left moves on. |\n| Home, End | Moves to the first or the last cell. |\n| Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |\n| Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |\n| 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\"`. |\n| Escape | Puts the cell's tooltip away. |",
+          "description": "A grid of cells, each colored by a tone. `rows=\"1\"` makes a status strip, and\n`rows=\"7\"` makes a contribution graph. GitHub's contribution graph uses five\ndiscrete levels, which a set of tones covers.\n\nColor in a heatmap is per cell. In every other Helix chart, color is per\nseries, so ninety differently colored cells would need ninety series.\n\n**The data is a real `<table>` named by `for`**, as in every Helix chart, and\nthe table is the accessible representation. Hide it with\n`data-hidden-visually`, and screen readers still read it.\n\nA cell takes its tone from its own `data-tone`, or from `thresholds` and\n`tones` applied to its value. `data-tone` wins, so when you already know a\nday was degraded, you can set the tone directly.\n\n**The headless tier does not resolve tone names.** A tone named `success`\nwrites `--heatmap-tone: var(--heatmap-tone-success)`, and the styled tier or\nyour own stylesheet defines that property. The headless tier does not use\n`var(--helix-color-*)`.\n\n**The strip is read by key.** It takes focus once it has cells. The up and\ndown arrows move a cell, the left and right arrows move a column, which is a\nweek with `rows=\"7\"`, and Home and End go to the first and the last. The\ntooltip follows, the `live` part says the cell's row in words, and Escape\nputs the tooltip away. PageUp and PageDown move a month, to the same day,\nwhere each row's header carries its date as a `<time datetime>`, and four\ncolumns otherwise, which is four weeks with `rows=\"7\"`.\n\n**The strip describes itself.** The `overview` part says the busiest\nreading and the total of the readings drawn, \"Busiest: 11 Jun, 12; Total\n84\", and the strip is described by it, as every chart is by its summary.\nHide it visually. The `summary` slot is still yours, for words of your own.\n\n**`selection-mode` lets a reader select cells**: `single` one at a time and\n`multiple` any number. Space, Enter or a press selects the cell the keys or\nthe pointer rest on, or lets it go, and under `multiple` Shift with an arrow,\nHome, End, PageUp or PageDown takes in every cell from the last one pressed\nto where the key went. `value` holds the selected days, separated by\ncommas: each by its row's `<time datetime>`, such as `2026-06-11`, or by\nits row's name where the row carries no date. A change asks with\n`helix-before-change` and tells with `change`, and the `selection` part says\nhow many are selected, in `selection-label`.\n\n**`selection-shape=\"rectangle\"` selects a rectangle of cells** under\n`multiple`, as a spreadsheet selects a range: the cells between two corners\nby row and by column, such as the same weekdays across three weeks with\n`rows=\"7\"`. Shift with a key that moves grows or shrinks it from the cell\nlast pressed, Shift with a click takes it to the cell clicked, and a click\nwith Ctrl or Command selects one cell or lets it go and starts the next\nrectangle there. The rectangle is the same cells on a right-to-left page,\nwhere the columns run from the right, a short last column adds only the\ncells it has, and `value` lists the selected days in the table's order.\n\n**Under `selection-mode` the strip is a grid**, so the selection is state a\nreader is told rather than words alone: each column of the strip is a `row`,\na week with `rows=\"7\"`, and each cell a `gridcell` named by its row in the\ntable and carrying `aria-selected`. The strip says\n`aria-multiselectable` under `multiple` and points at the cell the keys rest\non with `aria-activedescendant`, so a screen reader reads that cell, and the\n`live` part stays quiet. Without `selection-mode` nothing is selectable, and\nthe strip is an application with the readout, as every chart's plot is.\n\n**Readings are sent as every chart sends them.** `helix-reading-change`\nsays each move of the reading, by pointer, tap or key, and\n`helix-reading-press` a reading clicked, tapped, or pressed with Enter or\nSpace, each with the row of the table in `index`.\n\n**Nothing to draw.** A table with no readings shows `empty-text`, \"No\nreadings\", under the strip, and `loading` shows `loading-text` there until\nreadings arrive. The `empty` and `loading` slots take markup in place of\neither, as on every chart.\n\n**Keyboard.** The strip is one tab stop once it has cells.\n\n| Key | What it does |\n|---|---|\n| Tab | Moves focus to the strip and shows the first cell. |\n| Down, Up | Moves to the next or the previous cell. |\n| Right, Left | Moves a column on or back, a week with `rows=\"7\"`. On a right-to-left page, Left moves on. |\n| Home, End | Moves to the first or the last cell. |\n| Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |\n| Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |\n| 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\"`. |\n| 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\"`. |\n| Escape | Puts the cell's tooltip away. |",
           "name": "HelixHeadlessHeatmap",
           "cssProperties": [
             {
@@ -79536,6 +79633,16 @@
               "description": "How many cells a reader can select: `single` or `multiple`.\n\nAbsent selects nothing, and a press or Space does what it did.",
               "attribute": "selection-mode"
             },
+            {
+              "kind": "field",
+              "name": "selectionShape",
+              "type": {
+                "text": "'linear' | 'rectangle'"
+              },
+              "default": "'linear'",
+              "description": "What Shift takes in under `selection-mode=\"multiple\"`: `linear`, every\ncell between two in the table's order, or `rectangle`, the cells between\ntwo corners by row and by column, as a spreadsheet selects a range.",
+              "attribute": "selection-shape"
+            },
             {
               "kind": "field",
               "name": "stripLabel",
@@ -79657,6 +79764,36 @@
               "default": "-1",
               "description": "Where a range taken in with Shift starts: the cell last pressed, or none."
             },
+            {
+              "kind": "field",
+              "name": "left",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "-1",
+              "description": "The cell the keys rested on before the key now being handled moved them."
+            },
+            {
+              "kind": "field",
+              "name": "base",
+              "type": {
+                "text": "string[] | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "What a rectangle is added to: the selection when it was started, less its\nanchor, kept while `value` is still the rectangle last written."
+            },
+            {
+              "kind": "field",
+              "name": "shaped",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private",
+              "default": "undefined",
+              "description": "The `value` the last rectangle wrote."
+            },
             {
               "kind": "field",
               "name": "status",
@@ -79722,6 +79859,32 @@
               ],
               "description": "Selects the drawn cell at `index`, or lets it go, as `selection-mode` says."
             },
+            {
+              "kind": "method",
+              "name": "stretch",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "to",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Selects the rectangle from the anchor to the drawn cell at `to`, beside\nwhat was selected before it started, under `selection-shape=\"rectangle\"`.\nWithout an anchor it starts where the keys were."
+            },
+            {
+              "kind": "field",
+              "name": "onStripKeydown",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Notes where the keys rest before the pointer controller moves them."
+            },
             {
               "kind": "field",
               "name": "onKeydown",
@@ -79734,7 +79897,7 @@
               "name": "onClick",
               "privacy": "private",
               "readonly": true,
-              "description": "A press on a cell selects it, under `selection-mode`."
+              "description": "A press on a cell selects it, under `selection-mode`, and Shift takes the\nrectangle to it under `selection-shape=\"rectangle\"`."
             },
             {
               "kind": "field",
@@ -80740,6 +80903,15 @@
               "description": "How many cells a reader can select: `single` or `multiple`.\n\nAbsent selects nothing, and a press or Space does what it did.",
               "fieldName": "selectionMode"
             },
+            {
+              "name": "selection-shape",
+              "type": {
+                "text": "'linear' | 'rectangle'"
+              },
+              "default": "'linear'",
+              "description": "What Shift takes in under `selection-mode=\"multiple\"`: `linear`, every\ncell between two in the table's order, or `rectangle`, the cells between\ntwo corners by row and by column, as a spreadsheet selects a range.",
+              "fieldName": "selectionShape"
+            },
             {
               "name": "strip-label",
               "type": {
@@ -137270,6 +137442,19 @@
               },
               "description": "Whether the radio holds the group's tab stop. Unset, the chosen radio\nholds it.\n\nThe stop rides on the selection, and an unanswered group has no selection,\nso without this every choice is `tabindex=\"-1\"` and the keyboard cannot\nenter the set at all. The group writes `true` for the chosen radio, or for\nthe first that can be chosen while nothing is, and `false` for every radio,\nthe chosen one too, while a toolbar the group sits in holds the stop.\n\n**Written by the group, with no attribute, and it reaches the control\nrather than the host.** A `tabindex` on the host is two faults at once: it\nis markup a consumer rendered and their server never sent, which React\nreports as a mismatch and does not patch up, and it puts the tab stop on\nthe element rather than on the `<button role=\"radio\">` inside it, so a\nscreen reader meets an unnamed box where a native group would have given\nthem an unchecked radio. `Toggle.Root` carries the same property for the\nsame reason."
             },
+            {
+              "kind": "method",
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Chooses the radio, as `click()` does a native radio: passed to the control\ninside, so the one click a listener hears is the control's, after it has\nmoved. See `HostClickController`.",
+              "type": {
+                "text": "click() => void"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -157082,6 +157267,19 @@
               },
               "description": "The thumb, drawn inside the track after the input: nothing on this tier.\n\nA seam for a tier that draws the thumb as an element, so it can be a part\nand hold icons. An element here would be an empty child on every page that\nloads only this tier, which is the cost the `track` part notes."
             },
+            {
+              "kind": "method",
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Turns the switch on or off, as `click()` does a native checkbox: passed to the control\ninside, so the one click a listener hears is the control's, after it has\nmoved. See `HostClickController`.",
+              "type": {
+                "text": "click() => void"
+              }
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -182922,6 +183120,19 @@
                 "text": "select() => boolean"
               }
             },
+            {
+              "kind": "method",
+              "name": "click",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Presses the toggle, as `click()` does a native button: passed to the control\ninside, so the one click a listener hears is the control's, after it has\nmoved. See `HostClickController`.",
+              "type": {
+                "text": "click() => void"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -199834,6 +200045,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.180.0"
+    "version": "0.181.0"
   }
 }

package/dist/checkbox/root/checkbox-root.d.ts

@@ -152,6 +152,12 @@ export declare class HelixHeadlessCheckbox extends HelixHeadlessCheckbox_base {
      * any server sent. See `HelixElement.toggleState`.
      */
     private syncLabelPresence;
+    /**
+     * 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`.
+     */
+    click(): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/checkbox/root/checkbox-root.js

@@ -83,6 +83,11 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         this.toggleState('has-label', filled && !hidden);
         this.partNamed('label')?.toggleAttribute('hidden', !filled);
     }
+    click() {
+        if (!this.clicks.click()) {
+            super.click();
+        }
+    }
     render() {
         const named = this.label === '' ? this.getAttribute('aria-label') : null;
         return html `<label part="field">

package/dist/heatmap/rectangle.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The arithmetic of a rectangle of cells on a heatmap's strip.
+ *
+ * Pure and beside the family's entry, so a spec holds it without a page. The
+ * strip fills `rows` cells down each column and then across, so cell `i` is in
+ * column `floor(i / rows)` and row `i % rows`, on every page: a right-to-left
+ * page turns the drawing about, and a rectangle between two cells takes in the
+ * same cells whichever way the columns run.
+ */
+/**
+ * The cells between `from` and `to` by row and by column, in the order the
+ * cells are drawn: every cell whose column lies between theirs and whose row
+ * lies between theirs. A place past the end of a short last column holds no
+ * cell and is skipped. With one row, it is the run of cells from one to the
+ * other.
+ */
+export declare const rectangleOf: (count: number, rows: number, from: number, to: number) => number[];
+/**
+ * `picked` without repeats, in the order `order` gives: the selected cells in
+ * the order the table lists them. A value `order` does not hold keeps its
+ * place after the rest, so a selected day the strip no longer draws stays
+ * selected.
+ */
+export declare const inSequence: (picked: readonly string[], order: readonly string[]) => string[];

package/dist/heatmap/rectangle.js

@@ -0,0 +1,18 @@
+const within = (value, a, b) => (value - a) * (value - b) <= 0;
+export const rectangleOf = (count, rows, from, to) => {
+    const taken = [];
+    for (let at = 0; at < count; at += 1) {
+        if (within(Math.floor(at / rows), Math.floor(from / rows), Math.floor(to / rows)) &&
+            within(at % rows, from % rows, to % rows)) {
+            taken.push(at);
+        }
+    }
+    return taken;
+};
+export const inSequence = (picked, order) => {
+    const at = (key) => {
+        const place = order.indexOf(key);
+        return place < 0 ? order.length : place;
+    };
+    return [...new Set(picked)].sort((a, b) => at(a) - at(b));
+};

package/dist/heatmap/root/heatmap-root.d.ts

@@ -50,6 +50,16 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * `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
@@ -80,6 +90,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * | 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. |
  *
  * @since 0.1.0
@@ -227,6 +238,12 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * Absent selects nothing, and a press or Space does what it did.
      */
     selectionMode?: 'multiple' | 'single';
+    /**
+     * 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: 'linear' | 'rectangle';
     /**
      * The strip's name where the chart has none: no `aria-label`, `label`, or
      * table caption.
@@ -318,6 +335,15 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     private announced;
     /** Where a range taken in with Shift starts: the cell last pressed, or none. */
     private anchor;
+    /** The cell the keys rested on before the key now being handled moved them. */
+    private left;
+    /**
+     * What a rectangle is added to: the selection when it was started, less its
+     * anchor, kept while `value` is still the rectangle last written.
+     */
+    private base;
+    /** The `value` the last rectangle wrote. */
+    private shaped;
     /** The region a change of selection is said in, rendered from the first change. */
     private readonly status;
     /**
@@ -334,13 +360,24 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     private choose;
     /** Selects the drawn cell at `index`, or lets it go, as `selection-mode` says. */
     private press;
+    /**
+     * Selects the rectangle from the anchor to the drawn cell at `to`, beside
+     * what was selected before it started, under `selection-shape="rectangle"`.
+     * Without an anchor it starts where the keys were.
+     */
+    private stretch;
+    /** Notes where the keys rest before the pointer controller moves them. */
+    private readonly onStripKeydown;
     /**
      * Space and Enter select the cell the keys rest on, and Shift with a key
      * that moved them takes in the range from the anchor. After the pointer
      * controller, which has already moved `at` for an arrow.
      */
     private readonly onKeydown;
-    /** A press on a cell selects it, under `selection-mode`. */
+    /**
+     * A press on a cell selects it, under `selection-mode`, and Shift takes the
+     * rectangle to it under `selection-shape="rectangle"`.
+     */
     private readonly onClick;
     /**
      * Every row in the table, oldest first, as the table is written, with its

package/dist/heatmap/root/heatmap-root.js

@@ -8,6 +8,7 @@ import { AriaForwardController, byRow, CHART_PLOT, commaList, customElement, dra
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import '../../tooltip/index.js';
+import { inSequence, rectangleOf } from '../rectangle.js';
 import { fits, monthPage, overviewOf, toneOf } from './buckets.js';
 let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
@@ -19,6 +20,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(M
         this.rows = 1;
         this.selectedLabel = 'selected';
         this.selectionLabel = '{count, plural, one {# selected} other {# selected}}';
+        this.selectionShape = 'linear';
         this.stripLabel = 'Heatmap';
         this.thresholds = '';
         this.tones = '';
@@ -32,7 +34,13 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(M
         this.observer = undefined;
         this.announced = undefined;
         this.anchor = -1;
+        this.left = -1;
+        this.base = undefined;
+        this.shaped = undefined;
         this.status = new StatusController(this);
+        this.onStripKeydown = () => {
+            this.left = this.pointer.at;
+        };
         this.onKeydown = (event) => {
             const at = this.pointer.at;
             if (!this.selectionMode || at < 0 || event.altKey || event.ctrlKey || event.metaKey) {
@@ -47,6 +55,10 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(M
             if (!event.shiftKey || !moves || this.selectionMode !== 'multiple') {
                 return;
             }
+            if (this.selectionShape === 'rectangle') {
+                this.stretch(at);
+                return;
+            }
             const keys = this.keysOf(this.drawn);
             const added = rangeAdd(commaList(this.value), keys, this.anchor < 0 ? at : this.anchor, at);
             if (added) {
@@ -56,7 +68,14 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(M
         this.onClick = (event) => {
             const cell = event.target?.closest?.('[part~="cell"]');
             const index = Number(cell?.getAttribute('data-index') ?? -1);
-            if (cell && Number.isInteger(index) && index >= 0) {
+            if (!cell || !Number.isInteger(index) || index < 0) {
+                return;
+            }
+            const rectangle = this.selectionMode === 'multiple' && this.selectionShape === 'rectangle';
+            if (rectangle && event.shiftKey && this.anchor >= 0) {
+                this.stretch(index);
+            }
+            else {
                 this.press(index);
             }
         };
@@ -112,8 +131,23 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(M
             return;
         }
         this.anchor = index;
+        this.base = undefined;
         this.choose(pressedValue(mode, this.value, key));
     }
+    stretch(to) {
+        const keys = this.keysOf(this.drawn);
+        if (this.anchor < 0) {
+            this.anchor = this.left < 0 ? to : this.left;
+        }
+        if (this.base === undefined || this.value !== this.shaped) {
+            const corner = keys[this.anchor];
+            this.base = commaList(this.value).filter((one) => one !== corner);
+        }
+        const taken = rectangleOf(keys.length, this.rowCount, this.anchor, to).map((at) => keys[at] ?? '');
+        const all = this.keysOf(this.points);
+        this.choose(inSequence([...this.base, ...taken].filter(Boolean), all).join(', '));
+        this.shaped = this.value;
+    }
     get points() {
         const series = this.series[0];
         if (!series) {
@@ -250,6 +284,7 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(M
         style="--heatmap-rows: ${this.rowCount}"
         tabindex=${readable ? '0' : nothing}
         @click=${this.onClick}
+        @keydown=${this.onStripKeydown}
         @pointerover=${this.onPointerOver}
         @pointerleave=${this.onPointerLeave}
         @pointerup=${this.onPointerUp}
@@ -348,6 +383,9 @@ __decorate([
 __decorate([
     property({ attribute: 'selection-mode' })
 ], HelixHeadlessHeatmap.prototype, "selectionMode", void 0);
+__decorate([
+    property({ attribute: 'selection-shape' })
+], HelixHeadlessHeatmap.prototype, "selectionShape", void 0);
 __decorate([
     words,
     property({ attribute: 'strip-label' })

package/dist/radio/root/radio-root.d.ts

@@ -106,6 +106,12 @@ export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
      * re-renders nothing.
      */
     protected firstUpdated(changed: PropertyValues): 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`.
+     */
+    click(): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/radio/root/radio-root.js

@@ -22,6 +22,11 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
         super.firstUpdated(changed);
         this.finishHydration();
     }
+    click() {
+        if (!this.clicks.click()) {
+            super.click();
+        }
+    }
     render() {
         return html `<button
       part="item"

package/dist/switch/root/switch-root.d.ts

@@ -101,6 +101,12 @@ export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
      * loads only this tier, which is the cost the `track` part notes.
      */
     protected renderThumb(): TemplateResult | typeof nothing;
+    /**
+     * 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`.
+     */
+    click(): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/switch/root/switch-root.js

@@ -48,6 +48,11 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
     renderThumb() {
         return nothing;
     }
+    click() {
+        if (!this.clicks.click()) {
+            super.click();
+        }
+    }
     render() {
         return html `<label part="field">
       <span part="track">

package/dist/toggle/root/toggle-root.d.ts

@@ -110,6 +110,12 @@ export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
      * re-renders nothing.
      */
     protected firstUpdated(changed: PropertyValues): 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`.
+     */
+    click(): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/toggle/root/toggle-root.js

@@ -41,6 +41,11 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
         this.finishHydration();
         auditName(this, () => this.partNamed('item'), 'Give it words in its default slot, an `aria-label`, or a label on the icon it holds.');
     }
+    click() {
+        if (!this.clicks.click()) {
+            super.click();
+        }
+    }
     render() {
         const alone = this.alone;
         const radio = !alone && this.pressed === undefined;