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

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,6 +20,18 @@ 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;
+		this.#disconnect = null;
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
 	}
 	static {
 		this.tagName = "media-popover";
@@ -48,19 +62,22 @@ var PopoverElement = class extends MediaElement {
 			closeDelay: {
 				type: Number,
 				attribute: "close-delay"
-			}
+			},
+			boundary: { type: String }
 		};
 	}
-	#core = new PopoverCore();
-	#position = new PositionController(this);
-	#popover = null;
-	#snapshot = null;
-	#disconnect = null;
-	#triggerAbort = null;
-	#currentTrigger = null;
+	#core;
+	#containerCtx;
+	#position;
+	#popover;
+	#snapshot;
+	#disconnect;
+	#triggerAbort;
+	#currentTrigger;
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;
+		this.setAttribute(POPUP_HOST_ATTR, "");
 		this.#disconnect = new AbortController();
 		this.#popover = createPopover({
 			transition: createTransition(),
@@ -75,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 });
@@ -96,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);
@@ -129,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;
@@ -163,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":";;;;;;;AAoBA,IAAa,iBAAb,cAAoC,aAAa;;;cAgBxC,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;;;iBAxBZ;;;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;GACvD;;CAaD,QAAiB,IAAI,aAAa;CAClC,YAAqB,IAAI,mBAAmB,KAAK;CACjD,WAA8B;CAC9B,YAAqD;CAGrD,cAAsC;CACtC,gBAAwC;CACxC,kBAAsC;CAEtC,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,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;GACxB,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,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;AAExD,MAAI,2BAA2B,CAE7B,aAAY,MAAM,uBAAuB,KAAK,IAAI,QAAQ,CAAC;OACtD;GAEL,MAAM,cAAc,MAAA,gBAAsB,uBAAuB;GACjE,MAAM,WAAW,qBAAqB,KAAK;GAC3C,MAAM,eAAe,SAAS,gBAAgB,uBAAuB;GACrE,MAAM,UAAU,eAAe,KAAK;AACpC,eAAY,MAAM,uBAAuB,KAAK,IAAI,SAAS,aAAa,UAAU,cAAc,QAAQ,CAAC;;AAG3G,QAAA,SAAe,KAAK,MAAA,eAAqB;;CAK3C,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"}
+{"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":"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"}

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();

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

