@fusion.dev/helix-headless 0.53.0 → 0.53.1

package/custom-elements.json

@@ -20811,6 +20811,16 @@
               "description": "The chosen options themselves, for their words.\n\nRead off the options rather than stored, because the words are the\nconsumer's content and a copy of them goes stale the moment they change it.\nSelect records the same.\n\nIn the value's own order, which is the order they were chosen. It has to\nbe: a created answer is not in the list at all, so there is no position in\nthe list to give it. Neither order ever reshuffles what is already there,\nso a tag does not move out from under the pointer about to remove it.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "unresolved",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Whether a value is declared and this render cannot say what it is.\n\n**A placeholder is a statement, so a render that cannot read the words does\nnot make it.** `value` is an attribute and a server has it; the words are\nthe options' and the options are light-DOM children a server has none of.\nThe field then came out empty with \"Search owners\" over it, which says\nnothing is chosen where the consumer had already said what is. Blank, it\nsays nothing, keeps its box, and is filled in by the render after\nhydration, which is the answer `Select.Root.display` reaches for in the same\nposition and for the same reason.\n\nThe placeholder still stands where there is genuinely no value, which is\nwhat it is for and the one case a server can be sure of.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "showing",
@@ -25430,12 +25440,22 @@
               },
               "privacy": "protected",
               "readonly": true,
