@fusion.dev/helix-headless 0.23.0 → 0.24.0

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

@@ -10,6 +10,16 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * `undefined` falls back to the field.
  */
 export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
+/**
+ * A dot path resolved against a row.
+ *
+ * Written here rather than taken from a library, because the whole of what is
+ * needed is "walk the keys and stop at the first thing that is not an object".
+ * Returns `undefined` for a path that does not resolve, which the table renders
+ * as an empty cell: a missing key is a hole in the data and drawing `undefined`
+ * into a table tells a reader the software is broken rather than the row is.
+ */
+export declare const at: (row: Readonly<Record<string, unknown>>, path: string) => unknown;
 /**
  * @summary One column of a table: its heading, how wide it is, and what it reads.
  *
@@ -37,6 +47,14 @@ export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
  * item of the table, so it lines up with the cells under it rather than sitting
  * in a wrapper that has to be kept the same width.
  *
+ * **A heading that does something holds a control that does it.** The host is
+ * the column header, and a header is not focusable, so a sortable heading is a
+ * `<button>` inside it: the pattern for a sortable table, and the only way a
+ * reader on a keyboard reaches the sort at all. A column a reader may resize
+ * carries a `separator` on its end edge, moved by dragging it or with the arrow
+ * keys, and a column in a table that lets a reader reorder its columns carries
+ * a grip the table moves.
+ *
  * @since 0.1.0
  * @status experimental
  * @aliases Column header, Th
@@ -44,7 +62,13 @@ export type CellReader = (row: Readonly<Record<string, unknown>>) => unknown;
  *
  * @slot - The heading.
  *
+ * @event {HelixBeforeResizeEvent} helix-before-resize - Fired as a reader resizes the column, with the width asked for, and cancelable.
+ *
  * @csspart column - The heading cell.
+ * @csspart grip - The handle a reader moves the column by, where the table allows it.
+ * @csspart grip-mark - The glyph on it.
+ * @csspart resizer - The edge a reader drags to change the width, where the column allows it.
+ * @csspart sort - The button a sortable heading is.
  */
 export declare class HelixHeadlessTableColumn extends HelixElement {
     /**
@@ -90,6 +114,15 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * such a column is never sortable however it is marked.
      */
     field: string;
+    /**
+     * Whether a reader may change this column's width.
+     *
+     * By dragging the edge at the end of the heading, or with the arrow keys once
+     * it has focus, a step at a time and four with Shift. The width lands in
+     * `width` as pixels, and `helix-before-resize` asks first, so a consumer who
+     * stores the widths can take the decision.
+     */
+    resizable: boolean;
     /**
      * Whether a reader may reorder the set by this column.
      *
@@ -135,6 +168,28 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * not in.
      */
     sorted: 'ascending' | 'descending' | undefined;
+    /**
+     * @internal Whether the table this sits in lets a reader move it, written by
+     * that table. Not a consumer's to set: the order is the table's, and a grip
+     * on a column the table will not move is a control that does nothing.
+     */
+    movable: boolean;
+    /** How wide the heading drew, for the separator to report. */
+    private drawn;
+    /** Where a drag of the separator started, while one is running. */
+    private resizing;
+    /** Watches the heading's width, which changes with the table as well as with a drag. */
+    private watcher;
+    /**
+     * The narrowest a reader can drag a column, in pixels.
+     *
+     * Three characters and the inset around them. Narrower and the heading has
+     * nothing left to be read by, and the separator is a grab target with no
+     * column beside it.
+     */
+    static readonly NARROWEST = 48;
+    /** The step the arrow keys move the separator by, in pixels. */
+    static readonly STEP = 16;
     /** The track this column contributes, resolved. */
     get track(): string;
     /** Whether a reader can actually reorder by this column. */
@@ -150,6 +205,30 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
     /** The value this column sorts and filters by, which is not always what it shows. */
     order(row: Readonly<Record<string, unknown>>): unknown;
     protected willUpdate(changed: PropertyValues): void;
+    /** The words of the heading, for naming the controls on it. */
+    private get name();
+    connectedCallback(): void;
+    private observeHeading;
+    disconnectedCallback(): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Asks for a width, in pixels, no narrower than a column can be read at.
+     *
+     * Through the same request every controlled value here uses: announced, and
+     * applied only where nobody refused it.
+     */
+    private resizeTo;
+    /** Which way a drag or an arrow key grows the column, in this writing direction. */
+    private get forward();
+    private readonly handleResizeStart;
+    private readonly handleResizeMove;
+    private readonly handleResizeEnd;
+    /**
+     * The separator's keys: a step each way, four with Shift, and Home for the
+     * narrowest. Arrows follow the writing direction, so the one pointing away
+     * from the heading's start always widens it.
+     */
+    private readonly handleResizeKey;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/table/column/table-column.js

@@ -4,10 +4,13 @@ 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 { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+var HelixHeadlessTableColumn_1;
+import { customElement, HelixBeforeResizeEvent, HelixElement, hostAria, requestChange, } from '@fusion.dev/helix-core';
+import { dotsThreeVertical } from '@fusion.dev/helix-icons';
+import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-const at = (row, path) => {
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+export const at = (row, path) => {
     if (path === '') {
         return undefined;
     }
@@ -30,11 +33,50 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
         this.cell = undefined;
         this.compare = undefined;
         this.field = '';
+        this.resizable = false;
         this.sortable = false;
         this.width = '';
         this.isTableColumn = true;
         this.sorted = undefined;
+        this.movable = false;
+        this.drawn = 0;
+        this.handleResizeStart = (event) => {
+            if (event.button !== 0) {
+                return;
+            }
+            event.preventDefault();
+            try {
+                ;
+                event.currentTarget.setPointerCapture(event.pointerId);
+            }
+            catch {
+            }
+            this.resizing = { from: event.clientX, start: this.drawn };
+        };
+        this.handleResizeMove = (event) => {
+            if (this.resizing) {
+                this.resizeTo(this.resizing.start + (event.clientX - this.resizing.from) * this.forward);
+            }
+        };
+        this.handleResizeEnd = () => {
+            this.resizing = undefined;
+        };
+        this.handleResizeKey = (event) => {
+            const step = HelixHeadlessTableColumn_1.STEP * (event.shiftKey ? 4 : 1);
+            const grow = event.key === 'ArrowRight' ? this.forward : event.key === 'ArrowLeft' ? -this.forward : 0;
+            if (grow !== 0) {
+                event.preventDefault();
+                this.resizeTo(this.drawn + grow * step);
+            }
+            else if (event.key === 'Home') {
+                event.preventDefault();
+                this.resizeTo(HelixHeadlessTableColumn_1.NARROWEST);
+            }
+        };
     }
+    static { HelixHeadlessTableColumn_1 = this; }
+    static { this.NARROWEST = 48; }
+    static { this.STEP = 16; }
     get track() {
         return this.width || 'minmax(max-content, 1fr)';
     }
@@ -60,8 +102,77 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
             this.toggleState(name, on);
         }
     }
+    get name() {
+        return this.textContent?.trim() ?? '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.watcher = new ResizeObserver(([entry]) => {
+                this.drawn = Math.round(entry?.borderBoxSize?.[0]?.inlineSize ?? 0);
+            });
+            this.observeHeading();
+        }
+    }
+    observeHeading() {
+        const heading = this.renderRoot?.querySelector('[part="column"]');
+        if (heading) {
+            this.watcher?.observe(heading);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.watcher?.disconnect();
+    }
+    firstUpdated(changed) {
+        super.firstUpdated?.(changed);
+        this.observeHeading();
+    }
+    resizeTo(px) {
+        const next = `${Math.max(HelixHeadlessTableColumn_1.NARROWEST, Math.round(px))}px`;
+        if (next === this.width) {
+            return;
+        }
+        requestChange({
+            apply: (value) => {
+                this.width = value;
+            },
+            event: (value) => new HelixBeforeResizeEvent({ value }),
+            host: this,
+            next,
+        });
+    }
+    get forward() {
+        return getComputedStyle(this).direction === 'rtl' ? -1 : 1;
+    }
     render() {
-        return html `<span part="column"><slot></slot></span>`;
+        const name = this.name;
+        return html `<span part="column">${this.movable
+            ? html `<button part="grip" type="button" aria-label=${name ? `Move ${name}` : 'Move column'}>
+            <svg aria-hidden="true" fill="currentColor" part="grip-mark" viewBox=${dotsThreeVertical.viewBox}>
+              ${unsafeSVG(dotsThreeVertical.content)}
+            </svg>
+          </button>`
+            : nothing}${this.canSort
+            ? html `<button part="sort" type="button"><slot></slot></button>`
+            : html `<slot></slot>`}${this.resizable
+            ? html `<span
+            part="resizer"
+            role="separator"
+            tabindex="0"
+            aria-label=${name ? `Resize ${name}` : 'Resize column'}
+            aria-orientation="vertical"
+            aria-valuemin=${HelixHeadlessTableColumn_1.NARROWEST}
+            aria-valuemax="4096"
+            aria-valuenow=${Math.max(HelixHeadlessTableColumn_1.NARROWEST, this.drawn)}
+            aria-valuetext=${`${this.drawn} pixels`}
+            @keydown=${this.handleResizeKey}
+            @pointerdown=${this.handleResizeStart}
+            @pointermove=${this.handleResizeMove}
+            @pointerup=${this.handleResizeEnd}
+            @pointercancel=${this.handleResizeEnd}
+          ></span>`
+            : nothing}</span>`;
     }
 };
 __decorate([
@@ -76,6 +187,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTableColumn.prototype, "field", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTableColumn.prototype, "resizable", void 0);
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessTableColumn.prototype, "sortable", void 0);
@@ -85,7 +199,13 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessTableColumn.prototype, "sorted", void 0);
-HelixHeadlessTableColumn = __decorate([
+__decorate([
+    state()
+], HelixHeadlessTableColumn.prototype, "movable", void 0);
+__decorate([
+    state()
+], HelixHeadlessTableColumn.prototype, "drawn", void 0);
+HelixHeadlessTableColumn = HelixHeadlessTableColumn_1 = __decorate([
     customElement('helix-headless-table-column')
 ], HelixHeadlessTableColumn);
 export { HelixHeadlessTableColumn };

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

@@ -85,6 +85,8 @@ 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. */
+    protected get slotted(): Element[];
     private assign;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;

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

@@ -17,7 +17,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         };
     }
     get tableColumns() {
-        return [...(this.children ?? [])].filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
+        return this.knownChildren.filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
     }
     get template() {
         const declared = this.tableColumns;
@@ -30,15 +30,24 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
     }; }
