@fusion.dev/helix-headless 0.178.0 → 0.180.0

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

@@ -256,6 +256,18 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      */
     protected announcePress(click: Event): void;
     private readonly handleClick;
+    /**
+     * Presses the button, as `click()` presses a native one: the command is sent,
+     * the form submits or resets, and `helix-press` says `virtual`.
+     *
+     * **Passed to the inner control, because a click on the host reaches nothing
+     * that acts.** The control in the shadow root is what answers a click, so
+     * `click()` from a script, an automation or a test, dispatched on the host,
+     * submitted nothing and sent no `helix-press`. The control's own click reaches
+     * the host's listeners once, retargeted, as one from a native button does. A
+     * disabled button does nothing, and a pending one refuses the press.
+     */
+    click(): void;
     /** What a press does: sends the command, and submits or resets the form. */
     private act;
     /**

package/dist/button/root/button-root.js

@@ -89,6 +89,15 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         this.recent = {};
         this.dispatchEvent(new HelixPressEvent({ pointerType }));
     }
+    click() {
+        const control = this.partNamed('button');
+        if (control) {
+            control.click();
+        }
+        else {
+            super.click();
+        }
+    }
     act() {
         this.linkCommand();
         this.sendCommand();

package/dist/chat/composer/chat-composer.d.ts

@@ -15,7 +15,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * The composer clears only when no listener cancels the send, so the text is
  * kept when you cancel a send that failed.
  *
- * **In a form, the draft is the composer's value**, submitted under `name`. A
+ * **In a form, the draft is the composer's value**, submitted under `name`,
+ * and an empty draft submits an empty entry, as a native textarea does. A
  * form reset puts back the `value` the markup declared, and a `<fieldset
  * disabled>` turns the composer off. Sending is still `helix-send`, and it
  * does not submit the form.

package/dist/chat/composer/chat-composer.js

@@ -124,7 +124,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         super.updated(changed);
         this.markEmpty();
         if (changed.has('value')) {
-            this.internals.setFormValue(this.value === '' ? null : this.value, this.value);
+            this.internals.setFormValue(this.value, this.value);
         }
         const field = this.partNamed('field');
         if (field?.validity) {

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

@@ -59,6 +59,18 @@ declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusi
  * framework would re-render over an element the combobox inserted, so add the
  * option in your event handler.
  *
+ * **The options are an import of their own.** An option is the Option family's,
+ * which the combobox does not register, so a page that writes one imports it
+ * beside the combobox:
+ *
+ * ```js
+ * import '@fusion.dev/helix/combobox'
+ * import '@fusion.dev/helix/option'
+ * ```
+ *
+ * In development, a combobox holding an option nobody registered says so once
+ * the page has loaded, with the line to add.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms

package/dist/combobox/root/combobox-root.js

@@ -4,13 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, afterLinkFollowed, chosenValues, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, auditChildren, chosenValues, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
-import { optionsAmong } from '../../option/root/option-root.js';
+import { optionsAmong } from '../../option/among.js';
 import { HelixHeadlessTag } from '../../tag/root/tag-root.js';
 import '../../listbox/index.js';
 import '../../tag/root/index.js';
@@ -507,6 +507,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     }
     connectedCallback() {
         super.connectedCallback();
+        auditChildren(this, 'option', 'option', 'it suggests nothing');
         this.addEventListener('helix-select', this.handleLinkFollowed);
         this.watcher = new MutationObserver(() => this.requestUpdate());
         this.watcher.observe(this, {

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

@@ -72,6 +72,18 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * Aria's `Autocomplete` is. The commands are a `listbox` of `option`s. How many commands typing left, the empty text and
  * the loading text are said in a polite live region.
  *
+ * **The commands are an import of their own.** A command is an option, the
+ * Option family's, which the palette does not register, so a page that writes
+ * one imports it beside the palette:
+ *
+ * ```js
+ * import '@fusion.dev/helix/command'
+ * import '@fusion.dev/helix/option'
+ * ```
+ *
+ * In development, a palette holding an option nobody registered says so once
+ * the page has loaded, with the line to add.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation

package/dist/command/root/command-root.js

@@ -4,11 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, drawStatus, HelixElement, HelixSelectEvent, MixinControllerOpen, matchesChord, StatusController, words, } from '@fusion.dev/helix-core';
+import { auditChildren, customElement, drawStatus, HelixElement, HelixSelectEvent, MixinControllerOpen, matchesChord, StatusController, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
-import { optionsAmong } from '../../option/root/option-root.js';
+import { optionsAmong } from '../../option/among.js';
 import '../../dialog/index.js';
 import '../../listbox/index.js';
 const says = (element, state) => {
@@ -145,6 +145,7 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
     }
     connectedCallback() {
         super.connectedCallback();
+        auditChildren(this, 'option', 'option', 'the palette lists no commands');
         this.addEventListener('helix-select', this.swallowOptionSelect);
         this.addEventListener('keydown', this.handleAlternate, { capture: true });
         this.addEventListener('keydown', this.handleBack);

package/dist/data-table/root/data-table-root.d.ts

@@ -1,6 +1,6 @@
 import { type DataRow, HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import { type HelixHeadlessTableColumn } from '../../table/column/table-column.js';
+import type { HelixHeadlessTableColumn } from '../../table/column/table-column.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
 declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fusion.dev/helix-core").CollectionElement) & typeof HelixElement;
@@ -131,6 +131,18 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * Written on `DataTable`, `columns` has no effect, so watch for it when you
  * move a table from `Table` to `DataTable`.
  *
+ * **The columns are an import of their own.** A column is the Table family's
+ * `TableColumn`, which the data table does not register, so a page that writes
+ * one imports the Table entry beside the data table:
+ *
+ * ```js
+ * import '@fusion.dev/helix/data-table'
+ * import '@fusion.dev/helix/table'
+ * ```
+ *
+ * In development, a data table holding a column nobody registered says so once
+ * the page has loaded, with the line to add.
+ *
  * @since 0.1.0
  * @status stable
  * @category data

package/dist/data-table/root/data-table-root.js

@@ -5,14 +5,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { anchorAt, arranged, auditServed, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, format, formatWords, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, handedLocale, hostAria, inlineStep, inRowOrder, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, placeKey, ReorderController, rangeAdd, reportRuntime, requestChange, requestReorder, scrollingAncestor, scrollRoom, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, window_, words, wordsLocale, writtenList, } from '@fusion.dev/helix-core';
+import { anchorAt, arranged, auditChildren, auditServed, commaList, countLabel, customElement, cycle, deepActiveElement, deepContains, everyState, format, formatWords, gridMove, HelixActivateEvent, HelixElement, HelixExpandEvent, HelixFilterEvent, HelixFilteredEvent, HelixLoadMoreEvent, HelixNavigateEvent, HelixReorderEvent, HelixReorderedEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, handedLocale, hostAria, inlineStep, inRowOrder, MixinCollection, markRegion, onAndroid, ordered, pageRows, parse, placeKey, ReorderController, rangeAdd, reportRuntime, requestChange, requestReorder, scrollingAncestor, scrollRoom, selectsAll, Typeahead, toggleEvery, treeArrow, typesCharacter, VirtualizeController, valueAt, whenHydrated, window_, words, wordsLocale, writtenList, } from '@fusion.dev/helix-core';
 import { caretDown, caretRight, dotsSixVertical } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
-import { edgeOf } from '../../table/column/table-column.js';
+import { edgeOf } from '../../table/edge.js';
 import '../../checkbox/index.js';
 import '../../pagination/index.js';
 import { toggledOpen } from '../keys.js';
@@ -1021,19 +1021,21 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const shown = this.shownColumns;
         const android = onAndroid();
         for (const column of this.tableColumns) {
-            column.movable = this.reorderable && column.field !== '';
-            column.gridCell = true;
-            column.tabStop = shown.indexOf(column) + offset === stop;
-            column.sorted =
-                current && column.canSort && column.field === current.field
-                    ? current.direction === 'asc'
-                        ? 'ascending'
-                        : 'descending'
-                    : undefined;
-            column.sortWords =
-                android && column.sorted
-                    ? this.sortSaid(column.textContent?.trim() || column.field, column.sorted)
-                    : '';
+            whenHydrated(column, () => {
+                column.movable = this.reorderable && column.field !== '';
+                column.gridCell = true;
+                column.tabStop = shown.indexOf(column) + offset === stop;
+                column.sorted =
+                    current && column.canSort && column.field === current.field
+                        ? current.direction === 'asc'
+                            ? 'ascending'
+                            : 'descending'
+                        : undefined;
+                column.sortWords =
+                    android && column.sorted
+                        ? this.sortSaid(column.textContent?.trim() || column.field, column.sorted)
+                        : '';
+            });
         }
     }
     renderCell(column, row, picked, place, stop, header, id) {
@@ -1276,6 +1278,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     }
     connectedCallback() {
         super.connectedCallback();
+        auditChildren(this, 'table-column', 'table', 'the table draws no columns');
         this.addEventListener('click', this.handleHeadClick);
         this.addEventListener('click', this.handleRowClick);
         this.addEventListener('pointerdown', this.notePress, true);

package/dist/date-input/root/date-input-root.d.ts

@@ -33,6 +33,8 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * digits or the arrow keys. Alt+Down opens the calendar from a segment. A
  * `range` is two rows with a dash between them, the start and the end, as
  * React Aria's DateRangePicker draws them, and `multiple` keeps the text.
+ * A range whose end is before its start reports `rangeUnderflow`, as Date
+ * Picker does, with `range-order-message`.
  *
  * Text that is not a date gives the form an empty value, as a native date
  * field does, and `value` keeps the text so it can be corrected.
@@ -359,6 +361,11 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * for the page's language, then the English.
      */
     rangeLengthMessage: string;
