@fusion.dev/helix-headless 0.160.0 → 0.162.0

package/dist/code-block/root/code-block-root.js

@@ -4,14 +4,14 @@ 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, formatWords, HelixElement, words } from '@fusion.dev/helix-core';
+import { customElement, formatWords, HelixBeforeToggleEvent, HelixElement, HelixToggleEvent, requestChange, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { html } from 'lit/static-html.js';
 import '../../copy-button/index.js';
 import { highlightedLines } from '../highlight.js';
-import { gutterNumbers, lineCount } from '../lines.js';
+import { gutterNumbers, lineCount, lineRuns, lineSpans } from '../lines.js';
 import { pairLines, parsePatch } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
@@ -28,12 +28,17 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         this.label = '';
         this.language = '';
         this.lineNumbers = false;
+        this.markLines = '';
         this.noCopy = false;
+        this.wrap = false;
+        this.wrapLabel = 'Wrap lines';
+        this.wrappable = false;
         this.parsed = { files: [], text: '' };
         this.capped = false;
         this.expanded = false;
         this.measure = () => {
             this.markScrollers();
+            this.placeLines();
             if (!this.expanded) {
                 this.capped =
                     this.expandable &&
@@ -43,6 +48,20 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         };
     }
     static { this.words = 'helix-code-block'; }
+    toggleWrap() {
+        const next = !this.wrap;
+        const applied = requestChange({
+            apply: (checked) => {
+                this.wrap = checked;
+            },
+            event: (checked) => new HelixBeforeToggleEvent({ checked }),
+            host: this,
+            next,
+        });
+        if (applied) {
+            this.dispatchEvent(new HelixToggleEvent({ checked: next }));
+        }
+    }
     get files() {
         if (!this.diff) {
             return [];
@@ -85,6 +104,89 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             }
         }
     }
