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

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

@@ -9,6 +9,8 @@ var MediaButtonElement = class extends MediaElement {
 		this.disabled = false;
 		this.label = "";
 		this.hotkeyAction = void 0;
+		this.#disconnect = null;
+		this.#hotkeyRegistry = null;
 	}
 	static {
 		this.properties = {
@@ -19,8 +21,8 @@ var MediaButtonElement = class extends MediaElement {
 	get $state() {
 		return this.core.state;
 	}
-	#disconnect = null;
-	#hotkeyRegistry = null;
+	#disconnect;
+	#hotkeyRegistry;
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;

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

@@ -1 +1 @@
-{"version":3,"file":"media-button-element.js","names":["#hotkeyRegistry","#disconnect"],"sources":["../../../src/ui/media-button-element.ts"],"sourcesContent":["import type {\n  ButtonState,\n  InferComponentState,\n  InferMediaState,\n  MediaButtonComponent,\n  StateAttrMap,\n} from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { State } from '@videojs/store';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { AriaKeyShortcutsController } from './hotkey/aria-key-shortcuts-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that render a media-control button. */\nexport abstract class MediaButtonElement<Core extends MediaButtonComponent> extends MediaElement {\n  static override properties: PropertyDeclarationMap = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  disabled = false;\n  label = '';\n\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  protected abstract activate(state: InferMediaState<Core>): void;\n\n  /** Override to set the hotkey action name for `aria-keyshortcuts`. */\n  protected readonly hotkeyAction: string | undefined = undefined;\n\n  get $state(): State<ButtonState> {\n    return this.core.state;\n  }\n\n  #disconnect: AbortController | null = null;\n  #hotkeyRegistry: AriaKeyShortcutsController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    if (this.hotkeyAction && !this.#hotkeyRegistry) {\n      this.#hotkeyRegistry = new AriaKeyShortcutsController(this, this.hotkeyAction);\n    }\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: () => this.activate(this.mediaState.value!),\n      isDisabled: () => this.disabled || !this.mediaState.value,\n    });\n\n    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  /** Returns the button's current label derived from media state. */\n  getLabel(): string | undefined {\n    return this.core.state.current.label || undefined;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.core.setProps?.(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyElementProps(this, {\n      ...this.core.getAttrs?.(state),\n      'aria-keyshortcuts': this.#hotkeyRegistry?.value,\n    });\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAgBA,IAAsB,qBAAtB,cAAoF,aAAa;;;kBAMpF;eACH;sBAS8C,KAAA;;;oBAfD;GACnD,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAcD,IAAI,SAA6B;AAC/B,SAAO,KAAK,KAAK;;CAGnB,cAAsC;CACtC,kBAAqD;CAErD,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,MAAI,KAAK,gBAAgB,CAAC,MAAA,eACxB,OAAA,iBAAuB,IAAI,2BAA2B,MAAM,KAAK,aAAa;AAGhF,QAAA,aAAmB,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,KAAK,SAAS,KAAK,WAAW,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,KAAK,WAAW;GACrD,CAAC;AAEF,oBAAkB,MAAM,aAAa,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;;CAO3E,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;;CAIrB,WAA+B;AAC7B,SAAO,KAAK,KAAK,MAAM,QAAQ,SAAS,KAAA;;CAG1C,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,OAAK,KAAK,WAAW,KAAK;;CAG5B,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,KAAK,WAAW;AAE9B,MAAI,CAAC,MAAO;AAEZ,OAAK,KAAK,SAAS,MAAM;EACzB,MAAM,QAAQ,KAAK,KAAK,UAAU;AAClC,oBAAkB,MAAM;GACtB,GAAG,KAAK,KAAK,WAAW,MAAM;GAC9B,qBAAqB,MAAA,gBAAsB;GAC5C,CAAC;AACF,sBAAoB,MAAM,OAAO,KAAK,aAAa"}
+{"version":3,"file":"media-button-element.js","names":["#hotkeyRegistry","#disconnect"],"sources":["../../../src/ui/media-button-element.ts"],"sourcesContent":["import type {\n  ButtonState,\n  InferComponentState,\n  InferMediaState,\n  MediaButtonComponent,\n  StateAttrMap,\n} from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, createButton, logMissingFeature } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { State } from '@videojs/store';\n\nimport type { PlayerController } from '../player/player-controller';\nimport { AriaKeyShortcutsController } from './hotkey/aria-key-shortcuts-controller';\nimport { MediaElement } from './media-element';\n\n/** Abstract base for HTML custom elements that render a media-control button. */\nexport abstract class MediaButtonElement<Core extends MediaButtonComponent> extends MediaElement {\n  static override properties: PropertyDeclarationMap = {\n    label: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  disabled = false;\n  label = '';\n\n  protected abstract readonly core: Core;\n  protected abstract readonly stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  protected abstract readonly mediaState: PlayerController<any, InferMediaState<Core> | undefined>;\n\n  protected abstract activate(state: InferMediaState<Core>): void;\n\n  /** Override to set the hotkey action name for `aria-keyshortcuts`. */\n  protected readonly hotkeyAction: string | undefined = undefined;\n\n  get $state(): State<ButtonState> {\n    return this.core.state;\n  }\n\n  #disconnect: AbortController | null = null;\n  #hotkeyRegistry: AriaKeyShortcutsController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    if (this.hotkeyAction && !this.#hotkeyRegistry) {\n      this.#hotkeyRegistry = new AriaKeyShortcutsController(this, this.hotkeyAction);\n    }\n\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: () => this.activate(this.mediaState.value!),\n      isDisabled: () => this.disabled || !this.mediaState.value,\n    });\n\n    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });\n\n    if (__DEV__ && !this.mediaState.value && this.mediaState.displayName) {\n      logMissingFeature(this.localName, this.mediaState.displayName);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  /** Returns the button's current label derived from media state. */\n  getLabel(): string | undefined {\n    return this.core.state.current.label || undefined;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.core.setProps?.(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n\n    if (!media) return;\n\n    this.core.setMedia(media);\n    const state = this.core.getState();\n    applyElementProps(this, {\n      ...this.core.getAttrs?.(state),\n      'aria-keyshortcuts': this.#hotkeyRegistry?.value,\n    });\n    applyStateDataAttrs(this, state, this.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAgBA,IAAsB,qBAAtB,cAAoF,aAAa;;;kBAMpF;eACH;sBAS8C,KAAA;qBAMhB;yBACe;;;oBAtBA;GACnD,OAAO,EAAE,MAAM,QAAQ;GACvB,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAcD,IAAI,SAA6B;AAC/B,SAAO,KAAK,KAAK;;CAGnB;CACA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,MAAI,KAAK,gBAAgB,CAAC,MAAA,eACxB,OAAA,iBAAuB,IAAI,2BAA2B,MAAM,KAAK,aAAa;AAGhF,QAAA,aAAmB,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,KAAK,SAAS,KAAK,WAAW,MAAO;GACvD,kBAAkB,KAAK,YAAY,CAAC,KAAK,WAAW;GACrD,CAAC;AAEF,oBAAkB,MAAM,aAAa,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;;CAO3E,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;;CAIrB,WAA+B;AAC7B,SAAO,KAAK,KAAK,MAAM,QAAQ,SAAS,KAAA;;CAG1C,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,OAAK,KAAK,WAAW,KAAK;;CAG5B,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,KAAK,WAAW;AAE9B,MAAI,CAAC,MAAO;AAEZ,OAAK,KAAK,SAAS,MAAM;EACzB,MAAM,QAAQ,KAAK,KAAK,UAAU;AAClC,oBAAkB,MAAM;GACtB,GAAG,KAAK,KAAK,WAAW,MAAM;GAC9B,qBAAqB,MAAA,gBAAsB;GAC5C,CAAC;AACF,sBAAoB,MAAM,OAAO,KAAK,aAAa"}

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

@@ -18,6 +18,13 @@ var PopoverElement = class extends MediaElement {
 		this.openOnHover = PopoverCore.defaultProps.openOnHover;
 		this.delay = PopoverCore.defaultProps.delay;
 		this.closeDelay = PopoverCore.defaultProps.closeDelay;
+		this.#core = new PopoverCore();
+		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";
@@ -51,13 +58,13 @@ var PopoverElement = class extends MediaElement {
 			}
 		};
 	}
-	#core = new PopoverCore();
-	#position = new PositionController(this);
-	#popover = null;
-	#snapshot = null;
-	#disconnect = null;
-	#triggerAbort = null;
-	#currentTrigger = null;
+	#core;
+	#position;
+	#popover;
+	#snapshot;
+	#disconnect;
+	#triggerAbort;
+	#currentTrigger;
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;

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","#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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"}

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/thumbnail/thumbnail-element.js

@@ -30,16 +30,21 @@ var ThumbnailElement = class extends MediaElement {
 			}
 		};
 	}
-	#core = new ThumbnailCore();
-	#img = document.createElement("img");
-	#textTracks = new PlayerController(this, playerContext, selectTextTrack);
-	#thumbnails = [];
+	#core;
+	#img;
+	#textTracks;
+	#thumbnails;
 	#externalThumbnails;
 	#lastTextTrack;
-	#api = null;
+	#api;
 	constructor() {
 		super();
 		this.time = 0;
+		this.#core = new ThumbnailCore();
+		this.#img = document.createElement("img");
+		this.#textTracks = new PlayerController(this, playerContext, selectTextTrack);
+		this.#thumbnails = [];
+		this.#api = null;
 		const shadow = this.attachShadow({ mode: "open" });
 		const style = document.createElement("style");
 		style.textContent = SHADOW_CSS;

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

@@ -1 +1 @@
-{"version":3,"file":"thumbnail-element.js","names":["#core","#img","#textTracks","#externalThumbnails","#api","#thumbnails","#lastTextTrack","#resetStyles","#applyResize"],"sources":["../../../../src/ui/thumbnail/thumbnail-element.ts"],"sourcesContent":["import {\n  type MediaTextTrackState,\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailImage,\n  type ThumbnailResizeResult,\n} from '@videojs/core';\nimport type { ThumbnailApi } from '@videojs/core/dom';\nimport { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } 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\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg {\n  display: block;\n}`;\n\nexport class ThumbnailElement extends MediaElement {\n  static readonly tagName = 'media-thumbnail';\n\n  static override properties = {\n    time: { type: Number },\n    crossOrigin: { type: String, attribute: 'crossorigin' },\n    loading: { type: String },\n    fetchPriority: { type: String, attribute: 'fetchpriority' },\n  } satisfies PropertyDeclarationMap<keyof ThumbnailCore.Props>;\n\n  time = 0;\n  crossOrigin: ThumbnailCore.Props['crossOrigin'];\n  loading: ThumbnailCore.Props['loading'];\n  fetchPriority: ThumbnailCore.Props['fetchPriority'];\n\n  readonly #core = new ThumbnailCore();\n  readonly #img = document.createElement('img');\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const shadow = this.attachShadow({ mode: 'open' });\n\n    const style = document.createElement('style');\n    style.textContent = SHADOW_CSS;\n    shadow.appendChild(style);\n\n    this.#img.alt = '';\n    this.#img.setAttribute('part', 'img');\n    this.#img.setAttribute('aria-hidden', 'true');\n    this.#img.setAttribute('decoding', 'async');\n    shadow.appendChild(this.#img);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection.\n   * When set, this takes priority over the text track path.\n   */\n  get thumbnails(): ThumbnailImage[] | undefined {\n    return this.#externalThumbnails;\n  }\n\n  set thumbnails(value: ThumbnailImage[] | undefined) {\n    this.#externalThumbnails = value;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  override destroyCallback(): void {\n    this.#api?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else {\n      const textTrack = this.#textTracks.value;\n\n      if (textTrack !== this.#lastTextTrack) {\n        this.#lastTextTrack = textTrack;\n        this.#thumbnails =\n          textTrack && textTrack.thumbnailCues.length > 0\n            ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n            : [];\n      }\n    }\n\n    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n\n    // Sync img attributes from element properties.\n    applyElementProps(this.#img, {\n      crossorigin: this.crossOrigin || undefined,\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    });\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n\n    if (!thumbnail) {\n      this.#img.removeAttribute('src');\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    // Set the img src directly (imperative DOM).\n    if (this.#img.getAttribute('src') !== thumbnail.url) {\n      this.#img.src = thumbnail.url;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n\n    if (api?.naturalWidth && api.naturalHeight) {\n      const constraints = api.readConstraints();\n      const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);\n\n      if (result) {\n        this.#applyResize(result);\n      }\n    }\n  }\n\n  #applyResize(result: ThumbnailResizeResult): void {\n    this.style.width = `${result.containerWidth}px`;\n    this.style.height = `${result.containerHeight}px`;\n\n    const imgStyle = this.#img.style;\n    imgStyle.width = `${result.imageWidth}px`;\n    imgStyle.height = `${result.imageHeight}px`;\n    imgStyle.maxWidth = 'none';\n    imgStyle.transform =\n      result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : '';\n  }\n\n  #resetStyles(): void {\n    this.style.width = '';\n    this.style.height = '';\n\n    const imgStyle = this.#img.style;\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"thumbnail-element.js","names":["#core","#img","#textTracks","#externalThumbnails","#api","#thumbnails","#lastTextTrack","#resetStyles","#applyResize"],"sources":["../../../../src/ui/thumbnail/thumbnail-element.ts"],"sourcesContent":["import {\n  type MediaTextTrackState,\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailImage,\n  type ThumbnailResizeResult,\n} from '@videojs/core';\nimport type { ThumbnailApi } from '@videojs/core/dom';\nimport { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } 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\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg {\n  display: block;\n}`;\n\nexport class ThumbnailElement extends MediaElement {\n  static readonly tagName = 'media-thumbnail';\n\n  static override properties = {\n    time: { type: Number },\n    crossOrigin: { type: String, attribute: 'crossorigin' },\n    loading: { type: String },\n    fetchPriority: { type: String, attribute: 'fetchpriority' },\n  } satisfies PropertyDeclarationMap<keyof ThumbnailCore.Props>;\n\n  time = 0;\n  crossOrigin: ThumbnailCore.Props['crossOrigin'];\n  loading: ThumbnailCore.Props['loading'];\n  fetchPriority: ThumbnailCore.Props['fetchPriority'];\n\n  readonly #core = new ThumbnailCore();\n  readonly #img = document.createElement('img');\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const shadow = this.attachShadow({ mode: 'open' });\n\n    const style = document.createElement('style');\n    style.textContent = SHADOW_CSS;\n    shadow.appendChild(style);\n\n    this.#img.alt = '';\n    this.#img.setAttribute('part', 'img');\n    this.#img.setAttribute('aria-hidden', 'true');\n    this.#img.setAttribute('decoding', 'async');\n    shadow.appendChild(this.#img);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection.\n   * When set, this takes priority over the text track path.\n   */\n  get thumbnails(): ThumbnailImage[] | undefined {\n    return this.#externalThumbnails;\n  }\n\n  set thumbnails(value: ThumbnailImage[] | undefined) {\n    this.#externalThumbnails = value;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  override destroyCallback(): void {\n    this.#api?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else {\n      const textTrack = this.#textTracks.value;\n\n      if (textTrack !== this.#lastTextTrack) {\n        this.#lastTextTrack = textTrack;\n        this.#thumbnails =\n          textTrack && textTrack.thumbnailCues.length > 0\n            ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n            : [];\n      }\n    }\n\n    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n\n    // Sync img attributes from element properties.\n    applyElementProps(this.#img, {\n      crossorigin: this.crossOrigin || undefined,\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    });\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n\n    if (!thumbnail) {\n      this.#img.removeAttribute('src');\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    // Set the img src directly (imperative DOM).\n    if (this.#img.getAttribute('src') !== thumbnail.url) {\n      this.#img.src = thumbnail.url;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n\n    if (api?.naturalWidth && api.naturalHeight) {\n      const constraints = api.readConstraints();\n      const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);\n\n      if (result) {\n        this.#applyResize(result);\n      }\n    }\n  }\n\n  #applyResize(result: ThumbnailResizeResult): void {\n    this.style.width = `${result.containerWidth}px`;\n    this.style.height = `${result.containerHeight}px`;\n\n    const imgStyle = this.#img.style;\n    imgStyle.width = `${result.imageWidth}px`;\n    imgStyle.height = `${result.imageHeight}px`;\n    imgStyle.maxWidth = 'none';\n    imgStyle.transform =\n      result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : '';\n  }\n\n  #resetStyles(): void {\n    this.style.width = '';\n    this.style.height = '';\n\n    const imgStyle = this.#img.style;\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n}\n"],"mappings":"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"}

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

@@ -10,6 +10,10 @@ var TimeElement = class extends MediaElement {
 		this.type = TimeCore.defaultProps.type;
 		this.negativeSign = TimeCore.defaultProps.negativeSign;
 		this.label = TimeCore.defaultProps.label;
+		this.#core = new TimeCore();
+		this.#state = new PlayerController(this, playerContext, selectTime);
+		this.#signSpan = document.createElement("span");
+		this.#textNode = document.createTextNode("");
 	}
 	static {
 		this.tagName = "media-time";
@@ -24,10 +28,10 @@ var TimeElement = class extends MediaElement {
 			label: { type: String }
 		};
 	}
-	#core = new TimeCore();
-	#state = new PlayerController(this, playerContext, selectTime);
-	#signSpan = document.createElement("span");
-	#textNode = document.createTextNode("");
+	#core;
+	#state;
+	#signSpan;
+	#textNode;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.#signSpan.parentNode) {

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

@@ -1 +1 @@
-{"version":3,"file":"time-element.js","names":["#core","#state","#signSpan","#textNode"],"sources":["../../../../src/ui/time/time-element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } 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 TimeElement extends MediaElement {\n  static readonly tagName = 'media-time';\n\n  static override properties = {\n    type: { type: String },\n    negativeSign: { type: String, attribute: 'negative-sign' },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label = TimeCore.defaultProps.label;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = document.createTextNode('');\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (!this.#signSpan.parentNode) {\n      this.#signSpan.setAttribute('aria-hidden', 'true');\n      this.#signSpan.hidden = true;\n      this.appendChild(this.#signSpan);\n      this.appendChild(this.#textNode);\n    }\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.#state.value;\n\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    this.#signSpan.hidden = !state.negative;\n    this.#signSpan.textContent = state.negative ? this.negativeSign : '';\n    this.#textNode.textContent = state.text;\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,cAAb,cAAiC,aAAa;;;cAS3B,SAAS,aAAa;sBACxB,SAAS,aAAa;eAC7B,SAAS,aAAa;;;iBAVJ;;;oBAEG;GAC3B,MAAM,EAAE,MAAM,QAAQ;GACtB,cAAc;IAAE,MAAM;IAAQ,WAAW;IAAiB;GAC1D,OAAO,EAAE,MAAM,QAAQ;GACxB;;CAMD,QAAiB,IAAI,UAAU;CAC/B,SAAkB,IAAI,iBAAiB,MAAM,eAAe,WAAW;CAEvE,YAAqB,SAAS,cAAc,OAAO;CACnD,YAAqB,SAAS,eAAe,GAAG;CAEhD,oBAAmC;AACjC,QAAM,mBAAmB;AAEzB,MAAI,CAAC,MAAA,SAAe,YAAY;AAC9B,SAAA,SAAe,aAAa,eAAe,OAAO;AAClD,SAAA,SAAe,SAAS;AACxB,QAAK,YAAY,MAAA,SAAe;AAChC,QAAK,YAAY,MAAA,SAAe;;;CAQpC,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAA,KAAW,SAAS,KAAK;;CAG3B,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAA,MAAY;AAE1B,MAAI,CAAC,MAAO;AAEZ,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAEnC,QAAA,SAAe,SAAS,CAAC,MAAM;AAC/B,QAAA,SAAe,cAAc,MAAM,WAAW,KAAK,eAAe;AAClE,QAAA,SAAe,cAAc,MAAM;AAEnC,oBAAkB,MAAM,MAAA,KAAW,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,cAAc"}
+{"version":3,"file":"time-element.js","names":["#core","#state","#signSpan","#textNode"],"sources":["../../../../src/ui/time/time-element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime } 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 TimeElement extends MediaElement {\n  static readonly tagName = 'media-time';\n\n  static override properties = {\n    type: { type: String },\n    negativeSign: { type: String, attribute: 'negative-sign' },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label = TimeCore.defaultProps.label;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = document.createTextNode('');\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (!this.#signSpan.parentNode) {\n      this.#signSpan.setAttribute('aria-hidden', 'true');\n      this.#signSpan.hidden = true;\n      this.appendChild(this.#signSpan);\n      this.appendChild(this.#textNode);\n    }\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.#state.value;\n\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    this.#signSpan.hidden = !state.negative;\n    this.#signSpan.textContent = state.negative ? this.negativeSign : '';\n    this.#textNode.textContent = state.text;\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,cAAb,cAAiC,aAAa;;;cAS3B,SAAS,aAAa;sBACxB,SAAS,aAAa;eAC7B,SAAS,aAAa;eAEb,IAAI,UAAU;gBACb,IAAI,iBAAiB,MAAM,eAAe,WAAW;mBAElD,SAAS,cAAc,OAAO;mBAC9B,SAAS,eAAe,GAAG;;;iBAhBtB;;;oBAEG;GAC3B,MAAM,EAAE,MAAM,QAAQ;GACtB,cAAc;IAAE,MAAM;IAAQ,WAAW;IAAiB;GAC1D,OAAO,EAAE,MAAM,QAAQ;GACxB;;CAMD;CACA;CAEA;CACA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AAEzB,MAAI,CAAC,MAAA,SAAe,YAAY;AAC9B,SAAA,SAAe,aAAa,eAAe,OAAO;AAClD,SAAA,SAAe,SAAS;AACxB,QAAK,YAAY,MAAA,SAAe;AAChC,QAAK,YAAY,MAAA,SAAe;;;CAQpC,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAA,KAAW,SAAS,KAAK;;CAG3B,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAA,MAAY;AAE1B,MAAI,CAAC,MAAO;AAEZ,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAEnC,QAAA,SAAe,SAAS,CAAC,MAAM;AAC/B,QAAA,SAAe,cAAc,MAAM,WAAW,KAAK,eAAe;AAClE,QAAA,SAAe,cAAc,MAAM;AAEnC,oBAAkB,MAAM,MAAA,KAAW,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,cAAc"}

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

@@ -18,6 +18,12 @@ var TimeSliderElement = class extends MediaElement {
 		this.orientation = TimeSliderCore.defaultProps.orientation;
 		this.disabled = TimeSliderCore.defaultProps.disabled;
 		this.thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;
+		this.#core = new TimeSliderCore();
+		this.#provider = new ContextProvider(this, { context: sliderContext });
+		this.#timeState = new PlayerController(this, playerContext, selectTime);
+		this.#bufferState = new PlayerController(this, playerContext, selectBuffer);
+		this.#slider = null;
+		this.#disconnect = null;
 	}
 	static {
 		this.tagName = "media-time-slider";
@@ -42,12 +48,12 @@ var TimeSliderElement = class extends MediaElement {
 			}
 		};
 	}
-	#core = new TimeSliderCore();
-	#provider = new ContextProvider(this, { context: sliderContext });
-	#timeState = new PlayerController(this, playerContext, selectTime);
-	#bufferState = new PlayerController(this, playerContext, selectBuffer);
-	#slider = null;
-	#disconnect = null;
+	#core;
+	#provider;
+	#timeState;
+	#bufferState;
+	#slider;
+	#disconnect;
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;

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

@@ -1 +1 @@
-{"version":3,"file":"time-slider-element.js","names":["#core","#provider","#timeState","#bufferState","#disconnect","#slider"],"sources":["../../../../src/ui/time-slider/time-slider-element.ts"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getTimeSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectBuffer,\n  selectTime,\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';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from '../slider/context';\n\nexport class TimeSliderElement extends MediaElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    changeThrottle: { type: Number, attribute: 'change-throttle' },\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<Exclude<keyof TimeSliderCore.Props, 'value' | 'min' | 'max'>>;\n\n  label = TimeSliderCore.defaultProps.label;\n  changeThrottle = TimeSliderCore.defaultProps.changeThrottle;\n  step = TimeSliderCore.defaultProps.step;\n  largeStep = TimeSliderCore.defaultProps.largeStep;\n  orientation = TimeSliderCore.defaultProps.orientation;\n  disabled = TimeSliderCore.defaultProps.disabled;\n  thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new TimeSliderCore();\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #timeState = new PlayerController(this, playerContext, selectTime);\n  readonly #bufferState = new PlayerController(this, playerContext, selectBuffer);\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 || !this.#timeState.value,\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\n        return this.#core.percentFromValue(media.currentTime);\n      },\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueCommit: (percent) => {\n        const media = this.#timeState.value;\n        if (media) media.seek(this.#core.rawValueFromPercent(percent));\n      },\n      changeThrottle: this.changeThrottle,\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    if (__DEV__ && !this.#timeState.value) {\n      logMissingFeature(this.localName, this.#timeState.displayName!);\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.#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    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n    if (!time) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Domain-specific data attributes on root (includes data-seeking).\n    applyStateDataAttrs(this, state, TimeSliderDataAttrs);\n\n    // Provide context to child elements with base slider data attrs.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: TimeSliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration),\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"time-slider-element.js","names":["#core","#provider","#timeState","#bufferState","#disconnect","#slider"],"sources":["../../../../src/ui/time-slider/time-slider-element.ts"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getTimeSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectBuffer,\n  selectTime,\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';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from '../slider/context';\n\nexport class TimeSliderElement extends MediaElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    changeThrottle: { type: Number, attribute: 'change-throttle' },\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<Exclude<keyof TimeSliderCore.Props, 'value' | 'min' | 'max'>>;\n\n  label = TimeSliderCore.defaultProps.label;\n  changeThrottle = TimeSliderCore.defaultProps.changeThrottle;\n  step = TimeSliderCore.defaultProps.step;\n  largeStep = TimeSliderCore.defaultProps.largeStep;\n  orientation = TimeSliderCore.defaultProps.orientation;\n  disabled = TimeSliderCore.defaultProps.disabled;\n  thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new TimeSliderCore();\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #timeState = new PlayerController(this, playerContext, selectTime);\n  readonly #bufferState = new PlayerController(this, playerContext, selectBuffer);\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 || !this.#timeState.value,\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\n        return this.#core.percentFromValue(media.currentTime);\n      },\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueCommit: (percent) => {\n        const media = this.#timeState.value;\n        if (media) media.seek(this.#core.rawValueFromPercent(percent));\n      },\n      changeThrottle: this.changeThrottle,\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    if (__DEV__ && !this.#timeState.value) {\n      logMissingFeature(this.localName, this.#timeState.displayName!);\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.#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    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n    if (!time) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Domain-specific data attributes on root (includes data-seeking).\n    applyStateDataAttrs(this, state, TimeSliderDataAttrs);\n\n    // Provide context to child elements with base slider data attrs.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: TimeSliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration),\n    });\n  }\n}\n"],"mappings":"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"}

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

@@ -21,6 +21,14 @@ var TooltipElement = class extends MediaElement {
 		this.closeDelay = TooltipCore.defaultProps.closeDelay;
 		this.disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;
 		this.disabled = TooltipCore.defaultProps.disabled;
+		this.#core = new TooltipCore();
+		this.#groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });
+		this.#position = new PositionController(this);
+		this.#tooltip = null;
+		this.#snapshot = null;
+		this.#disconnect = null;
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
 	}
 	static {
 		this.tagName = "media-tooltip";
@@ -46,14 +54,14 @@ var TooltipElement = class extends MediaElement {
 			disabled: { type: Boolean }
 		};
 	}
-	#core = new TooltipCore();
-	#groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });
-	#position = new PositionController(this);
-	#tooltip = null;
-	#snapshot = null;
-	#disconnect = null;
-	#triggerAbort = null;
-	#currentTrigger = null;
+	#core;
+	#groupConsumer;
+	#position;
+	#tooltip;
+	#snapshot;
+	#disconnect;
+	#triggerAbort;
+	#currentTrigger;
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-element.js","names":["#core","#groupConsumer","#position","#disconnect","#tooltip","#snapshot","#cleanupTrigger","#syncTrigger","#currentTrigger","#triggerAbort","#syncContent"],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"sourcesContent":["import { type ButtonState, TooltipCore, TooltipCSSVars, TooltipDataAttrs, type TooltipInput } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  getPopupPositionRect,\n  resolveOffsets,\n  type TooltipApi,\n  type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { State } from '@videojs/store';\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';\nimport { tooltipGroupContext } from './context';\n\ntype TriggerElement = HTMLElement & {\n  getLabel(): string | undefined;\n  $state: State<ButtonState>;\n};\n\nfunction isLabelTrigger(el: HTMLElement): el is TriggerElement {\n  return '$state' in el;\n}\n\nexport class TooltipElement extends MediaElement {\n  static readonly tagName = 'media-tooltip';\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    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    disableHoverablePopup: { type: Boolean, attribute: 'disable-hoverable-popup' },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof TooltipCore.Props>;\n\n  open = TooltipCore.defaultProps.open;\n  defaultOpen = TooltipCore.defaultProps.defaultOpen;\n  side = TooltipCore.defaultProps.side;\n  align = TooltipCore.defaultProps.align;\n  delay = TooltipCore.defaultProps.delay;\n  closeDelay = TooltipCore.defaultProps.closeDelay;\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;\n  disabled = TooltipCore.defaultProps.disabled;\n\n  readonly #core = new TooltipCore();\n  readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });\n  readonly #position = new PositionController(this);\n  #tooltip: TooltipApi | null = null;\n  #snapshot: SnapshotController<TooltipInput> | 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.#tooltip = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      disableHoverablePopup: () => this.disableHoverablePopup,\n      disabled: () => this.disabled,\n      // Lazy getter — group may arrive after connect via context.\n      group: () => this.#groupConsumer.value,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#tooltip.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#tooltip.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#tooltip.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#tooltip.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.#tooltip?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#tooltip?.destroy();\n    this.#tooltip = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#tooltip && changed.has('open')) {\n      const { active: interactionOpen } = this.#tooltip.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#tooltip.open();\n        } else {\n          this.#tooltip.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#tooltip) 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.#tooltip.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, TooltipDataAttrs);\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 anchor-name to the discovered trigger for CSS positioning.\n    if (this.#currentTrigger) {\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(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, undefined, undefined, undefined, undefined, TooltipCSSVars)\n      );\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, TooltipCSSVars);\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets, TooltipCSSVars)\n      );\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.#tooltip?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#tooltip) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });\n\n      if (isLabelTrigger(triggerEl)) {\n        this.#syncContent(triggerEl);\n        triggerEl.$state.subscribe(() => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n      }\n    }\n  }\n\n  #syncContent(triggerEl: TriggerElement): void {\n    this.textContent = triggerEl.getLabel() ?? '';\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\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":"tooltip-element.js","names":["#core","#groupConsumer","#position","#disconnect","#tooltip","#snapshot","#cleanupTrigger","#syncTrigger","#currentTrigger","#triggerAbort","#syncContent"],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"sourcesContent":["import { type ButtonState, TooltipCore, TooltipCSSVars, TooltipDataAttrs, type TooltipInput } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  getPopupPositionRect,\n  resolveOffsets,\n  type TooltipApi,\n  type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { State } from '@videojs/store';\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';\nimport { tooltipGroupContext } from './context';\n\ntype TriggerElement = HTMLElement & {\n  getLabel(): string | undefined;\n  $state: State<ButtonState>;\n};\n\nfunction isLabelTrigger(el: HTMLElement): el is TriggerElement {\n  return '$state' in el;\n}\n\nexport class TooltipElement extends MediaElement {\n  static readonly tagName = 'media-tooltip';\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    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    disableHoverablePopup: { type: Boolean, attribute: 'disable-hoverable-popup' },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof TooltipCore.Props>;\n\n  open = TooltipCore.defaultProps.open;\n  defaultOpen = TooltipCore.defaultProps.defaultOpen;\n  side = TooltipCore.defaultProps.side;\n  align = TooltipCore.defaultProps.align;\n  delay = TooltipCore.defaultProps.delay;\n  closeDelay = TooltipCore.defaultProps.closeDelay;\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;\n  disabled = TooltipCore.defaultProps.disabled;\n\n  readonly #core = new TooltipCore();\n  readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });\n  readonly #position = new PositionController(this);\n  #tooltip: TooltipApi | null = null;\n  #snapshot: SnapshotController<TooltipInput> | 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.#tooltip = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      disableHoverablePopup: () => this.disableHoverablePopup,\n      disabled: () => this.disabled,\n      // Lazy getter — group may arrive after connect via context.\n      group: () => this.#groupConsumer.value,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#tooltip.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#tooltip.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#tooltip.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#tooltip.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.#tooltip?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#tooltip?.destroy();\n    this.#tooltip = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#tooltip && changed.has('open')) {\n      const { active: interactionOpen } = this.#tooltip.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#tooltip.open();\n        } else {\n          this.#tooltip.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#tooltip) 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.#tooltip.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, TooltipDataAttrs);\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 anchor-name to the discovered trigger for CSS positioning.\n    if (this.#currentTrigger) {\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(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, undefined, undefined, undefined, undefined, TooltipCSSVars)\n      );\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, TooltipCSSVars);\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets, TooltipCSSVars)\n      );\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.#tooltip?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#tooltip) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });\n\n      if (isLabelTrigger(triggerEl)) {\n        this.#syncContent(triggerEl);\n        triggerEl.$state.subscribe(() => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n      }\n    }\n  }\n\n  #syncContent(triggerEl: TriggerElement): void {\n    this.textContent = triggerEl.getLabel() ?? '';\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\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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"}

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

@@ -9,6 +9,11 @@ var TooltipGroupElement = class extends MediaElement {
 		this.delay = TooltipGroupCore.defaultProps.delay;
 		this.closeDelay = TooltipGroupCore.defaultProps.closeDelay;
 		this.timeout = TooltipGroupCore.defaultProps.timeout;
+		this.#core = new TooltipGroupCore();
+		this.#provider = new ContextProvider(this, {
+			context: tooltipGroupContext,
+			initialValue: this.#core
+		});
 	}
 	static {
 		this.tagName = "media-tooltip-group";
@@ -23,11 +28,8 @@ var TooltipGroupElement = class extends MediaElement {
 			timeout: { type: Number }
 		};
 	}
-	#core = new TooltipGroupCore();
-	#provider = new ContextProvider(this, {
-		context: tooltipGroupContext,
-		initialValue: this.#core
-	});
+	#core;
+	#provider;
 	update(_changed) {
 		super.update(_changed);
 		this.#core.setProps(this);

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-group-element.js","names":["#core","#provider"],"sources":["../../../../src/ui/tooltip/tooltip-group-element.ts"],"sourcesContent":["import { TooltipGroupCore } from '@videojs/core';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipGroupElement extends MediaElement {\n  static readonly tagName = 'media-tooltip-group';\n\n  static override properties = {\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    timeout: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof TooltipGroupCore.Props>;\n\n  delay = TooltipGroupCore.defaultProps.delay;\n  closeDelay = TooltipGroupCore.defaultProps.closeDelay;\n  timeout = TooltipGroupCore.defaultProps.timeout;\n\n  readonly #core = new TooltipGroupCore();\n  readonly #provider = new ContextProvider(this, { context: tooltipGroupContext, initialValue: this.#core });\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    this.#core.setProps(this);\n    this.#provider.setValue(this.#core);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,sBAAb,cAAyC,aAAa;;;eAS5C,iBAAiB,aAAa;oBACzB,iBAAiB,aAAa;iBACjC,iBAAiB,aAAa;;;iBAVd;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACtD,SAAS,EAAE,MAAM,QAAQ;GAC1B;;CAMD,QAAiB,IAAI,kBAAkB;CACvC,YAAqB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAqB,cAAc,MAAA;EAAY,CAAC;CAE1G,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,QAAA,KAAW,SAAS,KAAK;AACzB,QAAA,SAAe,SAAS,MAAA,KAAW"}
+{"version":3,"file":"tooltip-group-element.js","names":["#core","#provider"],"sources":["../../../../src/ui/tooltip/tooltip-group-element.ts"],"sourcesContent":["import { TooltipGroupCore } from '@videojs/core';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipGroupElement extends MediaElement {\n  static readonly tagName = 'media-tooltip-group';\n\n  static override properties = {\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    timeout: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof TooltipGroupCore.Props>;\n\n  delay = TooltipGroupCore.defaultProps.delay;\n  closeDelay = TooltipGroupCore.defaultProps.closeDelay;\n  timeout = TooltipGroupCore.defaultProps.timeout;\n\n  readonly #core = new TooltipGroupCore();\n  readonly #provider = new ContextProvider(this, { context: tooltipGroupContext, initialValue: this.#core });\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    this.#core.setProps(this);\n    this.#provider.setValue(this.#core);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,sBAAb,cAAyC,aAAa;;;eAS5C,iBAAiB,aAAa;oBACzB,iBAAiB,aAAa;iBACjC,iBAAiB,aAAa;eAEvB,IAAI,kBAAkB;mBAClB,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAqB,cAAc,MAAA;GAAY,CAAC;;;iBAbhF;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACtD,SAAS,EAAE,MAAM,QAAQ;GAC1B;;CAMD;CACA;CAEA,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,QAAA,KAAW,SAAS,KAAK;AACzB,QAAA,SAAe,SAAS,MAAA,KAAW"}