@fusion.dev/helix-headless 0.169.0 → 0.171.0

package/dist/steps/step/step.js

@@ -22,6 +22,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         this.invalid = false;
         this.locked = false;
         this.optional = false;
+        this.stop = true;
         this.value = '';
         this.holding = false;
         this.readContent = () => {
@@ -73,6 +74,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
       part="label"
       exportparts="button: label-button, live: label-live, spinner: label-spinner, text: label-text"
       emphasis="ghost"
+      .focusable=${this.stop}
       aria-current=${this.current ? 'step' : nothing}
       aria-describedby=${this.complete ? 'state' : nothing}
       ?disabled=${this.disabled || this.locked}
@@ -122,6 +124,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessStep.prototype, "optional", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessStep.prototype, "stop", void 0);
 __decorate([
     property()
 ], HelixHeadlessStep.prototype, "value", void 0);

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

@@ -11,6 +11,12 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  * captions, and poster treatment. `Sandbox` takes its preview and `Menu` its
  * trigger the same way.
  *
+ * **The player is a `Video` or a plain `<video>`.** Either takes `src` and
+ * `poster` from the entry, is named by it, plays on, and answers Shift with N
+ * or P while focused. A plain `<video>` has no previous and next controls
+ * that send `helix-previous` or `helix-next`, so its moves are the entries,
+ * the menu, and your own buttons calling `previous()` and `next()`.
+ *
  * **Entries are markup.** React skips properties it would set imperatively
  * during hydration, so an array property on a custom element is missing on the
  * first paint of a server-rendered page. `using-the-elements.mdx` has the
@@ -43,7 +49,8 @@ declare const HelixHeadlessVideoPlaylist_base: (new (...args: any[]) => import("
  *
  * **The player is named by the current entry**, and the device's own media
  * controls show the entry as the title. A player you gave a `label` keeps
- * your name, and only the title follows the entry.
+ * your name, and only the title follows the entry. A plain `<video>` is
+ * named through `aria-label`, unless you wrote one.
  *
  * **Keyboard.** The entries take one stop in the tab order: the entry you
  * last focused, or the current entry before you have focused one. Enter or
@@ -235,6 +242,17 @@ export declare class HelixHeadlessVideoPlaylist extends HelixHeadlessVideoPlayli
      * Before they focus one, the current entry holds it.
      */
     private stop;
+    /** The name this playlist last wrote on a plain media player, to tell it from yours. */
+    private wroteName;
+    /**
+     * Names the player by the entry.
+     *
+     * The consumer's own name for the player stands. Only a player named by
+     * nobody takes the entry's words as its name: `label` on a player that has
+     * one, and `aria-label` on a plain `<video>` or `<audio>`, which has none and
+     * was heard as an unnamed video.
+     */
+    private name;
     /** The entry the player was last pointed at. */
     private pointed;
     /** Hears entries arrive and leave, which change no property here. */

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

@@ -161,6 +161,19 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
     get items() {
         return [...this.querySelectorAll('*')].filter((one) => one instanceof HelixHeadlessVideoPlaylistItem && one.value !== '');
     }
+    name(player, text) {
+        if (player instanceof HTMLMediaElement) {
+            const own = player.getAttribute('aria-label');
+            if (own === null || own === this.wroteName) {
+                player.setAttribute('aria-label', text);
+                this.wroteName = text;
+            }
+            return;
+        }
+        if (!player.hasAttribute('label')) {
+            player.label = text;
+        }
+    }
     get player() {
         const slot = this.renderRoot?.querySelector('slot[name="player"]');
         return slot?.assignedElements()[0] ?? null;
@@ -299,9 +312,7 @@ let HelixHeadlessVideoPlaylist = class HelixHeadlessVideoPlaylist extends MixinC
             }
             player.poster = current.poster;
             player.mediaTitle = current.text;
-            if (!player.hasAttribute('label')) {
-                player.label = current.text;
-            }
+            this.name(player, current.text);
             if (this.chased) {
                 this.status.say(formatWords(this, 'playingLabel', { title: current.text }));
                 void player.updateComplete?.then(() => player.play()).catch(() => { });

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

@@ -119,6 +119,11 @@ export interface VirtualListRange {
  * commas. Their rows carry `aria-disabled`, the keys and typing pass over
  * them, and a press, Space, or Control with A does not select them.
  *
+ * **Rows a stylesheet can tell apart.** A chosen row carries `data-selected`,
+ * a disabled one `data-disabled`, as React Aria's rows do, and the row the
+ * keys are on, which holds the tab stop, `data-active`, whether or not the
+ * list has focus.
+ *
  * **Loading more.** `helix-range-change` fires as the items on screen change,
  * and `range` holds them. `helix-load-more` fires once a reader is within one
  * screen of the end, once for each length of the set: add to `items` and it can
@@ -560,6 +565,9 @@ export declare class HelixHeadlessVirtualList extends HelixElement {
      * `option` with `aria-selected` there, and `listitem` otherwise, and
      * `aria-disabled` on an item `disabled-keys` names. Every pass,
      * since a choice changes no row's content.
+     *
+     * `data-selected` and `data-disabled` say the same to a stylesheet, as
+     * React Aria's rows do, so one rule reads the same in either kind of list.
      */
     private mark;
     /** Writes a row's place in the set. */

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

@@ -532,18 +532,22 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
     }
     mark(element, at, chosen, off) {
         element.setAttribute('role', this.selectionMode ? 'option' : 'listitem');
+        const selected = Boolean(this.selectionMode) && chosen.has(this.keyAt(at));
         if (this.selectionMode) {
-            element.setAttribute('aria-selected', String(chosen.has(this.keyAt(at))));
+            element.setAttribute('aria-selected', String(selected));
         }
         else {
             element.removeAttribute('aria-selected');
         }
-        if (off.size > 0 && off.has(this.keyAt(at))) {
+        element.toggleAttribute('data-selected', selected);
+        const disabled = off.size > 0 && off.has(this.keyAt(at));
+        if (disabled) {
             element.setAttribute('aria-disabled', 'true');
         }
         else {
             element.removeAttribute('aria-disabled');
         }
+        element.toggleAttribute('data-disabled', disabled);
     }
     stamp(element, at) {
         element.setAttribute('aria-posinset', String(at + 1));
@@ -660,6 +664,7 @@ let HelixHeadlessVirtualList = class HelixHeadlessVirtualList extends HelixEleme
             }
             const stop = at === this.active;
             group[0]?.setAttribute('tabindex', stop ? '0' : '-1');
+            group[0]?.toggleAttribute('data-active', stop);
             if (stop && (fresh.has(at) || this.released !== at)) {
                 releaseControls(group);
             }