+    lineBoxes(code) {
+        const slot = code.querySelector('slot');
+        const roots = slot && !slot.hidden ? slot.assignedNodes({ flatten: true }) : [code];
+        const texts = [];
+        for (const root of roots) {
+            if (root.nodeType === Node.TEXT_NODE) {
+                texts.push(root);
+                continue;
+            }
+            const walker = (root.ownerDocument ?? document).createTreeWalker(root, NodeFilter.SHOW_TEXT);
+            for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+                texts.push(node);
+            }
+        }
+        const starts = [];
+        let total = 0;
+        for (const text of texts) {
+            starts.push(total);
+            total += text.data.length;
+        }
+        const at = (offset) => {
+            for (let index = texts.length - 1; index >= 0; index -= 1) {
+                const start = starts[index] ?? 0;
+                if (offset >= start) {
+                    const text = texts[index];
+                    return [text, Math.min(offset - start, text.data.length)];
+                }
+            }
+            return undefined;
+        };
+        const box = code.getBoundingClientRect();
+        const origin = box.top + code.clientTop - code.scrollTop;
+        const row = Number.parseFloat(getComputedStyle(code).lineHeight) || 0;
+        const boxes = [];
+        for (const [from, to] of lineSpans(texts.map((text) => text.data).join(''))) {
+            const start = at(from);
+            const end = at(to === from ? Math.min(to + 1, total) : to);
+            const previous = boxes.at(-1);
+            let top = previous ? previous.bottom : 0;
+            let bottom = top + row;
+            if (start && end) {
+                const range = (code.ownerDocument ?? document).createRange();
+                range.setStart(start[0], start[1]);
+                range.setEnd(end[0], end[1]);
+                const rects = [...range.getClientRects()].filter((rect) => rect.height > 0);
+                if (rects.length > 0) {
+                    const half = Math.max(0, (row - (rects[0]?.height ?? row)) / 2);
+                    top = Math.min(...rects.map((rect) => rect.top)) - origin - half;
+                    bottom = Math.max(...rects.map((rect) => rect.bottom)) - origin + half;
+                }
+            }
+            boxes.push({ bottom, top });
+        }
+        return boxes;
+    }
+    placeLines() {
+        const code = this.renderRoot.querySelector('[part="code"]');
+        const marks = [...this.renderRoot.querySelectorAll('[part="mark"]')];
+        const numbers = [
+            ...this.renderRoot.querySelectorAll('[part="gutter"] > [part="number"]'),
+        ];
+        if (!code || (marks.length === 0 && numbers.length === 0)) {
+            return;
+        }
+        const boxes = this.lineBoxes(code);
+        for (const mark of marks) {
+            const [first, last] = (mark.dataset.lines ?? '').split('-').map(Number);
+            const top = boxes[(first ?? 0) - 1];
+            const bottom = boxes[Math.min(last ?? 0, boxes.length) - 1];
+            mark.hidden = !top || !bottom;
+            if (top && bottom) {
+                mark.style.setProperty('--code-block-mark-start', `${top.top}px`);
+                mark.style.setProperty('--code-block-mark-size', `${bottom.bottom - top.top}px`);
+                mark.style.setProperty('--code-block-mark-inline-size', `${code.scrollWidth}px`);
+            }
+        }
+        numbers.forEach((number, index) => {
+            const line = boxes[index];
+            if (line) {
+                number.style.setProperty('--code-block-line-size', `${line.bottom - line.top}px`);
+            }
+        });
+    }
     updated(changed) {
         super.updated(changed);
         if (typeof ResizeObserver !== 'undefined') {
@@ -126,21 +228,29 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         catch (error) {
             globalThis.reportError?.(error);
         }
+        const runs = this.childrenKnown ? lineRuns(this.markLines) : [];
+        const marks = runs.map(([first, last]) => html `<span part="mark" aria-hidden="true" data-lines="${first}-${last}"></span>`);
         const code = highlighted === undefined
-            ? html `<code part="code"><slot @slotchange=${() => this.requestUpdate()}></slot></code>`
-            : html `<code part="code">${unsafeHTML(highlighted)}</code><slot
+            ? html `<code part="code">${marks}<slot @slotchange=${() => this.requestUpdate()}></slot></code>`
+            : html `<code part="code">${marks}${unsafeHTML(highlighted)}</code><slot
               hidden
               @slotchange=${() => this.requestUpdate()}
             ></slot>`;
         const lines = lineCount(text);
+        const numbers = lines === 0
+            ? nothing
+            : this.wrap
+                ? Array.from({ length: lines }, (_, index) => html `<span part="number">${index + 1}
+</span>`)
+                : gutterNumbers(lines);
         const gutter = this.lineNumbers
-            ? html `<span part="gutter" aria-hidden="true">${lines === 0 ? nothing : gutterNumbers(lines)}</span>`
+            ? html `<span part="gutter" aria-hidden="true">${numbers}</span>`
             : nothing;
         const name = this.label || this.language;
         return html `${this.renderHeader(name)}
       <div part="frame">
         <pre id="block" part="block" translate="no">${gutter}${code}</pre>
-        ${name ? nothing : this.renderCopy()}
+        ${this.headed(name) ? nothing : this.renderCopy()}
       </div>${this.renderExpand()}`;
     }
     renderExpand() {
@@ -160,11 +270,29 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
       ${this.expanded ? this.collapseLabel : this.expandLabel}
     </button>`;
     }
+    headed(name) {
+        return name !== '' || (this.wrappable && !this.diff) || this.slotted('actions');
+    }
     renderHeader(name, value) {
-        return name
-            ? html `<div part="header"><span part="label">${name}</span>${this.renderCopy(value, name)}</div>`
+        const acting = this.slotted('actions');
+        return this.headed(name)
+            ? html `<div part="header">${name ? html `<span part="label">${name}</span>` : nothing}${acting ? html `<span part="actions"><slot name="actions"></slot></span>` : nothing}${this.renderWrapToggle()}${this.renderCopy(value, name)}</div>`
             : nothing;
     }
+    renderWrapToggle() {
+        if (!this.wrappable || this.diff) {
+            return nothing;
+        }
+        return html `<button
+      part="wrap-toggle"
+      type="button"
+      aria-pressed=${this.wrap ? 'true' : 'false'}
+      @click=${() => this.toggleWrap()}
+    >${this.wrapLabel}</button>`;
+    }
+    slotted(name) {
+        return this.knownChildren.some((child) => child.getAttribute('slot') === name);
+    }
     renderCopy(value, name) {
         return this.noCopy ? nothing : this.renderCopyButton(value, name);
     }
@@ -179,7 +307,10 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
       copied-label=${this.copiedLabel}
       label=${name ? formatWords(this, 'copyNameLabel', { copy: this.copyLabel, name }) : this.copyLabel}
       .value=${value}
-    ></${this.tag('copy-button')}>`;
+    >${this.renderCopyIcons()}</${this.tag('copy-button')}>`;
+    }
+    renderCopyIcons() {
+        return html `${this.slotted('copy-icon') ? html `<slot name="copy-icon"></slot>` : nothing}${this.slotted('copied-icon') ? html `<slot name="copied-icon" slot="copied"></slot>` : nothing}`;
     }
     renderNumber(value, width) {
         return html `<span part="number" aria-hidden="true">${String(value ?? '').padStart(width)} </span>`;
@@ -223,7 +354,7 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
           ${this.variant === 'split'
                 ? this.renderSplit(file, width)
                 : html `<pre part="block" translate="no"><code part="code">${file.hunks.map((hunk) => html `${this.renderHunk(hunk)}${hunk.lines.map((line) => this.renderLine(line, width))}`)}</code></pre>`}
-          ${name ? nothing : this.renderCopy(now)}
+          ${this.headed(name) ? nothing : this.renderCopy(now)}
         </div>
       </div>`;
         })}<slot hidden @slotchange=${() => this.requestUpdate()}></slot>`;
@@ -275,12 +406,25 @@ __decorate([
 __decorate([
     property({ attribute: 'line-numbers', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "lineNumbers", void 0);
+__decorate([
+    property({ attribute: 'mark-lines' })
+], HelixHeadlessCodeBlock.prototype, "markLines", void 0);
 __decorate([
     property({ attribute: 'no-copy', reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "noCopy", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCodeBlock.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessCodeBlock.prototype, "wrap", void 0);
+__decorate([
+    words,
+    property({ attribute: 'wrap-label' })
+], HelixHeadlessCodeBlock.prototype, "wrapLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessCodeBlock.prototype, "wrappable", void 0);
 __decorate([
     state()
 ], HelixHeadlessCodeBlock.prototype, "capped", void 0);

package/dist/element-events.generated.js

@@ -36,6 +36,7 @@ registerElementEvents({
     'helix-headless-chat-message': ['helix-send'],
     'helix-headless-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-headless-checkbox-group': ['change', 'helix-before-change', 'input'],
+    'helix-headless-code-block': ['helix-before-toggle', 'helix-toggle'],
     'helix-headless-color-input': [
         'change',
         'helix-before-change',
@@ -253,11 +254,14 @@ registerElementEvents({
     'helix-headless-tab-panel': ['helix-load'],
     'helix-headless-table': [
         'helix-before-reorder',
+        'helix-before-toggle',
+        'helix-load-more',
         'helix-reorder',
         'helix-select',
         'helix-selected',
         'helix-sort',
         'helix-sorted',
+        'helix-toggle',
     ],
     'helix-headless-table-column': ['helix-before-resize', 'helix-resized'],
     'helix-headless-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],

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;