@videojs/html 10.0.0-rc.4 → 10.0.0-rc.5

package/dist/dev/ui/thumbnail/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#core","#shadow","#fallback","#children","#imageAttributes","#textTracks","#externalThumbnails","#api","#img","#slots","#adopt","#thumbnails","#lastTextTrack","#applyImageAttributes","#applySource","#resetStyles","#applyResize","#inheritedCrossOrigin","#authored"],"sources":["../../../../src/ui/thumbnail/element.ts"],"sourcesContent":["import {\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';\nimport type { MediaTextTrackState } from '@videojs/media';\nimport { findComposedElement, isHTMLImageElement, listen } from '@videojs/utils/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg,\n::slotted(img) {\n  display: block;\n}`;\n\n/**\n * Image attributes the element fills in from its own properties. Ones already on an image when it is adopted are the\n * author's and are left alone, so an `<img slot=\"thumbnail\" loading=\"lazy\">` keeps its settings inside a skin.\n */\nconst IMAGE_ATTRIBUTES = ['crossorigin', 'loading', 'fetchpriority'] as const;\n\ntype ImageAttribute = (typeof IMAGE_ATTRIBUTES)[number];\n\n/** The image the element draws when none is supplied, reachable from outside as `::part(image)`. */\nfunction createFallbackImage(): HTMLImageElement {\n  const img = document.createElement('img');\n\n  img.alt = '';\n  img.setAttribute('part', 'image');\n  img.setAttribute('aria-hidden', 'true');\n  img.setAttribute('decoding', 'async');\n\n  return img;\n}\n\n/**\n * `<media-thumbnail>` — resolves and sizes a time-based thumbnail into an image.\n *\n * The element owns `src` and `srcset` on the active image. Left empty, it draws an image of its own in its shadow root.\n * Supply an `<img>` child instead — `<media-thumbnail time=\"12\"><img alt=\"\"></media-thumbnail>` — to compose overlays\n * or loading indicators beside the image the element controls. Any `crossorigin`, `loading`, or `fetchpriority` the\n * child already carries wins over the element's own; the rest are filled in. Inside a skin, an `<img slot=\"thumbnail\">`\n * of yours replaces the one the skin carries.\n */\nexport class ThumbnailElement extends UIElement {\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<Exclude<keyof ThumbnailCore.Props, 'thumbnails'>>;\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 #shadow = this.attachShadow({ mode: 'open' });\n  readonly #fallback = createFallbackImage();\n  readonly #children = new MutationObserver(() => this.requestUpdate());\n  // An image assigned through a forwarding slot lives outside this subtree, so its\n  // attributes are watched on the image itself.\n  readonly #imageAttributes = new MutationObserver(() => this.requestUpdate());\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #slots: AbortController | null = null;\n  #img: HTMLImageElement | null = null;\n  /** Attributes `#img` already carried when adopted, which the author owns. */\n  #authored = new Set<ImageAttribute>();\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const style = document.createElement('style');\n\n    style.textContent = SHADOW_CSS;\n    this.#shadow.append(style, document.createElement('slot'), this.#fallback);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection. When set, this takes priority over the\n   * 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    if (this.destroyed) return;\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n    this.#children.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['src', 'srcset'],\n    });\n\n    // Nodes assigned to a forwarding slot are not children of this subtree, so an image slotted\n    // in later never shows up as a mutation. The slot announces it with `slotchange` instead.\n    this.#slots = new AbortController();\n    listen(this, 'slotchange', () => this.requestUpdate(), { signal: this.#slots.signal });\n\n    // Disconnecting let go of the image, and reconnecting alone schedules no update,\n    // so a moved element adopts its image and reapplies the source here.\n    this.requestUpdate();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.#adopt(null);\n    this.#children.disconnect();\n    this.#slots?.abort();\n    this.#slots = null;\n    this.#api?.destroy();\n    this.#api = null;\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    const textTrack = this.#textTracks.value;\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else 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    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n    const img = findComposedElement(this, isHTMLImageElement) ?? this.#fallback;\n\n    this.#adopt(img);\n    this.#applyImageAttributes(img, textTrack);\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n    this.#applySource(thumbnail?.url);\n    this.#api?.connect();\n\n    if (!thumbnail) {\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n\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  /**\n   * Leaving `crossOrigin` unset means \"follow the media element\", so thumbnails keep working on a CORS-enabled player\n   * without a skin having to thread an attribute through. Only the `<track>` path inherits: `thumbnails` set directly\n   * may point at a host that has nothing to do with the media element.\n   */\n  #inheritedCrossOrigin(textTrack: MediaTextTrackState | undefined): ThumbnailCore.Props['crossOrigin'] {\n    return this.#externalThumbnails ? undefined : textTrack?.thumbnailTrackCrossOrigin;\n  }\n\n  /** Sync image attributes from element properties, leaving the ones the author put on the image alone. */\n  #applyImageAttributes(img: HTMLImageElement, textTrack: MediaTextTrackState | undefined): void {\n    const props: Partial<Record<ImageAttribute, string | undefined>> = {\n      crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    };\n\n    for (const name of this.#authored) delete props[name];\n\n    applyElementProps(img, props);\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    if (!imgStyle) return;\n\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    if (!imgStyle) return;\n\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n\n  #adopt(next: HTMLImageElement | null): void {\n    if (next === this.#img) return;\n\n    const previous = this.#img;\n\n    if (previous) {\n      this.#api?.disconnectImg(previous);\n      this.#resetStyles();\n      previous.removeAttribute('src');\n      previous.removeAttribute('srcset');\n\n      for (const name of IMAGE_ATTRIBUTES) {\n        if (!this.#authored.has(name)) previous.removeAttribute(name);\n      }\n    }\n\n    // Ownership is settled once, when an image becomes active: after the first\n    // sync the attributes we set would themselves look authored.\n    this.#img = next;\n    this.#authored = new Set(next ? IMAGE_ATTRIBUTES.filter((name) => next.hasAttribute(name)) : []);\n    this.#imageAttributes.disconnect();\n\n    if (next && next !== this.#fallback) {\n      this.#imageAttributes.observe(next, { attributes: true, attributeFilter: ['src', 'srcset'] });\n    }\n\n    // The fallback only occupies the shadow root while it is the active image,\n    // so a supplied image never sits beside a hidden one.\n    if (next === this.#fallback) this.#shadow.append(this.#fallback);\n    else if (next) this.#fallback.remove();\n\n    // Reset the request even when the next image will receive the same URL. A\n    // replacement image is a new download with its own lifecycle.\n    this.#api?.updateSrc(undefined);\n  }\n\n  #applySource(src: string | undefined): void {\n    const img = this.#img;\n    if (!img) return;\n\n    // A srcset candidate wins over src, so the root has to clear both parts of\n    // the source contract before applying the selected thumbnail URL.\n    img.removeAttribute('srcset');\n\n    if (!src) img.removeAttribute('src');\n    else if (img.getAttribute('src') !== src) img.setAttribute('src', src);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/thumbnail/element.ts"],"sourcesContent":["import {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailImage,\n  type ThumbnailResizeResult,\n  type ThumbnailImageProps,\n  type ThumbnailProps,\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';\nimport type { MediaTextTrackState } from '@videojs/media';\nimport { findComposedElement, isHTMLImageElement, listen } from '@videojs/utils/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg,\n::slotted(img) {\n  display: block;\n}`;\n\n/**\n * Image attributes the element fills in from its own properties. Ones already on an image when it is adopted are the\n * author's and are left alone, so an `<img slot=\"thumbnail\" loading=\"lazy\">` keeps its settings inside a skin.\n */\nconst IMAGE_ATTRIBUTES = ['crossorigin', 'loading', 'fetchpriority'] as const;\n\ntype ImageAttribute = (typeof IMAGE_ATTRIBUTES)[number];\n\n/** The image the element draws when none is supplied, reachable from outside as `::part(image)`. */\nfunction createFallbackImage(): HTMLImageElement {\n  const img = document.createElement('img');\n\n  img.alt = '';\n  img.setAttribute('part', 'image');\n  img.setAttribute('aria-hidden', 'true');\n  img.setAttribute('decoding', 'async');\n\n  return img;\n}\n\n/**\n * `<media-thumbnail>` — resolves and sizes a time-based thumbnail into an image.\n *\n * The element owns `src` and `srcset` on the active image. Left empty, it draws an image of its own in its shadow root.\n * Supply an `<img>` child instead — `<media-thumbnail time=\"12\"><img alt=\"\"></media-thumbnail>` — to compose overlays\n * or loading indicators beside the image the element controls. Any `crossorigin`, `loading`, or `fetchpriority` the\n * child already carries wins over the element's own; the rest are filled in. Inside a skin, an `<img slot=\"thumbnail\">`\n * of yours replaces the one the skin carries.\n */\nexport class ThumbnailElement extends UIElement {\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<Exclude<keyof (ThumbnailProps & ThumbnailImageProps), 'thumbnails'>>;\n\n  time = 0;\n  crossOrigin: (ThumbnailProps & ThumbnailImageProps)['crossOrigin'];\n  loading: (ThumbnailProps & ThumbnailImageProps)['loading'];\n  fetchPriority: (ThumbnailProps & ThumbnailImageProps)['fetchPriority'];\n\n  readonly #core = new ThumbnailCore();\n  readonly #shadow = this.attachShadow({ mode: 'open' });\n  readonly #fallback = createFallbackImage();\n  readonly #children = new MutationObserver(() => this.requestUpdate());\n  // An image assigned through a forwarding slot lives outside this subtree, so its\n  // attributes are watched on the image itself.\n  readonly #imageAttributes = new MutationObserver(() => this.requestUpdate());\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #slots: AbortController | null = null;\n  #img: HTMLImageElement | null = null;\n  /** Attributes `#img` already carried when adopted, which the author owns. */\n  #authored = new Set<ImageAttribute>();\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const style = document.createElement('style');\n\n    style.textContent = SHADOW_CSS;\n    this.#shadow.append(style, document.createElement('slot'), this.#fallback);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection. When set, this takes priority over the\n   * 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    if (this.destroyed) return;\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n    this.#children.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['src', 'srcset'],\n    });\n\n    // Nodes assigned to a forwarding slot are not children of this subtree, so an image slotted\n    // in later never shows up as a mutation. The slot announces it with `slotchange` instead.\n    this.#slots = new AbortController();\n    listen(this, 'slotchange', () => this.requestUpdate(), { signal: this.#slots.signal });\n\n    // Disconnecting let go of the image, and reconnecting alone schedules no update,\n    // so a moved element adopts its image and reapplies the source here.\n    this.requestUpdate();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.#adopt(null);\n    this.#children.disconnect();\n    this.#slots?.abort();\n    this.#slots = null;\n    this.#api?.destroy();\n    this.#api = null;\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    const textTrack = this.#textTracks.value;\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else if (textTrack !== this.#lastTextTrack) {\n      this.#lastTextTrack = textTrack;\n      const thumbnailsTrack = textTrack?.thumbnailsTrack;\n\n      this.#thumbnails =\n        thumbnailsTrack && thumbnailsTrack.cues.length > 0\n          ? mapCuesToThumbnails(thumbnailsTrack.cues, thumbnailsTrack.src ?? undefined)\n          : [];\n    }\n\n    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n    const img = findComposedElement(this, isHTMLImageElement) ?? this.#fallback;\n\n    this.#adopt(img);\n    this.#applyImageAttributes(img, textTrack);\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n    this.#applySource(thumbnail?.url);\n    this.#api?.connect();\n\n    if (!thumbnail) {\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n\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  /**\n   * Leaving `crossOrigin` unset means \"follow the media element\", so thumbnails keep working on a CORS-enabled player\n   * without a skin having to thread an attribute through. Only the `<track>` path inherits: `thumbnails` set directly\n   * may point at a host that has nothing to do with the media element.\n   */\n  #inheritedCrossOrigin(\n    textTrack: MediaTextTrackState | undefined\n  ): (ThumbnailProps & ThumbnailImageProps)['crossOrigin'] {\n    return this.#externalThumbnails ? undefined : textTrack?.thumbnailsTrack?.crossOrigin;\n  }\n\n  /** Sync image attributes from element properties, leaving the ones the author put on the image alone. */\n  #applyImageAttributes(img: HTMLImageElement, textTrack: MediaTextTrackState | undefined): void {\n    const props: Partial<Record<ImageAttribute, string | undefined>> = {\n      crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    };\n\n    for (const name of this.#authored) delete props[name];\n\n    applyElementProps(img, props);\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    if (!imgStyle) return;\n\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    if (!imgStyle) return;\n\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n\n  #adopt(next: HTMLImageElement | null): void {\n    if (next === this.#img) return;\n\n    const previous = this.#img;\n\n    if (previous) {\n      this.#api?.disconnectImg(previous);\n      this.#resetStyles();\n      previous.removeAttribute('src');\n      previous.removeAttribute('srcset');\n\n      for (const name of IMAGE_ATTRIBUTES) {\n        if (!this.#authored.has(name)) previous.removeAttribute(name);\n      }\n    }\n\n    // Ownership is settled once, when an image becomes active: after the first\n    // sync the attributes we set would themselves look authored.\n    this.#img = next;\n    this.#authored = new Set(next ? IMAGE_ATTRIBUTES.filter((name) => next.hasAttribute(name)) : []);\n    this.#imageAttributes.disconnect();\n\n    if (next && next !== this.#fallback) {\n      this.#imageAttributes.observe(next, { attributes: true, attributeFilter: ['src', 'srcset'] });\n    }\n\n    // The fallback only occupies the shadow root while it is the active image,\n    // so a supplied image never sits beside a hidden one.\n    if (next === this.#fallback) this.#shadow.append(this.#fallback);\n    else if (next) this.#fallback.remove();\n\n    // Reset the request even when the next image will receive the same URL. A\n    // replacement image is a new download with its own lifecycle.\n    this.#api?.updateSrc(undefined);\n  }\n\n  #applySource(src: string | undefined): void {\n    const img = this.#img;\n    if (!img) return;\n\n    // A srcset candidate wins over src, so the root has to clear both parts of\n    // the source contract before applying the selected thumbnail URL.\n    img.removeAttribute('srcset');\n\n    if (!src) img.removeAttribute('src');\n    else if (img.getAttribute('src') !== src) img.setAttribute('src', src);\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/time/element.d.ts

