@videojs/html 10.0.0-alpha.7 → 10.0.0-alpha.9

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

@@ -0,0 +1,23 @@
+import { sliderContext } from "./context.js";
+import { ThumbnailElement } from "../thumbnail/thumbnail-element.js";
+import { ContextConsumer } from "@videojs/element/context";
+
+//#region src/ui/slider/slider-thumbnail-element.ts
+var SliderThumbnailElement = class extends ThumbnailElement {
+	static {
+		this.tagName = "media-slider-thumbnail";
+	}
+	#ctx = new ContextConsumer(this, {
+		context: sliderContext,
+		subscribe: true
+	});
+	update(changed) {
+		const ctx = this.#ctx.value;
+		if (ctx) this.time = ctx.pointerValue;
+		super.update(changed);
+	}
+};
+
+//#endregion
+export { SliderThumbnailElement };
+//# sourceMappingURL=slider-thumbnail-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-thumbnail-element.js","names":["#ctx"],"sources":["../../../../src/ui/slider/slider-thumbnail-element.ts"],"sourcesContent":["import type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ThumbnailElement } from '../thumbnail/thumbnail-element';\nimport { sliderContext } from './context';\n\n// @ts-expect-error TS2417 — tagName narrows to a different literal for custom element registration.\nexport class SliderThumbnailElement extends ThumbnailElement {\n  static override readonly tagName = 'media-slider-thumbnail';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  protected override update(changed: PropertyValues): void {\n    const ctx = this.#ctx.value;\n    if (ctx) this.time = ctx.pointerValue;\n    super.update(changed);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,yBAAb,cAA4C,iBAAiB;;iBACxB;;CAEnC,CAASA,MAAO,IAAI,gBAAgB,MAAM;EACxC,SAAS;EACT,WAAW;EACZ,CAAC;CAEF,AAAmB,OAAO,SAA+B;EACvD,MAAM,MAAM,MAAKA,IAAK;AACtB,MAAI,IAAK,MAAK,OAAO,IAAI;AACzB,QAAM,OAAO,QAAQ"}

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

@@ -64,6 +64,7 @@ var ThumbnailElement = class extends MediaElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.destroyed) return;
 		this.#api = createThumbnail({
 			getContainer: () => this,
 			getImg: () => this.#img,
@@ -72,8 +73,10 @@ var ThumbnailElement = class extends MediaElement {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+	}
+	destroyCallback() {
 		this.#api?.destroy();
-		this.#api = null;
+		super.destroyCallback();
 	}
 	update(changed) {
 		super.update(changed);

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\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    this.#api?.destroy();\n    this.#api = null;\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-slider/time-slider-element.js

@@ -2,7 +2,7 @@ import { playerContext } from "../../player/context.js";
 import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
 import { sliderContext } from "../slider/context.js";
-import { applyStateDataAttrs, createSlider, getTimeSliderCSSVars, selectBuffer, selectTime } from "@videojs/core/dom";
+import { applyElementProps, applyStateDataAttrs, createSlider, getTimeSliderCSSVars, selectBuffer, selectTime } from "@videojs/core/dom";
 import { ContextProvider } from "@videojs/element/context";
 import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
 import { applyStyles, isRTL } from "@videojs/utils/dom";
@@ -51,6 +51,7 @@ var TimeSliderElement = class extends MediaElement {
 	#disconnect = null;
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.destroyed) return;
 		this.#disconnect = new AbortController();
 		const signal = this.#disconnect.signal;
 		this.#slider = createSlider({
@@ -76,19 +77,23 @@ var TimeSliderElement = class extends MediaElement {
 			},
 			onDragEnd: () => {
 				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
-			}
+			},
+			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize)
 		});
+		applyElementProps(this, this.#slider.rootProps, { signal });
 		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
 		this.style.touchAction = "none";
 		this.style.userSelect = "none";
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.#slider?.destroy();
-		this.#slider = null;
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
+	destroyCallback() {
+		this.#slider?.destroy();
+		super.destroyCallback();
+	}
 	willUpdate(_changed) {
 		super.willUpdate(_changed);
 		this.#core.setProps(this);
@@ -109,7 +114,7 @@ var TimeSliderElement = class extends MediaElement {
 		};
 		this.#core.setMedia(media);
 		const state = this.#core.getState();
-		const cssVars = getTimeSliderCSSVars(state);
+		const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));
 		applyStyles(this, cssVars);
 		applyStateDataAttrs(this, state, TimeSliderDataAttrs);
 		this.#provider.setValue({

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  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    commitThrottle: { type: Number, attribute: 'commit-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  commitThrottle = TimeSliderCore.defaultProps.commitThrottle;\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\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.valueFromPercent(percent));\n      },\n      commitThrottle: this.commitThrottle,\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    });\n\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    // Prevent default touch gestures and text selection during interaction.\n    this.style.touchAction = 'none';\n    this.style.userSelect = 'none';\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.#slider?.destroy();\n    this.#slider = 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\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    const cssVars = getTimeSliderCSSVars(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    commitThrottle: { type: Number, attribute: 'commit-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  commitThrottle = TimeSliderCore.defaultProps.commitThrottle;\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.valueFromPercent(percent));\n      },\n      commitThrottle: this.commitThrottle,\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    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    // Prevent default touch gestures and text selection during interaction.\n    this.style.touchAction = 'none';\n    this.style.userSelect = 'none';\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/context.js

