@videojs/html 10.0.0-beta.6 → 10.0.0-beta.7

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-element.js","names":["#core","#groupConsumer","#disconnect","#tooltip","#snapshot","#cleanupTrigger","#findTrigger","#syncTrigger","#currentTrigger","#triggerAbort"],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"sourcesContent":["import { TooltipCore, TooltipCSSVars, TooltipDataAttrs, type TooltipInput } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\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 { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\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  #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    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.#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 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) return;\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 = this.getBoundingClientRect();\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\n  // --- Trigger discovery ---\n\n  #findTrigger(): HTMLElement | null {\n    if (!this.id) return null;\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.id}\"]`);\n  }\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\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  }\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-describedby': 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":"tooltip-element.js","names":["#core","#groupConsumer","#disconnect","#tooltip","#snapshot","#cleanupPositioning","#cleanupTrigger","#findTrigger","#syncTrigger","#currentTrigger","#syncPositioning","#triggerAbort","#positionAbort","#positionTrigger","#positionFrame","#resizeObserver"],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"sourcesContent":["import { 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 { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\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  #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  #positionAbort: AbortController | null = null;\n  #positionFrame = 0;\n  #resizeObserver: ResizeObserver | null = null;\n  #positionTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\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.#cleanupPositioning();\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.#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 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.#cleanupPositioning();\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.#syncPositioning();\n  }\n\n  // --- Trigger discovery ---\n\n  #findTrigger(): HTMLElement | null {\n    if (!this.id) return null;\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.id}\"]`);\n  }\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#cleanupPositioning();\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  }\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-describedby': 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  #syncPositioning(): void {\n    if (supportsAnchorPositioning()) return;\n\n    const triggerEl = this.#currentTrigger;\n\n    if (!triggerEl) return;\n    if (this.#positionAbort && this.#positionTrigger === triggerEl) return;\n\n    this.#cleanupPositioning();\n    this.#positionAbort = new AbortController();\n    this.#positionTrigger = triggerEl;\n    const { signal } = this.#positionAbort;\n\n    const reposition = () => {\n      cancelAnimationFrame(this.#positionFrame);\n      this.#positionFrame = requestAnimationFrame(() => {\n        if (signal.aborted) return;\n        this.requestUpdate();\n      });\n    };\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true, signal });\n    window.addEventListener('resize', reposition, { signal });\n\n    if (typeof ResizeObserver === 'function') {\n      this.#resizeObserver = new ResizeObserver(() => {\n        reposition();\n      });\n      this.#resizeObserver.observe(triggerEl);\n      this.#resizeObserver.observe(this);\n    }\n\n    reposition();\n  }\n\n  #cleanupPositioning(): void {\n    this.#positionAbort?.abort();\n    this.#positionAbort = null;\n    this.#positionTrigger = null;\n    cancelAnimationFrame(this.#positionFrame);\n    this.#positionFrame = 0;\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/volume-slider/volume-slider-element.js

@@ -4,7 +4,7 @@ import { PlayerController } from "../../player/player-controller.js";
 import { sliderContext } from "../slider/context.js";
 import { applyElementProps, applyStateDataAttrs, createSlider, getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
 import { ContextProvider } from "@videojs/element/context";
-import { SliderDataAttrs, VolumeSliderCore } from "@videojs/core";
+import { VolumeSliderCore, VolumeSliderDataAttrs } from "@videojs/core";
 import { applyStyles, isRTL } from "@videojs/utils/dom";
 
 //#region src/ui/volume-slider/volume-slider-element.ts
@@ -103,10 +103,10 @@ var VolumeSliderElement = class extends MediaElement {
 		const state = this.#core.getState();
 		const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));
 		applyStyles(this, cssVars);
-		applyStateDataAttrs(this, state, SliderDataAttrs);
+		applyStateDataAttrs(this, state, VolumeSliderDataAttrs);
 		this.#provider.setValue({
 			state,
-			stateAttrMap: SliderDataAttrs,
+			stateAttrMap: VolumeSliderDataAttrs,
 			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
 			thumbAttrs: this.#core.getAttrs(state),
 			thumbProps: this.#slider.thumbProps,

