@fusion.dev/helix-headless 0.165.0 → 0.167.0

package/dist/menu/root/menu-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, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, focusTarget, HelixElement, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorElement, customElement, DrilldownController, deepActiveElement, deepContains, filterKeeps, focusTarget, HelixElement, HelixFilterEvent, inlineStep, KeyboardNavigationController, linkDescription, MixinCollection, MixinControllerOpen, markMatches, onUnlessFalse, PopoverController, scrollItemIntoView, sideOf, slottedWords, tellDisclosure, typeaheadBy, unlinkDescription, words, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -33,8 +33,12 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.backLabel = 'Back';
         this.closeOnSelect = true;
         this.context = false;
+        this.filter = '';
+        this.filterable = false;
+        this.filterLabel = 'Filter';
         this.label = '';
         this.longPressLabel = 'Long press or press Alt+Down to show the menu';
+        this.noResultsText = 'No matches';
         this.offset = 4;
         this.longPress = new LongPress(this, {
             onLongPress: () => {
@@ -68,7 +72,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         });
         this.aria = new AriaForwardController(this, {
             label: true,
-            target: () => this.partNamed('surface'),
+            target: () => this.menuBox,
         });
         this.panel = new PopoverController(this, {
             anchor: () => this.context && this.point
@@ -89,6 +93,11 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             surface: () => this.partNamed('surface'),
         });
         this.settledOnce = false;
+        this.filterPage = null;
+        this.handleFilterInput = (event) => {
+            event.stopPropagation();
+            this.filterBy(event.target.value);
+        };
         this.handleContextMenu = (event) => {
             if (!this.context) {
                 return;
@@ -129,14 +138,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         };
         this.handleFocusIn = (event) => {
             const item = this.items.find((row) => row.contains(event.target));
-            if (!item) {
-                return;
+            if (item) {
+                this.revealRow(item);
             }
-            const holder = this.flies ? this.holderOf(item) : null;
-            const surface = holder
-                ? holder.shadowRoot?.querySelector('[part="surface"]')
-                : this.partNamed('surface');
-            scrollItemIntoView(item, { padding: 4, ...(surface ? { scroller: surface } : {}) });
         };
         this.handleKeydown = (event) => {
             if (!this.open) {
@@ -146,9 +150,23 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             const items = this.items;
             const at = items.findIndex((item) => item.active);
             const along = inlineStep(this, event.key);
+            const typing = this.filterable && event.composedPath()[0] === this.field;
+            const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
             if (event.key === 'Escape') {
                 event.stopPropagation();
-                this.leave();
+                if (!this.filterable || this.filter === '') {
+                    this.leave();
+                }
+                else {
+                    this.filterBy('');
+                }
+            }
+            else if (typing && step !== 0) {
+                const count = items.length;
+                this.reach(items[at < 0 ? (step > 0 ? 0 : count - 1) : (at + step + count) % count]);
+            }
+            else if (typing && event.key === 'Enter') {
+                items[at]?.renderRoot.querySelector('[part="item"]')?.click();
             }
             else if (along === 1 && items[at]?.hasSubmenu) {
                 this.enter(items[at]);
@@ -188,6 +206,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 this.longPress.down(event);
             }
         };
+        this.handleMouseDown = (event) => {
+            if (this.filterable &&
+                this.open &&
+                event.composedPath()[0] !== this.field &&
+                !this.fromTrigger(event)) {
+                event.preventDefault();
+            }
+        };
         this.handlePointerMove = (event) => {
             this.longPress.move(event);
         };
@@ -209,7 +235,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             }
         };
         this.handleHover = (event) => {
-            if (!this.flies || !this.open || event.pointerType !== 'mouse') {
+            if (!(this.flies || this.filterable) || !this.open || event.pointerType !== 'mouse') {
                 return;
             }
             const row = event
@@ -221,7 +247,10 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             this.hovered = row;
             this.grace = undefined;
             if (!row.disabled) {
-                row.focus();
+                this.reach(row);
+            }
+            if (!this.flies) {
+                return;
             }
             clearTimeout(this.hoverTimer);
             this.hoverTimer = setTimeout(() => {
@@ -334,7 +363,53 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     get items() {
         const rows = this.flies ? this.rowsOf(this.keyPage) : this.drilldown.rows;
-        return rows.filter((row) => !row.disabled);
+        return rows.filter((row) => !row.disabled && this.kept(row));
+    }
+    get menuBox() {
+        return this.filterable
+            ? (this.renderRoot?.querySelector('#items') ?? null)
+            : this.partNamed('surface');
+    }
+    get field() {
+        return this.partNamed('search-field');
+    }
+    get filtering() {
+        return this.filterable && this.filter.trim() !== '' && this.filter !== this.refused;
+    }
+    kept(row) {
+        return (!this.filtering ||
+            this.holderOf(row) !== this.filterPage ||
+            filterKeeps(slottedWords(row, ['']), this.filter.trim(), this.filterMatch));
+    }
+    requestFilter(value) {
+        if (value === this.filter) {
+            return;
+        }
+        this.filterPage = this.flies ? this.keyPage : this.drilldown.page;
+        this.refused = this.dispatchEvent(new HelixFilterEvent({ value })) ? undefined : value;
+        this.filter = value;
+    }
+    filterBy(value) {
+        this.requestFilter(value);
+        void this.updateComplete.then(() => this.reach(this.items[0]));
+    }
+    reach(row) {
+        if (!this.filterable) {
+            row?.focus();
+            return;
+        }
+        if (this.highlighted && this.highlighted !== row) {
+            this.highlighted.highlighted = false;
+        }
+        this.highlighted = row;
+        const field = this.field;
+        if (field && 'ariaActiveDescendantElement' in field) {
+            field.ariaActiveDescendantElement = row ?? null;
+        }
+        if (row) {
+            row.highlighted = true;
+            this.revealRow(row);
+        }
     }
     show() {
         this.openAt('first');
@@ -345,7 +420,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         }
         this.updateComplete.then(() => {
             const items = this.items;
-            (end === 'first' ? items[0] : items[items.length - 1])?.focus();
+            this.field?.focus();
+            this.reach(end === 'first' ? items[0] : items[items.length - 1]);
         });
     }
     hide() {
@@ -355,6 +431,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.panel.hide();
         this.drilldown.reset();
         this.stopHover();
+        this.requestFilter('');
+        this.reach(undefined);
         if (deepContains(this, deepActiveElement())) {
             ;
             (this.context ? (this.returnTo ?? this.trigger) : this.trigger).focus();
@@ -377,18 +455,20 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         if (!this.drilldown.enter(item)) {
             return;
         }
+        this.requestFilter('');
         void this.updateComplete.then(async () => {
             if (!this.flies) {
-                this.items[0]?.focusItem();
+                this.reach(this.items[0]);
                 return;
             }
             await item.updateComplete;
             const first = this.rowsOf(item).find((row) => !row.disabled);
             await first?.updateComplete;
-            first?.focusItem();
+            this.reach(first);
         });
     }
     leave() {
+        this.requestFilter('');
         if (this.flies) {
             const holder = this.keyPage;
             if (!holder) {
@@ -396,7 +476,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
                 return;
             }
             this.openPage(this.holderOf(holder));
-            this.updateComplete.then(() => holder.focus());
+            this.updateComplete.then(() => this.reach(holder));
             return;
         }
         if (this.drilldown.atRoot) {
@@ -405,7 +485,14 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         }
         const leaving = this.drilldown.page;
         this.drilldown.back();
-        this.updateComplete.then(() => leaving?.focus());
+        this.updateComplete.then(() => this.reach(leaving ?? undefined));
+    }
+    revealRow(item) {
+        const holder = this.flies ? this.holderOf(item) : null;
+        const surface = holder
+            ? holder.shadowRoot?.querySelector('[part="surface"]')
+            : this.partNamed('surface');
+        scrollItemIntoView(item, { padding: 4, ...(surface ? { scroller: surface } : {}) });
     }
     handleClosedKeydown(event) {
         if (this.context && event.shiftKey && event.key === 'F10' && this.fromTrigger(event)) {
@@ -462,6 +549,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.addEventListener('focusin', this.handleFocusIn);
         this.addEventListener('contextmenu', this.handleContextMenu);
         this.addEventListener('pointerdown', this.handlePointerDown);
+        this.addEventListener('mousedown', this.handleMouseDown);
         this.addEventListener('pointermove', this.handlePointerMove);
         this.addEventListener('pointerup', this.handlePointerUp);
         this.addEventListener('pointercancel', this.handlePointerCancel);
@@ -484,6 +572,10 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.removeEventListener('focusin', this.handleFocusIn);
         this.removeEventListener('contextmenu', this.handleContextMenu);
         this.removeEventListener('pointerdown', this.handlePointerDown);
+        this.removeEventListener('mousedown', this.handleMouseDown);
+        if (this.filterable) {
+            markMatches(this, [], '');
+        }
         this.removeEventListener('pointermove', this.handlePointerMove);
         this.removeEventListener('pointerup', this.handlePointerUp);
         this.removeEventListener('pointercancel', this.handlePointerCancel);
@@ -505,7 +597,9 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         const top = this.flies || this.drilldown.atRoot;
         for (const child of this.children) {
             if (isSection(child)) {
-                child.onPage = top;
+                child.onPage =
+                    top &&
+                        (!this.filtering || [...child.children].some((row) => isItem(row) && this.kept(row)));
                 for (const row of child.children) {
                     if (row.isMenuItem === true) {
                         this.mark(row, top);
@@ -522,9 +616,18 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
         this.toggleState('drilled', !this.flies && !this.drilldown.atRoot);
         this.markColumns();
         this.nameSurface();
+        if (this.filterable) {
+            markMatches(this, this.rowsOf(this.filterPage).filter((row) => this.kept(row)), this.filtering ? this.filter.trim() : '');
+            const items = this.items;
+            if (changed.has('filter') &&
+                this.open &&
+                !items.includes(this.highlighted)) {
+                this.reach(items[0]);
+            }
+        }
     }
     nameSurface() {
-        const surface = this.partNamed('surface');
+        const surface = this.menuBox;
         if (!surface || !('ariaLabelledByElements' in surface)) {
             return;
         }
@@ -544,7 +647,8 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     mark(item, onPage) {
         const page = this.drilldown.page;
-        item.onPage = onPage;
+        item.onPage = onPage && this.kept(item);
+        item.virtual = this.filterable;
         const holds = page !== null && item.contains(page);
         item.flyout = this.flies;
         item.expanded = this.flies && holds;
@@ -553,7 +657,7 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             for (const child of item.children) {
                 const nested = child;
                 if (nested.isMenuItem === true && child.slot === 'submenu') {
-                    this.mark(nested, onPage && holds);
+                    this.mark(nested, item.onPage && holds);
                 }
             }
             return;
@@ -568,6 +672,32 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     render() {
         const point = this.context && this.point;
+        const filtering = this.filtering;
+        const none = filtering && !this.rowsOf(this.filterPage).some((row) => this.kept(row));
+        this.announced = none ? this.noResultsText : '';
+        const rows = html `${this.flies || this.drilldown.atRoot
+            ? nothing
+            : html `<div part="header">
+            <button
+              part="back"
+              type="button"
+              role="menuitem"
+              tabindex="-1"
+              aria-label=${this.backLabel}
+              @click=${() => this.leave()}
+            >
+              <svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
+                ${unsafeSVG(caretLeft.content)}
+              </svg>
+            </button>
+            <span part="title">${this.drilldown.label}</span>
+          </div>`}
+      <slot @slotchange=${(event) => this.countRows(event)}></slot>
+      ${none
+            ? html `<p part="empty"><slot name="no-results">${this.noResultsText}</slot></p>`
+            : this.renderStatus(this.hasRows)}`;
+        const busy = this.loading ? 'true' : nothing;
+        const label = this.label || nothing;
         return html `<slot name="trigger" @click=${this.handleTriggerClick}></slot>${point
             ? html `<span
             id="point"
@@ -578,31 +708,27 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
       <div
         part="surface"
         popover="manual"
-        role="menu"
-        aria-busy=${this.loading ? 'true' : nothing}
-        aria-label=${this.label || nothing}
+        role=${this.filterable ? nothing : 'menu'}
+        aria-busy=${this.filterable ? nothing : busy}
+        aria-label=${this.filterable ? nothing : label}
         data-drilled=${this.flies || this.drilldown.atRoot ? nothing : ''}
+        data-filtered=${filtering ? '' : nothing}
         ?hidden=${!this.open}
       >
-        ${this.flies || this.drilldown.atRoot
-            ? nothing
-            : html `<div part="header">
-                <button
-                  part="back"
-                  type="button"
-                  role="menuitem"
-                  tabindex="-1"
-                  aria-label=${this.backLabel}
-                  @click=${() => this.leave()}
-                >
-                  <svg part="back-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
-                    ${unsafeSVG(caretLeft.content)}
-                  </svg>
-                </button>
-                <span part="title">${this.drilldown.label}</span>
-              </div>`}
-        <slot @slotchange=${(event) => this.countRows(event)}></slot>
-        ${this.renderStatus(this.hasRows)}
+        ${this.filterable
+            ? html `<input
+                  part="search-field"
+                  type="text"
+                  autocomplete="off"
+                  spellcheck="false"
+                  .value=${this.filter}
+                  placeholder=${this.filterLabel}
+                  aria-label=${this.filterLabel}
+                  aria-autocomplete="list"
+                  aria-controls="items"
+                  @input=${this.handleFilterInput}
+                /><div id="items" role="menu" aria-busy=${busy} aria-label=${label}>${rows}</div>`
+            : rows}
       </div>${this.renderLive(this.hasRows)}`;
     }
 };
@@ -616,6 +742,19 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessMenu.prototype, "context", void 0);
+__decorate([
+    property()
+], HelixHeadlessMenu.prototype, "filter", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessMenu.prototype, "filterable", void 0);
+__decorate([
+    words,
+    property({ attribute: 'filter-label' })
+], HelixHeadlessMenu.prototype, "filterLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessMenu.prototype, "filterMatch", void 0);
 __decorate([
     property()
 ], HelixHeadlessMenu.prototype, "label", void 0);
@@ -623,6 +762,10 @@ __decorate([
     words,
     property({ attribute: 'long-press-label' })
 ], HelixHeadlessMenu.prototype, "longPressLabel", void 0);
+__decorate([
+    words,
+    property({ attribute: 'no-results-text' })
+], HelixHeadlessMenu.prototype, "noResultsText", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessMenu.prototype, "offset", void 0);

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -390,6 +390,11 @@ export declare class HelixHeadlessObjectInspector extends HelixElement {
     private counted;
     /** Says how many entries the filter matched, and nothing for an empty one. */
     private tell;
+    /**
+     * Moves focus to the row the keys move from, or to the tree while that row
+     * is scrolled out of the window, as Tab reaches them.
+     */
+    focus(options?: FocusOptions): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     /**

package/dist/object-inspector/root/object-inspector-root.js

@@ -268,6 +268,11 @@ let HelixHeadlessObjectInspector = class HelixHeadlessObjectInspector extends He
             this.status.say(this.counted('result', this.found.size));
         }
     }
+    focus(options) {
+        this.renderRoot
+            ?.querySelector('#tree[tabindex="0"], #tree [tabindex="0"]')
+            ?.focus(options);
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();

package/dist/select/root/select-root.js

@@ -340,7 +340,7 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
     }
     renderIndicator() {
         return html `<slot name="indicator">
-      <svg part="indicator" fill="currentColor" viewBox=${caretDown.viewBox} aria-hidden="true">
+      <svg part="indicator" fill="currentColor" width="1em" height="1em" viewBox=${caretDown.viewBox} aria-hidden="true">
         ${unsafeSVG(caretDown.content)}
       </svg>
     </slot>`;

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

@@ -158,6 +158,13 @@ export declare class HelixHeadlessSteps extends HelixHeadlessSteps_base {
      * calls to `next()` in one task then move two stages.
      */
     private get at();
+    /**
+     * Requests a new current stage, and returns whether it moved.
+     *
+     * Where only a step's `current` says where the reader is, `active` is first
+     * written with that step, so `helix-activate` names it as `previous`.
+     */
+    requestActive(next: string, cause?: string): boolean;
     /**
      * Moves to the next stage that can be gone to, as Ark UI's `goToNextStep`
      * does. Returns whether it moved: not past the last stage, not into a stage

package/dist/steps/root/steps-root.js

@@ -65,6 +65,13 @@ let HelixHeadlessSteps = class HelixHeadlessSteps extends MixinControllerActive(
         const item = this.resolveActive(steps);
         return item ? steps.indexOf(item) : -1;
     }
+    requestActive(next, cause) {
+        const here = this.active === '' ? this.steps[this.at]?.value : undefined;
+        if (here) {
+            this.active = here;
+        }
+        return super.requestActive(next, cause);
+    }
     next() {
         return this.step(1);
     }

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

@@ -51,6 +51,16 @@ export interface TableGridOptions {
     disclose?: (row: number, forward: boolean) => boolean | number;
     /** Whether the table is a grid now. */
     on: () => boolean;
+    /**
+     * The rows drawn now, in a table that draws only some of them, which are
+     * the only rows whose cells are marked. Every row where it is left out.
+     */
+    drawn?: () => ReadonlySet<Element> | undefined;
+    /**
+     * Brings drawn row `row` into view before a key focuses it, in a table that
+     * draws only the rows in view, so the row is drawn by then.
+     */
+    reveal?: (row: number) => void;
 }
 /**
  * The keyboard of a `grid` table: one tab stop among its cells, the arrow

package/dist/table/grid-controller.js

@@ -247,6 +247,9 @@ export class TableGridController {
         this.stopRow = place.row === -1 ? 'head' : this.options.rows()[place.row];
         this.stopColumn = place.column;
         this.focusWanted = focus;
+        if (focus && place.row >= 0) {
+            this.options.reveal?.(place.row);
+        }
         this.host.requestUpdate();
     }
     mark() {
@@ -259,7 +262,11 @@ export class TableGridController {
             column.gridCell = on;
             column.tabStop = on && at.row === -1 && at.column === index + this.offset;
         }
+        const drawn = this.options.drawn?.();
         for (const [index, line] of this.options.rows().entries()) {
+            if (drawn && !drawn.has(line)) {
+                continue;
+            }
             const row = line;
             if (row.isTableRow) {
                 const here = on && at.row === index;

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

@@ -36,6 +36,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * The `heading` slot names the table: slot a heading or a line of text into
  * it, and the table is named by its words. An `aria-label` or `aria-labelledby` on the
  * host wins over it.
+ * A table with no name is reported once in a development build.
  *
  * **Selecting.** `selectable` adds a column of checkboxes.
  *
@@ -121,9 +122,17 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
  * | Tab | Leaves the table. |
  *
+ * **Long tables.** `windowed` draws only the rows in view, as Data Table's
+ * does, and the box of the table scrolls under headings that stick. The
+ * table still says how many rows it has with `aria-rowcount`, and each row
+ * its place with `aria-rowindex`. The keys reach every row, drawn or not, and
+ * the row holding focus stays drawn when it scrolls away. Nested rows,
+ * sorting, and selecting work as they do in a table that draws every row.
+ *
  * **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
+ * page, or in the table's own box when it is `windowed`, 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
@@ -158,6 +167,8 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @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 after - The space that stands in for the rows below the window. Only while `windowed`.
+ * @csspart before - The space that stands in for the rows above the window. Only while `windowed`.
  * @csspart 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.
  * @csspart checkbox-control - The checkbox's input.
@@ -399,11 +410,35 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     sortedLabel: string;
     /** What screen readers hear when the table stops being sorted. */
     unsortedLabel: string;
+    /**
+     * Draws only the rows in view, with empty space in place of the rest, as
+     * Data Table's `windowed` does. The table's box then scrolls, at the
+     * height `--table-block-size` gives it in the styled tier, and the
+     * headings stick to its top.
+     *
+     * Off by default. Windowing costs a scroll listener, a measurement per row
+     * drawn, and a height on the table, and a table of twenty rows should pay
+     * none of them.
+     */
+    windowed: boolean;
     private sortState;
     private selectedState;
     private expandedState;
     /** Whether any row sits under another, which makes the table a tree. */
     private get nests();
+    /**
+     * What the table read from its rows, kept until anything asks for an
+     * update or the turn ends.
+     *
+     * **Read once rather than on every question.** A render, the assignment
+     * and the keyboard each asked for the rows in order dozens of times, and
+     * each answer walked every row: in Chromium a windowed table of 3,000 rows
+     * took 89 milliseconds to move its window, 42 of them reading the keys.
+     */
+    private memo;
+    private remember;
+    /** @internal Forgets what was read from the rows, then asks for an update as Lit does. */
+    requestUpdate(name?: PropertyKey, oldValue?: unknown, options?: Parameters<HelixElement['requestUpdate']>[2]): void;
     /** The keys of the rows whose rows are shown. */
     private get open();
     /**
@@ -424,6 +459,37 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     protected readonly aria: AriaForwardController;
     /** The keyboard of a `grid` table, in `grid-controller.ts`. */
     private readonly gridKeys;
+    /**
+     * The slice of a long table that is drawn, under `windowed`. The rows are
+     * the page's elements, so the window is which of them the body slot is
+     * given: a row it is not given is not laid out and not in the
+     * accessibility tree.
+     */
+    private readonly virtualize;
+    /** How many rows are drawn in order, read when the rows are assigned. */
+    private arrangedCount;
+    /** A `windowed` table has rows while it holds any, drawn or not. */
+    protected get hasRows(): boolean;
+    /** The rows the body slot was last given, under `windowed`. */
+    private drawnRows;
+    /**
+     * The rows drawn now, each by its first cell, with its place among the
+     * rows. A row is `display: contents` and has no box, and a cell is a grid
+     * item stretched to its row, as Data Table measures its rows.
+     */
+    private measuredRows;
+    /** The row outside the window that stays drawn: the grid's stop, or the row holding focus. */
+    private keptRow;
+    /**
+     * The rows to draw under `windowed`: the window, and the row kept for
+     * focus beside it on its side.
+     */
+    private windowOf;
+    /**
+     * Scrolls drawn row `row` into view below the headings, and moves the
+     * window to it, before a key focuses it.
+     */
+    private revealRow;
     /**
      * Moving rows by their grips, in a `reorderable` table. The rows are the
      * page's, so a drop asks the page to move them, and the grips do nothing
@@ -459,6 +525,8 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * which is what a framework holding those rows needs.
      */
     private get arrangedRows();
+    /** The rows in the order they are drawn, worked out again. */
+    private arrange;
     /**
      * 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`
@@ -714,6 +782,8 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * are asked for before a reader reaches the last. List does the same.
      */
     private watchEnd;
+    /** Asks for more once a reader of a `windowed` table is within a screen of its end. */
+    private readonly nearEnd;
     /** 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. */