@fusion.dev/helix-headless 0.159.0 → 0.161.0

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

@@ -28,6 +28,10 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * `min-steps-between-thumbs` keeps them that many steps apart, and the readout
  * joins the two as `range-text` writes them.
  *
+ * A press on a range's track takes the nearest thumb to the point pressed,
+ * and moving the pointer drags it, as React Aria's and Web Awesome's sliders
+ * do. The thumb takes focus, and `change` is sent as the press ends.
+ *
  * `origin` sets where a single thumb's fill starts: at `min`, at the middle of
  * the track, or at `max`. A balance or an offset from zero fills from the
  * middle, as Zag's slider `origin` does. The fill's ends are published as
@@ -52,7 +56,7 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * |---|---|
  * | Right, Up | Moves the thumb up by `step`. |
  * | Left, Down | Moves the thumb down by `step`. |
- * | Page Up, Page Down | Moves the thumb by a larger step. |
+ * | Page Up, Page Down | Moves the thumb by `page-step`, or by the platform's larger step where it is not set. |
  * | Home, End | Moves the thumb to its lowest or highest value. |
  *
  * Under `readonly` none of these move the thumb, and Tab still reaches it.
@@ -97,6 +101,8 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  * @cssproperty --slider-marker-at - Where one marker sits, as a percentage of the track.
  * @cssproperty --slider-to - Where the filled span ends, as a fraction of the track, 0 to 1: a range's upper thumb, or the farther of a single thumb and its `origin`.
  *
+ * @cssstate dragging - A thumb is being dragged, by its thumb or from a press on the track.
+ * @cssstate focus-visible - A thumb has focus that the keyboard brought, where the browser draws a focus ring.
  * @cssstate invalid - The slider has an error to show, from the browser's validation or from your `feedback`.
  */
 export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
@@ -193,6 +199,12 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * between its thumbs and ignores it.
      */
     origin?: 'center' | 'end' | 'start';
+    /**
+     * How far Page Up and Page Down move a thumb, in the slider's own units, as
+     * React Aria's `pageSize` and Zag's `largeStep` do. Absent leaves the keys
+     * to the platform, which moves a tenth of the track.
+     */
+    pageStep?: number;
     /**
      * Adds a second thumb, so the value is a pair.
      *
@@ -298,13 +310,52 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     /** Where one value sits along the track, as a fraction of it. */
     private along;
     private readonly handleInput;
+    /** Whether a pointer is dragging a thumb, which `:state(dragging)` says. */
+    private dragging;
+    /** Ends a drag when its pointer lifts, wherever it lifts. */
+    private readonly endDrag;
+    private startDrag;
+    /**
+     * Half a thumb, which is where the thumb's center stops short of each end
+     * of its input. Measured off the thumb's length as the stylesheet sets it,
+     * or a platform thumb's 16 pixels where none does.
+     */
+    private thumbInset;
+    /**
+     * The value under a pointer, along a thumb's input, less `inset` at each
+     * end. Upward on a vertical track, and from the right on a right-to-left
+     * page.
+     */
+    private valueAt;
+    /** Moves one of a range's thumbs, kept between its neighbors, and says whether it moved. */
+    private moveThumb;
+    /**
+     * A press on the field: on a thumb, the start of the platform's own drag,
+     * and on a range's track, the nearest thumb taken to the point and dragged
+     * from there.
+     *
+     * **A range's inputs take presses on their thumbs only**, being stacked on
+     * one track, so a press beside a thumb reached no input at all and did
+     * nothing. Measured before this: a press at 90 on a range holding 20 and 60
+     * left it at 20 and 60. React Aria's and Web Awesome's sliders move the
+     * nearest thumb there.
+     */
+    private readonly handlePress;
+    disconnectedCallback(): void;
     /** Relayed, because `change` does not cross a shadow boundary on its own. */
     private readonly handleChange;
     /**
-     * Keeps a read-only thumb still under the keys that move it. Tab and every
-     * other key pass, so focus moves on.
+     * Keeps a read-only thumb still under the keys that move it, and moves a
+     * thumb by `page-step` under Page Up and Page Down. Tab and every other key
+     * pass, so focus moves on.
      */
     private readonly handleKeydown;
