@videojs/html 10.0.0-beta.23 → 10.0.0-beta.24

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

@@ -0,0 +1,84 @@
+import { MediaElement } from "../media-element.js";
+import { menuContext, menuRadioGroupContext } from "./context.js";
+import { applyElementProps, applyStateDataAttrs, completeMenuItemSelection } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/menu-radio-item-element.ts
+var MenuRadioItemElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.disabled = false;
+		this.#menuCtx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#groupCtx = new ContextConsumer(this, {
+			context: menuRadioGroupContext,
+			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, currentMenuCtx.parentMenu);
+				},
+				onPointerenter: () => {
+					const currentMenuCtx = this.#menuCtx.value;
+					if (!this.disabled) currentMenuCtx?.menu.highlight(this, { focus: false });
+				}
+			}, { 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
+		});
+		applyStateDataAttrs(this, menuCtx.state, menuCtx.stateAttrMap);
+	}
+};
+//#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":["#menuCtx","#groupCtx","#disconnect","#registered","#cleanupRegistration"],"sources":["../../../../src/ui/menu/menu-radio-item-element.ts"],"sourcesContent":["import { applyElementProps, applyStateDataAttrs, completeMenuItemSelection } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { menuContext, menuRadioGroupContext } from './context';\n\nexport class MenuRadioItemElement extends MediaElement {\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, currentMenuCtx.parentMenu);\n          },\n          onPointerenter: () => {\n            const currentMenuCtx = this.#menuCtx.value;\n            if (!this.disabled) currentMenuCtx?.menu.highlight(this, { focus: false });\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    applyStateDataAttrs(this, menuCtx.state, menuCtx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,uBAAb,cAA0C,aAAa;;;eAQ7C;kBACG;kBAES,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAa,WAAW;GAAM,CAAC;mBACnE,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAuB,WAAW;GAAM,CAAC;qBAE7D;qBACxB;8BAC8B;;;iBAflB;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAKD;CACA;CAEA;CACA;CACA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,QAAA,aAAmB,IAAI,iBAAiB;AACxC,QAAA,aAAmB;;CAGrB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,uBAA6B;AAC7B,QAAA,sBAA4B;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;AACnB,QAAA,aAAmB;;CAGrB,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,UAAU,MAAA,QAAc;EAC9B,MAAM,WAAW,MAAA,SAAe;AAChC,MAAI,CAAC,WAAW,CAAC,YAAY,CAAC,MAAA,WAAkB;AAEhD,MAAI,CAAC,MAAA,YAAkB;AACrB,SAAA,aAAmB;AAEnB,SAAA,sBAA4B,QAAQ,KAAK,aAAa,KAAK;AAE3D,qBACE,MACA;IACE,eAAe;KACb,MAAM,iBAAiB,MAAA,QAAc;KACrC,MAAM,kBAAkB,MAAA,SAAe;AACvC,SAAI,CAAC,kBAAkB,CAAC,mBAAmB,KAAK,SAAU;AAE1D,qBAAgB,cAAc,KAAK,MAAM;AACzC,+BAA0B,eAAe,MAAM,eAAe,WAAW;;IAE3E,sBAAsB;KACpB,MAAM,iBAAiB,MAAA,QAAc;AACrC,SAAI,CAAC,KAAK,SAAU,iBAAgB,KAAK,UAAU,MAAM,EAAE,OAAO,OAAO,CAAC;;IAE7E,EACD,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CACpC;;EAGH,MAAM,UAAU,SAAS,UAAU,KAAK;AAExC,oBAAkB,MAAM;GACtB,MAAM;GACN,gBAAgB,OAAO,QAAQ;GAC/B,iBAAiB,KAAK,WAAW,SAAS,KAAA;GAC3C,CAAC;AAEF,sBAAoB,MAAM,QAAQ,OAAO,QAAQ,aAAa"}

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