@@ -1 +1 @@
-{"version":3,"file":"position-controller.js","names":["#host","#abort","#trigger","#frame","#resizeObserver"],"sources":["../../../src/ui/position-controller.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\n\nexport type PositionControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller that manages JS-fallback positioning for floating\n * popup elements (tooltips, popovers). Tracks scroll, resize, and\n * ResizeObserver events to keep the popup aligned with its trigger.\n *\n * When native CSS Anchor Positioning is supported, `sync()` is a no-op.\n */\nexport class PositionController implements ReactiveController {\n  readonly #host: PositionControllerHost;\n\n  #abort: AbortController | null = null;\n  #frame = 0;\n  #resizeObserver: ResizeObserver | null = null;\n  #trigger: HTMLElement | null = null;\n\n  constructor(host: PositionControllerHost) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  /** Discover a trigger element linked via `commandfor` attribute. */\n  findTrigger(): HTMLElement | null {\n    if (!this.#host.id) return null;\n    const root = this.#host.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.#host.id}\"]`);\n  }\n\n  /** Start or update position tracking for the given trigger. */\n  sync(trigger: HTMLElement | null): void {\n    if (supportsAnchorPositioning()) return;\n    if (!trigger) return;\n    if (this.#abort && this.#trigger === trigger) return;\n\n    this.cleanup();\n    this.#abort = new AbortController();\n    this.#trigger = trigger;\n    const { signal } = this.#abort;\n\n    const reposition = () => {\n      cancelAnimationFrame(this.#frame);\n      this.#frame = requestAnimationFrame(() => {\n        if (signal.aborted) return;\n        this.#host.requestUpdate();\n      });\n    };\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true, signal });\n    window.addEventListener('resize', reposition, { signal });\n\n    if (typeof ResizeObserver === 'function') {\n      this.#resizeObserver = new ResizeObserver(() => {\n        reposition();\n      });\n      this.#resizeObserver.observe(trigger);\n      this.#resizeObserver.observe(this.#host);\n    }\n\n    reposition();\n  }\n\n  /** Stop all position tracking. */\n  cleanup(): void {\n    this.#abort?.abort();\n    this.#abort = null;\n    this.#trigger = null;\n    cancelAnimationFrame(this.#frame);\n    this.#frame = 0;\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  hostDisconnected(): void {\n    this.cleanup();\n  }\n\n  hostDestroyed(): void {\n    this.cleanup();\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,IAAa,qBAAb,MAA8D;CAC5D;CAEA,SAAiC;CACjC,SAAS;CACT,kBAAyC;CACzC,WAA+B;CAE/B,YAAY,MAA8B;AACxC,QAAA,OAAa;AACb,OAAK,cAAc,KAAK;;;CAI1B,cAAkC;AAChC,MAAI,CAAC,MAAA,KAAW,GAAI,QAAO;AAE3B,SADa,MAAA,KAAW,aAAa,CACzB,cAA2B,gBAAgB,MAAA,KAAW,GAAG,IAAI;;;CAI3E,KAAK,SAAmC;AACtC,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,QAAS;AACd,MAAI,MAAA,SAAe,MAAA,YAAkB,QAAS;AAE9C,OAAK,SAAS;AACd,QAAA,QAAc,IAAI,iBAAiB;AACnC,QAAA,UAAgB;EAChB,MAAM,EAAE,WAAW,MAAA;EAEnB,MAAM,mBAAmB;AACvB,wBAAqB,MAAA,MAAY;AACjC,SAAA,QAAc,4BAA4B;AACxC,QAAI,OAAO,QAAS;AACpB,UAAA,KAAW,eAAe;KAC1B;;AAGJ,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM;GAAQ,CAAC;AACvF,SAAO,iBAAiB,UAAU,YAAY,EAAE,QAAQ,CAAC;AAEzD,MAAI,OAAO,mBAAmB,YAAY;AACxC,SAAA,iBAAuB,IAAI,qBAAqB;AAC9C,gBAAY;KACZ;AACF,SAAA,eAAqB,QAAQ,QAAQ;AACrC,SAAA,eAAqB,QAAQ,MAAA,KAAW;;AAG1C,cAAY;;;CAId,UAAgB;AACd,QAAA,OAAa,OAAO;AACpB,QAAA,QAAc;AACd,QAAA,UAAgB;AAChB,uBAAqB,MAAA,MAAY;AACjC,QAAA,QAAc;AACd,QAAA,gBAAsB,YAAY;AAClC,QAAA,iBAAuB;;CAGzB,mBAAyB;AACvB,OAAK,SAAS;;CAGhB,gBAAsB;AACpB,OAAK,SAAS"}
+{"version":3,"file":"position-controller.js","names":["#host","#abort","#trigger","#boundary","#frame","#resizeObserver"],"sources":["../../../src/ui/position-controller.ts"],"sourcesContent":["import { isEventWithinElement } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\n\nexport type PositionControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller that manages JS-fallback positioning for floating\n * popup elements (tooltips, popovers). Tracks scroll, resize, and\n * ResizeObserver events to keep the popup aligned with its trigger.\n *\n * Native CSS Anchor Positioning still uses this controller for dynamic\n * sizing variables such as available width/height.\n */\nexport class PositionController implements ReactiveController {\n  readonly #host: PositionControllerHost;\n\n  #abort: AbortController | null = null;\n  #frame = 0;\n  #resizeObserver: ResizeObserver | null = null;\n  #trigger: HTMLElement | null = null;\n  #boundary: Element | null = null;\n\n  constructor(host: PositionControllerHost) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  /** Discover a trigger element linked via `commandfor` attribute. */\n  findTrigger(): HTMLElement | null {\n    if (!this.#host.id) return null;\n    const root = this.#host.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.#host.id}\"]`);\n  }\n\n  /** Start or update position tracking for the given trigger. */\n  sync(trigger: HTMLElement | null, boundary: Element | null = null): void {\n    if (!trigger) return;\n    if (this.#abort && this.#trigger === trigger && this.#boundary === boundary) return;\n\n    this.cleanup();\n    this.#abort = new AbortController();\n    this.#trigger = trigger;\n    this.#boundary = boundary;\n    const { signal } = this.#abort;\n\n    const reposition = (event?: Event) => {\n      if (event && isEventWithinElement(event, this.#host)) return;\n\n      cancelAnimationFrame(this.#frame);\n      this.#frame = requestAnimationFrame(() => {\n        if (signal.aborted) return;\n        this.#host.requestUpdate();\n      });\n    };\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true, signal });\n    window.addEventListener('resize', reposition, { signal });\n\n    if (typeof ResizeObserver === 'function') {\n      this.#resizeObserver = new ResizeObserver(() => {\n        reposition();\n      });\n      this.#resizeObserver.observe(trigger);\n      this.#resizeObserver.observe(this.#host);\n      if (boundary) this.#resizeObserver.observe(boundary);\n    }\n\n    reposition();\n  }\n\n  /** Stop all position tracking. */\n  cleanup(): void {\n    this.#abort?.abort();\n    this.#abort = null;\n    this.#trigger = null;\n    this.#boundary = null;\n    cancelAnimationFrame(this.#frame);\n    this.#frame = 0;\n    // Disconnect unobserves trigger, host, and boundary together.\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  hostDisconnected(): void {\n    this.cleanup();\n  }\n\n  hostDestroyed(): void {\n    this.cleanup();\n  }\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAa,qBAAb,MAA8D;CAC5D;CAEA,SAAiC;CACjC,SAAS;CACT,kBAAyC;CACzC,WAA+B;CAC/B,YAA4B;CAE5B,YAAY,MAA8B;AACxC,QAAA,OAAa;AACb,OAAK,cAAc,KAAK;;;CAI1B,cAAkC;AAChC,MAAI,CAAC,MAAA,KAAW,GAAI,QAAO;AAE3B,SADa,MAAA,KAAW,aAAa,CACzB,cAA2B,gBAAgB,MAAA,KAAW,GAAG,IAAI;;;CAI3E,KAAK,SAA6B,WAA2B,MAAY;AACvE,MAAI,CAAC,QAAS;AACd,MAAI,MAAA,SAAe,MAAA,YAAkB,WAAW,MAAA,aAAmB,SAAU;AAE7E,OAAK,SAAS;AACd,QAAA,QAAc,IAAI,iBAAiB;AACnC,QAAA,UAAgB;AAChB,QAAA,WAAiB;EACjB,MAAM,EAAE,WAAW,MAAA;EAEnB,MAAM,cAAc,UAAkB;AACpC,OAAI,SAAS,qBAAqB,OAAO,MAAA,KAAW,CAAE;AAEtD,wBAAqB,MAAA,MAAY;AACjC,SAAA,QAAc,4BAA4B;AACxC,QAAI,OAAO,QAAS;AACpB,UAAA,KAAW,eAAe;KAC1B;;AAGJ,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM;GAAQ,CAAC;AACvF,SAAO,iBAAiB,UAAU,YAAY,EAAE,QAAQ,CAAC;AAEzD,MAAI,OAAO,mBAAmB,YAAY;AACxC,SAAA,iBAAuB,IAAI,qBAAqB;AAC9C,gBAAY;KACZ;AACF,SAAA,eAAqB,QAAQ,QAAQ;AACrC,SAAA,eAAqB,QAAQ,MAAA,KAAW;AACxC,OAAI,SAAU,OAAA,eAAqB,QAAQ,SAAS;;AAGtD,cAAY;;;CAId,UAAgB;AACd,QAAA,OAAa,OAAO;AACpB,QAAA,QAAc;AACd,QAAA,UAAgB;AAChB,QAAA,WAAiB;AACjB,uBAAqB,MAAA,MAAY;AACjC,QAAA,QAAc;AAEd,QAAA,gBAAsB,YAAY;AAClC,QAAA,iBAAuB;;CAGzB,mBAAyB;AACvB,OAAK,SAAS;;CAGhB,gBAAsB;AACpB,OAAK,SAAS"}

package/dist/default/ui/seek-indicator/seek-indicator-element.js

@@ -0,0 +1,44 @@
+import { InputIndicatorElement } from "../input-indicators/input-indicator-element.js";
+import { LiveIndicator } from "../input-indicators/live-indicator.js";
+import { createTransition } from "@videojs/core/dom";
+import { SeekIndicatorCore, SeekIndicatorDataAttrs, getSeekIndicatorDisplayValue } from "@videojs/core";
+//#region src/ui/seek-indicator/seek-indicator-element.ts
+var SeekIndicatorElement = class extends InputIndicatorElement {
+	static {
+		this.tagName = "media-seek-indicator";
+	}
+	static {
+		this.properties = { closeDelay: {
+			type: Number,
+			attribute: "close-delay"
+		} };
+	}
+	#core = new SeekIndicatorCore();
+	#transition = createTransition();
+	#liveIndicator = new LiveIndicator({
+		host: this,
+		dataAttrs: SeekIndicatorDataAttrs,
+		render: renderSeekIndicator
+	});
+	get core() {
+		return this.#core;
+	}
+	get transition() {
+		return this.#transition;
+	}
+	get liveIndicator() {
+		return this.#liveIndicator;
+	}
+	syncCoreProps() {
+		this.#core.setProps({ closeDelay: this.closeDelay });
+	}
+};
+function renderSeekIndicator(element, state) {
+	const value = element.querySelector("media-seek-indicator-value");
+	if (!value) return;
+	value.textContent = getSeekIndicatorDisplayValue(state);
+}
+//#endregion
+export { SeekIndicatorElement };
+
+//# sourceMappingURL=seek-indicator-element.js.map

