@fusion.dev/helix-headless 0.166.0 → 0.168.0

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

@@ -1,7 +1,7 @@
 import { AriaForwardController, HelixFormElement, PopoverController, UpgradeController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../listbox/index.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 declare const HelixHeadlessCombobox_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A text field that filters a list of options as you type.
@@ -668,6 +668,11 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * slot is for the page and the method is for whoever is building the styled
      * layer, and a fallback with only the first is one a tier can restyle and
      * cannot change.
+     *
+     * **One em square by its own attributes**, which any stylesheet overrides.
+     * An inline `<svg>` with a `viewBox` and no size fills the width it is given:
+     * measured with no stylesheet, the caret was 1,264px tall, the field 1,289px,
+     * and the panel opened above the top of the page.
      */
     protected renderIndicator(): TemplateResult;
     /**

package/dist/combobox/root/combobox-root.js

@@ -13,7 +13,7 @@ import { html } from 'lit/static-html.js';
 import { optionsAmong } from '../../option/root/option-root.js';
 import { HelixHeadlessTag } from '../../tag/root/tag-root.js';
 import '../../listbox/index.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 const isInsertion = (event) => !event.inputType?.startsWith('delete');
 let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))) {
     constructor() {
@@ -612,7 +612,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
     }
     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/date-input/root/date-input-root.d.ts

@@ -51,7 +51,7 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * | Page Up, Page Down on a segment | Steps by a page: a week of days, two months, or five years. |
  * | Home, End on a segment | Goes to the segment's first or last value. |
  * | Digits on a segment | Fill it, and move to the next once it can take no more. |
- * | Backspace, Delete on a segment | Empty the segment. |
+ * | Backspace, Delete on a segment | Take off its last digit, or move to the segment before where it is empty. |
  * | Left, Right on a segment | Move to the previous or the next segment, along the line of text. |
  *
  * In the calendar, the keys are `DatePicker`'s: the arrows move by a day or a

package/dist/element-events.generated.js

@@ -17,6 +17,7 @@ registerElementEvents({
     'helix-headless-callout': ['helix-dismiss'],
     'helix-headless-canvas': [
         'helix-before-move',
+        'helix-before-paste',
         'helix-before-reconnect',
         'helix-before-relabel',
         'helix-canvas-edit',
@@ -25,6 +26,7 @@ registerElementEvents({
         'helix-canvas-zoom',
         'helix-connect',
         'helix-move',
+        'helix-pasted',
         'helix-reconnect',
         'helix-relabel',
         'helix-remove',

package/dist/file-input/root/file-input-root.d.ts

@@ -2,7 +2,7 @@ import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core'
 import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { type FileStatus } from '../status.js';
 export type { FileStatus } from '../status.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 declare const HelixHeadlessFileInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A field for choosing files from a picker or by dropping them on it.

package/dist/file-input/root/file-input-root.js

@@ -11,7 +11,7 @@ import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import { screenFiles } from '../screen.js';
 import { barOf, saysStatus } from '../status.js';
-import '../../tag/index.js';
+import '../../tag/root/index.js';
 const size = (bytes, locale, inBytes) => {
     const units = ['', 'KB', 'MB', 'GB', 'TB'];
     let value = bytes;

package/dist/format-date/root/format-date-root.d.ts

@@ -84,7 +84,8 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      */
     calendar?: DateCalendar | MonthCalendar;
     /**
-     * The timestamp, in any format `Date` can parse.
+     * The timestamp: a `Date`, milliseconds since the epoch, or a string in any
+     * format `Date` can parse. The attribute is the string.
      *
      * An ISO string is what an API sends and what `<time datetime>` takes, so it
      * is the shape that needs no translation at either end. Left unset this
@@ -100,7 +101,7 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
      * it. An element rendered on a server needs the attribute; one rendered in a
      * browser may use either.
      */
-    date: string;
+    date: Date | number | string;
     /**
      * The locale's own pattern for the date: `full`, `long`, `medium`, or
      * `short`. Set, it stands in for `weekday`, `day`, `month`, `year` and `era`.
@@ -259,7 +260,13 @@ export declare class HelixHeadlessFormatDate extends HelixElement {
     private get dateOnly();
     /** The timestamp, or nothing where there is not one to read. */
     private get moment();
-    /** The timestamp as written, in the attribute or in the light DOM. */
+    /**
+     * The timestamp as written, in the property, the attribute or the light DOM.
+     *
+     * A `Date` or a number is written as its ISO string, so it is read the way an
+     * attribute is. Measured before this: assigning `new Date()` threw, since
+     * only a string has `trim`, where Shoelace and Web Awesome take a `Date`.
+     */
     private get source();
     /** Whether the reading is how long ago rather than the date. */
     private get reading();

package/dist/format-date/root/format-date-root.js

@@ -44,7 +44,12 @@ let HelixHeadlessFormatDate = class HelixHeadlessFormatDate extends HelixElement
         return Number.isNaN(parsed.getTime()) ? undefined : parsed;
     }
     get source() {
-        return (this.date || this.written).trim();
+        const date = this.date;
+        if (typeof date === 'string') {
+            return (date || this.written).trim();
+        }
+        const at = new Date(date);
+        return Number.isNaN(at.getTime()) ? '' : at.toISOString();
     }
     get reading() {
         return this.elapsed || this.relative !== undefined;

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

@@ -542,7 +542,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      */
     navigate(event: KeyboardEvent): void;
     /**
-     * Scrolls the chosen option to the middle of the list.
+     * Scrolls the chosen option to the middle of the list, or the highlighted one
+     * where nothing is chosen.
      *
      * A method rather than something this does on its own, because a listbox
      * opening on its answer usually wants it merely *visible* and the browser
@@ -554,6 +555,16 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * arithmetic, since the chosen option may not be drawn.
      */
     reveal(): void;
+    /**
+     * Puts the highlight on the option holding `value`, without choosing it, so
+     * the arrow keys move from there. Nothing changes where no option a reader
+     * can reach holds `value`.
+     *
+     * Time Picker calls it for a time between two of its steps, which no option
+     * holds: without it the first arrow moved from the top of the list, so Down
+     * from 14:07 went to midnight.
+     */
+    highlightValue(value: string): void;
     /** Hides what the filter excludes, and writes the rest onto the options. */
     private place;
     /**

package/dist/listbox/root/listbox-root.js

@@ -391,11 +391,23 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
             return;
         }
         const items = this.partNamed('items');
-        const chosen = this.options.find((option) => option.selected && !option.hidden);
+        const chosen = this.options.find((option) => option.selected && !option.hidden) ??
+            this.options.find((option) => option.value === this.activeValue && !option.hidden);
         if (items && chosen) {
             centerInView(items, chosen);
         }
     }
+    highlightValue(value) {
+        if (!this.shown.some((option) => !option.disabled && option.value === value)) {
+            return;
+        }
+        this.typeahead.reset();
+        this.parked = false;
+        this.activeValue = value;
+        if (this.childrenKnown) {
+            this.place();
+        }
+    }
     place() {
         this.forgetRemoved();
         const typed = this.filter.trim();

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/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. */

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, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, splitValues, toggleEvery, treeArrow, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, assignSlots, auditName, 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, treeArrow, VirtualizeController, 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';
@@ -46,6 +46,7 @@ const lengthOf = (element) => textOf(element).length;
 const numberOf = (value) => Number(value.replaceAll(',', ''));
 const STATUS = new Set(['empty', 'error', 'loading']);
 const NAMED = new Set([...STATUS, 'heading']);
+const ESTIMATE = 40;
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
@@ -78,9 +79,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         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.windowed = false;
         this.sortState = undefined;
         this.selectedState = undefined;
         this.expandedState = undefined;
+        this.memo = {};
         this.headed = false;
         this.aria = new AriaForwardController(this, {
             label: true,
@@ -95,9 +98,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             },
             columns: () => this.tableColumns.filter((column) => column.shown),
             disclose: (at, forward) => this.disclose(at, forward),
+            drawn: () => (this.windowed ? new Set(this.drawnRows) : undefined),
             lead: () => this.lead,
             on: () => this.grid,
             part: (name) => this.partNamed(name),
+            reveal: (row) => this.revealRow(row),
             rows: () => (this.childrenKnown ? this.arrangedRows : []),
             rowWords: () => this.arrangedRows.map((row) => textOf(row.children[0])),
             selectAll: () => this.selectable &&
@@ -105,6 +110,15 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 this.requestSelected(new Set([...this.chosen, ...this.enabledKeys])),
             selectRange: (to, from) => this.selectRange(to, from),
         });
