@fusion.dev/helix-headless 0.103.2 → 0.104.0

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.2",
+  "version": "0.104.0",
   "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.2",
-    "@fusion.dev/helix-icons": "0.103.2",
+    "@fusion.dev/helix-core": "0.104.0",
+    "@fusion.dev/helix-icons": "0.104.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.103.2",
-    "@fusion.dev/helix-testing": "0.103.2",
+    "@fusion.dev/helix-cem": "0.104.0",
+    "@fusion.dev/helix-testing": "0.104.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",