@fusion.dev/helix-headless 0.23.0 → 0.24.1

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.
@@ -89,6 +90,15 @@ export declare class HelixHeadlessTour extends HelixElement {
      * Where the light falls, read from the current target.
      */
     private spot;
+    /**
+     * Watches the lit target's own box, which moves the light without this
+     * element updating or the window changing: a label whose font arrives late,
+     * words a page rewrites. Measured on a server's page, the spotlight sat two
+     * pixels inside each side of a button that widened once its font loaded.
+     */
+    private sizer;
+    /** What `sizer` is watching, so a render that changed nothing re-observes nothing. */
+    private sized;
     /** The stops, in the order they were written. */
     get stops(): HelixHeadlessTourStop[];
     /** How many stops there are. */
@@ -123,8 +133,12 @@ export declare class HelixHeadlessTour extends HelixElement {
      * localised the tour.
      */
     private settle;
+    /** The current stop's target while the run is open, which is what the light falls on. */
+    private get lit();
     /** Reads the current target's box, which is where the light falls. */
     private light;
+    /** Keeps `sizer` on the lit target, and on nothing once there is none. */
+    private watch;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/tour/root/tour-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 { customElement, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixCompleteEvent, HelixElement, hostAria, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforeActivateEvent, HelixBeforeCloseEvent, HelixCompleteEvent, HelixElement, hostAria, requestChange, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
 let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
@@ -19,6 +19,8 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         this.open = false;
         this.skipLabel = '';
         this.spotlightPadding = 8;
+        this.sizer = undefined;
+        this.sized = undefined;
         this.handleAsk = (event) => {
             const what = event.detail?.what;
             if (what === 'next') {
@@ -96,6 +98,9 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         this.ownerDocument.addEventListener('keydown', this.handleKeydown);
         globalThis.addEventListener('resize', this.handleViewport, { passive: true });
         globalThis.addEventListener('scroll', this.handleViewport, { capture: true, passive: true });
+        if (this.hasUpdated) {
+            this.watch(this.lit);
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -103,6 +108,8 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         this.ownerDocument.removeEventListener('keydown', this.handleKeydown);
         globalThis.removeEventListener('resize', this.handleViewport);
         globalThis.removeEventListener('scroll', this.handleViewport, { capture: true });
+        this.sizer?.disconnect();
+        this.sized = undefined;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -117,28 +124,34 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
         const stops = this.stops;
         const at = Math.max(0, Math.min(this.index, stops.length - 1));
         stops.forEach((stop, index) => {
-            stop.current = this.open && index === at;
-            stop.first = index === 0;
-            stop.last = index === stops.length - 1;
-            if (this.backLabel !== '') {
-                stop.backLabel = this.backLabel;
-            }
-            if (this.nextLabel !== '') {
-                stop.nextLabel = this.nextLabel;
-            }
-            if (this.doneLabel !== '') {
-                stop.doneLabel = this.doneLabel;
-            }
-            if (this.skipLabel !== '') {
-                stop.skipLabel = this.skipLabel;
-            }
+            whenHydrated(stop, () => {
+                stop.current = this.open && index === at;
+                stop.first = index === 0;
+                stop.last = index === stops.length - 1;
+                if (this.backLabel !== '') {
+                    stop.backLabel = this.backLabel;
+                }
+                if (this.nextLabel !== '') {
+                    stop.nextLabel = this.nextLabel;
+                }
+                if (this.doneLabel !== '') {
+                    stop.doneLabel = this.doneLabel;
+                }
+                if (this.skipLabel !== '') {
+                    stop.skipLabel = this.skipLabel;
+                }
+            });
         });
     }
-    light() {
+    get lit() {
         const stops = this.stops;
-        const target = this.open
+        return this.open
             ? stops[Math.max(0, Math.min(this.index, stops.length - 1))]?.target
             : undefined;
+    }
+    light() {
+        const target = this.lit;
+        this.watch(target);
         if (!target || typeof target.getBoundingClientRect !== 'function') {
             this.spot = undefined;
             return;
@@ -160,6 +173,18 @@ let HelixHeadlessTour = class HelixHeadlessTour extends HelixElement {
             this.spot = next;
         }
     }
+    watch(target) {
+        const next = target ?? undefined;
+        if (next === this.sized || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.sizer ??= new ResizeObserver(() => this.light());
+        this.sizer.disconnect();
+        if (next) {
+            this.sizer.observe(next);
+        }
+        this.sized = next;
+    }
     render() {
         const spot = this.spot;
         return html `${spot === undefined

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`.