+    /**
+     * The message shown when a range ends before it starts. `{start}` is
+     * replaced with the start, written the way the field writes dates.
+     */
+    rangeOrderMessage: string;
     /**
      * The message shown when a date is after `max`. `{max}` is replaced with
      * `max`, written the way the field writes dates.

package/dist/date-input/root/date-input-root.js

@@ -47,6 +47,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         this.previousYearLabel = 'Previous year';
         this.previousYearsLabel = 'Earlier years';
         this.rangeLengthMessage = 'A range is two dates.';
+        this.rangeOrderMessage = 'Choose an end on or after {start}.';
         this.rangeOverflowMessage = 'Choose a date on or before {max}.';
         this.rangeUnderflowMessage = 'Choose a date on or after {min}.';
         this.removeLabel = 'Remove {name}';
@@ -263,6 +264,13 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmented
         if (this.mode === 'range' && held.length > 2) {
             return this.rangeLengthMessage;
         }
+        const [start, end] = held;
+        if (this.mode === 'range' && start !== undefined && end !== undefined && end < start) {
+            return [
+                'rangeUnderflow',
+                formatWords(this, 'rangeOrderMessage', { start: this.written(start) }),
+            ];
+        }
         return '';
     }
     renderPicker() {
@@ -547,6 +555,10 @@ __decorate([
     words,
     property({ attribute: 'range-length-message' })
 ], HelixHeadlessDateInput.prototype, "rangeLengthMessage", void 0);
+__decorate([
+    words,
+    property({ attribute: 'range-order-message' })
+], HelixHeadlessDateInput.prototype, "rangeOrderMessage", void 0);
 __decorate([
     words,
     property({ attribute: 'range-overflow-message' })

package/dist/date-picker/root/date-picker-root.d.ts

@@ -48,7 +48,8 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * when Previous or Next is pressed. Neither moves past `min` or `max`, and the
  * keys stop at them too. A value outside the bounds, on a barred day, or off
  * `step` reports `rangeUnderflow`, `rangeOverflow`, `badInput` or
- * `stepMismatch`, so a form does not submit it.
+ * `stepMismatch`, so a form does not submit it. A range set from a script
+ * whose end is before its start reports `rangeUnderflow` as well.
  *
  * @since 0.1.0
  * @status stable
@@ -278,6 +279,11 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * Accessible name for the control that moves back a page, in the years.
      */
     previousYearsLabel: string;