package/dist/dev/ui/volume-slider/volume-slider-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-slider-element.js","names":["#core","#provider","#volumeState","#disconnect","#slider","#setVolume"],"sources":["../../../../src/ui/volume-slider/volume-slider-element.ts"],"sourcesContent":["import { SliderDataAttrs, VolumeSliderCore } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectVolume,\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 { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from '../slider/context';\n\nexport class VolumeSliderElement extends MediaElement {\n  static readonly tagName = 'media-volume-slider';\n\n  static override properties = {\n    label: { type: String },\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 VolumeSliderCore.Props, 'value' | 'min' | 'max'>>;\n\n  label = VolumeSliderCore.defaultProps.label;\n  step = VolumeSliderCore.defaultProps.step;\n  largeStep = VolumeSliderCore.defaultProps.largeStep;\n  orientation = VolumeSliderCore.defaultProps.orientation;\n  disabled = VolumeSliderCore.defaultProps.disabled;\n  thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new VolumeSliderCore();\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #volumeState = new PlayerController(this, playerContext, selectVolume);\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.#volumeState.value,\n      getPercent: () => {\n        const media = this.#volumeState.value;\n        if (!media) return 0;\n        return media.volume * 100;\n      },\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.#setVolume(percent);\n      },\n      onValueCommit: (percent) => {\n        this.#setVolume(percent);\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    if (__DEV__ && !this.#volumeState.value) {\n      logMissingFeature(this.localName, this.#volumeState.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 media = this.#volumeState.value;\n    if (!media) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Apply data attributes to root.\n    applyStateDataAttrs(this, state, SliderDataAttrs);\n\n    // Provide context to child elements.\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      formatValue: (value) => `${Math.round(value)}%`,\n    });\n  }\n\n  #setVolume(percent: number): void {\n    const media = this.#volumeState.value;\n    media?.setVolume(this.#core.valueFromPercent(percent) / 100);\n  }\n}\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,sBAAb,cAAyC,aAAa;;;eAY5C,iBAAiB,aAAa;cAC/B,iBAAiB,aAAa;mBACzB,iBAAiB,aAAa;qBAC5B,iBAAiB,aAAa;kBACjC,iBAAiB,aAAa;wBACxB,iBAAiB,aAAa;;;iBAhBrB;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,MAAM,EAAE,MAAM,QAAQ;GACtB,WAAW;IAAE,MAAM;IAAQ,WAAW;IAAc;GACpD,aAAa,EAAE,MAAM,QAAQ;GAC7B,UAAU,EAAE,MAAM,SAAS;GAC3B,gBAAgB;IAAE,MAAM;IAAQ,WAAW;IAAmB;GAC/D;;CASD,CAASA,OAAQ,IAAI,kBAAkB;CACvC,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,eAAe,CAAC;CAC1E,CAASC,cAAe,IAAI,iBAAiB,MAAM,eAAe,aAAa;CAE/E,UAA4B;CAC5B,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,QAAKC,aAAc,IAAI,iBAAiB;EACxC,MAAM,SAAS,MAAKA,WAAY;AAEhC,QAAKC,SAAU,aAAa;GAC1B,kBAAkB;GAClB,uBAAuB,KAAK,cAA2B,qBAAqB;GAC5E,sBAAsB,KAAK;GAC3B,aAAa,MAAM,KAAK;GACxB,kBAAkB,KAAK,YAAY,CAAC,MAAKF,YAAa;GACtD,kBAAkB;IAChB,MAAM,QAAQ,MAAKA,YAAa;AAChC,QAAI,CAAC,MAAO,QAAO;AACnB,WAAO,MAAM,SAAS;;GAExB,sBAAsB,MAAKF,KAAM,gBAAgB;GACjD,2BAA2B,MAAKA,KAAM,qBAAqB;GAC3D,gBAAgB,YAAY;AAC1B,UAAKK,UAAW,QAAQ;;GAE1B,gBAAgB,YAAY;AAC1B,UAAKA,UAAW,QAAQ;;GAE1B,mBAAmB;AACjB,SAAK,cAAc,IAAI,YAAY,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC;;GAEtE,iBAAiB;AACf,SAAK,cAAc,IAAI,YAAY,YAAY,EAAE,SAAS,MAAM,CAAC,CAAC;;GAEpE,gBAAgB,KAAK,WAAW,cAAc,MAAKL,KAAM,0BAA0B,KAAK,WAAW,UAAU;GAC7G,gBAAgB,KAAK,eAAe;GACrC,CAAC;AAEF,oBAAkB,MAAM,MAAKI,OAAQ,WAAW,EAAE,QAAQ,CAAC;AAC3D,cAAY,MAAM,MAAKA,OAAQ,UAAU;AACzC,QAAKA,OAAQ,MAAM,gBAAgB,KAAK,eAAe,EAAE,EAAE,QAAQ,CAAC;AAEpE,MAAe,CAAC,MAAKF,YAAa,MAChC,mBAAkB,KAAK,WAAW,MAAKA,YAAa,YAAa;;CAIrE,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKC,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAS,kBAAwB;AAC/B,QAAKC,QAAS,SAAS;AACvB,QAAM,iBAAiB;;CAGzB,AAAmB,WAAW,UAAgC;AAC5D,QAAM,WAAW,SAAS;AAC1B,QAAKJ,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,MAAKI,OAAS;EAEnB,MAAM,QAAQ,MAAKF,YAAa;AAChC,MAAI,CAAC,MAAO;AAEZ,QAAKF,KAAM,SAAS,MAAKI,OAAQ,MAAM,QAAQ;AAC/C,QAAKJ,KAAM,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAKA,KAAM,UAAU;EAEnC,MAAM,UAAU,iBAAiB,MAAKI,OAAQ,mBAAmB,MAAM,CAAC;AAExE,cAAY,MAAM,QAAQ;AAG1B,sBAAoB,MAAM,OAAO,gBAAgB;AAGjD,QAAKH,SAAU,SAAS;GACtB;GACA,cAAc;GACd,cAAc,MAAKD,KAAM,iBAAiB,MAAM,eAAe;GAC/D,YAAY,MAAKA,KAAM,SAAS,MAAM;GACtC,YAAY,MAAKI,OAAQ;GACzB,cAAc,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC;GAC9C,CAAC;;CAGJ,WAAW,SAAuB;AAEhC,EADc,MAAKF,YAAa,OACzB,UAAU,MAAKF,KAAM,iBAAiB,QAAQ,GAAG,IAAI"}
+{"version":3,"file":"volume-slider-element.js","names":["#core","#provider","#volumeState","#disconnect","#slider","#setVolume"],"sources":["../../../../src/ui/volume-slider/volume-slider-element.ts"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectVolume,\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 { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from '../slider/context';\n\nexport class VolumeSliderElement extends MediaElement {\n  static readonly tagName = 'media-volume-slider';\n\n  static override properties = {\n    label: { type: String },\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 VolumeSliderCore.Props, 'value' | 'min' | 'max'>>;\n\n  label = VolumeSliderCore.defaultProps.label;\n  step = VolumeSliderCore.defaultProps.step;\n  largeStep = VolumeSliderCore.defaultProps.largeStep;\n  orientation = VolumeSliderCore.defaultProps.orientation;\n  disabled = VolumeSliderCore.defaultProps.disabled;\n  thumbAlignment = VolumeSliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new VolumeSliderCore();\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n  readonly #volumeState = new PlayerController(this, playerContext, selectVolume);\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.#volumeState.value,\n      getPercent: () => {\n        const media = this.#volumeState.value;\n        if (!media) return 0;\n        return media.volume * 100;\n      },\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.#setVolume(percent);\n      },\n      onValueCommit: (percent) => {\n        this.#setVolume(percent);\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    if (__DEV__ && !this.#volumeState.value) {\n      logMissingFeature(this.localName, this.#volumeState.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 media = this.#volumeState.value;\n    if (!media) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Apply data attributes to root.\n    applyStateDataAttrs(this, state, VolumeSliderDataAttrs);\n\n    // Provide context to child elements.\n    this.#provider.setValue({\n      state,\n      stateAttrMap: VolumeSliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => `${Math.round(value)}%`,\n    });\n  }\n\n  #setVolume(percent: number): void {\n    const media = this.#volumeState.value;\n    media?.setVolume(this.#core.valueFromPercent(percent) / 100);\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/html",
   "type": "module",
-  "version": "10.0.0-beta.6",
+  "version": "10.0.0-beta.7",
   "description": "HTML library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -13,7 +13,8 @@
   "module": "dist/default/index.js",
   "types": "dist/dev/index.d.ts",
   "sideEffects": [
-    "./dist/*/define/**/*.js"
+    "./dist/*/define/**/*.js",
+    "./cdn/**/*.js"
   ],
   "files": [
     "dist",
@@ -73,6 +74,16 @@
       "development": "./dist/dev/define/media/*.js",
       "default": "./dist/default/define/media/*.js"
     },
+    "./cdn/media/*": {
+      "types": "./cdn/media/*.dev.d.ts",
+      "development": "./cdn/media/*.dev.js",
+      "default": "./cdn/media/*.js"
+    },
+    "./cdn/*": {
+      "types": "./cdn/*.dev.d.ts",
+      "development": "./cdn/*.dev.js",
+      "default": "./cdn/*.js"
+    },
     "./*.css": "./dist/default/define/*.css",
     "./*": {
       "types": "./dist/dev/define/*.d.ts",
@@ -81,11 +92,11 @@
     }
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-beta.6",
-    "@videojs/store": "10.0.0-beta.6",
-    "@videojs/utils": "10.0.0-beta.6",
-    "@videojs/element": "10.0.0-beta.6",
-    "@videojs/spf": "10.0.0-beta.6"
+    "@videojs/spf": "10.0.0-beta.7",
+    "@videojs/core": "10.0.0-beta.7",
+    "@videojs/store": "10.0.0-beta.7",
+    "@videojs/utils": "10.0.0-beta.7",
+    "@videojs/element": "10.0.0-beta.7"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
@@ -93,8 +104,8 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@videojs/icons": "10.0.0-beta.6",
-    "@videojs/skins": "10.0.0-beta.6"
+    "@videojs/icons": "10.0.0-beta.7",
+    "@videojs/skins": "10.0.0-beta.7"
   },
   "publishConfig": {
     "access": "public"