package/dist/default/ui/seek-indicator/seek-indicator-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-indicator-element.js","names":["#core","#transition","#liveIndicator"],"sources":["../../../../src/ui/seek-indicator/seek-indicator-element.ts"],"sourcesContent":["import { getSeekIndicatorDisplayValue, SeekIndicatorCore, SeekIndicatorDataAttrs } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { InputIndicatorElement } from '../input-indicators/input-indicator-element';\nimport { LiveIndicator } from '../input-indicators/live-indicator';\n\nexport class SeekIndicatorElement extends InputIndicatorElement<SeekIndicatorCore.State> {\n  static readonly tagName = 'media-seek-indicator';\n\n  static override properties = {\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'closeDelay'>;\n\n  closeDelay: number | undefined;\n\n  readonly #core = new SeekIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: SeekIndicatorDataAttrs,\n    render: renderSeekIndicator,\n  });\n\n  protected get core() {\n    return this.#core;\n  }\n\n  protected get transition() {\n    return this.#transition;\n  }\n\n  protected get liveIndicator() {\n    return this.#liveIndicator;\n  }\n\n  protected override syncCoreProps(): void {\n    this.#core.setProps({ closeDelay: this.closeDelay });\n  }\n}\n\nfunction renderSeekIndicator(element: HTMLElement, state: SeekIndicatorCore.State): void {\n  const value = element.querySelector('media-seek-indicator-value');\n  if (!value) return;\n\n  value.textContent = getSeekIndicatorDisplayValue(state);\n}\n"],"mappings":";;;;;AAOA,IAAa,uBAAb,cAA0C,sBAA+C;;iBAC7D;;;oBAEG,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;GAAe,EACvD;;CAID,QAAiB,IAAI,mBAAmB;CACxC,cAAuB,kBAAkB;CACzC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;EACT,CAAC;CAEF,IAAc,OAAO;AACnB,SAAO,MAAA;;CAGT,IAAc,aAAa;AACzB,SAAO,MAAA;;CAGT,IAAc,gBAAgB;AAC5B,SAAO,MAAA;;CAGT,gBAAyC;AACvC,QAAA,KAAW,SAAS,EAAE,YAAY,KAAK,YAAY,CAAC;;;AAIxD,SAAS,oBAAoB,SAAsB,OAAsC;CACvF,MAAM,QAAQ,QAAQ,cAAc,6BAA6B;AACjE,KAAI,CAAC,MAAO;AAEZ,OAAM,cAAc,6BAA6B,MAAM"}

