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

package/dist/default/ui/menu/menu-group-controller.js

@@ -0,0 +1,47 @@
+import { menuGroupContext } from "./context.js";
+import { applyElementProps } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+//#region src/ui/menu/menu-group-controller.ts
+var MenuGroupController = class {
+	#host;
+	#provider;
+	#contextValue = { registerLabel: (id) => this.#registerLabel(id) };
+	#labelId;
+	#appliedLabelId;
+	constructor(host) {
+		this.#host = host;
+		this.#provider = new ContextProvider(host, {
+			context: menuGroupContext,
+			initialValue: this.#contextValue
+		});
+	}
+	applyProps() {
+		const currentLabelledBy = this.#host.getAttribute("aria-labelledby") ?? void 0;
+		const hasExplicitLabelledBy = currentLabelledBy !== void 0 && currentLabelledBy !== this.#appliedLabelId;
+		if (this.#host.hasAttribute("aria-label") || hasExplicitLabelledBy) {
+			if (this.#appliedLabelId && currentLabelledBy === this.#appliedLabelId) this.#host.removeAttribute("aria-labelledby");
+			this.#appliedLabelId = void 0;
+			applyElementProps(this.#host, { role: "group" });
+			return;
+		}
+		this.#appliedLabelId = this.#labelId;
+		applyElementProps(this.#host, {
+			role: "group",
+			"aria-labelledby": this.#labelId
+		});
+	}
+	#registerLabel(id) {
+		this.#labelId = id;
+		this.#provider.setValue(this.#contextValue);
+		this.#host.requestUpdate();
+		return () => {
+			if (this.#labelId !== id) return;
+			this.#labelId = void 0;
+			this.#host.requestUpdate();
+		};
+	}
+};
+//#endregion
+export { MenuGroupController };
+
+//# sourceMappingURL=menu-group-controller.js.map

package/dist/default/ui/menu/menu-group-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-controller.js","names":["#host","#provider","#contextValue","#registerLabel","#appliedLabelId","#labelId"],"sources":["../../../../src/ui/menu/menu-group-controller.ts"],"sourcesContent":["import { applyElementProps } from '@videojs/core/dom';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport type { UIElement } from '../ui-element';\nimport { menuGroupContext } from './context';\n\ninterface MenuGroupHost extends UIElement {\n  requestUpdate(): void;\n}\n\nexport class MenuGroupController {\n  readonly #host: MenuGroupHost;\n  readonly #provider: ContextProvider<typeof menuGroupContext, MenuGroupHost>;\n  readonly #contextValue = {\n    registerLabel: (id: string) => this.#registerLabel(id),\n  };\n\n  #labelId: string | undefined;\n  #appliedLabelId: string | undefined;\n\n  constructor(host: MenuGroupHost) {\n    this.#host = host;\n    this.#provider = new ContextProvider(host, {\n      context: menuGroupContext,\n      initialValue: this.#contextValue,\n    });\n  }\n\n  applyProps(): void {\n    const currentLabelledBy = this.#host.getAttribute('aria-labelledby') ?? undefined;\n    const hasExplicitLabelledBy = currentLabelledBy !== undefined && currentLabelledBy !== this.#appliedLabelId;\n    const hasExplicitLabel = this.#host.hasAttribute('aria-label') || hasExplicitLabelledBy;\n\n    if (hasExplicitLabel) {\n      if (this.#appliedLabelId && currentLabelledBy === this.#appliedLabelId) {\n        this.#host.removeAttribute('aria-labelledby');\n      }\n\n      this.#appliedLabelId = undefined;\n      applyElementProps(this.#host, { role: 'group' });\n      return;\n    }\n\n    this.#appliedLabelId = this.#labelId;\n    applyElementProps(this.#host, {\n      role: 'group',\n      'aria-labelledby': this.#labelId,\n    });\n  }\n\n  #registerLabel(id: string): () => void {\n    this.#labelId = id;\n    this.#provider.setValue(this.#contextValue);\n    this.#host.requestUpdate();\n\n    return () => {\n      if (this.#labelId !== id) return;\n\n      this.#labelId = undefined;\n      this.#host.requestUpdate();\n    };\n  }\n}\n"],"mappings":";;;;AAUA,IAAa,sBAAb,MAAiC;CAC/B;CACA;CACA,gBAAyB,EACvB,gBAAgB,OAAe,KAAKG,eAAe,EAAE,EACvD;CAEA;CACA;CAEA,YAAY,MAAqB;EAC/B,KAAKH,QAAQ;EACb,KAAKC,YAAY,IAAI,gBAAgB,MAAM;GACzC,SAAS;GACT,cAAc,KAAKC;EACrB,CAAC;CACH;CAEA,aAAmB;EACjB,MAAM,oBAAoB,KAAKF,MAAM,aAAa,iBAAiB,KAAK,KAAA;EACxE,MAAM,wBAAwB,sBAAsB,KAAA,KAAa,sBAAsB,KAAKI;EAG5F,IAFyB,KAAKJ,MAAM,aAAa,YAAY,KAAK,uBAE5C;GACpB,IAAI,KAAKI,mBAAmB,sBAAsB,KAAKA,iBACrD,KAAKJ,MAAM,gBAAgB,iBAAiB;GAG9C,KAAKI,kBAAkB,KAAA;GACvB,kBAAkB,KAAKJ,OAAO,EAAE,MAAM,QAAQ,CAAC;GAC/C;EACF;EAEA,KAAKI,kBAAkB,KAAKC;EAC5B,kBAAkB,KAAKL,OAAO;GAC5B,MAAM;GACN,mBAAmB,KAAKK;EAC1B,CAAC;CACH;CAEA,eAAe,IAAwB;EACrC,KAAKA,WAAW;EAChB,KAAKJ,UAAU,SAAS,KAAKC,aAAa;EAC1C,KAAKF,MAAM,cAAc;EAEzB,aAAa;GACX,IAAI,KAAKK,aAAa,IAAI;GAE1B,KAAKA,WAAW,KAAA;GAChB,KAAKL,MAAM,cAAc;EAC3B;CACF;AACF"}