@@ -0,0 +1,9 @@
+import { createContext } from "@videojs/element/context";
+
+//#region src/ui/tooltip/context.ts
+const TOOLTIP_GROUP_CONTEXT_KEY = Symbol("@videojs/tooltip-group");
+const tooltipGroupContext = createContext(TOOLTIP_GROUP_CONTEXT_KEY);
+
+//#endregion
+export { tooltipGroupContext };
+//# sourceMappingURL=context.js.map

package/dist/default/ui/tooltip/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.ts"],"sourcesContent":["import type { TooltipGroupCore } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nconst TOOLTIP_GROUP_CONTEXT_KEY = Symbol('@videojs/tooltip-group');\n\nexport const tooltipGroupContext = createContext<TooltipGroupCore>(TOOLTIP_GROUP_CONTEXT_KEY);\n"],"mappings":";;;AAGA,MAAM,4BAA4B,OAAO,yBAAyB;AAElE,MAAa,sBAAsB,cAAgC,0BAA0B"}

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

@@ -0,0 +1,152 @@
+import { MediaElement } from "../media-element.js";
+import { tooltipGroupContext } from "./context.js";
+import { applyElementProps, applyStateDataAttrs, createTooltip, createTransition, getAnchorNameStyle, getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+import { SnapshotController } from "@videojs/store/html";
+import { TooltipCSSVars, TooltipCore, TooltipDataAttrs } from "@videojs/core";
+import { applyStyles, supportsAnchorPositioning } from "@videojs/utils/dom";
+
+//#region src/ui/tooltip/tooltip-element.ts
+var TooltipElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = TooltipCore.defaultProps.open;
+		this.defaultOpen = TooltipCore.defaultProps.defaultOpen;
+		this.side = TooltipCore.defaultProps.side;
+		this.align = TooltipCore.defaultProps.align;
+		this.delay = TooltipCore.defaultProps.delay;
+		this.closeDelay = TooltipCore.defaultProps.closeDelay;
+		this.disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;
+		this.disabled = TooltipCore.defaultProps.disabled;
+	}
+	static {
+		this.tagName = "media-tooltip";
+	}
+	static {
+		this.properties = {
+			open: { type: Boolean },
+			defaultOpen: {
+				type: Boolean,
+				attribute: "default-open"
+			},
+			side: { type: String },
+			align: { type: String },
+			delay: { type: Number },
+			closeDelay: {
+				type: Number,
+				attribute: "close-delay"
+			},
+			disableHoverablePopup: {
+				type: Boolean,
+				attribute: "disable-hoverable-popup"
+			},
+			disabled: { type: Boolean }
+		};
+	}
+	#core = new TooltipCore();
+	#groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });
+	#tooltip = null;
+	#snapshot = null;
+	#disconnect = null;
+	#triggerAbort = null;
+	#currentTrigger = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#tooltip = createTooltip({
+			transition: createTransition(),
+			onOpenChange: (nextOpen, details) => {
+				this.open = nextOpen;
+				this.dispatchEvent(new CustomEvent("open-change", { detail: {
+					open: nextOpen,
+					...details
+				} }));
+			},
+			delay: () => this.delay,
+			closeDelay: () => this.closeDelay,
+			disableHoverablePopup: () => this.disableHoverablePopup,
+			disabled: () => this.disabled,
+			group: () => this.#groupConsumer.value
+		});
+		this.#tooltip.setPopupElement(this);
+		applyElementProps(this, this.#tooltip.popupProps, { signal: this.#disconnect.signal });
+		if (this.#snapshot) this.#snapshot.track(this.#tooltip.input);
+		else this.#snapshot = new SnapshotController(this, this.#tooltip.input);
+	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		if (this.defaultOpen && !this.open) this.#tooltip?.open();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupTrigger();
+		this.#tooltip?.destroy();
+		this.#tooltip = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.#core.setProps(this);
+		if (this.#tooltip && changed.has("open")) {
+			const { active: interactionOpen } = this.#tooltip.input.current;
+			if (this.open !== interactionOpen) if (this.open) this.#tooltip.open();
+			else this.#tooltip.close();
+		}
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#tooltip) return;
+		const triggerEl = this.#findTrigger();
+		this.#syncTrigger(triggerEl);
+		const input = this.#tooltip.input.current;
+		this.#core.setInput(input);
+		const state = this.#core.getState();
+		applyElementProps(this, this.#core.getPopupAttrs(state));
+		applyStateDataAttrs(this, state, TooltipDataAttrs);
+		if (this.#currentTrigger) {
+			applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
+			applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));
+		}
+		if (!state.open) return;
+		const posOpts = {
+			side: state.side,
+			align: state.align
+		};
+		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts, void 0, void 0, void 0, void 0, TooltipCSSVars));
+		else {
+			const triggerRect = this.#currentTrigger?.getBoundingClientRect();
+			const selfRect = this.getBoundingClientRect();
+			const boundaryRect = document.documentElement.getBoundingClientRect();
+			const offsets = resolveOffsets(this, TooltipCSSVars);
+			applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets, TooltipCSSVars));
+		}
+	}
+	#findTrigger() {
+		if (!this.id) return null;
+		return this.getRootNode().querySelector(`[commandfor="${this.id}"]`);
+	}
+	#syncTrigger(triggerEl) {
+		if (triggerEl === this.#currentTrigger) return;
+		this.#cleanupTrigger();
+		this.#currentTrigger = triggerEl;
+		this.#tooltip?.setTriggerElement(triggerEl);
+		if (triggerEl && this.#tooltip) {
+			this.#triggerAbort = new AbortController();
+			applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });
+		}
+	}
+	#cleanupTrigger() {
+		if (this.#currentTrigger) {
+			applyElementProps(this.#currentTrigger, { "aria-describedby": void 0 });
+			this.#currentTrigger.style.removeProperty("anchor-name");
+		}
+		this.#triggerAbort?.abort();
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
+	}
+};
+
+//#endregion
+export { TooltipElement };
+//# sourceMappingURL=tooltip-element.js.map

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