package/dist/default/ui/seek-indicator/seek-indicator-value-element.js

@@ -0,0 +1,11 @@
+import { MediaElement } from "../media-element.js";
+//#region src/ui/seek-indicator/seek-indicator-value-element.ts
+var SeekIndicatorValueElement = class extends MediaElement {
+	static {
+		this.tagName = "media-seek-indicator-value";
+	}
+};
+//#endregion
+export { SeekIndicatorValueElement };
+
+//# sourceMappingURL=seek-indicator-value-element.js.map

package/dist/default/ui/seek-indicator/seek-indicator-value-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-indicator-value-element.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-value-element.ts"],"sourcesContent":["import { MediaElement } from '../media-element';\n\nexport class SeekIndicatorValueElement extends MediaElement {\n  static readonly tagName = 'media-seek-indicator-value';\n}\n"],"mappings":";;AAEA,IAAa,4BAAb,cAA+C,aAAa;;iBAChC"}

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

@@ -17,6 +17,10 @@ var SliderElement = class extends MediaElement {
 		this.orientation = SliderCore.defaultProps.orientation;
 		this.disabled = SliderCore.defaultProps.disabled;
 		this.thumbAlignment = SliderCore.defaultProps.thumbAlignment;
+		this.#core = new SliderCore();
+		this.#provider = new ContextProvider(this, { context: sliderContext });
+		this.#slider = null;
+		this.#disconnect = null;
 	}
 	static {
 		this.tagName = "media-slider";
@@ -40,10 +44,10 @@ var SliderElement = class extends MediaElement {
 			}
 		};
 	}
-	#core = new SliderCore();
-	#provider = new ContextProvider(this, { context: sliderContext });
-	#slider = null;
-	#disconnect = null;
+	#core;
+	#provider;
+	#slider;
+	#disconnect;
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;

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

