@fusion.dev/helix-headless 0.180.1 → 0.181.1

package/custom-elements.json

@@ -6973,9 +6973,13 @@
               "name": "band"
             },
             {
-              "description": "One column.",
+              "description": "One column. Under `stacked`, one segment of a category's column.",
               "name": "bar"
             },
+            {
+              "description": "Under `stacked`, the segment at a column's far end: the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero segment is never the end. Set together with `bar`.",
+              "name": "bar-end"
+            },
             {
               "description": "The far stop of a bar's gradient, where one is used.",
               "name": "bar-wash-end"
@@ -7364,7 +7368,7 @@
                 {
                   "name": "bar",
                   "type": {
-                    "text": "(\n      value: number,\n      index: number,\n      depth: number,\n      tone: number,\n      scale: (value: number) => number,\n      from?: number,\n    ) => TemplateResult"
+                    "text": "(\n      value: number,\n      index: number,\n      depth: number,\n      tone: number,\n      scale: (value: number) => number,\n      from?: number,\n      end?: StackEnd,\n    ) => TemplateResult"
                   }
                 }
               ],
@@ -8510,6 +8514,24 @@
           ],
           "description": "Each column's span in one category, in the order given: a positive reading\nstacks up from zero on the positives before it, and a negative one down\nfrom zero on the negatives before it, so neither hides the other. A blank\nhas no span."
         },
+        {
+          "kind": "function",
+          "name": "stackFarEnds",
+          "return": {
+            "type": {
+              "text": "(StackEnd | undefined)[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "values",
+              "type": {
+                "text": "readonly (number | undefined)[]"
+              }
+            }
+          ],
+          "description": "The segments at a stack's two far ends, in the order given: the last\npositive reading is the end of the stack above zero, and the last negative\nreading is the end of the stack below it. A blank or a zero has no length,\nso it is never an end. Every other segment is `undefined`."
+        },
         {
           "kind": "function",
           "name": "stackEnds",
@@ -8568,6 +8590,14 @@
             "module": "src/bar-chart/stack.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "stackFarEnds",
+          "declaration": {
+            "name": "stackFarEnds",
+            "module": "src/bar-chart/stack.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "stackEnds",
@@ -79063,6 +79093,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",
@@ -79227,7 +79341,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": [
             {
@@ -79549,6 +79663,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",
@@ -79670,6 +79794,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",
@@ -79735,6 +79889,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",
@@ -79747,7 +79927,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",
@@ -80753,6 +80933,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": {
@@ -199886,6 +200075,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.180.1"
+    "version": "0.181.1"
   }
 }

package/dist/bar-chart/root/bar-chart-root.d.ts

@@ -72,7 +72,8 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  *
  * @csspart axis - The numbers of one scale: the primary under `value-axis`, and both when `secondary` splits the chart into two scales.
  * @csspart band - The category band under the pointer.
- * @csspart bar - One column.
+ * @csspart bar - One column. Under `stacked`, one segment of a category's column.
+ * @csspart bar-end - Under `stacked`, the segment at a column's far end: the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero segment is never the end. Set together with `bar`.
  * @csspart bar-wash-end - The far stop of a bar's gradient, where one is used.
  * @csspart bar-wash-start - The stop of a bar's gradient at its base.
  * @csspart baseline - The line the columns stand on.

package/dist/bar-chart/root/bar-chart-root.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, formatWords, HelixElement, HelixReadingChangeEvent, HelixReadingPressEvent, linear, linePath, MixinChartSource, MixinChartStatus, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-import { stackEnds, stackedReadings, stackSpans } from '../stack.js';
+import { stackEnds, stackedReadings, stackFarEnds, stackSpans } from '../stack.js';
 import '../../tooltip/index.js';
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus(MixinChartSource(HelixElement)) {
     constructor() {
@@ -112,7 +112,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
         const stride = (slot * 0.72) / Math.max(abreast, 1);
         const gap = abreast > 1 ? stride * 0.08 : 0;
         const thickness = stride - gap;
-        const bar = (value, index, depth, tone, scale, from) => {
+        const bar = (value, index, depth, tone, scale, from, end) => {
             const at = scale(value);
             const base = from === undefined ? floor : scale(from);
             const along = Math.min(base, at);
@@ -120,19 +120,21 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
             const across = index * slot + slot * 0.14 + depth * stride + gap / 2;
             return sideways
                 ? svg `<rect
+            data-end=${end ?? nothing}
             data-series=${seriesIndex(tone)}
             height=${thickness}
             style="--chart-series: var(--chart-series-${seriesIndex(tone)}); --chart-bar-wash: url(#helix-bar-wash-${seriesIndex(tone)})"
-            part="bar"
+            part="bar${end ? ' bar-end' : ''}"
             width=${size}
             x=${along}
             y=${across}
           />`
                 : svg `<rect
+            data-end=${end ?? nothing}
             data-series=${seriesIndex(tone)}
             height=${size}
             style="--chart-series: var(--chart-series-${seriesIndex(tone)}); --chart-bar-wash: url(#helix-bar-wash-${seriesIndex(tone)})"
-            part="bar"
+            part="bar${end ? ' bar-end' : ''}"
             width=${thickness}
             x=${across}
             y=${along}
@@ -196,10 +198,12 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
         const scales = [...new Set(columns.map(({ one }) => against(one)))];
         return scales.flatMap((scale) => {
             const mine = columns.filter(({ one }) => against(one) === scale);
-            const spans = stackSpans(mine.map(({ slots }) => slots[index]?.value));
+            const values = mine.map(({ slots }) => slots[index]?.value);
+            const spans = stackSpans(values);
+            const ends = stackFarEnds(values);
             return mine.flatMap(({ tone }, place) => {
                 const span = spans[place];
-                return span === undefined ? [] : [bar(span[1], index, 0, tone, scale, span[0])];
+                return span === undefined ? [] : [bar(span[1], index, 0, tone, scale, span[0], ends[place])];
             });
         });
     }

package/dist/bar-chart/stack.d.ts

@@ -8,6 +8,15 @@ export type Span = readonly [from: number, to: number];
  * has no span.
  */
 export declare const stackSpans: (values: readonly (number | undefined)[]) => (Span | undefined)[];
+/** Which way a stack's end segment grows from zero. */
+export type StackEnd = 'positive' | 'negative';
+/**
+ * The segments at a stack's two far ends, in the order given: the last
+ * positive reading is the end of the stack above zero, and the last negative
+ * reading is the end of the stack below it. A blank or a zero has no length,
+ * so it is never an end. Every other segment is `undefined`.
+ */
+export declare const stackFarEnds: (values: readonly (number | undefined)[]) => (StackEnd | undefined)[];
 /**
  * Every end a stack reaches across the categories, which is what its scale
  * has to hold: the top of each stack of positives and the foot of each stack

package/dist/bar-chart/stack.js

@@ -17,6 +17,11 @@ export const stackSpans = (values) => {
         return [from, to];
     });
 };
+export const stackFarEnds = (values) => {
+    const up = values.findLastIndex((value) => value !== undefined && value > 0);
+    const down = values.findLastIndex((value) => value !== undefined && value < 0);
+    return values.map((_, at) => (at === up ? 'positive' : at === down ? 'negative' : undefined));
+};
 export const stackEnds = (categories) => categories.flatMap((values) => stackSpans(values).flatMap((span) => (span === undefined ? [] : [span[1]])));
 export const stackedReadings = (group, count, lined) => {
     const slots = group.filter((one) => !lined(one)).map((one) => byRow(one, count));

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' })