@videojs/html 10.2.0 → 10.3.0

package/dist/dev/presets/background/skin.d.ts

@@ -1,7 +1,8 @@
 import { ReactiveElement } from "@videojs/element";
 //#region src/presets/background/skin.d.ts
 declare function getTemplateHTML(): string;
-export declare class BackgroundVideoSkinElement extends ReactiveElement {
+declare const BackgroundVideoSkinElement_base: typeof ReactiveElement & (new (...args: any[]) => import("@videojs/element").Destroyable);
+export declare class BackgroundVideoSkinElement extends BackgroundVideoSkinElement_base {
   static readonly tagName = "background-video-skin";
   static shadowRootOptions: ShadowRootInit;
   static getTemplateHTML: typeof getTemplateHTML;

package/dist/dev/presets/background/skin.js

@@ -1,5 +1,5 @@
 import skin_default from "../../define/background/skin2.js";
-import { ReactiveElement } from "@videojs/element";
+import { DestroyMixin, ReactiveElement } from "@videojs/element";
 import { ensureGlobalStyle } from "@videojs/utils/dom";
 //#region src/presets/background/skin.ts
 const STYLES_ID = "__media-background-styles";
@@ -12,7 +12,7 @@ function getTemplateHTML() {
     </media-container>
   `;
 }
-var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends ReactiveElement {
+var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends DestroyMixin(ReactiveElement) {
 	static {
 		this.tagName = "background-video-skin";
 	}

package/dist/dev/presets/background/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/presets/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle } from '@videojs/utils/dom';\n\nimport styles from '../../define/background/skin.css?inline';\n\nconst STYLES_ID = '__media-background-styles';\n\nfunction getTemplateHTML() {\n  return /* html */ `\n    <media-container>\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, styles);\n\n    if (!this.shadowRoot) {\n      this.attachShadow(BackgroundVideoSkinElement.shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,SAAS,kBAAkB;CACzB,OAAkB;;;;;;;AAOpB;AAEA,IAAa,6BAAb,MAAa,mCAAmC,gBAAgB;;EACpC,KAAA,UAAA;;;EACiB,KAAA,oBAAA,EAAE,MAAM,OAAO;;;EACjC,KAAA,kBAAA;;CAEzB,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWA,YAAM;EAEnC,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAa,2BAA2B,iBAAiB;GAC9D,KAAK,WAAY,YAAY,gBAAgB;EAC/C;CACF;AACF"}
+{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/presets/background/skin.ts"],"sourcesContent":["import { DestroyMixin, ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle } from '@videojs/utils/dom';\n\nimport styles from '../../define/background/skin.css?inline';\n\nconst STYLES_ID = '__media-background-styles';\n\nfunction getTemplateHTML() {\n  return /* html */ `\n    <media-container>\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends DestroyMixin(ReactiveElement) {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, styles);\n\n    if (!this.shadowRoot) {\n      this.attachShadow(BackgroundVideoSkinElement.shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,SAAS,kBAAkB;CACzB,OAAkB;;;;;;;AAOpB;AAEA,IAAa,6BAAb,MAAa,mCAAmC,aAAa,eAAe,CAAC,CAAC;;EAClD,KAAA,UAAA;;;EACiB,KAAA,oBAAA,EAAE,MAAM,OAAO;;;EACjC,KAAA,kBAAA;;CAEzB,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWA,YAAM;EAEnC,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAa,2BAA2B,iBAAiB;GAC9D,KAAK,WAAY,YAAY,gBAAgB;EAC/C;CACF;AACF"}

package/dist/dev/presets/skin.d.ts

@@ -1,11 +1,12 @@
-import { ReactiveElement } from "@videojs/element";
+import { UIElement } from "../ui/ui-element.js";
 import { ShadowStyle } from "@videojs/utils/dom";
 //#region src/presets/skin.d.ts
 /**
  * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +
- * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).
+ * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback). Destroying it also destroys the controls in its
+ * shadow root.
  */
-export declare class SkinElement extends ReactiveElement {
+export declare class SkinElement extends UIElement {
   static shadowRootOptions: ShadowRootInit;
   static styles?: ShadowStyle;
   static template?: HTMLTemplateElement | null;

package/dist/dev/presets/skin.js

@@ -1,15 +1,16 @@
+import { UIElement } from "../ui/ui-element.js";
 import global_default from "../define/global.js";
 import shadow_default from "../define/shadow.js";
-import { ReactiveElement } from "@videojs/element";
 import { applyShadowStyles, createShadowStyle, ensureGlobalStyle, renderTemplate } from "@videojs/utils/dom";
 //#region src/presets/skin.ts
 const STYLES_ID = "__media-styles";
 const shadowSheet = createShadowStyle(shadow_default);
 /**
 * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +
-* per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).
+* per-skin styles via `adoptedStyleSheets` (or `<style>` fallback). Destroying it also destroys the controls in its
+* shadow root.
 */
-var SkinElement = class extends ReactiveElement {
+var SkinElement = class extends UIElement {
 	static {
 		this.shadowRootOptions = { mode: "open" };
 	}

package/dist/dev/presets/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["shadowStyles","globalStyles"],"sources":["../../../src/presets/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport {\n  applyShadowStyles,\n  createShadowStyle,\n  ensureGlobalStyle,\n  renderTemplate,\n  type ShadowStyle,\n} from '@videojs/utils/dom';\n\nimport globalStyles from '../define/global.css?inline';\nimport shadowStyles from '../define/shadow.css?inline';\n\nconst STYLES_ID = '__media-styles';\nconst shadowSheet = createShadowStyle(shadowStyles);\n\n/**\n * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +\n * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).\n */\nexport class SkinElement extends ReactiveElement {\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static styles?: ShadowStyle;\n  static template?: HTMLTemplateElement | null;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, globalStyles);\n\n    if (!this.shadowRoot) {\n      const ctor = this.constructor as typeof SkinElement;\n\n      this.attachShadow(ctor.shadowRootOptions);\n\n      if (ctor.template) {\n        renderTemplate(this.shadowRoot!, ctor.template);\n      }\n\n      const sheets: ShadowStyle[] = [shadowSheet];\n\n      if (ctor.styles) {\n        sheets.push(ctor.styles);\n      }\n\n      applyShadowStyles(this.shadowRoot!, sheets);\n    }\n  }\n}\n"],"mappings":";;;;;AAYA,MAAM,YAAY;AAClB,MAAM,cAAc,kBAAkBA,cAAY;;;;;AAMlD,IAAa,cAAb,cAAiC,gBAAgB;;EACJ,KAAA,oBAAA,EAAE,MAAM,OAAO;;CAI1D,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWC,cAAY;EAEzC,IAAI,CAAC,KAAK,YAAY;GACpB,MAAM,OAAO,KAAK;GAElB,KAAK,aAAa,KAAK,iBAAiB;GAExC,IAAI,KAAK,UACP,eAAe,KAAK,YAAa,KAAK,QAAQ;GAGhD,MAAM,SAAwB,CAAC,WAAW;GAE1C,IAAI,KAAK,QACP,OAAO,KAAK,KAAK,MAAM;GAGzB,kBAAkB,KAAK,YAAa,MAAM;EAC5C;CACF;AACF"}
+{"version":3,"file":"skin.js","names":["shadowStyles","globalStyles"],"sources":["../../../src/presets/skin.ts"],"sourcesContent":["import {\n  applyShadowStyles,\n  createShadowStyle,\n  ensureGlobalStyle,\n  renderTemplate,\n  type ShadowStyle,\n} from '@videojs/utils/dom';\n\nimport { UIElement } from '../ui/ui-element';\n\nimport globalStyles from '../define/global.css?inline';\nimport shadowStyles from '../define/shadow.css?inline';\n\nconst STYLES_ID = '__media-styles';\nconst shadowSheet = createShadowStyle(shadowStyles);\n\n/**\n * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +\n * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback). Destroying it also destroys the controls in its\n * shadow root.\n */\nexport class SkinElement extends UIElement {\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static styles?: ShadowStyle;\n  static template?: HTMLTemplateElement | null;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, globalStyles);\n\n    if (!this.shadowRoot) {\n      const ctor = this.constructor as typeof SkinElement;\n\n      this.attachShadow(ctor.shadowRootOptions);\n\n      if (ctor.template) {\n        renderTemplate(this.shadowRoot!, ctor.template);\n      }\n\n      const sheets: ShadowStyle[] = [shadowSheet];\n\n      if (ctor.styles) {\n        sheets.push(ctor.styles);\n      }\n\n      applyShadowStyles(this.shadowRoot!, sheets);\n    }\n  }\n}\n"],"mappings":";;;;;AAaA,MAAM,YAAY;AAClB,MAAM,cAAc,kBAAkBA,cAAY;;;;;;AAOlD,IAAa,cAAb,cAAiC,UAAU;;EACE,KAAA,oBAAA,EAAE,MAAM,OAAO;;CAI1D,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWC,cAAY;EAEzC,IAAI,CAAC,KAAK,YAAY;GACpB,MAAM,OAAO,KAAK;GAElB,KAAK,aAAa,KAAK,iBAAiB;GAExC,IAAI,KAAK,UACP,eAAe,KAAK,YAAa,KAAK,QAAQ;GAGhD,MAAM,SAAwB,CAAC,WAAW;GAE1C,IAAI,KAAK,QACP,OAAO,KAAK,KAAK,MAAM;GAGzB,kBAAkB,KAAK,YAAa,MAAM;EAC5C;CACF;AACF"}

package/dist/dev/ui/dialog/element.js

@@ -1,9 +1,10 @@
+import { containerContext } from "../../player/context.js";
 import { UIElement } from "../ui-element.js";
 import { PositionController } from "../position-controller.js";
 import { dialogContext } from "./context.js";
 import { DialogCore, DialogDataAttrs } from "@videojs/core";
 import { applyElementProps, applyStateDataAttrs, createDialog, createTransition } from "@videojs/core/dom";
-import { ContextProvider } from "@videojs/element/context";
+import { ContextConsumer, ContextProvider } from "@videojs/element/context";
 import { SnapshotController } from "@videojs/store/html";
 //#region src/ui/dialog/element.ts
 let idCounter = 0;
@@ -25,12 +26,14 @@ var DialogElementBase = class extends UIElement {
 	#stateAttrMap;
 	#provider;
 	#position;
+	#container;
 	#popupId;
 	#titleId;
 	#descriptionId;
 	#bindTrigger;
 	#dialog;
 	#snapshot;
+	#modalitySnapshot;
 	#triggerAbort;
 	#triggerElement;
 	constructor({ core = new DialogCore(), stateAttrMap = DialogDataAttrs, idPrefix = "dialog", bindTrigger = true } = {}) {
@@ -40,8 +43,13 @@ var DialogElementBase = class extends UIElement {
 		this.closeOnEscape = DialogCore.defaultProps.closeOnEscape;
 		this.#provider = new ContextProvider(this, { context: dialogContext });
 		this.#position = new PositionController(this);
+		this.#container = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
 		this.#dialog = null;
 		this.#snapshot = null;
+		this.#modalitySnapshot = null;
 		this.#triggerAbort = null;
 		this.#triggerElement = null;
 		this.#core = core;
@@ -69,6 +77,8 @@ var DialogElementBase = class extends UIElement {
 		});
 		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
 		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+		if (this.#modalitySnapshot) this.#modalitySnapshot.track(this.#dialog.modality);
+		else this.#modalitySnapshot = new SnapshotController(this, this.#dialog.modality);
 	}
 	firstUpdated(changed) {
 		super.firstUpdated(changed);
@@ -86,6 +96,7 @@ var DialogElementBase = class extends UIElement {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);
+		this.#dialog?.setInteractionRoot(this.#container.value?.container ?? null);
 		if (this.#dialog && changed.has("open")) {
 			const { active: inputOpen } = this.#dialog.input.current;
 			if (this.open !== inputOpen) {
@@ -101,6 +112,7 @@ var DialogElementBase = class extends UIElement {
 		this.#syncTrigger(triggerElement);
 		const input = this.#dialog.input.current;
 		this.#core.setInput(input);
+		this.#core.setDocumentModal(this.#dialog.modality.current.documentModal);
 		const state = this.#core.getState();
 		applyStateDataAttrs(this, state, this.#stateAttrMap);
 		if (this.#triggerElement) applyElementProps(this.#triggerElement, this.#core.getTriggerAttrs(state, this.#popupId));

package/dist/dev/ui/dialog/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/dialog/element.ts"],"sourcesContent":["import {\n  DialogCore,\n  DialogDataAttrs,\n  type DialogInput,\n  type DialogState,\n  type StateAttrMap,\n  type DialogProps,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createDialog,\n  createTransition,\n  type DialogApi,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\n\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\nimport { dialogContext } from './context';\n\nlet idCounter = 0;\n\nexport interface DialogElementBaseOptions {\n  /** @internal */\n  core?: DialogCore;\n  /** @internal */\n  stateAttrMap?: StateAttrMap<DialogState>;\n  idPrefix?: string;\n  bindTrigger?: boolean;\n}\n\nexport class DialogElementBase extends UIElement {\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n  } satisfies PropertyDeclarationMap<keyof DialogProps>;\n\n  open = DialogCore.defaultProps.open;\n  defaultOpen = DialogCore.defaultProps.defaultOpen;\n  closeOnEscape = DialogCore.defaultProps.closeOnEscape;\n\n  readonly #core: DialogCore;\n  readonly #stateAttrMap: StateAttrMap<DialogState>;\n  readonly #provider = new ContextProvider(this, { context: dialogContext });\n  readonly #position = new PositionController(this);\n  readonly #popupId: string;\n  readonly #titleId: string;\n  readonly #descriptionId: string;\n  readonly #bindTrigger: boolean;\n\n  #dialog: DialogApi | null = null;\n  #snapshot: SnapshotController<DialogInput> | null = null;\n  #triggerAbort: AbortController | null = null;\n  #triggerElement: HTMLElement | null = null;\n\n  constructor({\n    core = new DialogCore(),\n    stateAttrMap = DialogDataAttrs,\n    idPrefix = 'dialog',\n    bindTrigger = true,\n  }: DialogElementBaseOptions = {}) {\n    super();\n    this.#core = core;\n    this.#stateAttrMap = stateAttrMap;\n    this.#bindTrigger = bindTrigger;\n    this.#popupId = `vjs-${idPrefix}-popup-${idCounter++}`;\n    this.#titleId = `vjs-${idPrefix}-title-${idCounter++}`;\n    this.#descriptionId = `vjs-${idPrefix}-desc-${idCounter++}`;\n    this.#core.setTitleId(this.#titleId);\n    this.#core.setDescriptionId(this.#descriptionId);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#dialog = createDialog({\n      transition: createTransition(),\n      closeOnEscape: () => this.closeOnEscape,\n      onOpenChange: (nextOpen: boolean) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen } }));\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        this.dispatchEvent(new CustomEvent('open-change-complete', { detail: { open: nextOpen } }));\n      },\n    });\n\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#dialog.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#dialog.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    if (this.defaultOpen && !this.open) this.#dialog?.open();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#dialog?.destroy();\n    this.#dialog = null;\n  }\n\n  close(): void {\n    this.#dialog?.close();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    if (this.#dialog && changed.has('open')) {\n      const { active: inputOpen } = this.#dialog.input.current;\n\n      if (this.open !== inputOpen) {\n        if (this.open) this.#dialog.open();\n        else this.#dialog.close();\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#dialog) return;\n\n    const triggerElement = this.#bindTrigger ? this.#position.findTrigger() : null;\n\n    this.#syncTrigger(triggerElement);\n\n    const input = this.#dialog.input.current;\n\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, this.#stateAttrMap);\n\n    if (this.#triggerElement) {\n      applyElementProps(this.#triggerElement, this.#core.getTriggerAttrs(state, this.#popupId));\n    }\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: this.#stateAttrMap,\n      dialog: this.#dialog,\n      popupId: this.#popupId,\n      popupAttrs: this.#core.getPopupAttrs(state),\n      close: () => this.#dialog?.close(),\n    });\n  }\n\n  #syncTrigger(triggerElement: HTMLElement | null): void {\n    if (triggerElement === this.#triggerElement) return;\n\n    this.#cleanupTrigger();\n    this.#triggerElement = triggerElement;\n    this.#dialog?.setTriggerElement(triggerElement);\n\n    if (triggerElement && this.#dialog) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerElement, this.#dialog.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#triggerElement) {\n      applyElementProps(this.#triggerElement, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#triggerElement = null;\n    this.#dialog?.setTriggerElement(null);\n  }\n}\n\nexport class DialogElement extends DialogElementBase {\n  static readonly tagName = 'media-dialog';\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/dialog/element.ts"],"sourcesContent":["import {\n  DialogCore,\n  DialogDataAttrs,\n  type DialogInput,\n  type DialogState,\n  type StateAttrMap,\n  type DialogProps,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createDialog,\n  createTransition,\n  type DialogApi,\n  type DialogModality,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer, ContextProvider } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\n\nimport { containerContext } from '../../player/context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\nimport { dialogContext } from './context';\n\nlet idCounter = 0;\n\nexport interface DialogElementBaseOptions {\n  /** @internal */\n  core?: DialogCore;\n  /** @internal */\n  stateAttrMap?: StateAttrMap<DialogState>;\n  idPrefix?: string;\n  bindTrigger?: boolean;\n}\n\nexport class DialogElementBase extends UIElement {\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n  } satisfies PropertyDeclarationMap<keyof DialogProps>;\n\n  open = DialogCore.defaultProps.open;\n  defaultOpen = DialogCore.defaultProps.defaultOpen;\n  closeOnEscape = DialogCore.defaultProps.closeOnEscape;\n\n  readonly #core: DialogCore;\n  readonly #stateAttrMap: StateAttrMap<DialogState>;\n  readonly #provider = new ContextProvider(this, { context: dialogContext });\n  readonly #position = new PositionController(this);\n  readonly #container = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #popupId: string;\n  readonly #titleId: string;\n  readonly #descriptionId: string;\n  readonly #bindTrigger: boolean;\n\n  #dialog: DialogApi | null = null;\n  #snapshot: SnapshotController<DialogInput> | null = null;\n  #modalitySnapshot: SnapshotController<DialogModality> | null = null;\n  #triggerAbort: AbortController | null = null;\n  #triggerElement: HTMLElement | null = null;\n\n  constructor({\n    core = new DialogCore(),\n    stateAttrMap = DialogDataAttrs,\n    idPrefix = 'dialog',\n    bindTrigger = true,\n  }: DialogElementBaseOptions = {}) {\n    super();\n    this.#core = core;\n    this.#stateAttrMap = stateAttrMap;\n    this.#bindTrigger = bindTrigger;\n    this.#popupId = `vjs-${idPrefix}-popup-${idCounter++}`;\n    this.#titleId = `vjs-${idPrefix}-title-${idCounter++}`;\n    this.#descriptionId = `vjs-${idPrefix}-desc-${idCounter++}`;\n    this.#core.setTitleId(this.#titleId);\n    this.#core.setDescriptionId(this.#descriptionId);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#dialog = createDialog({\n      transition: createTransition(),\n      closeOnEscape: () => this.closeOnEscape,\n      onOpenChange: (nextOpen: boolean) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen } }));\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        this.dispatchEvent(new CustomEvent('open-change-complete', { detail: { open: nextOpen } }));\n      },\n    });\n\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#dialog.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#dialog.input);\n    }\n\n    if (this.#modalitySnapshot) {\n      this.#modalitySnapshot.track(this.#dialog.modality);\n    } else {\n      this.#modalitySnapshot = new SnapshotController(this, this.#dialog.modality);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    if (this.defaultOpen && !this.open) this.#dialog?.open();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#dialog?.destroy();\n    this.#dialog = null;\n  }\n\n  close(): void {\n    this.#dialog?.close();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n    this.#dialog?.setInteractionRoot(this.#container.value?.container ?? null);\n\n    if (this.#dialog && changed.has('open')) {\n      const { active: inputOpen } = this.#dialog.input.current;\n\n      if (this.open !== inputOpen) {\n        if (this.open) this.#dialog.open();\n        else this.#dialog.close();\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#dialog) return;\n\n    const triggerElement = this.#bindTrigger ? this.#position.findTrigger() : null;\n\n    this.#syncTrigger(triggerElement);\n\n    const input = this.#dialog.input.current;\n\n    this.#core.setInput(input);\n    this.#core.setDocumentModal(this.#dialog.modality.current.documentModal);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, this.#stateAttrMap);\n\n    if (this.#triggerElement) {\n      applyElementProps(this.#triggerElement, this.#core.getTriggerAttrs(state, this.#popupId));\n    }\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: this.#stateAttrMap,\n      dialog: this.#dialog,\n      popupId: this.#popupId,\n      popupAttrs: this.#core.getPopupAttrs(state),\n      close: () => this.#dialog?.close(),\n    });\n  }\n\n  #syncTrigger(triggerElement: HTMLElement | null): void {\n    if (triggerElement === this.#triggerElement) return;\n\n    this.#cleanupTrigger();\n    this.#triggerElement = triggerElement;\n    this.#dialog?.setTriggerElement(triggerElement);\n\n    if (triggerElement && this.#dialog) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerElement, this.#dialog.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#triggerElement) {\n      applyElementProps(this.#triggerElement, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#triggerElement = null;\n    this.#dialog?.setTriggerElement(null);\n  }\n}\n\nexport class DialogElement extends DialogElementBase {\n  static readonly tagName = 'media-dialog';\n}\n"],"mappings":"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"}

package/dist/dev/ui/gesture/element.js

@@ -61,14 +61,17 @@ var GestureElement = class extends UIElement {
 		if (!resolver) return;
 		const { value, region } = this;
 		const actionValue = getGestureActionValue(this.action, region, value);
+		let state;
 		const onActivate = (event) => {
 			resolver({
 				store,
+				state,
 				value: actionValue,
 				event
 			});
 		};
 		const options = {
+			onPointerDown: () => state = store.state,
 			pointer: this.pointer,
 			region,
 			disabled: this.disabled,

package/dist/dev/ui/gesture/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/gesture/element.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport {\n  createDoubleTapGesture,\n  createTapGesture,\n  getGestureActionValue,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nexport class GestureElement extends UIElement {\n  static readonly tagName = 'media-gesture';\n\n  static override properties: PropertyDeclarationMap = {\n    type: { type: String },\n    action: { type: String },\n    value: { type: Number },\n    pointer: { type: String },\n    region: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  type: GestureProps['type'] | '' = '';\n  action: GestureProps['action'] = '';\n  value: GestureProps['value'] = undefined;\n  pointer: GestureProps['pointer'] = undefined;\n  region: GestureProps['region'] = undefined;\n  disabled: NonNullable<GestureProps['disabled']> = false;\n\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.requestUpdate(),\n    subscribe: true,\n  });\n  #cleanup: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.display = 'none';\n    this.#register();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unregister();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Re-register when attributes change.\n    if (this.isConnected) {\n      this.#unregister();\n      this.#register();\n    }\n  }\n\n  #register(): void {\n    const store = this.#player.value;\n    const container = this.#container.value?.container;\n    if (!this.type || !this.action || !store || !container) return;\n\n    const resolver = resolveGestureAction(this.action);\n    if (!resolver) return;\n\n    const { value, region } = this;\n    const actionValue = getGestureActionValue(this.action, region, value);\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, value: actionValue, event });\n    };\n\n    const options = {\n      pointer: this.pointer,\n      region,\n      disabled: this.disabled,\n      action: this.action,\n      value: actionValue,\n    };\n\n    if (this.type === 'doubletap') {\n      this.#cleanup = createDoubleTapGesture(container, onActivate, options);\n    } else if (this.type === 'tap') {\n      this.#cleanup = createTapGesture(container, onActivate, options);\n    }\n  }\n\n  #unregister(): void {\n    this.#cleanup?.();\n    this.#cleanup = null;\n  }\n}\n"],"mappings":";;;;;;AAcA,IAAa,iBAAb,cAAoC,UAAU;;;EAYV,KAAA,OAAA;EACD,KAAA,SAAA;EACF,KAAA,QAAA,KAAA;EACI,KAAA,UAAA,KAAA;EACF,KAAA,SAAA,KAAA;EACiB,KAAA,WAAA;EAE/B,KAAA,UAAA,IAAI,iBAAiB,MAAM,aAAa;EACrC,KAAA,aAAA,IAAI,gBAAgB,MAAM;GAC9C,SAAS;GACT,gBAAgB,KAAK,cAAc;GACnC,WAAW;EACb,CAAC;EAC+B,KAAA,WAAA;;;EAxBN,KAAA,UAAA;;;EAE2B,KAAA,aAAA;GACnD,MAAM,EAAE,MAAM,OAAO;GACrB,QAAQ,EAAE,MAAM,OAAO;GACvB,OAAO,EAAE,MAAM,OAAO;GACtB,SAAS,EAAE,MAAM,OAAO;GACxB,QAAQ,EAAE,MAAM,OAAO;GACvB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CASA;CACA;CAKA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,MAAM,UAAU;EACrB,KAAK,UAAU;CACjB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAK,YAAY;CACnB;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAGpB,IAAI,KAAK,aAAa;GACpB,KAAK,YAAY;GACjB,KAAK,UAAU;EACjB;CACF;CAEA,YAAkB;EAChB,MAAM,QAAQ,KAAK,QAAQ;EAC3B,MAAM,YAAY,KAAK,WAAW,OAAO;EACzC,IAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,WAAW;EAExD,MAAM,WAAW,qBAAqB,KAAK,MAAM;EACjD,IAAI,CAAC,UAAU;EAEf,MAAM,EAAE,OAAO,WAAW;EAC1B,MAAM,cAAc,sBAAsB,KAAK,QAAQ,QAAQ,KAAK;EAEpE,MAAM,cAAc,UAAwB;GAC1C,SAAS;IAAE;IAAO,OAAO;IAAa;GAAM,CAAC;EAC/C;EAEA,MAAM,UAAU;GACd,SAAS,KAAK;GACd;GACA,UAAU,KAAK;GACf,QAAQ,KAAK;GACb,OAAO;EACT;EAEA,IAAI,KAAK,SAAS,aAChB,KAAK,WAAW,uBAAuB,WAAW,YAAY,OAAO;OAChE,IAAI,KAAK,SAAS,OACvB,KAAK,WAAW,iBAAiB,WAAW,YAAY,OAAO;CAEnE;CAEA,cAAoB;EAClB,KAAK,WAAW;EAChB,KAAK,WAAW;CAClB;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/gesture/element.ts"],"sourcesContent":["import type { GestureProps } from '@videojs/core';\nimport {\n  createDoubleTapGesture,\n  createTapGesture,\n  getGestureActionValue,\n  resolveGestureAction,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nexport class GestureElement extends UIElement {\n  static readonly tagName = 'media-gesture';\n\n  static override properties: PropertyDeclarationMap = {\n    type: { type: String },\n    action: { type: String },\n    value: { type: Number },\n    pointer: { type: String },\n    region: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  type: GestureProps['type'] | '' = '';\n  action: GestureProps['action'] = '';\n  value: GestureProps['value'] = undefined;\n  pointer: GestureProps['pointer'] = undefined;\n  region: GestureProps['region'] = undefined;\n  disabled: NonNullable<GestureProps['disabled']> = false;\n\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.requestUpdate(),\n    subscribe: true,\n  });\n  #cleanup: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.style.display = 'none';\n    this.#register();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#unregister();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Re-register when attributes change.\n    if (this.isConnected) {\n      this.#unregister();\n      this.#register();\n    }\n  }\n\n  #register(): void {\n    const store = this.#player.value;\n    const container = this.#container.value?.container;\n    if (!this.type || !this.action || !store || !container) return;\n\n    const resolver = resolveGestureAction(this.action);\n    if (!resolver) return;\n\n    const { value, region } = this;\n    const actionValue = getGestureActionValue(this.action, region, value);\n\n    let state: object | undefined;\n\n    const onActivate = (event: PointerEvent) => {\n      resolver({ store, state, value: actionValue, event });\n    };\n\n    const options = {\n      onPointerDown: () => (state = store.state),\n      pointer: this.pointer,\n      region,\n      disabled: this.disabled,\n      action: this.action,\n      value: actionValue,\n    };\n\n    if (this.type === 'doubletap') {\n      this.#cleanup = createDoubleTapGesture(container, onActivate, options);\n    } else if (this.type === 'tap') {\n      this.#cleanup = createTapGesture(container, onActivate, options);\n    }\n  }\n\n  #unregister(): void {\n    this.#cleanup?.();\n    this.#cleanup = null;\n  }\n}\n"],"mappings":";;;;;;AAcA,IAAa,iBAAb,cAAoC,UAAU;;;EAYV,KAAA,OAAA;EACD,KAAA,SAAA;EACF,KAAA,QAAA,KAAA;EACI,KAAA,UAAA,KAAA;EACF,KAAA,SAAA,KAAA;EACiB,KAAA,WAAA;EAE/B,KAAA,UAAA,IAAI,iBAAiB,MAAM,aAAa;EACrC,KAAA,aAAA,IAAI,gBAAgB,MAAM;GAC9C,SAAS;GACT,gBAAgB,KAAK,cAAc;GACnC,WAAW;EACb,CAAC;EAC+B,KAAA,WAAA;;;EAxBN,KAAA,UAAA;;;EAE2B,KAAA,aAAA;GACnD,MAAM,EAAE,MAAM,OAAO;GACrB,QAAQ,EAAE,MAAM,OAAO;GACvB,OAAO,EAAE,MAAM,OAAO;GACtB,SAAS,EAAE,MAAM,OAAO;GACxB,QAAQ,EAAE,MAAM,OAAO;GACvB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CASA;CACA;CAKA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,MAAM,UAAU;EACrB,KAAK,UAAU;CACjB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAK,YAAY;CACnB;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAGpB,IAAI,KAAK,aAAa;GACpB,KAAK,YAAY;GACjB,KAAK,UAAU;EACjB;CACF;CAEA,YAAkB;EAChB,MAAM,QAAQ,KAAK,QAAQ;EAC3B,MAAM,YAAY,KAAK,WAAW,OAAO;EACzC,IAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,UAAU,CAAC,SAAS,CAAC,WAAW;EAExD,MAAM,WAAW,qBAAqB,KAAK,MAAM;EACjD,IAAI,CAAC,UAAU;EAEf,MAAM,EAAE,OAAO,WAAW;EAC1B,MAAM,cAAc,sBAAsB,KAAK,QAAQ,QAAQ,KAAK;EAEpE,IAAI;EAEJ,MAAM,cAAc,UAAwB;GAC1C,SAAS;IAAE;IAAO;IAAO,OAAO;IAAa;GAAM,CAAC;EACtD;EAEA,MAAM,UAAU;GACd,qBAAsB,QAAQ,MAAM;GACpC,SAAS,KAAK;GACd;GACA,UAAU,KAAK;GACf,QAAQ,KAAK;GACb,OAAO;EACT;EAEA,IAAI,KAAK,SAAS,aAChB,KAAK,WAAW,uBAAuB,WAAW,YAAY,OAAO;OAChE,IAAI,KAAK,SAAS,OACvB,KAAK,WAAW,iBAAiB,WAAW,YAAY,OAAO;CAEnE;CAEA,cAAoB;EAClB,KAAK,WAAW;EAChB,KAAK,WAAW;CAClB;AACF"}

package/dist/dev/ui/media-button-element.d.ts

@@ -11,6 +11,10 @@ type LabelParams = Record<string, string | number>;
 type MediaButtonCore<ComponentState extends ButtonState, MediaState> = MediaButtonComponent<object, ComponentState> & {
   setMedia(media: MediaState): void;
   getLabelParams?: (state: ComponentState) => LabelParams | undefined;
+  /** Shorter text for the tooltip than the accessible name, when the two differ. */
+  getTooltipLabel?: (state: ComponentState) => Text | string;
+  /** CSS custom properties the button publishes for skins. */
+  getCSSVars?: (state: ComponentState) => Record<string, string>;
 };
 /**
  * Abstract base for HTML custom elements that render a media-control button. `ComponentState` is the state the button
@@ -42,6 +46,11 @@ export declare abstract class MediaButtonElement<ComponentState extends ButtonSt
   getResolvedLabel(): string | undefined;
   protected willUpdate(changed: PropertyValues): void;
   protected update(changed: PropertyValues): void;
+  /**
+   * Whether this button writes its core's `hidden` state to the `hidden` attribute. A subclass returns `false` while
+   * another owner, such as a linked menu, manages its visibility.
+   */
+  protected reflectsHidden(): boolean;
 }
 //#endregion
 //# sourceMappingURL=media-button-element.d.ts.map

package/dist/dev/ui/media-button-element.js

@@ -74,6 +74,7 @@ var MediaButtonElement = class extends UIElement {
 		if (!media) return void 0;
 		this.core.setMedia(media);
 		const state = this.core.getState();
+		if (this.core.getTooltipLabel) return translateText(this.core.getTooltipLabel(state), this.#i18n.value);
 		return translateText(this.core.getLabel(state), this.#i18n.value, this.core.getLabelParams?.(state));
 	}
 	willUpdate(changed) {
@@ -92,9 +93,17 @@ var MediaButtonElement = class extends UIElement {
 		applyElementProps(this, {
 			...attrs,
 			"aria-keyshortcuts": this.#hotkeyRegistry?.aria,
-			...isHideable(state) && { hidden: state.hidden ? "" : void 0 }
+			...isHideable(state) && this.reflectsHidden() && { hidden: state.hidden ? "" : void 0 }
 		});
 		applyStateDataAttrs(this, state, this.stateAttrMap);
+		for (const [name, value] of Object.entries(this.core.getCSSVars?.(state) ?? {})) this.style.setProperty(name, value);
+	}
+	/**
+	* Whether this button writes its core's `hidden` state to the `hidden` attribute. A subclass returns `false` while
+	* another owner, such as a linked menu, manages its visibility.
+	*/
+	reflectsHidden() {
+		return true;
 	}
 	#syncHotkeyShortcut() {
 		const shortcut = this.getShortcut();

package/dist/dev/ui/media-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-button-element.js","names":[],"sources":["../../../src/ui/media-button-element.ts"],"sourcesContent":["import type { ButtonState, MediaButtonComponent, StateAttrMap } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  type ButtonActivationSource,\n  createButton,\n  HOTKEY_SHORTCUT_CHANGE_EVENT,\n  logMissingFeature,\n  type UIEvent,\n} from '@videojs/core/dom';\nimport { isText, resolveText, type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { State } from '@videojs/store';\nimport { isBoolean, isObject } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../i18n/context';\nimport { I18nController } from '../i18n/controller';\nimport type { PlayerController } from '../player/controller';\nimport { AriaKeyShortcutsController } from './hotkey/aria-key-shortcuts-controller';\nimport { UIElement } from './ui-element';\n\ntype LabelParams = Record<string, string | number>;\n\n/** The core a media button element drives: it reads `MediaState` and computes `ComponentState`. */\ntype MediaButtonCore<ComponentState extends ButtonState, MediaState> = MediaButtonComponent<object, ComponentState> & {\n  setMedia(media: MediaState): void;\n  getLabelParams?: (state: ComponentState) => LabelParams | undefined;\n};\n\n/**\n * Abstract base for HTML custom elements that render a media-control button. `ComponentState` is the state the button\n * reflects to data attributes, and `MediaState` is the player state it reads and acts on. Pass both: a subclass that\n * omits them still compiles, but types `activate(state)` and `mediaState` as the `ButtonState` and `object` defaults.\n */\nexport abstract class MediaButtonElement<\n  ComponentState extends ButtonState = ButtonState,\n  MediaState extends object = object,\n> extends UIElement {\n  static override properties: PropertyDeclarationMap = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  disabled = false;\n  label: Text | string = '';\n\n  protected abstract readonly core: MediaButtonCore<ComponentState, MediaState>;\n  protected abstract readonly stateAttrMap: StateAttrMap<ComponentState>;\n  protected abstract readonly mediaState: PlayerController<any, MediaState | undefined>;\n\n  protected abstract activate(state: MediaState, event: UIEvent, source: ButtonActivationSource): void | Promise<void>;\n\n  protected getIsButtonDisabled(): boolean {\n    return this.disabled || !this.mediaState.value;\n  }\n\n  protected handleActivate(event: UIEvent, source: ButtonActivationSource): void {\n    // `createButton` invokes `onActivate` synchronously from click/keyup\n    // handlers, so any rejection here would be unhandled. Log in dev for\n    // visibility but absorb the failure at this UI boundary.\n    Promise.resolve(this.activate(this.mediaState.value!, event, source)).catch((error) => {\n      if (__DEV__) console.error(`[${this.localName}]`, error);\n    });\n  }\n\n  /** Override to set the hotkey action name for `aria-keyshortcuts`. */\n  protected readonly hotkeyAction: string | undefined = undefined;\n\n  /** Override to match hotkeys that use action values, such as seek steps. */\n  protected get hotkeyValue(): number | undefined {\n    return undefined;\n  }\n\n  get $state(): State<ButtonState> {\n    return this.core.state;\n  }\n\n  #disconnect: AbortController | null = null;\n  #hotkeyRegistry: AriaKeyShortcutsController | null = null;\n  #lastHotkeyShortcut: string | undefined;\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (this.hotkeyAction && !this.#hotkeyRegistry) {\n      this.#hotkeyRegistry = new AriaKeyShortcutsController(this, this.hotkeyAction, {\n        value: () => this.hotkeyValue,\n      });\n    }\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: (event, source) => this.handleActivate(event, source),\n      isDisabled: () => this.getIsButtonDisabled(),\n    });\n\n    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  /** Returns the button's current label derived from media state. */\n  getLabel(): string | undefined {\n    return this.core.state.current.label ? resolveText(this.core.state.current.label) : undefined;\n  }\n\n  getShortcut(): string | undefined {\n    return this.#hotkeyRegistry?.shortcut;\n  }\n\n  /** Resolved label for tooltips and other display surfaces. */\n  getResolvedLabel(): string | undefined {\n    const media = this.mediaState.value;\n    if (!media) return undefined;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n\n    return translateText(this.core.getLabel(state), this.#i18n.value, this.core.getLabelParams?.(state));\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.core.setProps?.(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    this.#syncHotkeyShortcut();\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    const attrs = (this.core.getAttrs?.(state) ?? {}) as Record<string, unknown>;\n\n    if (isText(attrs['aria-label'])) {\n      attrs['aria-label'] = translateText(attrs['aria-label'], this.#i18n.value, this.core.getLabelParams?.(state));\n    }\n\n    applyElementProps(this, {\n      ...attrs,\n      'aria-keyshortcuts': this.#hotkeyRegistry?.aria,\n      // A button whose core reports itself hidden takes the real attribute, not\n      // just the data one: `data-hidden` is a styling hook a skin may or may not\n      // act on, where `hidden` removes the control the way the React components\n      // do by rendering nothing.\n      ...(isHideable(state) && { hidden: state.hidden ? '' : undefined }),\n    });\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n\n  #syncHotkeyShortcut(): void {\n    const shortcut = this.getShortcut();\n    if (shortcut === this.#lastHotkeyShortcut) return;\n\n    this.#lastHotkeyShortcut = shortcut;\n    this.dispatchEvent(new CustomEvent(HOTKEY_SHORTCUT_CHANGE_EVENT));\n  }\n}\n\n/** Whether a button's core reports whether it should be shown at all. */\nfunction isHideable(state: unknown): state is { hidden: boolean } {\n  return isObject(state) && isBoolean((state as { hidden?: unknown }).hidden);\n}\n"],"mappings":"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"}
+{"version":3,"file":"media-button-element.js","names":[],"sources":["../../../src/ui/media-button-element.ts"],"sourcesContent":["import type { ButtonState, MediaButtonComponent, StateAttrMap } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  type ButtonActivationSource,\n  createButton,\n  HOTKEY_SHORTCUT_CHANGE_EVENT,\n  logMissingFeature,\n  type UIEvent,\n} from '@videojs/core/dom';\nimport { isText, resolveText, type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { State } from '@videojs/store';\nimport { isBoolean, isObject } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../i18n/context';\nimport { I18nController } from '../i18n/controller';\nimport type { PlayerController } from '../player/controller';\nimport { AriaKeyShortcutsController } from './hotkey/aria-key-shortcuts-controller';\nimport { UIElement } from './ui-element';\n\ntype LabelParams = Record<string, string | number>;\n\n/** The core a media button element drives: it reads `MediaState` and computes `ComponentState`. */\ntype MediaButtonCore<ComponentState extends ButtonState, MediaState> = MediaButtonComponent<object, ComponentState> & {\n  setMedia(media: MediaState): void;\n  getLabelParams?: (state: ComponentState) => LabelParams | undefined;\n  /** Shorter text for the tooltip than the accessible name, when the two differ. */\n  getTooltipLabel?: (state: ComponentState) => Text | string;\n  /** CSS custom properties the button publishes for skins. */\n  getCSSVars?: (state: ComponentState) => Record<string, string>;\n};\n\n/**\n * Abstract base for HTML custom elements that render a media-control button. `ComponentState` is the state the button\n * reflects to data attributes, and `MediaState` is the player state it reads and acts on. Pass both: a subclass that\n * omits them still compiles, but types `activate(state)` and `mediaState` as the `ButtonState` and `object` defaults.\n */\nexport abstract class MediaButtonElement<\n  ComponentState extends ButtonState = ButtonState,\n  MediaState extends object = object,\n> extends UIElement {\n  static override properties: PropertyDeclarationMap = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  disabled = false;\n  label: Text | string = '';\n\n  protected abstract readonly core: MediaButtonCore<ComponentState, MediaState>;\n  protected abstract readonly stateAttrMap: StateAttrMap<ComponentState>;\n  protected abstract readonly mediaState: PlayerController<any, MediaState | undefined>;\n\n  protected abstract activate(state: MediaState, event: UIEvent, source: ButtonActivationSource): void | Promise<void>;\n\n  protected getIsButtonDisabled(): boolean {\n    return this.disabled || !this.mediaState.value;\n  }\n\n  protected handleActivate(event: UIEvent, source: ButtonActivationSource): void {\n    // `createButton` invokes `onActivate` synchronously from click/keyup\n    // handlers, so any rejection here would be unhandled. Log in dev for\n    // visibility but absorb the failure at this UI boundary.\n    Promise.resolve(this.activate(this.mediaState.value!, event, source)).catch((error) => {\n      if (__DEV__) console.error(`[${this.localName}]`, error);\n    });\n  }\n\n  /** Override to set the hotkey action name for `aria-keyshortcuts`. */\n  protected readonly hotkeyAction: string | undefined = undefined;\n\n  /** Override to match hotkeys that use action values, such as seek steps. */\n  protected get hotkeyValue(): number | undefined {\n    return undefined;\n  }\n\n  get $state(): State<ButtonState> {\n    return this.core.state;\n  }\n\n  #disconnect: AbortController | null = null;\n  #hotkeyRegistry: AriaKeyShortcutsController | null = null;\n  #lastHotkeyShortcut: string | undefined;\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (this.hotkeyAction && !this.#hotkeyRegistry) {\n      this.#hotkeyRegistry = new AriaKeyShortcutsController(this, this.hotkeyAction, {\n        value: () => this.hotkeyValue,\n      });\n    }\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: (event, source) => this.handleActivate(event, source),\n      isDisabled: () => this.getIsButtonDisabled(),\n    });\n\n    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  /** Returns the button's current label derived from media state. */\n  getLabel(): string | undefined {\n    return this.core.state.current.label ? resolveText(this.core.state.current.label) : undefined;\n  }\n\n  getShortcut(): string | undefined {\n    return this.#hotkeyRegistry?.shortcut;\n  }\n\n  /** Resolved label for tooltips and other display surfaces. */\n  getResolvedLabel(): string | undefined {\n    const media = this.mediaState.value;\n    if (!media) return undefined;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n\n    if (this.core.getTooltipLabel) return translateText(this.core.getTooltipLabel(state), this.#i18n.value);\n\n    return translateText(this.core.getLabel(state), this.#i18n.value, this.core.getLabelParams?.(state));\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.core.setProps?.(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    this.#syncHotkeyShortcut();\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    const attrs = (this.core.getAttrs?.(state) ?? {}) as Record<string, unknown>;\n\n    if (isText(attrs['aria-label'])) {\n      attrs['aria-label'] = translateText(attrs['aria-label'], this.#i18n.value, this.core.getLabelParams?.(state));\n    }\n\n    applyElementProps(this, {\n      ...attrs,\n      'aria-keyshortcuts': this.#hotkeyRegistry?.aria,\n      // A button whose core reports itself hidden takes the real attribute, not\n      // just the data one: `data-hidden` is a styling hook a skin may or may not\n      // act on, where `hidden` removes the control the way the React components\n      // do by rendering nothing.\n      ...(isHideable(state) && this.reflectsHidden() && { hidden: state.hidden ? '' : undefined }),\n    });\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n\n    for (const [name, value] of Object.entries(this.core.getCSSVars?.(state) ?? {})) {\n      this.style.setProperty(name, value);\n    }\n  }\n\n  /**\n   * Whether this button writes its core's `hidden` state to the `hidden` attribute. A subclass returns `false` while\n   * another owner, such as a linked menu, manages its visibility.\n   */\n  protected reflectsHidden(): boolean {\n    return true;\n  }\n\n  #syncHotkeyShortcut(): void {\n    const shortcut = this.getShortcut();\n    if (shortcut === this.#lastHotkeyShortcut) return;\n\n    this.#lastHotkeyShortcut = shortcut;\n    this.dispatchEvent(new CustomEvent(HOTKEY_SHORTCUT_CHANGE_EVENT));\n  }\n}\n\n/** Whether a button's core reports whether it should be shown at all. */\nfunction isHideable(state: unknown): state is { hidden: boolean } {\n  return isObject(state) && isBoolean((state as { hidden?: unknown }).hidden);\n}\n"],"mappings":";;;;;;;;;;;;;AAsCA,IAAsB,qBAAtB,cAGU,UAAU;;;EAMP,KAAA,WAAA;EACY,KAAA,QAAA;EAsB+B,KAAA,eAAA,KAAA;EAWhB,KAAA,cAAA;EACe,KAAA,kBAAA;EAEpC,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;;;EA1CA,KAAA,aAAA;GACnD,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAWA,sBAAyC;EACvC,OAAO,KAAK,YAAY,CAAC,KAAK,WAAW;CAC3C;CAEA,eAAyB,OAAgB,QAAsC;EAI7E,QAAQ,QAAQ,KAAK,SAAS,KAAK,WAAW,OAAQ,OAAO,MAAM,CAAC,CAAC,CAAC,OAAO,UAAU;GACxE,QAAQ,MAAM,IAAI,KAAK,UAAU,IAAI,KAAK;EACzD,CAAC;CACH;;CAMA,IAAc,cAAkC,CAEhD;CAEA,IAAI,SAA6B;EAC/B,OAAO,KAAK,KAAK;CACnB;CAEA;CACA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAI,KAAK,gBAAgB,CAAC,KAAK,iBAC7B,KAAK,kBAAkB,IAAI,2BAA2B,MAAM,KAAK,cAAc,EAC7E,aAAa,KAAK,YACpB,CAAC;EAGH,KAAK,cAAc,IAAI,gBAAgB;EAEvC,MAAM,cAAc,aAAa;GAC/B,aAAa,OAAO,WAAW,KAAK,eAAe,OAAO,MAAM;GAChE,kBAAkB,KAAK,oBAAoB;EAC7C,CAAC;EAED,kBAAkB,MAAM,aAAa,EAAE,QAAQ,KAAK,YAAY,OAAO,CAAC;EAExE,IAAe,CAAC,KAAK,WAAW,SAAS,KAAK,WAAW,aACvD,kBAAkB,KAAK,WAAW,KAAK,WAAW,WAAW;CAEjE;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAK,aAAa,MAAM;EACxB,KAAK,cAAc;CACrB;;CAGA,WAA+B;EAC7B,OAAO,KAAK,KAAK,MAAM,QAAQ,QAAQ,YAAY,KAAK,KAAK,MAAM,QAAQ,KAAK,IAAI,KAAA;CACtF;CAEA,cAAkC;EAChC,OAAO,KAAK,iBAAiB;CAC/B;;CAGA,mBAAuC;EACrC,MAAM,QAAQ,KAAK,WAAW;EAC9B,IAAI,CAAC,OAAO,OAAO,KAAA;EAEnB,KAAK,KAAK,SAAS,KAAK;EACxB,MAAM,QAAQ,KAAK,KAAK,SAAS;EAEjC,IAAI,KAAK,KAAK,iBAAiB,OAAO,cAAc,KAAK,KAAK,gBAAgB,KAAK,GAAG,KAAK,MAAM,KAAK;EAEtG,OAAO,cAAc,KAAK,KAAK,SAAS,KAAK,GAAG,KAAK,MAAM,OAAO,KAAK,KAAK,iBAAiB,KAAK,CAAC;CACrG;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EACxB,KAAK,KAAK,WAAW,IAAI;CAC3B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,QAAQ,KAAK,WAAW;EAE9B,KAAK,oBAAoB;EAEzB,IAAI,CAAC,OAAO;EAEZ,KAAK,KAAK,SAAS,KAAK;EACxB,MAAM,QAAQ,KAAK,KAAK,SAAS;EACjC,MAAM,QAAS,KAAK,KAAK,WAAW,KAAK,KAAK,CAAC;EAE/C,IAAI,OAAO,MAAM,aAAa,GAC5B,MAAM,gBAAgB,cAAc,MAAM,eAAe,KAAK,MAAM,OAAO,KAAK,KAAK,iBAAiB,KAAK,CAAC;EAG9G,kBAAkB,MAAM;GACtB,GAAG;GACH,qBAAqB,KAAK,iBAAiB;GAK3C,GAAI,WAAW,KAAK,KAAK,KAAK,eAAe,KAAK,EAAE,QAAQ,MAAM,SAAS,KAAK,KAAA,EAAU;EAC5F,CAAC;EACD,oBAAoB,MAAM,OAAO,KAAK,YAAY;EAElD,KAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,KAAK,KAAK,aAAa,KAAK,KAAK,CAAC,CAAC,GAC5E,KAAK,MAAM,YAAY,MAAM,KAAK;CAEtC;;;;;CAMA,iBAAoC;EAClC,OAAO;CACT;CAEA,sBAA4B;EAC1B,MAAM,WAAW,KAAK,YAAY;EAClC,IAAI,aAAa,KAAK,qBAAqB;EAE3C,KAAK,sBAAsB;EAC3B,KAAK,cAAc,IAAI,YAAY,4BAA4B,CAAC;CAClE;AACF;;AAGA,SAAS,WAAW,OAA8C;CAChE,OAAO,SAAS,KAAK,KAAK,UAAW,MAA+B,MAAM;AAC5E"}

package/dist/dev/ui/play-button/element.d.ts

@@ -17,6 +17,8 @@ export declare class PlayButtonElement extends MediaButtonElement<PlayButtonStat
     ended: boolean;
     started: boolean;
     waiting: boolean;
+    autoplay: boolean;
+    autoplaying: boolean;
     play: () => Promise<void>;
     pause: () => void;
   } | undefined>;

package/dist/dev/ui/playback-rate-button/element.d.ts

@@ -18,20 +18,28 @@ export declare class PlaybackRateButtonElement extends MediaButtonElement<Playba
     commandfor: {
       type: StringConstructor;
     };
+    rates: {
+      type: StringConstructor;
+    };
   };
   commandfor: string | undefined;
+  rates: readonly number[] | string | undefined;
   protected readonly core: PlaybackRateButtonCore;
   protected readonly stateAttrMap: {
     readonly rate: 'data-rate';
+    readonly availability: 'data-availability';
+    readonly hidden: 'data-hidden';
   };
   protected readonly mediaState: PlayerController<index_d_exports.AnyPlayerStore, {
-    readonly playbackRates: readonly number[];
     playbackRate: number;
+    playbackRateAvailability: import("@videojs/media").MediaFeatureAvailability;
     setPlaybackRate: (rate: number) => void;
+    readonly playbackRates: readonly number[];
   } | undefined>;
   protected readonly hotkeyAction = "speedUp";
   protected activate(state: MediaPlaybackRateState, event?: UIEvent): void;
   protected getIsButtonDisabled(): boolean;
+  protected reflectsHidden(): boolean;
   protected willUpdate(changed: PropertyValues): void;
   protected update(changed: PropertyValues): void;
 }

package/dist/dev/ui/playback-rate-button/element.js

@@ -8,6 +8,7 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
 		super(..._args);
 		this.commandfor = void 0;
+		this.rates = void 0;
 		this.core = new PlaybackRateButtonCore();
 		this.stateAttrMap = PlaybackRateButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
@@ -20,7 +21,8 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 		this.properties = {
 			label: { type: String },
 			disabled: { type: Boolean },
-			commandfor: { type: String }
+			commandfor: { type: String },
+			rates: { type: String }
 		};
 	}
 	activate(state, event) {
@@ -33,9 +35,12 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 	getIsButtonDisabled() {
 		const media = this.mediaState.value;
 		if (super.getIsButtonDisabled()) return true;
-		if (this.commandfor && media && media.playbackRates.length === 0) return true;
+		if (this.commandfor && media && this.core.getRates(media).length === 0) return true;
 		return false;
 	}
+	reflectsHidden() {
+		return !this.commandfor;
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		if (changed.has("commandfor")) {

package/dist/dev/ui/playback-rate-button/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/playback-rate-button/element.ts"],"sourcesContent":["import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs, type PlaybackRateButtonState } from '@videojs/core';\nimport { applyElementProps, selectPlaybackRate, type UIEvent } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaPlaybackRateState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateButtonState, MediaPlaybackRateState> {\n  static readonly tagName = 'media-playback-rate-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n    commandfor: { type: String },\n  } satisfies PropertyDeclarationMap<'label' | 'disabled' | 'commandfor'>;\n\n  commandfor: string | undefined = undefined;\n\n  protected readonly core = new PlaybackRateButtonCore();\n  protected readonly stateAttrMap = PlaybackRateButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n  protected override readonly hotkeyAction = 'speedUp';\n\n  protected activate(state: MediaPlaybackRateState, event?: UIEvent): void {\n    if (this.commandfor) {\n      if (event instanceof KeyboardEvent) {\n        // Custom elements do not synthesize a click from keyboard activation.\n        // Dispatch one so the linked menu follows its normal open lifecycle.\n        this.click();\n      }\n\n      return;\n    }\n\n    this.core.cycle(state);\n  }\n\n  protected override getIsButtonDisabled(): boolean {\n    const media = this.mediaState.value;\n\n    if (super.getIsButtonDisabled()) return true;\n\n    if (this.commandfor && media && media.playbackRates.length === 0) return true;\n\n    return false;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    if (changed.has('commandfor')) {\n      if (this.commandfor) {\n        this.setAttribute('commandfor', this.commandfor);\n      } else {\n        this.removeAttribute('commandfor');\n      }\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n    if (!media || !this.commandfor) return;\n\n    applyElementProps(this, {\n      'aria-disabled': this.getIsButtonDisabled() ? 'true' : undefined,\n    });\n  }\n}\n\nexport namespace PlaybackRateButtonElement {\n  export type State = PlaybackRateButtonState;\n}\n"],"mappings":";;;;;;AASA,IAAa,4BAAb,cAA+C,mBAAoE;;;EAShF,KAAA,aAAA,KAAA;EAEP,KAAA,OAAA,IAAI,uBAAuB;EACnB,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EACjD,KAAA,eAAA;;;EAbjB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;GAC1B,YAAY,EAAE,MAAM,OAAO;EAC7B;;CASA,SAAmB,OAA+B,OAAuB;EACvE,IAAI,KAAK,YAAY;GACnB,IAAI,iBAAiB,eAGnB,KAAK,MAAM;GAGb;EACF;EAEA,KAAK,KAAK,MAAM,KAAK;CACvB;CAEA,sBAAkD;EAChD,MAAM,QAAQ,KAAK,WAAW;EAE9B,IAAI,MAAM,oBAAoB,GAAG,OAAO;EAExC,IAAI,KAAK,cAAc,SAAS,MAAM,cAAc,WAAW,GAAG,OAAO;EAEzE,OAAO;CACT;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EAExB,IAAI,QAAQ,IAAI,YAAY,GAAG;GAC7B,IAAI,KAAK,YACP,KAAK,aAAa,cAAc,KAAK,UAAU;QAE/C,KAAK,gBAAgB,YAAY;EAErC;CACF;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAGpB,IAAI,CADU,KAAK,WAAW,SAChB,CAAC,KAAK,YAAY;EAEhC,kBAAkB,MAAM,EACtB,iBAAiB,KAAK,oBAAoB,IAAI,SAAS,KAAA,EACzD,CAAC;CACH;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/playback-rate-button/element.ts"],"sourcesContent":["import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs, type PlaybackRateButtonState } from '@videojs/core';\nimport { applyElementProps, selectPlaybackRate, type UIEvent } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaPlaybackRateState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateButtonState, MediaPlaybackRateState> {\n  static readonly tagName = 'media-playback-rate-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n    commandfor: { type: String },\n    rates: { type: String },\n  } satisfies PropertyDeclarationMap<'label' | 'disabled' | 'commandfor' | 'rates'>;\n\n  commandfor: string | undefined = undefined;\n  rates: readonly number[] | string | undefined = undefined;\n\n  protected readonly core = new PlaybackRateButtonCore();\n  protected readonly stateAttrMap = PlaybackRateButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n  protected override readonly hotkeyAction = 'speedUp';\n\n  protected activate(state: MediaPlaybackRateState, event?: UIEvent): void {\n    if (this.commandfor) {\n      if (event instanceof KeyboardEvent) {\n        // Custom elements do not synthesize a click from keyboard activation.\n        // Dispatch one so the linked menu follows its normal open lifecycle.\n        this.click();\n      }\n\n      return;\n    }\n\n    this.core.cycle(state);\n  }\n\n  protected override getIsButtonDisabled(): boolean {\n    const media = this.mediaState.value;\n\n    if (super.getIsButtonDisabled()) return true;\n\n    if (this.commandfor && media && this.core.getRates(media).length === 0) return true;\n\n    return false;\n  }\n\n  // A linked menu hides its trigger from the rate options' availability and\n  // treats a `hidden` trigger as author-hidden, so the button must not write\n  // its own pre-attach `hidden` state there.\n  protected override reflectsHidden(): boolean {\n    return !this.commandfor;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    if (changed.has('commandfor')) {\n      if (this.commandfor) {\n        this.setAttribute('commandfor', this.commandfor);\n      } else {\n        this.removeAttribute('commandfor');\n      }\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n    if (!media || !this.commandfor) return;\n\n    applyElementProps(this, {\n      'aria-disabled': this.getIsButtonDisabled() ? 'true' : undefined,\n    });\n  }\n}\n\nexport namespace PlaybackRateButtonElement {\n  export type State = PlaybackRateButtonState;\n}\n"],"mappings":";;;;;;AASA,IAAa,4BAAb,cAA+C,mBAAoE;;;EAUhF,KAAA,aAAA,KAAA;EACe,KAAA,QAAA,KAAA;EAEtB,KAAA,OAAA,IAAI,uBAAuB;EACnB,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EACjD,KAAA,eAAA;;;EAfjB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;GAC1B,YAAY,EAAE,MAAM,OAAO;GAC3B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAUA,SAAmB,OAA+B,OAAuB;EACvE,IAAI,KAAK,YAAY;GACnB,IAAI,iBAAiB,eAGnB,KAAK,MAAM;GAGb;EACF;EAEA,KAAK,KAAK,MAAM,KAAK;CACvB;CAEA,sBAAkD;EAChD,MAAM,QAAQ,KAAK,WAAW;EAE9B,IAAI,MAAM,oBAAoB,GAAG,OAAO;EAExC,IAAI,KAAK,cAAc,SAAS,KAAK,KAAK,SAAS,KAAK,CAAC,CAAC,WAAW,GAAG,OAAO;EAE/E,OAAO;CACT;CAKA,iBAA6C;EAC3C,OAAO,CAAC,KAAK;CACf;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EAExB,IAAI,QAAQ,IAAI,YAAY,GAAG;GAC7B,IAAI,KAAK,YACP,KAAK,aAAa,cAAc,KAAK,UAAU;QAE/C,KAAK,gBAAgB,YAAY;EAErC;CACF;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAGpB,IAAI,CADU,KAAK,WAAW,SAChB,CAAC,KAAK,YAAY;EAEhC,kBAAkB,MAAM,EACtB,iBAAiB,KAAK,oBAAoB,IAAI,SAAS,KAAA,EACzD,CAAC;CACH;AACF"}

package/dist/dev/ui/playback-rate-radio-group/element.d.ts

@@ -17,8 +17,12 @@ export declare class PlaybackRateRadioGroupElement extends MenuRadioGroupElement
     disabled: {
       type: BooleanConstructor;
     };
+    rates: {
+      type: StringConstructor;
+    };
   };
   disabled: boolean;
+  rates: readonly number[] | string | undefined;
   formatRate: (rate: number) => string;
   connectedCallback(): void;
   protected update(changed: PropertyValues): void;

package/dist/dev/ui/playback-rate-radio-group/element.js

@@ -17,12 +17,17 @@ var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
 	constructor(..._args) {
 		super(..._args);
 		this.disabled = false;
+		this.rates = void 0;
 		this.formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;
 		this.#core = new PlaybackRateRadioGroupCore();
 		this.#i18n = new I18nController(this, i18nContext);
 		this.#mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
 		this.#options = new RadioOptionsController(this, {
-			setItemAttributes: (item, option) => item.setAttribute("data-rate", option.value),
+			setItemAttributes: (item, option) => {
+				item.setAttribute("data-rate", option.value);
+				item.toggleAttribute("data-custom", option.custom);
+			},
+			getOptionCacheKey: (option) => option.custom ? "custom" : "",
 			onValueChange: (value) => {
 				const media = this.#mediaState.value;
 				if (media) this.#core.selectValue(media, value);
@@ -35,7 +40,8 @@ var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
 	static {
 		this.properties = {
 			...MenuRadioGroupElement.properties,
-			disabled: { type: Boolean }
+			disabled: { type: Boolean },
+			rates: { type: String }
 		};
 	}
 	#core;
@@ -53,7 +59,8 @@ var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
 		if (media) {
 			this.#core.setProps({
 				formatRate: this.formatRate,
-				disabled: this.disabled
+				disabled: this.disabled,
+				rates: this.rates
 			});
 			this.#core.setMedia(media);
 			state = this.#core.getState();

package/dist/dev/ui/playback-rate-radio-group/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/element.ts"],"sourcesContent":["import {\n  PlaybackRateRadioGroupCore,\n  PlaybackRateRadioGroupDataAttrs,\n  type PlaybackRateRadioGroupOption,\n  type PlaybackRateRadioGroupState,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/**\n * Menu radio group that generates a `<media-menu-radio-item>` per available playback rate and shares the selected label\n * and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes\n * each generated item.\n */\nexport class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-playback-rate-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<'value' | 'disabled'>;\n\n  disabled = false;\n  formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;\n\n  readonly #core = new PlaybackRateRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n  readonly #options = new RadioOptionsController<PlaybackRateRadioGroupOption>(this, {\n    setItemAttributes: (item, option) => item.setAttribute('data-rate', option.value),\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: PlaybackRateRadioGroupState | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRate: this.formatRate, disabled: this.disabled });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(\n        translateText(this.#core.getLabel(state), this.#i18n.value, this.#core.getLabelParams(state))\n      );\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, PlaybackRateRadioGroupDataAttrs);\n  }\n}\n\nexport namespace PlaybackRateRadioGroupElement {\n  export type State = PlaybackRateRadioGroupState;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,gCAAb,cAAmD,sBAAsB;;;EAQ5D,KAAA,WAAA;EACE,KAAA,aAAA,2BAA2B,aAAa;EAEpC,KAAA,QAAA,IAAI,2BAA2B;EAC/B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EAC/D,KAAA,WAAA,IAAI,uBAAqD,MAAM;GACjF,oBAAoB,MAAM,WAAW,KAAK,aAAa,aAAa,OAAO,KAAK;GAChF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAK,YAAY;IAE/B,IAAI,OAAO,KAAK,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EApBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAKA;CACA;CACA;CACA;CASA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAK,YAAY,SAAS,KAAK,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAK,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAK,YAAY;EAC/B,IAAI,QAA4C;EAEhD,IAAI,OAAO;GACT,KAAK,MAAM,SAAS;IAAE,YAAY,KAAK;IAAY,UAAU,KAAK;GAAS,CAAC;GAC5E,KAAK,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAK,MAAM,SAAS;GAE5B,KAAK,sBACH,cAAc,KAAK,MAAM,SAAS,KAAK,GAAG,KAAK,MAAM,OAAO,KAAK,MAAM,eAAe,KAAK,CAAC,CAC9F;GACA,KAAK,SAAS,KAAK,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,+BAA+B;CAC7E;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/element.ts"],"sourcesContent":["import {\n  PlaybackRateRadioGroupCore,\n  PlaybackRateRadioGroupDataAttrs,\n  type PlaybackRateRadioGroupOption,\n  type PlaybackRateRadioGroupState,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/**\n * Menu radio group that generates a `<media-menu-radio-item>` per available playback rate and shares the selected label\n * and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes\n * each generated item.\n */\nexport class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-playback-rate-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    rates: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'disabled' | 'rates'>;\n\n  disabled = false;\n  rates: readonly number[] | string | undefined = undefined;\n  formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;\n\n  readonly #core = new PlaybackRateRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n  readonly #options = new RadioOptionsController<PlaybackRateRadioGroupOption>(this, {\n    setItemAttributes: (item, option) => {\n      item.setAttribute('data-rate', option.value);\n      item.toggleAttribute('data-custom', option.custom);\n    },\n    getOptionCacheKey: (option) => (option.custom ? 'custom' : ''),\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: PlaybackRateRadioGroupState | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRate: this.formatRate, disabled: this.disabled, rates: this.rates });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(\n        translateText(this.#core.getLabel(state), this.#i18n.value, this.#core.getLabelParams(state))\n      );\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, PlaybackRateRadioGroupDataAttrs);\n  }\n}\n\nexport namespace PlaybackRateRadioGroupElement {\n  export type State = PlaybackRateRadioGroupState;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,gCAAb,cAAmD,sBAAsB;;;EAS5D,KAAA,WAAA;EACqC,KAAA,QAAA,KAAA;EACnC,KAAA,aAAA,2BAA2B,aAAa;EAEpC,KAAA,QAAA,IAAI,2BAA2B;EAC/B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EAC/D,KAAA,WAAA,IAAI,uBAAqD,MAAM;GACjF,oBAAoB,MAAM,WAAW;IACnC,KAAK,aAAa,aAAa,OAAO,KAAK;IAC3C,KAAK,gBAAgB,eAAe,OAAO,MAAM;GACnD;GACA,oBAAoB,WAAY,OAAO,SAAS,WAAW;GAC3D,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAK,YAAY;IAE/B,IAAI,OAAO,KAAK,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EA1BkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CAaA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAK,YAAY,SAAS,KAAK,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAK,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAK,YAAY;EAC/B,IAAI,QAA4C;EAEhD,IAAI,OAAO;GACT,KAAK,MAAM,SAAS;IAAE,YAAY,KAAK;IAAY,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GAC/F,KAAK,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAK,MAAM,SAAS;GAE5B,KAAK,sBACH,cAAc,KAAK,MAAM,SAAS,KAAK,GAAG,KAAK,MAAM,OAAO,KAAK,MAAM,eAAe,KAAK,CAAC,CAC9F;GACA,KAAK,SAAS,KAAK,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,+BAA+B;CAC7E;AACF"}

package/dist/dev/ui/radio-options/controller.js

@@ -4,6 +4,7 @@ import { MenuItemIndicatorElement } from "../menu/item-indicator.js";
 import { applyElementProps } from "@videojs/core/dom";
 import { translateText } from "@videojs/core/i18n";
 import { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from "@videojs/utils/dom";
+import { isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/radio-options/controller.ts
 /** Renders normalized options into menu radio items and manages their interaction lifecycle. */
 var RadioOptionsController = class {
@@ -37,14 +38,12 @@ var RadioOptionsController = class {
 		const template = getTemplateElement(this.#host);
 		const templateRoot = template ? getTemplateRoot(template) : null;
 		const itemRoot = templateRoot?.localName === MenuRadioItemElement.tagName ? templateRoot : null;
-		const contentKey = `${state.options.map((option) => `${option.value}:${cacheKey(option.label, option.labelParams)}:${this.#config.getOptionCacheKey?.(option) ?? ""}`).join("|")}::${locale}::${template?.innerHTML ?? ""}`;
+		const contentKey = `${state.options.map((option) => `${option.value}:${cacheKey(option.label, option.labelParams)}:${cacheKey(option.ariaLabel ?? "", option.ariaLabelParams)}:${this.#config.getOptionCacheKey?.(option) ?? ""}`).join("|")}::${locale}::${template?.innerHTML ?? ""}`;
 		if (contentKey !== this.#contentKey || translator !== this.#translator) {
 			this.#contentKey = contentKey;
 			this.#translator = translator;
-			for (const child of [...this.#host.children]) {
-				if (child === template) continue;
-				child.remove();
-			}
+			const staleChildren = [...this.#host.children].filter((child) => child !== template);
+			const focusedValue = this.#getFocusedItem()?.value;
 			const items = state.options.map((option) => {
 				const item = itemRoot ? cloneTemplateRoot(itemRoot, this.#host.ownerDocument) : this.#host.ownerDocument.createElement(MenuRadioItemElement.tagName);
 				item.value = option.value;
@@ -52,9 +51,19 @@ var RadioOptionsController = class {
 				const label = translateText(option.label, translator, option.labelParams);
 				if (this.#config.renderItem) this.#config.renderItem(item, label, option);
 				else this.#setItemLabel(item, label);
+				if (!isUndefined(option.ariaLabel)) item.setAttribute("aria-label", translateText(option.ariaLabel, translator, option.ariaLabelParams));
 				return item;
 			});
 			this.#host.append(...items);
+			const removeStale = () => {
+				for (const child of staleChildren) child.remove();
+			};
+			const replacement = isUndefined(focusedValue) ? void 0 : items.find((item) => item.value === focusedValue) ?? items.find((item) => item.value === state.value);
+			if (replacement) replacement.updateComplete.then(() => {
+				replacement.focus();
+				removeStale();
+			});
+			else removeStale();
 		}
 		const optionsByValue = new Map(state.options.map((option) => [option.value, option]));
 		for (const item of this.#host.querySelectorAll(MenuRadioItemElement.tagName)) {
@@ -69,6 +78,10 @@ var RadioOptionsController = class {
 		const { value } = event.detail;
 		this.#config.onValueChange(value);
 	};
+	#getFocusedItem() {
+		const active = this.#host.getRootNode().activeElement;
+		return active instanceof MenuRadioItemElement && active.parentElement === this.#host ? active : null;
+	}
 	#setItemLabel(item, label) {
 		const labelPart = item.querySelector("[data-part~=\"label\"]");
 		if (labelPart) labelPart.textContent = label;