@@ -1 +1 @@
-{"version":3,"file":"slider-element.js","names":["#core","#provider","#disconnect","#slider"],"sources":["../../../../src/ui/slider/slider-element.ts"],"sourcesContent":["import { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getSliderCSSVars,\n  type SliderApi,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles, isRTL } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderElement extends MediaElement {\n  static readonly tagName = 'media-slider';\n\n  static override properties = {\n    label: { type: String },\n    value: { type: Number },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<keyof SliderCore.Props>;\n\n  label = SliderCore.defaultProps.label;\n  value = SliderCore.defaultProps.value;\n  min = SliderCore.defaultProps.min;\n  max = SliderCore.defaultProps.max;\n  step = SliderCore.defaultProps.step;\n  largeStep = SliderCore.defaultProps.largeStep;\n  orientation = SliderCore.defaultProps.orientation;\n  disabled = SliderCore.defaultProps.disabled;\n  thumbAlignment = SliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new SliderCore();\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n\n  #slider: SliderApi | null = null;\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    const signal = this.#disconnect.signal;\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isRTL: () => isRTL(this),\n      isDisabled: () => this.disabled,\n      getPercent: () => this.#core.percentFromValue(this.value),\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true }));\n      },\n      onValueCommit: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-commit', { detail: { value: this.value }, bubbles: true }));\n      },\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\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.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#slider) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const state = this.#core.getSliderState(this.value);\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Apply state data attributes to the root element.\n    applyStateDataAttrs(this, state, SliderDataAttrs);\n\n    // Provide context to child elements (thumb, value, track, etc.).\n    this.#provider.setValue({\n      state,\n      stateAttrMap: SliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"slider-element.js","names":["#core","#provider","#disconnect","#slider"],"sources":["../../../../src/ui/slider/slider-element.ts"],"sourcesContent":["import { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getSliderCSSVars,\n  type SliderApi,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles, isRTL } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderElement extends MediaElement {\n  static readonly tagName = 'media-slider';\n\n  static override properties = {\n    label: { type: String },\n    value: { type: Number },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<keyof SliderCore.Props>;\n\n  label = SliderCore.defaultProps.label;\n  value = SliderCore.defaultProps.value;\n  min = SliderCore.defaultProps.min;\n  max = SliderCore.defaultProps.max;\n  step = SliderCore.defaultProps.step;\n  largeStep = SliderCore.defaultProps.largeStep;\n  orientation = SliderCore.defaultProps.orientation;\n  disabled = SliderCore.defaultProps.disabled;\n  thumbAlignment = SliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new SliderCore();\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n\n  #slider: SliderApi | null = null;\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    const signal = this.#disconnect.signal;\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isRTL: () => isRTL(this),\n      isDisabled: () => this.disabled,\n      getPercent: () => this.#core.percentFromValue(this.value),\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true }));\n      },\n      onValueCommit: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-commit', { detail: { value: this.value }, bubbles: true }));\n      },\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\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.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#slider) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const state = this.#core.getSliderState(this.value);\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Apply state data attributes to the root element.\n    applyStateDataAttrs(this, state, SliderDataAttrs);\n\n    // Provide context to child elements (thumb, value, track, etc.).\n    this.#provider.setValue({\n      state,\n      stateAttrMap: SliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/default/ui/slider/slider-preview-element.js

@@ -8,6 +8,12 @@ var SliderPreviewElement = class extends MediaElement {
 	constructor(..._args) {
 		super(..._args);
 		this.overflow = "clamp";
+		this.#ctx = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
+		this.#resizeObserver = null;
+		this.#width = 0;
 	}
 	static {
 		this.tagName = "media-slider-preview";
@@ -15,12 +21,9 @@ var SliderPreviewElement = class extends MediaElement {
 	static {
 		this.properties = { overflow: { type: String } };
 	}
-	#ctx = new ContextConsumer(this, {
-		context: sliderContext,
-		subscribe: true
-	});
-	#resizeObserver = null;
-	#width = 0;
+	#ctx;
+	#resizeObserver;
+	#width;
 	connectedCallback() {
 		super.connectedCallback();
 		this.#resizeObserver = new ResizeObserver(([entry]) => {

package/dist/default/ui/slider/slider-preview-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-preview-element.js","names":["#ctx","#resizeObserver","#width","#applyPosition"],"sources":["../../../../src/ui/slider/slider-preview-element.ts"],"sourcesContent":["import type { SliderPreviewOverflow } from '@videojs/core/dom';\nimport { applyStateDataAttrs, getSliderPreviewStyle } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderPreviewElement extends MediaElement {\n  static readonly tagName = 'media-slider-preview';\n\n  static override properties = {\n    overflow: { type: String },\n  } satisfies PropertyDeclarationMap<'overflow'>;\n\n  overflow: SliderPreviewOverflow = 'clamp';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  #resizeObserver: ResizeObserver | null = null;\n  #width = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#resizeObserver = new ResizeObserver(([entry]) => {\n      this.#width = entry!.contentRect.width;\n      this.#applyPosition();\n    });\n\n    this.#resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  #applyPosition(): void {\n    applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n\n    this.#applyPosition();\n  }\n}\n"],"mappings":";;;;;;AASA,IAAa,uBAAb,cAA0C,aAAa;;;kBAOnB;;;iBANR;;;oBAEG,EAC3B,UAAU,EAAE,MAAM,QAAQ,EAC3B;;CAID,OAAgB,IAAI,gBAAgB,MAAM;EACxC,SAAS;EACT,WAAW;EACZ,CAAC;CAEF,kBAAyC;CACzC,SAAS;CAET,oBAAmC;AACjC,QAAM,mBAAmB;AAEzB,QAAA,iBAAuB,IAAI,gBAAgB,CAAC,WAAW;AACrD,SAAA,QAAc,MAAO,YAAY;AACjC,SAAA,eAAqB;IACrB;AAEF,QAAA,eAAqB,QAAQ,KAAK;;CAGpC,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,gBAAsB,YAAY;AAClC,QAAA,iBAAuB;;CAGzB,iBAAuB;AACrB,cAAY,MAAM,sBAAsB,MAAA,OAAa,KAAK,SAAS,CAAC;;CAGtE,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,MAAM,MAAA,IAAU;AACtB,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa;AAE/D,QAAA,eAAqB"}
+{"version":3,"file":"slider-preview-element.js","names":["#ctx","#resizeObserver","#width","#applyPosition"],"sources":["../../../../src/ui/slider/slider-preview-element.ts"],"sourcesContent":["import type { SliderPreviewOverflow } from '@videojs/core/dom';\nimport { applyStateDataAttrs, getSliderPreviewStyle } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderPreviewElement extends MediaElement {\n  static readonly tagName = 'media-slider-preview';\n\n  static override properties = {\n    overflow: { type: String },\n  } satisfies PropertyDeclarationMap<'overflow'>;\n\n  overflow: SliderPreviewOverflow = 'clamp';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  #resizeObserver: ResizeObserver | null = null;\n  #width = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#resizeObserver = new ResizeObserver(([entry]) => {\n      this.#width = entry!.contentRect.width;\n      this.#applyPosition();\n    });\n\n    this.#resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  #applyPosition(): void {\n    applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n\n    this.#applyPosition();\n  }\n}\n"],"mappings":";;;;;;AASA,IAAa,uBAAb,cAA0C,aAAa;;;kBAOnB;cAElB,IAAI,gBAAgB,MAAM;GACxC,SAAS;GACT,WAAW;GACZ,CAAC;yBAEuC;gBAChC;;;iBAdiB;;;oBAEG,EAC3B,UAAU,EAAE,MAAM,QAAQ,EAC3B;;CAID;CAKA;CACA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AAEzB,QAAA,iBAAuB,IAAI,gBAAgB,CAAC,WAAW;AACrD,SAAA,QAAc,MAAO,YAAY;AACjC,SAAA,eAAqB;IACrB;AAEF,QAAA,eAAqB,QAAQ,KAAK;;CAGpC,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,gBAAsB,YAAY;AAClC,QAAA,iBAAuB;;CAGzB,iBAAuB;AACrB,cAAY,MAAM,sBAAsB,MAAA,OAAa,KAAK,SAAS,CAAC;;CAGtE,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,MAAM,MAAA,IAAU;AACtB,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa;AAE/D,QAAA,eAAqB"}

package/dist/default/ui/slider/slider-value-element.js

@@ -7,6 +7,10 @@ var SliderValueElement = class extends MediaElement {
 	constructor(..._args) {
 		super(..._args);
 		this.type = "current";
+		this.#ctx = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
 	}
 	static {
 		this.tagName = "media-slider-value";
@@ -14,10 +18,7 @@ var SliderValueElement = class extends MediaElement {
 	static {
 		this.properties = { type: { type: String } };
 	}
-	#ctx = new ContextConsumer(this, {
-		context: sliderContext,
-		subscribe: true
-	});
+	#ctx;
 	connectedCallback() {
 		super.connectedCallback();
 		this.setAttribute("aria-live", "off");

package/dist/default/ui/slider/slider-value-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-value-element.js","names":["#ctx"],"sources":["../../../../src/ui/slider/slider-value-element.ts"],"sourcesContent":["import { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderValueElement extends MediaElement {\n  static readonly tagName = 'media-slider-value';\n\n  static override properties = {\n    type: { type: String },\n  } satisfies PropertyDeclarationMap<'type'>;\n\n  type: 'current' | 'pointer' = 'current';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-live', 'off');\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (!ctx) return;\n\n    const value = this.type === 'pointer' ? ctx.pointerValue : ctx.state.value;\n\n    this.textContent = ctx.formatValue ? ctx.formatValue(value, this.type) : String(Math.round(value));\n\n    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,qBAAb,cAAwC,aAAa;;;cAOrB;;;iBANJ;;;oBAEG,EAC3B,MAAM,EAAE,MAAM,QAAQ,EACvB;;CAID,OAAgB,IAAI,gBAAgB,MAAM;EACxC,SAAS;EACT,WAAW;EACZ,CAAC;CAEF,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,OAAK,aAAa,aAAa,MAAM;;CAGvC,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,MAAM,MAAA,IAAU;AACtB,MAAI,CAAC,IAAK;EAEV,MAAM,QAAQ,KAAK,SAAS,YAAY,IAAI,eAAe,IAAI,MAAM;AAErE,OAAK,cAAc,IAAI,cAAc,IAAI,YAAY,OAAO,KAAK,KAAK,GAAG,OAAO,KAAK,MAAM,MAAM,CAAC;AAElG,sBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}
+{"version":3,"file":"slider-value-element.js","names":["#ctx"],"sources":["../../../../src/ui/slider/slider-value-element.ts"],"sourcesContent":["import { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderValueElement extends MediaElement {\n  static readonly tagName = 'media-slider-value';\n\n  static override properties = {\n    type: { type: String },\n  } satisfies PropertyDeclarationMap<'type'>;\n\n  type: 'current' | 'pointer' = 'current';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-live', 'off');\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (!ctx) return;\n\n    const value = this.type === 'pointer' ? ctx.pointerValue : ctx.state.value;\n\n    this.textContent = ctx.formatValue ? ctx.formatValue(value, this.type) : String(Math.round(value));\n\n    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,qBAAb,cAAwC,aAAa;;;cAOrB;cAEd,IAAI,gBAAgB,MAAM;GACxC,SAAS;GACT,WAAW;GACZ,CAAC;;;iBAXwB;;;oBAEG,EAC3B,MAAM,EAAE,MAAM,QAAQ,EACvB;;CAID;CAKA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,OAAK,aAAa,aAAa,MAAM;;CAGvC,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,MAAM,MAAA,IAAU;AACtB,MAAI,CAAC,IAAK;EAEV,MAAM,QAAQ,KAAK,SAAS,YAAY,IAAI,eAAe,IAAI,MAAM;AAErE,OAAK,cAAc,IAAI,cAAc,IAAI,YAAY,OAAO,KAAK,KAAK,GAAG,OAAO,KAAK,MAAM,MAAM,CAAC;AAElG,sBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}

package/dist/default/ui/status-announcer/status-announcer-element.js

@@ -0,0 +1,70 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+import { StatusAnnouncerCore } from "@videojs/core";
+//#region src/ui/status-announcer/status-announcer-element.ts
+var StatusAnnouncerElement = class extends MediaElement {
+	static {
+		this.tagName = "media-status-announcer";
+	}
+	static {
+		this.properties = { closeDelay: {
+			type: Number,
+			attribute: "close-delay"
+		} };
+	}
+	#core = new StatusAnnouncerCore();
+	#player = new PlayerController(this, playerContext);
+	#container = new ContextConsumer(this, {
+		context: containerContext,
+		callback: () => this.#reconnect(),
+		subscribe: true
+	});
+	#disconnect = null;
+	#inputActionUnsubscribe = null;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.setAttribute("role", "status");
+		this.#disconnect = new AbortController();
+		this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.#reconnect();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#inputActionUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#inputActionUnsubscribe?.();
+		this.#core.destroy();
+		super.destroyCallback();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.#core.setProps({ closeDelay: this.closeDelay });
+	}
+	update(changed) {
+		super.update(changed);
+		const label = this.#core.state.current.label;
+		if (label) this.setAttribute("aria-label", label);
+		else this.removeAttribute("aria-label");
+	}
+	#reconnect() {
+		this.#inputActionUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		const container = this.#container.value?.container;
+		if (!container) return;
+		this.#inputActionUnsubscribe = subscribeToInputActions(container, (event) => {
+			this.#core.processEvent(event, getMediaSnapshot(this.#player.value));
+		});
+	}
+};
+//#endregion
+export { StatusAnnouncerElement };
+
+//# sourceMappingURL=status-announcer-element.js.map

package/dist/default/ui/status-announcer/status-announcer-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-announcer-element.js","names":["#core","#player","#container","#reconnect","#disconnect","#inputActionUnsubscribe"],"sources":["../../../../src/ui/status-announcer/status-announcer-element.ts"],"sourcesContent":["import { StatusAnnouncerCore } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class StatusAnnouncerElement extends MediaElement {\n  static readonly tagName = 'media-status-announcer';\n\n  static override properties = {\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'closeDelay'>;\n\n  closeDelay: number | undefined;\n\n  readonly #core = new StatusAnnouncerCore();\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.#reconnect(),\n    subscribe: true,\n  });\n\n  #disconnect: AbortController | null = null;\n  #inputActionUnsubscribe: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.setAttribute('role', 'status');\n\n    this.#disconnect = new AbortController();\n    this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });\n    this.#reconnect();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#inputActionUnsubscribe?.();\n    this.#inputActionUnsubscribe = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#inputActionUnsubscribe?.();\n    this.#core.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps({ closeDelay: this.closeDelay });\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const label = this.#core.state.current.label;\n    if (label) {\n      this.setAttribute('aria-label', label);\n    } else {\n      this.removeAttribute('aria-label');\n    }\n  }\n\n  #reconnect(): void {\n    this.#inputActionUnsubscribe?.();\n    this.#inputActionUnsubscribe = null;\n\n    const container = this.#container.value?.container;\n    if (!container) return;\n\n    this.#inputActionUnsubscribe = subscribeToInputActions(container, (event) => {\n      this.#core.processEvent(event, getMediaSnapshot(this.#player.value));\n    });\n  }\n}\n"],"mappings":";;;;;;;AASA,IAAa,yBAAb,cAA4C,aAAa;;iBAC7B;;;oBAEG,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;GAAe,EACvD;;CAID,QAAiB,IAAI,qBAAqB;CAC1C,UAAmB,IAAI,iBAAiB,MAAM,cAAc;CAC5D,aAAsB,IAAI,gBAAgB,MAAM;EAC9C,SAAS;EACT,gBAAgB,MAAA,WAAiB;EACjC,WAAW;EACZ,CAAC;CAEF,cAAsC;CACtC,0BAA+C;CAE/C,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,OAAK,aAAa,QAAQ,SAAS;AAEnC,QAAA,aAAmB,IAAI,iBAAiB;AACxC,QAAA,KAAW,MAAM,gBAAgB,KAAK,eAAe,EAAE,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;AAC3F,QAAA,WAAiB;;CAGnB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,0BAAgC;AAChC,QAAA,yBAA+B;AAC/B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;CAGrB,kBAAiC;AAC/B,QAAA,0BAAgC;AAChC,QAAA,KAAW,SAAS;AACpB,QAAM,iBAAiB;;CAGzB,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAA,KAAW,SAAS,EAAE,YAAY,KAAK,YAAY,CAAC;;CAGtD,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAA,KAAW,MAAM,QAAQ;AACvC,MAAI,MACF,MAAK,aAAa,cAAc,MAAM;MAEtC,MAAK,gBAAgB,aAAa;;CAItC,aAAmB;AACjB,QAAA,0BAAgC;AAChC,QAAA,yBAA+B;EAE/B,MAAM,YAAY,MAAA,UAAgB,OAAO;AACzC,MAAI,CAAC,UAAW;AAEhB,QAAA,yBAA+B,wBAAwB,YAAY,UAAU;AAC3E,SAAA,KAAW,aAAa,OAAO,iBAAiB,MAAA,OAAa,MAAM,CAAC;IACpE"}

package/dist/default/ui/status-indicator/status-indicator-element.js

@@ -0,0 +1,53 @@
+import { InputIndicatorElement } from "../input-indicators/input-indicator-element.js";
+import { LiveIndicator } from "../input-indicators/live-indicator.js";
+import { createTransition } from "@videojs/core/dom";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs, getStatusIndicatorDisplayValue } from "@videojs/core";
+//#region src/ui/status-indicator/status-indicator-element.ts
+var StatusIndicatorElement = class extends InputIndicatorElement {
+	static {
+		this.tagName = "media-status-indicator";
+	}
+	static {
+		this.properties = {
+			actions: { type: String },
+			closeDelay: {
+				type: Number,
+				attribute: "close-delay"
+			}
+		};
+	}
+	#core = new StatusIndicatorCore();
+	#transition = createTransition();
+	#liveIndicator = new LiveIndicator({
+		host: this,
+		dataAttrs: StatusIndicatorDataAttrs,
+		render: renderStatusIndicator
+	});
+	get core() {
+		return this.#core;
+	}
+	get transition() {
+		return this.#transition;
+	}
+	get liveIndicator() {
+		return this.#liveIndicator;
+	}
+	syncCoreProps() {
+		this.#core.setProps({
+			actions: parseActions(this.actions),
+			closeDelay: this.closeDelay
+		});
+	}
+};
+function parseActions(actions) {
+	return actions?.split(/[\s,]+/).filter(Boolean);
+}
+function renderStatusIndicator(element, state) {
+	const value = element.querySelector("media-status-indicator-value");
+	if (!value) return;
+	value.textContent = getStatusIndicatorDisplayValue(state);
+}
+//#endregion
+export { StatusIndicatorElement };
+
+//# sourceMappingURL=status-indicator-element.js.map