package/dist/default/ui/menu/menu-group-element.js

@@ -0,0 +1,17 @@
+import { UIElement } from "../ui-element.js";
+import { MenuGroupController } from "./menu-group-controller.js";
+//#region src/ui/menu/menu-group-element.ts
+var MenuGroupElement = class extends UIElement {
+	static {
+		this.tagName = "media-menu-group";
+	}
+	#group = new MenuGroupController(this);
+	update(_changed) {
+		super.update(_changed);
+		this.#group.applyProps();
+	}
+};
+//#endregion
+export { MenuGroupElement };
+
+//# sourceMappingURL=menu-group-element.js.map

package/dist/default/ui/menu/menu-group-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-element.js","names":["#group"],"sources":["../../../../src/ui/menu/menu-group-element.ts"],"sourcesContent":["import type { PropertyValues } from '@videojs/element';\n\nimport { UIElement } from '../ui-element';\nimport { MenuGroupController } from './menu-group-controller';\n\nexport class MenuGroupElement extends UIElement {\n  static readonly tagName = 'media-menu-group';\n\n  readonly #group = new MenuGroupController(this);\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    this.#group.applyProps();\n  }\n}\n"],"mappings":";;;AAKA,IAAa,mBAAb,cAAsC,UAAU;;EACpB,KAAA,UAAA;;CAE1B,SAAkB,IAAI,oBAAoB,IAAI;CAE9C,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,KAAKA,OAAO,WAAW;CACzB;AACF"}

package/dist/default/ui/menu/menu-group-label-element.js

@@ -0,0 +1,45 @@
+import { UIElement } from "../ui-element.js";
+import { menuGroupContext } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/menu-group-label-element.ts
+let idCounter = 0;
+var MenuGroupLabelElement = class extends UIElement {
+	static {
+		this.tagName = "media-menu-group-label";
+	}
+	#groupCtx = new ContextConsumer(this, {
+		context: menuGroupContext,
+		subscribe: true
+	});
+	#generatedId = `vjs-menu-group-label-${idCounter++}`;
+	#cleanupRegistration = null;
+	#registeredId = null;
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#registeredId = null;
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.id) this.id = this.#generatedId;
+		this.#registerLabel();
+	}
+	#registerLabel() {
+		const groupCtx = this.#groupCtx.value;
+		if (!groupCtx) {
+			this.#cleanupRegistration?.();
+			this.#cleanupRegistration = null;
+			this.#registeredId = null;
+			return;
+		}
+		if (this.#registeredId === this.id) return;
+		this.#cleanupRegistration?.();
+		this.#registeredId = this.id;
+		this.#cleanupRegistration = groupCtx.registerLabel(this.id);
+	}
+};
+//#endregion
+export { MenuGroupLabelElement };
+
+//# sourceMappingURL=menu-group-label-element.js.map

package/dist/default/ui/menu/menu-group-label-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-label-element.js","names":["#groupCtx","#generatedId","#cleanupRegistration","#registeredId","#registerLabel"],"sources":["../../../../src/ui/menu/menu-group-label-element.ts"],"sourcesContent":["import type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { menuGroupContext } from './context';\n\nlet idCounter = 0;\n\nexport class MenuGroupLabelElement extends UIElement {\n  static readonly tagName = 'media-menu-group-label';\n\n  readonly #groupCtx = new ContextConsumer(this, { context: menuGroupContext, subscribe: true });\n  readonly #generatedId = `vjs-menu-group-label-${idCounter++}`;\n\n  #cleanupRegistration: (() => void) | null = null;\n  #registeredId: string | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupRegistration?.();\n    this.#cleanupRegistration = null;\n    this.#registeredId = null;\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.id) {\n      this.id = this.#generatedId;\n    }\n\n    this.#registerLabel();\n  }\n\n  #registerLabel(): void {\n    const groupCtx = this.#groupCtx.value;\n\n    if (!groupCtx) {\n      this.#cleanupRegistration?.();\n      this.#cleanupRegistration = null;\n      this.#registeredId = null;\n      return;\n    }\n\n    if (this.#registeredId === this.id) return;\n\n    this.#cleanupRegistration?.();\n    this.#registeredId = this.id;\n    this.#cleanupRegistration = groupCtx.registerLabel(this.id);\n  }\n}\n"],"mappings":";;;;AAMA,IAAI,YAAY;AAEhB,IAAa,wBAAb,cAA2C,UAAU;;EACzB,KAAA,UAAA;;CAE1B,YAAqB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAkB,WAAW;CAAK,CAAC;CAC7F,eAAwB,wBAAwB;CAEhD,uBAA4C;CAC5C,gBAA+B;CAE/B,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKE,uBAAuB;EAC5B,KAAKA,uBAAuB;EAC5B,KAAKC,gBAAgB;CACvB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,IAAI,CAAC,KAAK,IACR,KAAK,KAAK,KAAKF;EAGjB,KAAKG,eAAe;CACtB;CAEA,iBAAuB;EACrB,MAAM,WAAW,KAAKJ,UAAU;EAEhC,IAAI,CAAC,UAAU;GACb,KAAKE,uBAAuB;GAC5B,KAAKA,uBAAuB;GAC5B,KAAKC,gBAAgB;GACrB;EACF;EAEA,IAAI,KAAKA,kBAAkB,KAAK,IAAI;EAEpC,KAAKD,uBAAuB;EAC5B,KAAKC,gBAAgB,KAAK;EAC1B,KAAKD,uBAAuB,SAAS,cAAc,KAAK,EAAE;CAC5D;AACF"}

package/dist/default/ui/menu/menu-item-element.js