-              "description": "Emptiness is a fact about the data here, not about slotted children.\n\n**The page rather than the window**, which is the difference between the two\ncounts `view` carries and the reason this reads `available`. A windowed\ntable draws a slice, and a slice can be short of the rows that are there:\nasking whether *this* slice has rows says \"nothing matched\" about a result\nthat matched plenty.\n\nThe mixin's own answer counts children with no `slot`, which for this\nelement is the columns. Left in place, a table with columns and no data\nwould call itself full.",
+              "description": "Emptiness is a fact about the data here, not about slotted children.\n\n**The page rather than the window**, which is the difference between the two\ncounts `view` carries and the reason this reads `available`. A windowed\ntable draws a slice, and a slice can be short of the rows that are there:\nasking whether *this* slice has rows says \"nothing matched\" about a result\nthat matched plenty.\n\nThe mixin's own answer counts children with no `slot`, which for this\nelement is the columns. Left in place, a table with columns and no data\nwould call itself full.\n\n**`sourceKnown` is the half the mixin was keeping**, and overriding without\nit is what put \"Nothing to show\" over eight rows of files on every server\nrender of this family's own preview. `MixinCollection.hasRows` answers true\nuntil the rows have been counted for exactly that reason, and a count is\nwhat this replaced.",
               "inheritedFrom": {
                 "name": "MixinCollection",
                 "module": "src/mixins/mixin-collection/mixin-collection.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "sourceKnown",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Whether this render can tell a result with no rows from one not yet handed\nover.\n\n**Unknown is not empty, which is what an empty state must never say.** The\nrows are a property, and a property is set by whoever holds the element: a\nconsumer binding it in a template has it on the server, and a consumer\nassigning it from a script has it only once that script has run, which is\nafter the parse a server's markup ends at. A render that cannot see a\ndocument cannot tell the two apart, and a hydrating render must not look,\nits output having to be the server's.\n\nThe same shape as `Heatmap.sourceKnown`, asked of a property rather than of\na document, and `childrenKnown` is already both halves of the question: a\nserver has no tree and a hydrating render may not read one.",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "requestSort",
@@ -75607,10 +75627,10 @@
               "kind": "field",
               "name": "display",
               "type": {
-                "text": "string"
+                "text": "string | typeof nothing"
               },
               "privacy": "private",
-              "description": "What the trigger says: the chosen options' words, or the placeholder.\n\nRead off the options rather than stored, because the words are the\nconsumer's content and storing a copy is storing something that goes stale\nthe moment they change it.\n\n**Off this element's own children, not the listbox's**, which reach the\nlistbox through a slot and so only after a render has made it: read there,\nthe first render showed the placeholder over a chosen value and waited on a\n`slotchange`, which a declarative shadow root fires before anything listens,\nso a hydrated select kept \"Choose\" for good. Nothing on a server or while\nhydrating what one sent, which drew the placeholder too.",
+              "description": "What the trigger says: the chosen options' words, or the placeholder.\n\nRead off the options rather than stored, because the words are the\nconsumer's content and storing a copy is storing something that goes stale\nthe moment they change it.\n\n**Off this element's own children, not the listbox's**, which reach the\nlistbox through a slot and so only after a render has made it: read there,\nthe first render showed the placeholder over a chosen value and waited on a\n`slotchange`, which a declarative shadow root fires before anything listens,\nso a hydrated select kept \"Choose\" for good. Nothing on a server or while\nhydrating what one sent, which drew the placeholder too.\n\n**And the placeholder is a statement, so a render that cannot read the\nwords does not make it.** \"Choose\" means nothing is chosen. `value` is an\nattribute and a server has it, the words are the children's and a server\nhas none, so a `<helix-select default-value=\"two\">` served \"Choose\" over an\nanswer the consumer had already given: false to a reader, and false to a\ncrawler, on every select in the library's own examples. Where a value is\ndeclared and the word for it cannot be read, the trigger says nothing and\nkeeps its box, which is the answer this library reaches for everywhere it\ncannot tell empty from unknown. `firstUpdated` asks for the render that\nfills it in.\n\nThe placeholder still stands where there is genuinely no value, which is\nwhat it is for and the one case a server can be sure of.\n\n**`nothing` and never `''`, which is the difference between a word that\narrives and one that never does.** Lit's hydration primes a child part with\nwhatever the render computed, and `''` is a primitive, so `_commitText`\ntakes the branch that assumes the server left a text node to overwrite.\nThere is none, the write lands on the closing part marker's comment data,\nand the trigger stays empty for the life of the page: measured by\n`check:spec:dsd`, which caught all nine of these and showed a blank select\nbeside a client's \"Option Two\". `nothing` primes the sentinel instead, so\nthe commit creates the text node it needs.",
               "readonly": true
             },
             {

package/dist/checkbox/root/checkbox-root.js

@@ -61,7 +61,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         <input
           part="control"
           type="checkbox"
-          .checked=${this.checked}
+          .checked=${this.checked || nothing}
           .indeterminate=${this.indeterminate}
           ?disabled=${this.isDisabled}
           ?required=${this.required}

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

@@ -208,6 +208,22 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      * so a tag does not move out from under the pointer about to remove it.
      */
     private get chosen();
+    /**
+     * Whether a value is declared and this render cannot say what it is.
+     *
+     * **A placeholder is a statement, so a render that cannot read the words does
+     * not make it.** `value` is an attribute and a server has it; the words are
+     * the options' and the options are light-DOM children a server has none of.
+     * The field then came out empty with "Search owners" over it, which says
+     * nothing is chosen where the consumer had already said what is. Blank, it
+     * says nothing, keeps its box, and is filled in by the render after
+     * hydration, which is the answer `Select.Root.display` reaches for in the same
+     * position and for the same reason.
+     *
+     * The placeholder still stands where there is genuinely no value, which is
+     * what it is for and the one case a server can be sure of.
+     */
+    private get unresolved();
     /**
      * Whether the filter has left anything to choose.
      *

package/dist/combobox/root/combobox-root.js

@@ -147,6 +147,9 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             .filter((value) => known || words.has(value))
             .map((value) => ({ text: words.get(value) ?? value, value }));
     }
+    get unresolved() {
+        return this.values.length > 0 && !this.childrenKnown;
+    }
     get showing() {
         return (this.listbox?.options ?? []).some((option) => !option.hidden);
     }
@@ -304,7 +307,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
           aria-autocomplete=${this.suggest ? 'both' : 'list'}
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-describedby=${this.describedBy ?? nothing}
-          placeholder=${(this.chosen.length > 0 ? '' : this.placeholder) || nothing}
+          placeholder=${(this.chosen.length > 0 || this.unresolved ? '' : this.placeholder) || nothing}
           ?disabled=${this.isDisabled}
           .value=${this.multiple || this.open ? this.suggestion || this.typed : this.word}
           @input=${this.handleInput}

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

@@ -473,8 +473,31 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * The mixin's own answer counts children with no `slot`, which for this
      * element is the columns. Left in place, a table with columns and no data
      * would call itself full.
+     *
+     * **`sourceKnown` is the half the mixin was keeping**, and overriding without
+     * it is what put "Nothing to show" over eight rows of files on every server
+     * render of this family's own preview. `MixinCollection.hasRows` answers true
+     * until the rows have been counted for exactly that reason, and a count is
+     * what this replaced.
      */
     protected get hasRows(): boolean;
+    /**
+     * Whether this render can tell a result with no rows from one not yet handed
+     * over.
+     *
+     * **Unknown is not empty, which is what an empty state must never say.** The
+     * rows are a property, and a property is set by whoever holds the element: a
+     * consumer binding it in a template has it on the server, and a consumer
+     * assigning it from a script has it only once that script has run, which is
+     * after the parse a server's markup ends at. A render that cannot see a
+     * document cannot tell the two apart, and a hydrating render must not look,
+     * its output having to be the server's.
+     *
+     * The same shape as `Heatmap.sourceKnown`, asked of a property rather than of
+     * a document, and `childrenKnown` is already both halves of the question: a
+     * server has no tree and a hydrating render may not read one.
+     */
+    private get sourceKnown();
     /**
      * Asks for a different order, and reports whether the request stood.
      *

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

@@ -353,7 +353,10 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         })).length;
     }
     get hasRows() {
-        return this.view.available > 0;
+        return this.view.available > 0 || !this.sourceKnown;
+    }
+    get sourceKnown() {
+        return this.childrenKnown;
     }
     requestSort(next) {
         return requestChange({
@@ -618,12 +621,14 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         const template = this.template;
         const columns = this.shownColumns;
         const pagination = this.tag('pagination');
+        const counted = this.mode === 'server' ? Math.max(this.total, available) : matched;
+        const countKnown = counted > 0 || this.sourceKnown;
         return html `<div part="toolbar"><slot name="toolbar"></slot></div>
       <div
         part="table"
         role="rowgroup"
         aria-busy=${this.loading ? 'true' : nothing}
-        aria-rowcount=${this.mode === 'server' ? Math.max(this.total, available) + 1 : matched + 1}
+        aria-rowcount=${countKnown ? counted + 1 : nothing}
         aria-colcount=${columns.length ? columns.length + (this.selectable ? 1 : 0) : nothing}
         style=${template ? `--data-table-template: ${template}` : nothing}
         @scroll=${this.handleScroll}
@@ -648,7 +653,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
                 status: pagination-status"
               page=${this.page}
               page-size=${this.pageSize || 1}
-              total=${matched}
+              total=${countKnown ? matched : nothing}
               @helix-navigate=${this.handleNavigate}
             ></${pagination}>`
             : nothing}

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
  * @summary One choice in a radio group.
@@ -89,6 +89,16 @@ export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
      * same reason.
      */
     focusable: boolean;
+    /**
+     * Asks for the render that follows a hydration, so the stop stops being every
+     * choice's.
+     *
+     * `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 firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/radio/root/radio-root.js

@@ -18,6 +18,10 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
     set defaultSelected(next) {
         this.toggleAttribute('selected', next);
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     render() {
         return html `<button
       part="item"
@@ -25,7 +29,7 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
       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()}
     >
       <span part="box"><span part="mark" aria-hidden="true"></span></span>

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

@@ -134,6 +134,30 @@ export declare class HelixHeadlessSelect extends HelixHeadlessSelect_base {
      * `slotchange`, which a declarative shadow root fires before anything listens,
      * so a hydrated select kept "Choose" for good. Nothing on a server or while
      * hydrating what one sent, which drew the placeholder too.
+     *
+     * **And the placeholder is a statement, so a render that cannot read the
+     * words does not make it.** "Choose" means nothing is chosen. `value` is an
+     * attribute and a server has it, the words are the children's and a server
+     * has none, so a `<helix-select default-value="two">` served "Choose" over an
+     * answer the consumer had already given: false to a reader, and false to a
+     * crawler, on every select in the library's own examples. Where a value is
+     * declared and the word for it cannot be read, the trigger says nothing and
+     * keeps its box, which is the answer this library reaches for everywhere it
+     * cannot tell empty from unknown. `firstUpdated` asks for the render that
+     * fills it in.
+     *
+     * The placeholder still stands where there is genuinely no value, which is
+     * what it is for and the one case a server can be sure of.
+     *
+     * **`nothing` and never `''`, which is the difference between a word that
+     * arrives and one that never does.** Lit's hydration primes a child part with
+     * whatever the render computed, and `''` is a primitive, so `_commitText`
+     * takes the branch that assumes the server left a text node to overwrite.
+     * There is none, the write lands on the closing part marker's comment data,
+     * and the trigger stays empty for the life of the page: measured by
+     * `check:spec:dsd`, which caught all nine of these and showed a blank select
+     * beside a client's "Option Two". `nothing` primes the sentinel instead, so
+     * the commit creates the text node it needs.
      */
     private get display();
     /** Closes the list and puts focus back where it came from. */

package/dist/select/root/select-root.js

@@ -74,7 +74,10 @@ let HelixHeadlessSelect = class HelixHeadlessSelect extends MixinControllerOpen(
         const words = optionsAmong(this.knownChildren)
             .filter((option) => chosen.has(option.value))
             .map((option) => option.text);
-        return words.length > 0 ? words.join(', ') : this.placeholder;
+        if (words.length > 0) {
+            return words.join(', ');
+        }
+        return chosen.size > 0 && !this.childrenKnown ? nothing : this.placeholder;
     }
     close() {
         if (!this.open) {

package/dist/switch/root/switch-root.js

@@ -47,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,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+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.
@@ -27,6 +27,16 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  */
 export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
     protected itemPart: string;
+    /**
+     * Asks for the render that follows a hydration, so the stop stops being every
+     * tab's.
+     *
+     * `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 firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/tabs/tab/tab.js

@@ -11,6 +11,10 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixE
         super(...arguments);
         this.itemPart = 'tab';
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     render() {
         return html `<button
       part="tab"
@@ -18,7 +22,7 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixE
       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>

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+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.
@@ -65,6 +65,16 @@ export declare class HelixHeadlessToggle extends HelixHeadlessToggle_base {
      * hydration reports and does not patch up.
      */
     focusable: boolean;
+    /**
+     * Asks for the render that follows a hydration, so the stop stops being every
+     * choice's.
+     *
+     * `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 firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -18,6 +18,10 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
     set defaultSelected(next) {
         this.toggleAttribute('selected', next);
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     render() {
         return html `<button
       part="item"
@@ -25,7 +29,7 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
       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>

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

@@ -104,14 +104,15 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     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/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.53.0",
+  "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.53.0",
-    "@fusion.dev/helix-icons": "0.53.0",
+    "@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.53.0",
-    "@fusion.dev/helix-testing": "0.53.0",
+    "@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",