@videojs/html 10.0.0-rc.1 → 10.0.0-rc.3

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

@@ -0,0 +1,91 @@
+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/radio-item.ts
+/**
+* Menu item that selects its `value` in the enclosing `<media-menu-radio-group>` and closes the menu. The element
+* itself takes `role="menuitemradio"`, checked while its value matches the group's.
+*/
+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=radio-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-item.js","names":["menuRadioGroupContext","#menuCtx","#groupCtx","#disconnect","#registered","#cleanupRegistration"],"sources":["../../../../src/ui/menu/radio-item.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\n/**\n * Menu item that selects its `value` in the enclosing `<media-menu-radio-group>` and closes the menu. The element\n * itself takes `role=\"menuitemradio\"`, checked while its value matches the group's.\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":";;;;;;;;;;AAWA,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/dev/ui/menu/separator.d.ts

@@ -0,0 +1,11 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/menu/separator.d.ts
+/** Visual divider between groups of menu items; the element itself takes `role="separator"`. */
+declare class MenuSeparatorElement extends UIElement {
+  static readonly tagName = "media-menu-separator";
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { MenuSeparatorElement };
+//# sourceMappingURL=separator.d.ts.map

package/dist/dev/ui/menu/separator.js

@@ -0,0 +1,17 @@
+import { UIElement } from "../ui-element.js";
+import { applyElementProps } from "@videojs/core/dom";
+//#region src/ui/menu/separator.ts
+/** Visual divider between groups of menu items; the element itself takes `role="separator"`. */
+var MenuSeparatorElement = class extends UIElement {
+	static {
+		this.tagName = "media-menu-separator";
+	}
+	update(_changed) {
+		super.update(_changed);
+		applyElementProps(this, { role: "separator" });
+	}
+};
+//#endregion
+export { MenuSeparatorElement };
+
+//# sourceMappingURL=separator.js.map

package/dist/dev/ui/menu/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../../../src/ui/menu/separator.ts"],"sourcesContent":["import { applyElementProps } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { UIElement } from '../ui-element';\n\n/** Visual divider between groups of menu items; the element itself takes `role=\"separator\"`. */\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":";;;;AAMA,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/dev/ui/mute-button/element.d.ts

@@ -0,0 +1,29 @@
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { index_d_exports } from "../../index.js";
+import { MuteButtonCore } from "@videojs/core";
+import { MediaVolumeState } from "@videojs/media";
+//#region src/ui/mute-button/element.d.ts
+declare class MuteButtonElement extends MediaButtonElement<MuteButtonCore> {
+  static readonly tagName = "media-mute-button";
+  protected readonly core: MuteButtonCore;
+  protected readonly stateAttrMap: {
+    readonly muted: 'data-muted';
+    readonly volumeLevel: 'data-volume-level';
+    readonly availability: 'data-availability';
+    readonly hidden: 'data-hidden';
+  };
+  protected readonly mediaState: PlayerController<index_d_exports.AnyPlayerStore, {
+    volume: number;
+    muted: boolean;
+    volumeAvailability: import("@videojs/media").MediaFeatureAvailability;
+    mutedAvailability: import("@videojs/media").MediaFeatureAvailability;
+    setVolume: (volume: number) => number;
+    toggleMuted: () => boolean;
+  } | undefined>;
+  protected readonly hotkeyAction = "toggleMuted";
+  protected activate(state: MediaVolumeState): void;
+}
+//#endregion
+export { MuteButtonElement };
+//# sourceMappingURL=element.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/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/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/dev/ui/pip-button/element.d.ts

@@ -0,0 +1,28 @@
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { index_d_exports } from "../../index.js";
+import { PiPButtonCore } from "@videojs/core";
+import { MediaPictureInPictureState } from "@videojs/media";
+//#region src/ui/pip-button/element.d.ts
+declare class PiPButtonElement extends MediaButtonElement<PiPButtonCore> {
+  static readonly tagName = "media-pip-button";
+  protected readonly core: PiPButtonCore;
+  protected readonly stateAttrMap: {
+    readonly pip: 'data-pip';
+    readonly availability: 'data-availability';
+    readonly disabled: 'data-disabled';
+    readonly hidden: 'data-hidden';
+  };
+  protected readonly mediaState: PlayerController<index_d_exports.AnyPlayerStore, {
+    pip: boolean;
+    pipAvailability: import("@videojs/media").MediaFeatureAvailability;
+    requestPictureInPicture: () => Promise<void>;
+    exitPictureInPicture: () => Promise<void>;
+    togglePictureInPicture: () => Promise<void>;
+  } | undefined>;
+  protected readonly hotkeyAction = "togglePictureInPicture";
+  protected activate(state: MediaPictureInPictureState): Promise<void>;
+}
+//#endregion
+export { PiPButtonElement };
+//# sourceMappingURL=element.d.ts.map

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

@@ -0,0 +1,25 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
+import { selectPiP } from "@videojs/core/dom";
+//#region src/ui/pip-button/element.ts
+var PiPButtonElement = class extends MediaButtonElement {
+	constructor(..._args) {
+		super(..._args);
+		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) {
+		return this.core.toggle(state);
+	}
+};
+//#endregion
+export { PiPButtonElement };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/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/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/dev/ui/play-button/element.d.ts

@@ -0,0 +1,29 @@
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { index_d_exports } from "../../index.js";
+import { PlayButtonCore } from "@videojs/core";
+import { MediaPlaybackState } from "@videojs/media";
+//#region src/ui/play-button/element.d.ts
+declare class PlayButtonElement extends MediaButtonElement<PlayButtonCore> {
+  static readonly tagName = "media-play-button";
+  protected readonly core: PlayButtonCore;
+  protected readonly stateAttrMap: {
+    readonly paused: 'data-paused';
+    readonly ended: 'data-ended';
+    readonly started: 'data-started';
+  };
+  protected readonly mediaState: PlayerController<index_d_exports.AnyPlayerStore, {
+    paused: boolean;
+    ended: boolean;
+    started: boolean;
+    waiting: boolean;
+    play: () => Promise<void>;
+    pause: () => void;
+    togglePaused: () => boolean;
+  } | undefined>;
+  protected readonly hotkeyAction = "togglePaused";
+  protected activate(state: MediaPlaybackState): void;
+}
+//#endregion
+export { PlayButtonElement };
+//# sourceMappingURL=element.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/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/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"}

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

@@ -0,0 +1,43 @@
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { index_d_exports } from "../../index.js";
+import { PlaybackRateButtonCore } from "@videojs/core";
+import { UIEvent } from "@videojs/core/dom";
+import { PropertyValues } from "@videojs/element";
+import { MediaPlaybackRateState } from "@videojs/media";
+//#region src/ui/playback-rate-button/element.d.ts
+declare class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateButtonCore> {
+  static readonly tagName = "media-playback-rate-button";
+  static properties: {
+    label: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+    commandfor: {
+      type: StringConstructor;
+    };
+  };
+  commandfor: string | undefined;
+  protected readonly core: PlaybackRateButtonCore;
+  protected readonly stateAttrMap: {
+    readonly rate: 'data-rate';
+  };
+  protected readonly mediaState: PlayerController<index_d_exports.AnyPlayerStore, {
+    readonly playbackRates: readonly number[];
+    playbackRate: number;
+    setPlaybackRate: (rate: number) => void;
+  } | undefined>;
+  protected readonly hotkeyAction = "speedUp";
+  protected activate(state: MediaPlaybackRateState, event?: UIEvent): void;
+  protected getIsButtonDisabled(): boolean;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(changed: PropertyValues): void;
+}
+declare namespace PlaybackRateButtonElement {
+  type State = PlaybackRateButtonCore.State;
+}
+//#endregion
+export { PlaybackRateButtonElement };
+//# sourceMappingURL=element.d.ts.map

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

@@ -0,0 +1,53 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/core";
+import { applyElementProps, selectPlaybackRate } from "@videojs/core/dom";
+//#region src/ui/playback-rate-button/element.ts
+var PlaybackRateButtonElement = class extends MediaButtonElement {
+	constructor(..._args) {
+		super(..._args);
+		this.commandfor = void 0;
+		this.core = new PlaybackRateButtonCore();
+		this.stateAttrMap = PlaybackRateButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
+		this.hotkeyAction = "speedUp";
+	}
+	static {
+		this.tagName = "media-playback-rate-button";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			disabled: { type: Boolean },
+			commandfor: { type: String }
+		};
+	}
+	activate(state, event) {
+		if (this.commandfor) {
+			if (event instanceof KeyboardEvent) this.click();
+			return;
+		}
+		this.core.cycle(state);
+	}
+	getIsButtonDisabled() {
+		const media = this.mediaState.value;
+		if (super.getIsButtonDisabled()) return true;
+		if (this.commandfor && media && media.playbackRates.length === 0) return true;
+		return false;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("commandfor")) if (this.commandfor) this.setAttribute("commandfor", this.commandfor);
+		else this.removeAttribute("commandfor");
+	}
+	update(changed) {
+		super.update(changed);
+		if (!this.mediaState.value || !this.commandfor) return;
+		applyElementProps(this, { "aria-disabled": this.getIsButtonDisabled() ? "true" : void 0 });
+	}
+};
+//#endregion
+export { PlaybackRateButtonElement };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/playback-rate-button/element.ts"],"sourcesContent":["import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } 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<PlaybackRateButtonCore> {\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 = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;AASA,IAAa,4BAAb,cAA+C,mBAA2C;;;EASvD,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,GAC1B,IAAI,KAAK,YACP,KAAK,aAAa,cAAc,KAAK,UAAU;OAE/C,KAAK,gBAAgB,YAAY;CAGvC;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

@@ -0,0 +1,31 @@
+import { MenuRadioGroupElement } from "../menu/radio-group.js";
+import { PlaybackRateRadioGroupCore } from "@videojs/core";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/playback-rate-radio-group/element.d.ts
+/**
+ * Menu radio group that generates a `<media-menu-radio-item>` per available playback rate and shares the selected label
+ * and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes
+ * each generated item.
+ */
+declare class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {
+  #private;
+  static readonly tagName = "media-playback-rate-radio-group";
+  static properties: {
+    value: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+  };
+  disabled: boolean;
+  formatRate: (rate: number) => string;
+  connectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+declare namespace PlaybackRateRadioGroupElement {
+  type State = PlaybackRateRadioGroupCore.State;
+}
+//#endregion
+export { PlaybackRateRadioGroupElement };
+//# sourceMappingURL=element.d.ts.map

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

@@ -0,0 +1,71 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/controller.js";
+import { MenuRadioGroupElement } from "../menu/radio-group.js";
+import { RadioOptionsController } from "../radio-options/controller.js";
+import { PlaybackRateRadioGroupCore, PlaybackRateRadioGroupDataAttrs } from "@videojs/core";
+import { applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+//#region src/ui/playback-rate-radio-group/element.ts
+/**
+* Menu radio group that generates a `<media-menu-radio-item>` per available playback rate and shares the selected label
+* and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes
+* each generated item.
+*/
+var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		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),
+			onValueChange: (value) => {
+				const media = this.#mediaState.value;
+				if (media) this.#core.selectValue(media, value);
+			}
+		});
+	}
+	static {
+		this.tagName = "media-playback-rate-radio-group";
+	}
+	static {
+		this.properties = {
+			...MenuRadioGroupElement.properties,
+			disabled: { type: Boolean }
+		};
+	}
+	#core;
+	#i18n;
+	#mediaState;
+	#options;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		if (!this.#mediaState.value && this.#mediaState.displayName) logMissingFeature(this.localName, this.#mediaState.displayName);
+	}
+	update(changed) {
+		const media = this.#mediaState.value;
+		let state = null;
+		if (media) {
+			this.#core.setProps({
+				formatRate: this.formatRate,
+				disabled: this.disabled
+			});
+			this.#core.setMedia(media);
+			state = this.#core.getState();
+			this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value, this.#core.getLabelParams(state)));
+			this.#options.sync(state, this.#i18n.value, this.#i18n.locale);
+			this.publishMenuOptionState(state.disabled, state.hidden, state.availability);
+		} else this.publishMenuOptionState(true, true, "unsupported");
+		super.update(changed);
+		if (state) applyStateDataAttrs(this, state, PlaybackRateRadioGroupDataAttrs);
+	}
+};
+//#endregion
+export { PlaybackRateRadioGroupElement };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/playback-rate-radio-group/element.ts"],"sourcesContent":["import {\n  PlaybackRateRadioGroupCore,\n  PlaybackRateRadioGroupDataAttrs,\n  type PlaybackRateRadioGroupOption,\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: PlaybackRateRadioGroupCore.State | 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 = PlaybackRateRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,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,KAAKA,YAAY;IAE/B,IAAI,OAAO,KAAKC,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,KAAKD,YAAY,SAAS,KAAKA,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAKA,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKA,YAAY;EAC/B,IAAI,QAAiD;EAErD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,YAAY,KAAK;IAAY,UAAU,KAAK;GAAS,CAAC;GAC5E,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBACH,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,OAAO,KAAKD,MAAM,eAAe,KAAK,CAAC,CAC9F;GACA,KAAKE,SAAS,KAAK,OAAO,KAAKD,MAAM,OAAO,KAAKA,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/popover/element.d.ts

@@ -0,0 +1,72 @@
+import { UIElement } from "../ui-element.js";
+import { PopoverProps } from "@videojs/core";
+import { PopoverOpenChangeReason, PositioningBoundary } from "@videojs/core/dom";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/popover/element.d.ts
+/** @fires open-change - Fired when the popover's open state changes. */
+declare class PopoverElement extends UIElement {
+  #private;
+  static readonly tagName: string;
+  static properties: {
+    open: {
+      type: BooleanConstructor;
+    };
+    defaultOpen: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+    side: {
+      type: StringConstructor;
+    };
+    align: {
+      type: StringConstructor;
+    };
+    modal: {
+      type: BooleanConstructor;
+    };
+    closeOnEscape: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+    closeOnOutsideClick: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+    openOnHover: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+    delay: {
+      type: NumberConstructor;
+    };
+    closeDelay: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+    boundary: {
+      type: StringConstructor;
+    };
+  };
+  open: boolean;
+  defaultOpen: boolean;
+  side: import("@videojs/core").PopoverSide;
+  align: import("@videojs/core").PopoverAlign;
+  modal: PopoverProps['modal'];
+  closeOnEscape: boolean;
+  closeOnOutsideClick: boolean;
+  openOnHover: boolean;
+  delay: number;
+  closeDelay: number;
+  boundary: PositioningBoundary;
+  connectedCallback(): void;
+  protected firstUpdated(changed: PropertyValues): void;
+  disconnectedCallback(): void;
+  destroyCallback(): void;
+  close(reason?: PopoverOpenChangeReason): void;
+  protected get triggerElement(): HTMLElement | null;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { PopoverElement };
+//# sourceMappingURL=element.d.ts.map