@@ -0,0 +1,108 @@
+import { UIElement } from "../ui-element.js";
+import { menuContext } from "./context.js";
+import { applyElementProps, completeMenuItemSelection } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/menu-item-element.ts
+var MenuItemElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.commandfor = void 0;
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#registeredMenu = null;
+		this.#cleanupRegistration = null;
+	}
+	static {
+		this.tagName = "media-menu-item";
+	}
+	static {
+		this.properties = {
+			disabled: { type: Boolean },
+			commandfor: { type: String }
+		};
+	}
+	#ctx;
+	#disconnect;
+	#registeredMenu;
+	#cleanupRegistration;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#registeredMenu = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx || !this.#disconnect) return;
+		if (this.#registeredMenu !== ctx.menu) {
+			this.#cleanupRegistration?.();
+			this.#registeredMenu = ctx.menu;
+			this.#cleanupRegistration = ctx.menu.registerItem(this);
+			applyElementProps(this, {
+				onClick: (event) => {
+					const currentCtx = this.#ctx.value;
+					if (!currentCtx || this.#isDisabled()) return;
+					const target = this.commandfor;
+					if (target) this.#openSubmenu(target);
+					else {
+						const select = new CustomEvent("select", {
+							bubbles: true,
+							cancelable: true
+						});
+						if (!this.dispatchEvent(select)) {
+							event.preventDefault();
+							return;
+						}
+						completeMenuItemSelection(currentCtx.menu);
+					}
+					event.preventDefault();
+				},
+				onKeyDown: (event) => {
+					if (!this.#ctx.value || this.#isDisabled() || event.key !== "ArrowRight") return;
+					const target = this.commandfor;
+					if (!target) return;
+					this.#openSubmenu(target);
+					event.preventDefault();
+				},
+				onPointerenter: () => {
+					const currentCtx = this.#ctx.value;
+					if (!this.#isDisabled()) currentCtx?.menu.highlight(this, {
+						focus: false,
+						pointer: true
+					});
+				}
+			}, { signal: this.#disconnect.signal });
+		}
+		const hasSubmenu = Boolean(this.commandfor);
+		applyElementProps(this, {
+			role: "menuitem",
+			"aria-disabled": this.#isDisabled() ? "true" : void 0,
+			...hasSubmenu && {
+				"aria-haspopup": "menu",
+				"aria-expanded": "false",
+				"data-has-submenu": ""
+			}
+		});
+	}
+	#openSubmenu(id) {
+		this.getRootNode().querySelector(`#${CSS.escape(id)}`)?.openMenu?.("click");
+	}
+	#isDisabled() {
+		return this.disabled || this.getAttribute("aria-disabled") === "true";
+	}
+};
+//#endregion
+export { MenuItemElement };
+
+//# sourceMappingURL=menu-item-element.js.map