+    /**
+     * The validation message for a range that ends before it starts. `{start}`
+     * is replaced with the start, written as a date in `locale`.
+     */
+    rangeOrderMessage: string;
     /**
      * The validation message for a date after `max`. `{max}` is replaced with
      * `max`, written as a date in `locale`.

package/dist/date-picker/root/date-picker-root.js

@@ -44,6 +44,7 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
         this.previousLabel = 'Previous month';
         this.previousYearLabel = 'Previous year';
         this.previousYearsLabel = 'Earlier years';
+        this.rangeOrderMessage = 'Choose an end on or after {start}.';
         this.rangeOverflowMessage = 'Choose a date on or before {max}.';
         this.focused = '';
         this.choosing = false;
@@ -504,6 +505,13 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinPickerF
                 return [{ [fault[0]]: true }, fault[1]];
             }
         }
+        const [start, end] = held;
+        if (this.mode === 'range' && start !== undefined && end !== undefined && end < start) {
+            return [
+                { rangeUnderflow: true },
+                formatWords(this, 'rangeOrderMessage', { start: this.spoken(start) }),
+            ];
+        }
         return undefined;
     }
     get failure() {
@@ -855,6 +863,10 @@ __decorate([
     words,
     property({ attribute: 'previous-years-label' })
 ], HelixHeadlessDatePicker.prototype, "previousYearsLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'range-order-message' })
+], HelixHeadlessDatePicker.prototype, "rangeOrderMessage", void 0);
 __decorate([
     words,
     property({ attribute: 'range-overflow-message' })

package/dist/drilldown/item/drilldown-item.d.ts

@@ -207,6 +207,12 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * an icon of your own replaces it by being slotted.
      */
     protected renderMark(): TemplateResult;
