@fusion.dev/helix-headless 0.160.0 → 0.161.0

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, anchorAt, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, splitValues, toggleEvery, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -53,14 +53,18 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.ascendingLabel = 'ascending';
         this.canceledLabel = 'Canceled';
         this.columns = '';
+        this.defaultExpanded = '';
         this.defaultSelected = '';
         this.defaultSort = '';
         this.descendingLabel = 'descending';
         this.droppedLabel = 'Dropped';
         this.errorText = '';
+        this.expandColumnLabel = 'Expand';
+        this.expandRowLabel = 'Expand {row}';
         this.fallbackLabel = 'Table';
         this.grid = false;
         this.label = '';
+        this.loadMore = false;
         this.movedLabel = '{name} moved to position {position} of {count}';
         this.moveRowLabel = 'Move {row}';
         this.pickedUpLabel = 'Picked up {name}';
@@ -68,12 +72,15 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.rowGripsLabel = 'Move rows';
         this.selectable = false;
         this.selectAllLabel = 'Select every row';
+        this.selectColumnLabel = 'Select';
         this.selectedLabel = '{count} selected';
+        this.selectionBehavior = 'toggle';
         this.selectRowLabel = 'Select {row}';
         this.sortedLabel = '{direction, select, ascending {Sorted by {column}, ascending} descending {Sorted by {column}, descending} other {Sorted by {column}}}';
         this.unsortedLabel = 'Not sorted';
         this.sortState = undefined;
         this.selectedState = undefined;
+        this.expandedState = undefined;
         this.headed = false;
         this.aria = new AriaForwardController(this, {
             label: true,
@@ -81,13 +88,20 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         });
         this.gridKeys = new TableGridController(this, {
             activate: (place, event) => this.activate(place, event),
+            arrive: (to, control) => {
+                if (this.replaces && !control) {
+                    this.chooseOnly(to);
+                }
+            },
             columns: () => this.tableColumns.filter((column) => column.shown),
             lead: () => this.lead,
             on: () => this.grid,
             part: (name) => this.partNamed(name),
             rows: () => (this.childrenKnown ? this.arrangedRows : []),
             rowWords: () => this.arrangedRows.map((row) => textOf(row.children[0])),
-            selectAll: () => this.selectable && this.requestSelected(new Set([...this.chosen, ...this.enabledKeys])),
+            selectAll: () => this.selectable &&
+                !this.single &&
+                this.requestSelected(new Set([...this.chosen, ...this.enabledKeys])),
             selectRange: (to, from) => this.selectRange(to, from),
         });
         this.reorder = new ReorderController(this, {
@@ -131,6 +145,33 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             event.preventDefault();
             this.chooseRow(found.key, event.detail.checked);
         };
+        this.handleRowClick = (event) => {
+            if (!this.replaces || event.defaultPrevented) {
+                return;
+            }
+            const path = event.composedPath();
+            const at = this.arrangedRows.findIndex((row) => path.includes(row));
+            const row = this.arrangedRows[at];
+            if (!row) {
+                return;
+            }
+            const control = path.find((node) => node instanceof Element &&
+                (node.matches('a[href], button, input, select, textarea, label, [contenteditable]') ||
+                    (node.getRootNode() === row.shadowRoot && node.localName !== 'slot')));
+            if (control) {
+                return;
+            }
+            if (event.shiftKey && !this.single) {
+                this.selectRange(at, at);
+                return;
+            }
+            const found = this.keyed.find((one) => one.row === row);
+            if (found && (event.ctrlKey || event.metaKey)) {
+                this.chooseRow(found.key, !this.chosen.has(found.key));
+                return;
+            }
+            this.chooseOnly(at);
+        };
         this.anchorKey = undefined;
         this.handleHeadClick = (event) => {
             const path = event.composedPath();
@@ -149,8 +190,17 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.watcher = undefined;
         this.alignment = undefined;
         this.aligned = '';
+        this.endInView = false;
     }
     static { this.words = 'helix-table'; }
+    get expanded() {
+        return this.expandedState ?? this.defaultExpanded;
+    }
+    set expanded(next) {
+        const previous = this.expanded;
+        this.expandedState = next;
+        this.requestUpdate('expanded', previous);
+    }
     get selected() {
         return this.selectedState ?? this.defaultSelected;
     }
@@ -167,10 +217,44 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.sortState = next;
         this.requestUpdate('sort', previous);
     }