package/dist/default/ui/menu/menu-item-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-element.js","names":["#ctx","#disconnect","#cleanupRegistration","#registeredMenu","#isDisabled","#openSubmenu"],"sources":["../../../../src/ui/menu/menu-item-element.ts"],"sourcesContent":["import { applyElementProps, completeMenuItemSelection } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { type MenuContextValue, menuContext } from './context';\n\nexport class MenuItemElement extends UIElement {\n  static readonly tagName = 'media-menu-item';\n\n  static override properties = {\n    disabled: { type: Boolean },\n    commandfor: { type: String },\n  } satisfies PropertyDeclarationMap<'disabled' | 'commandfor'>;\n\n  disabled = false;\n  /** ID of a nested `<media-menu-content>` page to open when activated. */\n  commandfor: string | undefined = undefined;\n  readonly #ctx = new ContextConsumer(this, { context: menuContext, subscribe: true });\n\n  #disconnect: AbortController | null = null;\n  #registeredMenu: MenuContextValue['menu'] | null = null;\n  #cleanupRegistration: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupRegistration?.();\n    this.#cleanupRegistration = null;\n    this.#registeredMenu = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\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.#registeredMenu !== ctx.menu) {\n      this.#cleanupRegistration?.();\n      this.#registeredMenu = ctx.menu;\n      this.#cleanupRegistration = ctx.menu.registerItem(this);\n\n      applyElementProps(\n        this,\n        {\n          onClick: (event: MouseEvent) => {\n            const currentCtx = this.#ctx.value;\n            if (!currentCtx || this.#isDisabled()) return;\n\n            const target = this.commandfor;\n\n            if (target) {\n              this.#openSubmenu(target);\n            } else {\n              const select = new CustomEvent('select', { bubbles: true, cancelable: true });\n\n              if (!this.dispatchEvent(select)) {\n                event.preventDefault();\n                return;\n              }\n\n              completeMenuItemSelection(currentCtx.menu);\n            }\n\n            event.preventDefault();\n          },\n          onKeyDown: (event: KeyboardEvent) => {\n            const currentCtx = this.#ctx.value;\n            if (!currentCtx || this.#isDisabled() || event.key !== 'ArrowRight') return;\n\n            const target = this.commandfor;\n            if (!target) return;\n\n            this.#openSubmenu(target);\n            event.preventDefault();\n          },\n          onPointerenter: () => {\n            const currentCtx = this.#ctx.value;\n\n            if (!this.#isDisabled()) currentCtx?.menu.highlight(this, { focus: false, pointer: true });\n          },\n        },\n        { signal: this.#disconnect.signal }\n      );\n    }\n\n    const hasSubmenu = Boolean(this.commandfor);\n\n    applyElementProps(this, {\n      role: 'menuitem',\n      'aria-disabled': this.#isDisabled() ? 'true' : undefined,\n      ...(hasSubmenu && {\n        'aria-haspopup': 'menu',\n        'aria-expanded': 'false',\n        'data-has-submenu': '',\n      }),\n    });\n  }\n\n  #openSubmenu(id: string): void {\n    const root = this.getRootNode() as Document | ShadowRoot;\n    const submenu = root.querySelector<HTMLElement>(`#${CSS.escape(id)}`) as HTMLElement & {\n      openMenu?: (reason?: 'click') => void;\n    };\n\n    submenu?.openMenu?.('click');\n  }\n\n  #isDisabled(): boolean {\n    return this.disabled || this.getAttribute('aria-disabled') === 'true';\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,kBAAb,cAAqC,UAAU;;;EAQlC,KAAA,WAAA;EAEsB,KAAA,aAAA,KAAA;EACjB,KAAA,OAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAa,WAAW;EAAK,CAAC;EAE7C,KAAA,cAAA;EACa,KAAA,kBAAA;EACP,KAAA,uBAAA;;;EAdlB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,UAAU,EAAE,MAAM,QAAQ;GAC1B,YAAY,EAAE,MAAM,OAAO;EAC7B;;CAKA;CAEA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAKC,cAAc,IAAI,gBAAgB;CACzC;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKC,uBAAuB;EAC5B,KAAKA,uBAAuB;EAC5B,KAAKC,kBAAkB;EACvB,KAAKF,aAAa,MAAM;EACxB,KAAKA,cAAc;CACrB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKD,KAAK;EACtB,IAAI,CAAC,OAAO,CAAC,KAAKC,aAAa;EAE/B,IAAI,KAAKE,oBAAoB,IAAI,MAAM;GACrC,KAAKD,uBAAuB;GAC5B,KAAKC,kBAAkB,IAAI;GAC3B,KAAKD,uBAAuB,IAAI,KAAK,aAAa,IAAI;GAEtD,kBACE,MACA;IACE,UAAU,UAAsB;KAC9B,MAAM,aAAa,KAAKF,KAAK;KAC7B,IAAI,CAAC,cAAc,KAAKI,YAAY,GAAG;KAEvC,MAAM,SAAS,KAAK;KAEpB,IAAI,QACF,KAAKC,aAAa,MAAM;UACnB;MACL,MAAM,SAAS,IAAI,YAAY,UAAU;OAAE,SAAS;OAAM,YAAY;MAAK,CAAC;MAE5E,IAAI,CAAC,KAAK,cAAc,MAAM,GAAG;OAC/B,MAAM,eAAe;OACrB;MACF;MAEA,0BAA0B,WAAW,IAAI;KAC3C;KAEA,MAAM,eAAe;IACvB;IACA,YAAY,UAAyB;KAEnC,IAAI,CADe,KAAKL,KAAK,SACV,KAAKI,YAAY,KAAK,MAAM,QAAQ,cAAc;KAErE,MAAM,SAAS,KAAK;KACpB,IAAI,CAAC,QAAQ;KAEb,KAAKC,aAAa,MAAM;KACxB,MAAM,eAAe;IACvB;IACA,sBAAsB;KACpB,MAAM,aAAa,KAAKL,KAAK;KAE7B,IAAI,CAAC,KAAKI,YAAY,GAAG,YAAY,KAAK,UAAU,MAAM;MAAE,OAAO;MAAO,SAAS;KAAK,CAAC;IAC3F;GACF,GACA,EAAE,QAAQ,KAAKH,YAAY,OAAO,CACpC;EACF;EAEA,MAAM,aAAa,QAAQ,KAAK,UAAU;EAE1C,kBAAkB,MAAM;GACtB,MAAM;GACN,iBAAiB,KAAKG,YAAY,IAAI,SAAS,KAAA;GAC/C,GAAI,cAAc;IAChB,iBAAiB;IACjB,iBAAiB;IACjB,oBAAoB;GACtB;EACF,CAAC;CACH;CAEA,aAAa,IAAkB;EAM7B,KALkB,YACC,CAAC,CAAC,cAA2B,IAAI,IAAI,OAAO,EAAE,GAI3D,CAAC,EAAE,WAAW,OAAO;CAC7B;CAEA,cAAuB;EACrB,OAAO,KAAK,YAAY,KAAK,aAAa,eAAe,MAAM;CACjE;AACF"}

package/dist/default/ui/menu/menu-item-indicator-element.js

@@ -0,0 +1,34 @@
+import { UIElement } from "../ui-element.js";
+import { applyElementProps } from "@videojs/core/dom";
+//#region src/ui/menu/menu-item-indicator-element.ts
+var MenuItemIndicatorElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.forceMount = false;
+	}
+	static {
+		this.tagName = "media-menu-item-indicator";
+	}
+	static {
+		this.properties = {
+			checked: { type: Boolean },
+			forceMount: {
+				type: Boolean,
+				attribute: "force-mount"
+			}
+		};
+	}
+	update(_changed) {
+		super.update(_changed);
+		const hidden = !this.checked && !this.forceMount;
+		applyElementProps(this, {
+			"aria-hidden": "true",
+			hidden
+		});
+	}
+};
+//#endregion
+export { MenuItemIndicatorElement };
+
+//# sourceMappingURL=menu-item-indicator-element.js.map

package/dist/default/ui/menu/menu-item-indicator-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-indicator-element.js","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator-element.ts"],"sourcesContent":["import { applyElementProps } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { UIElement } from '../ui-element';\n\nexport class MenuItemIndicatorElement extends UIElement {\n  static readonly tagName = 'media-menu-item-indicator';\n\n  static override properties = {\n    checked: { type: Boolean },\n    forceMount: { type: Boolean, attribute: 'force-mount' },\n  } satisfies PropertyDeclarationMap<'checked' | 'forceMount'>;\n\n  checked = false;\n  forceMount = false;\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const hidden = !this.checked && !this.forceMount;\n\n    applyElementProps(this, {\n      'aria-hidden': 'true',\n      hidden: hidden,\n    });\n  }\n}\n"],"mappings":";;;AAKA,IAAa,2BAAb,cAA8C,UAAU;;;EAQ5C,KAAA,UAAA;EACG,KAAA,aAAA;;;EARa,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,SAAS,EAAE,MAAM,QAAQ;GACzB,YAAY;IAAE,MAAM;IAAS,WAAW;GAAc;EACxD;;CAKA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,SAAS,CAAC,KAAK,WAAW,CAAC,KAAK;EAEtC,kBAAkB,MAAM;GACtB,eAAe;GACP;EACV,CAAC;CACH;AACF"}

package/dist/default/ui/menu/menu-radio-group-element.js

