@fusion.dev/helix-headless 0.5.0 → 0.7.0

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

@@ -46,6 +46,8 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @event {HelixNavigateEvent} helix-navigate - Fired when a reader asks for another page, and cancelable.
  * @event {HelixSortEvent} helix-sort - Fired when a reader asks for a different order, and cancelable.
  *
+ * @csspart after - The room the rows below the window would have taken. Windowed only.
+ * @csspart before - The room the rows above the window would have taken. Windowed only.
  * @csspart cell - One cell.
  * @csspart empty - Shown when no rows match.
  * @csspart footer - The region below the grid.
@@ -86,16 +88,15 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     defaultSort: string;
     /**
-     * The field naming a row's stable identity.
+     * How tall a row is taken to be before it has been drawn, in pixels.
      *
-     * **Needed before selection exists, not after.** Lit keys the rendered rows by
-     * it, so a sort moves a row's element rather than rewriting every cell in
-     * place, which is what keeps focus inside a cell and keeps a CSS transition
-     * attached to the row it belongs to. Left unset the index is the key, which is
-     * correct only while nothing reorders: it is why this defaults to something
-     * that works and is worth setting anyway.
+     * Only read while `windowed`, and a starting guess rather than a claim: a
+     * cell that wraps makes its row taller than its neighbors, and the window
+     * replaces this with what each row came to as it draws. It still has to be
+     * close, because it is what the scrollbar is built from before anything has
+     * been measured.
      */
-    key: string;
+    estimate: number;
     /**
      * The order, as `field:direction`.
      *
@@ -106,9 +107,16 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     get sort(): string;
     set sort(next: string);
     /**
-     * Accessible name for the grid.
+     * The field naming a row's stable identity.
+     *
+     * **Needed before selection exists, not after.** Lit keys the rendered rows by
+     * it, so a sort moves a row's element rather than rewriting every cell in
+     * place, which is what keeps focus inside a cell and keeps a CSS transition
+     * attached to the row it belongs to. Left unset the index is the key, which is
+     * correct only while nothing reorders: it is why this defaults to something
+     * that works and is worth setting anyway.
      */
-    label: string;
+    key: string;
     /**
      * What the rows are narrowed to, as one query across every column.
      *
@@ -119,16 +127,9 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     get filter(): string;
     set filter(next: string);
     /**
-     * Whether this element does the work or asks the consumer to.
-     *
-     * `client` filters, sorts and pages `rows` itself. `server` applies none of
-     * them: `rows` is the page, `total` is the size of the whole result, and the
-     * three events are requests the consumer answers by fetching. Past some size
-     * the client cannot hold the data, so this is not an optimization, it is the
-     * only mode that works, and it is here from the start because adding it later
-     * inverts the data flow.
+     * Accessible name for the grid.
      */
-    mode: 'client' | 'server';
+    label: string;
     /**
      * The page on show, from 1.
      *
@@ -138,6 +139,17 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      */
     get page(): number;
     set page(next: number);
+    /**
+     * Whether this element does the work or asks the consumer to.
+     *
+     * `client` filters, sorts and pages `rows` itself. `server` applies none of
+     * them: `rows` is the page, `total` is the size of the whole result, and the
+     * three events are requests the consumer answers by fetching. Past some size
+     * the client cannot hold the data, so this is not an optimization, it is the
+     * only mode that works, and it is here from the start because adding it later
+     * inverts the data flow.
+     */
+    mode: 'client' | 'server';
     /**
      * The whole result, in the order it arrived.
      *
@@ -170,6 +182,26 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * one that cannot be stale.
      */
     total: number;