+    get nests() {
+        return this.childrenKnown && this.keyed.some(({ row }) => (row.parent ?? '') !== '');
+    }
+    get open() {
+        return new Set(commaList(this.expanded));
+    }
+    toggleRow(key) {
+        const row = this.rowFor(key);
+        if (!row) {
+            return;
+        }
+        const next = !this.open.has(key);
+        const applied = requestChange({
+            apply: (checked) => {
+                const keys = this.open;
+                if (checked) {
+                    keys.add(key);
+                }
+                else {
+                    keys.delete(key);
+                }
+                const previous = this.expanded;
+                this.expandedState = inRowOrder(keys, this.everyKey).join(',');
+                this.requestUpdate('expanded', previous);
+            },
+            event: (checked) => new HelixBeforeToggleEvent({ checked }),
+            host: row,
+            next,
+        });
+        if (applied) {
+            row.dispatchEvent(new HelixToggleEvent({ checked: next }));
+        }
+    }
     get lead() {
         return [
             ...(this.reorderable ? ['grip'] : []),
             ...(this.selectable ? ['select'] : []),
+            ...(this.nests ? ['expand'] : []),
         ];
     }
     rowFor(key) {
@@ -203,16 +287,69 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         const index = spec
             ? declared.findIndex((column) => column.canSort && column.field === spec.field)
             : -1;
-        if (!spec || index < 0) {
-            return rows;
+        let ordered = rows;
+        if (spec && index >= 0) {
+            const records = rows.map((element) => ({ element, value: textOf(element.children[index]) }));
+            const numeric = records.every(({ value }) => value === '' || Number.isFinite(numberOf(value)));
+            const order = numeric
+                ? (row) => (row.value === '' ? '' : numberOf(row.value))
+                : (row) => row.value;
+            const sorted = sort(records, spec, [
+                { field: spec.field, order },
+            ]);
+            ordered = sorted.map((record) => record.element);
         }
-        const records = rows.map((element) => ({ element, value: textOf(element.children[index]) }));
-        const numeric = records.every(({ value }) => value === '' || Number.isFinite(numberOf(value)));
-        const order = numeric
-            ? (row) => (row.value === '' ? '' : numberOf(row.value))
-            : (row) => row.value;
-        const sorted = sort(records, spec, [{ field: spec.field, order }]);
-        return sorted.map((record) => record.element);
+        return this.nests ? this.nested(ordered) : ordered;
+    }
+    nested(rows) {
+        const keys = new Map(this.keyed.map(({ key, row }) => [row, key]));
+        const present = new Set(keys.values());
+        const under = new Map();
+        for (const row of rows) {
+            const parent = row.parent ?? '';
+            const at = parent !== '' && present.has(parent) ? parent : '';
+            under.set(at, [...(under.get(at) ?? []), row]);
+        }
+        const open = this.open;
+        const drawn = [];
+        const seen = new Set();
+        const walk = (parent) => {
+            for (const row of under.get(parent) ?? []) {
+                if (seen.has(row)) {
+                    continue;
+                }
+                seen.add(row);
+                drawn.push(row);
+                const key = keys.get(row) ?? '';
+                if (open.has(key)) {
+                    walk(key);
+                }
+            }
+        };
+        walk('');
+        return drawn;
+    }
+    shape() {
+        const parents = new Map(this.keyed.map(({ key, row }) => [key, row.parent ?? '']));
+        const shapes = new Map();
+        for (const key of parents.keys()) {
+            let level = 1;
+            let at = parents.get(key) ?? '';
+            const passed = new Set([key]);
+            while (at !== '' && parents.has(at) && !passed.has(at)) {
+                passed.add(at);
+                level += 1;
+                at = parents.get(at) ?? '';
+            }
+            shapes.set(key, { branch: false, level });
+        }
+        for (const parent of parents.values()) {
+            const shape = shapes.get(parent);
+            if (shape) {
+                shape.branch = true;
+            }
+        }
+        return shapes;
     }
     news() {
         const current = this.sort;
@@ -274,12 +411,38 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         return this.keyed.find((one) => one.key === key)?.row.disabled === true;
     }
     chooseAll() {
+        if (this.single) {
+            return;
+        }
         this.requestSelected(new Set(toggleEvery(this.chosen, this.enabledKeys)));
     }
+    get single() {
+        return this.selectionMode === 'single';
+    }
+    get replaces() {
+        return this.selectable && this.selectionBehavior === 'replace';
+    }
+    chooseOnly(at) {
+        const row = this.arrangedRows[at];
+        const found = this.keyed.find((one) => one.row === row);
+        if (!found || found.row.disabled) {
+            return;
+        }
+        this.anchorKey = found.key;
+        const now = this.chosen;
+        if (now.size === 1 && now.has(found.key)) {
+            return;
+        }
+        this.requestSelected(new Set([found.key]));
+    }
     selectRange(to, from) {
         if (!this.selectable) {
             return false;
         }
+        if (this.single) {
+            this.chooseOnly(to);
+            return true;
+        }
         const keyOf = new Map(this.keyed.map(({ key, row }) => [row, key]));
         const keys = this.arrangedRows.map((row) => keyOf.get(row) ?? '');
         const { anchor, anchorKey } = anchorAt(keys, this.anchorKey, from);
@@ -296,8 +459,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             return;
         }
         this.anchorKey = key;
-        const keys = this.chosen;
+        const keys = this.single ? new Set(this.chosen.has(key) ? [key] : []) : this.chosen;
         if (on) {
+            if (this.single) {
+                keys.clear();
+            }
             keys.add(key);
         }
         else {
@@ -311,6 +477,15 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         if (event.key === 'F2') {
             return false;
         }
+        if (place.row >= 0 && leads[place.column] === 'expand') {
+            const row = this.arrangedRows[place.row];
+            const found = this.keyed.find((one) => one.row === row);
+            if (found && row?.branch) {
+                this.toggleRow(found.key);
+                return true;
+            }
+            return false;
+        }
         if (place.row === -1) {
             if (lead) {
                 this.chooseAll();
@@ -327,7 +502,12 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         const row = this.arrangedRows[place.row];
         const found = this.keyed.find((one) => one.row === row);
         if (this.selectable && found && (event.key === ' ' || lead)) {
-            this.chooseRow(found.key, !this.chosen.has(found.key));
+            if (this.replaces && !lead && !(event.ctrlKey || event.metaKey)) {
+                this.chooseOnly(place.row);
+            }
+            else {
+                this.chooseRow(found.key, !this.chosen.has(found.key));
+            }
             return true;
         }
         if (event.key === 'Enter' && row?.href && !row.disabled) {
@@ -339,6 +519,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     markSelected() {
         const keys = this.chosen;
         const still = Boolean(parse(this.sort));
+        const tree = this.nests;
+        const shapes = tree ? this.shape() : undefined;
+        const open = this.open;
         for (const { key, row } of this.keyed) {
             if (!row.isTableRow) {
                 continue;
@@ -347,6 +530,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             const label = formatWords(this, 'selectRowLabel', { row: name });
             const grip = this.reorderable ? formatWords(this, 'moveRowLabel', { row: name }) : '';
             const move = this.reorder.moveOf(key);
+            const shape = shapes?.get(key);
+            const expand = tree ? formatWords(this, 'expandRowLabel', { row: name }) : '';
             whenHydrated(row, () => {
                 row.selectable = this.selectable;
                 row.selected = keys.has(key);
@@ -354,6 +539,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 row.gripLabel = grip;
                 row.gripStill = still;
                 row.move = move;
+                row.level = shape?.level ?? 0;
+                row.branch = shape?.branch ?? false;
+                row.open = open.has(key);
+                row.expandLabel = expand;
+                row.expandWith = tree ? () => this.toggleRow(key) : undefined;
             });
         }
     }
@@ -434,14 +624,22 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         super.connectedCallback();
         this.watcher = new MutationObserver(() => this.requestUpdate());
         this.watcher.observe(this, { characterData: true, childList: true, subtree: true });
+        if (this.hasUpdated) {
+            this.watchEnd();
+        }
         this.addEventListener('click', this.handleHeadClick);
+        this.addEventListener('click', this.handleRowClick);
         this.addEventListener('helix-before-toggle', this.handleToggle);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
+        this.endWatcher?.disconnect();
+        this.endWatcher = undefined;
+        this.watchedEnd = undefined;
         this.watcher?.disconnect();
         this.watcher = undefined;
         this.removeEventListener('click', this.handleHeadClick);
+        this.removeEventListener('click', this.handleRowClick);
         this.removeEventListener('helix-before-toggle', this.handleToggle);
     }
     static { this.shadowRootOptions = {
@@ -508,6 +706,38 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.gridKeys.mark();
             this.gridKeys.place();
         }
+        this.watchEnd();
+    }
+    watchEnd() {
+        const end = this.loadMore ? this.renderRoot.querySelector('[data-end]') : null;
+        if (end === this.watchedEnd) {
+            if (this.endInView) {
+                this.askForMore();
+            }
+            return;
+        }
+        this.endWatcher?.disconnect();
+        this.endWatcher = undefined;
+        this.endInView = false;
+        this.watchedEnd = end ?? undefined;
+        if (!end || typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        this.endWatcher = new IntersectionObserver((entries) => {
+            this.endInView = entries.some((entry) => entry.isIntersecting);
+            if (this.endInView) {
+                this.askForMore();
+            }
+        }, { root: scrollingAncestor(this, { axis: 'y' }), rootMargin: '0px 0px 100% 0px' });
+        this.endWatcher.observe(end);
+    }
+    askForMore() {
+        const count = this.slotted.length;
+        if (!this.loadMore || this.loading || this.askedAt === count) {
+            return;
+        }
+        this.askedAt = count;
+        this.dispatchEvent(new HelixLoadMoreEvent());
     }
     renderGripHead() {
         if (!this.reorderable) {
@@ -520,10 +750,26 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
       tabindex=${this.grid ? (this.gridKeys.isStop({ column: 0, row: -1 }) ? '0' : '-1') : nothing}
     ></span>`;
     }
+    renderExpandHead() {
+        if (!this.nests) {
+            return nothing;
+        }
+        return html `<span
+      part="expand-head"
+      role="columnheader"
+      aria-label=${this.expandColumnLabel}
+      tabindex=${this.grid ? (this.gridKeys.isStop({ column: this.lead.indexOf('expand'), row: -1 }) ? '0' : '-1') : nothing}
+    ></span>`;
+    }
     renderSelectAll() {
         if (!this.selectable) {
             return nothing;
         }
+        if (this.single) {
+            return html `<span part="select-all" role="columnheader" aria-label=${this.selectColumnLabel}
+        tabindex=${this.grid ? (this.gridKeys.isStop({ column: this.lead.indexOf('select'), row: -1 }) ? '0' : '-1') : nothing}
+      ></span>`;
+        }
         const every = this.childrenKnown ? this.enabledKeys : [];
         const { checked, indeterminate } = everyState(this.chosen, every);
         const checkbox = this.tag('checkbox');
@@ -551,13 +797,13 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         const end = grid ? html `<span part="grid-end" tabindex="-1"></span>` : nothing;
         return html `<slot name="heading"></slot>${start}<div
       part="table"
-      role=${grid ? 'grid' : 'table'}
-      aria-multiselectable=${grid && this.selectable ? 'true' : nothing}
+      role=${grid ? (this.nests ? 'treegrid' : 'grid') : 'table'}
+      aria-multiselectable=${grid && this.selectable ? (this.single ? 'false' : 'true') : nothing}
       aria-busy=${this.loading ? 'true' : nothing}
       aria-label=${this.label || this.fallbackLabel}
       style=${template ? `--table-template: ${template}` : ''}
     >
-      <div part="head" role="row">${this.renderGripHead()}${this.renderSelectAll()}<slot name="columns"></slot></div>
+      <div part="head" role="row">${this.renderGripHead()}${this.renderSelectAll()}${this.renderExpandHead()}<slot name="columns"></slot></div>
       <slot
         @slotchange=${(event) => {
             this.countRows(event);
@@ -567,7 +813,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
       ${this.errorText === ''
             ? this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')
             : html `<p part="error" role="row"><span role=${grid ? 'gridcell' : 'cell'}><slot name="error">${this.errorText}</slot></span></p>`}
-    </div>${end}${this.errorText === ''
+    </div>${end}${this.loadMore ? html `<span data-end aria-hidden="true"></span>` : nothing}${this.errorText === ''
             ? this.renderLive(this.hasRows)
             : html `<span part="live" role="status">${this.errorText}</span>`}${this.reorder.drawDragPreview()}`;
     }
@@ -583,6 +829,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: 'default-expanded' })
+], HelixHeadlessTable.prototype, "defaultExpanded", void 0);
 __decorate([
     property({ attribute: 'default-selected' })
 ], HelixHeadlessTable.prototype, "defaultSelected", void 0);
@@ -600,6 +849,17 @@ __decorate([
 __decorate([
     property({ attribute: 'error-text' })
 ], HelixHeadlessTable.prototype, "errorText", void 0);
+__decorate([
+    words,
+    property({ attribute: 'expand-column-label' })
+], HelixHeadlessTable.prototype, "expandColumnLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessTable.prototype, "expanded", null);
+__decorate([
+    words,
+    property({ attribute: 'expand-row-label' })
+], HelixHeadlessTable.prototype, "expandRowLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'fallback-label' })
@@ -610,6 +870,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'load-more', type: Boolean })
+], HelixHeadlessTable.prototype, "loadMore", void 0);
 __decorate([
     words,
     property({ attribute: 'moved-label' })
@@ -636,6 +899,10 @@ __decorate([
     words,
     property({ attribute: 'select-all-label' })
 ], HelixHeadlessTable.prototype, "selectAllLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'select-column-label' })
+], HelixHeadlessTable.prototype, "selectColumnLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "selected", null);
@@ -643,6 +910,12 @@ __decorate([
     words,
     property({ attribute: 'selected-label' })
 ], HelixHeadlessTable.prototype, "selectedLabel", void 0);
+__decorate([
+    property({ attribute: 'selection-behavior' })
+], HelixHeadlessTable.prototype, "selectionBehavior", void 0);
+__decorate([
+    property({ attribute: 'selection-mode' })
+], HelixHeadlessTable.prototype, "selectionMode", void 0);
 __decorate([
     words,
     property({ attribute: 'select-row-label' })
@@ -664,6 +937,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTable.prototype, "selectedState", void 0);
+__decorate([
+    state()
+], HelixHeadlessTable.prototype, "expandedState", void 0);
 HelixHeadlessTable = __decorate([
     customElement('helix-headless-table')
 ], HelixHeadlessTable);

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

@@ -22,6 +22,12 @@ export type TableRowMove = 'dragging' | 'drop-after' | 'drop-before';
  * the drop indicator is, with the `dragging`, `drop-before`, and `drop-after`
  * states.
  *
+ * **`parent` nests the row under another**, by that row's key. The table
+ * then draws a column of disclosure buttons: a row with rows under it has one,
+ * named by the table's `expand-row-label` and saying whether it is open with
+ * `aria-expanded`, and its rows are drawn only while it is open. The cell is
+ * indented by the row's depth through `--table-row-level`.
+ *
  * **`href` makes the whole row a link**, as a row action does in React Aria's
  * table: a press anywhere on the row follows it, except on a link or a control
  * of the row's own, and Control, Command or Shift open it the way they open a
@@ -48,15 +54,21 @@ export type TableRowMove = 'dragging' | 'drop-after' | 'drop-before';
  * @csspart checkbox-mark-checked - Added to `checkbox-mark` while its box is checked.
  * @csspart checkbox-mark-dash - Added to `checkbox-mark` while it draws the dash, which it keeps until its box is checked.
  * @csspart checkbox-mark-indeterminate - Added to `checkbox-mark` while only some rows are selected.
+ * @csspart expand - The cell that holds the row's disclosure button, in a table whose rows nest. It carries `--table-row-level`, the row's depth from 1.
+ * @csspart expand-button - The button that shows and hides the rows under this one.
+ * @csspart expand-mark - The caret on the disclosure button, which points along the line, turned down by the styled tier while the row is open.
  * @csspart grip - The cell that holds the row's grip, in a `reorderable` table.
  * @csspart grip-button - The button that moves the row.
  * @csspart grip-mark - The icon on the grip.
  * @csspart select - The cell that holds the row's checkbox, in a `selectable` table.
  * @csspart select-selected - Added to `select` while the row is selected.
  *
+ * @cssproperty --table-row-level - Written by the row on its `expand` cell: how deep the row sits, from 1. Do not set it.
+ *
  * @cssstate dragging - The row is being moved, in a `reorderable` table.
  * @cssstate drop-after - The row being moved goes after this one when it is dropped.
  * @cssstate drop-before - The row being moved goes before this one when it is dropped.
+ * @cssstate expanded - While the rows under this one are shown.
  * @cssstate link - While the row has `href` and is not `disabled`, so a press on it follows the link.
  * @cssstate selected - While the row is selected, in a `selectable` table.
  */
@@ -80,6 +92,12 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * Empty, the default, leaves presses to the row's cells.
      */
     href: string;
+    /**
+     * The key of the row this one sits under, in a table whose rows nest: that
+     * row's `value`, or its place among the rows where it has none. Empty, the
+     * default, is a row at the top.
+     */
+    parent: string;
     /** The `rel` of the row's link. You set it yourself, as on an anchor. */
     rel: string;
     /** Where the row's link opens, such as `_blank`. */
@@ -133,6 +151,22 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * by the table that sets `gridCell`. Not a consumer's to set.
      */
     selectStop: boolean;
+    /**
+     * @internal How deep the row sits, from 1, in a table whose rows nest, and
+     * 0 in one whose rows do not, which draws no disclosure cell. Written by the
+     * table. Not a consumer's to set.
+     */
+    level: number;
+    /** @internal Whether rows sit under this one. Written by the table. */
+    branch: boolean;
+    /** @internal Whether the rows under this one are shown. Written by the table. */
+    open: boolean;
+    /** @internal The name of the disclosure button. Written by the table. */
+    expandLabel: string;
+    /** @internal Whether the disclosure cell holds the grid's one tab stop. Written by the table. */
+    expandStop: boolean;
+    /** @internal What a press on the disclosure button asks of the table. Written by the table. */
+    expandWith: (() => void) | undefined;
     /** The table's rules this row holds, so the next ones replace them rather than pile up. */
     private columnRules;
     /**
@@ -173,6 +207,13 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * leaves the tab order. `aria-disabled` while a sort decides the order.
      */
     protected renderGrip(): TemplateResult | typeof nothing;
+    /**
+     * The disclosure cell, in a table whose rows nest: a button where rows sit
+     * under this one, and an empty cell where none do, so the columns stay in
+     * line. In a grid the cell takes focus and Space or Enter on it presses the
+     * button, which leaves the tab order.
+     */
+    protected renderExpand(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {