@fusion.dev/helix-headless 0.103.3 → 0.104.1

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

@@ -54,6 +54,7 @@ import '../../menu/index.js';
  * @csspart captions-menu-back-mark - The glyph on the back control of a submenu.
  * @csspart captions-menu-empty - Shown when there are no items to show.
  * @csspart captions-menu-header - The bar above a submenu, holding the way back and its name.
+ * @csspart captions-menu-live - The inner menu's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart captions-menu-loading - Shown while the items are still on their way.
  * @csspart captions-menu-surface - The floating panel the menu is drawn on.
  * @csspart captions-menu-title - The name of the submenu that is showing.
@@ -68,6 +69,7 @@ import '../../menu/index.js';
  * @csspart forward - The control that goes on ten seconds.
  * @csspart fullscreen - The whole screen, and back.
  * @csspart header - The region top left, for a heading and a way out of a set.
+ * @csspart live - What the loading line says, in a region a screen reader hears when it changes. Visually hidden in the styled tier.
  * @csspart loading - What is said while the picture waits for more of itself.
  * The part of that which spins is drawn on it, which is `::part(loading)::before`
  * from a consumer's sheet: this tier ships no CSS, so a box it renders for one to
@@ -81,6 +83,7 @@ import '../../menu/index.js';
  * @csspart overflow-back-mark - The glyph on the back control of a submenu.
  * @csspart overflow-empty - Shown when there are no items to show.
  * @csspart overflow-header - The bar above a submenu, holding the way back and its name.
+ * @csspart overflow-live - The inner menu's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart overflow-loading - Shown while the items are still on their way.
  * @csspart overflow-surface - The floating panel the menu is drawn on.
  * @csspart overflow-title - The name of the submenu that is showing.
@@ -115,6 +118,18 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * start control, which is the correct thing to be looking at.
      */
     autoplay: boolean;
+    /**
+     * What the captions control is called where the video has one track, which it switches on and off.
+     *
+     * **Every word this player speaks is a property**, so a page in another
+     * language hears its own: the play, pause, loading and error labels were,
+     * and the rest of the bar read out in English beside them.
+     */
+    captionsLabel: string;
+    /**
+     * The row that turns captions off, where the video has several tracks to choose from.
+     */
+    captionsOffLabel: string;
     /**
      * Whether the browser draws the controls instead of this element.
      *
@@ -146,6 +161,10 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * Whether the browser may offer playback on a remote device.
      */
     disableRemotePlayback: boolean;
+    /**
+     * What the control that saves the file is called.
+     */
+    downloadLabel: string;
     /**
      * And what they are told when it will not play at all.
      */
@@ -182,6 +201,18 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * and not something a player can work around.
      */
     extraControls: string;
+    /**
+     * What the control that skips ahead is called, with `{seconds}` filled in.
+     */
+    forwardLabel: string;
+    /**
+     * What the control that fills the screen is called.
+     *
+     * **One name, pressed or not**, since the button says which with
+     * `aria-pressed`: a name that changed as well read out "Exit fullscreen,
+     * pressed", which is two answers to one question.
+     */
+    fullscreenLabel: string;
     /**
      * How long the bar waits after the pointer stops before it goes, in ms.
      *
@@ -206,6 +237,18 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * Whether it starts again at the end.
      */
     loop: boolean;
+    /**
+     * What the button that opens `overflow-controls` is called.
+     */
+    moreLabel: string;
+    /**
+     * What the control that silences the video is called, pressed while it is silent.
+     */
+    muteLabel: string;
+    /**
+     * What the control that asks for the next video is called.
+     */
+    nextLabel: string;
     /**
      * Controls that go behind one button instead of onto the bar, named the same
      * way.
@@ -228,6 +271,14 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * And while it would stop it.
      */
     pauseLabel: string;
+    /**
+     * How the volume is read out, with `{percent}` filled in.
+     */
+    percentLabel: string;
+    /**
+     * What the control that floats the video over other windows is called.
+     */
+    pipLabel: string;
     /**
      * What the play control is called while it would start the video.
      */
