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

package/dist/dev/ui/playback-rate-radio-group/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/playback-rate-radio-group/element.ts"],"sourcesContent":["import {\n  PlaybackRateRadioGroupCore,\n  PlaybackRateRadioGroupDataAttrs,\n  type PlaybackRateRadioGroupOption,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport { RadioOptionsController } from '../radio-options/controller';\n\nexport class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-playback-rate-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<'value' | 'disabled'>;\n\n  disabled = false;\n  formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;\n\n  readonly #core = new PlaybackRateRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n  readonly #options = new RadioOptionsController<PlaybackRateRadioGroupOption>(this, {\n    setItemAttributes: (item, option) => item.setAttribute('data-rate', option.value),\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: PlaybackRateRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRate: this.formatRate, disabled: this.disabled });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(\n        translateText(this.#core.getLabel(state), this.#i18n.value, this.#core.getLabelParams(state))\n      );\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, PlaybackRateRadioGroupDataAttrs);\n  }\n}\n\nexport namespace PlaybackRateRadioGroupElement {\n  export type State = PlaybackRateRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gCAAb,cAAmD,sBAAsB;;;EAQ5D,KAAA,WAAA;EACE,KAAA,aAAA,2BAA2B,aAAa;EAEpC,KAAA,QAAA,IAAI,2BAA2B;EAC/B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EAC/D,KAAA,WAAA,IAAI,uBAAqD,MAAM;GACjF,oBAAoB,MAAM,WAAW,KAAK,aAAa,aAAa,OAAO,KAAK;GAChF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKA,YAAY;IAE/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EApBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAKA;CACA;CACA;CACA;CASA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAKD,YAAY,SAAS,KAAKA,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAKA,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKA,YAAY;EAC/B,IAAI,QAAiD;EAErD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,YAAY,KAAK;IAAY,UAAU,KAAK;GAAS,CAAC;GAC5E,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBACH,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,OAAO,KAAKD,MAAM,eAAe,KAAK,CAAC,CAC9F;GACA,KAAKE,SAAS,KAAK,OAAO,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,+BAA+B;CAC7E;AACF"}
+{"version":3,"file":"element.js","names":["#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/playback-rate-radio-group/element.ts"],"sourcesContent":["import {\n  PlaybackRateRadioGroupCore,\n  PlaybackRateRadioGroupDataAttrs,\n  type PlaybackRateRadioGroupOption,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/**\n * Menu radio group that generates a `<media-menu-radio-item>` per available playback rate and shares the selected label\n * and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes\n * each generated item.\n */\nexport class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-playback-rate-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<'value' | 'disabled'>;\n\n  disabled = false;\n  formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;\n\n  readonly #core = new PlaybackRateRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n  readonly #options = new RadioOptionsController<PlaybackRateRadioGroupOption>(this, {\n    setItemAttributes: (item, option) => item.setAttribute('data-rate', option.value),\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: PlaybackRateRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRate: this.formatRate, disabled: this.disabled });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(\n        translateText(this.#core.getLabel(state), this.#i18n.value, this.#core.getLabelParams(state))\n      );\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, PlaybackRateRadioGroupDataAttrs);\n  }\n}\n\nexport namespace PlaybackRateRadioGroupElement {\n  export type State = PlaybackRateRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,IAAa,gCAAb,cAAmD,sBAAsB;;;EAQ5D,KAAA,WAAA;EACE,KAAA,aAAA,2BAA2B,aAAa;EAEpC,KAAA,QAAA,IAAI,2BAA2B;EAC/B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EAC/D,KAAA,WAAA,IAAI,uBAAqD,MAAM;GACjF,oBAAoB,MAAM,WAAW,KAAK,aAAa,aAAa,OAAO,KAAK;GAChF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKA,YAAY;IAE/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EApBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAKA;CACA;CACA;CACA;CASA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAKD,YAAY,SAAS,KAAKA,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAKA,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKA,YAAY;EAC/B,IAAI,QAAiD;EAErD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,YAAY,KAAK;IAAY,UAAU,KAAK;GAAS,CAAC;GAC5E,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBACH,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,OAAO,KAAKD,MAAM,eAAe,KAAK,CAAC,CAC9F;GACA,KAAKE,SAAS,KAAK,OAAO,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,+BAA+B;CAC7E;AACF"}

package/dist/dev/ui/quality-radio-group/element.d.ts

@@ -3,6 +3,12 @@ import { QualityRadioGroupCore } from "@videojs/core";
 import { PropertyValues } from "@videojs/element";
 import { Text } from "@videojs/core/i18n";
 //#region src/ui/quality-radio-group/element.d.ts
+/**
+ * Menu radio group that generates an Auto `<media-menu-radio-item>` plus one per video rendition, and shares the
+ * selected label and availability with an enclosing menu. An optional `<template>` holding one
+ * `<media-menu-radio-item>` customizes each generated item; its `data-part` `label`, `tier`, and `badge` descendants
+ * receive the rendition's text.
+ */
 declare class QualityRadioGroupElement extends MenuRadioGroupElement {
   #private;
   static readonly tagName = "media-quality-radio-group";

package/dist/dev/ui/quality-radio-group/element.js

@@ -8,6 +8,12 @@ import { QualityRadioGroupCore, QualityRadioGroupDataAttrs } from "@videojs/core
 import { applyStateDataAttrs, logMissingFeature, selectQuality } from "@videojs/core/dom";
 import { translateText } from "@videojs/core/i18n";
 //#region src/ui/quality-radio-group/element.ts
+/**
+* Menu radio group that generates an Auto `<media-menu-radio-item>` plus one per video rendition, and shares the
+* selected label and availability with an enclosing menu. An optional `<template>` holding one
+* `<media-menu-radio-item>` customizes each generated item; its `data-part` `label`, `tier`, and `badge` descendants
+* receive the rendition's text.
+*/
 var QualityRadioGroupElement = class extends MenuRadioGroupElement {
 	constructor(..._args) {
 		super(..._args);

package/dist/dev/ui/quality-radio-group/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#setContent","#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/quality-radio-group/element.ts"],"sourcesContent":["import { QualityRadioGroupCore, QualityRadioGroupDataAttrs, type QualityRadioGroupOption } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport type { MenuRadioItemElement } from '../menu/radio-item';\nimport { RadioOptionsController } from '../radio-options/controller';\n\nexport class QualityRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-quality-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  label: Text | string = '';\n  formatRendition = QualityRadioGroupCore.defaultProps.formatRendition;\n\n  readonly #core = new QualityRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectQuality);\n  readonly #options = new RadioOptionsController<QualityRadioGroupOption>(this, {\n    renderItem: (item, label, option) => this.#setContent(item, label, option.tier, option.badge),\n    setItemAttributes: (item, option) => item.setAttribute('data-rendition', option.value),\n    getOptionCacheKey: (option) => `${option.tier ?? ''}:${option.badge ?? ''}`,\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: QualityRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRendition: this.formatRendition, disabled: this.disabled, label: this.label });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, QualityRadioGroupDataAttrs);\n  }\n\n  #setContent(item: MenuRadioItemElement, label: string, tier: string | undefined, badge: string | undefined): void {\n    const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n    const tierPart = item.querySelector<HTMLElement>('[data-part~=\"tier\"]');\n    const badgePart = item.querySelector<HTMLElement>('[data-part~=\"badge\"]');\n\n    if (labelPart) {\n      labelPart.textContent = label;\n    }\n\n    if (tierPart) {\n      tierPart.textContent = tier ?? '';\n      tierPart.hidden = !tier;\n    }\n\n    if (badgePart) {\n      badgePart.textContent = badge ?? '';\n      badgePart.hidden = !badge;\n    }\n\n    if (!labelPart && !tierPart && !badgePart) {\n      item.textContent = [label, tier, badge].filter(Boolean).join(' ');\n    }\n  }\n}\n\nexport namespace QualityRadioGroupElement {\n  export type State = QualityRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAa,2BAAb,cAA8C,sBAAsB;;;EASvD,KAAA,WAAA;EACY,KAAA,QAAA;EACL,KAAA,kBAAA,sBAAsB,aAAa;EAEpC,KAAA,QAAA,IAAI,sBAAsB;EAC1B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,aAAa;EAC1D,KAAA,WAAA,IAAI,uBAAgD,MAAM;GAC5E,aAAa,MAAM,OAAO,WAAW,KAAKA,YAAY,MAAM,OAAO,OAAO,MAAM,OAAO,KAAK;GAC5F,oBAAoB,MAAM,WAAW,KAAK,aAAa,kBAAkB,OAAO,KAAK;GACrF,oBAAoB,WAAW,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,SAAS;GACvE,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKC,YAAY;IAE/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAxBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CAWA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAKD,YAAY,SAAS,KAAKA,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAKA,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKA,YAAY;EAC/B,IAAI,QAA4C;EAEhD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,iBAAiB,KAAK;IAAiB,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACzG,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,KAAK,CAAC;GACtF,KAAKC,SAAS,KAAK,OAAO,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,0BAA0B;CACxE;CAEA,YAAY,MAA4B,OAAe,MAA0B,OAAiC;EAChH,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EACxE,MAAM,WAAW,KAAK,cAA2B,uBAAqB;EACtE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;EAG1B,IAAI,UAAU;GACZ,SAAS,cAAc,QAAQ;GAC/B,SAAS,SAAS,CAAC;EACrB;EAEA,IAAI,WAAW;GACb,UAAU,cAAc,SAAS;GACjC,UAAU,SAAS,CAAC;EACtB;EAEA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,WAC9B,KAAK,cAAc;GAAC;GAAO;GAAM;EAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpE;AACF"}
+{"version":3,"file":"element.js","names":["#setContent","#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/quality-radio-group/element.ts"],"sourcesContent":["import { QualityRadioGroupCore, QualityRadioGroupDataAttrs, type QualityRadioGroupOption } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport type { MenuRadioItemElement } from '../menu/radio-item';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/**\n * Menu radio group that generates an Auto `<media-menu-radio-item>` plus one per video rendition, and shares the\n * selected label and availability with an enclosing menu. An optional `<template>` holding one\n * `<media-menu-radio-item>` customizes each generated item; its `data-part` `label`, `tier`, and `badge` descendants\n * receive the rendition's text.\n */\nexport class QualityRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-quality-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  label: Text | string = '';\n  formatRendition = QualityRadioGroupCore.defaultProps.formatRendition;\n\n  readonly #core = new QualityRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectQuality);\n  readonly #options = new RadioOptionsController<QualityRadioGroupOption>(this, {\n    renderItem: (item, label, option) => this.#setContent(item, label, option.tier, option.badge),\n    setItemAttributes: (item, option) => item.setAttribute('data-rendition', option.value),\n    getOptionCacheKey: (option) => `${option.tier ?? ''}:${option.badge ?? ''}`,\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: QualityRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRendition: this.formatRendition, disabled: this.disabled, label: this.label });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, QualityRadioGroupDataAttrs);\n  }\n\n  #setContent(item: MenuRadioItemElement, label: string, tier: string | undefined, badge: string | undefined): void {\n    const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n    const tierPart = item.querySelector<HTMLElement>('[data-part~=\"tier\"]');\n    const badgePart = item.querySelector<HTMLElement>('[data-part~=\"badge\"]');\n\n    if (labelPart) {\n      labelPart.textContent = label;\n    }\n\n    if (tierPart) {\n      tierPart.textContent = tier ?? '';\n      tierPart.hidden = !tier;\n    }\n\n    if (badgePart) {\n      badgePart.textContent = badge ?? '';\n      badgePart.hidden = !badge;\n    }\n\n    if (!labelPart && !tierPart && !badgePart) {\n      item.textContent = [label, tier, badge].filter(Boolean).join(' ');\n    }\n  }\n}\n\nexport namespace QualityRadioGroupElement {\n  export type State = QualityRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,IAAa,2BAAb,cAA8C,sBAAsB;;;EASvD,KAAA,WAAA;EACY,KAAA,QAAA;EACL,KAAA,kBAAA,sBAAsB,aAAa;EAEpC,KAAA,QAAA,IAAI,sBAAsB;EAC1B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,aAAa;EAC1D,KAAA,WAAA,IAAI,uBAAgD,MAAM;GAC5E,aAAa,MAAM,OAAO,WAAW,KAAKA,YAAY,MAAM,OAAO,OAAO,MAAM,OAAO,KAAK;GAC5F,oBAAoB,MAAM,WAAW,KAAK,aAAa,kBAAkB,OAAO,KAAK;GACrF,oBAAoB,WAAW,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,SAAS;GACvE,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKC,YAAY;IAE/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAxBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CAWA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAKD,YAAY,SAAS,KAAKA,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAKA,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKA,YAAY;EAC/B,IAAI,QAA4C;EAEhD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,iBAAiB,KAAK;IAAiB,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACzG,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,KAAK,CAAC;GACtF,KAAKC,SAAS,KAAK,OAAO,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,0BAA0B;CACxE;CAEA,YAAY,MAA4B,OAAe,MAA0B,OAAiC;EAChH,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EACxE,MAAM,WAAW,KAAK,cAA2B,uBAAqB;EACtE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;EAG1B,IAAI,UAAU;GACZ,SAAS,cAAc,QAAQ;GAC/B,SAAS,SAAS,CAAC;EACrB;EAEA,IAAI,WAAW;GACb,UAAU,cAAc,SAAS;GACjC,UAAU,SAAS,CAAC;EACtB;EAEA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,WAC9B,KAAK,cAAc;GAAC;GAAO;GAAM;EAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpE;AACF"}

package/dist/dev/ui/slider/thumbnail.d.ts

@@ -1,6 +1,10 @@
 import { ThumbnailElement } from "../thumbnail/element.js";
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/slider/thumbnail.d.ts
+/**
+ * `<media-thumbnail>` whose `time` follows the slider pointer. Left empty, it draws an image of its own; supply an
+ * `<img>` child to compose overlays or loading indicators beside the image it controls.
+ */
 declare class SliderThumbnailElement extends ThumbnailElement {
   #private;
   static readonly tagName = "media-slider-thumbnail";

package/dist/dev/ui/slider/thumbnail.js

@@ -2,6 +2,10 @@ import { sliderContext } from "./context.js";
 import { ThumbnailElement } from "../thumbnail/element.js";
 import { ContextConsumer } from "@videojs/element/context";
 //#region src/ui/slider/thumbnail.ts
+/**
+* `<media-thumbnail>` whose `time` follows the slider pointer. Left empty, it draws an image of its own; supply an
+* `<img>` child to compose overlays or loading indicators beside the image it controls.
+*/
 var SliderThumbnailElement = class extends ThumbnailElement {
 	static {
 		this.tagName = "media-slider-thumbnail";

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

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","names":["#ctx"],"sources":["../../../../src/ui/slider/thumbnail.ts"],"sourcesContent":["import type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ThumbnailElement } from '../thumbnail/element';\nimport { sliderContext } from './context';\n\n// @ts-expect-error TS2417 — tagName narrows to a different literal for custom element registration.\nexport class SliderThumbnailElement extends ThumbnailElement {\n  static override readonly tagName = 'media-slider-thumbnail';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  protected override update(changed: PropertyValues): void {\n    const ctx = this.#ctx.value;\n\n    if (ctx) this.time = ctx.pointerValue;\n\n    super.update(changed);\n  }\n}\n"],"mappings":";;;;AAOA,IAAa,yBAAb,cAA4C,iBAAiB;;EACxB,KAAA,UAAA;;CAEnC,OAAgB,IAAI,gBAAgB,MAAM;EACxC,SAAS;EACT,WAAW;CACb,CAAC;CAED,OAA0B,SAA+B;EACvD,MAAM,MAAM,KAAKA,KAAK;EAEtB,IAAI,KAAK,KAAK,OAAO,IAAI;EAEzB,MAAM,OAAO,OAAO;CACtB;AACF"}
+{"version":3,"file":"thumbnail.js","names":["#ctx"],"sources":["../../../../src/ui/slider/thumbnail.ts"],"sourcesContent":["import type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ThumbnailElement } from '../thumbnail/element';\nimport { sliderContext } from './context';\n\n/**\n * `<media-thumbnail>` whose `time` follows the slider pointer. Left empty, it draws an image of its own; supply an\n * `<img>` child to compose overlays or loading indicators beside the image it controls.\n */\n// @ts-expect-error TS2417 — tagName narrows to a different literal for custom element registration.\nexport class SliderThumbnailElement extends ThumbnailElement {\n  static override readonly tagName = 'media-slider-thumbnail';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  protected override update(changed: PropertyValues): void {\n    const ctx = this.#ctx.value;\n\n    if (ctx) this.time = ctx.pointerValue;\n\n    super.update(changed);\n  }\n}\n"],"mappings":";;;;;;;;AAWA,IAAa,yBAAb,cAA4C,iBAAiB;;EACxB,KAAA,UAAA;;CAEnC,OAAgB,IAAI,gBAAgB,MAAM;EACxC,SAAS;EACT,WAAW;CACb,CAAC;CAED,OAA0B,SAA+B;EACvD,MAAM,MAAM,KAAKA,KAAK;EAEtB,IAAI,KAAK,KAAK,OAAO,IAAI;EAEzB,MAAM,OAAO,OAAO;CACtB;AACF"}

package/dist/dev/ui/slider/value.d.ts

@@ -1,6 +1,7 @@
 import { UIElement } from "../ui-element.js";
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/slider/value.d.ts
+/** Writes the formatted current or pointer slider value into its own text content, replacing any children. */
 declare class SliderValueElement extends UIElement {
   #private;
   static readonly tagName = "media-slider-value";

package/dist/dev/ui/slider/value.js

@@ -3,6 +3,7 @@ import { sliderContext } from "./context.js";
 import { applyStateDataAttrs } from "@videojs/core/dom";
 import { ContextConsumer } from "@videojs/element/context";
 //#region src/ui/slider/value.ts
+/** Writes the formatted current or pointer slider value into its own text content, replacing any children. */
 var SliderValueElement = class extends UIElement {
 	constructor(..._args) {
 		super(..._args);

package/dist/dev/ui/slider/value.js.map

@@ -1 +1 @@
-{"version":3,"file":"value.js","names":["#ctx"],"sources":["../../../../src/ui/slider/value.ts"],"sourcesContent":["import { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { sliderContext } from './context';\n\nexport class SliderValueElement extends UIElement {\n  static readonly tagName = 'media-slider-value';\n\n  static override properties = {\n    type: { type: String },\n  } satisfies PropertyDeclarationMap<'type'>;\n\n  type: 'current' | 'pointer' = 'current';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-live', 'off');\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (!ctx) return;\n\n    const value = this.type === 'pointer' ? ctx.pointerValue : ctx.state.value;\n\n    this.textContent = ctx.formatValue ? ctx.formatValue(value, this.type) : String(Math.round(value));\n\n    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,qBAAb,cAAwC,UAAU;;;EAOlB,KAAA,OAAA;EAEd,KAAA,OAAA,IAAI,gBAAgB,MAAM;GACxC,SAAS;GACT,WAAW;EACb,CAAC;;;EAXyB,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,MAAM,EAAE,MAAM,OAAO,EACvB;;CAIA;CAKA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,aAAa,aAAa,KAAK;CACtC;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKA,KAAK;EACtB,IAAI,CAAC,KAAK;EAEV,MAAM,QAAQ,KAAK,SAAS,YAAY,IAAI,eAAe,IAAI,MAAM;EAErE,KAAK,cAAc,IAAI,cAAc,IAAI,YAAY,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,MAAM,KAAK,CAAC;EAEjG,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;CACvD;AACF"}
+{"version":3,"file":"value.js","names":["#ctx"],"sources":["../../../../src/ui/slider/value.ts"],"sourcesContent":["import { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { sliderContext } from './context';\n\n/** Writes the formatted current or pointer slider value into its own text content, replacing any children. */\nexport class SliderValueElement extends UIElement {\n  static readonly tagName = 'media-slider-value';\n\n  static override properties = {\n    type: { type: String },\n  } satisfies PropertyDeclarationMap<'type'>;\n\n  type: 'current' | 'pointer' = 'current';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-live', 'off');\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (!ctx) return;\n\n    const value = this.type === 'pointer' ? ctx.pointerValue : ctx.state.value;\n\n    this.textContent = ctx.formatValue ? ctx.formatValue(value, this.type) : String(Math.round(value));\n\n    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,qBAAb,cAAwC,UAAU;;;EAOlB,KAAA,OAAA;EAEd,KAAA,OAAA,IAAI,gBAAgB,MAAM;GACxC,SAAS;GACT,WAAW;EACb,CAAC;;;EAXyB,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,MAAM,EAAE,MAAM,OAAO,EACvB;;CAIA;CAKA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,aAAa,aAAa,KAAK;CACtC;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKA,KAAK;EACtB,IAAI,CAAC,KAAK;EAEV,MAAM,QAAQ,KAAK,SAAS,YAAY,IAAI,eAAe,IAAI,MAAM;EAErE,KAAK,cAAc,IAAI,cAAc,IAAI,YAAY,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,MAAM,KAAK,CAAC;EAEjG,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;CACvD;AACF"}

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

@@ -7,7 +7,9 @@ import { PropertyValues } from "@videojs/element";
  *
  * The element owns `src` and `srcset` on the active image. Left empty, it draws an image of its own in its shadow root.
  * Supply an `<img>` child instead — `<media-thumbnail time="12"><img alt=""></media-thumbnail>` — to compose overlays
- * or loading indicators beside the image the element controls.
+ * or loading indicators beside the image the element controls. Any `crossorigin`, `loading`, or `fetchpriority` the
+ * child already carries wins over the element's own; the rest are filled in. Inside a skin, an `<img slot="thumbnail">`
+ * of yours replaces the one the skin carries.
  */
 declare class ThumbnailElement extends UIElement {
   #private;

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

@@ -14,6 +14,15 @@ img,
 ::slotted(img) {
   display: block;
 }`;
+/**
+* Image attributes the element fills in from its own properties. Ones already on an image when it is adopted are the
+* author's and are left alone, so an `<img slot="thumbnail" loading="lazy">` keeps its settings inside a skin.
+*/
+const IMAGE_ATTRIBUTES = [
+	"crossorigin",
+	"loading",
+	"fetchpriority"
+];
 /** The image the element draws when none is supplied, reachable from outside as `::part(image)`. */
 function createFallbackImage() {
 	const img = document.createElement("img");
@@ -28,7 +37,9 @@ function createFallbackImage() {
 *
 * The element owns `src` and `srcset` on the active image. Left empty, it draws an image of its own in its shadow root.
 * Supply an `<img>` child instead — `<media-thumbnail time="12"><img alt=""></media-thumbnail>` — to compose overlays
-* or loading indicators beside the image the element controls.
+* or loading indicators beside the image the element controls. Any `crossorigin`, `loading`, or `fetchpriority` the
+* child already carries wins over the element's own; the rest are filled in. Inside a skin, an `<img slot="thumbnail">`
+* of yours replaces the one the skin carries.
 */
 var ThumbnailElement = class extends UIElement {
 	static {
@@ -56,6 +67,8 @@ var ThumbnailElement = class extends UIElement {
 	#textTracks;
 	#slots;
 	#img;
+	/** Attributes `#img` already carried when adopted, which the author owns. */
+	#authored;
 	#thumbnails;
 	#externalThumbnails;
 	#lastTextTrack;
@@ -71,6 +84,7 @@ var ThumbnailElement = class extends UIElement {
 		this.#textTracks = new PlayerController(this, playerContext, selectTextTrack);
 		this.#slots = null;
 		this.#img = null;
+		this.#authored = /* @__PURE__ */ new Set();
 		this.#thumbnails = [];
 		this.#api = null;
 		const style = document.createElement("style");
@@ -130,11 +144,7 @@ var ThumbnailElement = class extends UIElement {
 		const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);
 		const img = findComposedElement(this, isHTMLImageElement) ?? this.#fallback;
 		this.#adopt(img);
-		applyElementProps(img, {
-			crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),
-			loading: this.loading,
-			fetchpriority: this.fetchPriority
-		});
+		this.#applyImageAttributes(img, textTrack);
 		this.#api?.updateSrc(thumbnail?.url);
 		this.#applySource(thumbnail?.url);
 		this.#api?.connect();
@@ -163,6 +173,16 @@ var ThumbnailElement = class extends UIElement {
 	#inheritedCrossOrigin(textTrack) {
 		return this.#externalThumbnails ? void 0 : textTrack?.thumbnailTrackCrossOrigin;
 	}
+	/** Sync image attributes from element properties, leaving the ones the author put on the image alone. */
+	#applyImageAttributes(img, textTrack) {
+		const props = {
+			crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),
+			loading: this.loading,
+			fetchpriority: this.fetchPriority
+		};
+		for (const name of this.#authored) delete props[name];
+		applyElementProps(img, props);
+	}
 	#applyResize(result) {
 		this.style.width = `${result.containerWidth}px`;
 		this.style.height = `${result.containerHeight}px`;
@@ -191,8 +211,10 @@ var ThumbnailElement = class extends UIElement {
 			this.#resetStyles();
 			previous.removeAttribute("src");
 			previous.removeAttribute("srcset");
+			for (const name of IMAGE_ATTRIBUTES) if (!this.#authored.has(name)) previous.removeAttribute(name);
 		}
 		this.#img = next;
+		this.#authored = new Set(next ? IMAGE_ATTRIBUTES.filter((name) => next.hasAttribute(name)) : []);
 		this.#imageAttributes.disconnect();
 		if (next && next !== this.#fallback) this.#imageAttributes.observe(next, {
 			attributes: true,

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","#inheritedCrossOrigin","#applySource","#resetStyles","#applyResize"],"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/** 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.\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  #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\n    // Sync img attributes from element properties.\n    applyElementProps(img, {\n      crossorigin: this.#core.resolveCrossOrigin(this.crossOrigin, this.#inheritedCrossOrigin(textTrack)),\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    });\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n    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  #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\n    this.#img = next;\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":["#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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"}

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

@@ -1,5 +1,6 @@
 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 {
   static readonly tagName = "media-time-group";
 }

package/dist/dev/ui/time/group.js

@@ -1,5 +1,6 @@
 import { UIElement } from "../ui-element.js";
 //#region src/ui/time/group.ts
+/** Container for composed `<media-time>` and `<media-time-separator>` displays. */
 var TimeGroupElement = class extends UIElement {
 	static {
 		this.tagName = "media-time-group";

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

@@ -1 +1 @@
-{"version":3,"file":"group.js","names":[],"sources":["../../../../src/ui/time/group.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\nexport class TimeGroupElement extends UIElement {\n  static readonly tagName = 'media-time-group';\n\n  // Future: Could provide context for hoursDisplay to children via Lit context\n}\n"],"mappings":";;AAEA,IAAa,mBAAb,cAAsC,UAAU;;EACpB,KAAA,UAAA;;AAG5B"}
+{"version":3,"file":"group.js","names":[],"sources":["../../../../src/ui/time/group.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\n/** Container for composed `<media-time>` and `<media-time-separator>` displays. */\nexport class TimeGroupElement extends UIElement {\n  static readonly tagName = 'media-time-group';\n\n  // Future: Could provide context for hoursDisplay to children via Lit context\n}\n"],"mappings":";;;AAGA,IAAa,mBAAb,cAAsC,UAAU;;EACpB,KAAA,UAAA;;AAG5B"}

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

@@ -87,9 +87,12 @@ var TimeSliderElement = class extends UIElement {
 			isDisabled: () => {
 				const time = this.#timeState.value;
 				const buffer = this.#bufferState.value;
-				return this.disabled || !time || !buffer || !hasTimeRange({
+				return this.disabled || !time || !hasTimeRange({
 					...time,
-					...buffer
+					...buffer ?? {
+						buffered: [],
+						seekable: []
+					}
 				});
 			},
 			getPercent: () => {

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        return this.disabled || !time || !buffer || !hasTimeRange({ ...time, ...buffer });\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":["#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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"}

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

@@ -4,8 +4,7 @@ import { PropertyValues } from "@videojs/element";
 /**
  * Displays the resolved content title.
  *
- * The element owns its text content. Set the title through the player's `content-title` attribute rather than by
- * writing children.
+ * The element owns its text content. Set the title through the player's `content-title` attribute.
  */
 declare class TitleElement extends UIElement {
   #private;

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

@@ -2,13 +2,12 @@ import { playerContext } from "../../player/context.js";
 import { PlayerController } from "../../player/controller.js";
 import { UIElement } from "../ui-element.js";
 import { TitleCore, TitleDataAttrs } from "@videojs/core";
-import { applyStateDataAttrs, logMissingFeature, selectMetadata } from "@videojs/core/dom";
+import { applyStateDataAttrs, logMissingFeature, selectControls, selectMetadata } from "@videojs/core/dom";
 //#region src/ui/title/element.ts
 /**
 * Displays the resolved content title.
 *
-* The element owns its text content. Set the title through the player's `content-title` attribute rather than by
-* writing children.
+* The element owns its text content. Set the title through the player's `content-title` attribute.
 */
 var TitleElement = class extends UIElement {
 	static {
@@ -16,18 +15,17 @@ var TitleElement = class extends UIElement {
 	}
 	#core = new TitleCore();
 	#metadataState = new PlayerController(this, playerContext, selectMetadata);
-	#textNode = new Text();
+	#controlsState = new PlayerController(this, playerContext, selectControls);
 	connectedCallback() {
 		super.connectedCallback();
-		if (!this.#textNode.parentNode) this.append(this.#textNode);
 		if (!this.#metadataState.value) logMissingFeature(this.localName, this.#metadataState.displayName);
 	}
 	update(changed) {
 		super.update(changed);
 		const metadata = this.#metadataState.value;
 		if (!metadata) return;
-		const state = this.#core.getState(metadata);
-		this.#textNode.textContent = state.title;
+		const state = this.#core.getState(metadata, this.#controlsState.value);
+		if (this.textContent !== state.title) this.textContent = state.title;
 		this.hidden = state.hidden;
 		applyStateDataAttrs(this, state, TitleDataAttrs);
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#core","#metadataState","#textNode"],"sources":["../../../../src/ui/title/element.ts"],"sourcesContent":["import { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, 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 rather than by\n * writing children.\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\n  readonly #textNode = new Text();\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (!this.#textNode.parentNode) {\n      this.append(this.#textNode);\n    }\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);\n\n    this.#textNode.textContent = state.title;\n    this.hidden = state.hidden;\n\n    applyStateDataAttrs(this, state, TitleDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAcA,IAAa,eAAb,cAAkC,UAAU;;EAChB,KAAA,UAAA;;CAE1B,QAAiB,IAAI,UAAU;CAC/B,iBAA0B,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAElF,YAAqB,IAAI,KAAK;CAE9B,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,CAAC,KAAKE,UAAU,YAClB,KAAK,OAAO,KAAKA,SAAS;EAG5B,IAAe,CAAC,KAAKD,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,QAAQ;EAE1C,KAAKE,UAAU,cAAc,MAAM;EACnC,KAAK,SAAS,MAAM;EAEpB,oBAAoB,MAAM,OAAO,cAAc;CACjD;AACF"}
+{"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"}

package/docs/README.md

@@ -1,6 +1,6 @@
 # @videojs/html documentation
 
-Bundled markdown documentation for `@videojs/html` v10.0.0-rc.2.
+Bundled markdown documentation for `@videojs/html` v10.0.0-rc.4.
 
 Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.
 

package/docs/guides/accessibility.md

@@ -0,0 +1,93 @@
+# Accessibility
+
+How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
+
+Video.js is built with accessibility in mind so your player can reach the widest possible audience.
+
+Here are some of the accessibility aspects we consider. You should consider them too if you’re performing deeper customization.
+
+## Standards we target
+
+- [**WAI-ARIA 1.2**](https://www.w3.org/TR/wai-aria-1.2/) defines roles, states, and properties that [assistive technologies](https://www.w3.org/WAI/people-use-web/tools-techniques/) use to understand controls.
+- [**WCAG 2.2**](https://www.w3.org/TR/WCAG22/) provides success criteria for perceivable, operable, understandable, and robust web content.
+- [**CVAA**](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa) is a U.S. federal law requiring closed captioning and accessible controls for video content.
+- [**ADA**](https://www.ada.gov/) is a U.S. civil rights law that prohibits disability discrimination. Courts increasingly apply it to websites, including video players.
+- [**European Accessibility Act**](https://eur-lex.europa.eu/eli/dir/2019/882/oj) applies across the EU from June 28, 2025, and covers services such as e-commerce and audiovisual media. [**EN 301 549**](https://www.etsi.org/human-factors-accessibility/en-301-549-v3-the-harmonized-european-standard-for-ict-accessibility) is the European standard for meeting it, and it incorporates WCAG.
+
+These standards and laws are listed for context, not as legal advice. Check which ones apply to your product.
+
+## ARIA roles and labels
+
+Components set ARIA roles and attributes automatically. For example, sliders render with `role="slider"` and value attributes, buttons update their `aria-label` based on player state, and decorative elements like time separators are hidden with `aria-hidden="true"`.
+
+Built-in labels are translated. See [Internationalize the player](./internationalization.md) to add or switch locales, and verify that labels are contextually correct for your content. Each component’s reference page documents the attributes it sets.
+
+Tooltips are visual only. They are not linked to their trigger with `aria-describedby`, so a custom trigger needs its own accessible name. Built-in media buttons already have one.
+
+## Keyboard interaction
+
+All interactive components support keyboard control. For example, buttons activate with Enter and Space, sliders respond to Arrow keys, Home, End, and Page Up/Page Down, and popovers close with Escape. Each component’s reference page lists its full keyboard support. We follow the patterns in the [WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/).
+
+Player-wide shortcuts, such as Space to play or M to mute, and tap gestures come from hotkey and gesture components. The skins ship a full set, and custom UI declares its own. See [Add keyboard shortcuts and gestures](./keyboard-shortcuts.md).
+
+## Focus management
+
+Interactive elements are focusable when enabled and leave the [tab order](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) when disabled. Popover triggers link to their popups with `aria-controls` and `aria-expanded`. Menus and popovers close when focus moves away.
+
+Dialogs move focus inside when they open, keep Tab within the dialog, and make the content behind them inert. Closing a dialog returns focus to its trigger, or to the element that had focus before it opened.
+
+The player container is focusable and labeled: it takes `role="group"`, `tabindex="0"`, and an `aria-label` you can override. Keyboard users can tab to the player as a whole, and screen readers announce it as a named group.
+
+## Status announcements
+
+The player announces confirmed state changes through a visually hidden live region (`role="status"`), so screen reader users hear when playback starts or pauses, captions turn on or off, fullscreen, picture-in-picture, playback rate, or volume change, and where a seek lands.
+
+Announcements follow confirmed state from the player store rather than requested changes, so routine time updates never reach the live region. Rapid volume and seek changes are grouped into a single announcement, and the player stays quiet while one of its sliders has focus, since the slider already announces its own value. The skins include the [status announcer](../reference/components/status-announcer.md). A custom layout needs to add it. State the store tracks is covered once it’s there; a custom control that tracks its own state needs its own live region.
+
+## Captions and subtitles
+
+The [text tracks feature](../reference/api/feature-text-tracks.md) supports captions and subtitles. Closed captions in the U.S. are governed by the [FCC](https://www.fcc.gov/) under the [CVAA](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa), which requires both captioning and viewer control over caption appearance (font, size, color, opacity, and edge style). Non-compliance carries legal risk.
+
+Video.js leaves caption rendering to the browser, and you style cues with the `::cue` pseudo-element. It doesn’t include a menu for caption appearance, so viewers rely on the caption preferences their browser and operating system provide. The [WebKit Caption Display Settings explainer](https://github.com/WebKit/explainers/tree/main/CaptionDisplaySettings) tracks how browsers are bringing these preferences into the web platform. See [Show captions and subtitles](./captions.md) to add tracks and a captions control.
+
+## Transcripts and audio description
+
+Captions don’t cover every viewer. [WCAG 2.2](https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded) also expects audio description or a text alternative for prerecorded video. A transcript can live inside the [player](../reference/components/player.md) but outside its container, so it reads player state without going fullscreen with the video. When a stream includes a described audio track, an [audio track menu](../reference/components/audio-track-radio-group.md) lets viewers choose it.
+
+## Color contrast
+
+Skins respond to [`prefers-contrast: more`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) by increasing background opacity on overlays and controls, and to [`prefers-reduced-transparency: reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) by raising baseline opacity so text stays readable over video.
+
+Video is harder than most UI for contrast because the background is always changing. A control that passes checks over a dark frame can disappear over a bright title card. Automated tools won’t catch this, so test your controls against light, dark, and mixed video content. Custom components should test against [WCAG 1.4.3 (contrast minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) and [1.4.11 (non-text contrast)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast).
+
+## Touch targets
+
+Skin controls size from `--media-scale-unit`, which defaults to `16px`, so they don’t grow with the user’s font size preference. Set it to `1rem` to scale with the document root font size. See [Customize skins](./customize-skins.md#scale-from-the-document-font-size).
+
+Skin buttons set [`touch-action: manipulation`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) to remove tap delay on touch devices, and sliders set `touch-action: none` so dragging doesn’t scroll the page. Skins use [`pointer: fine` and `pointer: coarse`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) to adapt transitions for mouse and touch input.
+
+If you build custom controls, target at least 24x24 CSS pixels per [WCAG 2.5.8 (target size minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum). Larger is better on touch-first surfaces.
+
+## Color scheme
+
+The audio skins switch their palette for light and dark mode with [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark), which follows the inherited [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme), not the user’s preference directly. Set `color-scheme: light dark` on the page or the player to follow the user’s setting. The video skins keep dark controls in both schemes; only their border follows it. See [Customize skins](./customize-skins.md#set-the-color-scheme).
+
+## Reduced motion
+
+Skins respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) by simplifying or removing animations and transitions. Follow the same pattern in custom components.
+
+That covers the controls, not the video. Video.js doesn’t pause or hide autoplaying video for reduced-motion users; your page decides that.
+
+## Autoplay and moving video
+
+[WCAG 2.2.2](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide) requires a way to pause, stop, or hide motion that starts automatically and lasts more than five seconds. A muted, looping hero video counts. Give it a pause control, or keep it short.
+
+A purely decorative video should be hidden from assistive technology with `aria-hidden="true"` on its wrapper. If the video carries information, give it an accessible name and controls, and use a regular player. See [Add a background video](./background-video.md) and [Autoplay](./autoplay.md).
+
+## Test with assistive technology
+
+Automated tools catch markup issues but miss real usability problems. Test your player with a [screen reader](https://www.w3.org/WAI/people-use-web/tools-techniques/) ([VoiceOver](https://support.apple.com/guide/voiceover/welcome/mac) on macOS, [NVDA](https://www.nvaccess.org/about-nvda/) or [JAWS](https://www.freedomscientific.com/products/software/jaws/) on Windows) and keyboard-only navigation. Verify that every control is reachable, operable, and announces its purpose and state. The [WAI “Easy Checks”](https://www.w3.org/WAI/test-evaluate/preliminary/) are a good starting point.
+
+## Further reading
+
+The W3C WAI guides on [making audio and video media accessible](https://www.w3.org/WAI/media/av/) and [accessible media players](https://www.w3.org/WAI/media/av/player/) go deeper on everything covered here.