+    /**
+     * Draws the rows in view and stands empty space in for the rest.
+     *
+     * **Not a `mode`.** `mode` says where the rows come from and who filtered
+     * them; this says how many of the ones we hold get drawn. They are
+     * independent: a consumer fetching five thousand rows a chunk at a time wants
+     * `mode="server"` and this at once, and folding this into `mode` would be an
+     * API that forbids that combination for no reason.
+     *
+     * **Composes with `paginated` rather than excluding it.** A window over a
+     * page is coherent -- the page is the slice of the result, the window is the
+     * part of that slice on screen -- and the arithmetic is the same either way,
+     * so there is nothing to forbid. Together they suit a table paging at a
+     * thousand rows, where the page is a reasonable fetch and a poor render.
+     *
+     * Off by default. Windowing costs a scroll listener, a measurement per row
+     * drawn, and a `block-size` on the scrolling box, and a table of twenty rows
+     * should pay none of them.
+     */
+    windowed: boolean;
     /**
      * Whether to draw a pagination under the grid.
      *
@@ -185,6 +217,46 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
     private pageState;
     private pageSizeState;
     private paginatedState;
+    private readonly virtualize;
+    /**
+     * The rows in the shadow tree, each with the row of the page it drew.
+     *
+     * **Read off `data-index` rather than counted.** `hostUpdated` runs before
+     * `updated`, so what is in the tree when the controller asks is the previous
+     * window; counting from the current one would record the right heights
+     * against the wrong rows every time the window moved.
+     */
+    private drawn;
+    /**
+     * How many rows there are to window over: the page, or the result.
+     *
+     * **Read off the held arrangement rather than counted afresh**, because the
+     * controller asks this on every scroll and `matched` walks the whole result
+     * whenever a filter is on. Held, a scroll through a filtered table of five
+     * thousand rows costs a lookup; counted, it costs five thousand comparisons a
+     * frame, which is the cost windowing was added to avoid.
+     *
+     * `matched` still answers where nothing is windowing, which is the path that
+     * holds nothing and should not start.
+     */
+    private get available();
+    /**
+     * The arranged result, kept between renders.
+     *
+     * **A window moves and the order does not.** Every scroll that reveals a row
+     * re-renders, and deriving that render from `rows` would filter and sort the
+     * whole result again each time: 23.7ms at five thousand rows, three frames
+     * spent before a cell is drawn. Held against the inputs that change it, a
+     * scroll costs a slice.
+     *
+     * Only the windowed path uses this. A paged table re-renders when the reader
+     * asks for a page, which is rare enough that holding a second copy of the
+     * result to save a sort is the wrong trade.
+     */
+    private held;
+    private arrange;
+    /** The part of a page the reader can see, which is every row when not windowed. */
+    private windowOf;
     /** The columns declared as children, in the order they are written. */
     get tableColumns(): HelixHeadlessTableColumn[];
     /** The columns reduced to what the ordering needs. */
@@ -212,15 +284,26 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * which means the out-of-the-box arrangement is the unbounded one and nothing
      * about it says that a result of any size will simply be drawn.
      *
-     * **Windowing was refused**, which is worth recording because it is the
-     * obvious answer. This element already has two mechanisms: `paginated` with a
-     * `page-size`, and `mode="server"` where `rows` is one page, `total` is the
-     * whole result and `aria-rowcount` already reports the result rather than the
-     * window, which is the hard half of virtualization done correctly. A third
-     * would fight the first two, and virtualizing a grid means variable row
-     * heights, a sticky header and keeping `aria-rowindex` honest against a result
-     * the element is no longer holding. `VirtualizeController` exists for the case
-     * where the rows are a flat list and this is not that.
+     * **Windowing was refused here, and is now `windowed`.** The refusal is kept
+     * because most of it was right, and because what changed is not that somebody
+     * disagreed with it. It rested on four claims: that a third mechanism would
+     * fight `paginated` and `mode="server"`; that a grid has rows of different
+     * heights; that it needs a sticky header; and that `aria-rowindex` has to keep
+     * describing a result the element no longer holds in full.
+     *
+     * Three stopped being true. `VirtualizeController` learnt to measure each row
+     * and place the next by what the one above came to, which is the variable
+     * heights. `aria-rowindex` was already result-relative because paging needed
+     * it, so a window is a second offset on arithmetic that existed. And the
+     * sticky header is one `position: sticky` on the heading cells rather than on
+     * `[part="head"]`, which is `display: contents` and generates no box to stick
+     * -- that is why it looked hard and is not.
+     *
+     * The first was avoided rather than answered. `windowed` is not a `mode` and
+     * does not exclude `paginated`: it says how much of what we hold gets drawn,
+     * where `mode` says where it came from, so there is no third axis to fight the
+     * other two. What survives is the cost, which is why windowing is off by
+     * default and why this warning still fires for a table that has none of them.
      *
      * Warned once per element, in a browser only: a warning during a server render
      * is one nobody can act on and one that would print per request.
