@fusion.dev/helix-headless 0.52.1 → 0.53.1

package/dist/sparkline/root/sparkline-root.js

@@ -4,13 +4,11 @@ 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, extent, HelixElement, linear, linePath, SourceController, } from '@fusion.dev/helix-core';
+import { customElement, extent, HelixElement, linear, linePath, PLOT_WIDTH, SourceController, writtenList, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-const BOX = { height: 32, width: 100 };
-const readValues = (input) => input
-    .split(/[\s,]+/)
-    .filter((one) => one !== '')
+const STRIP_HEIGHT = 32;
+const readValues = (input) => writtenList(input)
     .map(Number)
     .filter((one) => Number.isFinite(one));
 let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
@@ -34,17 +32,17 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
     }
     render() {
         const points = this.points();
-        const x = linear([0, Math.max(points.length - 1, 1)], [0, BOX.width]);
+        const x = linear([0, Math.max(points.length - 1, 1)], [0, PLOT_WIDTH]);
         const [low, high] = extent(points.length > 0 ? points : [0]);
         const y = this.plot === 'bar'
-            ? linear([Math.min(0, low), Math.max(0, high)], [BOX.height, 0])
-            : linear([low, high], [BOX.height, 0]);
+            ? linear([Math.min(0, low), Math.max(0, high)], [STRIP_HEIGHT, 0])
+            : linear([low, high], [STRIP_HEIGHT, 0]);
         const coordinates = points.map((value, index) => [x(index), y(value)]);
         const path = this.plot === 'bar' ? '' : linePath(coordinates, this.curve ?? 'smooth');
         const area = this.plot !== 'bar' && this.plot !== 'line' && path !== ''
-            ? `${path}L${BOX.width},${BOX.height}L0,${BOX.height}Z`
+            ? `${path}L${PLOT_WIDTH},${STRIP_HEIGHT}L0,${STRIP_HEIGHT}Z`
             : '';
-        const slot = BOX.width / Math.max(points.length, 1);
+        const slot = PLOT_WIDTH / Math.max(points.length, 1);
         const floor = y(0);
         const bars = this.plot === 'bar'
             ? points.map((value, index) => ({
@@ -56,7 +54,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
             : [];
         const end = points.length < 2
             ? undefined
-            : `--chart-terminus-x: 100%; --chart-terminus-y: ${(y(points[points.length - 1]) / BOX.height) * 100}%`;
+            : `--chart-terminus-x: 100%; --chart-terminus-y: ${(y(points[points.length - 1]) / STRIP_HEIGHT) * 100}%`;
         return html `<svg
         aria-hidden=${this.label === '' ? 'true' : nothing}
         aria-label=${this.label === '' ? nothing : this.label}
@@ -65,7 +63,7 @@ let HelixHeadlessSparkline = class HelixHeadlessSparkline extends HelixElement {
         preserveAspectRatio="none"
         role=${this.label === '' ? nothing : 'img'}
         style=${end ?? nothing}
-        viewBox="0 0 ${BOX.width} ${BOX.height}"
+        viewBox="0 0 ${PLOT_WIDTH} ${STRIP_HEIGHT}"
       >
         ${svg `<defs>
             <linearGradient id="sparkline-wash" x1="0" x2="0" y1="0" y2="1">

package/dist/switch/root/switch-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, customElement, HelixFormElement, MixinControllerChecked, MixinField, slotFilled, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixFormElement, MixinControllerChecked, MixinField, markRegion, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerChecked(MixinField(HelixFormElement)) {
@@ -38,10 +38,7 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
         this.sync();
     }
     markEmpty() {
-        const region = this.partNamed('label');
-        const empty = !slotFilled(this.renderRoot?.querySelector('[part="label"] slot'));
-        region?.toggleAttribute('data-empty', empty);
-        region?.toggleAttribute('hidden', empty);
+        markRegion(this.renderRoot, 'label', ['']);
     }
     render() {
         return html `<label part="field">
@@ -50,7 +47,7 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
           part="control"
           type="checkbox"
           role="switch"
-          .checked=${this.checked}
+          .checked=${this.checked || nothing}
           ?disabled=${this.isDisabled}
           ?required=${this.required}
           aria-describedby=${this.describedBy ?? nothing}

package/dist/tabs/root/tabs-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, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
@@ -47,12 +47,19 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         const declared = this.active === '' ? tabs.find((tab) => tab.selected) : undefined;
         const value = (declared ?? this.resolveActive(tabs))?.value ?? '';
         for (const tab of tabs) {
-            tab.selected = tab.value === value;
+            const selected = tab.value === value;
+            whenHydrated(tab, () => {
+                tab.selected = selected;
+            });
         }
         const names = new Map(tabs.map((tab) => [tab.value, (tab.textContent ?? '').trim()]));
         for (const panel of this.panels) {
-            panel.selected = panel.value === value;
-            panel.label = names.get(panel.value) ?? '';
+            const selected = panel.value === value;
+            const label = names.get(panel.value) ?? '';
+            whenHydrated(panel, () => {
+                panel.selected = selected;
+                panel.label = label;
+            });
         }
     }
     connectedCallback() {

package/dist/tabs/tab/tab.d.ts

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
  * @summary One tab in a tab list.
  *
@@ -24,39 +25,18 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssstate selected - While it is the tab selected.
  */
-export declare class HelixHeadlessTab extends HelixElement {
+export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
+    protected itemPart: string;
     /**
-     * Whether the tab can be chosen.
-     */
-    disabled: boolean;
-    /**
-     * Whether this tab is the current one.
-     */
-    selected: boolean;
-    /**
-     * Identifies the tab, and pairs it with the panel of the same value.
-     */
-    value: string;
-    /** Moves focus to this tab, for the list's arrow keys. */
-    focusItem(): void;
-    /** Selects this tab and announces it. */
-    select(): void;
-    /**
-     * Mirrors the chosen state where a stylesheet can select on it.
-     *
-     * **A custom state, not a reflected `selected` attribute.** The parent writes
-     * this: a listbox choosing a row, a tab strip moving the tab, a radio group
-     * answering for its set. Reflected, it puts the element's own bookkeeping onto
-     * markup a consumer wrote and a consumer's server never sent, which React
-     * reconciles and reports as a mismatch, and which a serialized element pasted
-     * back declares as a choice nobody made. `ElementInternals` holds it instead,
-     * where it is not in the DOM at all.
+     * Asks for the render that follows a hydration, so the stop stops being every
+     * tab's.
      *
-     * Reading `selected` is unaffected and so is writing it: the attribute still
-     * seeds the property, which is what `<helix-tab selected>` in a consumer's
-     * markup means. What stops is the write back.
+     * `tabindex` reads `childrenKnown` and a hydrating render is one where that is
+     * false, which is what keeps the hydrating render the server's. Nothing else
+     * would ask: the root writes an already-false `selected` onto an unchosen tab,
+     * which changes nothing and so re-renders nothing.
      */
-    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {
@@ -64,3 +44,4 @@ declare global {
         'helix-headless-tab': HelixHeadlessTab;
     }
 }
+export {};

package/dist/tabs/tab/tab.js

@@ -4,28 +4,16 @@ 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, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinSelectableItem } from '@fusion.dev/helix-core';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
-let HelixHeadlessTab = class HelixHeadlessTab extends HelixElement {
+let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixElement) {
     constructor() {
         super(...arguments);
-        this.disabled = false;
-        this.selected = false;
-        this.value = '';
+        this.itemPart = 'tab';
     }
-    focusItem() {
-        this.partNamed('tab')?.focus();
-    }
-    select() {
-        if (this.disabled) {
-            return;
-        }
-        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
-    }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        this.toggleState('selected', this.selected);
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
     }
     render() {
         return html `<button
@@ -34,22 +22,13 @@ let HelixHeadlessTab = class HelixHeadlessTab extends HelixElement {
       type="button"
       aria-selected=${this.selected ? 'true' : 'false'}
       ?disabled=${this.disabled}
-      tabindex=${this.selected ? '0' : '-1'}
+      tabindex=${this.selected || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
     >
       <slot></slot>
     </button>`;
     }
 };
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessTab.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessTab.prototype, "selected", void 0);
-__decorate([
-    property()
-], HelixHeadlessTab.prototype, "value", void 0);
 HelixHeadlessTab = __decorate([
     customElement('helix-headless-tab')
 ], HelixHeadlessTab);

package/dist/textarea/root/textarea-root.js

@@ -157,7 +157,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
     <div part="field">
       <textarea
         part="control"
-        id="control"
+        id=${this.controlId}
         .value=${this.value}
         rows=${this.rows}
         cols=${this.cols ?? nothing}

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

@@ -192,7 +192,7 @@ let HelixHeadlessTimeInput = class HelixHeadlessTimeInput extends MixinPickerEdi
             : nothing}
         <input
           part="control"
-          id="control"
+          id=${this.controlId}
           type="text"
           .value=${this.display}
           name=${this.name || nothing}

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

@@ -1,5 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
  * @summary One option in a toggle group.
  *
@@ -24,11 +25,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @cssstate selected - While it is on.
  */
-export declare class HelixHeadlessToggle extends HelixElement {
-    /**
-     * Whether the item can be chosen.
-     */
-    disabled: boolean;
+export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
     /**
      * Whether the markup declared this one chosen, which is what a reset returns to.
      *
@@ -69,39 +66,15 @@ export declare class HelixHeadlessToggle extends HelixElement {
      */
     focusable: boolean;
     /**
-     * Whether this item is the current one.
-     */
-    selected: boolean;
-    /**
-     * Moves focus to this item's own control.
-     *
-     * The group drives arrow-key navigation and cannot reach the control itself,
-     * which is inside this shadow root. Exposing the intent as a method keeps the
-     * group out of the child's internals.
-     */
-    focusItem(): void;
-    /** Chooses this item and announces it. */
-    select(): void;
-    /**
-     * Identifies the item to the group.
-     */
-    value: string;
-    /**
-     * Mirrors the chosen state where a stylesheet can select on it.
-     *
-     * **A custom state rather than the `selected` attribute.** The parent writes
-     * this: a listbox choosing a row, a tab strip moving the tab, a radio group
-     * answering for its set. Reflected, that puts the element's own bookkeeping
-     * onto markup a consumer wrote and a consumer's server never sent, which
-     * React reconciles and reports as a mismatch, and which a serialized element
-     * pasted back declares as a choice nobody made. `ElementInternals` holds it
-     * instead, where it is not in the DOM at all.
+     * Asks for the render that follows a hydration, so the stop stops being every
+     * choice's.
      *
-     * Reading `selected` is unaffected and so is writing it: the attribute still
-     * seeds the property, which is what `<helix-toggle selected>` in a consumer's
-     * markup means. There is no write back.
+     * `tabindex` reads `childrenKnown` and a hydrating render is one where that is
+     * false, which is what keeps the hydrating render the server's. Nothing else
+     * would ask: the group writes an already-false `focusable` onto every choice
+     * but one, which changes nothing and so re-renders nothing.
      */
-    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {
@@ -109,3 +82,4 @@ declare global {
         'helix-headless-toggle': HelixHeadlessToggle;
     }
 }
+export {};

package/dist/toggle/root/toggle-root.js

@@ -4,16 +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, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinSelectableItem } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
+let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(HelixElement) {
     constructor() {
         super(...arguments);
-        this.disabled = false;
         this.focusable = false;
-        this.selected = false;
-        this.value = '';
     }
     get defaultSelected() {
         return this.hasAttribute('selected');
@@ -21,18 +18,9 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
     set defaultSelected(next) {
         this.toggleAttribute('selected', next);
     }
-    focusItem() {
-        this.partNamed('item')?.focus();
-    }
-    select() {
-        if (this.disabled) {
-            return;
-        }
-        this.dispatchEvent(new HelixSelectEvent({ value: this.value }));
-    }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        this.toggleState('selected', this.selected);
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
     }
     render() {
         return html `<button
@@ -41,25 +29,16 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends HelixElement {
       role="radio"
       aria-checked=${this.selected ? 'true' : 'false'}
       ?disabled=${this.disabled}
-      tabindex=${this.selected || this.focusable ? '0' : '-1'}
+      tabindex=${this.selected || this.focusable || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
     >
       <slot></slot>
     </button>`;
     }
 };
-__decorate([
-    property({ reflect: true, type: Boolean })
-], HelixHeadlessToggle.prototype, "disabled", void 0);
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessToggle.prototype, "focusable", void 0);
-__decorate([
-    property({ type: Boolean })
-], HelixHeadlessToggle.prototype, "selected", void 0);
-__decorate([
-    property()
-], HelixHeadlessToggle.prototype, "value", void 0);
 HelixHeadlessToggle = __decorate([
     customElement('helix-headless-toggle')
 ], HelixHeadlessToggle);

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

@@ -97,21 +97,22 @@ 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');
+        if (this.childrenKnown) {
+            this.branch = this.knownChildren.some((child) => child.slot === 'children');
         }
     }
     render() {
         const linked = this.href !== '';
         const level = this.level ?? 1;
+        const depth = this.level ?? nothing;
         const expanded = this.branch ? (this.open ? 'true' : 'false') : nothing;
-        const tabIndex = this.focusable ? '0' : '-1';
+        const tabIndex = this.focusable || !this.childrenKnown ? '0' : '-1';
         return html `<div
         part="item"
         role=${linked ? 'none' : 'treeitem'}
         aria-expanded=${linked ? nothing : expanded}
         aria-selected=${linked ? nothing : this.selected ? 'true' : 'false'}
-        aria-level=${linked ? nothing : level}
+        aria-level=${linked ? nothing : depth}
         tabindex=${linked ? nothing : tabIndex}
       >
         ${linked
@@ -123,7 +124,7 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
                 rel=${this.rel || nothing}
                 aria-expanded=${expanded}
                 aria-selected=${this.selected ? 'true' : 'false'}
-                aria-level=${level}
+                aria-level=${depth}
                 tabindex=${tabIndex}
                 style="--tree-level: ${level}"
                 @click=${this.handleRowClick}

package/dist/tree/root/tree-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 { closestInstance, customElement, HelixElement, inlineStep, MixinCollection, MixinControllerActive, scrollItemIntoView, } from '@fusion.dev/helix-core';
+import { closestInstance, customElement, HelixElement, inlineStep, MixinCollection, MixinControllerActive, scrollItemIntoView, whenHydrated, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTreeItem } from '../item/tree-item.js';
@@ -101,8 +101,8 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         const held = visible.find((item) => item.focusable);
         const stop = held ?? chosen;
         for (const item of this.items) {
-            item.selected = item.value !== '' && item.value === this.active;
-            item.focusable = item === stop;
+            const selected = item.value !== '' && item.value === this.active;
+            const focusable = item === stop;
             let level = 1;
             let parent = item.parentElement;
             while (parent && parent !== this) {
@@ -111,7 +111,11 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
                 }
                 parent = parent.parentElement;
             }
-            item.level = level;
+            whenHydrated(item, () => {
+                item.selected = selected;
+                item.focusable = focusable;
+                item.level = level;
+            });
         }
     }
     move(from, delta) {

package/dist/video/root/video-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, drawIcon, HelixElement, HelixNextEvent, HelixPreviousEvent, onUnlessFalse, } from '@fusion.dev/helix-core';
+import { customElement, drawIcon, HelixElement, HelixNextEvent, HelixPreviousEvent, onUnlessFalse, writtenList, } from '@fusion.dev/helix-core';
 import { airplay, arrowClockwise, arrowCounterClockwise, closedCaptioning, cornersIn, cornersOut, dotsThreeVertical, download, gauge, pause, pictureInPicture, play, skipBack, skipForward, speakerHigh, speakerX, } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -250,17 +250,11 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         return one === 'speed';
     }
     get extras() {
-        return this.extraControls
-            .split(/\s+/)
-            .filter(Boolean)
-            .filter((one) => this.offers(one));
+        return writtenList(this.extraControls).filter((one) => this.offers(one));
     }
     get overflow() {
         const onBar = new Set(this.extras);
-        return this.overflowControls
-            .split(/\s+/)
-            .filter(Boolean)
-            .filter((one) => !onBar.has(one) && this.offers(one));
+        return writtenList(this.overflowControls).filter((one) => !onBar.has(one) && this.offers(one));
     }
     get currentSrc() {
         return this.video?.currentSrc ?? '';
@@ -398,7 +392,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         });
     }
     claimSession() {
-        const skips = `${this.extraControls} ${this.overflowControls}`.split(/\s+/);
+        const skips = writtenList(`${this.extraControls} ${this.overflowControls}`);
         this.session.claim({ artwork: this.poster, title: this.label }, {
             next: skips.includes('next') ? () => this.skip(false) : null,
             previous: skips.includes('previous') ? () => this.skip(true) : null,
@@ -430,8 +424,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.dispatchEvent(back ? new HelixPreviousEvent() : new HelixNextEvent());
     }
     cycleSpeed() {
-        const speeds = this.speeds
-            .split(/\s+/)
+        const speeds = writtenList(this.speeds)
             .map(Number)
             .filter((one) => one > 0);
         const video = this.video;
@@ -456,9 +449,9 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        if (!this.mediaRead && this.children !== undefined && !this.hydrating) {
+        if (!this.mediaRead && this.childrenKnown) {
             this.mediaRead = true;
-            this.media = this.copiesOf([...this.children].filter((child) => child.slot === ''));
+            this.media = this.copiesOf(this.knownChildren.filter((child) => child.slot === ''));
         }
         if (changed.has('media')) {
             this.captions = captionsAmong(this.media);

package/package.json

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