+    /**
+     * Presses the row, as `click()` presses a native button: passed to the
+     * control inside, which is what answers a click, so a script's `click()`
+     * chooses the row, or follows its link, once.
+     */
+    click(): void;
     protected render(): TemplateResult | typeof nothing;
 }
 declare global {

package/dist/drilldown/item/drilldown-item.js

@@ -104,6 +104,15 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
       </svg></slot
     >`;
     }
+    click() {
+        const control = this.partNamed('item');
+        if (control) {
+            control.click();
+        }
+        else {
+            super.click();
+        }
+    }
     render() {
         if (this.showingPage || this.onPath) {
             return html `<slot name="page" @slotchange=${this.readPage}></slot>`;

package/dist/drilldown/root/drilldown-root.js

@@ -158,8 +158,17 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
     willUpdate(changed) {
         super.willUpdate(changed);
         if (changed.has('page') && (this.drilldown.page?.value ?? '') !== this.page) {
+            const leaving = this.drilldown.page;
+            const focused = this.contains(document.activeElement);
             this.showPage(this.page);
             this.page = this.drilldown.page?.value ?? '';
+            if (focused) {
+                this.updateComplete.then(() => {
+                    const items = this.items;
+                    const to = leaving && items.includes(leaving) ? leaving : items[0];
+                    to?.focusItem();
+                });
+            }
         }
         hostAria(this.internals, {
             label: this.navigation ? this.label : '',

package/dist/element-events.generated.js

@@ -137,7 +137,13 @@ registerElementEvents({
         'helix-graph-signal',
         'helix-graph-zoom',
     ],
-    'helix-headless-heatmap': ['change', 'helix-before-change', 'helix-resize'],
+    'helix-headless-heatmap': [
+        'change',
+        'helix-before-change',
+        'helix-reading-change',
+        'helix-reading-press',
+        'helix-resize',
+    ],
     'helix-headless-icon': ['error', 'load'],
     'helix-headless-icon-button': ['helix-press'],
     'helix-headless-image': ['error', 'load'],

package/dist/filter-input/root/filter-input-root.d.ts

@@ -128,6 +128,19 @@ declare const HelixHeadlessFilterInput_base: (new (...args: any[]) => import("@f
  *   filter goes. Set `chips` and the field adds, updates, and removes those
  *   chips itself, from every `helix-facet` you do not cancel.
  *
+ * **The suggestions you write are an import of their own.** A suggestion is an
+ * option, the Option family's, which the field does not register, so a page
+ * that slots one imports it beside the field:
+ *
+ * ```js
+ * import '@fusion.dev/helix/filter-input'
+ * import '@fusion.dev/helix/option'
+ * ```
+ *
+ * In development, a field holding an option nobody registered says so once the
+ * page has loaded, with the line to add. The options `source` gives are drawn
+ * as this Option too, and need the same import.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms

package/dist/filter-input/root/filter-input-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, countLabel, customElement, DelayController, drawIcon, drawStatus, formatWords, HelixFacetEvent, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportRuntime, restoreValue, StatusController, scrollItemIntoView, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, auditChildren, countLabel, customElement, DelayController, drawIcon, drawStatus, formatWords, HelixFacetEvent, HelixFormElement, holdCaret, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, PopoverController, reportRuntime, restoreValue, StatusController, scrollItemIntoView, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -552,6 +552,7 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
     }
     connectedCallback() {
         super.connectedCallback();
+        auditChildren(this, 'option', 'option', 'the field suggests nothing');
         this.addEventListener('helix-dismiss', this.handleDismiss, { capture: true });
         this.addEventListener(HelixFacetEvent.eventName, this.handleFacet);
         this.addEventListener('helix-select', this.handleSourcedSelect);

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

@@ -2,7 +2,7 @@ import { AriaForwardController, HelixElement } from '@fusion.dev/helix-core';
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../tooltip/index.js';
 import { type Reading } from './buckets.js';
-declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface);
+declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartSourceInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinChartStatusInterface);
 /**
  * @summary A strip of cells, each colored by its reading, for uptime, contributions, or activity.
  *
@@ -50,6 +50,25 @@ 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`.
  *
+ * **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 |
@@ -59,7 +78,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * | 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 | Selects the cell, or lets it go, under `selection-mode`. |
+ * | 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. |
  *
@@ -69,23 +88,30 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  * @aliases Contribution graph, Uptime strip, Calendar heatmap, Activity graph
  * @documentation https://fusion.dev/helix/components/heatmap
  *
+ * @slot empty - Content shown under the strip when the table has no readings, such as a link to add the first. Falls back to `empty-text`.
  * @slot end - Below the strip, at the trailing edge: usually the newest date.
+ * @slot loading - Content shown under the strip while `loading` is set and there are no readings yet. Falls back to `loading-text`.
  * @slot start - Below the strip, at the leading edge: usually the oldest date.
  * @slot summary - Below the strip, in the middle: a summary of the range shown.
  *
  * @event {Event} change - Fired once a press or a key has changed which cells are selected.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press or a key changes which cells are selected, with the `value` it would leave. Cancelable.
+ * @event {HelixReadingChangeEvent} helix-reading-change - The reading shown moved, or was put away: `index` is the row, or `-1` for none, with its `label`, the `series` the keys rest on, and the `pointerType` that moved it.
+ * @event {HelixReadingPressEvent} helix-reading-press - A reading was clicked, tapped, or pressed with Enter or Space, with the same detail as `helix-reading-change`.
  * @event {HelixResizeEvent} helix-resize - Fired when the number of cells drawn changes, with the new number.
  *
  * @csspart cell - One reading.
  * @csspart cell-active - The cell the pointer or the keys rest on. Set alongside `cell`.
  * @csspart cell-selected - A cell that is selected, under `selection-mode`. Set alongside `cell`.
- * @csspart empty - Shown when the table has no readings. It stays hidden until the table can be read: on the server and during hydration, there is no document to resolve `for` in.
+ * @csspart empty - The words under the strip when the table has no readings: the `empty` slot, falling back to `empty-text`. Not drawn while the table cannot be read yet, on the server and during hydration, there being no document to resolve `for` in.
  * @csspart end - The trailing slot's box.
  * @csspart footer - The three-slot row under the strip.
  * @csspart live - The readout: a polite live region that says the cell the keys moved to. Hide it visually.
+ * @csspart loading - The words under the strip while `loading` is set and there are no readings: the `loading` slot, falling back to `loading-text`.
  * @csspart mark - The invisible point the tooltip is anchored to.
  * @csspart overview - The busiest reading and the total of the readings drawn, written as a sentence for screen readers, which describes the strip. Rendered once there are cells. Hide it visually.
+ * @csspart plot - The same element as `strip`, under the name every chart gives the drawing that takes focus.
+ * @csspart row - A column of cells, which a grid reads as a row, under `selection-mode`. It draws no box.
  * @csspart selection - A polite region that says how many cells are selected after a change, rendered from the first change. Hide it visually.
  * @csspart start - The leading slot's box.
  * @csspart strip - The grid of cells, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
@@ -125,6 +151,7 @@ declare const HelixHeadlessHeatmap_base: typeof HelixElement & (new (...args: an
  *
  * @cssstate active - While a cell is shown, under the pointer or the keys, with its tooltip open.
  * @cssstate empty - While the `empty` part stands in place of the cells.
+ * @cssstate loading - While the `loading` part stands in place of the cells.
  */
 export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     /**
@@ -137,13 +164,6 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * `overview-label`.
      */
     busiestLabel: string;
-    /**
-     * Shown when the table has no readings in it.
-     *
-     * Never shown while the table cannot be read at all, which is a server render
-     * and the hydrating one after it: see `sourceKnown`.
-     */
-    emptyText: string;
     /**
      * Space between cells, in CSS pixels. It is a number for the same reason
      * `min-cell` is.
@@ -187,9 +207,11 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      */
     rows: number;
     /**
-     * What the readout adds for a selected cell, under `selection-mode`, after
-     * where the cell stands: "Day 1: 0 (1 of 14, selected)". Empty adds
-     * nothing.
+     * What the readout added for a selected cell, under `selection-mode`.
+     *
+     * @deprecated The strip is a grid under `selection-mode`, and each cell says
+     * whether it is selected with `aria-selected`, in the reader's own words, so
+     * the readout says nothing there and this is not read.
      */
     selectedLabel: string;
     /**
@@ -334,28 +356,6 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * the one under the pointer.
      */
     private get points();
-    /**
-     * Whether this render can tell a table with no readings from one it has not
-     * resolved yet.
-     *
-     * **Unknown is not empty, which is what an empty state must never say.**
-     * `for` names an id and resolving an id wants a document, so a server has
-     * none and a hydrating render must not look either. Without this the server
-     * drew "No readings" over a table holding ninety days of them, a crawler read
-     * that sentence, and the strip flipped to a full one on hydration: the fault
-     * `MixinCollection` names for a slotted collection, arriving through the one
-     * channel that mixin cannot see.
-     *
-     * The same shape as `childrenKnown`, asked of a tree that can answer about
-     * ids rather than of one that holds children. An id that resolves to nothing
-     * in a browser is still known, and still empty: a `for` naming no table
-     * should say so rather than sit blank, which is why this asks
-     * `searchableById` and not `elementById`.
-     *
-     * `readingsKnown` asks it for every chart, and for `data` too, which a
-     * server does not draw.
-     */
-    private get sourceKnown();
     /**
      * `rows` as a usable count, which is not always what the attribute says.
      *
@@ -432,6 +432,23 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     private markEmpty;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /**
+     * The cells as a grid's rows, one for each column of the strip, so a week
+     * is a row with `rows="7"` and a status strip is one row.
+     *
+     * **A column, because that is the order the cells are in.** The strip fills
+     * down the column and then across, so a row wrapping a column keeps every
+     * cell where it was, and `display: contents` keeps the wrapper out of the
+     * strip's grid, drawing no box, which is a mechanism and not a look. A row
+     * across the strip would have taken cells out of order and moved them.
+     */
+    private renderRows;
+    /**
+     * One cell under `selection-mode`: a `gridcell` named by its row in the
+     * table, its reading and its place, and saying whether it is selected, which
+     * a reader hears on reaching it as the strip's active descendant.
+     */
+    private renderGridCell;
     /**
      * What the strip shows, in a sentence: the busiest reading drawn, as the
      * table writes it, and the total of them all, in `locale`. The strip is
@@ -461,13 +478,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * that is usually wider, so a percentage of the box lands between cells. The
      * pitch is `cell + gap` and both are measured.
      */
-    protected renderTooltip(): TemplateResult | typeof nothing;
-    /**
-     * The readout's cursor: the pointer, with the selected word after where a
-     * selected cell stands, so a reader moving through the strip hears which
-     * cells are in the selection and not only how many.
-     */
-    private reading;
+    protected renderTooltip(grid?: boolean): TemplateResult | typeof nothing;
     /**
      * Which drawn cell the pointer is over, or -1.
      *
@@ -476,6 +487,7 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * `mouseover` it is delivered for a pen.
      */
     private readonly onPointerOver;
+    private readonly onPointerUp;
     private readonly onPointerLeave;
 }
 declare global {