+    /**
+     * Says whether the keyboard brought focus to a thumb, as
+     * `:state(focus-visible)` on the host, where a stylesheet outside can reach
+     * the whole control: a ring around the track, or the readout in bold.
+     */
+    private readonly handleFocusChange;
     /**
      * Reports the value: one entry, or for a named range one entry per thumb.
      * The joined pair is the state the browser restores.

package/dist/slider/root/slider-root.js

@@ -4,9 +4,9 @@ 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, customElement, formatNumber, formatWords, HelixFormElement, MixinControllerValue, MixinField, reportValues, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, formatNumber, formatWords, HelixFormElement, isRtl, MixinControllerValue, MixinField, reportValues, restoreValue, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 const SLIDER_KEYS = new Set([
     'ArrowDown',
     'ArrowLeft',
@@ -63,6 +63,54 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             this.requestValue(next);
             restoreValue(control, this.value);
         };
+        this.dragging = false;
+        this.endDrag = () => {
+            this.dragging = false;
+            window.removeEventListener('pointerup', this.endDrag);
+            window.removeEventListener('pointercancel', this.endDrag);
+        };
+        this.handlePress = (event) => {
+            if (this.isDisabled || this.readOnly || event.button !== 0) {
+                return;
+            }
+            const inputs = [...this.renderRoot.querySelectorAll('input[part="control"]')];
+            if (inputs.includes(event.composedPath()[0])) {
+                this.startDrag();
+                return;
+            }
+            const first = inputs[0];
+            const field = event.currentTarget;
+            if (!this.range || !first) {
+                return;
+            }
+            const inset = this.thumbInset(field);
+            const wanted = this.valueAt(event, first, inset);
+            let at = 0;
+            this.points.forEach((one, index) => {
+                const distance = Math.abs(one - wanted);
+                const best = Math.abs((this.points[at] ?? 0) - wanted);
+                if (distance < best || (distance === best && wanted > one)) {
+                    at = index;
+                }
+            });
+            event.preventDefault();
+            this.moveThumb(at, wanted);
+            inputs[at]?.focus({ focusVisible: false, preventScroll: true });
+            this.startDrag();
+            field.setPointerCapture?.(event.pointerId);
+            const move = (next) => {
+                this.moveThumb(at, this.valueAt(next, first, inset));
+            };
+            const end = () => {
+                field.removeEventListener('pointermove', move);
+                field.removeEventListener('pointerup', end);
+                field.removeEventListener('pointercancel', end);
+                this.announceChange();
+            };
+            field.addEventListener('pointermove', move);
+            field.addEventListener('pointerup', end);
+            field.addEventListener('pointercancel', end);
+        };
         this.handleChange = (event) => {
             event.stopPropagation();
             if (!this.readOnly) {
@@ -72,7 +120,31 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.handleKeydown = (event) => {
             if (this.readOnly && SLIDER_KEYS.has(event.key)) {
                 event.preventDefault();
+                return;
+            }
+            const by = this.pageStep;
+            if ((event.key !== 'PageUp' && event.key !== 'PageDown') || !by || this.isDisabled) {
+                return;
             }
+            event.preventDefault();
+            const sign = event.key === 'PageUp' ? 1 : -1;
+            if (this.range) {
+                const at = Number(event.target.dataset.index ?? 0);
+                if (!this.moveThumb(at, this.settled((this.points[at] ?? this.min) + sign * by))) {
+                    return;
+                }
+            }
+            else {
+                const next = String(this.settled(Number(this.value) + sign * by));
+                if (next === this.value || !this.requestValue(next)) {
+                    return;
+                }
+            }
+            this.announceChange();
+        };
+        this.handleFocusChange = (event) => {
+            const input = event.target;
+            this.toggleState('focus-visible', event.type === 'focusin' && input.matches?.(':focus-visible') === true);
         };
         this.valueText = '';
         this.handleThumbSlot = () => {
@@ -132,6 +204,46 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         }
         return Math.min(1, Math.max(0, (at - this.min) / span));
     }
+    startDrag() {
+        this.dragging = true;
+        window.addEventListener('pointerup', this.endDrag);
+        window.addEventListener('pointercancel', this.endDrag);
+    }
+    thumbInset(field) {
+        const probe = document.createElement('span');
+        probe.style.cssText =
+            'position:absolute;visibility:hidden;inline-size:var(--_slider-thumb-length,16px)';
+        field.append(probe);
+        const length = probe.getBoundingClientRect().width;
+        probe.remove();
+        return length / 2;
+    }
+    valueAt(event, input, inset) {
+        const box = input.getBoundingClientRect();
+        const vertical = this.orientation === 'vertical';
+        const length = vertical ? box.height : box.width;
+        const from = vertical
+            ? box.bottom - event.clientY
+            : isRtl(this)
+                ? box.right - event.clientX
+                : event.clientX - box.left;
+        const fraction = Math.min(1, Math.max(0, (from - inset) / Math.max(1, length - inset * 2)));
+        return this.settled(this.min + fraction * (this.max - this.min));
+    }
+    moveThumb(at, wanted) {
+        const points = this.points;
+        const gap = this.gap;
+        const low = at > 0 ? (points[at - 1] ?? this.min) + gap : Number.NEGATIVE_INFINITY;
+        const high = at < points.length - 1 ? (points[at + 1] ?? this.max) - gap : Number.POSITIVE_INFINITY;
+        const next = points
+            .map((one, index) => (index === at ? Math.min(high, Math.max(low, wanted)) : one))
+            .join(',');
+        return next !== points.join(',') && this.requestValue(next);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.endDrag();
+    }
     sync() {
         if (this.range && this.name) {
             reportValues(this.internals, this.name, this.points.map(String));
@@ -168,6 +280,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('dragging', this.dragging);
         if (!this.hasUpdated && this.value === '') {
             this.defaultValue = this.range
                 ? `${this.min},${this.max}`
@@ -306,6 +419,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             : nothing}
     <div
       part="field"
+      @focusin=${this.handleFocusChange}
+      @focusout=${this.handleFocusChange}
+      @pointerdown=${this.handlePress}
       data-markers=${this.markerValues.length > 0 ? '' : nothing}
       data-range=${this.range ? '' : nothing}
       data-thumbs=${this.thumbContent ? '' : nothing}
@@ -405,6 +521,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSlider.prototype, "origin", void 0);
+__decorate([
+    property({ attribute: 'page-step', type: Number })
+], HelixHeadlessSlider.prototype, "pageStep", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "range", void 0);
@@ -428,6 +547,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessSlider.prototype, "tooltip", void 0);
+__decorate([
+    state()
+], HelixHeadlessSlider.prototype, "dragging", void 0);
 __decorate([
     property({ attribute: 'value-text' })
 ], HelixHeadlessSlider.prototype, "valueText", void 0);

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

@@ -123,6 +123,16 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * The name of the handle where two dividers cross, read by screen readers.
      */
     cornerLabel: string;
