@fusion.dev/helix-headless 0.150.0 → 0.151.0

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

@@ -24,6 +24,16 @@ export interface TableGridOptions {
     part: (name: string) => HTMLElement | null;
     /** The rows in the order they are drawn. */
     rows: () => Element[];
+    /**
+     * The words each row is found by when a reader types, in the order the rows
+     * are drawn.
+     */
+    rowWords: () => string[];
+    /**
+     * Selects every row from the row last chosen, or from row `from` where none
+     * was, to row `to`, and says whether the table selects at all.
+     */
+    selectRange: (to: number, from: number) => boolean;
     /** Selects every row for Control or Command with A, and says whether it did. */
     selectAll: () => boolean;
     /** Whether the table is a grid now. */
@@ -31,8 +41,8 @@ export interface TableGridOptions {
 }
 /**
  * The keyboard of a `grid` table: one tab stop among its cells, the arrow
- * keys, Home, End and the Page keys between them, and Enter or F2 into a
- * cell's controls.
+ * keys, Home, End and the Page keys between them, Enter or F2 into a cell's
+ * controls, typeahead over the rows, and Shift ranges of rows.
  *
  * **Tab leaves the grid.** The controls in a cell are the consumer's, so their
  * tab order is left as written: Tab on a cell, or past the last control of a
@@ -59,6 +69,8 @@ export declare class TableGridController implements ReactiveController {
     private pointing;
     /** The cells given a `tabindex`, so a table that stops being a grid takes it back. */
     private readonly given;
+    /** The letters a reader has typed at the rows. */
+    private readonly typeahead;
     constructor(host: ReactiveControllerHost & HTMLElement, options: TableGridOptions);
     hostConnected(): void;
     hostDisconnected(): void;

package/dist/table/grid-controller.js

@@ -1,4 +1,4 @@
-import { deepActiveElement, deepContains, focusableElements, gridMove, inlineStep, pageRows, scrollingAncestor, scrollRoom, selectsAll, whenHydrated, } from '@fusion.dev/helix-core';
+import { deepActiveElement, deepContains, focusableElements, gridMove, inlineStep, pageRows, scrollingAncestor, scrollRoom, selectsAll, Typeahead, typesCharacter, whenHydrated, } from '@fusion.dev/helix-core';
 const HEADS = { grip: 'grip-head', select: 'select-all' };
 const shown = (element) => {
     const hidden = element.getAttribute('hidden');
@@ -13,6 +13,7 @@ export class TableGridController {
         this.focusWanted = false;
         this.pointing = false;
         this.given = new Set();
+        this.typeahead = new Typeahead();
         this.handleKeydown = (event) => {
             if (!this.options.on() || event.defaultPrevented || event.altKey) {
                 return;
@@ -35,6 +36,25 @@ export class TableGridController {
                 }
                 return;
             }
+            if (typesCharacter(event) && (event.key !== ' ' || this.typeahead.typing())) {
+                const found = this.typeahead.match(event.key, this.options.rowWords(), place.row);
+                if (found >= 0) {
+                    event.preventDefault();
+                    if (found !== place.row) {
+                        this.moveTo({
+                            column: Math.max(0, Math.min(place.column, this.widthOf(found) - 1)),
+                            row: found,
+                        });
+                    }
+                }
+                return;
+            }
+            if (event.key === ' ' && event.shiftKey && place.row >= 0) {
+                if (this.options.selectRange(place.row, place.row)) {
+                    event.preventDefault();
+                }
+                return;
+            }
             if (event.key === 'Enter' || event.key === ' ' || event.key === 'F2') {
                 if (event.key !== 'F2' && this.options.activate(place, event)) {
                     event.preventDefault();
@@ -57,6 +77,12 @@ export class TableGridController {
             }
             event.preventDefault();
             to.column = Math.max(0, Math.min(to.column, this.widthOf(to.row) - 1));
+            if (event.shiftKey &&
+                (event.key === 'ArrowUp' || event.key === 'ArrowDown') &&
+                place.row >= 0 &&
+                to.row >= 0) {
+                this.options.selectRange(to.row, place.row);
+            }
             if (to.row !== place.row || to.column !== place.column) {
                 this.moveTo(to);
             }

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

@@ -76,7 +76,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * through cell by cell, the headings included, as React Aria's table is. The
  * table is then a `grid` and each value a `gridcell`, and the table gives
  * every cell a `tabindex` so focus can rest on it: set `grid` only where the
- * cells may carry one. For typeahead and range selection, use `DataTable`.
+ * cells may carry one.
  *
  * | Key | What it does |
  * |---|---|
@@ -90,7 +90,10 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * | Enter, Space on a sortable heading | Sorts by the column. |
  * | Space on a row, Enter or Space on its checkbox cell | Selects the row, in a `selectable` table. |
  * | Enter or Space on a grip cell | Picks the row up, or drops it, in a `reorderable` table. Up, Down, Home, and End move a row picked up, and Escape puts it back. |
+ * | Shift with Down or Up | Selects the rows it moves across, in a `selectable` table. |
+ * | Shift with Space | Selects every row from the one last chosen, in a `selectable` table. |
  * | Control or Command with A | Selects every row, in a `selectable` table. |
+ * | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
  * | Tab | Leaves the table. |
  *
  * The CSS custom properties listed for this component are written by it and
@@ -105,7 +108,9 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @documentation https://fusion.dev/helix/components/table
  *
  * @slot - The table's rows.
+ * @slot empty - Content shown when there are no rows and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
  * @slot heading - Words that name the table, shown above it, such as a heading.
+ * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  *
  * @event {HelixBeforeReorderEvent} helix-before-reorder - Fired when a row is dropped at a new place, in a `reorderable` table, with every row's key in the new order. Cancelable: cancel it to keep the row where it is.
  * @event {HelixReorderEvent} helix-reorder - Fired after `helix-before-reorder` when nobody canceled it. Move your rows to the order in `keys`. Cancelable: cancel it to say the move did not happen.
@@ -144,6 +149,8 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * `registerWords('de', { 'helix-table': { selectAllLabel: 'Alle Zeilen auswählen' } })`.
      */
     static words: string;
+    /** The empty and loading lines are the `empty` and `loading` slots. */
+    protected statusSlots: boolean;
     /**
      * The word for an ascending sort, in a `sorted-label` that writes `{order}`.
      *
@@ -383,9 +390,25 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     private readonly handleToggle;
     /** Every row's key, in the order the rows are written. */
     private get everyKey();
-    /** The checkbox in the heading: every row, or none where every row is chosen. */
+    /** The keys of the rows that can be chosen: every row that is not `disabled`. */
+    private get enabledKeys();
+    /** Whether the row of that key is `disabled`. */
+    private isDisabled;
+    /**
+     * The checkbox in the heading: every row that can be chosen, or none of
+     * them where each already is. A `disabled` row keeps what it had.
+     */
     private chooseAll;
-    /** One row's checkbox, ticked or not. */
+    /** The key of the row a Shift range runs from: the one last chosen. */
+    private anchorKey;
+    /**
+     * Selects every row from the one last chosen to the drawn row `to`, keeping
+     * what was already selected. With no row to run from, the range is the row
+     * the reader is on, `from`, and it becomes the one to run from. Says whether
+     * the table selects at all.
+     */
+    private selectRange;
+    /** One row's checkbox, ticked or not. It becomes the row a range runs from. */
     private chooseRow;
     /**
      * Enter, Space or F2 on a cell of a `grid` table, and whether it did
@@ -498,7 +521,10 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * assignment has not happened.
      */
     static shadowRootOptions: ShadowRootInit;
-    /** The rows: every child that is not a column, which is what the body slot is assigned. */
+    /**
+     * The rows: every child that is not a column, a heading, or the content of
+     * the `empty` or `loading` slot, which is what the body slot is assigned.
+     */
     protected get slotted(): Element[];
     private assign;
     /**

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, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, assignSlots, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixElement, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, sort, splitValues, toggleEvery, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
@@ -44,9 +44,12 @@ const SAMPLE = 200;
 const textOf = (element) => (element?.textContent ?? '').replace(/\s+/g, ' ').trim();
 const lengthOf = (element) => textOf(element).length;
 const numberOf = (value) => Number(value.replaceAll(',', ''));
+const STATUS = new Set(['empty', 'loading']);
+const NAMED = new Set([...STATUS, 'heading']);
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.statusSlots = true;
         this.ascendingLabel = 'ascending';
         this.canceledLabel = 'Canceled';
         this.columns = '';
@@ -82,7 +85,9 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             on: () => this.grid,
             part: (name) => this.partNamed(name),
             rows: () => (this.childrenKnown ? this.arrangedRows : []),
-            selectAll: () => this.selectable && this.requestSelected(new Set(this.everyKey)),
+            rowWords: () => this.arrangedRows.map((row) => textOf(row.children[0])),
+            selectAll: () => this.selectable && this.requestSelected(new Set([...this.chosen, ...this.enabledKeys])),
+            selectRange: (to, from) => this.selectRange(to, from),
         });
         this.reorder = new ReorderController(this, {
             axis: 'block',
@@ -125,6 +130,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             event.preventDefault();
             this.chooseRow(found.key, event.detail.checked);
         };
+        this.anchorKey = undefined;
         this.handleHeadClick = (event) => {
             const path = event.composedPath();
             if (!path.some((node) => node instanceof Element && node.getAttribute('part') === 'sort')) {
@@ -260,10 +266,35 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     get everyKey() {
         return this.keyed.map(({ key }) => key);
     }
+    get enabledKeys() {
+        return this.keyed.filter(({ row }) => !row.disabled).map(({ key }) => key);
+    }
+    isDisabled(key) {
+        return this.keyed.find((one) => one.key === key)?.row.disabled === true;
+    }
     chooseAll() {
-        this.requestSelected(new Set(toggleEvery(this.chosen, this.everyKey)));
+        this.requestSelected(new Set(toggleEvery(this.chosen, this.enabledKeys)));
+    }
+    selectRange(to, from) {
+        if (!this.selectable) {
+            return false;
+        }
+        const keyOf = new Map(this.keyed.map(({ key, row }) => [row, key]));
+        const keys = this.arrangedRows.map((row) => keyOf.get(row) ?? '');
+        const { anchor, anchorKey } = anchorAt(keys, this.anchorKey, from);
+        this.anchorKey = anchorKey;
+        const now = this.chosen;
+        const next = rangeAdd([...now], keys, anchor, to)?.filter((key) => now.has(key) || !this.isDisabled(key));
+        if (next && next.length > now.size) {
+            this.requestSelected(new Set(next));
+        }
+        return true;
     }
     chooseRow(key, on) {
+        if (this.isDisabled(key)) {
+            return;
+        }
+        this.anchorKey = key;
         const keys = this.chosen;
         if (on) {
             keys.add(key);
@@ -298,7 +329,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.chooseRow(found.key, !this.chosen.has(found.key));
             return true;
         }
-        if (event.key === 'Enter' && row?.href) {
+        if (event.key === 'Enter' && row?.href && !row.disabled) {
             followLink(this.ownerDocument, { href: row.href, rel: row.rel, target: row.target }, event);
             return true;
         }
@@ -418,7 +449,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }; }
     get slotted() {
         const columns = new Set(this.tableColumns);
-        return [...(this.children ?? [])].filter((child) => !columns.has(child) && child.getAttribute('slot') !== 'heading');
+        return [...(this.children ?? [])].filter((child) => !columns.has(child) && !NAMED.has(child.getAttribute('slot') ?? ''));
     }
     assign() {
         if (this.assignsByName) {
@@ -429,7 +460,14 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         }
         const columns = new Set(this.tableColumns);
         const headings = new Set(this.headings);
-        assignSlots(this.renderRoot, [...columns, ...headings, ...this.arrangedRows], (child) => (columns.has(child) ? 'columns' : headings.has(child) ? 'heading' : ''));
+        const status = [...(this.children ?? [])].filter((child) => STATUS.has(child.getAttribute('slot') ?? ''));
+        assignSlots(this.renderRoot, [...columns, ...headings, ...status, ...this.arrangedRows], (child) => columns.has(child)
+            ? 'columns'
+            : headings.has(child)
+                ? 'heading'
+                : status.includes(child)
+                    ? (child.getAttribute('slot') ?? '')
+                    : '');
     }
     alignCells() {
         if (typeof CSSStyleSheet === 'undefined' || !('replaceSync' in CSSStyleSheet.prototype)) {
@@ -483,7 +521,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         if (!this.selectable) {
             return nothing;
         }
-        const every = this.childrenKnown ? this.keyed.map(({ key }) => key) : [];
+        const every = this.childrenKnown ? this.enabledKeys : [];
         const { checked, indeterminate } = everyState(this.chosen, every);
         const checkbox = this.tag('checkbox');
         const grid = this.grid;

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

@@ -13,7 +13,8 @@ export type TableRowMove = 'dragging' | 'drop-after' | 'drop-before';
  * it, or make it interactive.
  *
  * In a `selectable` table the row draws a checkbox cell before its own cells,
- * and `value` is the key the table's `selected` lists it by.
+ * and `value` is the key the table's `selected` lists it by. `disabled` keeps
+ * the row out of the selection and out of its link.
  *
  * In a `reorderable` table the row draws a grip cell before those, holding a
  * button named by the table's `move-row-label`, and `value` is the key
@@ -56,7 +57,7 @@ export type TableRowMove = 'dragging' | 'drop-after' | 'drop-before';
  * @cssstate dragging - The row is being moved, in a `reorderable` table.
  * @cssstate drop-after - The row being moved goes after this one when it is dropped.
  * @cssstate drop-before - The row being moved goes before this one when it is dropped.
- * @cssstate link - While the row has `href`, so a press on it follows the link.
+ * @cssstate link - While the row has `href` and is not `disabled`, so a press on it follows the link.
  * @cssstate selected - While the row is selected, in a `selectable` table.
  */
 export declare class HelixHeadlessTableRow extends HelixElement {
@@ -65,6 +66,15 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      * finds its columns. Not a consumer's to read or set.
      */
     readonly isTableRow = true;
+    /**
+     * Takes the row out of the table's selection and out of its link: the row's
+     * checkbox is disabled, Space, Shift ranges, and the checkbox in the heading
+     * pass over it, and a press does not follow `href`. A row already selected
+     * stays selected. A screen reader hears it as unavailable, and in a `grid`
+     * table the arrow keys still reach it, as a disabled cell in a grid is
+     * reached.
+     */
+    disabled: boolean;
     /**
      * The URL a press on the row follows, which makes the whole row a link.
      * Empty, the default, leaves presses to the row's cells.

package/dist/table/row/table-row.js

@@ -15,6 +15,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
     constructor() {
         super(...arguments);
         this.isTableRow = true;
+        this.disabled = false;
         this.href = '';
         this.rel = '';
         this.target = '';
@@ -30,7 +31,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         this.selectStop = false;
         this.columnRules = undefined;
         this.handleClick = (event) => {
-            if (this.href === '' || event.button !== 0 || event.defaultPrevented) {
+            if (this.disabled || this.href === '' || event.button !== 0 || event.defaultPrevented) {
                 return;
             }
             const cell = event
@@ -68,8 +69,9 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'row' });
         this.internals.ariaSelected = this.gridCell && this.selectable ? String(this.selected) : null;
+        this.internals.ariaDisabled = this.disabled ? 'true' : null;
         this.toggleState('selected', this.selectable && this.selected);
-        this.toggleState('link', this.href !== '');
+        this.toggleState('link', this.href !== '' && !this.disabled);
         this.toggleState('dragging', this.move === 'dragging');
         this.toggleState('drop-after', this.move === 'drop-after');
         this.toggleState('drop-before', this.move === 'drop-before');
@@ -100,6 +102,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
           mark-checked: checkbox-mark-checked, mark-dash: checkbox-mark-dash,
           mark-indeterminate: checkbox-mark-indeterminate"
         aria-label=${this.selectLabel}
+        ?disabled=${this.disabled}
         .checked=${this.selected}
       ></${checkbox}
     ></span>`;
@@ -126,6 +129,9 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         return html `${this.renderGrip()}${this.renderSelect()}<slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTableRow.prototype, "disabled", void 0);
 __decorate([
     property()
 ], HelixHeadlessTableRow.prototype, "href", void 0);

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

@@ -316,6 +316,12 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * Whether the video starts again at the end.
      */
     loop: boolean;
+    /**
+     * The title the device's own media controls show while the video plays,
+     * such as on a lock screen. Empty, the default, shows `label`. A playlist
+     * writes the current entry's name here.
+     */
+    mediaTitle: string;
     /**
      * What the button that opens `overflow-controls` is called.
      */

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

@@ -47,6 +47,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.label = '';
         this.loadingLabel = 'Loading';
         this.loop = false;
+        this.mediaTitle = '';
         this.moreLabel = 'More controls';
         this.muteLabel = 'Mute';
         this.nextLabel = 'Next';
@@ -351,7 +352,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     }
     claimSession() {
         const skips = writtenList(`${this.extraControls} ${this.overflowControls}`);
-        this.session.claim({ artwork: this.poster, title: this.label }, {
+        this.session.claim({ artwork: this.poster, title: this.mediaTitle || this.label }, {
             next: skips.includes('next') ? () => this.skip(false) : null,
             previous: skips.includes('previous') ? () => this.skip(true) : null,
             seek: (seconds) => this.seek(seconds),
@@ -954,6 +955,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "loop", void 0);
+__decorate([
+    property({ attribute: 'media-title' })
+], HelixHeadlessVideo.prototype, "mediaTitle", void 0);
 __decorate([
     words,
     property({ attribute: 'more-label' })

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

@@ -30,6 +30,10 @@ 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.
  *
+ * **The player is named by the current entry**, and the device's own media
+ * controls show the entry as the title. A player you gave a `label` keeps
+ * your name, and only the title follows the entry.
+ *
  * **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

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

@@ -125,7 +125,10 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         if (player.src !== current.src) {
             player.src = current.src;
             player.poster = current.poster;
-            player.label = current.text;
+            player.mediaTitle = current.text;
+            if (!player.hasAttribute('label')) {
+                player.label = current.text;
+            }
             if (this.chased) {
                 void player.updateComplete?.then(() => player.play()).catch(() => { });
             }

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

@@ -91,6 +91,12 @@ export interface VirtualListRange {
  * the last item says "Loading more" (`loading-label`, or your own content in
  * the `loading` slot). `scrollToIndex` takes a reader to an item.
  *
+ * **An empty list.** Set `empty-label`, or put your own content in the `empty`
+ * slot, for a row shown when there are no items and none are loading, such as
+ * "No messages yet" and a link to write one. Without either, an empty list
+ * shows nothing, since a list whose items have not arrived yet has not said
+ * it has none.
+ *
  * **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
@@ -112,6 +118,7 @@ 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 empty - Content for the row shown when there are no items and none are loading. Falls back to `empty-label`.
  * @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`.
@@ -121,6 +128,7 @@ export interface VirtualListRange {
  *
  * @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 empty - The row shown when there are no items and none are loading, where `empty-label` or the `empty` slot gives it content.
  * @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.
  */
@@ -136,6 +144,11 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * time, with Left and Right moving along a line.
      */
     columns: number;
+    /**
+     * The text of the row shown when there are no items and none are loading,
+     * where the `empty` slot is empty. Empty, the default, shows no row.
+     */
+    emptyLabel: string;
     /**
      * The height of one row, in pixels, used to find the row at a scroll offset.
      *
@@ -376,7 +389,16 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * first when it is not drawn.
      */
     private focusIndex;
-    /** The row kept for focus is let go once focus has left it. */
+    /**
+     * The row kept for focus is let go once focus has left it.
+     *
+     * **A task later, and not at once.** Between `focusout` and `focusin` the
+     * page's focus is on `<body>`, and Chromium runs microtasks there when a key
+     * moves focus. An update asked for here ran in that gap: Tab from a kept row
+     * to its own link found no row holding focus, removed the row, and the link
+     * went with it, leaving focus on `<body>`. A move to a control inside this
+     * list asks for its own update in `handleFocusIn`, so it needs nothing here.
+     */
     private readonly handleFocusOut;
     /** A row that takes focus, by a press or by Tab, takes the tab stop with it. */
     private readonly handleFocusIn;

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

@@ -15,6 +15,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     constructor() {
         super(...arguments);
         this.columns = 1;
+        this.emptyLabel = '';
         this.estimate = 32;
         this.for = '';
         this.keyField = '';
@@ -103,8 +104,14 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             }
             this.press(at, event.shiftKey && this.selectionMode === 'multiple');
         };
-        this.handleFocusOut = () => {
-            this.requestUpdate();
+        this.handleFocusOut = (event) => {
+            const next = event.relatedTarget;
+            if (next instanceof Node && this.contains(next)) {
+                return;
+            }
+            setTimeout(() => {
+                this.requestUpdate();
+            }, 0);
         };
         this.handleFocusIn = (event) => {
             let node = event.target;
@@ -433,6 +440,10 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
         const kept = this.hasUpdated ? this.keptIndex() : undefined;
         const { after, before } = this.virtualize.spacers(kept === undefined ? undefined : Math.floor(kept / this.across));
         const across = this.across;
+        const empty = this.readFor !== undefined &&
+            !this.loading &&
+            this.data.length === 0 &&
+            (this.emptyLabel !== '' || this.querySelector(':scope > [slot="empty"]') !== null);
         return html `<div
       data-scroller
       part="viewport"
@@ -457,12 +468,20 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
               <slot name="loading">${this.loadingLabel}</slot>
             </div>`
             : nothing}
+      ${empty
+            ? html `<div part="empty" role=${this.selectionMode ? 'option' : 'listitem'}>
+              <slot name="empty">${this.emptyLabel}</slot>
+            </div>`
+            : nothing}
     </div>`;
     }
 };
 __decorate([
     property({ type: Number })
 ], HelixHeadlessVirtualList.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: 'empty-label' })
+], HelixHeadlessVirtualList.prototype, "emptyLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessVirtualList.prototype, "estimate", void 0);