@fusion.dev/helix-headless 0.53.0 → 0.53.2

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

@@ -6,8 +6,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @description
  * **The component is the truncation.** Given a page and a total it works out
  * which numbers to show and where the runs break, so this is data-driven rather
- * than composed: `<helix-pagination page="4" pages="12">` rather than twelve
- * slotted children a consumer keeps in step with their own query.
+ * than composed: `<helix-headless-pagination page="4" pages="12">` rather than
+ * twelve slotted children a consumer keeps in step with their own query.
  *
  * **The width does not change as you page.** The run around the current page is
  * `siblings` either side, and grows to absorb a gap slot at a boundary, so the

package/dist/pin-input/root/pin-input-root.d.ts

@@ -110,10 +110,10 @@ export declare class HelixHeadlessPinInput extends HelixHeadlessPinInput_base {
      * marked letters wants `text`, which judges nothing.
      *
      * **Not reflected**: nothing selects on it, so reflecting only writes
-     * `type="numeric"` onto every `<helix-pin-input>` ever rendered, an attribute
-     * no consumer's markup had. The area rules carry the sentence "reflect only
-     * what CSS selects on". The real inputs take it as a binding, which is what
-     * makes the keyboard follow.
+     * `type="numeric"` onto every `<helix-headless-pin-input>` ever rendered, an
+     * attribute no consumer's markup had. The area rules carry the sentence
+     * "reflect only what CSS selects on". The real inputs take it as a binding,
+     * which is what makes the keyboard follow.
      */
     type: PinType;
     /** Focus is delegated, so the host is never the focus target. */

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

@@ -64,12 +64,13 @@ export declare class HelixHeadlessPopover extends HelixHeadlessPopover_base {
      * The invoker that last opened the panel, when a command did.
      *
      * Kept because the `source` a command hands the handlers is needed twice
-     * over. It is the anchor: the styled host is a boxless `display: contents`
-     * element, so a popover opened by a command outside it would otherwise open
-     * against the window origin. And the outside-press dismissal has to know the
-     * invoker is part of the control, the press firing on `pointerdown` and the
-     * command arriving on the `click` after it, or a `--toggle` button outside
-     * the host closes the panel and immediately reopens it, for ever.
+     * over. It is the anchor: the host is not a box to position against, a sheet
+     * being free to give it none, so a popover opened by a command outside it
+     * would otherwise open against the window origin. And the outside-press
+     * dismissal has to know the invoker is part of the control, the press firing
+     * on `pointerdown` and the command arriving on the `click` after it, or a
+     * `--toggle` button outside the host closes the panel and immediately reopens
+     * it, for ever.
      */
     private invoker;
     protected readonly commands: CommandController;

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.
@@ -54,7 +54,7 @@ export declare class HelixHeadlessRadio extends HelixHeadlessRadio_base {
      * **The attribute, read when it is asked for, and never a snapshot taken in
      * the constructor.** A field initializer runs there, and an element the HTML
      * parser created has none of its attributes yet at that moment: measured on
-     * this element, on `Option` and on `Toggle`, `<helix-radio value="a"
+     * this element, on `Option` and on `Toggle`, `<helix-headless-radio value="a"
      * selected>` reported `defaultSelected` as `false` both from parsed markup
      * and from `createElement` followed by `setAttribute`, which is every way a
      * consumer writes one. The snapshot could only ever be true for an element
@@ -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/speed-dial/root/speed-dial-root.d.ts

@@ -15,11 +15,10 @@ declare const HelixHeadlessSpeedDial_base: (new (...args: any[]) => import("@fus
  * mean defining what a dial with a submenu in it does.
  *
  * **The trigger is a control the consumer slots**, and the floating action
- * button is the usual one: `helix-icon-button` with `shape="circle"` and
- * `raised`. There is no `helix-fab`, because it would re-declare `emphasis`,
- * `tone`, `label` and a size around a control that already has all four. A
- * round raised button is a shape, and where it sits is `data-dock` in the base
- * layer.
+ * button is the usual one: `IconButton` with `shape="circle"` and `raised`.
+ * There is no `helix-fab`, because it would re-declare `emphasis`, `tone`,
+ * `label` and a size around a control that already has all four. A round raised
+ * button is a shape, and where it sits is `data-dock` in the base layer.
  *
  * **Nothing is reserved from the keyboard.** A menu that drills has to keep the
  * horizontal pair for going in and coming back; a dial goes nowhere, so all four
@@ -105,10 +104,10 @@ export declare class HelixHeadlessSpeedDial extends HelixHeadlessSpeedDial_base
      *
      * **This is the case the tier rule blocks and a render method unblocks.** A
      * bare `<button>` is what the headless tier can write: it must not reach for
-     * `helix-button`, which lives a tier above and would make `headless` depend
-     * on `styled`. So the base draws the plain control and a tier that has buttons
-     * of its own overrides this to use one. Written inline, the only way
-     * to change it would be to reimplement the template, panel and all.
+     * `Button`, which lives a tier above and would make `headless` depend on
+     * `styled`. So the base draws the plain control and a tier that has buttons
+     * of its own overrides this to use one. Written inline, the only way to
+     * change it would be to reimplement the template, panel and all.
      */
     protected renderTrigger(): TemplateResult;
     protected render(): TemplateResult;

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

@@ -35,9 +35,9 @@ export declare class HelixHeadlessStat extends HelixElement {
      * The row directions set them side by side, for a figure in a line of text or
      * a narrow strip where a stacked pair would be two lines of almost nothing.
      *
-     * A property rather than a `helix-flex` around it, because the unit has to
-     * stay on the value's baseline whichever way the pair goes, and only this
-     * element knows which of its children the unit belongs to.
+     * A property rather than a `Flex` around it, because the unit has to stay on
+     * the value's baseline whichever way the pair goes, and only this element
+     * knows which of its children the unit belongs to.
      *
      * **Optional rather than defaulted to `column`, which is not a style
      * preference.** A reflecting property with a default writes its attribute onto

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

@@ -22,7 +22,7 @@ declare const HelixHeadlessSteps_base: (new (...args: any[]) => import("@fusion.
  * @aliases Stepper, Wizard, Progress steps
  * @documentation https://fusion.dev/helix/components/steps
  *
- * @slot - The steps, which are `helix-step` elements.
+ * @slot - The steps.
  *
  * @event {HelixActivateEvent} helix-activate - Fired once the current one has moved, so the element already holds it.
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the active step changes. Cancelable: refusing it takes the decision and nothing moves.

package/dist/steps/step/step.d.ts

@@ -6,9 +6,9 @@ import '../../button/index.js';
  *
  * @description
  * **The name is a button, and only the name.** The marker is `aria-hidden`
- * decoration, so wrapping it would add hit area and no meaning. It is
- * `helix-button` rather than a `<button>` this element resets: the hover wash,
- * the focus ring and the disabled treatment are decisions the button carries.
+ * decoration, so wrapping it would add hit area and no meaning. It is `Button`
+ * rather than a `<button>` this element resets: the hover wash, the focus ring
+ * and the disabled treatment are decisions the button carries.
  *
  * **It says nothing about where a reader may go.** Every step is pressable and
  * announces itself with `helix-select`; refusing the ones ahead is `disabled`,
@@ -27,7 +27,7 @@ import '../../button/index.js';
  * @documentation https://fusion.dev/helix/components/steps
  *
  * @slot - The step's name.
- * @slot content - What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with; the styled tier opens it on the current step down a column, and a row has no space under a step to open it into.
+ * @slot content - What the stage holds. Always rendered here, a tier with no stylesheet having nothing to fold it with, so whether it is folded away is the sheet's answer and not this tier's.
  * @slot description - A line under the name, for what the stage is for.
  * @slot marker - Replaces the number, or the check a complete step shows.
  *
@@ -36,7 +36,7 @@ import '../../button/index.js';
  * @csspart body - The name and its description.
  * @csspart content - What the stage holds, while it is open.
  * @csspart description - The line under it.
- * @csspart label - The step's name, which is a `helix-button`.
+ * @csspart label - The step's name, which is a control.
  * @csspart label-button - The inner control.
  * @csspart lead - The half line arriving from the step before.
  * @csspart mark - The glyph inside the marker: a tick, a dot, or an empty ring.

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/table/column/table-column.d.ts

@@ -25,9 +25,9 @@ export declare const at: (row: Readonly<Record<string, unknown>>, path: string)
  *
  * **`align` is a string anybody can write**, the union on the property being a
  * compile-time claim and nothing else, and both tables put the value straight
- * into CSS: `helix-table` into a rule in each row's shadow root, `helix-data-table`
- * into the cell it draws. One guard, here with the property, rather than one in
- * each table and only one of them written.
+ * into CSS: `Table` into a rule in each row's shadow root, `DataTable` into the
+ * cell it draws. One guard, here with the property, rather than one in each
+ * table and only one of them written.
  */
 export declare const edgeOf: (align: string | undefined) => string | undefined;
 /**
@@ -38,23 +38,23 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
  * the table has another track; remove one and it does not. That is what ties
  * the two together, and a table-level track list on its own does not: a list
  * that is accidentally the headings is invalid CSS a grid ignores in silence,
- * drawing the whole table as one column. `helix-table`'s `columns` is dealt out
- * a track at a time against the columns declared under it, so a heading among
- * the widths costs its own column a width and no more, and a list longer or
- * shorter than the columns is trimmed or shared rather than being a second
- * count of them. A column's own `width` wins over the track in its place.
+ * drawing the whole table as one column. `Table`'s `columns` is dealt out a
+ * track at a time against the columns declared under it, so a heading among the
+ * widths costs its own column a width and no more, and a list longer or shorter
+ * than the columns is trimmed or shared rather than being a second count of
+ * them. A column's own `width` wins over the track in its place.
  *
  * **It is also where every per-column fact goes**, which is the reason
- * `helix-data-table` needs no column config object. `field` names the key the
- * cell reads, `sortable` says a reader may reorder by it, `align` says which
- * edge the values line up against, and `cell` takes a function for anything the
+ * `DataTable` needs no column config object. `field` names the key the cell
+ * reads, `sortable` says a reader may reorder by it, `align` says which edge
+ * the values line up against, and `cell` takes a function for anything the
  * field alone cannot express. The schema is markup and the data is a property:
  * a schema is small, declarative, and something a reader should be able to see
  * in the HTML, and data is large and windowed.
  *
  * **The same element serves both tables**, the markup one and the data one. It
- * is identified by a flag rather than by `instanceof`, so a `helix-table-column`
- * works inside either without the two roots sharing anything else.
+ * is identified by a flag rather than by `instanceof`, so a `TableColumn` works
+ * inside either without the two roots sharing anything else.
  *
  * **It generates no box of its own**, the same as a row: the heading is a grid
  * item of the table, so it lines up with the cells under it rather than sitting
@@ -64,10 +64,10 @@ export declare const edgeOf: (align: string | undefined) => string | undefined;
  * both, so the columns after it keep their own widths and every row keeps its
  * cells under their headings. `hidden="until-found"` keeps its track, the
  * heading being left drawn, as every Helix element leaves one with that value.
- * `helix-data-table` draws the cells, so it leaves out the ones under a hidden
- * column. A `helix-table`'s cells are markup the consumer wrote, so hide them
- * with the column, as removing a column means removing its cells: a row with a
- * cell more than the table has tracks wraps into the next.
+ * `DataTable` draws the cells, so it leaves out the ones under a hidden column.
+ * A `Table`'s cells are markup the consumer wrote, so hide them with the
+ * column, as removing a column means removing its cells: a row with a cell more
+ * than the table has tracks wraps into the next.
  *
  * **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
@@ -99,15 +99,15 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
     /**
      * Which edge the values line up against.
      *
-     * `end` is what a column of numbers wants, so digits of the same magnitude sit
-     * above each other. Left unset the cell inherits the table's own alignment,
-     * which is `start` for text in either writing direction. `helix-data-table`
-     * aligns the cells it draws. A `helix-table`'s cells are markup the consumer
-     * wrote, so the table writes nothing onto them: it publishes the edge to each
-     * cell under this column as `--table-cell-align`, which `@fusion.dev/helix`
-     * reads. The heading is this element's own, and `@fusion.dev/helix` sets it to
-     * the same edge in either table. `end` is the inline end, so in a
-     * right-to-left table it is the left.
+     * `end` is what a column of numbers wants, so digits of the same magnitude
+     * sit above each other. Left unset the cell inherits the table's own
+     * alignment, which is `start` for text in either writing direction.
+     * `DataTable` aligns the cells it draws. A `Table`'s cells are markup the
+     * consumer wrote, so the table writes nothing onto them: it publishes the
+     * edge to each cell under this column as `--table-cell-align`, which
+     * `@fusion.dev/helix` reads. The heading is this element's own, and
+     * `@fusion.dev/helix` sets it to the same edge in either table. `end` is the
+     * inline end, so in a right-to-left table it is the left.
      *
      * **Reflected, because the heading is drawn by a stylesheet and has no other
      * way to learn it.** Set as a property, which is how React sets it, an
@@ -181,8 +181,8 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * The track this column takes, as CSS.
      *
      * A single track value, so anything valid in `grid-template-columns` works:
-     * `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track
-     * in its place in a `helix-table`'s `columns`, where that table sets one, and
+     * `16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in
+     * its place in a `Table`'s `columns`, where that table sets one, and
      * otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
      * Set here, it wins over that list, which is what lets a reader resize a
      * column in a table that set one.

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

@@ -34,21 +34,20 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart loading - Shown while the rows are still on their way.
  * @csspart table - The grid.
  *
- * @cssproperty --table-template - The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `--table-columns` is the one to set.
+ * @cssproperty --table-template - The column track list this element worked out from the columns declared in it. Written by the component, read by the sheet that paints: a stylesheet takes it to lay the grid out, and setting it does nothing, because the component writes it inline on the very element that reads it and an inline declaration beats any sheet. `columns` is the one to set.
  */
 export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     /**
      * The column widths as one track list, written once on the table.
      *
-     * With `helix-table-column` children, each track sizes the column in its
-     * place, a hidden column counted, so hiding one takes its track with it and
-     * the rest keep theirs. The columns decide how many tracks there are and this
-     * list only how wide: a track past the last column is dropped, and a column
-     * past the last track shares what is left. With no columns declared it is
-     * the whole track list. Tracks count as the grid counts them, so
-     * `minmax(0, 1fr)` is one and `repeat(2, 8rem)` is two, and one the grid
-     * would refuse leaves its column at the default rather than taking the table
-     * down to one column.
+     * With `TableColumn` children, each track sizes the column in its place, a
+     * hidden column counted, so hiding one takes its track with it and the rest
+     * keep theirs. The columns decide how many tracks there are and this list
+     * only how wide: a track past the last column is dropped, and a column past
+     * the last track shares what is left. With no columns declared it is the
+     * whole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`
+     * is one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves
+     * its column at the default rather than taking the table down to one column.
      *
      * **A column's own `width` wins over its track here.** The width is written
      * on the column it sizes, which is the more particular statement, and it is
@@ -62,13 +61,11 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * whole answer: a table given one lays its grid out in the first paint, and a
      * table sized only by its columns is one track wide until it upgrades.
      *
-     * **`helix-data-table` has none of this, and should not.** Its columns are
-     * its schema rather than an option, so there is always a column to write a
-     * `width` on and a list here would be a second way to say what that says.
-     * This table's cells are markup, and a table written as rows of cells with no
-     * `helix-table-column` in it has nowhere else to be sized from. Both families
-     * take the same CSS hook, `--table-columns` and `--data-table-columns`, which
-     * wins over whichever list the element worked out.
+     * **Data Table has none of this, and should not.** Its columns are its schema
+     * rather than an option, so there is always a column to write a `width` on
+     * and a list here would be a second way to say what that says. This table's
+     * cells are markup, and a table written as rows of cells with no column
+     * declared in it has nowhere else to be sized from.
      */
     columns: string;
     /**

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

@@ -4,10 +4,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @summary One row of a table.
  *
  * @description
- * `display: contents` in the styled tier, so the row's cells become items of
- * the table's own grid and every column lines up across every row. The row
- * still exists as an element, which is what a `<table>` gives away when its
- * cells are laid out by the table algorithm.
+ * The row renders its cells straight through and lays out none of them, so a
+ * sheet can take them into the table's own grid and every column lines up
+ * across every row. The row still exists as an element, which is what a
+ * `<table>` gives away when its cells are laid out by the table algorithm.
  *
  * @since 0.1.0
  * @status stable

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

@@ -52,8 +52,8 @@ export declare class HelixHeadlessTabPanel extends HelixElement {
      * a choice nobody made. `ElementInternals` holds it instead.
      *
      * The attribute still seeds the property, which is what
-     * `<helix-tab-panel selected>` in a consumer's markup means. Only the write
-     * back is gone.
+     * `<helix-headless-tab-panel selected>` in a consumer's markup means. Only
+     * the write back is gone.
      */
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;

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/time-input/root/time-input-root.d.ts

@@ -8,10 +8,10 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @summary A time, typed or picked from a list.
  *
  * @description
- * **The list is `helix-time-picker`, not a second one written here.** It is worth
+ * **The list is `TimePicker`, not a second one written here.** It is worth
  * having on its own, flat in a settings pane with nothing to open, and this
  * element is the field, the overlay and the form. Exactly the arrangement Input
- * Date has with `helix-date-picker` and Color Input with `helix-color-picker`.
+ * Date has with `DatePicker` and Color Input with `ColorPicker`.
  *
  * **Typed as well as picked, and that is the division the list depends on.** A
  * list at a step offers the times a product actually has, and the field is how a
@@ -120,8 +120,8 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      *
      * Absent is one. `range` holds a start and an end, `multiple` holds any
      * number, and both are carried as one comma-separated value, which is what a
-     * form submits. `helix-time-picker` carries the longer note on the interaction and on
-     * why a wheel cannot do either.
+     * form submits. `TimePicker` carries the longer note on the interaction and
+     * on why a wheel cannot do either.
      */
     mode?: 'multiple' | 'range';
     /**
@@ -185,7 +185,7 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * `list` offers whole times, which is what a product with slots or opening
      * hours has. `wheels` splits them into an hour, a minute and a meridiem where
      * the locale uses one, which is the only way to reach `23:45` without
-     * scrolling most of a day. `helix-time-picker` carries the longer note on the trade.
+     * scrolling most of a day. `TimePicker` carries the longer note on the trade.
      *
      * **Optional rather than defaulted, which is not a style preference.** A
      * reflecting property with a default writes its attribute onto every host the
@@ -218,14 +218,14 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * Slot fallback, so a consumer replaces it by slotting; and a method, so the
      * tier above replaces it by overriding.
      *
-     * **A named import rather than `<helix-icon>`**, on three counts.
-     * `helix-icon` indexes the whole icon map at runtime, `icons[this.name]`, and
-     * no bundler can shake a runtime lookup, so every consumer of any component
-     * that renders one ships all 50kB of path data; a named import ships one
-     * path. The import is checked when the package compiles, where a `name`
-     * string is checked only by a later name lookup. And `helix-icon` is not
-     * registered on the headless tier at all, which registers `helix-headless-icon`,
-     * so a headless consumer gets an inert unknown element and no mark whatsoever.
+     * **A named import rather than `<helix-headless-icon>`**, on three counts.
+     * `Icon` indexes the whole icon map at runtime, `icons[this.name]`, and no
+     * bundler can shake a runtime lookup, so every consumer of any component that
+     * renders one ships all 50kB of path data; a named import ships one path. The
+     * import is checked when the package compiles, where a `name` string is
+     * checked only by a later name lookup. And `Icon` is not registered on the
+     * headless tier at all, which registers `helix-headless-icon`, so a headless
+     * consumer gets an inert unknown element and no mark whatsoever.
      */
     protected renderTrigger(): TemplateResult;
     protected render(): TemplateResult;

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

@@ -25,8 +25,8 @@ declare const HelixHeadlessTimePicker_base: (new (...args: any[]) => import("@fu
  *
  * @description
  * **A list rather than three wheels**, and the reason is what a list already
- * is. `helix-listbox` brings the keyboard, the typeahead, the scroll into view
- * and the announcement of a set of options, and a time at a step is a set of
+ * is. `Listbox` brings the keyboard, the typeahead, the scroll into view and
+ * the announcement of a set of options, and a time at a step is a set of
  * options. Three little wheels for hours, minutes and a meridiem are three
  * controls to build, three to test, and a tab stop each for something a reader
  * answers once.
@@ -145,7 +145,7 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
      *
      * Absent is one. `range` holds a start and an end with everything between
      * them shown as part of the answer, `multiple` holds any number, and both are
-     * carried as one comma-separated value: the same shape `helix-date-picker` uses,
+     * carried as one comma-separated value: the same shape `DatePicker` uses,
      * because it is the same question asked of a different unit.
      *
      * **A range is two picks, and a third starts over.** That is the calendar's
@@ -335,11 +335,11 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     /**
      * Reveals once the wheels, or the list and its rows, have rendered themselves.
      *
-     * `updated` is this element's own moment, and each wheel is a `helix-listbox`
-     * that was created during this very render: its first update has been
-     * scheduled and has not run, so it has no rows and no height and `reveal`
-     * measures zero and gives up. Measured on a standalone picker, every column
-     * sat at `scrollTop: 0` with the answer nine rows down, which reads as a wheel
+     * `updated` is this element's own moment, and each wheel is a `Listbox` that
+     * was created during this very render: its first update has been scheduled
+     * and has not run, so it has no rows and no height and `reveal` measures zero
+     * and gives up. Measured on a standalone picker, every column sat at
+     * `scrollTop: 0` with the answer nine rows down, which reads as a wheel
      * showing the wrong time rather than as one that failed to scroll.
      *
      * Whatever opens a panel calls `reveal` again afterwards, for the separate

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

@@ -34,7 +34,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Toaster, Snackbar
  * @documentation https://fusion.dev/helix/components/toast
  *
- * @slot - The messages, as `helix-toast-item` elements.
+ * @slot - The messages.
  *
  * @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.
  *
@@ -55,7 +55,7 @@ export declare class HelixHeadlessToast extends HelixElement {
      * **Optional, and bottom-end is the absence of it.** Reflecting *and*
      * defaulting is the pair that writes onto a host: every toast region anybody
      * rendered would gain a `placement="bottom-end"` nobody typed, which a React
-     * consumer's server markup does not have. The styled sheet carries the resting
+     * consumer's server markup does not have. A sheet carries the resting
      * arrangement in its own `:host` rule and the selectors describe only the
      * departures, which is what `orientation` does.
      */