@fusion.dev/helix-headless 0.145.0 → 0.147.0

package/dist/video/root/video-root.js

@@ -431,7 +431,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             this.silent = video.muted;
             this.loudness = video.volume;
             void this.remote.attach(video);
-            relayMedia(video, this);
+            relayMedia(video, (event) => this.relayNativeEvent(event));
         }
     }
     updated(changed) {
@@ -560,7 +560,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       <${this.tag('menu-item')}
         part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
         value="off"
         checkable
         exclusive
@@ -572,7 +573,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       </${this.tag('menu-item')}>
       ${tracks.map((track, at) => html `<${this.tag('menu-item')} part="entry"
         exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
           value=${track.language || String(at)}
           checkable
           exclusive
@@ -600,7 +602,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         if (one === 'remote') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
         value="remote"
         @helix-select=${() => void this.remote.prompt()}
       >
@@ -611,7 +614,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         if (one === 'speed') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start" value="speed" @helix-select=${() => this.cycleSpeed()}>
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start" value="speed" @helix-select=${() => this.cycleSpeed()}>
         <slot name="speed-icon" slot="start">${drawIcon(gauge)}</slot>
         ${this.speedLabel}: ${this.rate}x
       </${this.tag('menu-item')}>`;
@@ -620,7 +624,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             const back = one === 'rewind';
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
         value=${one}
         @helix-select=${() => this.skipBy(back ? -SKIP_SECONDS : SKIP_SECONDS)}
       >
@@ -633,7 +638,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         if (one === 'previous') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start" value="previous" @helix-select=${() => this.skip(true)}>
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start" value="previous" @helix-select=${() => this.skip(true)}>
         <slot name="previous-icon" slot="start">${drawIcon(skipBack)}</slot>
         ${this.previousLabel}
       </${this.tag('menu-item')}>`;
@@ -641,7 +647,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         if (one === 'next') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start" value="next" @helix-select=${() => this.skip(false)}>
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start" value="next" @helix-select=${() => this.skip(false)}>
         <slot name="next-icon" slot="start">${drawIcon(skipForward)}</slot>
         ${this.nextLabel}
       </${this.tag('menu-item')}>`;
@@ -650,7 +657,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             const local = ownFile(this.src);
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
         ?download=${local}
         href=${this.src}
         rel=${local ? nothing : 'noreferrer'}
@@ -663,7 +671,8 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         return html `<${this.tag('menu-item')} part="entry"
     exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start" value="pip" @helix-select=${() => void this.togglePip()}>
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start" value="pip" @helix-select=${() => void this.togglePip()}>
       <slot name="pip-icon" slot="start">${drawIcon(pictureInPicture)}</slot>
       ${this.pipLabel}
     </${this.tag('menu-item')}>`;

package/dist/video-playlist/menu/video-playlist-menu.d.ts

@@ -27,6 +27,8 @@ import '../../menu/index.js';
  * @csspart entry-mark - The mark at the end of an entry: a check mark when it is checked, or a caret when it opens a submenu.
  * @csspart entry-shortcut - The key drawn for an entry's shortcut. The playlist's entries set none.
  * @csspart entry-shortcut-kbd - The key inside `entry-shortcut`.
+ * @csspart entry-shortcut-key - One key of an entry's shortcut chord, inside `entry-shortcut`. The playlist's entries set none.
+ * @csspart entry-shortcut-separator - The `+` between two keys of an entry's shortcut, where the platform writes one.
  * @csspart entry-start - The column at the start of an entry. It is a slot and is always present.
  * @csspart menu - The menu that holds the entries.
  * @csspart menu-back - The button that goes back from a submenu.

package/dist/video-playlist/menu/video-playlist-menu.js

@@ -86,7 +86,8 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
       ${this.entries.map((entry) => html `<${this.tag('menu-item')}
           part="entry"
       exportparts="end: entry-end, item: entry-item, mark: entry-mark, shortcut: entry-shortcut,
-        shortcut-kbd: entry-shortcut-kbd, start: entry-start"
+        shortcut-kbd: entry-shortcut-kbd, shortcut-key: entry-shortcut-key,
+        shortcut-separator: entry-shortcut-separator, start: entry-start"
           value=${entry.value}
           checkable
           ?checked=${entry.current}

package/dist/video-playlist/root/video-playlist-root.d.ts

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
 import { type Repeat } from '../order.js';
 declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
 /**
@@ -29,6 +30,12 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * sends `helix-end`. `shuffle` plays the entries in a random order, starting
  * from the one that is current, and `previous` retraces that order.
  *
+ * **Keyboard.** Each entry is a button in the tab order, and Enter or Space
+ * plays it. The current entry carries `aria-current`. While focus is on the
+ * player, the player's own keys work, and `Video` lists them. Its previous
+ * and next controls move through the entries in the same order the playlist
+ * does.
+ *
  * @since 0.1.0
  * @status stable
  * @category media
@@ -38,7 +45,7 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * @slot - The entries.
  * @slot player - The player that plays the entries.
  *
- * @event {HelixActivateEvent} helix-activate - The current entry changed. The playlist already holds the new entry when this is sent.
+ * @event {HelixActivateEvent} helix-activate - The current entry changed. The playlist already holds the new entry when this is sent, and `detail.previous` is the entry it left. `currentEntry` is the entry itself, with its `src`, `poster` and name.
  * @event {HelixBeforeActivateEvent} helix-before-activate - The current entry is about to change. Cancelable: cancel it to keep the current entry.
  * @event {HelixEndEvent} helix-end - The last entry finished playing, and the playlist stopped there. Not sent while `repeat` is set.
  *
@@ -131,6 +138,15 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
      * under `repeat="one"` asks for, and a list of one under `repeat="all"`.
      */
     private replay;
+    /**
+     * The entry that is current, with the `src`, `poster`, `value` and name the
+     * player was given, or `undefined` in an empty playlist.
+     *
+     * Read it in a `helix-activate` listener for the clip the playlist moved to,
+     * which Web Awesome's change event carries: the event says which entry by
+     * value, and this is the entry.
+     */
+    get currentEntry(): HelixHeadlessVideoPlaylistItem | undefined;
     /**
      * Moves to the next entry and plays it, as the player's next control does.
      * Follows `shuffle`, goes round under `repeat="all"`, and stays on the last

package/dist/video-playlist/root/video-playlist-root.js

@@ -81,6 +81,9 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         player.currentTime = 0;
         void Promise.resolve(player.play()).catch(() => { });
     }
+    get currentEntry() {
+        return this.resolveActive(this.items);
+    }
     next() {
         this.step(1);
     }

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

@@ -11,14 +11,6 @@
  *
  * A field is a key, or a path of keys joined by dots (`author.name`).
  */
-/**
- * The value at `path` in `item`, or `undefined` where the path leads nowhere.
- *
- * A dot separates keys, so `author.name` reads `item.author.name`. A key that
- * holds a dot itself is read whole first, which keeps a flat record with a key
- * such as `"v1.2"` working.
- */
-export declare const valueAt: (item: unknown, path: string) => unknown;
 /**
  * The text a value takes in a row.
  *
@@ -28,3 +20,14 @@ export declare const valueAt: (item: unknown, path: string) => unknown;
 export declare const textOf: (value: unknown) => string;
 /** Fills one element's holes, its own and those below it, from an item. */
 export declare const fillHoles: (root: Element, item: unknown) => void;
+/**
+ * The key of item `at` in a selecting list's `value`: its `keyField` where it
+ * is an object and one is named, a string or a number item itself, and its
+ * place in the set otherwise.
+ */
+export declare const keyOf: (item: unknown, at: number, keyField: string) => string;
+/**
+ * The text typing matches for each item: its `field`, or a string or number
+ * item itself, and nothing where an object has no `field` to read.
+ */
+export declare const textsOf: (data: readonly unknown[], field: string) => string[];

package/dist/virtual-list/fill.js

@@ -1,20 +1,4 @@
-export const valueAt = (item, path) => {
-    if (item === null || typeof item !== 'object') {
-        return undefined;
-    }
-    const record = item;
-    if (path in record) {
-        return record[path];
-    }
-    let value = record;
-    for (const key of path.split('.')) {
-        if (value === null || typeof value !== 'object') {
-            return undefined;
-        }
-        value = value[key];
-    }
-    return value;
-};
+import { valueAt } from '@fusion.dev/helix-core';
 export const textOf = (value) => value === undefined || value === null || typeof value === 'object' ? '' : String(value);
 const ATTRIBUTE = 'data-field-';
 const writeAttribute = (element, name, value) => {
@@ -37,3 +21,12 @@ export const fillHoles = (root, item) => {
         }
     }
 };
+export const keyOf = (item, at, keyField) => {
+    if (keyField !== '' && item !== null && typeof item === 'object') {
+        return textOf(valueAt(item, keyField));
+    }
+    return typeof item === 'string' || typeof item === 'number' ? String(item) : String(at);
+};
+export const textsOf = (data, field) => data.map((item) => field === '' || item === null || typeof item !== 'object'
+    ? textOf(item)
+    : textOf(valueAt(item, field)));

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

@@ -1,15 +1,24 @@
 /**
- * Which item a key moves to in a vertical list of `count` items, from `at`.
+ * Which item a key moves to in a list of `count` items laid out `across`
+ * items to a line, from `at`.
  *
  * Index arithmetic, because most of the items are not drawn: the list moves to
  * an index, scrolls it into view, and focuses the row once it is there. The
- * keys are the ones a listbox answers:
+ * keys are the ones a listbox answers, and in a grid the ones a grid of
+ * options answers:
  *
- * - Up and Down move one item.
- * - Home and End move to the first and the last.
- * - Page Up and Page Down move by `page`, the number of items on screen less
- *   one, so the item at one edge of the box lands at the other.
+ * - Up and Down move one line, to the item in the same column. Down from the
+ *   line above a shorter last line goes to the last item.
+ * - Left and Right move one item, in a grid only, with `forward` naming the
+ *   one that moves ahead along the line: Right, or Left on a right-to-left
+ *   page. In a list they move nothing, and are left to the row.
+ * - Home and End move to the first and the last item.
+ * - Page Up and Page Down move by `page` lines, the number of lines on screen
+ *   less one, so the line at one edge of the box lands at the other.
  *
  * `undefined` for a key the list does not take, and for an empty list.
  */
-export declare const stepIndex: (key: string, at: number, count: number, page: number) => number | undefined;
+export declare const stepIndex: (key: string, at: number, count: number, page: number, { across, forward }?: {
+    across?: number;
+    forward?: string;
+}) => number | undefined;

package/dist/virtual-list/keys.js

@@ -1,23 +1,34 @@
-export const stepIndex = (key, at, count, page) => {
+export const stepIndex = (key, at, count, page, { across = 1, forward = 'ArrowRight' } = {}) => {
     if (count <= 0) {
         return undefined;
     }
+    const width = Math.max(1, Math.trunc(across));
     const last = count - 1;
     const from = Math.max(0, Math.min(at, last));
-    const jump = Math.max(1, page);
+    const line = Math.floor(from / width);
+    const along = (lines) => {
+        const to = Math.max(0, Math.min(line + lines, Math.floor(last / width)));
+        return Math.min(last, to * width + (from % width));
+    };
     switch (key) {
         case 'ArrowDown':
-            return Math.min(last, from + 1);
+            return along(1);
         case 'ArrowUp':
-            return Math.max(0, from - 1);
+            return along(-1);
+        case 'ArrowLeft':
+        case 'ArrowRight':
+            if (width === 1) {
+                return undefined;
+            }
+            return Math.max(0, Math.min(last, from + (key === forward ? 1 : -1)));
         case 'End':
             return last;
         case 'Home':
             return 0;
         case 'PageDown':
-            return Math.min(last, from + jump);
+            return along(Math.max(1, page));
         case 'PageUp':
-            return Math.max(0, from - jump);
+            return along(-Math.max(1, page));
         default:
             return undefined;
     }

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

@@ -0,0 +1,65 @@
+/**
+ * What one pass of a virtual list draws, worked out before any element moves.
+ *
+ * The list keeps the element of a row that stays in the window, so a pass
+ * compares what is drawn with what is wanted and changes only the difference.
+ * These are that comparison and the tab-stop rule that follows it, as
+ * arithmetic over item indices.
+ */
+/** What a pass does to the rows in the tree. */
+export interface DrawPlan {
+    /** The items the pass draws, in order: the window, and a kept item outside it. */
+    wanted: number[];
+    /** The items whose rows leave the tree. */
+    remove: Set<number>;
+}
+/** The window, the set's length, the item kept outside the window, and the rows drawn. */
+export interface DrawInput {
+    /** The first item of the window. */
+    first: number;
+    /** One past the last item of the window. */
+    last: number;
+    /** How many items the set holds. */
+    count: number;
+    /** The item drawn outside the window to keep or take focus, where there is one. */
+    kept?: number | undefined;
+    /** The item each drawn row element holds, `NaN` for an element that holds none. */
+    drawn: readonly number[];
+    /** Whether every drawn row is drawn again from nothing, as for a new way of drawing. */
+    redraw?: boolean;
+    /**
+     * How many items a line holds, in a grid. The kept item brings its whole
+     * line, so the columns of the lines around it stay where they are.
+     */
+    across?: number;
+}
+/**
+ * Which items a pass draws, and which drawn rows leave.
+ *
+ * A drawn row leaves when its item is not wanted, when it holds no item, or
+ * when everything is drawn again. A wanted item with no row left is drawn new.
+ */
+export declare const drawPlan: ({ across, count, drawn, first, kept, last, redraw, }: DrawInput) => DrawPlan;
+/**
+ * Which item holds the list's tab stop after a pass.
+ *
+ * The item that held it, while its row is drawn. Otherwise the first item on
+ * screen, held inside the window and the set.
+ */
+export declare const stopAfter: (active: number, wanted: readonly number[], { count, first, last, onScreen, }: {
+    count: number;
+    first: number;
+    last: number;
+    onScreen: number;
+}) => number;
+/**
+ * The items a span of lines holds, `across` items to a line: what a window of
+ * lines draws, or which items a reader sees.
+ */
+export declare const itemsOf: (lines: {
+    first: number;
+    last: number;
+}, across: number, count: number) => {
+    first: number;
+    last: number;
+};

package/dist/virtual-list/plan.js

@@ -0,0 +1,27 @@
+export const drawPlan = ({ across = 1, count, drawn, first, kept, last, redraw = false, }) => {
+    const wanted = [];
+    for (let at = first; at < Math.min(last, count); at += 1) {
+        wanted.push(at);
+    }
+    if (kept !== undefined && !wanted.includes(kept)) {
+        const width = Math.max(1, across);
+        const start = kept - (kept % width);
+        for (let at = start; at < Math.min(start + width, count); at += 1) {
+            wanted.push(at);
+        }
+        wanted.sort((a, b) => a - b);
+    }
+    const keep = new Set(wanted);
+    const remove = new Set(drawn.filter((index) => redraw || !Number.isInteger(index) || !keep.has(index)));
+    return { remove, wanted };
+};
+export const stopAfter = (active, wanted, { count, first, last, onScreen, }) => wanted.includes(active)
+    ? active
+    : Math.max(Math.min(onScreen, Math.min(last, count) - 1), first, 0);
+export const itemsOf = (lines, across, count) => {
+    const width = Math.max(1, across);
+    return {
+        first: Math.min(lines.first * width, count),
+        last: Math.min(lines.last * width, count),
+    };
+};

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

@@ -46,21 +46,55 @@ export interface VirtualListRange {
  *
  * Rows are your markup in the light DOM, so your stylesheet styles them.
  *
- * **Keyboard.** The list is one tab stop. Up and Down move between items, Home
- * and End go to the first and the last, and Page Up and Page Down move by a
- * screen. An item that is not drawn is scrolled into view and focused, so a
- * keyboard reaches the whole set. Tab moves on into the focused row's own links
- * and buttons. When the row holding the tab stop scrolls away, the stop moves
- * to the first row on screen.
+ * **A grid.** `columns` lays the items out that many to a line, as a grid of
+ * equal columns, and windows the set a line at a time, as React Aria's grid
+ * layout does. Each item draws one element, a cell of the grid, and
+ * `estimate` is the height of a line. Space the items with padding inside
+ * each one, which the list measures with the line.
+ *
+ * **Keyboard.** The list is one tab stop.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. |
+ * | Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. |
+ * | Home, End | Moves to the first or the last item. |
+ * | Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. |
+ * | A letter or a word | Moves to the next item whose text starts with what you typed. |
+ * | Tab | Moves into the focused row's own links and buttons, then out of the list. |
+ *
+ * An item that is not drawn is scrolled into view and focused, so a keyboard
+ * reaches the whole set. When the row holding the tab stop scrolls away, the
+ * stop moves to the first row on screen. Typing matches each item's
+ * `text-field`, which is the first `data-field` of the row template by default,
+ * or the item itself when it is a string or a number.
  *
  * Each row says its place in the whole set with `aria-posinset` and
  * `aria-setsize`, so a screen reader says "4,000 of 10,000". The row holding
  * focus stays drawn when it scrolls out.
  *
+ * **Selecting.** `selection-mode` makes the list a list box a reader chooses
+ * from: `single` selects one item and `multiple` any number. Space or a press
+ * selects an item, Shift with Space, an arrow, Home, End or a press takes in
+ * the items from the last one chosen, and Control or Command with A selects
+ * them all, in `multiple`. `value` holds the chosen items' keys, separated by
+ * commas, in the order of the set: `key-field` names each item's key, and a
+ * string or a number item is its own key. A change asks with
+ * `helix-before-change` and tells with `change`. Each row is an `option`
+ * marked `aria-selected`, so a row's own links and buttons are not reached
+ * there: keep those to a list without `selection-mode`.
+ *
  * **Loading more.** `helix-range-change` fires as the items on screen change,
  * and `range` holds them. `helix-load-more` fires once a reader is within one
  * screen of the end, once for each length of the set: add to `items` and it can
- * fire again. `scrollToIndex` takes a reader to an item.
+ * fire again. While you fetch, set `loading`: the list is busy, and a row after
+ * the last item says "Loading more" (`loading-label`, or your own content in
+ * the `loading` slot). `scrollToIndex` takes a reader to an item.
+ *
+ * **Row height.** Rows are placed by `estimate` until they are drawn. Then the
+ * list reads the drawn rows' height once and places every row by it, so a
+ * wrong estimate still reaches the last item. Set `measured` for rows of
+ * different heights.
  *
  * The list follows its source. A new `items` array, an edit to the script's
  * text, or a script replaced under the same id draws the new rows. A row that
@@ -76,15 +110,25 @@ export interface VirtualListRange {
  * @documentation https://fusion.dev/helix/components/virtual-list
  *
  * @slot - The `<template>` that defines one row. The list writes the rows it renders beside it, and this slot shows them between the two spacers.
+ * @slot loading - Content for the row after the last item while `loading` is set. Falls back to `loading-label`.
  *
+ * @event {Event} change - Fired once a press or a key has changed which items are selected, in a list with `selection-mode`.
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press or a key changes which items are selected, with the `value` it would leave. Cancelable.
  * @event {HelixLoadMoreEvent} helix-load-more - Fired when a reader comes within one screen of the last item, once for each length of the set.
  * @event {HelixRangeChangeEvent} helix-range-change - Fired when the items on screen change, with the new `first` and `last`, which `range` also holds.
  *
  * @csspart after - The space that stands in for the rows below the rendered ones.
  * @csspart before - The space that stands in for the rows above the rendered ones.
+ * @csspart loading - The row after the last item while `loading` is set.
  * @csspart viewport - The scrolling box. On this tier, it needs only a block size.
  */
 export declare class HelixHeadlessVirtualList extends HelixElement {
+    /**
+     * How many items a line holds. One, the default, is a list; more lays the
+     * items out as a grid of that many equal columns, windowed a line at a
+     * time, with Left and Right moving along a line.
+     */
+    columns: number;
     /**
      * The height of one row, in pixels, used to find the row at a scroll offset.
      *
@@ -105,6 +149,12 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * Left unset, the list reads the script that `for` names.
      */
     items: readonly unknown[] | undefined;
+    /**
+     * The field of each item that is its key in `value`, as a key or a path of
+     * keys. Empty reads a string or a number item as its own key, and any
+     * other item by its place in the set.
+     */
+    keyField: string;
     /**
      * The list's name, read by screen readers, because only some of its rows
      * are rendered at a time.
@@ -114,11 +164,22 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      */
     label: string;
     /**
-     * Places rows by their measured height. Without it, every row is placed by
-     * `estimate`.
+     * Marks the list as busy fetching more items, and draws a row after the last
+     * item that says so.
+     *
+     * Set it when `helix-load-more` starts a fetch, and clear it when the items
+     * arrive. The list does not ask for more while it is set.
+     */
+    loading: boolean;
+    /** The text of the row drawn while `loading` is set, where the `loading` slot is empty. */
+    loadingLabel: string;
+    /**
+     * Places each row by its own measured height. Without it, rows are placed
+     * by one height: `estimate` until rows are drawn, then the drawn rows' height,
+     * read once.
      *
      * **Off by default, because the straight line is better when it holds.** One
-     * estimate makes offset and index convert by division, which can never
+     * height 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.
@@ -133,6 +194,24 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * and place in the set. Where it is unset, the row `<template>` is used.
      */
     renderItem: VirtualListRenderer | undefined;
+    /**
+     * Makes the list a list box a reader chooses from: `single` selects one
+     * item, and `multiple` any number. Unset is a list a reader reads.
+     */
+    selectionMode?: 'multiple' | 'single';
+    /**
+     * The field of each item that typing matches, as a key or a path of keys
+     * (`author.name`).
+     *
+     * Empty by default, which matches the first `data-field` of the row
+     * template, or the item itself where it is a string or a number.
+     */
+    textField: string;
+    /**
+     * The keys of the chosen items, separated by commas, in a list with
+     * `selection-mode`. Set it to start with items chosen.
+     */
+    value: string;
     /**
      * The parsed script.
      *
@@ -158,8 +237,10 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private released;
     /** The range last reported, so `helix-range-change` fires only on a change. */
     private said;
-    /** The length of the set when `helix-load-more` last fired. */
-    private askedAt;
+    /** The letters typed at the list, which move to the item they start. */
+    private readonly typeahead;
+    /** The key of the item a Shift range runs from: the last one chosen. */
+    private anchor;
     /**
      * Watches the source and the tree around it.
      *
@@ -179,6 +260,10 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * box to measure.
      */
     get range(): VirtualListRange;
+    /** How many items a line holds: `columns`, at least one. */
+    private get across();
+    /** The items a span of lines holds. */
+    private itemsOn;
     /**
      * Scrolls the list to show the item at `index`.
      *
@@ -199,6 +284,11 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * window moved.
      */
     private drawn;
+    /**
+     * The drawn lines, for the controller to measure: each row in a list, and
+     * the first item of each line in a grid, whose cell is as tall as its line.
+     */
+    private lines;
     /**
      * Reads the source named by `for`, before the render that draws it.
      *
@@ -235,6 +325,11 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * has not been laid out yet asks for nothing.
      */
     private report;
+    /**
+     * The text typing matches for each item: `text-field`, the template's first
+     * `data-field`, or a string or number item itself.
+     */
+    private texts;
     /** The item a row element drew, for an element that is one of the rows. */
     private indexOf;
     /** The row that holds the tab stop for item `index`, where it is drawn. */
@@ -246,6 +341,28 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * is that control's, so a field in a row keeps its arrows.
      */
     private readonly handleKeydown;
+    /** The key of item `at` in `value`. See `keyField`. */
+    private keyAt;
+    /** Every item's key, in the order of the set. */
+    private keys;
+    /** The keys chosen now. */
+    private get chosen();
+    /**
+     * Selects item `at`, or lets it go, asking first. With `extend`, in
+     * `multiple`, the items from the anchor to it are taken in, as Data Table
+     * and List take in a range. Otherwise the item is where the next range runs
+     * from.
+     */
+    private press;
+    /** Keys in the order of the set, a key it no longer holds kept after them. */
+    private inOrder;
+    /** Asks for a new `value`, and says so once it has moved. */
+    private choose;
+    /**
+     * A press on a row selects it, in a list with `selection-mode`, except on a
+     * control of its own. Shift takes in a range.
+     */
+    private readonly handleClick;
     /**
      * Focuses the row for item `index`, scrolling it into view and drawing it
      * first when it is not drawn.
@@ -266,7 +383,13 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
     private focusing;
     /** The item drawn outside the window to keep focus, or to take it, if there is one. */
     private keptIndex;
-    /** Writes a row's role and its place in the set. */
+    /**
+     * Writes a row's role, and whether it is chosen in a list that selects:
+     * `option` with `aria-selected` there, and `listitem` otherwise. Every pass,
+     * since a choice changes no row's content.
+     */
+    private mark;
+    /** Writes a row's place in the set. */
     private stamp;
     /** Fills a drawn row from its item, by `renderItem` or by the template's holes. */
     private fill;