@@ -0,0 +1,24 @@
+import { MediaElement } from "../media-element.js";
+import { menuContext } from "./context.js";
+import { applyElementProps, applyStateDataAttrs } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/menu-separator-element.ts
+var MenuSeparatorElement = class extends MediaElement {
+	static {
+		this.tagName = "media-menu-separator";
+	}
+	#ctx = new ContextConsumer(this, {
+		context: menuContext,
+		subscribe: true
+	});
+	update(_changed) {
+		super.update(_changed);
+		applyElementProps(this, { role: "separator" });
+		const ctx = this.#ctx.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+//#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":["#ctx"],"sources":["../../../../src/ui/menu/menu-separator-element.ts"],"sourcesContent":["import { applyElementProps, applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { menuContext } from './context';\n\nexport class MenuSeparatorElement extends MediaElement {\n  static readonly tagName = 'media-menu-separator';\n\n  readonly #ctx = new ContextConsumer(this, { context: menuContext, subscribe: true });\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    applyElementProps(this, { role: 'separator' });\n\n    const ctx = this.#ctx.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,uBAAb,cAA0C,aAAa;;iBAC3B;;CAE1B,OAAgB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAa,WAAW;EAAM,CAAC;CAEpF,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;AAEtB,oBAAkB,MAAM,EAAE,MAAM,aAAa,CAAC;EAE9C,MAAM,MAAM,MAAA,IAAU;AACtB,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}

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

@@ -0,0 +1,16 @@
+import { MediaElement } from "../media-element.js";
+import { applyElementProps, getMenuRootViewAttrs } from "@videojs/core/dom";
+//#region src/ui/menu/menu-view-element.ts
+var MenuViewElement = class extends MediaElement {
+	static {
+		this.tagName = "media-menu-view";
+	}
+	update(changed) {
+		super.update(changed);
+		applyElementProps(this, getMenuRootViewAttrs());
+	}
+};
+//#endregion
+export { MenuViewElement };
+
+//# sourceMappingURL=menu-view-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-view-element.js","names":[],"sources":["../../../../src/ui/menu/menu-view-element.ts"],"sourcesContent":["import { applyElementProps, getMenuRootViewAttrs } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { MediaElement } from '../media-element';\n\nexport class MenuViewElement extends MediaElement {\n  static readonly tagName = 'media-menu-view';\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    applyElementProps(this, getMenuRootViewAttrs());\n  }\n}\n"],"mappings":";;;AAKA,IAAa,kBAAb,cAAqC,aAAa;;iBACtB;;CAE1B,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;AAErB,oBAAkB,MAAM,sBAAsB,CAAC"}

package/dist/default/ui/playback-rate-menu/playback-rate-menu-element.js

@@ -0,0 +1,47 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { MenuElement } from "../menu/menu-element.js";
+import { applyElementProps, applyStateDataAttrs, selectPlaybackRate } from "@videojs/core/dom";
+import { PlaybackRateMenuCore, PlaybackRateMenuDataAttrs } from "@videojs/core";
+//#region src/ui/playback-rate-menu/playback-rate-menu-element.ts
+var PlaybackRateMenuElement = class extends MenuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.disabled = false;
+		this.align = "center";
+		this.formatRate = PlaybackRateMenuCore.defaultProps.formatRate;
+		this.#core = new PlaybackRateMenuCore();
+		this.#mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
+	}
+	static {
+		this.tagName = "media-playback-rate-menu";
+	}
+	static {
+		this.properties = {
+			...MenuElement.properties,
+			label: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#core;
+	#mediaState;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+	}
+	update(changed) {
+		super.update(changed);
+		const media = this.#mediaState.value;
+		if (!media) return;
+		this.#core.setProps(this);
+		this.#core.setMedia(media);
+		const state = this.#core.getState();
+		applyElementProps(this, this.#core.getAttrs(state));
+		applyStateDataAttrs(this, state, PlaybackRateMenuDataAttrs);
+	}
+};
+//#endregion
+export { PlaybackRateMenuElement };
+
+//# sourceMappingURL=playback-rate-menu-element.js.map

package/dist/default/ui/playback-rate-menu/playback-rate-menu-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-menu-element.js","names":["#core","#mediaState"],"sources":["../../../../src/ui/playback-rate-menu/playback-rate-menu-element.ts"],"sourcesContent":["import { PlaybackRateMenuCore, PlaybackRateMenuDataAttrs } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MenuElement } from '../menu/menu-element';\n\nexport class PlaybackRateMenuElement extends MenuElement {\n  static override readonly tagName = 'media-playback-rate-menu';\n\n  static override properties = {\n    ...MenuElement.properties,\n    label: { type: String },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<\n    | 'open'\n    | 'defaultOpen'\n    | 'side'\n    | 'align'\n    | 'closeOnEscape'\n    | 'closeOnOutsideClick'\n    | 'boundary'\n    | 'label'\n    | 'disabled'\n  >;\n\n  label = '';\n  disabled = false;\n  override align: MenuElement['align'] = 'center';\n  formatRate = PlaybackRateMenuCore.defaultProps.formatRate;\n\n  readonly #core = new PlaybackRateMenuCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\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    super.update(changed);\n\n    const media = this.#mediaState.value;\n    if (!media) return;\n\n    this.#core.setProps(this);\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, PlaybackRateMenuDataAttrs);\n  }\n}\n\nexport namespace PlaybackRateMenuElement {\n  export type State = PlaybackRateMenuCore.State;\n}\n"],"mappings":";;;;;;AAQA,IAAa,0BAAb,cAA6C,YAAY;;;eAmB/C;kBACG;eAC4B;oBAC1B,qBAAqB,aAAa;eAE9B,IAAI,sBAAsB;qBACpB,IAAI,iBAAiB,MAAM,eAAe,mBAAmB;;;iBAxBjD;;;oBAEN;GAC3B,GAAG,YAAY;GACf,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAiBD;CACA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;;CAOtB,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAA,WAAiB;AAC/B,MAAI,CAAC,MAAO;AAEZ,QAAA,KAAW,SAAS,KAAK;AACzB,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAEnC,oBAAkB,MAAM,MAAA,KAAW,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,0BAA0B"}

package/dist/default/ui/playback-rate-menu/playback-rate-menu-trigger-element.js

@@ -0,0 +1,85 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyElementProps, applyStateDataAttrs, selectPlaybackRate } from "@videojs/core/dom";
+import { PlaybackRateMenuCore, PlaybackRateMenuDataAttrs } from "@videojs/core";
+//#region src/ui/playback-rate-menu/playback-rate-menu-trigger-element.ts
+var PlaybackRateMenuTriggerElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.disabled = false;
+		this.commandfor = void 0;
+		this.formatRate = PlaybackRateMenuCore.defaultProps.formatRate;
+		this.#core = new PlaybackRateMenuCore();
+		this.#mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
+		this.#disconnect = null;
+		this.#handleClick = (event) => {
+			if (this.#mediaState.value && !this.#core.state.current.disabled) return;
+			event.preventDefault();
+			event.stopImmediatePropagation();
+		};
+		this.#handleKeyDown = (event) => {
+			if (event.target !== event.currentTarget) return;
+			if (!this.#mediaState.value || this.#core.state.current.disabled) {
+				if (event.key !== "Tab") event.preventDefault();
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				this.click();
+			}
+		};
+	}
+	static {
+		this.tagName = "media-playback-rate-menu-trigger";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			disabled: { type: Boolean },
+			commandfor: { type: String }
+		};
+	}
+	#core;
+	#mediaState;
+	#disconnect;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#disconnect = new AbortController();
+		applyElementProps(this, {
+			onClick: this.#handleClick,
+			onKeyDown: this.#handleKeyDown
+		}, { signal: this.#disconnect.signal });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	/** Returns the trigger's current label derived from media state. */
+	getLabel() {
+		return this.#core.state.current.label || void 0;
+	}
+	update(changed) {
+		super.update(changed);
+		const media = this.#mediaState.value;
+		if (!media) return;
+		this.#core.setProps(this);
+		this.#core.setMedia(media);
+		const state = this.#core.getState();
+		applyElementProps(this, {
+			role: "button",
+			tabIndex: 0,
+			...this.#core.getAttrs(state)
+		});
+		applyStateDataAttrs(this, state, PlaybackRateMenuDataAttrs);
+	}
+	#handleClick;
+	#handleKeyDown;
+};
+//#endregion
+export { PlaybackRateMenuTriggerElement };
+
+//# sourceMappingURL=playback-rate-menu-trigger-element.js.map

package/dist/default/ui/playback-rate-menu/playback-rate-menu-trigger-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-menu-trigger-element.js","names":["#mediaState","#core","#disconnect","#handleClick","#handleKeyDown"],"sources":["../../../../src/ui/playback-rate-menu/playback-rate-menu-trigger-element.ts"],"sourcesContent":["import { PlaybackRateMenuCore, PlaybackRateMenuDataAttrs } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class PlaybackRateMenuTriggerElement extends MediaElement {\n  static readonly tagName = 'media-playback-rate-menu-trigger';\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  label = '';\n  disabled = false;\n  commandfor: string | undefined = undefined;\n  formatRate = PlaybackRateMenuCore.defaultProps.formatRate;\n\n  readonly #core = new PlaybackRateMenuCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    applyElementProps(\n      this,\n      {\n        onClick: this.#handleClick,\n        onKeyDown: this.#handleKeyDown,\n      },\n      { signal: this.#disconnect.signal }\n    );\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 trigger's current label derived from media state. */\n  getLabel(): string | undefined {\n    return this.#core.state.current.label || undefined;\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.setProps(this);\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyElementProps(this, {\n      role: 'button',\n      tabIndex: 0,\n      ...this.#core.getAttrs(state),\n    });\n    applyStateDataAttrs(this, state, PlaybackRateMenuDataAttrs);\n  }\n\n  #handleClick = (event: MouseEvent): void => {\n    if (this.#mediaState.value && !this.#core.state.current.disabled) return;\n\n    event.preventDefault();\n    event.stopImmediatePropagation();\n  };\n\n  #handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.target !== event.currentTarget) return;\n\n    if (!this.#mediaState.value || this.#core.state.current.disabled) {\n      if (event.key !== 'Tab') event.preventDefault();\n      return;\n    }\n\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.click();\n    }\n  };\n}\n\nexport namespace PlaybackRateMenuTriggerElement {\n  export type State = PlaybackRateMenuCore.State;\n}\n"],"mappings":";;;;;;AAQA,IAAa,iCAAb,cAAoD,aAAa;;;eASvD;kBACG;oBACsB,KAAA;oBACpB,qBAAqB,aAAa;eAE9B,IAAI,sBAAsB;qBACpB,IAAI,iBAAiB,MAAM,eAAe,mBAAmB;qBAE9C;uBAkDtB,UAA4B;AAC1C,OAAI,MAAA,WAAiB,SAAS,CAAC,MAAA,KAAW,MAAM,QAAQ,SAAU;AAElE,SAAM,gBAAgB;AACtB,SAAM,0BAA0B;;yBAGhB,UAA+B;AAC/C,OAAI,MAAM,WAAW,MAAM,cAAe;AAE1C,OAAI,CAAC,MAAA,WAAiB,SAAS,MAAA,KAAW,MAAM,QAAQ,UAAU;AAChE,QAAI,MAAM,QAAQ,MAAO,OAAM,gBAAgB;AAC/C;;AAGF,OAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,UAAM,gBAAgB;AACtB,SAAK,OAAO;;;;;iBAnFU;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC3B,YAAY,EAAE,MAAM,QAAQ;GAC7B;;CAOD;CACA;CAEA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,QAAA,aAAmB,IAAI,iBAAiB;AACxC,oBACE,MACA;GACE,SAAS,MAAA;GACT,WAAW,MAAA;GACZ,EACD,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CACpC;;CAOH,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;;CAIrB,WAA+B;AAC7B,SAAO,MAAA,KAAW,MAAM,QAAQ,SAAS,KAAA;;CAG3C,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAA,WAAiB;AAC/B,MAAI,CAAC,MAAO;AAEZ,QAAA,KAAW,SAAS,KAAK;AACzB,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAEnC,oBAAkB,MAAM;GACtB,MAAM;GACN,UAAU;GACV,GAAG,MAAA,KAAW,SAAS,MAAM;GAC9B,CAAC;AACF,sBAAoB,MAAM,OAAO,0BAA0B;;CAG7D;CAOA"}

package/dist/default/ui/playback-rate-menu/playback-rate-options-element.js

@@ -0,0 +1,113 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { MenuItemIndicatorElement } from "../menu/menu-item-indicator-element.js";
+import { MenuRadioGroupElement } from "../menu/menu-radio-group-element.js";
+import { MenuRadioItemElement } from "../menu/menu-radio-item-element.js";
+import { applyStateDataAttrs, selectPlaybackRate } from "@videojs/core/dom";
+import { PlaybackRateMenuCore, PlaybackRateMenuDataAttrs } from "@videojs/core";
+//#region src/ui/playback-rate-menu/playback-rate-options-element.ts
+var PlaybackRateOptionsElement = class extends MenuRadioGroupElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.formatRate = PlaybackRateMenuCore.defaultProps.formatRate;
+		this.#core = new PlaybackRateMenuCore();
+		this.#mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
+		this.#ratesKey = "";
+		this.#disconnect = null;
+		this.#handleValueChange = (event) => {
+			if (event.target !== this) return;
+			const media = this.#mediaState.value;
+			if (!media) return;
+			const { value } = event.detail;
+			this.#core.selectValue(media, value);
+		};
+	}
+	static {
+		this.tagName = "media-playback-rate-options";
+	}
+	static {
+		this.properties = {
+			...MenuRadioGroupElement.properties,
+			disabled: { type: Boolean }
+		};
+	}
+	#core;
+	#mediaState;
+	#ratesKey;
+	#disconnect;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#disconnect = new AbortController();
+		this.addEventListener("value-change", this.#handleValueChange, { signal: this.#disconnect.signal });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	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.value = this.#core.getRateValue(state.rate);
+			this.label = this.label || "Playback rate";
+			this.#syncContent(state);
+		}
+		super.update(changed);
+		if (state) applyStateDataAttrs(this, state, PlaybackRateMenuDataAttrs);
+	}
+	#syncContent(state) {
+		const template = this.#getTemplate();
+		const templateKey = template?.innerHTML ?? "";
+		const ratesKey = `${state.rates.join("|")}::${templateKey}`;
+		if (ratesKey !== this.#ratesKey) {
+			this.#ratesKey = ratesKey;
+			for (const child of [...this.children]) {
+				if (child instanceof HTMLTemplateElement) continue;
+				child.remove();
+			}
+			this.append(...state.rates.map((rate) => this.#createItem(rate, template)));
+		}
+		for (const item of this.querySelectorAll(MenuRadioItemElement.tagName)) {
+			const checked = item.value === this.value;
+			item.disabled = state.disabled;
+			for (const indicator of item.querySelectorAll(MenuItemIndicatorElement.tagName)) indicator.checked = checked;
+		}
+	}
+	#createItem(rate, template) {
+		const item = this.#createItemFromTemplate(template);
+		const value = this.#core.getRateValue(rate);
+		item.value = value;
+		item.setAttribute("data-rate", value);
+		this.#setLabel(item, this.#core.getRateLabel(rate));
+		return item;
+	}
+	#createItemFromTemplate(template) {
+		if (!template) return document.createElement(MenuRadioItemElement.tagName);
+		const root = template.content.cloneNode(true).firstElementChild;
+		if (!root || root.localName !== MenuRadioItemElement.tagName || root.nextElementSibling) return document.createElement(MenuRadioItemElement.tagName);
+		return root;
+	}
+	#setLabel(item, label) {
+		const labelPart = item.querySelector("[data-part~=\"label\"]");
+		if (labelPart) labelPart.textContent = label;
+		else item.textContent = label;
+	}
+	#getTemplate() {
+		for (const child of this.children) if (child instanceof HTMLTemplateElement) return child;
+		return null;
+	}
+	#handleValueChange;
+};
+//#endregion
+export { PlaybackRateOptionsElement };
+
+//# sourceMappingURL=playback-rate-options-element.js.map