@@ -327,8 +410,35 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * reason a virtualized or paged grid needs `aria-rowindex` at all: a screen
      * reader on page three should hear row 41, and a grid whose indices restart at
      * every page tells a reader the result is twenty rows long however many it has.
+     *
+     * A window is the second offset and stacks on the page: with both on, row one
+     * of the window is the page's start plus how far down the page it begins.
      */
     private rowIndex;
+    /**
+     * What decides which row is at which index, as one comparable value.
+     *
+     * Not the rows themselves: those are compared by identity beside this, and a
+     * consumer handing back an equal array is handing back the same rows in the
+     * same order whatever object it is.
+     */
+    private get placement();
+    /** The signature the recorded heights were measured against. */
+    private measuredAgainst;
+    /** Where the window begins in the page, which is the top when there is none. */
+    private get windowStart();
+    /**
+     * The room the rows outside the window would have taken.
+     *
+     * **`role="presentation"`, because this is geometry standing inside a
+     * `rowgroup`.** A bare `div` there is a child the role does not allow, and a
+     * screen reader walking the rows would meet something that is not one. The
+     * room itself is what keeps the scrollbar honest: a box that scrolls twenty
+     * rows while claiming ten thousand gives a thumb the size of its track.
+     */
+    private renderSpacer;
+    /** The controller owns the geometry; this is only what tells it to look again. */
+    private readonly handleScroll;
     protected render(): TemplateResult;
     /**
      * Listens on the host, not on the slot the columns are assigned to.

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

@@ -5,13 +5,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessDataTable_1;
-import { customElement, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixSortEvent, hostAria, MixinCollection, requestChange, slotFilled, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixFilterEvent, HelixNavigateEvent, HelixSortEvent, hostAria, MixinCollection, requestChange, slotFilled, VirtualizeController, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 import '../../pagination/index.js';
-import { cycle, format, ordered, parse } from './order.js';
+import { arranged, cycle, format, ordered, parse, window_, } from './order.js';
 let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
@@ -19,20 +19,35 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.defaultPage = 1;
         this.defaultPageSize = 0;
         this.defaultSort = '';
+        this.estimate = 32;
         this.key = '';
         this.label = '';
         this.mode = 'client';
         this.rows = [];
         this.total = 0;
+        this.windowed = false;
         this.sortState = undefined;
         this.filterState = undefined;
         this.pageState = undefined;
         this.pageSizeState = undefined;
         this.paginatedState = undefined;
+        this.virtualize = new VirtualizeController(this, {
+            container: () => this.windowed ? this.renderRoot.querySelector('[part="table"]') : null,
+            count: () => this.available,
+            estimate: () => this.estimate,
+            measured: () => this.windowed,
+            rows: () => (this.windowed ? this.drawn() : []),
+        });
         this.warnedAboutSize = false;
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
+        this.measuredAgainst = '';
+        this.handleScroll = () => {
+            if (this.windowed) {
+                this.virtualize.measure();
+            }
+        };
         this.handleHeadClick = (event) => {
             const column = this.columnFrom(event);
             if (column?.canSort) {
@@ -103,6 +118,37 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.paginatedState = next;
         this.requestUpdate('paginated', previous);
     }
+    drawn() {
+        return [...this.renderRoot.querySelectorAll('[part="row"][data-index]')].map((element) => ({ element, index: Number(element.dataset.index) }));
+    }
+    get available() {
+        if (this.mode === 'server') {
+            return this.rows.length;
+        }
+        const matched = this.windowed ? this.arrange().rows.length : this.matched;
+        const size = this.pageSize;
+        if (size <= 0) {
+            return matched;
+        }
+        return Math.max(0, Math.min(size, matched - (this.page - 1) * size));
+    }
+    arrange() {
+        const axes = this.axes;
+        const key = `${this.filter}\u0000${this.sort}\u0000${axes.map((axis) => axis.field).join('\u0001')}`;
+        if (this.held?.key === key && this.held.source === this.rows) {
+            return this.held.value;
+        }
+        const value = arranged(this.rows, axes, { query: this.filter, spec: this.sort });
+        this.held = { key, source: this.rows, value };
+        return value;
+    }
+    windowOf(rows) {
+        if (!this.windowed) {
+            return rows;
+        }
+        const { first, last } = this.virtualize.window;
+        return rows.slice(first, last);
+    }
     get tableColumns() {
         return [...(this.children ?? [])].filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
     }
@@ -131,16 +177,26 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     get view() {
         if (this.mode === 'server') {
             const total = Math.max(this.total, this.rows.length);
-            return { matched: total, rows: [...this.rows], total };
+            return {
+                available: this.rows.length,
+                matched: total,
+                rows: this.windowOf([...this.rows]),
+                total,
+            };
         }
-        const view = ordered(this.rows, this.axes, {
-            page: this.page,
-            query: this.filter,
-            size: this.pageSize,
-            spec: this.sort,
-        });
-        this.warnIfCrowded(view.rows.length);
-        return view;
+        if (!this.windowed) {
+            const view = ordered(this.rows, this.axes, {
+                page: this.page,
+                query: this.filter,
+                size: this.pageSize,
+                spec: this.sort,
+            });
+            this.warnIfCrowded(view.rows.length);
+            return { ...view, available: view.rows.length };
+        }
+        const { rows: inOrder, total } = this.arrange();
+        const page = window_(inOrder, this.page, this.pageSize);
+        return { available: page.length, matched: inOrder.length, rows: this.windowOf(page), total };
     }
     get pages() {
         const size = this.pageSize;
@@ -237,6 +293,11 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label || 'Table', role: 'grid' });
+        const placement = this.placement;
+        if (changed.has('rows') || placement !== this.measuredAgainst) {
+            this.measuredAgainst = placement;
+            this.virtualize.forget();
+        }
     }
     markEmpty() {
         this.markRegion('toolbar', ['toolbar']);
@@ -253,6 +314,9 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         this.markEmpty();
         this.assign();
         this.announceSort();
+        if (this.windowed) {
+            this.virtualize.measure();
+        }
     }
     announceSort() {
         const current = parse(this.sort);
@@ -276,21 +340,38 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
     renderRows(rows) {
         const columns = this.tableColumns;
         const field = this.key;
-        return html `${repeat(rows, (row, index) => (field ? String(row[field] ?? index) : index), (row, index) => html `<div
+        const start = this.windowStart;
+        return html `${repeat(rows, (row, index) => (field ? String(row[field] ?? start + index) : start + index), (row, index) => html `<div
         part="row"
         role="row"
         aria-rowindex=${this.rowIndex(index)}
+        data-index=${this.windowed ? start + index : nothing}
       >
         ${columns.map((column) => this.renderCell(column, row))}
       </div>`)}`;
     }
     rowIndex(within) {
         const size = this.pageSize;
-        const offset = size > 0 ? (this.page - 1) * size : 0;
-        return offset + within + 2;
+        const page = size > 0 ? (this.page - 1) * size : 0;
+        return page + this.windowStart + within + 2;
+    }
+    get placement() {
+        return [this.mode, this.filter, this.sort, this.page, this.pageSize].join('\u0000');
+    }
+    get windowStart() {
+        return this.windowed ? this.virtualize.window.first : 0;
+    }
+    renderSpacer(end) {
+        if (!this.windowed) {
+            return nothing;
+        }
+        const { after, before } = this.virtualize.window;
+        return end === 'before'
+            ? html `<div part="before" role="presentation" style="block-size: ${before}px"></div>`
+            : html `<div part="after" role="presentation" style="block-size: ${after}px"></div>`;
     }
     render() {
-        const { matched, rows } = this.view;
+        const { available, matched, rows } = this.view;
         const template = this.template;
         const columns = this.tableColumns;
         const pagination = this.tag('pagination');
@@ -299,14 +380,16 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         part="table"
         role="rowgroup"
         aria-busy=${this.loading ? 'true' : nothing}
-        aria-rowcount=${this.mode === 'server' ? Math.max(this.total, rows.length) + 1 : matched + 1}
+        aria-rowcount=${this.mode === 'server' ? Math.max(this.total, available) + 1 : matched + 1}
         aria-colcount=${columns.length || nothing}
         style=${template ? `--data-table-template: ${template}` : nothing}
+        @scroll=${this.handleScroll}
       >
         <div part="head" role="row">
           <slot name="columns" @slotchange=${this.handleSlotChange}></slot>
         </div>
-        ${this.renderRows(rows)} ${this.renderStatus(rows.length > 0)}
+        ${this.renderSpacer('before')}${this.renderRows(rows)}${this.renderSpacer('after')}
+        ${this.renderStatus(available > 0)}
       </div>
       <div part="footer">
         <slot name="footer"></slot>
@@ -354,23 +437,26 @@ __decorate([
     property({ attribute: 'default-sort' })
 ], HelixHeadlessDataTable.prototype, "defaultSort", void 0);
 __decorate([
-    property()
-], HelixHeadlessDataTable.prototype, "key", void 0);
+    property({ type: Number })
+], HelixHeadlessDataTable.prototype, "estimate", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "sort", null);
 __decorate([
     property()
-], HelixHeadlessDataTable.prototype, "label", void 0);
+], HelixHeadlessDataTable.prototype, "key", void 0);
 __decorate([
     property()
 ], HelixHeadlessDataTable.prototype, "filter", null);
 __decorate([
     property()
-], HelixHeadlessDataTable.prototype, "mode", void 0);
+], HelixHeadlessDataTable.prototype, "label", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "page", null);
+__decorate([
+    property()
+], HelixHeadlessDataTable.prototype, "mode", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessDataTable.prototype, "rows", void 0);
@@ -380,6 +466,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDataTable.prototype, "total", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessDataTable.prototype, "windowed", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessDataTable.prototype, "paginated", null);

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

@@ -92,6 +92,31 @@ export declare const sort: (rows: readonly DataRow[], spec: Sort | undefined, ax
  * same clamp `helix-pagination` already applies to what it reports.
  */
 export declare const window_: (rows: readonly DataRow[], page: number, size: number) => DataRow[];