@@ -0,0 +1,68 @@
+import { RadioGroupElement } from "../radio-group/radio-group-element.js";
+import { menuContext } from "./context.js";
+import { MenuGroupController } from "./menu-group-controller.js";
+import { MenuRadioItemElement } from "./menu-radio-item-element.js";
+import { ContextConsumer } from "@videojs/element/context";
+import { findElementChild } from "@videojs/utils/dom";
+//#region src/ui/menu/menu-radio-group-element.ts
+var MenuRadioGroupElement = class extends RadioGroupElement {
+	static {
+		this.tagName = "media-menu-radio-group";
+	}
+	#group = new MenuGroupController(this);
+	#menu = new ContextConsumer(this, {
+		context: menuContext,
+		subscribe: true
+	});
+	#optionSource = Symbol("menu-option");
+	#ariaLabel = null;
+	#optionMenu = null;
+	#setOptionState = null;
+	disconnectedCallback() {
+		this.#clearMenuOptionState();
+		super.disconnectedCallback();
+	}
+	update(changed) {
+		super.update(changed);
+		this.#group.applyProps();
+	}
+	setItemLabel(item, label) {
+		const labelPart = item.querySelector("[data-part~=\"label\"]");
+		if (labelPart) labelPart.textContent = label;
+		else item.textContent = label;
+	}
+	/** Applies a generated fallback without replacing an author-provided accessible name. */
+	applyDefaultAriaLabel(label) {
+		if (this.hasAttribute("aria-labelledby")) return;
+		const current = this.getAttribute("aria-label");
+		if (current !== null && current !== this.#ariaLabel) return;
+		this.#ariaLabel = label;
+		this.setAttribute("aria-label", label);
+	}
+	publishMenuOptionState(disabled, hidden, availability) {
+		const context = this.#menu.value ?? null;
+		if (context?.menu !== this.#optionMenu) {
+			this.#clearMenuOptionState();
+			this.#optionMenu = context?.menu ?? null;
+			this.#setOptionState = context?.setOptionState ?? null;
+		}
+		if (!this.#setOptionState) return;
+		const selectedItem = findElementChild(this, (item) => item instanceof MenuRadioItemElement && item.value === this.value);
+		const value = selectedItem?.querySelector("[data-part~=\"label\"]")?.textContent ?? selectedItem?.textContent?.trim() ?? "";
+		this.#setOptionState(this.#optionSource, {
+			value,
+			disabled,
+			hidden,
+			availability
+		});
+	}
+	#clearMenuOptionState() {
+		this.#setOptionState?.(this.#optionSource, null);
+		this.#optionMenu = null;
+		this.#setOptionState = null;
+	}
+};
+//#endregion
+export { MenuRadioGroupElement };
+
+//# sourceMappingURL=menu-radio-group-element.js.map

package/dist/default/ui/menu/menu-radio-group-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-radio-group-element.js","names":["#group","#menu","#optionSource","#clearMenuOptionState","#ariaLabel","#optionMenu","#setOptionState"],"sources":["../../../../src/ui/menu/menu-radio-group-element.ts"],"sourcesContent":["import type { MenuOptionState } from '@videojs/core';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { findElementChild } from '@videojs/utils/dom';\n\nimport { RadioGroupElement } from '../radio-group/radio-group-element';\nimport { type MenuContextValue, menuContext } from './context';\nimport { MenuGroupController } from './menu-group-controller';\nimport { MenuRadioItemElement } from './menu-radio-item-element';\n\nexport class MenuRadioGroupElement extends RadioGroupElement {\n  static readonly tagName: string = 'media-menu-radio-group';\n\n  readonly #group = new MenuGroupController(this);\n  readonly #menu = new ContextConsumer(this, { context: menuContext, subscribe: true });\n  readonly #optionSource = Symbol('menu-option');\n  #ariaLabel: string | null = null;\n  #optionMenu: MenuContextValue['menu'] | null = null;\n  #setOptionState: MenuContextValue['setOptionState'] | null = null;\n\n  override disconnectedCallback(): void {\n    this.#clearMenuOptionState();\n    super.disconnectedCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    this.#group.applyProps();\n  }\n\n  protected setItemLabel(item: MenuRadioItemElement, label: string): void {\n    const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n\n    if (labelPart) {\n      labelPart.textContent = label;\n    } else {\n      item.textContent = label;\n    }\n  }\n\n  /** Applies a generated fallback without replacing an author-provided accessible name. */\n  protected applyDefaultAriaLabel(label: string): void {\n    if (this.hasAttribute('aria-labelledby')) return;\n\n    const current = this.getAttribute('aria-label');\n    if (current !== null && current !== this.#ariaLabel) return;\n\n    this.#ariaLabel = label;\n    this.setAttribute('aria-label', label);\n  }\n\n  protected publishMenuOptionState(\n    disabled: boolean,\n    hidden: boolean,\n    availability: MenuOptionState['availability']\n  ): void {\n    const context = this.#menu.value ?? null;\n\n    if (context?.menu !== this.#optionMenu) {\n      this.#clearMenuOptionState();\n      this.#optionMenu = context?.menu ?? null;\n      this.#setOptionState = context?.setOptionState ?? null;\n    }\n\n    if (!this.#setOptionState) return;\n\n    const selectedItem = findElementChild(\n      this,\n      (item): item is MenuRadioItemElement => item instanceof MenuRadioItemElement && item.value === this.value\n    );\n    const label = selectedItem?.querySelector<HTMLElement>('[data-part~=\"label\"]')?.textContent;\n    const value = label ?? selectedItem?.textContent?.trim() ?? '';\n\n    this.#setOptionState(this.#optionSource, { value, disabled, hidden, availability });\n  }\n\n  #clearMenuOptionState(): void {\n    this.#setOptionState?.(this.#optionSource, null);\n    this.#optionMenu = null;\n    this.#setOptionState = null;\n  }\n}\n"],"mappings":";;;;;;;AAUA,IAAa,wBAAb,cAA2C,kBAAkB;;EACzB,KAAA,UAAA;;CAElC,SAAkB,IAAI,oBAAoB,IAAI;CAC9C,QAAiB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAa,WAAW;CAAK,CAAC;CACpF,gBAAyB,OAAO,aAAa;CAC7C,aAA4B;CAC5B,cAA+C;CAC/C,kBAA6D;CAE7D,uBAAsC;EACpC,KAAKG,sBAAsB;EAC3B,MAAM,qBAAqB;CAC7B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,KAAKH,OAAO,WAAW;CACzB;CAEA,aAAuB,MAA4B,OAAqB;EACtE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;OAExB,KAAK,cAAc;CAEvB;;CAGA,sBAAgC,OAAqB;EACnD,IAAI,KAAK,aAAa,iBAAiB,GAAG;EAE1C,MAAM,UAAU,KAAK,aAAa,YAAY;EAC9C,IAAI,YAAY,QAAQ,YAAY,KAAKI,YAAY;EAErD,KAAKA,aAAa;EAClB,KAAK,aAAa,cAAc,KAAK;CACvC;CAEA,uBACE,UACA,QACA,cACM;EACN,MAAM,UAAU,KAAKH,MAAM,SAAS;EAEpC,IAAI,SAAS,SAAS,KAAKI,aAAa;GACtC,KAAKF,sBAAsB;GAC3B,KAAKE,cAAc,SAAS,QAAQ;GACpC,KAAKC,kBAAkB,SAAS,kBAAkB;EACpD;EAEA,IAAI,CAAC,KAAKA,iBAAiB;EAE3B,MAAM,eAAe,iBACnB,OACC,SAAuC,gBAAgB,wBAAwB,KAAK,UAAU,KAAK,KACtG;EAEA,MAAM,QADQ,cAAc,cAA2B,wBAAsB,CAAC,EAAE,eACzD,cAAc,aAAa,KAAK,KAAK;EAE5D,KAAKA,gBAAgB,KAAKJ,eAAe;GAAE;GAAO;GAAU;GAAQ;EAAa,CAAC;CACpF;CAEA,wBAA8B;EAC5B,KAAKI,kBAAkB,KAAKJ,eAAe,IAAI;EAC/C,KAAKG,cAAc;EACnB,KAAKC,kBAAkB;CACzB;AACF"}

