@fusion.dev/helix-headless 0.22.0 → 0.24.0

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

@@ -85,6 +85,8 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * assignment has not happened.
      */
     static shadowRootOptions: ShadowRootInit;
+    /** The rows: every child that is not a column, which is what the body slot is assigned. */
+    protected get slotted(): Element[];
     private assign;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;

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

@@ -17,7 +17,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         };
     }
     get tableColumns() {
-        return [...(this.children ?? [])].filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
+        return this.knownChildren.filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
     }
     get template() {
         const declared = this.tableColumns;
@@ -30,15 +30,24 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         ...HelixElement.shadowRootOptions,
         slotAssignment: 'manual',
     }; }
+    get slotted() {
+        const columns = new Set(this.tableColumns);
+        return [...(this.children ?? [])].filter((child) => !columns.has(child));
+    }
     assign() {
+        if (this.assignsByName) {
+            for (const column of this.tableColumns) {
+                this.route(column, 'columns');
+            }
+            return;
+        }
         const head = this.renderRoot?.querySelector('slot[name="columns"]');
         const body = this.renderRoot?.querySelector('slot:not([name])');
         if (!head || !body) {
             return;
         }
-        const columns = new Set(this.tableColumns);
         head.assign(...this.tableColumns);
-        body.assign(...[...this.children].filter((child) => !columns.has(child)));
+        body.assign(...this.slotted);
     }
     updated(changed) {
         super.updated(changed);

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

@@ -195,6 +195,15 @@ export declare class HelixHeadlessTimePicker extends HelixHeadlessTimePicker_bas
     private halfBarred;
     /** The times held, which is a list whether or not a mode is set. */
     private get held();
+    /**
+     * The list's own `input`, stopped at the boundary.
+     *
+     * It is composed, so it crosses out of this shadow root on its own, and this
+     * element announces the time itself: a page listening here heard two `input`s
+     * for one choice, the second from the list inside, after the `change` that
+     * should have been the last word. Found running the events example.
+     */
+    private readonly handleListInput;
     /**
      * Takes what the list announced and constrains it to what the mode allows.
      *

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

@@ -46,6 +46,9 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
         this.min = '00:00';
         this.readOnly = false;
         this.required = false;
+        this.handleListInput = (event) => {
+            event.stopPropagation();
+        };
         this.handleChange = (event) => {
             event.stopPropagation();
             if (this.isDisabled) {
@@ -225,6 +228,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
             event.stopPropagation();
             this.moveColumn(part, event.detail.value);
         }}
+      @input=${this.handleListInput}
     >
       ${values.map((one) => html `<${this.tag('option')} part="option"
           exportparts="description: option-description, item: option-item, label: option-label, text: option-text" value=${one} ?disabled=${barred(one)}
@@ -259,6 +263,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinControl
       ?multiple=${this.mode !== undefined}
       .value=${this.value}
       @helix-before-change=${this.handleChange}
+      @input=${this.handleListInput}
     >
       ${this.times.map((minutes) => {
             const at = fromMinutes(minutes);

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

@@ -36,6 +36,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The messages, as `helix-toast-item` elements.
  *
+ * @event {HelixDismissEvent} helix-dismiss - A message asking to go, by its control or by its timer, dispatched by the message and heard here because the stack is what a consumer holds. Cancelable: refusing it takes the decision and the message stays.
+ *
  * @csspart region - The stack the messages are in.
  */
 export declare class HelixHeadlessToast extends HelixElement {

package/dist/tooltip/root/tooltip-root.js

@@ -48,7 +48,7 @@ let HelixHeadlessTooltip = class HelixHeadlessTooltip extends MixinControllerOpe
             this.timer = setTimeout(() => this.release(), this.delayOut);
         };
         this.showNow = (event) => {
-            const focused = event.target;
+            const focused = event.composedPath()[0] ?? event.target;
             if (focused instanceof Element && !focused.matches(':focus-visible')) {
                 return;
             }

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

@@ -31,6 +31,7 @@ import type { HelixHeadlessTourStop } from '../stop/tour-stop.js';
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the reader leaves early. Cancelable: refusing it takes the decision and nothing moves.
  * @event {HelixCompleteEvent} helix-complete - Fired when the last stop is
  * finished.
+ * @event {HelixTourAskEvent} helix-tour-ask - A stop's own controls asking the tour to move, dispatched by the stop and heard here because the tour is what moves.
  * @event {Event} toggle - Says the state moved, carrying `newState` and `oldState`.
  *
  * @csspart spotlight - The box over the current target, which paints the scrim.

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

@@ -14,9 +14,9 @@ declare const HelixHeadlessTreeItem_base: (new (...args: any[]) => import("@fusi
  * An element rather than a slot, because it owns state: whether it is open,
  * selected, and whether it holds focus.
  *
- * A branch is any item with something slotted into `children`, detected in
- * `firstUpdated` because the server cannot inspect children. The server renders
- * the node as a leaf and the twisty appears on hydration, which is the harmless
+ * A branch is any item with something slotted into `children`, detected on the
+ * client because the server cannot inspect children. The server renders the
+ * node as a leaf and the twisty appears on hydration, which is the harmless
  * direction.
  *
  * **`href` makes the row itself the link.** With the anchor slotted into the
@@ -100,7 +100,10 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
     /**
      * Whether anything is slotted into `children`.
      *
-     * Read after first render.
+     * Read from the children before each render, so the first one draws the
+     * twisty, and from the slot, which is what hears a child arrive later. Not on
+     * the server, where `children` is undefined, nor while hydrating what one
+     * sent.
      */
     private branch;
     protected firstUpdated(changed: PropertyValues): void;

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

@@ -40,8 +40,8 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
+        this.finishHydration();
         const slot = this.renderRoot.querySelector('slot[name="children"]');
-        this.branch = (slot?.assignedElements().length ?? 0) > 0;
         slot?.addEventListener('slotchange', () => {
             this.branch = slot.assignedElements().length > 0;
         });
@@ -97,6 +97,9 @@ let HelixHeadlessTreeItem = class HelixHeadlessTreeItem extends MixinControllerO
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
+        if (this.children !== undefined && !this.hydrating) {
+            this.branch = [...this.children].some((child) => child.slot === 'children');
+        }
     }
     render() {
         const linked = this.href !== '';

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

@@ -460,14 +460,23 @@ export declare class HelixHeadlessVideo extends HelixElement {
     private takeScrub;
     /** The volume rail's new level, stopped for the reason `takeScrub` carries. */
     private takeVolume;
+    /** Whether the first set of copies has been read from the children. */
+    private mediaRead;
     /**
-     * Rebuilds the copies from whatever the consumer has slotted.
+     * The copies to make of what the default slot is given.
      *
      * The attribute list is explicit rather than a blind copy of every attribute:
      * these are two elements with a known and small surface, and copying anything
      * a consumer happened to put on one would carry their framework's own markers
      * into a shadow root that has no use for them.
      */
+    private copiesOf;
+    /**
+     * Rebuilds the copies when what is slotted changes after the first read.
+     *
+     * The same set again is not a change. A video reloads for every new list, and
+     * the first `slotchange` reports the children this element already read.
+     */
     private readonly handleMedia;
     private readonly handleLoaded;
     private readonly handleTime;
@@ -632,6 +641,19 @@ export declare class HelixHeadlessVideo extends HelixElement {
     private readonly handleRemoteState;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /** The caption tracks among the copies, named as the menu names them. */
+    private captions;
+    /**
+     * Finds the caption tracks among the copies, before the render that draws
+     * them.
+     *
+     * By the platform's own reading of `kind`, which is what makes a `<track>` a
+     * caption at all: missing is `subtitles` and anything it does not know is
+     * `metadata`. Read from the video's tracks after the render instead, the count
+     * arrived a render late and asked for one more. Choosing one still goes
+     * through the video's tracks, which hold them in the same order.
+     */
+    protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     /**
      * Mirrors playback onto the host as `data-playing`.

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

@@ -64,24 +64,12 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.remoteAvailable = false;
         this.remoteConnected = false;
         this.media = [];
+        this.mediaRead = false;
         this.handleMedia = (event) => {
-            const assigned = event.target.assignedElements();
-            this.media = assigned
-                .filter((node) => node instanceof HTMLSourceElement || node instanceof HTMLTrackElement)
-                .map((node) => {
-                const tag = node instanceof HTMLTrackElement ? 'track' : 'source';
-                const names = tag === 'track'
-                    ? ['default', 'kind', 'label', 'src', 'srclang']
-                    : ['media', 'sizes', 'src', 'srcset', 'type'];
-                const attrs = {};
-                for (const name of names) {
-                    const value = node.getAttribute(name);
-                    if (value !== null) {
-                        attrs[name] = value;
-                    }
-                }
-                return { attrs, tag };
-            });
+            const next = this.copiesOf(event.target.assignedElements());
+            if (JSON.stringify(next) !== JSON.stringify(this.media)) {
+                this.media = next;
+            }
         };
         this.handleLoaded = () => {
             const video = this.video;
@@ -92,7 +80,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             if (video.videoWidth > 0 && video.videoHeight > 0) {
                 this.style.setProperty('--video-intrinsic-ratio', `${video.videoWidth} / ${video.videoHeight}`);
             }
-            this.captionCount = this.captionTracks.length;
             const track = video.textTracks[0];
             if (track) {
                 if (track.mode === 'showing') {
@@ -229,6 +216,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.handleRemoteState = () => {
             this.remoteConnected = this.video?.remote?.state === 'connected';
         };
+        this.captions = [];
     }
     get localFile() {
         if (this.src === '') {
@@ -395,6 +383,24 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         video.volume = Number(event.target.value);
         video.muted = false;
     }
+    copiesOf(elements) {
+        return elements
+            .filter((node) => node instanceof HTMLSourceElement || node instanceof HTMLTrackElement)
+            .map((node) => {
+            const tag = node instanceof HTMLTrackElement ? 'track' : 'source';
+            const names = tag === 'track'
+                ? ['default', 'kind', 'label', 'src', 'srclang']
+                : ['media', 'sizes', 'src', 'srcset', 'type'];
+            const attrs = {};
+            for (const name of names) {
+                const value = node.getAttribute(name);
+                if (value !== null) {
+                    attrs[name] = value;
+                }
+            }
+            return { attrs, tag };
+        });
+    }
     claimSession() {
         if (typeof navigator === 'undefined' || !navigator.mediaSession) {
             return;
@@ -533,8 +539,24 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             }
         }
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (!this.mediaRead && this.children !== undefined && !this.hydrating) {
+            this.mediaRead = true;
+            this.media = this.copiesOf([...this.children].filter((child) => child.slot === ''));
+        }
+        if (changed.has('media')) {
+            this.captions = this.media
+                .filter((one) => one.tag === 'track' &&
+                (one.attrs.kind === undefined ||
+                    ['captions', 'subtitles'].includes(one.attrs.kind.toLowerCase())))
+                .map((one) => ({ label: one.attrs.label ?? '', language: one.attrs.srclang ?? '' }));
+            this.captionCount = this.captions.length;
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
+        this.finishHydration();
         const video = this.video;
         if (video) {
             this.silent = video.muted;
@@ -549,9 +571,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         this.toggleAttribute('data-playing', this.playing);
         this.toggleAttribute('data-idle', this.idle && this.playing);
         if (changed.has('media')) {
-            const video = this.video;
-            video?.load();
-            this.captionCount = this.captionTracks.length;
+            this.video?.load();
         }
     }
     renderExtra(one) {
@@ -639,7 +659,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     </button>`;
     }
     renderCaptions() {
-        const tracks = this.captionTracks;
+        const tracks = this.captions;
         if (this.captionCount === 0) {
             return nothing;
         }

package/dist/virtual-list/root/virtual-list-root.d.ts

@@ -61,6 +61,8 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * Empty on a server, which has nothing to read.
      */
     private rows;
+    /** The `for` that `rows` came from, so it is read again only when that changes. */
+    private readFor;
     private readonly virtualize;
     /**
      * The rows in the tree, each with the item it drew.
@@ -73,14 +75,16 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      */
     private drawn;
     /**
-     * Reads the source named by `for`, once the document exists to read.
+     * Reads the source named by `for`, before the render that draws it.
      *
-     * `firstUpdated` rather than `connectedCallback`, per the server rules: the
-     * shim has attributes and no tree, so `getElementById` is undefined there.
-     * A source that is missing or not an array leaves the list empty rather than
-     * throwing, because a consumer whose data has not arrived yet is the ordinary
-     * case and an empty list says so by itself.
+     * Not on the server, per the server rules: the shim has attributes and no
+     * tree, so `getElementById` is undefined there. Nor while hydrating what a
+     * server sent, which it drew with nothing read. A source that is missing or
+     * not an array leaves the list empty rather than throwing, because a consumer
+     * whose data has not arrived yet is the ordinary case and an empty list says
+     * so by itself.
      */
+    protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     private read;

package/dist/virtual-list/root/virtual-list-root.js

@@ -29,15 +29,21 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             index: Number(element.dataset.index),
         }));
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.readFor !== this.for &&
+            typeof this.ownerDocument?.getElementById === 'function' &&
+            !this.hydrating) {
+            this.readFor = this.for;
+            this.read();
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
-        this.read();
+        this.finishHydration();
     }
     updated(changed) {
         super.updated?.(changed);
-        if (changed.has('for')) {
-            this.read();
-        }
         this.virtualize.measure();
         this.place();
     }

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.22.0",
+  "version": "0.24.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -45,14 +45,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.22.0",
-    "@fusion.dev/helix-icons": "0.22.0",
+    "@fusion.dev/helix-core": "0.24.0",
+    "@fusion.dev/helix-icons": "0.24.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.22.0",
-    "@fusion.dev/helix-testing": "0.22.0",
+    "@fusion.dev/helix-cem": "0.24.0",
+    "@fusion.dev/helix-testing": "0.24.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",