+/** What arranging produces: the rows in order, with no page or window taken. */
+export interface Arranged {
+    /** Rows after filtering and sorting, in the order they are to be drawn. */
+    rows: DataRow[];
+    /** Rows before filtering, which is what tells a reader a filter is on. */
+    total: number;
+}
+/**
+ * Filtering and sorting, with nothing taken off the end.
+ *
+ * **Split out of `ordered` because a window moves and this does not.** A table
+ * drawing a window on a result re-renders every time a scroll reveals a row,
+ * and deriving that render from the whole result means filtering and sorting it
+ * again each time: 23.7ms at five thousand rows, a frame budget spent three
+ * times over before a cell is drawn. A caller that keeps this between renders
+ * pays it once per change to the data rather than once per frame.
+ *
+ * The two steps stay together for the reason `ordered` gives below: sorting a
+ * page is the classic bug, and one function doing both is what makes calling
+ * them in the wrong order impossible.
+ */
+export declare const arranged: (rows: readonly DataRow[], axes: readonly Axis[], { query, spec }: {
+    query: string;
+    spec: string;
+}) => Arranged;
 /** What one pass over the data produces: the window, and the counts around it. */
 export interface Ordered {
     /** Rows after filtering, before paging. The number a pagination must page. */

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

@@ -66,8 +66,11 @@ const compare = (left, right, sign) => {
     }
     return (sign * text(left).localeCompare(text(right), undefined, { numeric: true, sensitivity: 'base' }));
 };
