@videojs/html 10.0.0-beta.9 → 10.0.0-rc.2

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

@@ -1,13 +1,24 @@
-import { MediaElement } from "./media-element.js";
-import { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature } from "@videojs/core/dom";
-
+import { i18nContext } from "../i18n/context.js";
+import { I18nController } from "../i18n/controller.js";
+import { UIElement } from "./ui-element.js";
+import { AriaKeyShortcutsController } from "./hotkey/aria-key-shortcuts-controller.js";
+import { HOTKEY_SHORTCUT_CHANGE_EVENT, applyElementProps, applyStateDataAttrs, createButton, logMissingFeature } from "@videojs/core/dom";
+import { isText, resolveText, translateText } from "@videojs/core/i18n";
+import { isBoolean, isObject } from "@videojs/utils/predicate";
 //#region src/ui/media-button-element.ts
+function getLabelParams(core, state) {
+	return core.getLabelParams?.(state);
+}
 /** Abstract base for HTML custom elements that render a media-control button. */
-var MediaButtonElement = class extends MediaElement {
+var MediaButtonElement = class extends UIElement {
 	constructor(..._args) {
 		super(..._args);
 		this.disabled = false;
 		this.label = "";
+		this.hotkeyAction = void 0;
+		this.#disconnect = null;
+		this.#hotkeyRegistry = null;
+		this.#i18n = new I18nController(this, i18nContext);
 	}
 	static {
 		this.properties = {
@@ -15,13 +26,31 @@ var MediaButtonElement = class extends MediaElement {
 			disabled: { type: Boolean }
 		};
 	}
-	#disconnect = null;
+	getIsButtonDisabled() {
+		return this.disabled || !this.mediaState.value;
+	}
+	handleActivate(event, source) {
+		Promise.resolve(this.activate(this.mediaState.value, event, source)).catch((error) => {
+			console.error(`[${this.localName}]`, error);
+		});
+	}
+	/** Override to match hotkeys that use action values, such as seek steps. */
+	get hotkeyValue() {}
+	get $state() {
+		return this.core.state;
+	}
+	#disconnect;
+	#hotkeyRegistry;
+	#lastHotkeyShortcut;
+	#i18n;
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.destroyed) return;
+		if (this.hotkeyAction && !this.#hotkeyRegistry) this.#hotkeyRegistry = new AriaKeyShortcutsController(this, this.hotkeyAction, { value: () => this.hotkeyValue });
 		this.#disconnect = new AbortController();
 		const buttonProps = createButton({
-			onActivate: () => this.activate(this.mediaState.value),
-			isDisabled: () => this.disabled || !this.mediaState.value
+			onActivate: (event, source) => this.handleActivate(event, source),
+			isDisabled: () => this.getIsButtonDisabled()
 		});
 		applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });
 		if (!this.mediaState.value && this.mediaState.displayName) logMissingFeature(this.localName, this.mediaState.displayName);
@@ -31,6 +60,21 @@ var MediaButtonElement = class extends MediaElement {
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
+	/** Returns the button's current label derived from media state. */
+	getLabel() {
+		return this.core.state.current.label ? resolveText(this.core.state.current.label) : void 0;
+	}
+	getShortcut() {
+		return this.#hotkeyRegistry?.shortcut;
+	}
+	/** Resolved label for tooltips and other display surfaces. */
+	getResolvedLabel() {
+		const media = this.mediaState.value;
+		if (!media) return void 0;
+		this.core.setMedia(media);
+		const state = this.core.getState();
+		return translateText(this.core.getLabel(state), this.#i18n.value, getLabelParams(this.core, state));
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.core.setProps?.(this);
@@ -38,14 +82,31 @@ var MediaButtonElement = class extends MediaElement {
 	update(changed) {
 		super.update(changed);
 		const media = this.mediaState.value;
+		this.#syncHotkeyShortcut();
 		if (!media) return;
 		this.core.setMedia(media);
 		const state = this.core.getState();
-		applyElementProps(this, this.core.getAttrs?.(state) ?? {});
+		const attrs = this.core.getAttrs?.(state) ?? {};
+		if (isText(attrs["aria-label"])) attrs["aria-label"] = translateText(attrs["aria-label"], this.#i18n.value, getLabelParams(this.core, state));
+		applyElementProps(this, {
+			...attrs,
+			"aria-keyshortcuts": this.#hotkeyRegistry?.aria,
+			...isHideable(state) && { hidden: state.hidden ? "" : void 0 }
+		});
 		applyStateDataAttrs(this, state, this.stateAttrMap);
 	}
+	#syncHotkeyShortcut() {
+		const shortcut = this.getShortcut();
+		if (shortcut === this.#lastHotkeyShortcut) return;
+		this.#lastHotkeyShortcut = shortcut;
+		this.dispatchEvent(new CustomEvent(HOTKEY_SHORTCUT_CHANGE_EVENT));
+	}
 };
-
+/** Whether a button's core reports whether it should be shown at all. */
+function isHideable(state) {
+	return isObject(state) && isBoolean(state.hidden);
+}
 //#endregion
 export { MediaButtonElement };
+
 //# sourceMappingURL=media-button-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"media-button-element.js","names":["#disconnect"],"sources":["../../../src/ui/media-button-element.ts"],"sourcesContent":["import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that render a media-control button. */\nexport abstract class MediaButtonElement<Core extends MediaUIComponent> extends MediaElement {\n  static override properties: PropertyDeclarationMap = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  disabled = false;\n  label = '';\n\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  protected abstract activate(state: InferMediaState<Core>): void;\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: () => this.activate(this.mediaState.value!),\n      isDisabled: () => this.disabled || !this.mediaState.value,\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  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    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyElementProps(this, this.core.getAttrs?.(state) ?? {});\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAQA,IAAsB,qBAAtB,cAAgF,aAAa;;;kBAMhF;eACH;;;oBAN6C;GACnD,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAWD,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKA,aAAc,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,KAAK,SAAS,KAAK,WAAW,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,KAAK,WAAW;GACrD,CAAC;AAEF,oBAAkB,MAAM,aAAa,EAAE,QAAQ,MAAKA,WAAY,QAAQ,CAAC;AAEzE,MAAe,CAAC,KAAK,WAAW,SAAS,KAAK,WAAW,YACvD,mBAAkB,KAAK,WAAW,KAAK,WAAW,YAAY;;CAIlE,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,OAAK,KAAK,WAAW,KAAK;;CAG5B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,KAAK,WAAW;AAE9B,MAAI,CAAC,MAAO;AAEZ,OAAK,KAAK,SAAS,MAAM;EACzB,MAAM,QAAQ,KAAK,KAAK,UAAU;AAClC,oBAAkB,MAAM,KAAK,KAAK,WAAW,MAAM,IAAI,EAAE,CAAC;AAC1D,sBAAoB,MAAM,OAAO,KAAK,aAAa"}
+{"version":3,"file":"media-button-element.js","names":["#i18n","#hotkeyRegistry","#disconnect","#syncHotkeyShortcut","#lastHotkeyShortcut"],"sources":["../../../src/ui/media-button-element.ts"],"sourcesContent":["import type {\n  ButtonState,\n  InferComponentState,\n  InferMediaState,\n  MediaButtonComponent,\n  StateAttrMap,\n} 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>;\ntype LabelParamsCore<Core extends MediaButtonComponent> = Core & {\n  getLabelParams?: (state: InferComponentState<Core>) => LabelParams | undefined;\n};\n\nfunction getLabelParams<Core extends MediaButtonComponent>(\n  core: Core,\n  state: InferComponentState<Core>\n): LabelParams | undefined {\n  return (core as LabelParamsCore<Core>).getLabelParams?.(state);\n}\n\n/** Abstract base for HTML custom elements that render a media-control button. */\nexport abstract class MediaButtonElement<Core extends MediaButtonComponent> 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: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  protected abstract activate(\n    state: InferMediaState<Core>,\n    event: UIEvent,\n    source: ButtonActivationSource\n  ): 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() as InferComponentState<Core>;\n\n    return translateText(this.core.getLabel(state), this.#i18n.value, getLabelParams(this.core, 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() as InferComponentState<Core>;\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, getLabelParams(this.core, 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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"}

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

@@ -1,11 +1,11 @@
-import { MediaElement } from "./media-element.js";
-import { PlayerController } from "../player/player-controller.js";
-import { PropertyValues } from "@videojs/element";
+import { UIElement } from "./ui-element.js";
+import { PlayerController } from "../player/controller.js";
 import { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from "@videojs/core";
-
+import { PropertyValues } from "@videojs/element";
 //#region src/ui/media-ui-element.d.ts
 /** Abstract base for HTML custom elements that display media state with data attributes. */
-declare abstract class MediaUIElement<Core extends MediaUIComponent> extends MediaElement {
+declare abstract class MediaUIElement<Core extends MediaUIComponent> extends UIElement {
+  #private;
   protected abstract readonly core: Core;
   protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;
   protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;

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

@@ -1 +1 @@
-{"version":3,"file":"media-ui-element.d.ts","names":[],"sources":["../../../src/ui/media-ui-element.ts"],"mappings":";;;;;;;uBAQsB,cAAA,cAA4B,gBAAA,UAA0B,YAAA;EAAA,4BAC9C,IAAA,EAAM,IAAA;EAAA,4BACN,YAAA,EAAc,YAAA,CAAa,mBAAA,CAAoB,IAAA;EAAA,4BAC/C,UAAA,EAAY,gBAAA,MAAsB,eAAA,CAAgB,IAAA;EAErE,iBAAA,CAAA;EAAA,UAQU,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}
+{"version":3,"file":"media-ui-element.d.ts","names":[],"sources":["../../../src/ui/media-ui-element.ts"],"mappings":";;;;;;uBAYsB,eAAe,aAAa,0BAA0B;;8BAG9C,MAAM;8BACN,cAAc,aAAa,oBAAoB;8BAC/C,YAAY,sBAAsB,gBAAgB;EAErE;YAQU,OAAO,SAAS"}

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

@@ -1,9 +1,13 @@
-import { MediaElement } from "./media-element.js";
-import { applyStateDataAttrs, logMissingFeature } from "@videojs/core/dom";
-
+import { i18nContext } from "../i18n/context.js";
+import { I18nController } from "../i18n/controller.js";
+import { UIElement } from "./ui-element.js";
+import { applyElementProps, applyStateDataAttrs, logMissingFeature } from "@videojs/core/dom";
+import { isText, translateText } from "@videojs/core/i18n";
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/media-ui-element.ts
 /** Abstract base for HTML custom elements that display media state with data attributes. */
-var MediaUIElement = class extends MediaElement {
+var MediaUIElement = class extends UIElement {
+	#i18n = new I18nController(this, i18nContext);
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.mediaState.value && this.mediaState.displayName) logMissingFeature(this.localName, this.mediaState.displayName);
@@ -14,10 +18,15 @@ var MediaUIElement = class extends MediaElement {
 		if (!media) return;
 		this.core.setMedia(media);
 		const state = this.core.getState();
+		if (isFunction(this.core.getAttrs)) {
+			const attrs = this.core.getAttrs(state);
+			if (isText(attrs["aria-label"])) attrs["aria-label"] = translateText(attrs["aria-label"], this.#i18n.value);
+			applyElementProps(this, attrs);
+		}
 		applyStateDataAttrs(this, state, this.stateAttrMap);
 	}
 };
-
 //#endregion
 export { MediaUIElement };
+
 //# sourceMappingURL=media-ui-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"media-ui-element.js","names":[],"sources":["../../../src/ui/media-ui-element.ts"],"sourcesContent":["import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that display media state with data attributes. */\nexport abstract class MediaUIElement<Core extends MediaUIComponent> extends MediaElement {\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\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    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAQA,IAAsB,iBAAtB,cAA4E,aAAa;CAKvF,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,KAAK,WAAW,SAAS,KAAK,WAAW,YACvD,mBAAkB,KAAK,WAAW,KAAK,WAAW,YAAY;;CAIlE,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,KAAK,WAAW;AAE9B,MAAI,CAAC,MAAO;AAEZ,OAAK,KAAK,SAAS,MAAM;EACzB,MAAM,QAAQ,KAAK,KAAK,UAAU;AAClC,sBAAoB,MAAM,OAAO,KAAK,aAAa"}
+{"version":3,"file":"media-ui-element.js","names":["#i18n"],"sources":["../../../src/ui/media-ui-element.ts"],"sourcesContent":["import type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature } from '@videojs/core/dom';\nimport { isText, translateText } from '@videojs/core/i18n';\nimport type { PropertyValues } from '@videojs/element';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../i18n/context';\nimport { I18nController } from '../i18n/controller';\nimport type { PlayerController } from '../player/controller';\nimport { UIElement } from './ui-element';\n\n/** Abstract base for HTML custom elements that display media state with data attributes. */\nexport abstract class MediaUIElement<Core extends MediaUIComponent> extends UIElement {\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\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    super.update(changed);\n\n    const media = this.mediaState.value;\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n\n    if (isFunction(this.core.getAttrs)) {\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);\n      }\n\n      applyElementProps(this, attrs);\n    }\n\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;;;AAYA,IAAsB,iBAAtB,cAA4E,UAAU;CACpF,QAAiB,IAAI,eAAe,MAAM,WAAW;CAMrD,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAe,CAAC,KAAK,WAAW,SAAS,KAAK,WAAW,aACvD,kBAAkB,KAAK,WAAW,KAAK,WAAW,WAAW;CAEjE;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,QAAQ,KAAK,WAAW;EAC9B,IAAI,CAAC,OAAO;EAEZ,KAAK,KAAK,SAAS,KAAK;EACxB,MAAM,QAAQ,KAAK,KAAK,SAAS;EAEjC,IAAI,WAAW,KAAK,KAAK,QAAQ,GAAG;GAClC,MAAM,QAAQ,KAAK,KAAK,SAAS,KAAK;GAEtC,IAAI,OAAO,MAAM,aAAa,GAC5B,MAAM,gBAAgB,cAAc,MAAM,eAAe,KAAKA,MAAM,KAAK;GAG3E,kBAAkB,MAAM,KAAK;EAC/B;EAEA,oBAAoB,MAAM,OAAO,KAAK,YAAY;CACpD;AACF"}

package/dist/dev/ui/menu/checkbox-item.d.ts

@@ -0,0 +1,24 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/menu/checkbox-item.d.ts
+/** @fires checked-change - Fired when the checked state changes. */
+declare class MenuCheckboxItemElement extends UIElement {
+  #private;
+  static readonly tagName = "media-menu-checkbox-item";
+  static properties: {
+    checked: {
+      type: BooleanConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+  };
+  checked: boolean;
+  disabled: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { MenuCheckboxItemElement };
+//# sourceMappingURL=checkbox-item.d.ts.map

package/dist/dev/ui/menu/checkbox-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-item.d.ts","names":[],"sources":["../../../../src/ui/menu/checkbox-item.ts"],"mappings":";;;;cAQa,gCAAgC;;kBAC3B;SAEA;;MACH,MAAI;;;MACH,MAAI;;;EAGlB;EACA;EAQS;EAMA;YASU,OAAO,UAAU"}

package/dist/dev/ui/menu/checkbox-item.js

@@ -0,0 +1,81 @@
+import { UIElement } from "../ui-element.js";
+import { menuContext } from "./context.js";
+import { applyElementProps } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/checkbox-item.ts
+/** @fires checked-change - Fired when the checked state changes. */
+var MenuCheckboxItemElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.disabled = false;
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#registered = false;
+		this.#cleanupRegistration = null;
+	}
+	static {
+		this.tagName = "media-menu-checkbox-item";
+	}
+	static {
+		this.properties = {
+			checked: { type: Boolean },
+			disabled: { type: Boolean }
+		};
+	}
+	#ctx;
+	#disconnect;
+	#registered;
+	#cleanupRegistration;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#registered = false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#registered = false;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx || !this.#disconnect) return;
+		if (!this.#registered) {
+			this.#registered = true;
+			this.#cleanupRegistration = ctx.menu.registerItem(this);
+			applyElementProps(this, {
+				onClick: () => {
+					if (!this.#ctx.value || this.disabled) return;
+					this.checked = !this.checked;
+					this.dispatchEvent(new CustomEvent("checked-change", {
+						detail: { checked: this.checked },
+						bubbles: true
+					}));
+				},
+				onPointerenter: () => {
+					const currentCtx = this.#ctx.value;
+					if (!this.disabled) currentCtx?.menu.highlight(this, {
+						focus: false,
+						pointer: true
+					});
+				}
+			}, { signal: this.#disconnect.signal });
+		}
+		applyElementProps(this, {
+			role: "menuitemcheckbox",
+			"aria-checked": String(this.checked),
+			"aria-disabled": this.disabled ? "true" : void 0
+		});
+	}
+};
+//#endregion
+export { MenuCheckboxItemElement };
+
+//# sourceMappingURL=checkbox-item.js.map

package/dist/dev/ui/menu/checkbox-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-item.js","names":["#ctx","#disconnect","#registered","#cleanupRegistration"],"sources":["../../../../src/ui/menu/checkbox-item.ts"],"sourcesContent":["import { applyElementProps } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { menuContext } from './context';\n\n/** @fires checked-change - Fired when the checked state changes. */\nexport class MenuCheckboxItemElement extends UIElement {\n  static readonly tagName = 'media-menu-checkbox-item';\n\n  static override properties = {\n    checked: { type: Boolean },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<'checked' | 'disabled'>;\n\n  checked = false;\n  disabled = false;\n\n  readonly #ctx = new ContextConsumer(this, { context: menuContext, subscribe: true });\n\n  #disconnect: AbortController | null = null;\n  #registered = false;\n  #cleanupRegistration: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n    this.#registered = false;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupRegistration?.();\n    this.#cleanupRegistration = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    this.#registered = false;\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (!ctx || !this.#disconnect) return;\n\n    if (!this.#registered) {\n      this.#registered = true;\n\n      this.#cleanupRegistration = ctx.menu.registerItem(this);\n\n      applyElementProps(\n        this,\n        {\n          onClick: () => {\n            const currentCtx = this.#ctx.value;\n            if (!currentCtx || this.disabled) return;\n\n            this.checked = !this.checked;\n            this.dispatchEvent(new CustomEvent('checked-change', { detail: { checked: this.checked }, bubbles: true }));\n          },\n          onPointerenter: () => {\n            const currentCtx = this.#ctx.value;\n\n            if (!this.disabled) currentCtx?.menu.highlight(this, { focus: false, pointer: true });\n          },\n        },\n        { signal: this.#disconnect.signal }\n      );\n    }\n\n    applyElementProps(this, {\n      role: 'menuitemcheckbox',\n      'aria-checked': String(this.checked),\n      'aria-disabled': this.disabled ? 'true' : undefined,\n    });\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,0BAAb,cAA6C,UAAU;;;EAQ3C,KAAA,UAAA;EACC,KAAA,WAAA;EAEK,KAAA,OAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAa,WAAW;EAAK,CAAC;EAE7C,KAAA,cAAA;EACxB,KAAA,cAAA;EAC8B,KAAA,uBAAA;;;EAdlB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,SAAS,EAAE,MAAM,QAAQ;GACzB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAKA;CAEA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAKC,cAAc,IAAI,gBAAgB;EACvC,KAAKC,cAAc;CACrB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKC,uBAAuB;EAC5B,KAAKA,uBAAuB;EAC5B,KAAKF,aAAa,MAAM;EACxB,KAAKA,cAAc;EACnB,KAAKC,cAAc;CACrB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKF,KAAK;EACtB,IAAI,CAAC,OAAO,CAAC,KAAKC,aAAa;EAE/B,IAAI,CAAC,KAAKC,aAAa;GACrB,KAAKA,cAAc;GAEnB,KAAKC,uBAAuB,IAAI,KAAK,aAAa,IAAI;GAEtD,kBACE,MACA;IACE,eAAe;KAEb,IAAI,CADe,KAAKH,KAAK,SACV,KAAK,UAAU;KAElC,KAAK,UAAU,CAAC,KAAK;KACrB,KAAK,cAAc,IAAI,YAAY,kBAAkB;MAAE,QAAQ,EAAE,SAAS,KAAK,QAAQ;MAAG,SAAS;KAAK,CAAC,CAAC;IAC5G;IACA,sBAAsB;KACpB,MAAM,aAAa,KAAKA,KAAK;KAE7B,IAAI,CAAC,KAAK,UAAU,YAAY,KAAK,UAAU,MAAM;MAAE,OAAO;MAAO,SAAS;KAAK,CAAC;IACtF;GACF,GACA,EAAE,QAAQ,KAAKC,YAAY,OAAO,CACpC;EACF;EAEA,kBAAkB,MAAM;GACtB,MAAM;GACN,gBAAgB,OAAO,KAAK,OAAO;GACnC,iBAAiB,KAAK,WAAW,SAAS,KAAA;EAC5C,CAAC;CACH;AACF"}

package/dist/dev/ui/menu/content.d.ts

@@ -0,0 +1,31 @@
+import { UIElement } from "../ui-element.js";
+import { MenuContextValue } from "./context.js";
+import { MenuOpenChangeReason } from "@videojs/core/dom";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/menu/content.d.ts
+/** One accessible menu page. Root and nested pages are sibling children of `<media-menu>`. */
+declare class MenuContentElement extends UIElement {
+  #private;
+  static readonly tagName = "media-menu-content";
+  static properties: {
+    open: {
+      type: BooleanConstructor;
+    };
+    defaultOpen: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+  };
+  open: boolean;
+  defaultOpen: boolean;
+  get context(): MenuContextValue | null;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  openMenu(reason?: MenuOpenChangeReason): void;
+  close(reason?: MenuOpenChangeReason): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { MenuContentElement };
+//# sourceMappingURL=content.d.ts.map

package/dist/dev/ui/menu/content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","names":[],"sources":["../../../../src/ui/menu/content.ts"],"mappings":";;;;;;cAoBa,2BAA2B;;kBACtB;SAEA;;MACN,MAAI;;;MACG,MAAI;MAAW;;;EAGhC;EACA;MAwBI,WAAW;EAIN;EAaA;EAUT,SAAS,SAAQ;EAIjB,MAAM,SAAQ;YAIK,WAAW,SAAS;YAQpB,OAAO,SAAS"}