@@ -0,0 +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 } 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    // 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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"}

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

@@ -0,0 +1,38 @@
+import { MediaElement } from "../media-element.js";
+import { tooltipGroupContext } from "./context.js";
+import { ContextProvider } from "@videojs/element/context";
+import { TooltipGroupCore } from "@videojs/core";
+
+//#region src/ui/tooltip/tooltip-group-element.ts
+var TooltipGroupElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.delay = TooltipGroupCore.defaultProps.delay;
+		this.closeDelay = TooltipGroupCore.defaultProps.closeDelay;
+		this.timeout = TooltipGroupCore.defaultProps.timeout;
+	}
+	static {
+		this.tagName = "media-tooltip-group";
+	}
+	static {
+		this.properties = {
+			delay: { type: Number },
+			closeDelay: {
+				type: Number,
+				attribute: "close-delay"
+			},
+			timeout: { type: Number }
+		};
+	}
+	#core = new TooltipGroupCore();
+	#provider = new ContextProvider(this, { context: tooltipGroupContext });
+	update(_changed) {
+		super.update(_changed);
+		this.#core.setProps(this);
+		this.#provider.setValue(this.#core);
+	}
+};
+
+//#endregion
+export { TooltipGroupElement };
+//# sourceMappingURL=tooltip-group-element.js.map

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

@@ -0,0 +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 });\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,CAASA,OAAQ,IAAI,kBAAkB;CACvC,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,qBAAqB,CAAC;CAEhF,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,QAAKD,KAAM,SAAS,KAAK;AACzB,QAAKC,SAAU,SAAS,MAAKD,KAAM"}

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

@@ -2,7 +2,7 @@ import { playerContext } from "../../player/context.js";
 import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
 import { sliderContext } from "../slider/context.js";
-import { applyStateDataAttrs, createSlider, getSliderCSSVars, selectVolume } from "@videojs/core/dom";
+import { applyElementProps, applyStateDataAttrs, createSlider, getSliderCSSVars, selectVolume } from "@videojs/core/dom";
 import { ContextProvider } from "@videojs/element/context";
 import { SliderDataAttrs, VolumeSliderCore } from "@videojs/core";
 import { applyStyles, isRTL } from "@videojs/utils/dom";