+        this.virtualize = new VirtualizeController(this, {
+            container: () => (this.windowed ? this.partNamed('table') : null),
+            count: () => this.arrangedCount,
+            estimate: () => ESTIMATE,
+            measured: () => this.windowed,
+            rows: () => (this.windowed ? this.measuredRows() : []),
+        });
+        this.arrangedCount = 0;
+        this.drawnRows = [];
         this.reorder = new ReorderController(this, {
             axis: 'block',
             box: (key) => this.gripOf(this.rowFor(key))?.getBoundingClientRect(),
@@ -191,6 +205,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.watcher = undefined;
         this.alignment = undefined;
         this.aligned = '';
+        this.nearEnd = () => {
+            if (this.windowed && this.loadMore && this.virtualize.endInSight(this.arrangedCount)) {
+                this.askForMore();
+            }
+        };
         this.endInView = false;
     }
     static { this.words = 'helix-table'; }
@@ -219,7 +238,23 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.requestUpdate('sort', previous);
     }
     get nests() {
-        return this.childrenKnown && this.keyed.some(({ row }) => (row.parent ?? '') !== '');
+        return this.remember('nests', () => this.childrenKnown && this.keyed.some(({ row }) => (row.parent ?? '') !== ''));
+    }
+    remember(key, compute) {
+        const memo = this.memo;
+        if (Object.keys(memo).length === 0) {
+            queueMicrotask(() => {
+                if (this.memo === memo) {
+                    this.memo = {};
+                }
+            });
+        }
+        memo[key] ??= compute();
+        return memo[key];
+    }
+    requestUpdate(name, oldValue, options) {
+        this.memo = {};
+        super.requestUpdate(name, oldValue, options);
     }
     get open() {
         return new Set(commaList(this.expanded));
@@ -251,6 +286,44 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             row.dispatchEvent(new HelixToggleEvent({ checked: next }));
         }
     }