+export const arranged = (rows, axes, { query, spec }) => ({
+    rows: sort(filter(rows, query, axes), parse(spec), axes),
+    total: rows.length,
+});
 export const ordered = (rows, axes, { page, query, size, spec }) => {
-    const matched = filter(rows, query, axes);
-    const arranged = sort(matched, parse(spec), axes);
-    return { matched: matched.length, rows: window_(arranged, page, size), total: rows.length };
+    const { rows: inOrder, total } = arranged(rows, axes, { query, spec });
+    return { matched: inOrder.length, rows: window_(inOrder, page, size), total };
 };

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -32,6 +32,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
 export declare class HelixHeadlessVirtualList extends HelixElement {
     /**
      * How tall one row is, in pixels, used to map scroll offset to an index.
+     *
+     * An estimate rather than a measurement while `measured` is off, which is
+     * right whenever the rows really are one height and is the cheaper of the two.
      */
     estimate: number;
     /**
@@ -42,6 +45,16 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * What the list is called, since the rendered rows are only a window on it.
      */
     label: string;
+    /**
+     * Places rows by what they came to rather than by `estimate`.
+     *
+     * **Off by default, because the straight line is better when it holds.** One
+     * estimate makes offset and index convert by division, which can never
+     * disagree with itself; measuring is what a set of genuinely different
+     * heights needs and costs a read of each row as it renders. A list of
+     * one-line rows should leave this alone.
+     */
+    measured: boolean;
     /**
      * The parsed source.
      *
@@ -49,6 +62,16 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      */
     private rows;
     private readonly virtualize;
+    /**
+     * The rows in the tree, each with the item it drew.
+     *
+     * **Read off `data-index` rather than counted**, because what is in the tree
+     * when the controller asks is what `place` appended on the *previous* pass:
+     * `hostUpdated` runs before `updated`, so counting from the current window
+     * would record the right heights against the wrong items every time the
+     * window moved.
+     */
+    private drawn;
     /**
      * Reads the source named by `for`, once the document exists to read.
      *

package/dist/virtual-list/root/virtual-list-root.js

@@ -13,13 +13,22 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         this.estimate = 32;
         this.for = '';
         this.label = '';
+        this.measured = false;
         this.rows = [];
         this.virtualize = new VirtualizeController(this, {
             container: () => this.renderRoot.querySelector('[part="viewport"]'),
             count: () => this.rows.length,
             estimate: () => this.estimate,
+            measured: () => this.measured,
+            rows: () => this.drawn(),
         });
     }
+    drawn() {
+        return [...this.querySelectorAll('[data-index]')].map((element) => ({
+            element,
+            index: Number(element.dataset.index),
+        }));
+    }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
         this.read();
@@ -73,6 +82,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
                 element.setAttribute('role', 'listitem');
                 element.setAttribute('aria-posinset', String(at + 1));
                 element.setAttribute('aria-setsize', String(total));
+                element.setAttribute('data-index', String(at));
             }
             fragment.append(clone);
         }
@@ -102,6 +112,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessVirtualList.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessVirtualList.prototype, "measured", void 0);
 __decorate([
     state()
 ], HelixHeadlessVirtualList.prototype, "rows", void 0);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -45,14 +45,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.5.0",
-    "@fusion.dev/helix-icons": "0.5.0",
+    "@fusion.dev/helix-core": "0.7.0",
+    "@fusion.dev/helix-icons": "0.7.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.5.0",
-    "@fusion.dev/helix-testing": "0.5.0",
+    "@fusion.dev/helix-cem": "0.7.0",
+    "@fusion.dev/helix-testing": "0.7.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",