@@ -44,6 +44,7 @@ var VolumeSliderElement = class extends MediaElement {
 	#disconnect = null;
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.destroyed) return;
 		this.#disconnect = new AbortController();
 		const signal = this.#disconnect.signal;
 		this.#slider = createSlider({
@@ -70,19 +71,23 @@ var VolumeSliderElement = class extends MediaElement {
 			},
 			onDragEnd: () => {
 				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
-			}
+			},
+			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize)
 		});
+		applyElementProps(this, this.#slider.rootProps, { signal });
 		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
 		this.style.touchAction = "none";
 		this.style.userSelect = "none";
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.#slider?.destroy();
-		this.#slider = null;
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
+	destroyCallback() {
+		this.#slider?.destroy();
+		super.destroyCallback();
+	}
 	willUpdate(_changed) {
 		super.willUpdate(_changed);
 		this.#core.setProps(this);
@@ -95,7 +100,7 @@ var VolumeSliderElement = class extends MediaElement {
 		this.#core.setInput(this.#slider.input.current);
 		this.#core.setMedia(media);
 		const state = this.#core.getState();
-		const cssVars = getSliderCSSVars(state);
+		const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));
 		applyStyles(this, cssVars);
 		applyStateDataAttrs(this, state, SliderDataAttrs);
 		this.#provider.setValue({
@@ -108,7 +113,7 @@ var VolumeSliderElement = class extends MediaElement {
 		});
 	}
 	#setVolume(percent) {
-		this.#volumeState.value?.changeVolume(this.#core.valueFromPercent(percent) / 100);
+		this.#volumeState.value?.setVolume(this.#core.valueFromPercent(percent) / 100);
 	}
 };
 

package/dist/default/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  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\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    });\n\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    // Prevent default touch gestures and text selection during interaction.\n    this.style.touchAction = 'none';\n    this.style.userSelect = 'none';\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.#slider?.destroy();\n    this.#slider = 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\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    const cssVars = getSliderCSSVars(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?.changeVolume(this.#core.valueFromPercent(percent) / 100);\n  }\n}\n"],"mappings":";;;;;;;;;;AAkBA,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;AAEzB,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;;GAErE,CAAC;AAEF,QAAKD,OAAQ,MAAM,gBAAgB,KAAK,eAAe,EAAE,EAAE,QAAQ,CAAC;AAGpE,OAAK,MAAM,cAAc;AACzB,OAAK,MAAM,aAAa;;CAO1B,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,QAAS,SAAS;AACvB,QAAKA,SAAU;AACf,QAAKD,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,UAAgC;AAC5D,QAAM,WAAW,SAAS;AAC1B,QAAKH,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;EACnC,MAAM,UAAU,iBAAiB,MAAM;AAEvC,cAAY,MAAM,QAAQ;AAG1B,sBAAoB,MAAM,OAAO,gBAAgB;AAGjD,QAAKC,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,aAAa,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 { 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    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    // Prevent default touch gestures and text selection during interaction.\n    this.style.touchAction = 'none';\n    this.style.userSelect = 'none';\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":"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"}

package/dist/dev/define/ui/alert-dialog-close.d.ts

@@ -0,0 +1,9 @@
+import { AlertDialogCloseElement } from "../../ui/alert-dialog/alert-dialog-close-element.js";
+
+//#region src/define/ui/alert-dialog-close.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [AlertDialogCloseElement.tagName]: AlertDialogCloseElement;
+  }
+} //# sourceMappingURL=alert-dialog-close.d.ts.map
+//# sourceMappingURL=alert-dialog-close.d.ts.map

package/dist/dev/define/ui/alert-dialog-close.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-close.d.ts","names":[],"sources":["../../../../src/define/ui/alert-dialog-close.ts"],"mappings":";;;QAKQ,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,uBAAA,CAAwB,OAAA,GAAU,uBAAA;EAAA;AAAA"}

package/dist/dev/define/ui/alert-dialog-close.js

@@ -0,0 +1,8 @@
+import { AlertDialogCloseElement } from "../../ui/alert-dialog/alert-dialog-close-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/ui/alert-dialog-close.ts
+safeDefine(AlertDialogCloseElement);
+
+//#endregion
+//# sourceMappingURL=alert-dialog-close.js.map

package/dist/dev/define/ui/alert-dialog-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-close.js","names":[],"sources":["../../../../src/define/ui/alert-dialog-close.ts"],"sourcesContent":["import { AlertDialogCloseElement } from '../../ui/alert-dialog/alert-dialog-close-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(AlertDialogCloseElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AlertDialogCloseElement.tagName]: AlertDialogCloseElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,wBAAwB"}

