@fusion.dev/helix-headless 0.53.0 → 0.53.2

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.
@@ -37,11 +37,11 @@ export declare class HelixHeadlessToggle extends HelixHeadlessToggle_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 `Radio`, `<helix-toggle value="light"
-     * 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
-     * already in the document when `customElements.define` ran.
+     * this element, on `Option` and on `Radio`, `<helix-headless-toggle
+     * value="light" 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 already in the document when `customElements.define` ran.
      *
      * Nothing overwrites it either, which is what makes reading it late correct
      * rather than merely later: `selected` does not reflect, for the reason
@@ -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/tooltip/root/tooltip-root.d.ts

@@ -21,8 +21,8 @@ declare const HelixHeadlessTooltip_base: (new (...args: any[]) => import("@fusio
  * the ordinary way:
  *
  * ```html
- * <helix-button id="save" aria-describedby="save-tip">Save</helix-button>
- * <helix-tooltip id="save-tip" for="save" content="Save your work"></helix-tooltip>
+ * <helix-headless-button id="save" aria-describedby="save-tip">Save</helix-headless-button>
+ * <helix-headless-tooltip id="save-tip" for="save" content="Save your work"></helix-headless-tooltip>
  * ```
  *
  * The reference points at *this host*, not at the bubble in its shadow root:

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

@@ -20,9 +20,9 @@ import '../../button/index.js';
  * - **When it shows.** Which is `current`, and which the root decides.
  *
  * What it does not own is the heading, the paragraph, the picture and the
- * layout. Slot a `helix-card`, or a heading and a line of prose, or anything
- * else. Fixed `title` and `body` parts would be a component deciding what a
- * tour is allowed to say.
+ * layout. Slot a `Card`, or a heading and a line of prose, or anything else.
+ * Fixed `title` and `body` parts would be a component deciding what a tour is
+ * allowed to say.
  *
  * **The buttons are slot fallback, so the common case costs nothing and the
  * uncommon one is possible.** Write nothing and get Back, Next and Skip already

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

@@ -186,8 +186,8 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * holds it instead, where it is not in the DOM at all.
      *
      * Reading `selected` is unaffected and so is writing it: the attribute still
-     * seeds the property, which is what `<helix-tree-item selected>` in a consumer's
-     * markup means. What stops is the write back.
+     * seeds the property, which is what `<helix-headless-tree-item selected>` in
+     * a consumer's markup means. What stops is the write back.
      */
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;

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.d.ts

@@ -74,14 +74,15 @@ export declare class HelixHeadlessTree extends HelixHeadlessTree_base {
     /**
      * Every item, in the order a reader moving down would meet them.
      *
-     * Selected by tag, never by `'*'` and a filter: this is the array a single
-     * arrow press rebuilds, and `'*'` makes it every descendant element in the
-     * tree, labels and icons and whatever a consumer slotted into a row included.
+     * **By identity rather than by tag**, which is the same reason Splitter
+     * writes out at `findOuter`: a tag list names one tier's element from the
+     * other's package, and misses any third tag, which is exactly what
+     * subclassing an item produces. The item then never enters the array a single
+     * arrow press rebuilds, so it is silently unreachable from the keyboard.
      *
-     * The two tag names rather than `instanceof` on everything: a styled
-     * `helix-tree-item` extends the base, so both names are needed, and the
-     * `instanceof` stays as the type guard because a consumer can write either
-     * tag and neither selector proves what the element is.
+     * `'*'` and a filter rather than a tag: the walk is one native pass and the
+     * `instanceof` is what narrows it, so the labels, icons and whatever a
+     * consumer slotted into a row are gone by the time the array exists.
      */
     private get items();
     /** Items a reader can actually reach: not inside a collapsed branch. */

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';
@@ -81,7 +81,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
         };
     }
     get items() {
-        return [...this.querySelectorAll('helix-tree-item, helix-headless-tree-item')].filter((node) => node instanceof HelixHeadlessTreeItem);
+        return [...this.querySelectorAll('*')].filter((node) => node instanceof HelixHeadlessTreeItem);
     }
     get visibleItems() {
         return this.items.filter((item) => {
@@ -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-playlist/menu/video-playlist-menu.d.ts

@@ -61,7 +61,13 @@ export declare class HelixHeadlessVideoPlaylistMenu extends HelixElement {
     private foundPlaylist;
     /** The playlist this menu belongs to, found upward through the slots. */
     private get playlist();
-    /** The playlist's entries, in the order it holds them. */
+    /**
+     * The playlist's entries, in the order it holds them.
+     *
+     * By identity rather than by tag, the same reason the playlist itself reads
+     * them that way: a tag list names one tier's element from the other's package
+     * and misses any third one.
+     */
     private get entries();
     /**
      * Watches the playlist for entries arriving, and re-reads it on every open.

package/dist/video-playlist/menu/video-playlist-menu.js

@@ -9,9 +9,9 @@ import { list } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
+import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
 import { HelixHeadlessVideoPlaylist } from '../root/video-playlist-root.js';
 import '../../menu/index.js';
-const ITEMS = 'helix-video-playlist-item, helix-headless-video-playlist-item';
 let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extends HelixElement {
     constructor() {
         super(...arguments);
@@ -39,7 +39,9 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
     }
     get entries() {
         const playlist = this.playlist;
-        return playlist ? [...playlist.querySelectorAll(ITEMS)] : [];
+        return playlist
+            ? [...playlist.querySelectorAll('*')].filter((one) => one instanceof HelixHeadlessVideoPlaylistItem)
+            : [];
     }
     watch() {
         this.foundPlaylist ??= closestInstance(this, HelixHeadlessVideoPlaylist) ?? undefined;

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

@@ -35,7 +35,7 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * @documentation https://fusion.dev/helix/components/video-playlist
  *
  * @slot - The entries.
- * @slot player - The `helix-video` they play in.
+ * @slot player - The player the entries take turns in.
  *
  * @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 current entry changes, and cancelable.
@@ -80,10 +80,10 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
     /**
      * The player, whichever tag the consumer slotted.
      *
-     * Asked of the slot rather than matched by tag name: the headless tier's
-     * player is `helix-headless-video` and the styled tier's is `helix-video`, and
-     * a consumer bringing a third under either name should still be driven. What
-     * is needed of it is `src`, which is the whole of the contract.
+     * Asked of the slot rather than matched by tag name: each tier registers its
+     * own player under its own name, and a consumer bringing a third should still
+     * be driven. What is needed of it is `src`, which is the whole of the
+     * contract.
      */
     private get player();
     /** Moves by one, and does nothing at either end. */

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, MixinControllerActive } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { HelixHeadlessVideoPlaylistItem } from '../item/video-playlist-item.js';
 let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinControllerActive(HelixElement) {
     constructor() {
         super(...arguments);
@@ -34,9 +35,7 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
         };
     }
     get items() {
-        return [
-            ...this.querySelectorAll('helix-video-playlist-item, helix-headless-video-playlist-item'),
-        ].filter((one) => one.value !== '');
+        return [...this.querySelectorAll('*')].filter((one) => one instanceof HelixHeadlessVideoPlaylistItem && one.value !== '');
     }
     get player() {
         const slot = this.renderRoot?.querySelector('slot[name="player"]');

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.2",
   "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.2",
+    "@fusion.dev/helix-icons": "0.53.2",
     "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.2",
+    "@fusion.dev/helix-testing": "0.53.2",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",