package/dist/default/ui/playback-rate-menu/playback-rate-options-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-options-element.js","names":["#mediaState","#core","#disconnect","#handleValueChange","#syncContent","#getTemplate","#ratesKey","#createItem","#createItemFromTemplate","#setLabel"],"sources":["../../../../src/ui/playback-rate-menu/playback-rate-options-element.ts"],"sourcesContent":["import { PlaybackRateMenuCore, PlaybackRateMenuDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MenuItemIndicatorElement } from '../menu/menu-item-indicator-element';\nimport { MenuRadioGroupElement } from '../menu/menu-radio-group-element';\nimport { MenuRadioItemElement } from '../menu/menu-radio-item-element';\n\nexport class PlaybackRateOptionsElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-playback-rate-options';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  formatRate = PlaybackRateMenuCore.defaultProps.formatRate;\n\n  readonly #core = new PlaybackRateMenuCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n\n  #ratesKey = '';\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    this.addEventListener('value-change', this.#handleValueChange, { 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 update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: PlaybackRateMenuCore.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.value = this.#core.getRateValue(state.rate);\n      this.label = this.label || 'Playback rate';\n      this.#syncContent(state);\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, PlaybackRateMenuDataAttrs);\n  }\n\n  #syncContent(state: PlaybackRateMenuCore.State): void {\n    const template = this.#getTemplate();\n    const templateKey = template?.innerHTML ?? '';\n    const ratesKey = `${state.rates.join('|')}::${templateKey}`;\n\n    if (ratesKey !== this.#ratesKey) {\n      this.#ratesKey = ratesKey;\n\n      for (const child of [...this.children]) {\n        if (child instanceof HTMLTemplateElement) continue;\n        child.remove();\n      }\n\n      this.append(...state.rates.map((rate) => this.#createItem(rate, template)));\n    }\n\n    for (const item of this.querySelectorAll<MenuRadioItemElement>(MenuRadioItemElement.tagName)) {\n      const checked = item.value === this.value;\n\n      item.disabled = state.disabled;\n\n      for (const indicator of item.querySelectorAll<MenuItemIndicatorElement>(MenuItemIndicatorElement.tagName)) {\n        indicator.checked = checked;\n      }\n    }\n  }\n\n  #createItem(rate: number, template: HTMLTemplateElement | null): MenuRadioItemElement {\n    const item = this.#createItemFromTemplate(template);\n    const value = this.#core.getRateValue(rate);\n\n    item.value = value;\n    item.setAttribute('data-rate', value);\n    this.#setLabel(item, this.#core.getRateLabel(rate));\n\n    return item;\n  }\n\n  #createItemFromTemplate(template: HTMLTemplateElement | null): MenuRadioItemElement {\n    if (!template) return document.createElement(MenuRadioItemElement.tagName) as MenuRadioItemElement;\n\n    const fragment = template.content.cloneNode(true) as DocumentFragment;\n    const root = fragment.firstElementChild;\n\n    if (!root || root.localName !== MenuRadioItemElement.tagName || root.nextElementSibling) {\n      return document.createElement(MenuRadioItemElement.tagName) as MenuRadioItemElement;\n    }\n\n    return root as MenuRadioItemElement;\n  }\n\n  #setLabel(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  #getTemplate(): HTMLTemplateElement | null {\n    for (const child of this.children) {\n      if (child instanceof HTMLTemplateElement) return child;\n    }\n\n    return null;\n  }\n\n  #handleValueChange = (event: Event): void => {\n    if (event.target !== this) return;\n\n    const media = this.#mediaState.value;\n    if (!media) return;\n\n    const { value } = (event as CustomEvent<{ value: string }>).detail;\n    this.#core.selectValue(media, value);\n  };\n}\n\nexport namespace PlaybackRateOptionsElement {\n  export type State = PlaybackRateMenuCore.State;\n}\n"],"mappings":";;;;;;;;AAUA,IAAa,6BAAb,cAAgD,sBAAsB;;;kBAQzD;oBACE,qBAAqB,aAAa;eAE9B,IAAI,sBAAsB;qBACpB,IAAI,iBAAiB,MAAM,eAAe,mBAAmB;mBAExE;qBAC0B;6BA4GhB,UAAuB;AAC3C,OAAI,MAAM,WAAW,KAAM;GAE3B,MAAM,QAAQ,MAAA,WAAiB;AAC/B,OAAI,CAAC,MAAO;GAEZ,MAAM,EAAE,UAAW,MAAyC;AAC5D,SAAA,KAAW,YAAY,OAAO,MAAM;;;;iBAjIH;;;oBAEN;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAKD;CACA;CAEA;CACA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,QAAA,aAAmB,IAAI,iBAAiB;AACxC,OAAK,iBAAiB,gBAAgB,MAAA,mBAAyB,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;;CAOrG,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;CAGrB,OAA0B,SAA+B;EACvD,MAAM,QAAQ,MAAA,WAAiB;EAC/B,IAAI,QAA2C;AAE/C,MAAI,OAAO;AACT,SAAA,KAAW,SAAS;IAAE,YAAY,KAAK;IAAY,UAAU,KAAK;IAAU,CAAC;AAC7E,SAAA,KAAW,SAAS,MAAM;AAC1B,WAAQ,MAAA,KAAW,UAAU;AAE7B,QAAK,QAAQ,MAAA,KAAW,aAAa,MAAM,KAAK;AAChD,QAAK,QAAQ,KAAK,SAAS;AAC3B,SAAA,YAAkB,MAAM;;AAG1B,QAAM,OAAO,QAAQ;AAErB,MAAI,MAAO,qBAAoB,MAAM,OAAO,0BAA0B;;CAGxE,aAAa,OAAyC;EACpD,MAAM,WAAW,MAAA,aAAmB;EACpC,MAAM,cAAc,UAAU,aAAa;EAC3C,MAAM,WAAW,GAAG,MAAM,MAAM,KAAK,IAAI,CAAC,IAAI;AAE9C,MAAI,aAAa,MAAA,UAAgB;AAC/B,SAAA,WAAiB;AAEjB,QAAK,MAAM,SAAS,CAAC,GAAG,KAAK,SAAS,EAAE;AACtC,QAAI,iBAAiB,oBAAqB;AAC1C,UAAM,QAAQ;;AAGhB,QAAK,OAAO,GAAG,MAAM,MAAM,KAAK,SAAS,MAAA,WAAiB,MAAM,SAAS,CAAC,CAAC;;AAG7E,OAAK,MAAM,QAAQ,KAAK,iBAAuC,qBAAqB,QAAQ,EAAE;GAC5F,MAAM,UAAU,KAAK,UAAU,KAAK;AAEpC,QAAK,WAAW,MAAM;AAEtB,QAAK,MAAM,aAAa,KAAK,iBAA2C,yBAAyB,QAAQ,CACvG,WAAU,UAAU;;;CAK1B,YAAY,MAAc,UAA4D;EACpF,MAAM,OAAO,MAAA,uBAA6B,SAAS;EACnD,MAAM,QAAQ,MAAA,KAAW,aAAa,KAAK;AAE3C,OAAK,QAAQ;AACb,OAAK,aAAa,aAAa,MAAM;AACrC,QAAA,SAAe,MAAM,MAAA,KAAW,aAAa,KAAK,CAAC;AAEnD,SAAO;;CAGT,wBAAwB,UAA4D;AAClF,MAAI,CAAC,SAAU,QAAO,SAAS,cAAc,qBAAqB,QAAQ;EAG1E,MAAM,OADW,SAAS,QAAQ,UAAU,KAAK,CAC3B;AAEtB,MAAI,CAAC,QAAQ,KAAK,cAAc,qBAAqB,WAAW,KAAK,mBACnE,QAAO,SAAS,cAAc,qBAAqB,QAAQ;AAG7D,SAAO;;CAGT,UAAU,MAA4B,OAAqB;EACzD,MAAM,YAAY,KAAK,cAA2B,yBAAuB;AAEzE,MAAI,UACF,WAAU,cAAc;MAExB,MAAK,cAAc;;CAIvB,eAA2C;AACzC,OAAK,MAAM,SAAS,KAAK,SACvB,KAAI,iBAAiB,oBAAqB,QAAO;AAGnD,SAAO;;CAGT"}

package/dist/default/ui/popover/popover-element.js

@@ -1,9 +1,11 @@
+import { containerContext } from "../../player/context.js";
 import { MediaElement } from "../media-element.js";
 import { PositionController } from "../position-controller.js";
-import { applyElementProps, applyStateDataAttrs, createPopover, createTransition, getAnchorNameStyle, getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
+import { applyElementProps, applyStateDataAttrs, createPopover, createTransition, getAnchorNameStyle, getAnchorPositionStyle, getPopupPositionRect, getPositioningBoundaryRect, resolveOffsets, resolvePositioningBoundary } from "@videojs/core/dom";
 import { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from "@videojs/utils/dom";
+import { ContextConsumer } from "@videojs/element/context";
 import { SnapshotController } from "@videojs/store/html";
-import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
+import { POPUP_HOST_ATTR, PopoverCore, PopoverDataAttrs } from "@videojs/core";
 //#region src/ui/popover/popover-element.ts
 var PopoverElement = class extends MediaElement {
 	constructor(..._args) {
@@ -18,7 +20,12 @@ var PopoverElement = class extends MediaElement {
 		this.openOnHover = PopoverCore.defaultProps.openOnHover;
 		this.delay = PopoverCore.defaultProps.delay;
 		this.closeDelay = PopoverCore.defaultProps.closeDelay;
+		this.boundary = "container";
 		this.#core = new PopoverCore();
+		this.#containerCtx = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
 		this.#position = new PositionController(this);
 		this.#popover = null;
 		this.#snapshot = null;
@@ -55,10 +62,12 @@ var PopoverElement = class extends MediaElement {
 			closeDelay: {
 				type: Number,
 				attribute: "close-delay"
-			}
+			},
+			boundary: { type: String }
 		};
 	}
 	#core;
+	#containerCtx;
 	#position;
 	#popover;
 	#snapshot;
@@ -68,6 +77,7 @@ var PopoverElement = class extends MediaElement {
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;
+		this.setAttribute(POPUP_HOST_ATTR, "");
 		this.#disconnect = new AbortController();
 		this.#popover = createPopover({
 			transition: createTransition(),
@@ -82,7 +92,8 @@ var PopoverElement = class extends MediaElement {
 			closeOnOutsideClick: () => this.closeOnOutsideClick,
 			openOnHover: () => this.openOnHover,
 			delay: () => this.delay,
-			closeDelay: () => this.closeDelay
+			closeDelay: () => this.closeDelay,
+			group: () => this.#containerCtx.value?.popupGroup
 		});
 		this.#popover.setPopupElement(this);
 		applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });
@@ -103,6 +114,9 @@ var PopoverElement = class extends MediaElement {
 		this.#popover?.destroy();
 		super.destroyCallback();
 	}
+	close(reason = "imperative-action") {
+		this.#popover?.close(reason);
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);
@@ -136,15 +150,16 @@ var PopoverElement = class extends MediaElement {
 			side: state.side,
 			align: state.align
 		};
-		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts));
+		const boundaryElement = this.#getBoundaryElement();
+		const triggerRect = this.#currentTrigger?.getBoundingClientRect();
+		const boundaryRect = getPositioningBoundaryRect(boundaryElement);
+		const offsets = resolveOffsets(this);
+		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, void 0, boundaryRect, offsets));
 		else {
-			const triggerRect = this.#currentTrigger?.getBoundingClientRect();
 			const selfRect = getPopupPositionRect(this);
-			const boundaryRect = document.documentElement.getBoundingClientRect();
-			const offsets = resolveOffsets(this);
 			applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));
 		}
-		this.#position.sync(this.#currentTrigger);
+		this.#position.sync(this.#currentTrigger, boundaryElement);
 	}
 	#syncTrigger(triggerEl) {
 		if (triggerEl === this.#currentTrigger) return;
@@ -170,6 +185,12 @@ var PopoverElement = class extends MediaElement {
 		this.#triggerAbort = null;
 		this.#currentTrigger = null;
 	}
+	#getBoundaryElement() {
+		return resolvePositioningBoundary(this.boundary, {
+			container: this.#containerCtx.value?.container ?? null,
+			root: this.getRootNode()
+		});
+	}
 };
 //#endregion
 export { PopoverElement };

package/dist/default/ui/popover/popover-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-element.js","names":["#core","#position","#disconnect","#popover","#snapshot","#cleanupTrigger","#syncTrigger","#currentTrigger","#triggerAbort"],"sources":["../../../../src/ui/popover/popover-element.ts"],"sourcesContent":["import { PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createPopover,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  getPopupPositionRect,\n  type PopoverApi,\n  type PopoverChangeDetails,\n  resolveOffsets,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { PositionController } from '../position-controller';\n\nexport class PopoverElement extends MediaElement {\n  static readonly tagName = 'media-popover';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    modal: { type: Boolean },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n    closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n    openOnHover: { type: Boolean, attribute: 'open-on-hover' },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<keyof PopoverCore.Props>;\n\n  open = PopoverCore.defaultProps.open;\n  defaultOpen = PopoverCore.defaultProps.defaultOpen;\n  side = PopoverCore.defaultProps.side;\n  align = PopoverCore.defaultProps.align;\n  modal: PopoverProps['modal'] = PopoverCore.defaultProps.modal;\n  closeOnEscape = PopoverCore.defaultProps.closeOnEscape;\n  closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;\n  openOnHover = PopoverCore.defaultProps.openOnHover;\n  delay = PopoverCore.defaultProps.delay;\n  closeDelay = PopoverCore.defaultProps.closeDelay;\n\n  readonly #core = new PopoverCore();\n  readonly #position = new PositionController(this);\n  #popover: PopoverApi | null = null;\n  #snapshot: SnapshotController<PopoverInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n\n    this.#popover = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      closeOnEscape: () => this.closeOnEscape,\n      closeOnOutsideClick: () => this.closeOnOutsideClick,\n      openOnHover: () => this.openOnHover,\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#popover.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    // Reuse the controller across connect/disconnect cycles to avoid\n    // leaking stale controllers in the host's controller set.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#popover.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#popover.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#popover?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#cleanupTrigger();\n    this.#popover?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#popover && changed.has('open')) {\n      const { active: interactionOpen } = this.#popover.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#popover.open();\n        } else {\n          this.#popover.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#popover) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#position.findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#popover.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, PopoverDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Apply trigger ARIA and anchor-name to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n\n    if (supportsAnchorPositioning()) {\n      // Native CSS Anchor Positioning — no JS rect measurements needed.\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts));\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n      const selfRect = getPopupPositionRect(this);\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(this);\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));\n    }\n\n    this.#position.sync(this.#currentTrigger);\n  }\n\n  // --- Trigger management ---\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#popover?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#popover) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      // Remove ARIA attributes and anchor-name style from the old trigger.\n      applyElementProps(this.#currentTrigger, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"popover-element.js","names":["#core","#containerCtx","#position","#disconnect","#popover","#snapshot","#cleanupTrigger","#syncTrigger","#currentTrigger","#getBoundaryElement","#triggerAbort"],"sources":["../../../../src/ui/popover/popover-element.ts"],"sourcesContent":["import { POPUP_HOST_ATTR, PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createPopover,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  getPopupPositionRect,\n  getPositioningBoundaryRect,\n  type PopoverApi,\n  type PopoverChangeDetails,\n  type PopoverOpenChangeReason,\n  type PositioningBoundary,\n  resolveOffsets,\n  resolvePositioningBoundary,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\nimport { containerContext } from '../../player/context';\nimport { MediaElement } from '../media-element';\nimport { PositionController } from '../position-controller';\nexport class PopoverElement extends MediaElement {\n  static readonly tagName = 'media-popover';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    modal: { type: Boolean },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n    closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n    openOnHover: { type: Boolean, attribute: 'open-on-hover' },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    boundary: { type: String },\n  } satisfies PropertyDeclarationMap<keyof PopoverCore.Props | 'boundary'>;\n\n  open = PopoverCore.defaultProps.open;\n  defaultOpen = PopoverCore.defaultProps.defaultOpen;\n  side = PopoverCore.defaultProps.side;\n  align = PopoverCore.defaultProps.align;\n  modal: PopoverProps['modal'] = PopoverCore.defaultProps.modal;\n  closeOnEscape = PopoverCore.defaultProps.closeOnEscape;\n  closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;\n  openOnHover = PopoverCore.defaultProps.openOnHover;\n  delay = PopoverCore.defaultProps.delay;\n  closeDelay = PopoverCore.defaultProps.closeDelay;\n  boundary: PositioningBoundary = 'container';\n\n  readonly #core = new PopoverCore();\n  readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #position = new PositionController(this);\n  #popover: PopoverApi | null = null;\n  #snapshot: SnapshotController<PopoverInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.setAttribute(POPUP_HOST_ATTR, '');\n\n    this.#disconnect = new AbortController();\n\n    this.#popover = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      closeOnEscape: () => this.closeOnEscape,\n      closeOnOutsideClick: () => this.closeOnOutsideClick,\n      openOnHover: () => this.openOnHover,\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      group: () => this.#containerCtx.value?.popupGroup,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#popover.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    // Reuse the controller across connect/disconnect cycles to avoid\n    // leaking stale controllers in the host's controller set.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#popover.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#popover.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#popover?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#cleanupTrigger();\n    this.#popover?.destroy();\n    super.destroyCallback();\n  }\n\n  close(reason: PopoverOpenChangeReason = 'imperative-action'): void {\n    this.#popover?.close(reason);\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#popover && changed.has('open')) {\n      const { active: interactionOpen } = this.#popover.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#popover.open();\n        } else {\n          this.#popover.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#popover) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#position.findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#popover.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, PopoverDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Apply trigger ARIA and anchor-name to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n    const boundaryElement = this.#getBoundaryElement();\n    const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n    const boundaryRect = getPositioningBoundaryRect(boundaryElement);\n    const offsets = resolveOffsets(this);\n\n    if (supportsAnchorPositioning()) {\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, undefined, boundaryRect, offsets));\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const selfRect = getPopupPositionRect(this);\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));\n    }\n\n    this.#position.sync(this.#currentTrigger, boundaryElement);\n  }\n\n  // --- Trigger management ---\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#popover?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#popover) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      // Remove ARIA attributes and anchor-name style from the old trigger.\n      applyElementProps(this.#currentTrigger, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n\n  #getBoundaryElement(): Element | null {\n    return resolvePositioningBoundary(this.boundary, {\n      container: this.#containerCtx.value?.container ?? null,\n      root: this.getRootNode() as Document | ShadowRoot,\n    });\n  }\n}\n"],"mappings":";;;;;;;;;AAwBA,IAAa,iBAAb,cAAoC,aAAa;;;cAiBxC,YAAY,aAAa;qBAClB,YAAY,aAAa;cAChC,YAAY,aAAa;eACxB,YAAY,aAAa;eACF,YAAY,aAAa;uBACxC,YAAY,aAAa;6BACnB,YAAY,aAAa;qBACjC,YAAY,aAAa;eAC/B,YAAY,aAAa;oBACpB,YAAY,aAAa;kBACN;eAEf,IAAI,aAAa;uBACT,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAkB,WAAW;GAAM,CAAC;mBAC7E,IAAI,mBAAmB,KAAK;kBACnB;mBACuB;qBAGf;uBACE;yBACF;;;iBArCZ;;;oBAEG;GAC3B,MAAM,EAAE,MAAM,SAAS;GACvB,aAAa;IAAE,MAAM;IAAS,WAAW;IAAgB;GACzD,MAAM,EAAE,MAAM,QAAQ;GACtB,OAAO,EAAE,MAAM,QAAQ;GACvB,OAAO,EAAE,MAAM,SAAS;GACxB,eAAe;IAAE,MAAM;IAAS,WAAW;IAAmB;GAC9D,qBAAqB;IAAE,MAAM;IAAS,WAAW;IAA0B;GAC3E,aAAa;IAAE,MAAM;IAAS,WAAW;IAAiB;GAC1D,OAAO,EAAE,MAAM,QAAQ;GACvB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACtD,UAAU,EAAE,MAAM,QAAQ;GAC3B;;CAcD;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,OAAK,aAAa,iBAAiB,GAAG;AAEtC,QAAA,aAAmB,IAAI,iBAAiB;AAExC,QAAA,UAAgB,cAAc;GAC5B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,SAAK,OAAO;AACZ,SAAK,cAAc,IAAI,YAAY,eAAe,EAAE,QAAQ;KAAE,MAAM;KAAU,GAAG;KAAS,EAAE,CAAC,CAAC;;GAEhG,qBAAqB,KAAK;GAC1B,2BAA2B,KAAK;GAChC,mBAAmB,KAAK;GACxB,aAAa,KAAK;GAClB,kBAAkB,KAAK;GACvB,aAAa,MAAA,aAAmB,OAAO;GACxC,CAAC;AAGF,QAAA,QAAc,gBAAgB,KAAK;AAGnC,oBAAkB,MAAM,MAAA,QAAc,YAAY,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;AAKtF,MAAI,MAAA,SACF,OAAA,SAAe,MAAM,MAAA,QAAc,MAAM;MAEzC,OAAA,WAAiB,IAAI,mBAAmB,MAAM,MAAA,QAAc,MAAM;;CAItE,aAAgC,SAA+B;AAC7D,QAAM,aAAa,QAAQ;AAI3B,MAAI,KAAK,eAAe,CAAC,KAAK,KAC5B,OAAA,SAAe,MAAM;;CAIzB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;CAGrB,kBAAiC;AAC/B,QAAA,gBAAsB;AACtB,QAAA,SAAe,SAAS;AACxB,QAAM,iBAAiB;;CAGzB,MAAM,SAAkC,qBAA2B;AACjE,QAAA,SAAe,MAAM,OAAO;;CAG9B,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAA,KAAW,SAAS,KAAK;AAGzB,MAAI,MAAA,WAAiB,QAAQ,IAAI,OAAO,EAAE;GACxC,MAAM,EAAE,QAAQ,oBAAoB,MAAA,QAAc,MAAM;AACxD,OAAI,KAAK,SAAS,gBAChB,KAAI,KAAK,KACP,OAAA,QAAc,MAAM;OAEpB,OAAA,QAAc,OAAO;;;CAM7B,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,MAAA,QAAe;EAGpB,MAAM,YAAY,MAAA,SAAe,aAAa;AAC9C,QAAA,YAAkB,UAAU;EAG5B,MAAM,QAAQ,MAAA,QAAc,MAAM;AAClC,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAGnC,oBAAkB,MAAM,MAAA,KAAW,cAAc,MAAM,CAAC;AACxD,sBAAoB,MAAM,OAAO,iBAAiB;AAIlD,MAAI,MAAM,KACR,gBAAe,KAAK;MAEpB,gBAAe,KAAK;AAItB,MAAI,MAAA,gBAAsB;AACxB,qBAAkB,MAAA,gBAAsB,MAAA,KAAW,gBAAgB,OAAO,KAAK,GAAG,CAAC;AACnF,eAAY,MAAA,gBAAsB,mBAAmB,KAAK,GAAG,CAAC;;AAIhE,MAAI,CAAC,MAAM,MAAM;AACf,SAAA,SAAe,SAAS;AACxB;;EAIF,MAAM,UAAU;GAAE,MAAM,MAAM;GAAM,OAAO,MAAM;GAAO;EACxD,MAAM,kBAAkB,MAAA,oBAA0B;EAClD,MAAM,cAAc,MAAA,gBAAsB,uBAAuB;EACjE,MAAM,eAAe,2BAA2B,gBAAgB;EAChE,MAAM,UAAU,eAAe,KAAK;AAEpC,MAAI,2BAA2B,CAC7B,aAAY,MAAM,uBAAuB,KAAK,IAAI,SAAS,aAAa,KAAA,GAAW,cAAc,QAAQ,CAAC;OACrG;GAEL,MAAM,WAAW,qBAAqB,KAAK;AAC3C,eAAY,MAAM,uBAAuB,KAAK,IAAI,SAAS,aAAa,UAAU,cAAc,QAAQ,CAAC;;AAG3G,QAAA,SAAe,KAAK,MAAA,gBAAsB,gBAAgB;;CAK5D,aAAa,WAAqC;AAChD,MAAI,cAAc,MAAA,eAAsB;AAExC,QAAA,SAAe,SAAS;AACxB,QAAA,gBAAsB;AACtB,QAAA,iBAAuB;AACvB,QAAA,SAAe,kBAAkB,UAAU;AAE3C,MAAI,aAAa,MAAA,SAAe;AAC9B,SAAA,eAAqB,IAAI,iBAAiB;AAC1C,qBAAkB,WAAW,MAAA,QAAc,cAAc,EAAE,QAAQ,MAAA,aAAmB,QAAQ,CAAC;;;CAInG,kBAAwB;AACtB,MAAI,MAAA,gBAAsB;AAExB,qBAAkB,MAAA,gBAAsB;IACtC,iBAAiB,KAAA;IACjB,iBAAiB,KAAA;IACjB,iBAAiB,KAAA;IAClB,CAAC;AACF,SAAA,eAAqB,MAAM,eAAe,cAAc;;AAG1D,QAAA,cAAoB,OAAO;AAC3B,QAAA,eAAqB;AACrB,QAAA,iBAAuB;;CAGzB,sBAAsC;AACpC,SAAO,2BAA2B,KAAK,UAAU;GAC/C,WAAW,MAAA,aAAmB,OAAO,aAAa;GAClD,MAAM,KAAK,aAAa;GACzB,CAAC"}

package/dist/default/ui/position-controller.js

@@ -1,11 +1,12 @@
-import { supportsAnchorPositioning } from "@videojs/utils/dom";
+import { isEventWithinElement } from "@videojs/core/dom";
 //#region src/ui/position-controller.ts
 /**
 * Reactive controller that manages JS-fallback positioning for floating
 * popup elements (tooltips, popovers). Tracks scroll, resize, and
 * ResizeObserver events to keep the popup aligned with its trigger.
 *
-* When native CSS Anchor Positioning is supported, `sync()` is a no-op.
+* Native CSS Anchor Positioning still uses this controller for dynamic
+* sizing variables such as available width/height.
 */
 var PositionController = class {
 	#host;
@@ -13,6 +14,7 @@ var PositionController = class {
 	#frame = 0;
 	#resizeObserver = null;
 	#trigger = null;
+	#boundary = null;
 	constructor(host) {
 		this.#host = host;
 		host.addController(this);
@@ -23,15 +25,16 @@ var PositionController = class {
 		return this.#host.getRootNode().querySelector(`[commandfor="${this.#host.id}"]`);
 	}
 	/** Start or update position tracking for the given trigger. */
-	sync(trigger) {
-		if (supportsAnchorPositioning()) return;
+	sync(trigger, boundary = null) {
 		if (!trigger) return;
-		if (this.#abort && this.#trigger === trigger) return;
+		if (this.#abort && this.#trigger === trigger && this.#boundary === boundary) return;
 		this.cleanup();
 		this.#abort = new AbortController();
 		this.#trigger = trigger;
+		this.#boundary = boundary;
 		const { signal } = this.#abort;
-		const reposition = () => {
+		const reposition = (event) => {
+			if (event && isEventWithinElement(event, this.#host)) return;
 			cancelAnimationFrame(this.#frame);
 			this.#frame = requestAnimationFrame(() => {
 				if (signal.aborted) return;
@@ -50,6 +53,7 @@ var PositionController = class {
 			});
 			this.#resizeObserver.observe(trigger);
 			this.#resizeObserver.observe(this.#host);
+			if (boundary) this.#resizeObserver.observe(boundary);
 		}
 		reposition();
 	}
@@ -58,6 +62,7 @@ var PositionController = class {
 		this.#abort?.abort();
 		this.#abort = null;
 		this.#trigger = null;
+		this.#boundary = null;
 		cancelAnimationFrame(this.#frame);
 		this.#frame = 0;
 		this.#resizeObserver?.disconnect();