@@ -244,6 +295,26 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * How much to fetch before anything is asked for.
      */
     preload: 'auto' | 'metadata' | 'none';
+    /**
+     * What the control that asks for the previous video is called.
+     */
+    previousLabel: string;
+    /**
+     * What the control that casts the video to another device is called.
+     */
+    remoteLabel: string;
+    /**
+     * What the control that skips back is called, with `{seconds}` filled in.
+     */
+    rewindLabel: string;
+    /**
+     * What the scrubber is called.
+     */
+    seekLabel: string;
+    /**
+     * What the control that changes the speed is called.
+     */
+    speedLabel: string;
     /**
      * The speeds offered, slowest first, as multipliers of normal.
      */
@@ -270,6 +341,19 @@ export declare class HelixHeadlessVideo extends HelixElement {
      * negation.
      */
     startControl?: 'none';
+    /**
+     * What the menu of tracks is called, where the video has several.
+     */
+    subtitlesLabel: string;
+    /**
+     * How the scrubber reads out where the video is, with `{position}` and
+     * `{duration}` filled in.
+     */
+    timeLabel: string;
+    /**
+     * What the volume slider is called.
+     */
+    volumeLabel: string;
     /**
      * Whether playback has stopped to wait for data.
      *

package/dist/video/root/video-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 { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, SKIP_SECONDS, sameCopies, showCaption, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { activeCue, adoptTrack, CueController, captionsAmong, captionTracks, copiesOf, customElement, drawIcon, FullscreenController, fillTemplate, HelixElement, HelixNextEvent, HelixPreviousEvent, IdleController, MediaSessionController, onUnlessFalse, RemotePlaybackController, SKIP_SECONDS, sameCopies, showCaption, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
 import { airplay, arrowClockwise, arrowCounterClockwise, closedCaptioning, cornersIn, cornersOut, dotsThreeVertical, download, gauge, pause, pictureInPicture, play, skipBack, skipForward, speakerHigh, speakerX, } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -29,25 +29,43 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     constructor() {
         super(...arguments);
         this.autoplay = false;
+        this.captionsLabel = 'Captions';
+        this.captionsOffLabel = 'Off';
         this.controls = false;
         this.crossOrigin = null;
         this.defaultMuted = false;
         this.disablePictureInPicture = false;
         this.disableRemotePlayback = false;
+        this.downloadLabel = 'Download';
         this.errorLabel = 'This video could not be played';
         this.extraControls = '';
+        this.forwardLabel = 'Forward {seconds} seconds';
+        this.fullscreenLabel = 'Fullscreen';
         this.idleDelay = 2500;
         this.label = '';
         this.loadingLabel = 'Loading';
         this.loop = false;
+        this.moreLabel = 'More controls';
+        this.muteLabel = 'Mute';
+        this.nextLabel = 'Next';
         this.overflowControls = '';
         this.pauseLabel = 'Pause';
+        this.percentLabel = '{percent} percent';
+        this.pipLabel = 'Picture in picture';
         this.playLabel = 'Play';
         this.playsInline = true;
         this.poster = '';
         this.preload = 'metadata';
+        this.previousLabel = 'Previous';
+        this.remoteLabel = 'Play on another device';
+        this.rewindLabel = 'Back {seconds} seconds';
+        this.seekLabel = 'Seek';
+        this.speedLabel = 'Playback speed';
         this.speeds = '0.5 1 1.5 2';
         this.src = '';
+        this.subtitlesLabel = 'Subtitles';
+        this.timeLabel = '{position} of {duration}';
+        this.volumeLabel = 'Volume';
         this.buffering = false;
         this.failed = false;
         this.playing = false;
@@ -400,7 +418,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="remote${this.remoteConnected ? ' remote-pressed' : ''}"
         type="button"
-        aria-label="Play on another device"
+        aria-label=${this.remoteLabel}
         aria-pressed=${this.remoteConnected ? 'true' : 'false'}
         @click=${() => void this.remote.prompt()}
       >
@@ -411,7 +429,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="rewind"
         type="button"
-        aria-label=${`Back ${SKIP_SECONDS} seconds`}
+        aria-label=${fillTemplate(this.rewindLabel, { seconds: SKIP_SECONDS })}
         @click=${() => this.skipBy(-SKIP_SECONDS)}
       >
         ${drawIcon(arrowCounterClockwise)}
@@ -421,7 +439,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="forward"
         type="button"
-        aria-label=${`Forward ${SKIP_SECONDS} seconds`}
+        aria-label=${fillTemplate(this.forwardLabel, { seconds: SKIP_SECONDS })}
         @click=${() => this.skipBy(SKIP_SECONDS)}
       >
         ${drawIcon(arrowClockwise)}
@@ -431,7 +449,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="speed"
         type="button"
-        aria-label="Playback speed"
+        aria-label=${this.speedLabel}
         @click=${() => this.cycleSpeed()}
       >
         ${this.rate}x
@@ -441,7 +459,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="previous"
         type="button"
-        aria-label="Previous"
+        aria-label=${this.previousLabel}
         @click=${() => this.skip(true)}
       >
         ${drawIcon(skipBack)}
@@ -451,7 +469,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="next"
         type="button"
-        aria-label="Next"
+        aria-label=${this.nextLabel}
         @click=${() => this.skip(false)}
       >
         ${drawIcon(skipForward)}
@@ -465,7 +483,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         href=${this.src}
         target=${local ? nothing : '_blank'}
         rel=${local ? nothing : 'noreferrer'}
-        aria-label="Download"
+        aria-label=${this.downloadLabel}
       >
         ${drawIcon(download)}
       </a>`;
@@ -473,7 +491,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         return html `<button
       part="pip"
       type="button"
-      aria-label="Picture in picture"
+      aria-label=${this.pipLabel}
       @click=${() => void this.togglePip()}
     >
       ${drawIcon(pictureInPicture)}
@@ -488,7 +506,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             return html `<button
         part="captions"
         type="button"
-        aria-label="Captions"
+        aria-label=${this.captionsLabel}
         aria-pressed=${this.captioned ? 'true' : 'false'}
         @click=${() => this.toggleCaptions()}
       >
@@ -497,26 +515,28 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         }
         return html `<${this.tag('menu')} part="captions-menu"
     exportparts="back: captions-menu-back, back-mark: captions-menu-back-mark, empty: captions-menu-empty,
-      header: captions-menu-header, loading: captions-menu-loading, surface: captions-menu-surface,
-      title: captions-menu-title" label="Subtitles" placement="top-end">
-      <button part="captions" slot="trigger" type="button" aria-label="Subtitles">
+      header: captions-menu-header, live: captions-menu-live, loading: captions-menu-loading, surface: captions-menu-surface,
+      title: captions-menu-title" label=${this.subtitlesLabel} placement="top-end">
+      <button part="captions" slot="trigger" type="button" aria-label=${this.subtitlesLabel}>
         ${drawIcon(closedCaptioning)}
       </button>
       <${this.tag('menu-item')}
         part="entry"
       exportparts="item: entry-item, mark: entry-mark, start: entry-start"
         value="off"
-        aria-checked=${this.captionIndex < 0 ? 'true' : 'false'}
-        role="menuitemradio"
+        checkable
+        exclusive
+        ?checked=${this.captionIndex < 0}
         @helix-select=${() => this.showCaption(-1)}
       >
-        Off
+        ${this.captionsOffLabel}
       </${this.tag('menu-item')}>
       ${tracks.map((track, at) => html `<${this.tag('menu-item')} part="entry"
         exportparts="item: entry-item, mark: entry-mark, start: entry-start"
           value=${track.language || String(at)}
-          aria-checked=${this.captionIndex === at ? 'true' : 'false'}
-          role="menuitemradio"
+          checkable
+          exclusive
+          ?checked=${this.captionIndex === at}
           @helix-select=${() => this.showCaption(at)}
         >
           ${track.label || track.language}
@@ -531,14 +551,14 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         @helix-select=${() => void this.remote.prompt()}
       >
         ${drawIcon(airplay, { slot: 'start' })}
-        Play on another device
+        ${this.remoteLabel}
       </${this.tag('menu-item')}>`;
         }
         if (one === 'speed') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="item: entry-item, mark: entry-mark, start: entry-start" value="speed" @helix-select=${() => this.cycleSpeed()}>
         ${drawIcon(gauge, { slot: 'start' })}
-        Playback speed: ${this.rate}x
+        ${this.speedLabel}: ${this.rate}x
       </${this.tag('menu-item')}>`;
         }
         if (one === 'rewind' || one === 'forward') {
@@ -549,21 +569,21 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         @helix-select=${() => this.skipBy(back ? -SKIP_SECONDS : SKIP_SECONDS)}
       >
         ${drawIcon(back ? arrowCounterClockwise : arrowClockwise, { slot: 'start' })}
-        ${back ? `Back ${SKIP_SECONDS} seconds` : `Forward ${SKIP_SECONDS} seconds`}
+        ${fillTemplate(back ? this.rewindLabel : this.forwardLabel, { seconds: SKIP_SECONDS })}
       </${this.tag('menu-item')}>`;
         }
         if (one === 'previous') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="item: entry-item, mark: entry-mark, start: entry-start" value="previous" @helix-select=${() => this.skip(true)}>
         ${drawIcon(skipBack, { slot: 'start' })}
-        Previous
+        ${this.previousLabel}
       </${this.tag('menu-item')}>`;
         }
         if (one === 'next') {
             return html `<${this.tag('menu-item')} part="entry"
       exportparts="item: entry-item, mark: entry-mark, start: entry-start" value="next" @helix-select=${() => this.skip(false)}>
         ${drawIcon(skipForward, { slot: 'start' })}
-        Next
+        ${this.nextLabel}
       </${this.tag('menu-item')}>`;
         }
         if (one === 'download') {
@@ -577,13 +597,13 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         value="download"
       >
         ${drawIcon(download, { slot: 'start' })}
-        Download
+        ${this.downloadLabel}
       </${this.tag('menu-item')}>`;
         }
         return html `<${this.tag('menu-item')} part="entry"
     exportparts="item: entry-item, mark: entry-mark, start: entry-start" value="pip" @helix-select=${() => void this.togglePip()}>
       ${drawIcon(pictureInPicture, { slot: 'start' })}
-      Picture in picture
+      ${this.pipLabel}
     </${this.tag('menu-item')}>`;
     }
     renderBar() {
@@ -612,8 +632,11 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         max=${Number.isFinite(this.knownDuration) && this.knownDuration > 0 ? this.knownDuration : 0}
         step="0.01"
         .value=${String(this.position)}
-        aria-label="Seek"
-        aria-valuetext=${`${clock(this.position)} of ${clock(this.knownDuration)}`}
+        aria-label=${this.seekLabel}
+        aria-valuetext=${fillTemplate(this.timeLabel, {
+            duration: clock(this.knownDuration),
+            position: clock(this.position),
+        })}
         style=${`--video-progress: ${done}`}
         @input=${this.takeScrub}
       />
@@ -621,7 +644,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       <button
         part="mute"
         type="button"
-        aria-label=${this.silent ? 'Unmute' : 'Mute'}
+        aria-label=${this.muteLabel}
         aria-pressed=${this.silent ? 'true' : 'false'}
         @click=${() => {
             const video = this.video;
@@ -639,8 +662,10 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
         max="1"
         step="0.05"
         .value=${String(this.silent ? 0 : this.loudness)}
-        aria-label="Volume"
-        aria-valuetext=${`${Math.round((this.silent ? 0 : this.loudness) * 100)} percent`}
+        aria-label=${this.volumeLabel}
+        aria-valuetext=${fillTemplate(this.percentLabel, {
+            percent: Math.round((this.silent ? 0 : this.loudness) * 100),
+        })}
         style=${`--video-level: ${this.silent ? 0 : this.loudness}`}
         @input=${this.takeVolume}
       />
@@ -651,9 +676,9 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
             ? nothing
             : html `<${this.tag('menu')} part="overflow"
           exportparts="back: overflow-back, back-mark: overflow-back-mark, empty: overflow-empty,
-            header: overflow-header, loading: overflow-loading, surface: overflow-surface,
-            title: overflow-title" label="More controls" placement="top-end">
-              <button part="more" slot="trigger" type="button" aria-label="More controls">
+            header: overflow-header, live: overflow-live, loading: overflow-loading, surface: overflow-surface,
+            title: overflow-title" label=${this.moreLabel} placement="top-end">
+              <button part="more" slot="trigger" type="button" aria-label=${this.moreLabel}>
                 ${drawIcon(dotsThreeVertical)}
               </button>
               ${this.overflow.map((one) => this.renderOverflowItem(one))}
@@ -663,7 +688,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       <button
         part="fullscreen"
         type="button"
-        aria-label=${this.full ? 'Exit fullscreen' : 'Fullscreen'}
+        aria-label=${this.fullscreenLabel}
         aria-pressed=${this.full ? 'true' : 'false'}
         @click=${() => void this.fullscreen.toggle()}
       >
@@ -737,14 +762,10 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
       <div part="header"><slot name="header"></slot></div>
       <slot name="poster" part="poster"></slot>
       ${this.buffering && !this.failed
-            ? html `<div
-              part="loading"
-              role="status"
-              aria-live="polite"
-            >
-              ${this.loadingLabel}
-            </div>`
+            ? html `<div part="loading">${this.loadingLabel}</div>`
             : nothing}
+      ${''}
+      <span part="live" role="status">${this.buffering && !this.failed ? this.loadingLabel : ''}</span>
       ${this.failed
             ? html `<div
               part="failure"
@@ -774,6 +795,12 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "autoplay", void 0);
+__decorate([
+    property({ attribute: 'captions-label' })
+], HelixHeadlessVideo.prototype, "captionsLabel", void 0);
+__decorate([
+    property({ attribute: 'captions-off-label' })
+], HelixHeadlessVideo.prototype, "captionsOffLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "controls", void 0);
@@ -789,12 +816,21 @@ __decorate([
 __decorate([
     property({ attribute: 'disableremoteplayback', reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "disableRemotePlayback", void 0);
+__decorate([
+    property({ attribute: 'download-label' })
+], HelixHeadlessVideo.prototype, "downloadLabel", void 0);
 __decorate([
     property({ attribute: 'error-label' })
 ], HelixHeadlessVideo.prototype, "errorLabel", void 0);
 __decorate([
     property({ attribute: 'extra-controls' })
 ], HelixHeadlessVideo.prototype, "extraControls", void 0);
+__decorate([
+    property({ attribute: 'forward-label' })
+], HelixHeadlessVideo.prototype, "forwardLabel", void 0);
+__decorate([
+    property({ attribute: 'fullscreen-label' })
+], HelixHeadlessVideo.prototype, "fullscreenLabel", void 0);
 __decorate([
     property({ attribute: 'idle-delay', type: Number })
 ], HelixHeadlessVideo.prototype, "idleDelay", void 0);
@@ -807,12 +843,27 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessVideo.prototype, "loop", void 0);
+__decorate([
+    property({ attribute: 'more-label' })
+], HelixHeadlessVideo.prototype, "moreLabel", void 0);
+__decorate([
+    property({ attribute: 'mute-label' })
+], HelixHeadlessVideo.prototype, "muteLabel", void 0);
+__decorate([
+    property({ attribute: 'next-label' })
+], HelixHeadlessVideo.prototype, "nextLabel", void 0);
 __decorate([
     property({ attribute: 'overflow-controls' })
 ], HelixHeadlessVideo.prototype, "overflowControls", void 0);
 __decorate([
     property({ attribute: 'pause-label' })
 ], HelixHeadlessVideo.prototype, "pauseLabel", void 0);
+__decorate([
+    property({ attribute: 'percent-label' })
+], HelixHeadlessVideo.prototype, "percentLabel", void 0);
+__decorate([
+    property({ attribute: 'pip-label' })
+], HelixHeadlessVideo.prototype, "pipLabel", void 0);
 __decorate([
     property({ attribute: 'play-label' })
 ], HelixHeadlessVideo.prototype, "playLabel", void 0);
@@ -825,6 +876,21 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessVideo.prototype, "preload", void 0);
+__decorate([
+    property({ attribute: 'previous-label' })
+], HelixHeadlessVideo.prototype, "previousLabel", void 0);
+__decorate([
+    property({ attribute: 'remote-label' })
+], HelixHeadlessVideo.prototype, "remoteLabel", void 0);
+__decorate([
+    property({ attribute: 'rewind-label' })
+], HelixHeadlessVideo.prototype, "rewindLabel", void 0);
+__decorate([
+    property({ attribute: 'seek-label' })
+], HelixHeadlessVideo.prototype, "seekLabel", void 0);
+__decorate([
+    property({ attribute: 'speed-label' })
+], HelixHeadlessVideo.prototype, "speedLabel", void 0);
 __decorate([
     property({ attribute: 'speeds' })
 ], HelixHeadlessVideo.prototype, "speeds", void 0);
@@ -834,6 +900,15 @@ __decorate([
 __decorate([
     property({ attribute: 'start-control' })
 ], HelixHeadlessVideo.prototype, "startControl", void 0);
+__decorate([
+    property({ attribute: 'subtitles-label' })
+], HelixHeadlessVideo.prototype, "subtitlesLabel", void 0);
+__decorate([
+    property({ attribute: 'time-label' })
+], HelixHeadlessVideo.prototype, "timeLabel", void 0);
+__decorate([
+    property({ attribute: 'volume-label' })
+], HelixHeadlessVideo.prototype, "volumeLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessVideo.prototype, "buffering", void 0);

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

@@ -34,6 +34,7 @@ import '../../menu/index.js';
  * @csspart menu-back-mark - The glyph on the back control of a submenu.
  * @csspart menu-empty - Shown when there are no items to show.
  * @csspart menu-header - The bar above a submenu, holding the way back and its name.
+ * @csspart menu-live - The inner menu's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart menu-loading - Shown while the items are still on their way.
  * @csspart menu-surface - The floating panel the menu is drawn on.
  * @csspart menu-title - The name of the submenu that is showing.

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

@@ -61,7 +61,7 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
         const active = this.playlist?.active;
         return html `<${this.tag('menu')} part="menu"
     exportparts="back: menu-back, back-mark: menu-back-mark, empty: menu-empty, header: menu-header,
-      loading: menu-loading, surface: menu-surface, title: menu-title" label=${this.label} placement=${this.placement}>
+      live: menu-live, loading: menu-loading, surface: menu-surface, title: menu-title" label=${this.label} placement=${this.placement}>
       <slot name="trigger" slot="trigger">
         <button part="trigger" type="button" aria-label=${this.label}>${drawIcon(list)}</button>
       </slot>
@@ -69,9 +69,10 @@ let HelixHeadlessVideoPlaylistMenu = class HelixHeadlessVideoPlaylistMenu extend
           part="entry"
       exportparts="item: entry-item, mark: entry-mark, start: entry-start"
           value=${entry.value}
-          aria-checked=${entry.value === active ? 'true' : 'false'}
+          checkable
+          ?checked=${entry.value === active}
           ?disabled=${entry.disabled}
-          role="menuitemradio"
+          exclusive
           @helix-select=${(event) => {
             event.stopPropagation();
             this.choose(entry.value);

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.103.3",
+  "version": "0.104.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.103.3",
-    "@fusion.dev/helix-icons": "0.103.3",
+    "@fusion.dev/helix-core": "0.104.1",
+    "@fusion.dev/helix-icons": "0.104.1",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.103.3",
-    "@fusion.dev/helix-testing": "0.103.3",
+    "@fusion.dev/helix-cem": "0.104.1",
+    "@fusion.dev/helix-testing": "0.104.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",