@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -22,11 +22,14 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
     constructor() {
         super(...arguments);
         this.emptyText = 'No commands';
+        this.filterDelay = 0;
         this.hotkey = 'mod+k';
         this.label = 'Commands';
         this.loading = false;
         this.loadingText = 'Loading';
         this.placeholder = 'Search commands';
+        this.resultLabel = '{count} command';
+        this.resultsLabel = '{count} commands';
         this.footed = false;
         this.handleHotkey = (event) => {
             if (this.hotkey === '') {
@@ -73,9 +76,19 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
             }
         };
         this.swallowOptionSelect = (event) => {
-            if (event.target !== this) {
-                event.stopImmediatePropagation();
+            if (event.target === this) {
+                return;
+            }
+            event.stopImmediatePropagation();
+            const { href, value } = event.detail;
+            if (href === undefined) {
+                return;
+            }
+            if (!this.dispatchEvent(new HelixSelectEvent({ href, value }))) {
+                event.preventDefault();
+                return;
             }
+            this.requestOpen(false);
         };
     }
     get listbox() {
@@ -125,7 +138,8 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
     }
     renderDialog() {
         return html `<${this.tag('dialog')}
-    exportparts="dialog"
+    exportparts="body: dialog-body, dialog, dismiss: dialog-dismiss, dismiss-mark: dialog-dismiss-mark,
+      footer: dialog-footer, header: dialog-header"
       label=${this.label}
       .open=${this.open}
       @helix-before-close=${() => {
@@ -142,8 +156,11 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         search-field: listbox-search-field"
         aria-label=${this.label}
         empty-text=${this.emptyText}
+        filter-delay=${this.filterDelay}
         filter-label=${this.placeholder}
         loading-text=${this.loadingText}
+        result-label=${this.resultLabel}
+        results-label=${this.resultsLabel}
         ?loading=${this.loading}
         filterable
         @helix-before-change=${this.handleChange}
@@ -151,6 +168,10 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         @input=${this.stopInner}
       >
         <slot></slot>
+        <!-- Handed on with the text as the fallback, for the reason Combobox
+             gives: the list's own fallback never shows behind a passed slot. -->
+        <slot name="empty" slot="empty">${this.emptyText}</slot>
+        <slot name="loading" slot="loading">${this.loadingText}</slot>
       </${this.tag('listbox')}>
       <div ?hidden=${!this.footed} part="footer" slot="footer">
         <slot
@@ -169,6 +190,9 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
 __decorate([
     property({ attribute: 'empty-text' })
 ], HelixHeadlessCommand.prototype, "emptyText", void 0);
+__decorate([
+    property({ attribute: 'filter-delay', type: Number })
+], HelixHeadlessCommand.prototype, "filterDelay", void 0);
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "hotkey", void 0);
@@ -184,6 +208,12 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'result-label' })
+], HelixHeadlessCommand.prototype, "resultLabel", void 0);
+__decorate([
+    property({ attribute: 'results-label' })
+], HelixHeadlessCommand.prototype, "resultsLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessCommand.prototype, "footed", void 0);

package/dist/copy-button/from.d.ts

@@ -0,0 +1,22 @@
+/** What a `from` reference names: an element by its id, and what to read from it. */
+export interface FromReference {
+    /** An attribute to read, written `id[attribute]`. */
+    readonly attribute?: string;
+    /** The id of the element. */
+    readonly id: string;
+    /** A property to read, written `id.property`. */
+    readonly property?: string;
+}
+/**
+ * Reads a `from` reference: `id` for the element's text, `id[attribute]` for
+ * an attribute, and `id.property` for a property. Web Awesome's Copy Button
+ * takes the same three shapes.
+ *
+ * `null` for a reference with no id, or with anything after the brackets.
+ */
+export declare const parseFrom: (reference: string) => FromReference | null;
+/**
+ * The text a `from` reference names, looked up in the tree `scope` is in, or
+ * `null` where the element or its attribute is not there.
+ */
+export declare const readFrom: (reference: string, scope: Element) => string | null;

package/dist/copy-button/from.js

@@ -0,0 +1,28 @@
+import { elementById } from '@fusion.dev/helix-core';
+export const parseFrom = (reference) => {
+    const written = reference.trim();
+    const bracket = /^([^[\].\s]+)\[([^\]\s]+)\]$/u.exec(written);
+    if (bracket) {
+        return { attribute: bracket[2], id: bracket[1] };
+    }
+    const dot = /^([^[\].\s]+)\.([^[\].\s]+)$/u.exec(written);
+    if (dot) {
+        return { id: dot[1], property: dot[2] };
+    }
+    return /^[^[\].\s]+$/u.test(written) ? { id: written } : null;
+};
+export const readFrom = (reference, scope) => {
+    const parsed = parseFrom(reference);
+    const element = parsed ? elementById(scope, parsed.id) : null;
+    if (!(parsed && element)) {
+        return null;
+    }
+    if (parsed.attribute !== undefined) {
+        return element.getAttribute(parsed.attribute);
+    }
+    if (parsed.property !== undefined) {
+        const read = element[parsed.property];
+        return read === undefined || read === null ? null : String(read);
+    }
+    return element.textContent;
+};

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

@@ -12,7 +12,13 @@ import '../../tooltip/index.js';
  * The confirmation and the event wait for the write to finish. The browser can
  * refuse a clipboard write, for example on an insecure origin, in a document
  * that is not focused, or after a gesture that does not qualify. A refused
- * write leaves the button unchanged.
+ * write, or nothing to copy, names the button with `error-label` for the same
+ * moment a copy shows `copied-label`, draws a cross, and sends
+ * `helix-copy-error`.
+ *
+ * `from` copies from another element on the page: its text, an attribute
+ * written `id[attribute]`, or a property written `id.property`, read at the
+ * press. It takes the place of `value`.
  *
  * It replaces Button's render and its press, so it never submits a form or
  * sends a command: `type`, `command`, `commandfor` and the `form*` overrides
@@ -28,10 +34,13 @@ import '../../tooltip/index.js';
  *
  * @slot - The icon shown before a copy. Defaults to a clipboard.
  * @slot copied - The icon shown after a successful copy. Defaults to a check mark.
+ * @slot failed - The icon shown after a copy that put nothing on the clipboard. Defaults to a cross.
  *
  * @event {HelixCopyEvent} helix-copy - Fired after the clipboard write succeeds.
+ * @event {HelixCopyErrorEvent} helix-copy-error - Fired when a press put nothing on the clipboard: the browser did not allow the write, or there was nothing to copy.
  *
  * @csspart button - The inner button.
+ * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending.
  * @csspart mark - The clipboard icon, and the confirmation icon that replaces it.
  * @csspart tooltip - The tooltip bubble, forwarded from the tooltip inside the button.
  * @csspart tooltip-arrow - The tooltip's arrow, which points at the button.
@@ -52,6 +61,18 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      * dash-casing it, and `copiedlabel` is not what anyone would type.
      */
     copiedLabel: string;
+    /**
+     * The button's name and tooltip text after a press that put nothing on the
+     * clipboard.
+     */
+    errorLabel: string;
+    /**
+     * The element to copy from, by its id: `key` for its text, `key[value]` for
+     * an attribute, and `key.value` for a property. Read at the press, and used
+     * in place of `value`. An element that is not there copies nothing, which is
+     * a failed copy.
+     */
+    from: string;
     /**
      * The button's name and tooltip text before a copy.
      *
@@ -67,6 +88,26 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      * whatever its `type`. Declared here so its own page says what it holds.
      */
     value: string;
+    /** @internal A copy button sends no command. */
+    command: string;
+    /** @internal A copy button sends no command. */
+    commandFor: string;
+    /** @internal A copy button discloses nothing. */
+    expanded?: boolean;
+    /** @internal A copy button submits no form. */
+    formAction: string;
+    /** @internal A copy button submits no form. */
+    formEnctype: string;
+    /** @internal A copy button submits no form. */
+    formMethod: string;
+    /** @internal A copy button submits no form. */
+    formNoValidate: boolean;
+    /** @internal A copy button submits no form. */
+    formTarget: string;
+    /** @internal A copy button opens nothing. */
+    popup?: 'dialog' | 'grid' | 'listbox' | 'menu' | 'tree';
+    /** @internal A copy button never submits or resets, whatever its `type`. */
+    type: 'button' | 'submit' | 'reset';
     /**
      * The words for the state it is in, used twice on purpose.
      *
@@ -107,6 +148,9 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      */
     private readonly clipboard;
     private get copied();
+    private get failed();
+    /** What a press copies: the text `from` names, or `value`. */
+    private get text();
     private readonly handleCopy;
     /**
      * Both faces, drawn rather than demanded.
@@ -139,6 +183,8 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      * the focused element mid-press.
      */
     protected renderCopiedIcon(): TemplateResult;
+    /** The mark for a press that put nothing on the clipboard, behind a seam of its own. */
+    protected renderFailedIcon(): TemplateResult;
     /**
      * The bubble the control sits inside, behind a seam.
      *

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

@@ -5,31 +5,45 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessCopyButton_1;
-import { CopyController, customElement } from '@fusion.dev/helix-core';
-import { check, copy } from '@fusion.dev/helix-icons';
+import { CopyController, customElement, HelixCopyErrorEvent } from '@fusion.dev/helix-core';
+import { check, copy, x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { html } from 'lit/static-html.js';
 import { HelixHeadlessIconButton } from '../../icon-button/root/icon-button-root.js';
+import { readFrom } from '../from.js';
 import '../../tooltip/index.js';
 const CONFIRM = 1600;
 let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
     constructor() {
         super(...arguments);
         this.copiedLabel = 'Copied';
+        this.errorLabel = 'Could not copy';
+        this.from = '';
         this.label = 'Copy';
         this.value = '';
         this.namedBy = null;
         this.clipboard = new CopyController(this, { after: CONFIRM });
-        this.handleCopy = async () => {
+        this.handleCopy = async (event) => {
+            if (this.pending) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return;
+            }
             if (this.isDisabled) {
                 return;
             }
-            await this.clipboard.copy(this.value);
+            const wrote = await this.clipboard.copy(this.text);
+            if (!wrote && this.isConnected) {
+                this.dispatchEvent(new HelixCopyErrorEvent());
+            }
         };
     }
     get says() {
+        if (this.failed) {
+            return this.errorLabel;
+        }
         return this.copied ? this.copiedLabel : this.namedBy || this.label;
     }
     get forwardsLabel() {
@@ -41,32 +55,48 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
     get copied() {
         return this.clipboard.copied;
     }
+    get failed() {
+        return this.clipboard.failed;
+    }
+    get text() {
+        return this.from === '' ? this.value : (readFrom(this.from, this) ?? '');
+    }
     static icon(glyph) {
         return html `<svg part="mark" fill="currentColor" viewBox=${glyph.viewBox} aria-hidden="true">
       ${unsafeSVG(glyph.content)}
     </svg>`;
     }
     render() {
-        return this.renderTooltip(html `<button
+        return html `${this.renderTooltip(html `<button
       part="button"
       type="button"
+      aria-busy=${this.pending ? 'true' : nothing}
+      aria-disabled=${this.pending ? 'true' : nothing}
       aria-label=${this.says}
       data-copied=${this.copied ? '' : nothing}
+      data-failed=${this.failed ? '' : nothing}
       tabindex=${this.focusable ? nothing : '-1'}
       ?disabled=${this.isDisabled}
       @click=${this.handleCopy}
     >
-      ${this.renderCopiedIcon()} ${this.renderCopyIcon()}
-      </button>`);
+      ${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}
+      </button>`)}${this.renderLive()}`;
     }
     renderCopyIcon() {
-        return html `<slot ?hidden=${this.copied}>${HelixHeadlessCopyButton_1.icon(copy)}</slot>`;
+        return html `<slot ?hidden=${this.copied || this.failed}
+      >${HelixHeadlessCopyButton_1.icon(copy)}</slot
+    >`;
     }
     renderCopiedIcon() {
         return html `<slot name="copied" ?hidden=${!this.copied}
       >${HelixHeadlessCopyButton_1.icon(check)}</slot
     >`;
     }
+    renderFailedIcon() {
+        return html `<slot name="failed" ?hidden=${!this.failed}
+      >${HelixHeadlessCopyButton_1.icon(x)}</slot
+    >`;
+    }
     renderTooltip(control) {
         return html `<${this.tag('tooltip')} content=${this.says} persist
     exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom,
@@ -80,6 +110,12 @@ let HelixHeadlessCopyButton = HelixHeadlessCopyButton_1 = class HelixHeadlessCop
 __decorate([
     property({ attribute: 'copied-label' })
 ], HelixHeadlessCopyButton.prototype, "copiedLabel", void 0);
+__decorate([
+    property({ attribute: 'error-label' })
+], HelixHeadlessCopyButton.prototype, "errorLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCopyButton.prototype, "from", void 0);
 __decorate([
     property()
 ], HelixHeadlessCopyButton.prototype, "label", void 0);

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

@@ -39,6 +39,8 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *   selection, and `default-selected` holds what the markup declared.
  * - The checkbox in the heading selects every row in the result, across pages,
  *   and shows a dash while only some are chosen.
+ * - Shift with a press on a checkbox selects every row between it and the row
+ *   last chosen.
  *
  * To act on a single row, such as opening it, put a link or a button in a cell.
  *
@@ -52,6 +54,27 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  *   cell. Tab moves between the controls of one cell.
  * - Enter or Space on a sortable heading sorts by it, and Space on a row of a
  *   `selectable` table selects it.
+ * - In a `selectable` table, Shift with Up or Down selects the rows it moves
+ *   across, Shift with Space selects every row from the one last chosen, and
+ *   Control or Command with A selects every row.
+ * - Typing letters moves to the next row whose row header starts with them.
+ *
+ * Each row is named by its row header, the column marked `row-header`, or the
+ * first column with a `field` where none is. A screen reader says it as a reader
+ * moves between rows.
+ *
+ * **Rows that hold rows.** `child-field` names the field that holds a row's
+ * child rows, and the grid becomes a tree grid. The row header column draws a
+ * mark that a press opens and closes a row by, and `expanded` holds the keys of the open
+ * rows, which `row-key` names. Right on a closed row's header opens it, Left on
+ * an open one closes it, and Left on a child moves to its parent. A sort orders
+ * the rows under each parent, and a search shows the rows that lead to each
+ * match, open.
+ *
+ * `load-more` adds a row after the last one with a button that sends
+ * `helix-load-more`. A `windowed` table also sends it by itself once a reader
+ * scrolls within one screen of the end, once for each number of rows. Add the
+ * next rows to `rows`, and set `loading` while they are on their way.
  *
  * The controls inside the cells leave the tab order, so Tab moves past the
  * whole grid. A windowed table keeps the row holding focus drawn while the
@@ -83,8 +106,10 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @slot toolbar - Content above the grid, such as a search field or actions.
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the page changes, with the new page as a string in `detail.value`.
+ * @event {HelixExpandEvent} helix-expand - Fired after a row opens or closes, with every open row's key, separated by commas, which `expanded` also holds.
  * @event {HelixFilterEvent} helix-filter - The search query is about to change. Cancelable: cancel it to keep the current query.
  * @event {HelixFilteredEvent} helix-filtered - Fired after the search query changes, with the new query.
+ * @event {HelixLoadMoreEvent} helix-load-more - Fired when a reader asks for more rows, by the `load-more` row's button or by scrolling a `windowed` table near its end.
  * @event {HelixNavigateEvent} helix-navigate - Another page was requested. Cancelable: cancel it to stay on the current page.
  * @event {HelixReorderEvent} helix-reorder - The columns are about to move. The event carries every field in the new order. Cancelable: cancel it to keep the current order.
  * @event {HelixReorderedEvent} helix-reordered - Fired after the columns move, with every field in the new order.
@@ -96,6 +121,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart after - The space that stands in for the rows below the window. Only while `windowed`.
  * @csspart before - The space that stands in for the rows above the window. Only while `windowed`.
  * @csspart cell - One cell.
+ * @csspart cell-header - Added to `cell` for a cell of the row header column.
  * @csspart cell-selected - Added to `cell` in a selected row.
  * @csspart checkbox - A row's checkbox, or the checkbox in the heading that selects every row.
  * @csspart checkbox-box - The box drawn for the checkbox's input.
@@ -113,6 +139,9 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart head - The row that holds the column headings. It is `display: contents`, so it takes no space.
  * @csspart live - A copy of the empty and loading messages, which screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the rows are loading.
+ * @csspart more - The row after the last one that holds the button for more rows, while `load-more` is set.
+ * @csspart more-button - The button that asks for more rows.
+ * @csspart more-cell - The cell of the `more` row, which spans every column.
  * @csspart pagination - The built-in pagination, when it is shown.
  * @csspart pagination-first - The pagination's button that goes to the first page, shown with `ends`.
  * @csspart pagination-gap - The pagination's marker for pages that are not shown.
@@ -131,9 +160,13 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart select-all - The heading that holds the checkbox that selects every row.
  * @csspart select-selected - Added to `select` in a selected row.
  * @csspart table - The grid.
+ * @csspart toggle - The mark in a row header that a press opens and closes its row by, in a tree grid.
+ * @csspart toggle-mark - The caret in `toggle`. It points along the line while the row is closed and down while it is open.
+ * @csspart toggle-open - Added to `toggle` while its row is open.
  * @csspart toolbar - The region above the grid.
  *
  * @cssproperty --data-table-cell-align - The alignment of the cell's column: `start`, `center`, or `end`. Unset when the column sets none. The component writes it on each cell it draws, and the stylesheet reads it. `Table` sets `--table-cell-align` for the same purpose.
+ * @cssproperty --data-table-level - How deep a row is in a tree grid, from 1. The component writes it on each row header cell, and the stylesheet indents by it.
  * @cssproperty --data-table-template - The column track list, worked out from the columns. The component writes it inline on the element that reads it, so setting it has no effect. Set a column's `width` to change it.
  */
 export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base {
@@ -150,6 +183,19 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     static shadowRootOptions: ShadowRootInit;
     /** The word for an ascending sort, in `sorted-label`. */
     ascendingLabel: string;
+    /**
+     * The field that holds a row's child rows, as an array. Set it, and `row-key`,
+     * and the grid becomes a tree grid.
+     *
+     * Reflected, because the styled tier indents a tree grid's row headers by
+     * it. No default, so a table that sets none writes nothing onto its host.
+     */
+    childField?: string;
+    /**
+     * The keys of the rows open at the start, separated by commas. Used until
+     * `expanded` is set.
+     */
+    defaultExpanded: string;
     /**
      * The starting search query, used until `filter` is set.
      */
@@ -187,6 +233,12 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * been measured.
      */
     estimate: number;
+    /**
+     * The keys of the open rows in a tree grid, separated by commas, the shape of
+     * `selected`. A reader's press writes it and then sends `helix-expand`.
+     */
+    get expanded(): string;
+    set expanded(next: string);
     /**
      * The search query. A row is shown when the query matches any of its columns.
      *
@@ -205,6 +257,16 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * The grid's name, read by screen readers.
      */
     label: string;
+    /**
+     * Draws a row after the last one with a button that asks for more rows.
+     *
+     * The button sends `helix-load-more`, and a `windowed` table sends it by
+     * itself once a reader scrolls within one screen of the end. Turn it off
+     * when there are no more rows to load.
+     */
+    loadMore: boolean;
+    /** The words on the button in the `more` row. */
+    loadMoreLabel: string;
     /**
      * Where filtering, sorting, and paging happen. `client` does them in the
      * table, and `server` leaves them to your code.
@@ -394,6 +456,7 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private paginatedState;
     private orderState;
     private selectedState;
+    private expandedState;
     /**
      * The row holding the grid's tab stop: `-1` for the headings, otherwise a
      * row of the page counted from 0. Unset until a reader moves, when the stop
@@ -411,6 +474,19 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private focusWanted;
     /** The page as last drawn, for the keys to count rows against between renders. */
     private drawnPage;
+    /** Whether the last render drew the `more` row, which follows the page's rows. */
+    private moreDrawn;
+    /** The letters typed at the grid, which move to the row whose header they start. */
+    private readonly typeahead;
+    /**
+     * The key of the row a range selection runs from: the row last chosen or let
+     * go one at a time.
+     */
+    private anchorKey;
+    /** Whether Shift was held on the last press, for a checkbox that asks to range. */
+    private shiftPressed;
+    /** The number of rows when `helix-load-more` last went out on its own. */
+    private askedAt;
     /** The grid's size as the last render counted it, for the internals. */
     private counts;
     /** The order while a grip is being dragged, before anybody has been asked. */
@@ -456,6 +532,21 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * result to save a sort is the wrong trade.
      */
     private held;
+    /** The tree last laid out, kept against what laid it out. */
+    private grown;
+    /**
+     * The rows of a tree grid, laid out flat with each open row's children under
+     * it. `server` mode lays out the rows it was handed and neither filters nor
+     * sorts them.
+     */
+    private tree;
+    /** The keys of the open rows. */
+    private get opened();
+    /**
+     * The result in order: the tree laid out flat in a tree grid, and the
+     * arranged rows otherwise.
+     */
+    private flat;
     private arrange;
     /**
      * The part of a page the reader can see, which is every row when not
@@ -635,9 +726,34 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * is all it holds.
      */
     private get everyKey();
-    /** Ticks or clears one row, which the checkbox asked for and was refused. */
+    /**
+     * Ticks or clears one row, which the checkbox asked for and was refused. With
+     * Shift held it selects every row from the one last chosen.
+     */
     private readonly toggleRow;
-    /** Asks for one row to be chosen or let go. */
+    /** The keys of the rows on the page, in the order they are drawn. */
+    private get pageKeys();
+    /**
+     * Selects every row on the page from the one a range runs from to row `to`,
+     * keeping what was already selected. With no row to run from, the range is
+     * the row the reader is on, `from`, and it becomes the one to run from.
+     */
+    private selectRange;
+    /** The words a typed search matches each row by: its row header's value. */
+    private get rowWords();
+    /**
+     * The column whose cells head their rows: the one marked `row-header`, or
+     * the first with a `field`.
+     */
+    private get headerColumn();
+    /** Sends `helix-load-more`, for the button in the `more` row or a scroll near the end. */
+    private askForMore;
+    /**
+     * Asks for more rows on its own once a reader scrolls a `windowed` table to
+     * within one screen of the end, once for each number of rows it holds.
+     */
+    private askNearEnd;
+    /** Asks for one row to be chosen or let go, and makes it where a range runs from. */
     private chooseRow;
     /** Selects every row, or clears them all where every one already was. */
     private readonly toggleAll;
@@ -758,6 +874,20 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * same value to the same three.
      */
     private renderCell;
+    /**
+     * The mark a pointer opens or closes a row of a tree grid by.
+     *
+     * **Hidden from assistive technology, and no button.** The row says whether
+     * it is open with `aria-expanded`, and Right and Left open and close it. A
+     * button in the row header put its own name, "Expand src", into the name of
+     * the header that names the row.
+     */
+    private renderToggle;
+    /**
+     * Opens or closes a row of a tree grid, and says so with `helix-expand`.
+     * Nothing moves where it is that way already.
+     */
+    private toggleOpen;
     /**
      * A checkbox, named for what it chooses, whose change the table takes.
      *
@@ -801,6 +931,13 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private readonly handleScroll;
     /** The heading of the checkbox column, which selects the whole result. */
     private renderSelectAll;
+    /**
+     * The row after the last one, holding the button that asks for more rows.
+     *
+     * A row of the grid, one cell spanning every column, so the arrows reach it
+     * after the last row and Enter or Space on it asks.
+     */
+    private renderMore;
     protected render(): TemplateResult;
     /**
      * Listens on the host, not on the slot the columns are assigned to.
@@ -819,6 +956,11 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Notes whether Shift is held, before the press reaches a checkbox, whose
+     * request carries only the state it asks for.
+     */
+    private readonly notePress;
     /**
      * A click on a sortable heading, anywhere but its grip or its edge.
      *
@@ -875,6 +1017,12 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * alone.
      */
     private readonly handleGridKey;
+    /**
+     * Left and Right on a row header of a tree grid: forward opens a closed row,
+     * back closes an open one, and back on a child moves to its parent. Says
+     * whether it took the key, and the arrows move between cells where it did not.
+     */
+    private treeKey;
     /** Enter, Space and F2 on a cell. */
     private activate;
     /** The keys the grid takes while focus is on a control inside a cell. */