+    get hasRows() {
+        return (this.windowed && this.arrangedCount > 0) || super.hasRows;
+    }
+    measuredRows() {
+        const rows = this.arrangedRows;
+        const at = new Map(rows.map((row, index) => [row, index]));
+        return this.drawnRows.flatMap((row) => {
+            const cell = [...row.children].find((child) => child.getAttribute('hidden') === null && child.getAttribute('slot') === null);
+            const index = at.get(row);
+            return cell instanceof HTMLElement && index !== undefined ? [{ element: cell, index }] : [];
+        });
+    }
+    keptRow(rows) {
+        const { first, last } = this.virtualize.window;
+        const active = this.getRootNode().activeElement;
+        const focused = this.grid
+            ? this.gridKeys.current().row
+            : rows.findIndex((row) => active !== null && row.contains(active));
+        return focused >= 0 && (focused < first || focused >= last) ? focused : undefined;
+    }
+    windowOf(rows) {
+        const { first, last } = this.virtualize.window;
+        const drawn = rows.slice(first, last);
+        const kept = this.keptRow(rows);
+        const row = kept === undefined ? undefined : rows[kept];
+        if (kept !== undefined && row) {
+            return kept < first ? [row, ...drawn] : [...drawn, row];
+        }
+        return drawn;
+    }
+    revealRow(row) {
+        if (!this.windowed) {
+            return;
+        }
+        const heading = this.gridKeys.cellAt({ column: 0, row: -1 });
+        this.virtualize.reveal(row, heading?.getBoundingClientRect().height ?? 0);
+        this.virtualize.measure();
+    }
     get lead() {
         return [
             ...(this.reorderable ? ['grip'] : []),
@@ -282,6 +355,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         return this.requestSort(format(cycle(parse(this.sort), field)));
     }
     get arrangedRows() {
+        return this.remember('arranged', () => this.arrange());
+    }
+    arrange() {
         const rows = this.slotted;
         const spec = parse(this.sort);
         const declared = this.tableColumns;
@@ -381,10 +457,10 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         });
     }
     get keyed() {
-        return this.slotted.map((row, index) => ({
+        return this.remember('keyed', () => this.slotted.map((row, index) => ({
             key: row.value || String(index),
             row: row,
-        }));
+        })));
     }
     get chosen() {
         return new Set(commaList(this.selected));
@@ -538,10 +614,26 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         const tree = this.nests;
         const shapes = tree ? this.shape() : undefined;
         const open = this.open;
+        const drawn = this.windowed ? new Set(this.drawnRows) : undefined;
+        const places = drawn
+            ? new Map(this.arrangedRows.map((row, index) => [row, index + 2]))
+            : undefined;
         for (const { key, row } of this.keyed) {
             if (!row.isTableRow) {
                 continue;
             }
+            if (drawn && !drawn.has(row)) {
+                const shape = shapes?.get(key);
+                whenHydrated(row, () => {
+                    row.selectable = this.selectable;
+                    row.gripLabel = this.reorderable ? row.gripLabel || ' ' : '';
+                    row.level = shape?.level ?? 0;
+                    row.branch = shape?.branch ?? false;
+                    row.open = open.has(key);
+                });
+                continue;
+            }
+            const place = places?.get(row) ?? 0;
             const name = textOf(row.children[0]) || key;
             const label = formatWords(this, 'selectRowLabel', { row: name });
             const grip = this.reorderable ? formatWords(this, 'moveRowLabel', { row: name }) : '';
@@ -560,6 +652,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
                 row.open = open.has(key);
                 row.expandLabel = expand;
                 row.expandWith = tree ? () => this.toggleRow(key) : undefined;
+                row.rowIndex = place;
             });
         }
     }