package/dist/dev/define/ui/alert-dialog-description.d.ts

@@ -0,0 +1,9 @@
+import { AlertDialogDescriptionElement } from "../../ui/alert-dialog/alert-dialog-description-element.js";
+
+//#region src/define/ui/alert-dialog-description.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [AlertDialogDescriptionElement.tagName]: AlertDialogDescriptionElement;
+  }
+} //# sourceMappingURL=alert-dialog-description.d.ts.map
+//# sourceMappingURL=alert-dialog-description.d.ts.map

package/dist/dev/define/ui/alert-dialog-description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-description.d.ts","names":[],"sources":["../../../../src/define/ui/alert-dialog-description.ts"],"mappings":";;;QAKQ,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,6BAAA,CAA8B,OAAA,GAAU,6BAAA;EAAA;AAAA"}

package/dist/dev/define/ui/alert-dialog-description.js

@@ -0,0 +1,8 @@
+import { AlertDialogDescriptionElement } from "../../ui/alert-dialog/alert-dialog-description-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/ui/alert-dialog-description.ts
+safeDefine(AlertDialogDescriptionElement);
+
+//#endregion
+//# sourceMappingURL=alert-dialog-description.js.map

package/dist/dev/define/ui/alert-dialog-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-description.js","names":[],"sources":["../../../../src/define/ui/alert-dialog-description.ts"],"sourcesContent":["import { AlertDialogDescriptionElement } from '../../ui/alert-dialog/alert-dialog-description-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(AlertDialogDescriptionElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AlertDialogDescriptionElement.tagName]: AlertDialogDescriptionElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,8BAA8B"}

package/dist/dev/define/ui/alert-dialog-title.d.ts

@@ -0,0 +1,9 @@
+import { AlertDialogTitleElement } from "../../ui/alert-dialog/alert-dialog-title-element.js";
+
+//#region src/define/ui/alert-dialog-title.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [AlertDialogTitleElement.tagName]: AlertDialogTitleElement;
+  }
+} //# sourceMappingURL=alert-dialog-title.d.ts.map
+//# sourceMappingURL=alert-dialog-title.d.ts.map

package/dist/dev/define/ui/alert-dialog-title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-title.d.ts","names":[],"sources":["../../../../src/define/ui/alert-dialog-title.ts"],"mappings":";;;QAKQ,MAAA;EAAA,UACI,qBAAA;IAAA,CACP,uBAAA,CAAwB,OAAA,GAAU,uBAAA;EAAA;AAAA"}

package/dist/dev/define/ui/alert-dialog-title.js

@@ -0,0 +1,8 @@
+import { AlertDialogTitleElement } from "../../ui/alert-dialog/alert-dialog-title-element.js";
+import { safeDefine } from "../safe-define.js";
+
+//#region src/define/ui/alert-dialog-title.ts
+safeDefine(AlertDialogTitleElement);
+
+//#endregion
+//# sourceMappingURL=alert-dialog-title.js.map

package/dist/dev/define/ui/alert-dialog-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-title.js","names":[],"sources":["../../../../src/define/ui/alert-dialog-title.ts"],"sourcesContent":["import { AlertDialogTitleElement } from '../../ui/alert-dialog/alert-dialog-title-element';\nimport { safeDefine } from '../safe-define';\n\nsafeDefine(AlertDialogTitleElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [AlertDialogTitleElement.tagName]: AlertDialogTitleElement;\n  }\n}\n"],"mappings":";;;;AAGA,WAAW,wBAAwB"}

package/dist/dev/define/ui/alert-dialog.d.ts

@@ -0,0 +1,15 @@
+import { AlertDialogCloseElement } from "../../ui/alert-dialog/alert-dialog-close-element.js";
+import { AlertDialogDescriptionElement } from "../../ui/alert-dialog/alert-dialog-description-element.js";
+import { AlertDialogElement } from "../../ui/alert-dialog/alert-dialog-element.js";
+import { AlertDialogTitleElement } from "../../ui/alert-dialog/alert-dialog-title-element.js";
+
+//#region src/define/ui/alert-dialog.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [AlertDialogElement.tagName]: AlertDialogElement;
+    [AlertDialogCloseElement.tagName]: AlertDialogCloseElement;
+    [AlertDialogDescriptionElement.tagName]: AlertDialogDescriptionElement;
+    [AlertDialogTitleElement.tagName]: AlertDialogTitleElement;
+  }
+} //# sourceMappingURL=alert-dialog.d.ts.map
+//# sourceMappingURL=alert-dialog.d.ts.map