+    /**
+     * What the handle where two dividers cross says it is set to, both dividers
+     * at once: `{across}` is where the divider that runs down stands, and
+     * `{down}` where the one that runs across stands, each a percentage.
+     *
+     * **Both, because the handle moves both**, and a number names one: the
+     * handle's `aria-valuenow` is the divider its `aria-orientation` names, and
+     * these words are the whole of where it is.
+     */
+    cornerValueLabel: string;
     /**
      * Which pane starts shut, when `collapsed` is not set.
      */
@@ -410,6 +420,11 @@ export declare class HelixHeadlessSplitter extends HelixElement {
      * a splitter told `horizontal` has been given its answer already.
      */
     private watchWidth;
+    /**
+     * Where a crossing stands in words: this splitter's divider at `own` and the
+     * nested one's at `theirs`, as `corner-value-label` puts them.
+     */
+    private cornerWords;
     /**
      * Whether the panes are stacked. Public because a nested splitter compares
      * its axis with the one it is in.

package/dist/splitter/root/splitter-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessSplitter_1;
-import { AriaForwardController, capturePointer, closestInstance, commaList, customElement, formatPercent, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixCollapseEvent, HelixElement, HelixResizedEvent, inlineStep, isRtl, requestChange, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, capturePointer, closestInstance, commaList, customElement, formatPercent, formatWords, HelixBeforeCollapseEvent, HelixBeforeResizeEvent, HelixCollapseEvent, HelixElement, HelixResizedEvent, inlineStep, isRtl, requestChange, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { snapTo } from '../snap.js';
@@ -168,6 +168,15 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         });
         this.sizes.observe(this);
     }
+    cornerWords(own, theirs) {
+        const locale = wordsLocale(this);
+        const mine = formatPercent(Math.round(own) / 100, locale);
+        const nested = formatPercent(Math.round(theirs) / 100, locale);
+        return formatWords(this, 'cornerValueLabel', {
+            across: this.vertical ? nested : mine,
+            down: this.vertical ? mine : nested,
+        });
+    }
     get vertical() {
         return this.orientation === 'vertical' || (this.orientation === 'auto' && this.stacked);
     }
@@ -269,6 +278,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
         this.collapsedLabel = 'Collapsed';
         this.collapsedSize = 0;
         this.cornerLabel = 'Resize both';
+        this.cornerValueLabel = '{across} across, {down} down';
         this.defaultPosition = 50;
         this.label = 'Resize panes';
         this.aria = new AriaForwardController(this, {
@@ -633,7 +643,7 @@ let HelixHeadlessSplitter = class HelixHeadlessSplitter extends HelixElement {
           aria-valuemax="100"
           aria-valuemin="0"
           aria-valuenow=${Math.round(crossing.at)}
-          aria-valuetext=${formatPercent(Math.round(crossing.at) / 100, wordsLocale(this))}
+          aria-valuetext=${this.cornerWords(position, crossing.at)}
           data-cross=${index}
           style="--splitter-corner-at: ${crossing.at}%; --splitter-position: ${position}%"
           @dblclick=${this.handleCornerDoubleClick}
@@ -659,6 +669,10 @@ __decorate([
     words,
     property({ attribute: 'corner-label' })
 ], HelixHeadlessSplitter.prototype, "cornerLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'corner-value-label' })
+], HelixHeadlessSplitter.prototype, "cornerValueLabel", void 0);
 __decorate([
     property({ attribute: 'default-collapsed' })
 ], HelixHeadlessSplitter.prototype, "defaultCollapsed", void 0);

package/dist/table/grid-controller.d.ts

@@ -5,7 +5,7 @@ import type { HelixHeadlessTableColumn } from './column/table-column.js';
  * A column the table draws before the consumer's cells: the grips of a
  * `reorderable` table, and the checkboxes of a `selectable` one.
  */
-export type LeadColumn = 'grip' | 'select';
+export type LeadColumn = 'expand' | 'grip' | 'select';
 /** A place in the grid with the element that holds focus there. */
 export interface GridCell extends GridPlace {
     cell: HTMLElement;
@@ -36,6 +36,12 @@ export interface TableGridOptions {
     selectRange: (to: number, from: number) => boolean;
     /** Selects every row for Control or Command with A, and says whether it did. */
     selectAll: () => boolean;
+    /**
+     * Focus moved to another row by a key with no Shift, row `to`, and
+     * `control` says whether Control or Command was held. A table whose moves
+     * carry the selection selects the row there.
+     */
+    arrive?: (to: number, control: boolean) => void;
     /** Whether the table is a grid now. */
     on: () => boolean;
 }

package/dist/table/grid-controller.js

@@ -1,5 +1,9 @@
 import { deepActiveElement, deepContains, focusableElements, gridMove, inlineStep, pageRows, scrollingAncestor, scrollRoom, selectsAll, Typeahead, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
-const HEADS = { grip: 'grip-head', select: 'select-all' };
+const HEADS = {
+    expand: 'expand-head',
+    grip: 'grip-head',
+    select: 'select-all',
+};
 const shown = (element) => {
     const hidden = element.getAttribute('hidden');
     return hidden === null || hidden === 'until-found';
@@ -83,6 +87,9 @@ export class TableGridController {
                 to.row >= 0) {
                 this.options.selectRange(to.row, place.row);
             }
+            else if (!event.shiftKey && to.row >= 0 && to.row !== place.row) {
+                this.options.arrive?.(to.row, event.ctrlKey || event.metaKey);
+            }
             if (to.row !== place.row || to.column !== place.column) {
                 this.moveTo(to);
             }
@@ -246,6 +253,7 @@ export class TableGridController {
                     row.gridCell = on;
                     row.gripStop = here && lead[at.column] === 'grip';
                     row.selectStop = here && lead[at.column] === 'select';
+                    row.expandStop = here && lead[at.column] === 'expand';
                 });
             }
             for (const [place, cell] of this.cellsOf(line).entries()) {

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

@@ -53,6 +53,27 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * Tab reaches each checkbox, and Space ticks it. To act on one row, put a
  * link or a button in a cell, or give the row an `href`.
  *
+ * `selection-mode="single"` selects one row at a time: ticking a row lets go
+ * of the one before, the heading holds no checkbox, and Shift and Control with
+ * A take in nothing more. `selection-behavior="replace"` makes a press on a
+ * row, anywhere but its own controls, select it alone, as a file list does,
+ * and in a `grid` table the arrow keys carry the selection with them. Control
+ * or Command with a press adds or takes out the row, and with an arrow moves
+ * without selecting. Shift with a press takes in the rows from the one last
+ * chosen.
+ *
+ * **Nesting rows.** A row with `parent` sits under the row of that key, as
+ * a file sits in a folder. The table then draws a column of disclosure
+ * buttons, under a heading named by `expand-column-label`: a row with rows
+ * under it has a button named by `expand-row-label` ("Expand {row}") that
+ * says with `aria-expanded` whether it is open, and the rows under a shut row
+ * are not drawn. `expanded` holds the open rows' keys, comma separated, and
+ * `default-expanded` is where it starts. A press asks with
+ * `helix-before-toggle` and tells with `helix-toggle`, both from the row, so
+ * you can refuse it or load the rows on the way. A sort orders the rows
+ * under each row among themselves, and in a `grid` table the table is a
+ * `treegrid` whose rows say their depth.
+ *
  * **Moving rows.** `reorderable` adds a column of grips before the checkboxes,
  * under a heading named by `row-grips-label`.
  *
@@ -89,13 +110,20 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * | Enter on a cell of a row with `href` | Follows the row's link. |
  * | Enter, Space on a sortable heading | Sorts by the column. |
  * | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a `selectable` table. |
+ * | Enter or Space on a disclosure cell | Shows or hides the rows under the row, in a table whose rows nest. |
  * | Enter or Space on a grip cell | Picks the row up, or drops it, in a `reorderable` table. Up, Down, Home, and End move a row picked up, and Escape puts it back. |
+ * | Down, Up, Page Down, Page Up under `selection-behavior="replace"` | Selects the row it moves to alone. Control or Command with the key moves without selecting. |
  * | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
  * | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
  * | Control or Command with A | Selects every row, in a `selectable` table. |
  * | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
  * | Tab | Leaves the table. |
  *
+ * **Loading more.** `load-more` sends `helix-load-more` once the end of the
+ * table comes within a screen of view, in the box that scrolls it or the
+ * page, once for each number of rows: add rows and it can send it again. Set
+ * `loading` while you fetch, and the table asks for nothing until it clears.
+ *
  * When the rows did not load, set `error-text`, such as "The orders did not
  * load", and put a button that tries again in the `error` slot. The line shows
  * after the rows in place of the empty and loading lines, the live region says
@@ -119,11 +147,14 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  *
  * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when a row is dropped at a new place, in a `reorderable` table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is.
+ * @event {HelixBeforeToggleEvent} helix-before-toggle - Fired from a row when its disclosure button is pressed, with whether it would be open in `detail.checked`. Cancelable: cancel it to keep the row as it is.
+ * @event {HelixLoadMoreEvent} helix-load-more - Fired, in a table with `load-more`, when the end of the table comes within a screen of view, once for each number of rows.
  * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen.
  * @event {HelixSelectEvent} helix-select - The selection is about to change. The event carries every selected key, separated by commas. Cancelable: cancel it to keep the current selection.
  * @event {HelixSelectedEvent} helix-selected - Fired after the selection changes, with every selected key, separated by commas.
  * @event {HelixSortEvent} helix-sort - A different sort order was requested, as `field:direction`, or empty for the order the rows were written in. Cancelable: cancel it to keep the current order.
  * @event {HelixSortedEvent} helix-sorted - Fired after the sort order changes, with the new order.
+ * @event {HelixToggleEvent} helix-toggle - Fired from a row once the rows under it are shown or hidden, with whether it is open in `detail.checked`.
  *
  * @csspart checkbox - The checkbox in the heading that selects every row, in a `selectable` table.
  * @csspart checkbox-box - The box drawn for the checkbox's input.
@@ -139,6 +170,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
  * @csspart empty - The text shown when there are no rows.
  * @csspart error - The line shown after the rows while `error-text` is set, in place of the empty and loading text.
+ * @csspart expand-head - The heading over the disclosure buttons, in a table whose rows nest.
  * @csspart grid-end - An empty box after the rows, in a `grid` table. Tab focuses it on its way out of the table, so the key leaves from the end.
  * @csspart grid-start - An empty box before the rows, in a `grid` table. Shift with Tab focuses it on its way out of the table.
  * @csspart grip-head - The heading over the row grips, in a `reorderable` table.
@@ -205,6 +237,11 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * declared in it has nowhere else to be sized from.
      */
     columns: string;
+    /**
+     * The keys of the rows whose rows are shown at the start, separated by
+     * commas. Used until `expanded` is set.
+     */
+    defaultExpanded: string;
     /**
      * The keys selected at the start, separated by commas. Used until `selected`
      * is set.
@@ -234,6 +271,17 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * says it.
      */
     errorText: string;
+    /** The name of the heading over the disclosure buttons. */
+    expandColumnLabel: string;
+    /**
+     * The keys of the rows whose rows are shown, separated by commas, in a table
+     * whose rows nest. A press on a row's disclosure button asks first, and
+     * `default-expanded` seeds what this element then owns.
+     */
+    get expanded(): string;
+    set expanded(next: string);
+    /** The name of a row's disclosure button. `{row}` is the words of the row's first cell. */
+    expandRowLabel: string;
     /**
      * The table's name where neither `label` nor an `aria-label` or
      * `aria-labelledby` on the host gives it one.
@@ -256,6 +304,11 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * wins over this.
      */
     label: string;
+    /**
+     * Sends `helix-load-more` once the end of the table comes within a screen
+     * of view, so you can add the next rows as a reader nears them.
+     */
+    loadMore: boolean;
     /**
      * What screen readers hear each time a key moves a held row, in a
      * `reorderable` table. `{name}` is the row's words, `{position}` the place it
@@ -286,6 +339,11 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     selectable: boolean;
     /** The name of the checkbox in the heading that selects every row. */
     selectAllLabel: string;
+    /**
+     * The name of the heading over the checkboxes under
+     * `selection-mode="single"`, where it holds no checkbox of its own.
+     */
+    selectColumnLabel: string;
     /**
      * The keys of the selected rows, separated by commas.
      *
@@ -302,6 +360,17 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * {# wybranych} other {# wybranego}}`.
      */
     selectedLabel: string;
+    /**
+     * What a press on a row, or in a `grid` table a key that moves to one, does
+     * to the rows already selected: `toggle`, the default, leaves them to the
+     * checkboxes, and `replace` selects the row alone.
+     */
+    selectionBehavior: 'replace' | 'toggle';
+    /**
+     * How many rows a `selectable` table selects: `multiple`, the default, or
+     * `single`, one at a time.
+     */
+    selectionMode?: 'multiple' | 'single';
     /**
      * The name of a row's checkbox. `{row}` is replaced with the words of the
      * row's first cell.
@@ -329,6 +398,16 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     unsortedLabel: string;
     private sortState;
     private selectedState;
+    private expandedState;
+    /** Whether any row sits under another, which makes the table a tree. */
+    private get nests();
+    /** The keys of the rows whose rows are shown. */
+    private get open();
+    /**
+     * Shows or hides the rows under the row of `key`, asking first from the row,
+     * and saying so from it once it stands.
+     */
+    private toggleRow;
     /** Whether the heading names the table, so taking it away clears only this element's own name. */
     private headed;
     /**
@@ -377,6 +456,15 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * which is what a framework holding those rows needs.
      */
     private get arrangedRows();
+    /**
+     * The rows of a tree in the order they are drawn: each row followed by the
+     * rows under it while it is open, at every depth, keeping the order `rows`
+     * is in among the rows under one row. A row under a key no row has is drawn
+     * at the top.
+     */
+    private nested;
+    /** How deep each row sits, from 1, and whether rows sit under it, by key. */
+    private shape;
     /** The sort last heard, so a render that changed nothing says nothing. */
     private heardSort;
     /**
@@ -419,6 +507,22 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * them where each already is. A `disabled` row keeps what it had.
      */
     private chooseAll;
+    /** Whether the table selects one row at a time. */
+    private get single();
+    /** Whether a press or a move on a row selects it alone. */
+    private get replaces();
+    /**
+     * Selects the drawn row `at` alone, and makes it where a range runs from.
+     * Asks nothing where it is already the only one selected.
+     */
+    private chooseOnly;
+    /**
+     * A press on a row under `selection-behavior="replace"`: it selects the row
+     * alone, Control or Command adds or takes out the row, and Shift takes in
+     * the rows from the one last chosen. A press on the row's own controls, its
+     * checkbox or its grip is theirs.
+     */
+    private readonly handleRowClick;
     /** The key of the row a Shift range runs from: the one last chosen. */
     private anchorKey;
     /**
@@ -588,8 +692,26 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     private alignCells;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    /** Watches the end of a `load-more` table coming near the box that scrolls it. */
+    private endWatcher;
+    /** The end being watched, so a new one is watched again. */
+    private watchedEnd;
+    /** The number of rows `helix-load-more` was last sent for. */
+    private askedAt;
+    /**
+     * Starts or stops watching the end of the table, against the box that
+     * scrolls it, or the page, with a screen of room below it, so the next rows
+     * are asked for before a reader reaches the last. List does the same.
+     */
+    private watchEnd;
+    /** Whether the end of the table was in reach when last measured. */
+    private endInView;
+    /** Sends `helix-load-more`, once for each number of rows, and never while loading. */
+    private askForMore;
     /** The heading over the row grips, named by `row-grips-label`. */
     private renderGripHead;
+    /** The heading over the disclosure buttons, in a table whose rows nest. */
+    private renderExpandHead;
     /** The heading of the checkbox column, which selects every row. */
     private renderSelectAll;
     protected render(): TemplateResult;