@@ -676,7 +769,11 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         const columns = new Set(this.tableColumns);
         const headings = new Set(this.headings);
         const status = [...(this.children ?? [])].filter((child) => STATUS.has(child.getAttribute('slot') ?? ''));
-        assignSlots(this.renderRoot, [...columns, ...headings, ...status, ...this.arrangedRows], (child) => columns.has(child)
+        const arranged = this.arrangedRows;
+        this.arrangedCount = arranged.length;
+        const rows = this.windowed ? this.windowOf(arranged) : arranged;
+        this.drawnRows = this.windowed ? rows : [];
+        assignSlots(this.renderRoot, [...columns, ...headings, ...status, ...rows], (child) => columns.has(child)
             ? 'columns'
             : headings.has(child)
                 ? 'heading'
@@ -719,14 +816,22 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.markSorted();
         this.markSelected();
         this.nameByHeading();
+        auditName(this, () => null, 'Give it a `label`, or put a heading in its `heading` slot, that says what the rows are.', () => this.label !== '' || this.headings.length > 0);
         if (this.childrenKnown) {
             this.gridKeys.mark();
             this.gridKeys.place();
         }
+        if (this.windowed) {
+            this.virtualize.measure();
+            this.virtualize.settle();
+        }
         this.watchEnd();
     }
     watchEnd() {
-        const end = this.loadMore ? this.renderRoot.querySelector('[data-end]') : null;
+        if (this.windowed) {
+            this.nearEnd();
+        }
+        const end = this.loadMore && !this.windowed ? this.renderRoot.querySelector('[data-end]') : null;
         if (end === this.watchedEnd) {
             if (this.endInView) {
                 this.askForMore();
@@ -810,6 +915,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     render() {
         const template = this.template;
         const grid = this.grid;
+        const windowed = this.windowed && this.childrenKnown;
+        const count = windowed ? this.arrangedRows.length : 0;
+        const room = windowed ? this.virtualize.spacers(this.keptRow(this.arrangedRows)) : undefined;
         const start = grid ? html `<span part="grid-start" tabindex="-1"></span>` : nothing;
         const end = grid ? html `<span part="grid-end" tabindex="-1"></span>` : nothing;
         return html `<slot name="heading"></slot>${start}<div
@@ -818,15 +926,19 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
       aria-multiselectable=${grid && this.selectable ? (this.single ? 'false' : 'true') : nothing}
       aria-busy=${this.loading ? 'true' : nothing}
       aria-label=${this.label || this.fallbackLabel}
+      aria-rowcount=${windowed ? count + 1 : nothing}
       style=${template ? `--table-template: ${template}` : ''}
+      @scroll=${this.nearEnd}
     >
-      <div part="head" role="row">${this.renderGripHead()}${this.renderSelectAll()}${this.renderExpandHead()}<slot name="columns"></slot></div>
+      <div part="head" role="row" aria-rowindex=${windowed ? 1 : nothing}>${this.renderGripHead()}${this.renderSelectAll()}${this.renderExpandHead()}<slot name="columns"></slot></div>
+      ${room ? html `<div part="before" role="presentation" style="block-size: ${room.before}px"></div>` : nothing}
       <slot
         @slotchange=${(event) => {
             this.countRows(event);
             this.handleSlotChange();
         }}
       ></slot>
+      ${room ? html `<div part="after" role="presentation" style="block-size: ${room.after}px"></div>` : nothing}
       ${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>`}
@@ -948,6 +1060,9 @@ __decorate([
     words,
     property({ attribute: 'unsorted-label' })
 ], HelixHeadlessTable.prototype, "unsortedLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTable.prototype, "windowed", void 0);
 __decorate([
     state()
 ], HelixHeadlessTable.prototype, "sortState", void 0);