package/dist/default/ui/menu/menu-radio-item-element.js

@@ -0,0 +1,87 @@
+import { UIElement } from "../ui-element.js";
+import { radioGroupContext } from "../radio-group/context.js";
+import { menuContext } from "./context.js";
+import { applyElementProps, completeMenuItemSelection } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/menu-radio-item-element.ts
+var MenuRadioItemElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.disabled = false;
+		this.#menuCtx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#groupCtx = new ContextConsumer(this, {
+			context: radioGroupContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#registered = false;
+		this.#cleanupRegistration = null;
+	}
+	static {
+		this.tagName = "media-menu-radio-item";
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#menuCtx;
+	#groupCtx;
+	#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 menuCtx = this.#menuCtx.value;
+		const groupCtx = this.#groupCtx.value;
+		if (!menuCtx || !groupCtx || !this.#disconnect) return;
+		if (!this.#registered) {
+			this.#registered = true;
+			this.#cleanupRegistration = menuCtx.menu.registerItem(this);
+			applyElementProps(this, {
+				onClick: () => {
+					const currentMenuCtx = this.#menuCtx.value;
+					const currentGroupCtx = this.#groupCtx.value;
+					if (!currentMenuCtx || !currentGroupCtx || this.disabled) return;
+					currentGroupCtx.onValueChange(this.value);
+					completeMenuItemSelection(currentMenuCtx.menu);
+				},
+				onPointerenter: () => {
+					const currentMenuCtx = this.#menuCtx.value;
+					if (!this.disabled) currentMenuCtx?.menu.highlight(this, {
+						focus: false,
+						pointer: true
+					});
+				}
+			}, { signal: this.#disconnect.signal });
+		}
+		const checked = groupCtx.value === this.value;
+		applyElementProps(this, {
+			role: "menuitemradio",
+			"aria-checked": String(checked),
+			"aria-disabled": this.disabled ? "true" : void 0
+		});
+	}
+};
+//#endregion
+export { MenuRadioItemElement };
+
+//# sourceMappingURL=menu-radio-item-element.js.map

package/dist/default/ui/menu/menu-radio-item-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-radio-item-element.js","names":["menuRadioGroupContext","#menuCtx","#groupCtx","#disconnect","#registered","#cleanupRegistration"],"sources":["../../../../src/ui/menu/menu-radio-item-element.ts"],"sourcesContent":["import { applyElementProps, completeMenuItemSelection } 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, menuRadioGroupContext } from './context';\n\nexport class MenuRadioItemElement extends UIElement {\n  static readonly tagName = 'media-menu-radio-item';\n\n  static override properties = {\n    value: { type: String },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<'value' | 'disabled'>;\n\n  value = '';\n  disabled = false;\n\n  readonly #menuCtx = new ContextConsumer(this, { context: menuContext, subscribe: true });\n  readonly #groupCtx = new ContextConsumer(this, { context: menuRadioGroupContext, 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 menuCtx = this.#menuCtx.value;\n    const groupCtx = this.#groupCtx.value;\n    if (!menuCtx || !groupCtx || !this.#disconnect) return;\n\n    if (!this.#registered) {\n      this.#registered = true;\n\n      this.#cleanupRegistration = menuCtx.menu.registerItem(this);\n\n      applyElementProps(\n        this,\n        {\n          onClick: () => {\n            const currentMenuCtx = this.#menuCtx.value;\n            const currentGroupCtx = this.#groupCtx.value;\n            if (!currentMenuCtx || !currentGroupCtx || this.disabled) return;\n\n            currentGroupCtx.onValueChange(this.value);\n            completeMenuItemSelection(currentMenuCtx.menu);\n          },\n          onPointerenter: () => {\n            const currentMenuCtx = this.#menuCtx.value;\n\n            if (!this.disabled) currentMenuCtx?.menu.highlight(this, { focus: false, pointer: true });\n          },\n        },\n        { signal: this.#disconnect.signal }\n      );\n    }\n\n    const checked = groupCtx.value === this.value;\n\n    applyElementProps(this, {\n      role: 'menuitemradio',\n      'aria-checked': String(checked),\n      'aria-disabled': this.disabled ? 'true' : undefined,\n    });\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,uBAAb,cAA0C,UAAU;;;EAQ1C,KAAA,QAAA;EACG,KAAA,WAAA;EAES,KAAA,WAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAa,WAAW;EAAK,CAAC;EAClE,KAAA,YAAA,IAAI,gBAAgB,MAAM;GAAE,SAASA;GAAuB,WAAW;EAAK,CAAC;EAE5D,KAAA,cAAA;EACxB,KAAA,cAAA;EAC8B,KAAA,uBAAA;;;EAflB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAKA;CACA;CAEA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAKG,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,UAAU,KAAKH,SAAS;EAC9B,MAAM,WAAW,KAAKC,UAAU;EAChC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,KAAKC,aAAa;EAEhD,IAAI,CAAC,KAAKC,aAAa;GACrB,KAAKA,cAAc;GAEnB,KAAKC,uBAAuB,QAAQ,KAAK,aAAa,IAAI;GAE1D,kBACE,MACA;IACE,eAAe;KACb,MAAM,iBAAiB,KAAKJ,SAAS;KACrC,MAAM,kBAAkB,KAAKC,UAAU;KACvC,IAAI,CAAC,kBAAkB,CAAC,mBAAmB,KAAK,UAAU;KAE1D,gBAAgB,cAAc,KAAK,KAAK;KACxC,0BAA0B,eAAe,IAAI;IAC/C;IACA,sBAAsB;KACpB,MAAM,iBAAiB,KAAKD,SAAS;KAErC,IAAI,CAAC,KAAK,UAAU,gBAAgB,KAAK,UAAU,MAAM;MAAE,OAAO;MAAO,SAAS;KAAK,CAAC;IAC1F;GACF,GACA,EAAE,QAAQ,KAAKE,YAAY,OAAO,CACpC;EACF;EAEA,MAAM,UAAU,SAAS,UAAU,KAAK;EAExC,kBAAkB,MAAM;GACtB,MAAM;GACN,gBAAgB,OAAO,OAAO;GAC9B,iBAAiB,KAAK,WAAW,SAAS,KAAA;EAC5C,CAAC;CACH;AACF"}

package/dist/default/ui/menu/menu-separator-element.js

@@ -0,0 +1,16 @@
+import { UIElement } from "../ui-element.js";
+import { applyElementProps } from "@videojs/core/dom";
+//#region src/ui/menu/menu-separator-element.ts
+var MenuSeparatorElement = class extends UIElement {
+	static {
+		this.tagName = "media-menu-separator";
+	}
+	update(_changed) {
+		super.update(_changed);
+		applyElementProps(this, { role: "separator" });
+	}
+};
+//#endregion
+export { MenuSeparatorElement };
+
+//# sourceMappingURL=menu-separator-element.js.map

package/dist/default/ui/menu/menu-separator-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-separator-element.js","names":[],"sources":["../../../../src/ui/menu/menu-separator-element.ts"],"sourcesContent":["import { applyElementProps } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { UIElement } from '../ui-element';\n\nexport class MenuSeparatorElement extends UIElement {\n  static readonly tagName = 'media-menu-separator';\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    applyElementProps(this, { role: 'separator' });\n  }\n}\n"],"mappings":";;;AAKA,IAAa,uBAAb,cAA0C,UAAU;;EACxB,KAAA,UAAA;;CAE1B,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,kBAAkB,MAAM,EAAE,MAAM,YAAY,CAAC;CAC/C;AACF"}

package/dist/default/ui/mute-button/mute-button-element.js

@@ -1,9 +1,8 @@
 import { playerContext } from "../../player/context.js";
 import { PlayerController } from "../../player/player-controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
-import { selectVolume } from "@videojs/core/dom";
 import { MuteButtonCore, MuteButtonDataAttrs } from "@videojs/core";
-
+import { selectVolume } from "@videojs/core/dom";
 //#region src/ui/mute-button/mute-button-element.ts
 var MuteButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
@@ -11,6 +10,7 @@ var MuteButtonElement = class extends MediaButtonElement {
 		this.core = new MuteButtonCore();
 		this.stateAttrMap = MuteButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectVolume);
+		this.hotkeyAction = "toggleMuted";
 	}
 	static {
 		this.tagName = "media-mute-button";
@@ -19,7 +19,7 @@ var MuteButtonElement = class extends MediaButtonElement {
 		this.core.toggle(state);
 	}
 };
-
 //#endregion
 export { MuteButtonElement };
+
 //# sourceMappingURL=mute-button-element.js.map

package/dist/default/ui/mute-button/mute-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"mute-button-element.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button-element.ts"],"sourcesContent":["import { type MediaVolumeState, MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class MuteButtonElement extends MediaButtonElement<MuteButtonCore> {\n  static readonly tagName = 'media-mute-button';\n\n  protected readonly core = new MuteButtonCore();\n  protected readonly stateAttrMap = MuteButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectVolume);\n\n  protected activate(state: MediaVolumeState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;;AAOA,IAAa,oBAAb,cAAuC,mBAAmC;;;cAG9C,IAAI,gBAAgB;sBACZ;oBACF,IAAI,iBAAiB,MAAM,eAAe,aAAa;;;iBAJ7D;;CAM1B,AAAU,SAAS,OAA+B;AAChD,OAAK,KAAK,OAAO,MAAM"}
+{"version":3,"file":"mute-button-element.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button-element.ts"],"sourcesContent":["import { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\nimport type { MediaVolumeState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class MuteButtonElement extends MediaButtonElement<MuteButtonCore> {\n  static readonly tagName = 'media-mute-button';\n\n  protected readonly core = new MuteButtonCore();\n  protected readonly stateAttrMap = MuteButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectVolume);\n  protected override readonly hotkeyAction = 'toggleMuted';\n\n  protected activate(state: MediaVolumeState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,oBAAb,cAAuC,mBAAmC;;;EAG9C,KAAA,OAAA,IAAI,eAAe;EACX,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,YAAY;EAC3C,KAAA,eAAA;;;EALjB,KAAA,UAAA;;CAO1B,SAAmB,OAA+B;EAChD,KAAK,KAAK,OAAO,KAAK;CACxB;AACF"}