package/dist/default/ui/status-indicator/status-indicator-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-element.js","names":["#core","#transition","#liveIndicator"],"sources":["../../../../src/ui/status-indicator/status-indicator-element.ts"],"sourcesContent":["import {\n  getStatusIndicatorDisplayValue,\n  type InputAction,\n  StatusIndicatorCore,\n  StatusIndicatorDataAttrs,\n} from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { InputIndicatorElement } from '../input-indicators/input-indicator-element';\nimport { LiveIndicator } from '../input-indicators/live-indicator';\n\nexport class StatusIndicatorElement extends InputIndicatorElement<StatusIndicatorCore.State> {\n  static readonly tagName = 'media-status-indicator';\n\n  static override properties = {\n    actions: { type: String },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'actions' | 'closeDelay'>;\n\n  actions: string | undefined;\n  closeDelay: number | undefined;\n\n  readonly #core = new StatusIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: StatusIndicatorDataAttrs,\n    render: renderStatusIndicator,\n  });\n\n  protected get core() {\n    return this.#core;\n  }\n\n  protected get transition() {\n    return this.#transition;\n  }\n\n  protected get liveIndicator() {\n    return this.#liveIndicator;\n  }\n\n  protected override syncCoreProps(): void {\n    this.#core.setProps({ actions: parseActions(this.actions), closeDelay: this.closeDelay });\n  }\n}\n\nfunction parseActions(actions: string | undefined): readonly InputAction[] | undefined {\n  return actions?.split(/[\\s,]+/).filter(Boolean) as readonly InputAction[] | undefined;\n}\n\nfunction renderStatusIndicator(element: HTMLElement, state: StatusIndicatorCore.State): void {\n  const value = element.querySelector('media-status-indicator-value');\n  if (!value) return;\n\n  value.textContent = getStatusIndicatorDisplayValue(state);\n}\n"],"mappings":";;;;;AAYA,IAAa,yBAAb,cAA4C,sBAAiD;;iBACjE;;;oBAEG;GAC3B,SAAS,EAAE,MAAM,QAAQ;GACzB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACvD;;CAKD,QAAiB,IAAI,qBAAqB;CAC1C,cAAuB,kBAAkB;CACzC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;EACT,CAAC;CAEF,IAAc,OAAO;AACnB,SAAO,MAAA;;CAGT,IAAc,aAAa;AACzB,SAAO,MAAA;;CAGT,IAAc,gBAAgB;AAC5B,SAAO,MAAA;;CAGT,gBAAyC;AACvC,QAAA,KAAW,SAAS;GAAE,SAAS,aAAa,KAAK,QAAQ;GAAE,YAAY,KAAK;GAAY,CAAC;;;AAI7F,SAAS,aAAa,SAAiE;AACrF,QAAO,SAAS,MAAM,SAAS,CAAC,OAAO,QAAQ;;AAGjD,SAAS,sBAAsB,SAAsB,OAAwC;CAC3F,MAAM,QAAQ,QAAQ,cAAc,+BAA+B;AACnE,KAAI,CAAC,MAAO;AAEZ,OAAM,cAAc,+BAA+B,MAAM"}

package/dist/default/ui/status-indicator/status-indicator-value-element.js

@@ -0,0 +1,11 @@
+import { MediaElement } from "../media-element.js";
+//#region src/ui/status-indicator/status-indicator-value-element.ts
+var StatusIndicatorValueElement = class extends MediaElement {
+	static {
+		this.tagName = "media-status-indicator-value";
+	}
+};
+//#endregion
+export { StatusIndicatorValueElement };
+
+//# sourceMappingURL=status-indicator-value-element.js.map

package/dist/default/ui/status-indicator/status-indicator-value-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-value-element.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value-element.ts"],"sourcesContent":["import { MediaElement } from '../media-element';\n\nexport class StatusIndicatorValueElement extends MediaElement {\n  static readonly tagName = 'media-status-indicator-value';\n}\n"],"mappings":";;AAEA,IAAa,8BAAb,cAAiD,aAAa;;iBAClC"}