@@ -3,7 +3,7 @@ import { TimeType } from "@videojs/core";
 import { PropertyValues } from "@videojs/element";
 import { Text } from "@videojs/core/i18n";
 //#region src/ui/time/element.d.ts
-declare class TimeElement extends UIElement {
+export declare class TimeElement extends UIElement {
   #private;
   static readonly tagName = "media-time";
   static properties: {
@@ -31,5 +31,4 @@ declare class TimeElement extends UIElement {
   protected update(changed: PropertyValues): void;
 }
 //#endregion
-export { TimeElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/time/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#state","#hasTimeRange","#toggleType","#core","#buffer","#i18n","#signSpan","#textNode","#disconnect","#syncListeners","#listening","#activeType","#clearAttrs","#getLabelParams","#handleClick","#handleKeyDown"],"sources":["../../../../src/ui/time/element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport { durationSuffixText, elapsedSuffixText, remainingSuffixText } from '@videojs/core/i18n/text/time';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { hasTimeRange } from '@videojs/media';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { formatTimeAsPhrase } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nexport class TimeElement extends UIElement {\n  static readonly tagName = 'media-time';\n\n  static override properties = {\n    type: { type: String },\n    negativeSign: { type: String, attribute: 'negative-sign' },\n    label: { type: String },\n    toggle: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof TimeCore.Props>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label: Text | string = '';\n  toggle = TimeCore.defaultProps.toggle;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n  readonly #buffer = new PlayerController(this, playerContext, selectBuffer);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = new Text();\n\n  #disconnect: AbortController | null = null;\n  #listening = false;\n  #activeType: TimeType = TimeCore.defaultProps.type;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n    this.#syncListeners();\n\n    if (!this.#signSpan.parentNode) {\n      this.#signSpan.setAttribute('aria-hidden', 'true');\n      this.#signSpan.hidden = true;\n      this.append(this.#signSpan, this.#textNode);\n    }\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    this.#listening = false;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    if (changed.has('type') || changed.has('toggle')) {\n      this.#activeType = this.type;\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    if (changed.has('toggle')) {\n      this.#syncListeners();\n    }\n\n    const media = this.#state.value;\n\n    if (!media) {\n      this.#clearAttrs();\n      return;\n    }\n\n    this.#core.setProps({\n      type: this.toggle ? this.#activeType : this.type,\n      negativeSign: this.negativeSign,\n      label: this.label,\n      toggle: this.toggle,\n    });\n    this.#core.setMedia({ ...media, seekable: this.#buffer.value?.seekable ?? [] });\n    this.#core.setFormatLocale(this.#i18n.locale);\n    const state = this.#core.getState();\n\n    this.#signSpan.hidden = !state.negative;\n    this.#signSpan.textContent = state.negative ? this.negativeSign : '';\n    this.#textNode.textContent = state.text;\n\n    const attrs = this.#core.getAttrs(state, this.type);\n    const label = translateText(attrs['aria-label'], this.#i18n.value, this.#getLabelParams(state));\n    const description = attrs['aria-description']\n      ? translateText(attrs['aria-description'], this.#i18n.value)\n      : undefined;\n\n    applyElementProps(this, {\n      'aria-label': label,\n      'aria-description': description,\n      'aria-disabled': attrs['aria-disabled'],\n      role: this.toggle ? attrs.role : 'time',\n      tabIndex: attrs.tabIndex,\n      datetime: this.toggle || state.unavailable ? undefined : state.datetime,\n    });\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n\n  #getLabelParams(state: TimeCore.State): { duration: string } | undefined {\n    const params = this.#core.getLabelParams(state);\n    if (!params) return undefined;\n\n    const duration = formatTimeAsPhrase(Math.abs(state.seconds), { locale: this.#i18n.locale });\n\n    const text = {\n      current: elapsedSuffixText,\n      duration: durationSuffixText,\n      remaining: remainingSuffixText,\n    }[state.type];\n\n    return { duration: translateText(text, this.#i18n.value, { duration }) };\n  }\n\n  #handleClick = (event: MouseEvent): void => {\n    if (event.defaultPrevented || !this.toggle || !this.#state.value || !this.#hasTimeRange()) return;\n\n    this.#toggleType();\n  };\n\n  #handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented || !isInteractiveActivation(event)) return;\n\n    if (!this.toggle || !this.#state.value || !this.#hasTimeRange()) return;\n\n    // Prevent space from scrolling page.\n    event.preventDefault();\n\n    if (event.repeat) return;\n\n    this.#toggleType();\n  };\n\n  #toggleType(): void {\n    if (this.type === 'current') {\n      this.#activeType = this.#activeType === 'remaining' ? 'current' : 'remaining';\n    } else {\n      this.#activeType = this.#activeType === 'duration' ? 'remaining' : 'duration';\n    }\n\n    this.requestUpdate();\n  }\n\n  #hasTimeRange(): boolean {\n    const media = this.#state.value;\n    if (!media) return false;\n\n    return hasTimeRange({ ...media, seekable: this.#buffer.value?.seekable ?? [] });\n  }\n\n  #syncListeners(): void {\n    if (!this.toggle || !this.#disconnect || this.#listening) return;\n\n    this.#listening = true;\n    applyElementProps(\n      this,\n      {\n        onClick: this.#handleClick,\n        onKeyDown: this.#handleKeyDown,\n      },\n      { signal: this.#disconnect.signal }\n    );\n  }\n\n  #clearAttrs(): void {\n    applyElementProps(this, {\n      'aria-label': undefined,\n      'aria-description': undefined,\n      'aria-disabled': undefined,\n      role: undefined,\n      tabIndex: undefined,\n      datetime: undefined,\n      'data-type': undefined,\n      'data-disabled': undefined,\n      'data-unavailable': undefined,\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/time/element.ts"],"sourcesContent":["import { TimeCore, TimeDataAttrs, type TimeType, type TimeProps, type TimeState } from '@videojs/core';\nimport { applyElementProps, applyStateDataAttrs, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport { durationSuffixText, elapsedSuffixText, remainingSuffixText } from '@videojs/core/i18n/text/time';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { hasTimeRange } from '@videojs/media';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { formatTimeAsPhrase } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\nexport class TimeElement extends UIElement {\n  static readonly tagName = 'media-time';\n\n  static override properties = {\n    type: { type: String },\n    negativeSign: { type: String, attribute: 'negative-sign' },\n    label: { type: String },\n    toggle: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof TimeProps>;\n\n  type: TimeType = TimeCore.defaultProps.type;\n  negativeSign = TimeCore.defaultProps.negativeSign;\n  label: Text | string = '';\n  toggle = TimeCore.defaultProps.toggle;\n\n  readonly #core = new TimeCore();\n  readonly #state = new PlayerController(this, playerContext, selectTime);\n  readonly #buffer = new PlayerController(this, playerContext, selectBuffer);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  readonly #signSpan = document.createElement('span');\n  readonly #textNode = new Text();\n\n  #disconnect: AbortController | null = null;\n  #listening = false;\n  #activeType: TimeType = TimeCore.defaultProps.type;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n    this.#syncListeners();\n\n    if (!this.#signSpan.parentNode) {\n      this.#signSpan.setAttribute('aria-hidden', 'true');\n      this.#signSpan.hidden = true;\n      this.append(this.#signSpan, this.#textNode);\n    }\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    this.#listening = false;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    if (changed.has('type') || changed.has('toggle')) {\n      this.#activeType = this.type;\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    if (changed.has('toggle')) {\n      this.#syncListeners();\n    }\n\n    const media = this.#state.value;\n\n    if (!media) {\n      this.#clearAttrs();\n      return;\n    }\n\n    this.#core.setProps({\n      type: this.toggle ? this.#activeType : this.type,\n      negativeSign: this.negativeSign,\n      label: this.label,\n      toggle: this.toggle,\n    });\n    this.#core.setMedia({ ...media, seekable: this.#buffer.value?.seekable ?? [] });\n    this.#core.setFormatLocale(this.#i18n.locale);\n    const state = this.#core.getState();\n\n    this.#signSpan.hidden = !state.negative;\n    this.#signSpan.textContent = state.negative ? this.negativeSign : '';\n    this.#textNode.textContent = state.text;\n\n    const attrs = this.#core.getAttrs(state, this.type);\n    const label = translateText(attrs['aria-label'], this.#i18n.value, this.#getLabelParams(state));\n    const description = attrs['aria-description']\n      ? translateText(attrs['aria-description'], this.#i18n.value)\n      : undefined;\n\n    applyElementProps(this, {\n      'aria-label': label,\n      'aria-description': description,\n      'aria-disabled': attrs['aria-disabled'],\n      role: this.toggle ? attrs.role : 'time',\n      tabIndex: attrs.tabIndex,\n      datetime: this.toggle || state.unavailable ? undefined : state.datetime,\n    });\n    applyStateDataAttrs(this, state, TimeDataAttrs);\n  }\n\n  #getLabelParams(state: TimeState): { duration: string } | undefined {\n    const params = this.#core.getLabelParams(state);\n    if (!params) return undefined;\n\n    const duration = formatTimeAsPhrase(Math.abs(state.seconds), { locale: this.#i18n.locale });\n\n    const text = {\n      current: elapsedSuffixText,\n      duration: durationSuffixText,\n      remaining: remainingSuffixText,\n    }[state.type];\n\n    return { duration: translateText(text, this.#i18n.value, { duration }) };\n  }\n\n  #handleClick = (event: MouseEvent): void => {\n    if (event.defaultPrevented || !this.toggle || !this.#state.value || !this.#hasTimeRange()) return;\n\n    this.#toggleType();\n  };\n\n  #handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.defaultPrevented || !isInteractiveActivation(event)) return;\n\n    if (!this.toggle || !this.#state.value || !this.#hasTimeRange()) return;\n\n    // Prevent space from scrolling page.\n    event.preventDefault();\n\n    if (event.repeat) return;\n\n    this.#toggleType();\n  };\n\n  #toggleType(): void {\n    if (this.type === 'current') {\n      this.#activeType = this.#activeType === 'remaining' ? 'current' : 'remaining';\n    } else {\n      this.#activeType = this.#activeType === 'duration' ? 'remaining' : 'duration';\n    }\n\n    this.requestUpdate();\n  }\n\n  #hasTimeRange(): boolean {\n    const media = this.#state.value;\n    if (!media) return false;\n\n    return hasTimeRange({ ...media, seekable: this.#buffer.value?.seekable ?? [] });\n  }\n\n  #syncListeners(): void {\n    if (!this.toggle || !this.#disconnect || this.#listening) return;\n\n    this.#listening = true;\n    applyElementProps(\n      this,\n      {\n        onClick: this.#handleClick,\n        onKeyDown: this.#handleKeyDown,\n      },\n      { signal: this.#disconnect.signal }\n    );\n  }\n\n  #clearAttrs(): void {\n    applyElementProps(this, {\n      'aria-label': undefined,\n      'aria-description': undefined,\n      'aria-disabled': undefined,\n      role: undefined,\n      tabIndex: undefined,\n      datetime: undefined,\n      'data-type': undefined,\n      'data-disabled': undefined,\n      'data-unavailable': undefined,\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/time/group.d.ts

@@ -1,9 +1,8 @@
 import { UIElement } from "../ui-element.js";
 //#region src/ui/time/group.d.ts
 /** Container for composed `<media-time>` and `<media-time-separator>` displays. */
-declare class TimeGroupElement extends UIElement {
+export declare class TimeGroupElement extends UIElement {
   static readonly tagName = "media-time-group";
 }
 //#endregion
-export { TimeGroupElement };
 //# sourceMappingURL=group.d.ts.map

package/dist/dev/ui/time/separator.d.ts

@@ -1,9 +1,8 @@
 import { UIElement } from "../ui-element.js";
 //#region src/ui/time/separator.d.ts
-declare class TimeSeparatorElement extends UIElement {
+export declare class TimeSeparatorElement extends UIElement {
   static readonly tagName = "media-time-separator";
   connectedCallback(): void;
 }
 //#endregion
-export { TimeSeparatorElement };
 //# sourceMappingURL=separator.d.ts.map

package/dist/dev/ui/time-slider/chapter-title.d.ts

@@ -2,11 +2,10 @@ import { UIElement } from "../ui-element.js";
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/time-slider/chapter-title.d.ts
 /** Displays the chapter title at the current pointer or keyboard position. */
-declare class TimeSliderChapterTitleElement extends UIElement {
+export declare class TimeSliderChapterTitleElement extends UIElement {
   #private;
   static readonly tagName = "media-time-slider-chapter-title";
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { TimeSliderChapterTitleElement };
 //# sourceMappingURL=chapter-title.d.ts.map

package/dist/dev/ui/time-slider/chapter-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"chapter-title.js","names":["#core","#slider","#textTrack","#time"],"sources":["../../../../src/ui/time-slider/chapter-title.ts"],"sourcesContent":["import { TimeSliderChaptersCore } from '@videojs/core';\nimport { selectTextTrack, selectTime } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/** Displays the chapter title at the current pointer or keyboard position. */\nexport class TimeSliderChapterTitleElement extends UIElement {\n  static readonly tagName = 'media-time-slider-chapter-title';\n\n  readonly #core = new TimeSliderChaptersCore();\n  readonly #slider = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n  readonly #textTrack = new PlayerController(this, playerContext, selectTextTrack);\n  readonly #time = new PlayerController(this, playerContext, selectTime);\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const slider = this.#slider.value;\n    if (!slider) return;\n\n    const duration = this.#time.value?.duration ?? 0;\n    const { chapters } = this.#core.getRanges(this.#textTrack.value?.chaptersCues ?? [], 0, duration);\n\n    const keyboard = slider.state.interactive && !slider.state.pointing && !slider.state.dragging;\n    const value = slider.state.pointing || slider.state.dragging ? slider.pointerValue : slider.state.value;\n    const chapter = this.#core.findChapter(chapters, value);\n\n    this.textContent = chapter?.cue?.text ?? '';\n\n    if (keyboard) {\n      this.removeAttribute('aria-hidden');\n      this.setAttribute('aria-live', 'polite');\n    } else {\n      this.setAttribute('aria-hidden', 'true');\n      this.removeAttribute('aria-live');\n    }\n  }\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,gCAAb,cAAmD,UAAU;;EACjC,KAAA,UAAA;;CAE1B,QAAiB,IAAI,uBAAuB;CAC5C,UAAmB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAe,WAAW;CAAK,CAAC;CACxF,aAAsB,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAC/E,QAAiB,IAAI,iBAAiB,MAAM,eAAe,UAAU;CAErE,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,SAAS,KAAKC,QAAQ;EAC5B,IAAI,CAAC,QAAQ;EAEb,MAAM,WAAW,KAAKE,MAAM,OAAO,YAAY;EAC/C,MAAM,EAAE,aAAa,KAAKH,MAAM,UAAU,KAAKE,WAAW,OAAO,gBAAgB,CAAC,GAAG,GAAG,QAAQ;EAEhG,MAAM,WAAW,OAAO,MAAM,eAAe,CAAC,OAAO,MAAM,YAAY,CAAC,OAAO,MAAM;EACrF,MAAM,QAAQ,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,OAAO,eAAe,OAAO,MAAM;EAClG,MAAM,UAAU,KAAKF,MAAM,YAAY,UAAU,KAAK;EAEtD,KAAK,cAAc,SAAS,KAAK,QAAQ;EAEzC,IAAI,UAAU;GACZ,KAAK,gBAAgB,aAAa;GAClC,KAAK,aAAa,aAAa,QAAQ;EACzC,OAAO;GACL,KAAK,aAAa,eAAe,MAAM;GACvC,KAAK,gBAAgB,WAAW;EAClC;CACF;AACF"}
+{"version":3,"file":"chapter-title.js","names":[],"sources":["../../../../src/ui/time-slider/chapter-title.ts"],"sourcesContent":["import { TimeSliderChaptersCore } from '@videojs/core';\nimport { selectTextTrack, selectTime } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/** Displays the chapter title at the current pointer or keyboard position. */\nexport class TimeSliderChapterTitleElement extends UIElement {\n  static readonly tagName = 'media-time-slider-chapter-title';\n\n  readonly #core = new TimeSliderChaptersCore();\n  readonly #slider = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n  readonly #textTrack = new PlayerController(this, playerContext, selectTextTrack);\n  readonly #time = new PlayerController(this, playerContext, selectTime);\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const slider = this.#slider.value;\n    if (!slider) return;\n\n    const duration = this.#time.value?.duration ?? 0;\n    const { chapters } = this.#core.getRanges(this.#textTrack.value?.chaptersCues ?? [], 0, duration);\n\n    const keyboard = slider.state.interactive && !slider.state.pointing && !slider.state.dragging;\n    const value = slider.state.pointing || slider.state.dragging ? slider.pointerValue : slider.state.value;\n    const chapter = this.#core.findChapter(chapters, value);\n\n    this.textContent = chapter?.cue?.text ?? '';\n\n    if (keyboard) {\n      this.removeAttribute('aria-hidden');\n      this.setAttribute('aria-live', 'polite');\n    } else {\n      this.setAttribute('aria-hidden', 'true');\n      this.removeAttribute('aria-live');\n    }\n  }\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,gCAAb,cAAmD,UAAU;;EACjC,KAAA,UAAA;;CAE1B,QAAiB,IAAI,uBAAuB;CAC5C,UAAmB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAe,WAAW;CAAK,CAAC;CACxF,aAAsB,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAC/E,QAAiB,IAAI,iBAAiB,MAAM,eAAe,UAAU;CAErE,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,SAAS,KAAK,QAAQ;EAC5B,IAAI,CAAC,QAAQ;EAEb,MAAM,WAAW,KAAK,MAAM,OAAO,YAAY;EAC/C,MAAM,EAAE,aAAa,KAAK,MAAM,UAAU,KAAK,WAAW,OAAO,gBAAgB,CAAC,GAAG,GAAG,QAAQ;EAEhG,MAAM,WAAW,OAAO,MAAM,eAAe,CAAC,OAAO,MAAM,YAAY,CAAC,OAAO,MAAM;EACrF,MAAM,QAAQ,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,OAAO,eAAe,OAAO,MAAM;EAClG,MAAM,UAAU,KAAK,MAAM,YAAY,UAAU,KAAK;EAEtD,KAAK,cAAc,SAAS,KAAK,QAAQ;EAEzC,IAAI,UAAU;GACZ,KAAK,gBAAgB,aAAa;GAClC,KAAK,aAAa,aAAa,QAAQ;EACzC,OAAO;GACL,KAAK,aAAa,eAAe,MAAM;GACvC,KAAK,gBAAgB,WAAW;EAClC;CACF;AACF"}

package/dist/dev/ui/time-slider/chapters.d.ts

@@ -7,12 +7,11 @@ import { PropertyValues } from "@videojs/element";
  * The required template must contain exactly one HTML root element. When no chapter cues are available, the template is
  * cloned once for a full-duration range.
  */
-declare class TimeSliderChaptersElement extends UIElement {
+export declare class TimeSliderChaptersElement extends UIElement {
   #private;
   static readonly tagName = "media-time-slider-chapters";
   connectedCallback(): void;
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { TimeSliderChaptersElement };
 //# sourceMappingURL=chapters.d.ts.map

package/dist/dev/ui/time-slider/chapters.js.map

@@ -1 +1 @@
-{"version":3,"file":"chapters.js","names":["#segments","#core","#slider","#textTrack","#buffer","#time","#rendered","#getTemplateRoot","#setStyle","#templateChecked","#templateRoot"],"sources":["../../../../src/ui/time-slider/chapters.ts"],"sourcesContent":["import {\n  SliderSegmentsCore,\n  TimeSliderChapterCSSVars,\n  TimeSliderChapterDataAttrs,\n  TimeSliderChaptersCore,\n} from '@videojs/core';\nimport { applyStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from '@videojs/utils/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * Clones a light-DOM template once per normalized chapter range.\n *\n * The required template must contain exactly one HTML root element. When no chapter cues are available, the template is\n * cloned once for a full-duration range.\n */\nexport class TimeSliderChaptersElement extends UIElement {\n  static readonly tagName = 'media-time-slider-chapters';\n\n  readonly #segments = new SliderSegmentsCore();\n  readonly #core = new TimeSliderChaptersCore();\n  readonly #slider = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n  readonly #textTrack = new PlayerController(this, playerContext, selectTextTrack);\n  readonly #buffer = new PlayerController(this, playerContext, selectBuffer);\n  readonly #time = new PlayerController(this, playerContext, selectTime);\n  readonly #rendered = new Map<string, HTMLElement>();\n  #templateRoot: HTMLElement | null = null;\n  #templateChecked = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const slider = this.#slider.value;\n    const duration = this.#time.value?.duration ?? 0;\n    const templateRoot = this.#getTemplateRoot();\n\n    if (!slider) return;\n\n    applyStateDataAttrs(this, slider.state, slider.stateAttrMap);\n\n    if (!templateRoot) return;\n\n    const { chapters, ranges, max } = this.#core.getRanges(this.#textTrack.value?.chaptersCues ?? [], 0, duration);\n\n    const geometry = this.#segments.getGeometry({\n      ranges,\n      min: 0,\n      max,\n      orientation: slider.state.orientation,\n    });\n\n    const buffered = this.#buffer.value?.buffered ?? [];\n    const bufferedEnd = buffered.length ? buffered[buffered.length - 1]![1] : 0;\n\n    const next = new Map<string, HTMLElement>();\n\n    for (const segment of geometry) {\n      const state = this.#core.getState(\n        this.#segments.getState(segment, slider.state, slider.pointerValue),\n        chapters,\n        bufferedEnd\n      );\n      let root = this.#rendered.get(state.key);\n\n      if (!root) root = cloneTemplateRoot(templateRoot, this.ownerDocument);\n\n      this.#setStyle(root, 'pointer-events', state.cue ? undefined : 'none');\n      this.#setStyle(root, TimeSliderChapterCSSVars.start, state.startPercent);\n      this.#setStyle(root, TimeSliderChapterCSSVars.end, state.endPercent);\n      this.#setStyle(root, TimeSliderChapterCSSVars.width, state.width ?? state.height);\n      this.#setStyle(root, TimeSliderChapterCSSVars.fill, `${state.fillPercent}%`);\n      this.#setStyle(root, TimeSliderChapterCSSVars.buffer, `${state.bufferPercent}%`);\n      applyStateDataAttrs(root, slider.state, slider.stateAttrMap);\n      applyStateDataAttrs(root, state, TimeSliderChapterDataAttrs);\n\n      next.set(state.key, root);\n    }\n\n    for (const [key, root] of this.#rendered) {\n      if (!next.has(key)) root.remove();\n    }\n\n    let before: ChildNode | null = null;\n\n    for (const root of [...next.values()].reverse()) {\n      if (root.parentNode !== this || root.nextSibling !== before) this.insertBefore(root, before);\n\n      before = root;\n    }\n\n    this.#rendered.clear();\n\n    for (const [key, rendered] of next) this.#rendered.set(key, rendered);\n  }\n\n  #getTemplateRoot(): HTMLElement | null {\n    if (this.#templateChecked) return this.#templateRoot;\n\n    const template = getTemplateElement(this);\n\n    if (!template) {\n      for (const node of [...this.childNodes]) node.remove();\n\n      return null;\n    }\n\n    this.#templateChecked = true;\n    const root = getTemplateRoot(template);\n\n    for (const node of [...this.childNodes]) {\n      if (node !== template) node.remove();\n    }\n\n    if (root?.namespaceURI !== 'http://www.w3.org/1999/xhtml') {\n      if (__DEV__) {\n        console.warn(`[${this.localName}] template must contain exactly one HTML root element.`);\n      }\n\n      return null;\n    }\n\n    this.#templateRoot = root as HTMLElement;\n    return this.#templateRoot;\n  }\n\n  #setStyle(element: HTMLElement, name: string, value: string | undefined): void {\n    if (value === undefined) element.style.removeProperty(name);\n    else element.style.setProperty(name, value);\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"chapters.js","names":[],"sources":["../../../../src/ui/time-slider/chapters.ts"],"sourcesContent":["import {\n  SliderSegmentsCore,\n  TimeSliderChapterCSSVars,\n  TimeSliderChapterDataAttrs,\n  TimeSliderChaptersCore,\n} from '@videojs/core';\nimport { applyStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { cloneTemplateRoot, getTemplateElement, getTemplateRoot } from '@videojs/utils/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * Clones a light-DOM template once per normalized chapter range.\n *\n * The required template must contain exactly one HTML root element. When no chapter cues are available, the template is\n * cloned once for a full-duration range.\n */\nexport class TimeSliderChaptersElement extends UIElement {\n  static readonly tagName = 'media-time-slider-chapters';\n\n  readonly #segments = new SliderSegmentsCore();\n  readonly #core = new TimeSliderChaptersCore();\n  readonly #slider = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n  readonly #textTrack = new PlayerController(this, playerContext, selectTextTrack);\n  readonly #buffer = new PlayerController(this, playerContext, selectBuffer);\n  readonly #time = new PlayerController(this, playerContext, selectTime);\n  readonly #rendered = new Map<string, HTMLElement>();\n  #templateRoot: HTMLElement | null = null;\n  #templateChecked = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-hidden', 'true');\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const slider = this.#slider.value;\n    const duration = this.#time.value?.duration ?? 0;\n    const templateRoot = this.#getTemplateRoot();\n\n    if (!slider) return;\n\n    applyStateDataAttrs(this, slider.state, slider.stateAttrMap);\n\n    if (!templateRoot) return;\n\n    const { chapters, ranges, max } = this.#core.getRanges(this.#textTrack.value?.chaptersCues ?? [], 0, duration);\n\n    const geometry = this.#segments.getGeometry({\n      ranges,\n      min: 0,\n      max,\n      orientation: slider.state.orientation,\n    });\n\n    const buffered = this.#buffer.value?.buffered ?? [];\n    const bufferedEnd = buffered.length ? buffered[buffered.length - 1]![1] : 0;\n\n    const next = new Map<string, HTMLElement>();\n\n    for (const segment of geometry) {\n      const state = this.#core.getState(\n        this.#segments.getState(segment, slider.state, slider.pointerValue),\n        chapters,\n        bufferedEnd\n      );\n      let root = this.#rendered.get(state.key);\n\n      if (!root) root = cloneTemplateRoot(templateRoot, this.ownerDocument);\n\n      this.#setStyle(root, 'pointer-events', state.cue ? undefined : 'none');\n      this.#setStyle(root, TimeSliderChapterCSSVars.start, state.startPercent);\n      this.#setStyle(root, TimeSliderChapterCSSVars.end, state.endPercent);\n      this.#setStyle(root, TimeSliderChapterCSSVars.width, state.width ?? state.height);\n      this.#setStyle(root, TimeSliderChapterCSSVars.fill, `${state.fillPercent}%`);\n      this.#setStyle(root, TimeSliderChapterCSSVars.buffer, `${state.bufferPercent}%`);\n      applyStateDataAttrs(root, slider.state, slider.stateAttrMap);\n      applyStateDataAttrs(root, state, TimeSliderChapterDataAttrs);\n\n      next.set(state.key, root);\n    }\n\n    for (const [key, root] of this.#rendered) {\n      if (!next.has(key)) root.remove();\n    }\n\n    let before: ChildNode | null = null;\n\n    for (const root of [...next.values()].reverse()) {\n      if (root.parentNode !== this || root.nextSibling !== before) this.insertBefore(root, before);\n\n      before = root;\n    }\n\n    this.#rendered.clear();\n\n    for (const [key, rendered] of next) this.#rendered.set(key, rendered);\n  }\n\n  #getTemplateRoot(): HTMLElement | null {\n    if (this.#templateChecked) return this.#templateRoot;\n\n    const template = getTemplateElement(this);\n\n    if (!template) {\n      for (const node of [...this.childNodes]) node.remove();\n\n      return null;\n    }\n\n    this.#templateChecked = true;\n    const root = getTemplateRoot(template);\n\n    for (const node of [...this.childNodes]) {\n      if (node !== template) node.remove();\n    }\n\n    if (root?.namespaceURI !== 'http://www.w3.org/1999/xhtml') {\n      if (__DEV__) {\n        console.warn(`[${this.localName}] template must contain exactly one HTML root element.`);\n      }\n\n      return null;\n    }\n\n    this.#templateRoot = root as HTMLElement;\n    return this.#templateRoot;\n  }\n\n  #setStyle(element: HTMLElement, name: string, value: string | undefined): void {\n    if (value === undefined) element.style.removeProperty(name);\n    else element.style.setProperty(name, value);\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/time-slider/element.d.ts

@@ -6,7 +6,7 @@ import { Text } from "@videojs/core/i18n";
  * @fires drag-start - Fired when a pointer drag starts.
  * @fires drag-end - Fired when a pointer drag ends.
  */
-declare class TimeSliderElement extends UIElement {
+export declare class TimeSliderElement extends UIElement {
   #private;
   static readonly tagName = "media-time-slider";
   static properties: {
@@ -54,5 +54,4 @@ declare class TimeSliderElement extends UIElement {
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { TimeSliderElement };
 //# sourceMappingURL=element.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#core","#controlsState","#provider","#timeState","#bufferState","#playbackState","#i18n","#disconnect","#slider","#releaseControlsLock","#releaseControlsVisibilityLock","#resumeIfDragPaused"],"sources":["../../../../src/ui/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  selectControls,\n  selectPlayback,\n  selectTime,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { hasTimeRange } from '@videojs/media';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class TimeSliderElement extends UIElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    changeThrottle: { type: Number, attribute: 'change-throttle' },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n    pauseOnDrag: { type: Boolean, attribute: 'pause-on-drag' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof TimeSliderCore.Props, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  changeThrottle = TimeSliderCore.defaultProps.changeThrottle;\n  step = TimeSliderCore.defaultProps.step;\n  largeStep = TimeSliderCore.defaultProps.largeStep;\n  orientation = TimeSliderCore.defaultProps.orientation;\n  disabled = TimeSliderCore.defaultProps.disabled;\n  thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;\n  pauseOnDrag = TimeSliderCore.defaultProps.pauseOnDrag;\n\n  readonly #core = new TimeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\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  readonly #playbackState = new PlayerController(this, playerContext, selectPlayback);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\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      isDisabled: () => {\n        const time = this.#timeState.value;\n        const buffer = this.#bufferState.value;\n\n        // `bufferFeature` is optional: compositions that omit it still get a working slider, with an empty buffer.\n        return this.disabled || !time || !hasTimeRange({ ...time, ...(buffer ?? { buffered: [], seekable: [] }) });\n      },\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\n\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\n        if (media) media.seek(this.#core.rawValueFromPercent(percent));\n      },\n      changeThrottle: this.changeThrottle,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.#core.startDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.#core.endDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#timeState.value) {\n      logMissingFeature(this.localName, this.#timeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  // createSlider's destroy() does not fire onDragEnd, so a teardown mid-drag\n  // would leave playback paused. Called from both disconnect and destroy paths\n  // before super so the PlayerController is still attached.\n  #resumeIfDragPaused(): void {\n    this.#core.endDrag(this.#playbackState.value);\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps({\n      label: this.label,\n      changeThrottle: this.changeThrottle,\n      step: this.step,\n      largeStep: this.largeStep,\n      orientation: this.orientation,\n      disabled: this.disabled,\n      thumbAlignment: this.thumbAlignment,\n      pauseOnDrag: this.pauseOnDrag,\n    });\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n\n    if (!time) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));\n    const thumbAttrs = this.#core.getAttrs(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.rawValueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration, { locale: this.#i18n.locale }),\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/time-slider/element.ts"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs, type TimeSliderProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getTimeSliderCSSVars,\n  logMissingFeature,\n  type SliderApi,\n  selectBuffer,\n  selectControls,\n  selectPlayback,\n  selectTime,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { hasTimeRange } from '@videojs/media';\nimport { applyStyles } from '@videojs/utils/dom';\nimport { formatTime } from '@videojs/utils/time';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { sliderContext } from '../slider/context';\nimport { UIElement } from '../ui-element';\n\n/**\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class TimeSliderElement extends UIElement {\n  static readonly tagName = 'media-time-slider';\n\n  static override properties = {\n    label: { type: String },\n    changeThrottle: { type: Number, attribute: 'change-throttle' },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n    pauseOnDrag: { type: Boolean, attribute: 'pause-on-drag' },\n  } satisfies PropertyDeclarationMap<Exclude<keyof TimeSliderProps, 'value' | 'min' | 'max'>>;\n\n  label: Text | string = '';\n  changeThrottle = TimeSliderCore.defaultProps.changeThrottle;\n  step = TimeSliderCore.defaultProps.step;\n  largeStep = TimeSliderCore.defaultProps.largeStep;\n  orientation = TimeSliderCore.defaultProps.orientation;\n  disabled = TimeSliderCore.defaultProps.disabled;\n  thumbAlignment = TimeSliderCore.defaultProps.thumbAlignment;\n  pauseOnDrag = TimeSliderCore.defaultProps.pauseOnDrag;\n\n  readonly #core = new TimeSliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\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  readonly #playbackState = new PlayerController(this, playerContext, selectPlayback);\n  readonly #i18n = new I18nController(this, i18nContext);\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n  #releaseControlsLock: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\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      isDisabled: () => {\n        const time = this.#timeState.value;\n        const buffer = this.#bufferState.value;\n\n        // `bufferFeature` is optional: compositions that omit it still get a working slider, with an empty buffer.\n        return this.disabled || !time || !hasTimeRange({ ...time, ...(buffer ?? { buffered: [], seekable: [] }) });\n      },\n      getPercent: () => {\n        const media = this.#timeState.value;\n        if (!media) return 0;\n\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\n        if (media) media.seek(this.#core.rawValueFromPercent(percent));\n      },\n      changeThrottle: this.changeThrottle,\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.#core.startDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.#core.endDrag(this.#playbackState.value);\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    if (__DEV__ && !this.#timeState.value) {\n      logMissingFeature(this.localName, this.#timeState.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#resumeIfDragPaused();\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  // createSlider's destroy() does not fire onDragEnd, so a teardown mid-drag\n  // would leave playback paused. Called from both disconnect and destroy paths\n  // before super so the PlayerController is still attached.\n  #resumeIfDragPaused(): void {\n    this.#core.endDrag(this.#playbackState.value);\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps({\n      label: this.label,\n      changeThrottle: this.changeThrottle,\n      step: this.step,\n      largeStep: this.largeStep,\n      orientation: this.orientation,\n      disabled: this.disabled,\n      thumbAlignment: this.thumbAlignment,\n      pauseOnDrag: this.pauseOnDrag,\n    });\n    this.#core.setFormatLocale(this.#i18n.locale);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    const time = this.#timeState.value;\n    const buffer = this.#bufferState.value;\n\n    if (!time) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const media = { ...time, ...(buffer ?? { buffered: [], seekable: [] }) };\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    const cssVars = getTimeSliderCSSVars(this.#slider.adjustForAlignment(state));\n    const thumbAttrs = this.#core.getAttrs(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.rawValueFromPercent(state.pointerPercent),\n      thumbAttrs: {\n        ...thumbAttrs,\n        'aria-label': translateText(thumbAttrs['aria-label'], this.#i18n.value),\n        'aria-valuetext': translateText(\n          thumbAttrs['aria-valuetext'],\n          this.#i18n.value,\n          this.#core.getValueTextParams(state)\n        ),\n      },\n      thumbProps: this.#slider.thumbProps,\n      formatValue: (value) => formatTime(value, state.duration, { locale: this.#i18n.locale }),\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/dev/ui/title/element.d.ts

@@ -6,12 +6,11 @@ import { PropertyValues } from "@videojs/element";
  *
  * The element owns its text content. Set the title through the player's `content-title` attribute.
  */
-declare class TitleElement extends UIElement {
+export declare class TitleElement extends UIElement {
   #private;
   static readonly tagName = "media-title";
   connectedCallback(): void;
   protected update(changed: PropertyValues): void;
 }
 //#endregion
-export { TitleElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/title/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#core","#metadataState","#controlsState"],"sources":["../../../../src/ui/title/element.ts"],"sourcesContent":["import { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls, selectMetadata } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\n/**\n * Displays the resolved content title.\n *\n * The element owns its text content. Set the title through the player's `content-title` attribute.\n */\nexport class TitleElement extends UIElement {\n  static readonly tagName = 'media-title';\n\n  readonly #core = new TitleCore();\n  readonly #metadataState = new PlayerController(this, playerContext, selectMetadata);\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#metadataState.value) {\n      logMissingFeature(this.localName, this.#metadataState.displayName!);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const metadata = this.#metadataState.value;\n    if (!metadata) return;\n\n    const state = this.#core.getState(metadata, this.#controlsState.value);\n\n    // Controls visibility also triggers updates, so only touch the text node when the title changed.\n    // Replacing it needlessly makes assistive tech re-announce a title that should stay put.\n    if (this.textContent !== state.title) this.textContent = state.title;\n\n    this.hidden = state.hidden;\n\n    applyStateDataAttrs(this, state, TitleDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;;;;;AAaA,IAAa,eAAb,cAAkC,UAAU;;EAChB,KAAA,UAAA;;CAE1B,QAAiB,IAAI,UAAU;CAC/B,iBAA0B,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAClF,iBAA0B,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAElF,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAe,CAAC,KAAKC,eAAe,OAClC,kBAAkB,KAAK,WAAW,KAAKA,eAAe,WAAY;CAEtE;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,WAAW,KAAKA,eAAe;EACrC,IAAI,CAAC,UAAU;EAEf,MAAM,QAAQ,KAAKD,MAAM,SAAS,UAAU,KAAKE,eAAe,KAAK;EAIrE,IAAI,KAAK,gBAAgB,MAAM,OAAO,KAAK,cAAc,MAAM;EAE/D,KAAK,SAAS,MAAM;EAEpB,oBAAoB,MAAM,OAAO,cAAc;CACjD;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/title/element.ts"],"sourcesContent":["import { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls, selectMetadata } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { UIElement } from '../ui-element';\n\n/**\n * Displays the resolved content title.\n *\n * The element owns its text content. Set the title through the player's `content-title` attribute.\n */\nexport class TitleElement extends UIElement {\n  static readonly tagName = 'media-title';\n\n  readonly #core = new TitleCore();\n  readonly #metadataState = new PlayerController(this, playerContext, selectMetadata);\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#metadataState.value) {\n      logMissingFeature(this.localName, this.#metadataState.displayName!);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const metadata = this.#metadataState.value;\n    if (!metadata) return;\n\n    const state = this.#core.getState(metadata, this.#controlsState.value);\n\n    // Controls visibility also triggers updates, so only touch the text node when the title changed.\n    // Replacing it needlessly makes assistive tech re-announce a title that should stay put.\n    if (this.textContent !== state.title) this.textContent = state.title;\n\n    this.hidden = state.hidden;\n\n    applyStateDataAttrs(this, state, TitleDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;;;;;AAaA,IAAa,eAAb,cAAkC,UAAU;;EAChB,KAAA,UAAA;;CAE1B,QAAiB,IAAI,UAAU;CAC/B,iBAA0B,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAClF,iBAA0B,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAElF,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAe,CAAC,KAAK,eAAe,OAClC,kBAAkB,KAAK,WAAW,KAAK,eAAe,WAAY;CAEtE;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,WAAW,KAAK,eAAe;EACrC,IAAI,CAAC,UAAU;EAEf,MAAM,QAAQ,KAAK,MAAM,SAAS,UAAU,KAAK,eAAe,KAAK;EAIrE,IAAI,KAAK,gBAAgB,MAAM,OAAO,KAAK,cAAc,MAAM;EAE/D,KAAK,SAAS,MAAM;EAEpB,oBAAoB,MAAM,OAAO,cAAc;CACjD;AACF"}

package/dist/dev/ui/tooltip/context.d.ts

@@ -1,8 +1,8 @@
 import { TooltipGroupCore } from "@videojs/core";
 //#region src/ui/tooltip/context.d.ts
-declare const tooltipGroupContext: {
+/** @internal */
+export declare const tooltipGroupContext: {
   __context__: TooltipGroupCore;
 };
 //#endregion
-export { tooltipGroupContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/dev/ui/tooltip/context.js

@@ -1,4 +1,5 @@
 import { createContext } from "@videojs/element/context";
+/** @internal */
 const tooltipGroupContext = createContext(Symbol("@videojs/tooltip-group"));
 //#endregion
 export { tooltipGroupContext };

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

@@ -1 +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":";AAKA,MAAa,sBAAsB,cAFD,OAAO,wBAE0B,CAAyB"}
+{"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\n/** @internal */\nexport const tooltipGroupContext = createContext<TooltipGroupCore>(TOOLTIP_GROUP_CONTEXT_KEY);\n"],"mappings":";;AAMA,MAAa,sBAAsB,cAHD,OAAO,wBAG0B,CAAyB"}

package/dist/dev/ui/tooltip/element.d.ts

@@ -3,7 +3,7 @@ import { PositioningBoundary, TooltipOpenChangeReason } from "@videojs/core/dom"
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/tooltip/element.d.ts
 /** @fires open-change - Fired when the tooltip's open state changes. */
-declare class TooltipElement extends UIElement {
+export declare class TooltipElement extends UIElement {
   #private;
   static readonly tagName = "media-tooltip";
   static properties: {
@@ -63,5 +63,4 @@ declare class TooltipElement extends UIElement {
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { TooltipElement };
 //# sourceMappingURL=element.d.ts.map

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

@@ -133,8 +133,10 @@ var TooltipElement = class extends UIElement {
 		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();
+			if (this.open !== interactionOpen) {
+				if (this.open) this.#tooltip.open();
+				else this.#tooltip.close();
+			}
 		}
 	}
 	update(_changed) {

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

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#core","#i18n","#groupConsumer","#containerCtx","#popupGroupCtx","#position","#disconnect","#tooltip","#snapshot","#cleanupTrigger","#syncTrigger","#currentTrigger","#syncContent","#triggerAbort","#hostHasAuthoredTooltipContent"],"sources":["../../../../src/ui/tooltip/element.ts"],"sourcesContent":["import {\n  type ButtonState,\n  POPUP_HOST_ATTR,\n  TooltipCore,\n  TooltipCSSVars,\n  TooltipDataAttrs,\n  type TooltipInput,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  HOTKEY_SHORTCUT_CHANGE_EVENT,\n  type PositioningBoundary,\n  type TooltipApi,\n  type TooltipChangeDetails,\n  type TooltipOpenChangeReason,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { State } from '@videojs/store';\nimport { SnapshotController } from '@videojs/store/html';\nimport { listen, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { containerContext } from '../../player/context';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\nimport { tooltipGroupContext } from './context';\nimport { TooltipLabelElement } from './label';\nimport { TooltipShortcutElement } from './shortcut';\n\ntype TriggerElement = HTMLElement & {\n  getLabel(): Text | string | undefined;\n  getResolvedLabel?(): string | undefined;\n  getShortcut?: (() => string | undefined) | undefined;\n  $state: State<ButtonState>;\n};\n\nfunction isLabelTrigger(el: HTMLElement): el is TriggerElement {\n  return '$state' in el;\n}\n\n/** @fires open-change - Fired when the tooltip's open state changes. */\nexport class TooltipElement extends UIElement {\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    sticky: { type: Boolean },\n    boundary: { type: String },\n    trigger: { type: String },\n  } satisfies PropertyDeclarationMap<keyof TooltipCore.Props | 'boundary' | 'trigger'>;\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  sticky = TooltipCore.defaultProps.sticky;\n  boundary: PositioningBoundary = 'container';\n  trigger = '';\n\n  readonly #core = new TooltipCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });\n  readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });\n  readonly #position = new PositionController(this);\n  #tooltip: TooltipApi | null = null;\n  #snapshot: SnapshotController<TooltipInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.setAttribute(POPUP_HOST_ATTR, '');\n\n    this.#disconnect = new AbortController();\n\n    this.#tooltip = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      disableHoverablePopup: () => this.disableHoverablePopup,\n      disabled: () => this.disabled,\n      sticky: () => this.sticky,\n      // Lazy getter — group may arrive after connect via context.\n      group: () => this.#groupConsumer.value,\n      popupGroup: () => this.#popupGroupCtx.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  close(reason: TooltipOpenChangeReason = 'imperative-action'): void {\n    this.#tooltip?.close(reason);\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#tooltip && changed.has('open')) {\n      const { active: interactionOpen } = this.#tooltip.input.current;\n\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\n    if (!this.#tooltip) return;\n\n    const triggerEl = this.#position.findTrigger(this.trigger);\n\n    this.#syncTrigger(triggerEl);\n\n    if (this.#currentTrigger && isLabelTrigger(this.#currentTrigger)) {\n      this.#syncContent(this.#currentTrigger);\n    }\n\n    // Derive state from core + input.\n    const input = this.#tooltip.input.current;\n\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    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    this.#position.sync({\n      anchorName: this.id,\n      position: { side: state.side, align: state.align },\n      trigger: this.#currentTrigger,\n      boundary: this.boundary,\n      container: this.#containerCtx.value?.container ?? null,\n      cssVars: TooltipCSSVars,\n      onSideChange: (side) => this.setAttribute(TooltipDataAttrs.side, side),\n    });\n  }\n\n  // --- Trigger management ---\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#tooltip?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#tooltip) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });\n\n      if (isLabelTrigger(triggerEl)) {\n        this.#syncContent(triggerEl);\n        triggerEl.$state.subscribe(() => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n        listen(triggerEl, HOTKEY_SHORTCUT_CHANGE_EVENT, () => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n      }\n    }\n  }\n\n  #syncContent(triggerEl: TriggerElement): void {\n    const label = triggerEl.getLabel();\n    let resolved = isFunction(triggerEl.getResolvedLabel) ? triggerEl.getResolvedLabel() : undefined;\n\n    if (resolved === undefined && label) {\n      resolved = translateText(label, this.#i18n.value);\n    }\n\n    const shortcut = triggerEl.getShortcut?.();\n\n    let labelEl = TooltipLabelElement.findIn(this);\n    let shortcutEl = TooltipShortcutElement.findIn(this);\n\n    if (!labelEl && !shortcutEl) {\n      if (this.#hostHasAuthoredTooltipContent()) return;\n\n      labelEl = TooltipLabelElement.create();\n      shortcutEl = TooltipShortcutElement.create();\n      this.replaceChildren(labelEl, shortcutEl);\n    }\n\n    labelEl?.setSyncedText(resolved ?? '');\n    shortcutEl?.setSyncedShortcut(shortcut);\n  }\n\n  #hostHasAuthoredTooltipContent(): boolean {\n    return Array.from(this.childNodes).some((node) => !!node.textContent?.trim());\n  }\n\n  #cleanupTrigger(): void {\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/tooltip/element.ts"],"sourcesContent":["import {\n  type ButtonState,\n  POPUP_HOST_ATTR,\n  TooltipCore,\n  TooltipCSSVars,\n  TooltipDataAttrs,\n  type TooltipInput,\n  type TooltipProps,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  HOTKEY_SHORTCUT_CHANGE_EVENT,\n  type PositioningBoundary,\n  type TooltipApi,\n  type TooltipChangeDetails,\n  type TooltipOpenChangeReason,\n} from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { State } from '@videojs/store';\nimport { SnapshotController } from '@videojs/store/html';\nimport { listen, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { containerContext } from '../../player/context';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\nimport { tooltipGroupContext } from './context';\nimport { TooltipLabelElement } from './label';\nimport { TooltipShortcutElement } from './shortcut';\n\ntype TriggerElement = HTMLElement & {\n  getLabel(): Text | string | undefined;\n  getResolvedLabel?(): string | undefined;\n  getShortcut?: (() => string | undefined) | undefined;\n  $state: State<ButtonState>;\n};\n\nfunction isLabelTrigger(el: HTMLElement): el is TriggerElement {\n  return '$state' in el;\n}\n\n/** @fires open-change - Fired when the tooltip's open state changes. */\nexport class TooltipElement extends UIElement {\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    sticky: { type: Boolean },\n    boundary: { type: String },\n    trigger: { type: String },\n  } satisfies PropertyDeclarationMap<keyof TooltipProps | 'trigger'>;\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  sticky = TooltipCore.defaultProps.sticky;\n  boundary: PositioningBoundary = 'container';\n  trigger = '';\n\n  readonly #core = new TooltipCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });\n  readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });\n  readonly #position = new PositionController(this);\n  #tooltip: TooltipApi | null = null;\n  #snapshot: SnapshotController<TooltipInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.setAttribute(POPUP_HOST_ATTR, '');\n\n    this.#disconnect = new AbortController();\n\n    this.#tooltip = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      disableHoverablePopup: () => this.disableHoverablePopup,\n      disabled: () => this.disabled,\n      sticky: () => this.sticky,\n      // Lazy getter — group may arrive after connect via context.\n      group: () => this.#groupConsumer.value,\n      popupGroup: () => this.#popupGroupCtx.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  close(reason: TooltipOpenChangeReason = 'imperative-action'): void {\n    this.#tooltip?.close(reason);\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#tooltip && changed.has('open')) {\n      const { active: interactionOpen } = this.#tooltip.input.current;\n\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\n    if (!this.#tooltip) return;\n\n    const triggerEl = this.#position.findTrigger(this.trigger);\n\n    this.#syncTrigger(triggerEl);\n\n    if (this.#currentTrigger && isLabelTrigger(this.#currentTrigger)) {\n      this.#syncContent(this.#currentTrigger);\n    }\n\n    // Derive state from core + input.\n    const input = this.#tooltip.input.current;\n\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    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    this.#position.sync({\n      anchorName: this.id,\n      position: { side: state.side, align: state.align },\n      trigger: this.#currentTrigger,\n      boundary: this.boundary,\n      container: this.#containerCtx.value?.container ?? null,\n      cssVars: TooltipCSSVars,\n      onSideChange: (side) => this.setAttribute(TooltipDataAttrs.side, side),\n    });\n  }\n\n  // --- Trigger management ---\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#tooltip?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#tooltip) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });\n\n      if (isLabelTrigger(triggerEl)) {\n        this.#syncContent(triggerEl);\n        triggerEl.$state.subscribe(() => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n        listen(triggerEl, HOTKEY_SHORTCUT_CHANGE_EVENT, () => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n      }\n    }\n  }\n\n  #syncContent(triggerEl: TriggerElement): void {\n    const label = triggerEl.getLabel();\n    let resolved = isFunction(triggerEl.getResolvedLabel) ? triggerEl.getResolvedLabel() : undefined;\n\n    if (resolved === undefined && label) {\n      resolved = translateText(label, this.#i18n.value);\n    }\n\n    const shortcut = triggerEl.getShortcut?.();\n\n    let labelEl = TooltipLabelElement.findIn(this);\n    let shortcutEl = TooltipShortcutElement.findIn(this);\n\n    if (!labelEl && !shortcutEl) {\n      if (this.#hostHasAuthoredTooltipContent()) return;\n\n      labelEl = TooltipLabelElement.create();\n      shortcutEl = TooltipShortcutElement.create();\n      this.replaceChildren(labelEl, shortcutEl);\n    }\n\n    labelEl?.setSyncedText(resolved ?? '');\n    shortcutEl?.setSyncedShortcut(shortcut);\n  }\n\n  #hostHasAuthoredTooltipContent(): boolean {\n    return Array.from(this.childNodes).some((node) => !!node.textContent?.trim());\n  }\n\n  #cleanupTrigger(): void {\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA6CA,SAAS,eAAe,IAAuC;CAC7D,OAAO,YAAY;AACrB;;AAGA,IAAa,iBAAb,cAAoC,UAAU;;;EAiBrC,KAAA,OAAA,YAAY,aAAa;EAClB,KAAA,cAAA,YAAY,aAAa;EAChC,KAAA,OAAA,YAAY,aAAa;EACxB,KAAA,QAAA,YAAY,aAAa;EACzB,KAAA,QAAA,YAAY,aAAa;EACpB,KAAA,aAAA,YAAY,aAAa;EACd,KAAA,wBAAA,YAAY,aAAa;EACtC,KAAA,WAAA,YAAY,aAAa;EAC3B,KAAA,SAAA,YAAY,aAAa;EACF,KAAA,WAAA;EACtB,KAAA,UAAA;EAEO,KAAA,QAAA,IAAI,YAAY;EAChB,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC3B,KAAA,iBAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,oBAAoB,CAAC;EAC3D,KAAA,gBAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAkB,WAAW;EAAK,CAAC;EACvE,KAAA,iBAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,kBAAkB,CAAC;EAC7D,KAAA,YAAA,IAAI,mBAAmB,IAAI;EAClB,KAAA,WAAA;EACuB,KAAA,YAAA;EAGf,KAAA,cAAA;EACE,KAAA,gBAAA;EACF,KAAA,kBAAA;;;EAxCZ,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,MAAM,EAAE,MAAM,QAAQ;GACtB,aAAa;IAAE,MAAM;IAAS,WAAW;GAAe;GACxD,MAAM,EAAE,MAAM,OAAO;GACrB,OAAO,EAAE,MAAM,OAAO;GACtB,OAAO,EAAE,MAAM,OAAO;GACtB,YAAY;IAAE,MAAM;IAAQ,WAAW;GAAc;GACrD,uBAAuB;IAAE,MAAM;IAAS,WAAW;GAA0B;GAC7E,UAAU,EAAE,MAAM,QAAQ;GAC1B,QAAQ,EAAE,MAAM,QAAQ;GACxB,UAAU,EAAE,MAAM,OAAO;GACzB,SAAS,EAAE,MAAM,OAAO;EAC1B;;CAcA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,KAAK,aAAa,iBAAiB,EAAE;EAErC,KAAK,cAAc,IAAI,gBAAgB;EAEvC,KAAK,WAAW,cAAc;GAC5B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,KAAK,OAAO;IACZ,KAAK,cAAc,IAAI,YAAY,eAAe,EAAE,QAAQ;KAAE,MAAM;KAAU,GAAG;IAAQ,EAAE,CAAC,CAAC;GAC/F;GACA,aAAa,KAAK;GAClB,kBAAkB,KAAK;GACvB,6BAA6B,KAAK;GAClC,gBAAgB,KAAK;GACrB,cAAc,KAAK;GAEnB,aAAa,KAAK,eAAe;GACjC,kBAAkB,KAAK,eAAe;EACxC,CAAC;EAGD,KAAK,SAAS,gBAAgB,IAAI;EAGlC,kBAAkB,MAAM,KAAK,SAAS,YAAY,EAAE,QAAQ,KAAK,YAAY,OAAO,CAAC;EAGrF,IAAI,KAAK,WACP,KAAK,UAAU,MAAM,KAAK,SAAS,KAAK;OAExC,KAAK,YAAY,IAAI,mBAAmB,MAAM,KAAK,SAAS,KAAK;CAErE;CAEA,aAAgC,SAA+B;EAC7D,MAAM,aAAa,OAAO;EAI1B,IAAI,KAAK,eAAe,CAAC,KAAK,MAC5B,KAAK,UAAU,KAAK;CAExB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAK,gBAAgB;EACrB,KAAK,UAAU,QAAQ;EACvB,KAAK,WAAW;EAChB,KAAK,aAAa,MAAM;EACxB,KAAK,cAAc;CACrB;CAEA,MAAM,SAAkC,qBAA2B;EACjE,KAAK,UAAU,MAAM,MAAM;CAC7B;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EACxB,KAAK,MAAM,SAAS,IAAI;EAGxB,IAAI,KAAK,YAAY,QAAQ,IAAI,MAAM,GAAG;GACxC,MAAM,EAAE,QAAQ,oBAAoB,KAAK,SAAS,MAAM;GAExD,IAAI,KAAK,SAAS,iBAAiB;IACjC,IAAI,KAAK,MACP,KAAK,SAAS,KAAK;SAEnB,KAAK,SAAS,MAAM;GAExB;EACF;CACF;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,IAAI,CAAC,KAAK,UAAU;EAEpB,MAAM,YAAY,KAAK,UAAU,YAAY,KAAK,OAAO;EAEzD,KAAK,aAAa,SAAS;EAE3B,IAAI,KAAK,mBAAmB,eAAe,KAAK,eAAe,GAC7D,KAAK,aAAa,KAAK,eAAe;EAIxC,MAAM,QAAQ,KAAK,SAAS,MAAM;EAElC,KAAK,MAAM,SAAS,KAAK;EACzB,MAAM,QAAQ,KAAK,MAAM,SAAS;EAGlC,kBAAkB,MAAM,KAAK,MAAM,cAAc,KAAK,CAAC;EACvD,oBAAoB,MAAM,OAAO,gBAAgB;EAIjD,IAAI,MAAM,MACR,eAAe,IAAI;OAEnB,eAAe,IAAI;EAIrB,IAAI,CAAC,MAAM,MAAM;GACf,KAAK,UAAU,QAAQ;GACvB;EACF;EAEA,KAAK,UAAU,KAAK;GAClB,YAAY,KAAK;GACjB,UAAU;IAAE,MAAM,MAAM;IAAM,OAAO,MAAM;GAAM;GACjD,SAAS,KAAK;GACd,UAAU,KAAK;GACf,WAAW,KAAK,cAAc,OAAO,aAAa;GAClD,SAAS;GACT,eAAe,SAAS,KAAK,aAAa,iBAAiB,MAAM,IAAI;EACvE,CAAC;CACH;CAIA,aAAa,WAAqC;EAChD,IAAI,cAAc,KAAK,iBAAiB;EAExC,KAAK,UAAU,QAAQ;EACvB,KAAK,gBAAgB;EACrB,KAAK,kBAAkB;EACvB,KAAK,UAAU,kBAAkB,SAAS;EAE1C,IAAI,aAAa,KAAK,UAAU;GAC9B,KAAK,gBAAgB,IAAI,gBAAgB;GACzC,kBAAkB,WAAW,KAAK,SAAS,cAAc,EAAE,QAAQ,KAAK,cAAc,OAAO,CAAC;GAE9F,IAAI,eAAe,SAAS,GAAG;IAC7B,KAAK,aAAa,SAAS;IAC3B,UAAU,OAAO,gBAAgB,KAAK,aAAa,SAAS,GAAG,EAC7D,QAAQ,KAAK,cAAc,OAC7B,CAAC;IACD,OAAO,WAAW,oCAAoC,KAAK,aAAa,SAAS,GAAG,EAClF,QAAQ,KAAK,cAAc,OAC7B,CAAC;GACH;EACF;CACF;CAEA,aAAa,WAAiC;EAC5C,MAAM,QAAQ,UAAU,SAAS;EACjC,IAAI,WAAW,WAAW,UAAU,gBAAgB,IAAI,UAAU,iBAAiB,IAAI,KAAA;EAEvF,IAAI,aAAa,KAAA,KAAa,OAC5B,WAAW,cAAc,OAAO,KAAK,MAAM,KAAK;EAGlD,MAAM,WAAW,UAAU,cAAc;EAEzC,IAAI,UAAU,oBAAoB,OAAO,IAAI;EAC7C,IAAI,aAAa,uBAAuB,OAAO,IAAI;EAEnD,IAAI,CAAC,WAAW,CAAC,YAAY;GAC3B,IAAI,KAAK,+BAA+B,GAAG;GAE3C,UAAU,oBAAoB,OAAO;GACrC,aAAa,uBAAuB,OAAO;GAC3C,KAAK,gBAAgB,SAAS,UAAU;EAC1C;EAEA,SAAS,cAAc,YAAY,EAAE;EACrC,YAAY,kBAAkB,QAAQ;CACxC;CAEA,iCAA0C;EACxC,OAAO,MAAM,KAAK,KAAK,UAAU,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,KAAK,aAAa,KAAK,CAAC;CAC9E;CAEA,kBAAwB;EACtB,KAAK,eAAe,MAAM;EAC1B,KAAK,gBAAgB;EACrB,KAAK,kBAAkB;CACzB;AACF"}

package/dist/dev/ui/tooltip/group.d.ts

@@ -1,7 +1,7 @@
 import { UIElement } from "../ui-element.js";
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/tooltip/group.d.ts
-declare class TooltipGroupElement extends UIElement {
+export declare class TooltipGroupElement extends UIElement {
   #private;
   static readonly tagName = "media-tooltip-group";
   static properties: {
@@ -22,5 +22,4 @@ declare class TooltipGroupElement extends UIElement {
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { TooltipGroupElement };
 //# sourceMappingURL=group.d.ts.map

package/dist/dev/ui/tooltip/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.js","names":["#core","#provider"],"sources":["../../../../src/ui/tooltip/group.ts"],"sourcesContent":["import { TooltipGroupCore } from '@videojs/core';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipGroupElement extends UIElement {\n  static readonly tagName = 'media-tooltip-group';\n\n  static override properties = {\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    timeout: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof TooltipGroupCore.Props>;\n\n  delay = TooltipGroupCore.defaultProps.delay;\n  closeDelay = TooltipGroupCore.defaultProps.closeDelay;\n  timeout = TooltipGroupCore.defaultProps.timeout;\n\n  readonly #core = new TooltipGroupCore();\n  readonly #provider = new ContextProvider(this, { context: tooltipGroupContext, initialValue: this.#core });\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    this.#core.setProps(this);\n    this.#provider.setValue(this.#core);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,sBAAb,cAAyC,UAAU;;;EASzC,KAAA,QAAA,iBAAiB,aAAa;EACzB,KAAA,aAAA,iBAAiB,aAAa;EACjC,KAAA,UAAA,iBAAiB,aAAa;EAEvB,KAAA,QAAA,IAAI,iBAAiB;EACjB,KAAA,YAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAqB,cAAc,KAAKA;EAAM,CAAC;;;EAb/E,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,YAAY;IAAE,MAAM;IAAQ,WAAW;GAAc;GACrD,SAAS,EAAE,MAAM,OAAO;EAC1B;;CAMA;CACA;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EACrB,KAAKA,MAAM,SAAS,IAAI;EACxB,KAAKC,UAAU,SAAS,KAAKD,KAAK;CACpC;AACF"}
+{"version":3,"file":"group.js","names":[],"sources":["../../../../src/ui/tooltip/group.ts"],"sourcesContent":["import { TooltipGroupCore, type TooltipGroupProps } from '@videojs/core';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipGroupElement extends UIElement {\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 TooltipGroupProps>;\n\n  delay = TooltipGroupCore.defaultProps.delay;\n  closeDelay = TooltipGroupCore.defaultProps.closeDelay;\n  timeout = TooltipGroupCore.defaultProps.timeout;\n\n  readonly #core = new TooltipGroupCore();\n  readonly #provider = new ContextProvider(this, { context: tooltipGroupContext, initialValue: this.#core });\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    this.#core.setProps(this);\n    this.#provider.setValue(this.#core);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,sBAAb,cAAyC,UAAU;;;EASzC,KAAA,QAAA,iBAAiB,aAAa;EACzB,KAAA,aAAA,iBAAiB,aAAa;EACjC,KAAA,UAAA,iBAAiB,aAAa;EAEvB,KAAA,QAAA,IAAI,iBAAiB;EACjB,KAAA,YAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAqB,cAAc,KAAK;EAAM,CAAC;;;EAb/E,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,YAAY;IAAE,MAAM;IAAQ,WAAW;GAAc;GACrD,SAAS,EAAE,MAAM,OAAO;EAC1B;;CAMA;CACA;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EACrB,KAAK,MAAM,SAAS,IAAI;EACxB,KAAK,UAAU,SAAS,KAAK,KAAK;CACpC;AACF"}

package/dist/dev/ui/tooltip/label.d.ts

@@ -1,7 +1,7 @@
 import { UIElement } from "../ui-element.js";
 //#region src/ui/tooltip/label.d.ts
 /** Label region inside `media-tooltip`; parent syncs text from the trigger when linked to a media button. */
-declare class TooltipLabelElement extends UIElement {
+export declare class TooltipLabelElement extends UIElement {
   #private;
   static readonly tagName = "media-tooltip-label";
   static findIn(host: HTMLElement): TooltipLabelElement | null;
@@ -10,5 +10,4 @@ declare class TooltipLabelElement extends UIElement {
   setSyncedText(text: string): void;
 }
 //#endregion
-export { TooltipLabelElement };
 //# sourceMappingURL=label.d.ts.map

package/dist/dev/ui/tooltip/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":["#hasAuthoredContent"],"sources":["../../../../src/ui/tooltip/label.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\nfunction hasAuthoredContent(host: HTMLElement): boolean {\n  return Array.from(host.childNodes).some((node) => !!node.textContent?.trim());\n}\n\n/** Label region inside `media-tooltip`; parent syncs text from the trigger when linked to a media button. */\nexport class TooltipLabelElement extends UIElement {\n  static readonly tagName = 'media-tooltip-label';\n\n  #hasAuthoredContent = false;\n\n  static findIn(host: HTMLElement): TooltipLabelElement | null {\n    return host.querySelector(TooltipLabelElement.tagName);\n  }\n\n  static create(): TooltipLabelElement {\n    return document.createElement(TooltipLabelElement.tagName) as TooltipLabelElement;\n  }\n\n  override connectedCallback(): void {\n    this.#hasAuthoredContent ||= hasAuthoredContent(this);\n    super.connectedCallback();\n  }\n\n  setSyncedText(text: string): void {\n    if (this.#hasAuthoredContent) return;\n\n    this.textContent = text;\n  }\n}\n"],"mappings":";;AAEA,SAAS,mBAAmB,MAA4B;CACtD,OAAO,MAAM,KAAK,KAAK,UAAU,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,KAAK,aAAa,KAAK,CAAC;AAC9E;;AAGA,IAAa,sBAAb,MAAa,4BAA4B,UAAU;;EACvB,KAAA,UAAA;;CAE1B,sBAAsB;CAEtB,OAAO,OAAO,MAA+C;EAC3D,OAAO,KAAK,cAAc,oBAAoB,OAAO;CACvD;CAEA,OAAO,SAA8B;EACnC,OAAO,SAAS,cAAc,oBAAoB,OAAO;CAC3D;CAEA,oBAAmC;EACjC,KAAKA,wBAAwB,mBAAmB,IAAI;EACpD,MAAM,kBAAkB;CAC1B;CAEA,cAAc,MAAoB;EAChC,IAAI,KAAKA,qBAAqB;EAE9B,KAAK,cAAc;CACrB;AACF"}
+{"version":3,"file":"label.js","names":[],"sources":["../../../../src/ui/tooltip/label.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\nfunction hasAuthoredContent(host: HTMLElement): boolean {\n  return Array.from(host.childNodes).some((node) => !!node.textContent?.trim());\n}\n\n/** Label region inside `media-tooltip`; parent syncs text from the trigger when linked to a media button. */\nexport class TooltipLabelElement extends UIElement {\n  static readonly tagName = 'media-tooltip-label';\n\n  #hasAuthoredContent = false;\n\n  static findIn(host: HTMLElement): TooltipLabelElement | null {\n    return host.querySelector(TooltipLabelElement.tagName);\n  }\n\n  static create(): TooltipLabelElement {\n    return document.createElement(TooltipLabelElement.tagName) as TooltipLabelElement;\n  }\n\n  override connectedCallback(): void {\n    this.#hasAuthoredContent ||= hasAuthoredContent(this);\n    super.connectedCallback();\n  }\n\n  setSyncedText(text: string): void {\n    if (this.#hasAuthoredContent) return;\n\n    this.textContent = text;\n  }\n}\n"],"mappings":";;AAEA,SAAS,mBAAmB,MAA4B;CACtD,OAAO,MAAM,KAAK,KAAK,UAAU,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,KAAK,aAAa,KAAK,CAAC;AAC9E;;AAGA,IAAa,sBAAb,MAAa,4BAA4B,UAAU;;EACvB,KAAA,UAAA;;CAE1B,sBAAsB;CAEtB,OAAO,OAAO,MAA+C;EAC3D,OAAO,KAAK,cAAc,oBAAoB,OAAO;CACvD;CAEA,OAAO,SAA8B;EACnC,OAAO,SAAS,cAAc,oBAAoB,OAAO;CAC3D;CAEA,oBAAmC;EACjC,KAAK,wBAAwB,mBAAmB,IAAI;EACpD,MAAM,kBAAkB;CAC1B;CAEA,cAAc,MAAoB;EAChC,IAAI,KAAK,qBAAqB;EAE9B,KAAK,cAAc;CACrB;AACF"}

package/dist/dev/ui/tooltip/shortcut.d.ts

@@ -4,12 +4,11 @@ import { UIElement } from "../ui-element.js";
  * Shortcut hint inside `media-tooltip`. CSS skins: `class="media-tooltip__kbd"`; Tailwind skins: `class` from
  * `popup.tooltipShortcut`.
  */
-declare class TooltipShortcutElement extends UIElement {
+export declare class TooltipShortcutElement extends UIElement {
   static readonly tagName = "media-tooltip-shortcut";
   static findIn(host: HTMLElement): TooltipShortcutElement | null;
   static create(): TooltipShortcutElement;
   setSyncedShortcut(shortcut: string | undefined): void;
 }
 //#endregion
-export { TooltipShortcutElement };
 //# sourceMappingURL=shortcut.d.ts.map

package/dist/dev/ui/ui-element.d.ts

@@ -3,8 +3,8 @@ import { Constructor } from "@videojs/utils/types";
 //#region src/ui/ui-element.d.ts
 declare const UIElement_base: typeof ReactiveElement & (new (...args: any[]) => import("@videojs/element").Destroyable);
 /** Base class for interactive media UI elements. */
-declare class UIElement extends UIElement_base {}
-interface UIElementConstructor extends Constructor<UIElement> {}
+export declare class UIElement extends UIElement_base {}
+/** @internal */
+export interface UIElementConstructor extends Constructor<UIElement> {}
 //#endregion
-export { UIElement, UIElementConstructor };
 //# sourceMappingURL=ui-element.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ui-element.js","names":[],"sources":["../../../src/ui/ui-element.ts"],"sourcesContent":["import { DestroyMixin, ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/** Base class for interactive media UI elements. */\nexport class UIElement extends DestroyMixin(ReactiveElement) {}\n\nexport interface UIElementConstructor extends Constructor<UIElement> {}\n"],"mappings":";;;AAIA,IAAa,YAAb,cAA+B,aAAa,eAAe,CAAC,CAAC,CAAC"}
+{"version":3,"file":"ui-element.js","names":[],"sources":["../../../src/ui/ui-element.ts"],"sourcesContent":["import { DestroyMixin, ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/** Base class for interactive media UI elements. */\nexport class UIElement extends DestroyMixin(ReactiveElement) {}\n\n/** @internal */\nexport interface UIElementConstructor extends Constructor<UIElement> {}\n"],"mappings":";;;AAIA,IAAa,YAAb,cAA+B,aAAa,eAAe,CAAC,CAAC,CAAC"}