package/dist/default/ui/pip-button/pip-button-element.js

@@ -1,9 +1,8 @@
 import { playerContext } from "../../player/context.js";
 import { PlayerController } from "../../player/player-controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
-import { selectPiP } from "@videojs/core/dom";
 import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
-
+import { selectPiP } from "@videojs/core/dom";
 //#region src/ui/pip-button/pip-button-element.ts
 var PiPButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
@@ -11,15 +10,16 @@ var PiPButtonElement = class extends MediaButtonElement {
 		this.core = new PiPButtonCore();
 		this.stateAttrMap = PiPButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectPiP);
+		this.hotkeyAction = "togglePictureInPicture";
 	}
 	static {
 		this.tagName = "media-pip-button";
 	}
 	activate(state) {
-		this.core.toggle(state);
+		return this.core.toggle(state);
 	}
 };
-
 //#endregion
 export { PiPButtonElement };
+
 //# sourceMappingURL=pip-button-element.js.map

package/dist/default/ui/pip-button/pip-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button-element.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button-element.ts"],"sourcesContent":["import { type MediaPictureInPictureState, PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {\n  static readonly tagName = 'media-pip-button';\n\n  protected readonly core = new PiPButtonCore();\n  protected readonly stateAttrMap = PiPButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n\n  protected activate(state: MediaPictureInPictureState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;;AAOA,IAAa,mBAAb,cAAsC,mBAAkC;;;cAG5C,IAAI,eAAe;sBACX;oBACF,IAAI,iBAAiB,MAAM,eAAe,UAAU;;;iBAJ1D;;CAM1B,AAAU,SAAS,OAAyC;AAC1D,OAAK,KAAK,OAAO,MAAM"}
+{"version":3,"file":"pip-button-element.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button-element.ts"],"sourcesContent":["import { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\nimport type { MediaPictureInPictureState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {\n  static readonly tagName = 'media-pip-button';\n\n  protected readonly core = new PiPButtonCore();\n  protected readonly stateAttrMap = PiPButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPiP);\n  protected override readonly hotkeyAction = 'togglePictureInPicture';\n\n  protected activate(state: MediaPictureInPictureState): Promise<void> {\n    return this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,mBAAb,cAAsC,mBAAkC;;;EAG5C,KAAA,OAAA,IAAI,cAAc;EACV,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,SAAS;EACxC,KAAA,eAAA;;;EALjB,KAAA,UAAA;;CAO1B,SAAmB,OAAkD;EACnE,OAAO,KAAK,KAAK,OAAO,KAAK;CAC/B;AACF"}

package/dist/default/ui/play-button/play-button-element.js

@@ -1,9 +1,8 @@
 import { playerContext } from "../../player/context.js";
 import { PlayerController } from "../../player/player-controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
-import { selectPlayback } from "@videojs/core/dom";
 import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
-
+import { selectPlayback } from "@videojs/core/dom";
 //#region src/ui/play-button/play-button-element.ts
 var PlayButtonElement = class extends MediaButtonElement {
 	constructor(..._args) {
@@ -11,6 +10,7 @@ var PlayButtonElement = class extends MediaButtonElement {
 		this.core = new PlayButtonCore();
 		this.stateAttrMap = PlayButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectPlayback);
+		this.hotkeyAction = "togglePaused";
 	}
 	static {
 		this.tagName = "media-play-button";
@@ -19,7 +19,7 @@ var PlayButtonElement = class extends MediaButtonElement {
 		this.core.toggle(state);
 	}
 };
-
 //#endregion
 export { PlayButtonElement };
+
 //# sourceMappingURL=play-button-element.js.map

package/dist/default/ui/play-button/play-button-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"play-button-element.js","names":[],"sources":["../../../../src/ui/play-button/play-button-element.ts"],"sourcesContent":["import { type MediaPlaybackState, PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlayButtonElement extends MediaButtonElement<PlayButtonCore> {\n  static readonly tagName = 'media-play-button';\n\n  protected readonly core = new PlayButtonCore();\n  protected readonly stateAttrMap = PlayButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n\n  protected activate(state: MediaPlaybackState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;;AAOA,IAAa,oBAAb,cAAuC,mBAAmC;;;cAG9C,IAAI,gBAAgB;sBACZ;oBACF,IAAI,iBAAiB,MAAM,eAAe,eAAe;;;iBAJ/D;;CAM1B,AAAU,SAAS,OAAiC;AAClD,OAAK,KAAK,OAAO,MAAM"}
+{"version":3,"file":"play-button-element.js","names":[],"sources":["../../../../src/ui/play-button/play-button-element.ts"],"sourcesContent":["import { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\nimport type { MediaPlaybackState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlayButtonElement extends MediaButtonElement<PlayButtonCore> {\n  static readonly tagName = 'media-play-button';\n\n  protected readonly core = new PlayButtonCore();\n  protected readonly stateAttrMap = PlayButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlayback);\n  protected override readonly hotkeyAction = 'togglePaused';\n\n  protected activate(state: MediaPlaybackState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,oBAAb,cAAuC,mBAAmC;;;EAG9C,KAAA,OAAA,IAAI,eAAe;EACX,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EAC7C,KAAA,eAAA;;;EALjB,KAAA,UAAA;;CAO1B,SAAmB,OAAiC;EAClD,KAAK,KAAK,OAAO,KAAK;CACxB;AACF"}