+    get slotted() {
+        const columns = new Set(this.tableColumns);
+        return [...(this.children ?? [])].filter((child) => !columns.has(child));
+    }
     assign() {
+        if (this.assignsByName) {
+            for (const column of this.tableColumns) {
+                this.route(column, 'columns');
+            }
+            return;
+        }
         const head = this.renderRoot?.querySelector('slot[name="columns"]');
         const body = this.renderRoot?.querySelector('slot:not([name])');
         if (!head || !body) {
             return;
         }
-        const columns = new Set(this.tableColumns);
         head.assign(...this.tableColumns);
-        body.assign(...[...this.children].filter((child) => !columns.has(child)));
+        body.assign(...this.slotted);
     }
     updated(changed) {
         super.updated(changed);

package/dist/time-picker/root/time-picker-root.d.ts

@@ -195,6 +195,15 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     private halfBarred;
     /** The times held, which is a list whether or not a mode is set. */
     private get held();
+    /**
+     * The list's own `input`, stopped at the boundary.
+     *
+     * It is composed, so it crosses out of this shadow root on its own, and this
+     * element announces the time itself: a page listening here heard two `input`s
+     * for one choice, the second from the list inside, after the `change` that
+     * should have been the last word. Found running the events example.
+     */
+    private readonly handleListInput;
     /**
      * Takes what the list announced and constrains it to what the mode allows.
      *

package/dist/time-picker/root/time-picker-root.js

@@ -46,6 +46,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         this.min = '00:00';
         this.readOnly = false;
         this.required = false;
+        this.handleListInput = (event) => {
+            event.stopPropagation();
+        };
         this.handleChange = (event) => {
             event.stopPropagation();
             if (this.isDisabled) {
@@ -225,6 +228,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             event.stopPropagation();
             this.moveColumn(part, event.detail.value);
         }}
+      @input=${this.handleListInput}
     >
       ${values.map((one) => html `<${this.tag('option')} part="option"
           exportparts="description: option-description, item: option-item, label: option-label, text: option-text" value=${one} ?disabled=${barred(one)}
@@ -259,6 +263,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       ?multiple=${this.mode !== undefined}
       .value=${this.value}
       @helix-before-change=${this.handleChange}
+      @input=${this.handleListInput}
     >
       ${this.times.map((minutes) => {
             const at = fromMinutes(minutes);

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

@@ -36,6 +36,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The messages, as `helix-toast-item` elements.
  *
+ * @event {HelixDismissEvent} helix-dismiss - A message asking to go, by its control or by its timer, dispatched by the message and heard here because the stack is what a consumer holds. Cancelable: refusing it takes the decision and the message stays.
+ *
  * @csspart region - The stack the messages are in.
  */
 export declare class HelixHeadlessToast extends HelixElement {

package/dist/tooltip/root/tooltip-root.js

@@ -48,7 +48,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             this.timer = setTimeout(() => this.release(), this.delayOut);
         };
         this.showNow = (event) => {
-            const focused = event.target;
+            const focused = event.composedPath()[0] ?? event.target;
             if (focused instanceof Element && !focused.matches(':focus-visible')) {
                 return;
             }

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

@@ -31,6 +31,7 @@ import type { HelixHeadlessTourStop } from '../stop/tour-stop.js';
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the reader leaves early. Cancelable: refusing it takes the decision and nothing moves.
  * @event {HelixCompleteEvent} helix-complete - Fired when the last stop is
  * finished.
+ * @event {HelixTourAskEvent} helix-tour-ask - A stop's own controls asking the tour to move, dispatched by the stop and heard here because the tour is what moves.
  * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
  *
  * @csspart spotlight - The box over the current target, which paints the scrim.

package/dist/tree/item/tree-item.d.ts

@@ -14,9 +14,9 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * An element rather than a slot, because it owns state: whether it is open,
  * selected, and whether it holds focus.
  *
- * A branch is any item with something slotted into `children`, detected in
- * `firstUpdated` because the server cannot inspect children. The server renders
- * the node as a leaf and the twisty appears on hydration, which is the harmless
+ * A branch is any item with something slotted into `children`, detected on the
+ * client because the server cannot inspect children. The server renders the
+ * node as a leaf and the twisty appears on hydration, which is the harmless
  * direction.
  *
  * **`href` makes the row itself the link.** With the anchor slotted into the
@@ -100,7 +100,10 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
     /**
      * Whether anything is slotted into `children`.
      *
-     * Read after first render.
+     * Read from the children before each render, so the first one draws the
+     * twisty, and from the slot, which is what hears a child arrive later. Not on
+     * the server, where `children` is undefined, nor while hydrating what one
+     * sent.
      */
     private branch;
     protected firstUpdated(changed: PropertyValues): void;

package/dist/tree/item/tree-item.js

@@ -40,8 +40,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.finishHydration();
         const slot = this.renderRoot.querySelector('slot[name="children"]');
-        this.branch = (slot?.assignedElements().length ?? 0) > 0;
         slot?.addEventListener('slotchange', () => {
             this.branch = slot.assignedElements().length > 0;
         });
@@ -97,6 +97,9 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
+        if (this.children !== undefined && !this.hydrating) {
+            this.branch = [...this.children].some((child) => child.slot === 'children');
+        }
     }
     render() {
         const linked = this.href !== '';

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

@@ -460,14 +460,23 @@ export declare class HelixHeadlessVideo extends HelixElement {
     private takeScrub;
     /** The volume rail's new level, stopped for the reason `takeScrub` carries. */
     private takeVolume;
+    /** Whether the first set of copies has been read from the children. */
+    private mediaRead;
     /**
-     * Rebuilds the copies from whatever the consumer has slotted.
+     * The copies to make of what the default slot is given.
      *
      * The attribute list is explicit rather than a blind copy of every attribute:
      * these are two elements with a known and small surface, and copying anything
      * a consumer happened to put on one would carry their framework's own markers
      * into a shadow root that has no use for them.
      */
+    private copiesOf;
+    /**
+     * Rebuilds the copies when what is slotted changes after the first read.
+     *
+     * The same set again is not a change. A video reloads for every new list, and
+     * the first `slotchange` reports the children this element already read.
+     */
     private readonly handleMedia;
     private readonly handleLoaded;
     private readonly handleTime;
@@ -632,6 +641,19 @@ export declare class HelixHeadlessVideo extends HelixElement {
     private readonly handleRemoteState;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** The caption tracks among the copies, named as the menu names them. */
+    private captions;
+    /**
+     * Finds the caption tracks among the copies, before the render that draws
+     * them.
+     *
+     * By the platform's own reading of `kind`, which is what makes a `<track>` a
+     * caption at all: missing is `subtitles` and anything it does not know is
+     * `metadata`. Read from the video's tracks after the render instead, the count
+     * arrived a render late and asked for one more. Choosing one still goes
+     * through the video's tracks, which hold them in the same order.
+     */
+    protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     /**
      * Mirrors playback onto the host as `data-playing`.

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

@@ -64,24 +64,12 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.remoteAvailable = false;
         this.remoteConnected = false;
         this.media = [];
+        this.mediaRead = false;
         this.handleMedia = (event) => {
-            const assigned = event.target.assignedElements();
-            this.media = assigned
-                .filter((node) => node instanceof HTMLSourceElement || node instanceof HTMLTrackElement)
-                .map((node) => {
-                const tag = node instanceof HTMLTrackElement ? 'track' : 'source';
-                const names = tag === 'track'
-                    ? ['default', 'kind', 'label', 'src', 'srclang']
-                    : ['media', 'sizes', 'src', 'srcset', 'type'];
-                const attrs = {};
-                for (const name of names) {
-                    const value = node.getAttribute(name);
-                    if (value !== null) {
-                        attrs[name] = value;
-                    }
-                }
-                return { attrs, tag };
-            });
+            const next = this.copiesOf(event.target.assignedElements());
+            if (JSON.stringify(next) !== JSON.stringify(this.media)) {
+                this.media = next;
+            }
         };
         this.handleLoaded = () => {
             const video = this.video;
@@ -92,7 +80,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             if (video.videoWidth > 0 && video.videoHeight > 0) {
                 this.style.setProperty('--video-intrinsic-ratio', `${video.videoWidth} / ${video.videoHeight}`);
             }
-            this.captionCount = this.captionTracks.length;
             const track = video.textTracks[0];
             if (track) {
                 if (track.mode === 'showing') {
@@ -229,6 +216,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.handleRemoteState = () => {
             this.remoteConnected = this.video?.remote?.state === 'connected';
         };
+        this.captions = [];
     }
     get localFile() {
         if (this.src === '') {
@@ -395,6 +383,24 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         video.volume = Number(event.target.value);
         video.muted = false;
     }
+    copiesOf(elements) {
+        return elements
+            .filter((node) => node instanceof HTMLSourceElement || node instanceof HTMLTrackElement)
+            .map((node) => {
+            const tag = node instanceof HTMLTrackElement ? 'track' : 'source';
+            const names = tag === 'track'
+                ? ['default', 'kind', 'label', 'src', 'srclang']
+                : ['media', 'sizes', 'src', 'srcset', 'type'];
+            const attrs = {};
+            for (const name of names) {
+                const value = node.getAttribute(name);
+                if (value !== null) {
+                    attrs[name] = value;
+                }
+            }
+            return { attrs, tag };
+        });
+    }
     claimSession() {
         if (typeof navigator === 'undefined' || !navigator.mediaSession) {
             return;
@@ -533,8 +539,24 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             }
         }
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (!this.mediaRead && this.children !== undefined && !this.hydrating) {
+            this.mediaRead = true;
+            this.media = this.copiesOf([...this.children].filter((child) => child.slot === ''));
+        }
+        if (changed.has('media')) {
+            this.captions = this.media
+                .filter((one) => one.tag === 'track' &&
+                (one.attrs.kind === undefined ||
+                    ['captions', 'subtitles'].includes(one.attrs.kind.toLowerCase())))
+                .map((one) => ({ label: one.attrs.label ?? '', language: one.attrs.srclang ?? '' }));
+            this.captionCount = this.captions.length;
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
+        this.finishHydration();
         const video = this.video;
         if (video) {
             this.silent = video.muted;
@@ -549,9 +571,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.toggleAttribute('data-playing', this.playing);
         this.toggleAttribute('data-idle', this.idle && this.playing);
         if (changed.has('media')) {
-            const video = this.video;
-            video?.load();
-            this.captionCount = this.captionTracks.length;
+            this.video?.load();
         }
     }
     renderExtra(one) {
@@ -639,7 +659,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     </button>`;
     }
     renderCaptions() {
-        const tracks = this.captionTracks;
+        const tracks = this.captions;
         if (this.captionCount === 0) {
             return nothing;
         }

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

@@ -61,6 +61,8 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * Empty on a server, which has nothing to read.
      */
     private rows;
+    /** The `for` that `rows` came from, so it is read again only when that changes. */
+    private readFor;
     private readonly virtualize;
     /**
      * The rows in the tree, each with the item it drew.
@@ -73,14 +75,16 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      */
     private drawn;
     /**
-     * Reads the source named by `for`, once the document exists to read.
+     * Reads the source named by `for`, before the render that draws it.
      *
-     * `firstUpdated` rather than `connectedCallback`, per the server rules: the
-     * shim has attributes and no tree, so `getElementById` is undefined there.
-     * A source that is missing or not an array leaves the list empty rather than
-     * throwing, because a consumer whose data has not arrived yet is the ordinary
-     * case and an empty list says so by itself.
+     * Not on the server, per the server rules: the shim has attributes and no
+     * tree, so `getElementById` is undefined there. Nor while hydrating what a
+     * server sent, which it drew with nothing read. A source that is missing or
+     * not an array leaves the list empty rather than throwing, because a consumer
+     * whose data has not arrived yet is the ordinary case and an empty list says
+     * so by itself.
      */
+    protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     private read;