@videojs/html 10.0.0-beta.9 → 10.0.0-rc.1

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

@@ -1,15 +1,25 @@
-import { MediaElement } from "../media-element.js";
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { UIElement } from "../ui-element.js";
 import { sliderContext } from "./context.js";
-import { applyElementProps, applyStateDataAttrs, createSlider, getSliderCSSVars } from "@videojs/core/dom";
-import { ContextProvider } from "@videojs/element/context";
 import { SliderCore, SliderDataAttrs } from "@videojs/core";
-import { applyStyles, isRTL } from "@videojs/utils/dom";
-
+import { applyElementProps, applyStateDataAttrs, createSlider, getSliderCSSVars, selectControls } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { translateText } from "@videojs/core/i18n";
+import { applyStyles } from "@videojs/utils/dom";
 //#region src/ui/slider/slider-element.ts
-var SliderElement = class extends MediaElement {
+/**
+* @fires value-change - Fired while the slider value changes during an interaction.
+* @fires value-commit - Fired when an interaction commits the slider value.
+* @fires drag-start - Fired when a pointer drag starts.
+* @fires drag-end - Fired when a pointer drag ends.
+*/
+var SliderElement = class extends UIElement {
 	constructor(..._args) {
 		super(..._args);
-		this.label = SliderCore.defaultProps.label;
+		this.label = "";
 		this.value = SliderCore.defaultProps.value;
 		this.min = SliderCore.defaultProps.min;
 		this.max = SliderCore.defaultProps.max;
@@ -18,6 +28,13 @@ var SliderElement = class extends MediaElement {
 		this.orientation = SliderCore.defaultProps.orientation;
 		this.disabled = SliderCore.defaultProps.disabled;
 		this.thumbAlignment = SliderCore.defaultProps.thumbAlignment;
+		this.#core = new SliderCore();
+		this.#controlsState = new PlayerController(this, playerContext, selectControls);
+		this.#i18n = new I18nController(this, i18nContext);
+		this.#provider = new ContextProvider(this, { context: sliderContext });
+		this.#slider = null;
+		this.#disconnect = null;
+		this.#releaseControlsLock = null;
 	}
 	static {
 		this.tagName = "media-slider";
@@ -41,10 +58,13 @@ var SliderElement = class extends MediaElement {
 			}
 		};
 	}
-	#core = new SliderCore();
-	#provider = new ContextProvider(this, { context: sliderContext });
-	#slider = null;
-	#disconnect = null;
+	#core;
+	#controlsState;
+	#i18n;
+	#provider;
+	#slider;
+	#disconnect;
+	#releaseControlsLock;
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;
@@ -54,7 +74,6 @@ var SliderElement = class extends MediaElement {
 			getElement: () => this,
 			getThumbElement: () => this.querySelector("media-slider-thumb"),
 			getOrientation: () => this.orientation,
-			isRTL: () => isRTL(this),
 			isDisabled: () => this.disabled,
 			getPercent: () => this.#core.percentFromValue(this.value),
 			getStepPercent: () => this.#core.getStepPercent(),
@@ -73,6 +92,10 @@ var SliderElement = class extends MediaElement {
 					bubbles: true
 				}));
 			},
+			onPressStart: () => {
+				this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;
+			},
+			onPressEnd: () => this.#releaseControlsVisibilityLock(),
 			onDragStart: () => {
 				this.dispatchEvent(new CustomEvent("drag-start", { bubbles: true }));
 			},
@@ -87,14 +110,20 @@ var SliderElement = class extends MediaElement {
 		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
 	}
 	disconnectedCallback() {
+		this.#releaseControlsVisibilityLock();
 		super.disconnectedCallback();
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
 	destroyCallback() {
+		this.#releaseControlsVisibilityLock();
 		this.#slider?.destroy();
 		super.destroyCallback();
 	}
+	#releaseControlsVisibilityLock() {
+		this.#releaseControlsLock?.();
+		this.#releaseControlsLock = null;
+	}
 	willUpdate(_changed) {
 		super.willUpdate(_changed);
 		this.#core.setProps(this);
@@ -111,12 +140,18 @@ var SliderElement = class extends MediaElement {
 			state,
 			stateAttrMap: SliderDataAttrs,
 			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
-			thumbAttrs: this.#core.getAttrs(state),
+			thumbAttrs: (() => {
+				const attrs = this.#core.getAttrs(state);
+				return {
+					...attrs,
+					"aria-label": translateText(attrs["aria-label"], this.#i18n.value)
+				};
+			})(),
 			thumbProps: this.#slider.thumbProps
 		});
 	}
 };
-
 //#endregion
 export { SliderElement };
+
 //# sourceMappingURL=slider-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-element.js","names":["#core","#provider","#disconnect","#slider"],"sources":["../../../../src/ui/slider/slider-element.ts"],"sourcesContent":["import { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getSliderCSSVars,\n  type SliderApi,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles, isRTL } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderElement extends MediaElement {\n  static readonly tagName = 'media-slider';\n\n  static override properties = {\n    label: { type: String },\n    value: { type: Number },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<keyof SliderCore.Props>;\n\n  label = SliderCore.defaultProps.label;\n  value = SliderCore.defaultProps.value;\n  min = SliderCore.defaultProps.min;\n  max = SliderCore.defaultProps.max;\n  step = SliderCore.defaultProps.step;\n  largeStep = SliderCore.defaultProps.largeStep;\n  orientation = SliderCore.defaultProps.orientation;\n  disabled = SliderCore.defaultProps.disabled;\n  thumbAlignment = SliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new SliderCore();\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isRTL: () => isRTL(this),\n      isDisabled: () => this.disabled,\n      getPercent: () => this.#core.percentFromValue(this.value),\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true }));\n      },\n      onValueCommit: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-commit', { detail: { value: this.value }, bubbles: true }));\n      },\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#slider) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const state = this.#core.getSliderState(this.value);\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Apply state data attributes to the root element.\n    applyStateDataAttrs(this, state, SliderDataAttrs);\n\n    // Provide context to child elements (thumb, value, track, etc.).\n    this.#provider.setValue({\n      state,\n      stateAttrMap: SliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n    });\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"slider-element.js","names":["#core","#controlsState","#i18n","#provider","#disconnect","#slider","#releaseControlsLock","#releaseControlsVisibilityLock"],"sources":["../../../../src/ui/slider/slider-element.ts"],"sourcesContent":["import { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getSliderCSSVars,\n  type SliderApi,\n  selectControls,\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 { applyStyles } from '@videojs/utils/dom';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { UIElement } from '../ui-element';\nimport { sliderContext } from './context';\n\n/**\n * @fires value-change - Fired while the slider value changes during an interaction.\n * @fires value-commit - Fired when an interaction commits the slider value.\n * @fires drag-start - Fired when a pointer drag starts.\n * @fires drag-end - Fired when a pointer drag ends.\n */\nexport class SliderElement extends UIElement {\n  static readonly tagName = 'media-slider';\n\n  static override properties = {\n    label: { type: String },\n    value: { type: Number },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<keyof SliderCore.Props>;\n\n  label: Text | string = '';\n  value = SliderCore.defaultProps.value;\n  min = SliderCore.defaultProps.min;\n  max = SliderCore.defaultProps.max;\n  step = SliderCore.defaultProps.step;\n  largeStep = SliderCore.defaultProps.largeStep;\n  orientation = SliderCore.defaultProps.orientation;\n  disabled = SliderCore.defaultProps.disabled;\n  thumbAlignment = SliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new SliderCore();\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\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: () => this.disabled,\n      getPercent: () => this.#core.percentFromValue(this.value),\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true }));\n      },\n      onValueCommit: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-commit', { detail: { value: this.value }, bubbles: true }));\n      },\n      onPressStart: () => {\n        this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n      },\n      onPressEnd: () => this.#releaseControlsVisibilityLock(),\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n      onResize: () => this.requestUpdate(),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    applyStyles(this, this.#slider.rootStyle);\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    this.#slider?.destroy();\n    super.destroyCallback();\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(this);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#slider) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const state = this.#core.getSliderState(this.value);\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Apply state data attributes to the root element.\n    applyStateDataAttrs(this, state, SliderDataAttrs);\n\n    // Provide context to child elements (thumb, value, track, etc.).\n    this.#provider.setValue({\n      state,\n      stateAttrMap: SliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: (() => {\n        const attrs = this.#core.getAttrs(state);\n\n        return { ...attrs, 'aria-label': translateText(attrs['aria-label'], this.#i18n.value) };\n      })(),\n      thumbProps: this.#slider.thumbProps,\n    });\n  }\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,6 @@
 import { ContextPartElement } from "../context-part-element.js";
 import { sliderContext } from "./context.js";
 import { ContextConsumer } from "@videojs/element/context";
-
 //#region src/ui/slider/slider-fill-element.ts
 var SliderFillElement = class extends ContextPartElement {
 	constructor(..._args) {
@@ -15,7 +14,7 @@ var SliderFillElement = class extends ContextPartElement {
 		this.tagName = "media-slider-fill";
 	}
 };
-
 //#endregion
 export { SliderFillElement };
+
 //# sourceMappingURL=slider-fill-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-fill-element.js","names":[],"sources":["../../../../src/ui/slider/slider-fill-element.ts"],"sourcesContent":["import type { SliderState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { sliderContext } from './context';\n\nexport class SliderFillElement extends ContextPartElement<SliderState> {\n  static readonly tagName = 'media-slider-fill';\n\n  protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n}\n"],"mappings":";;;;;AAMA,IAAa,oBAAb,cAAuC,mBAAgC;;;kBAGvC,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAe,WAAW;GAAM,CAAC;;;iBAF1E"}
+{"version":3,"file":"slider-fill-element.js","names":[],"sources":["../../../../src/ui/slider/slider-fill-element.ts"],"sourcesContent":["import type { SliderState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { sliderContext } from './context';\n\nexport class SliderFillElement extends ContextPartElement<SliderState> {\n  static readonly tagName = 'media-slider-fill';\n\n  protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n}\n"],"mappings":";;;;AAMA,IAAa,oBAAb,cAAuC,mBAAgC;;;EAGvC,KAAA,WAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAe,WAAW;EAAK,CAAC;;;EAFzE,KAAA,UAAA;;AAG5B"}

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

@@ -1,14 +1,19 @@
-import { MediaElement } from "../media-element.js";
+import { UIElement } from "../ui-element.js";
 import { sliderContext } from "./context.js";
 import { applyStateDataAttrs, getSliderPreviewStyle } from "@videojs/core/dom";
 import { ContextConsumer } from "@videojs/element/context";
-import { applyStyles } from "@videojs/utils/dom";
-
+import { applyStyles, observeResize } from "@videojs/utils/dom";
 //#region src/ui/slider/slider-preview-element.ts
-var SliderPreviewElement = class extends MediaElement {
+var SliderPreviewElement = class extends UIElement {
 	constructor(..._args) {
 		super(..._args);
 		this.overflow = "clamp";
+		this.#ctx = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
+		this.#stopObservingResize = null;
+		this.#width = 0;
 	}
 	static {
 		this.tagName = "media-slider-preview";
@@ -16,24 +21,20 @@ var SliderPreviewElement = class extends MediaElement {
 	static {
 		this.properties = { overflow: { type: String } };
 	}
-	#ctx = new ContextConsumer(this, {
-		context: sliderContext,
-		subscribe: true
-	});
-	#resizeObserver = null;
-	#width = 0;
+	#ctx;
+	#stopObservingResize;
+	#width;
 	connectedCallback() {
 		super.connectedCallback();
-		this.#resizeObserver = new ResizeObserver(([entry]) => {
+		this.#stopObservingResize = observeResize(this, ([entry]) => {
 			this.#width = entry.contentRect.width;
 			this.#applyPosition();
 		});
-		this.#resizeObserver.observe(this);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.#resizeObserver?.disconnect();
-		this.#resizeObserver = null;
+		this.#stopObservingResize?.();
+		this.#stopObservingResize = null;
 	}
 	#applyPosition() {
 		applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));
@@ -45,7 +46,7 @@ var SliderPreviewElement = class extends MediaElement {
 		this.#applyPosition();
 	}
 };
-
 //#endregion
 export { SliderPreviewElement };
+
 //# sourceMappingURL=slider-preview-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-preview-element.js","names":["#ctx","#resizeObserver","#width","#applyPosition"],"sources":["../../../../src/ui/slider/slider-preview-element.ts"],"sourcesContent":["import type { SliderPreviewOverflow } from '@videojs/core/dom';\nimport { applyStateDataAttrs, getSliderPreviewStyle } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderPreviewElement extends MediaElement {\n  static readonly tagName = 'media-slider-preview';\n\n  static override properties = {\n    overflow: { type: String },\n  } satisfies PropertyDeclarationMap<'overflow'>;\n\n  overflow: SliderPreviewOverflow = 'clamp';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  #resizeObserver: ResizeObserver | null = null;\n  #width = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#resizeObserver = new ResizeObserver(([entry]) => {\n      this.#width = entry!.contentRect.width;\n      this.#applyPosition();\n    });\n\n    this.#resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  #applyPosition(): void {\n    applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n\n    this.#applyPosition();\n  }\n}\n"],"mappings":";;;;;;;AASA,IAAa,uBAAb,cAA0C,aAAa;;;kBAOnB;;;iBANR;;;oBAEG,EAC3B,UAAU,EAAE,MAAM,QAAQ,EAC3B;;CAID,CAASA,MAAO,IAAI,gBAAgB,MAAM;EACxC,SAAS;EACT,WAAW;EACZ,CAAC;CAEF,kBAAyC;CACzC,SAAS;CAET,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,iBAAkB,IAAI,gBAAgB,CAAC,WAAW;AACrD,SAAKC,QAAS,MAAO,YAAY;AACjC,SAAKC,eAAgB;IACrB;AAEF,QAAKF,eAAgB,QAAQ,KAAK;;CAGpC,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,gBAAiB,YAAY;AAClC,QAAKA,iBAAkB;;CAGzB,iBAAuB;AACrB,cAAY,MAAM,sBAAsB,MAAKC,OAAQ,KAAK,SAAS,CAAC;;CAGtE,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,MAAM,MAAKF,IAAK;AACtB,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa;AAE/D,QAAKG,eAAgB"}
+{"version":3,"file":"slider-preview-element.js","names":["#ctx","#stopObservingResize","#width","#applyPosition"],"sources":["../../../../src/ui/slider/slider-preview-element.ts"],"sourcesContent":["import type { SliderPreviewProps } from '@videojs/core';\nimport { applyStateDataAttrs, getSliderPreviewStyle } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { applyStyles, observeResize } from '@videojs/utils/dom';\n\nimport { UIElement } from '../ui-element';\nimport { sliderContext } from './context';\n\nexport class SliderPreviewElement extends UIElement {\n  static readonly tagName = 'media-slider-preview';\n\n  static override properties = {\n    overflow: { type: String },\n  } satisfies PropertyDeclarationMap<'overflow'>;\n\n  overflow: NonNullable<SliderPreviewProps['overflow']> = 'clamp';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  #stopObservingResize: (() => void) | null = null;\n  #width = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#stopObservingResize = observeResize(this, ([entry]) => {\n      this.#width = entry!.contentRect.width;\n      this.#applyPosition();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#stopObservingResize?.();\n    this.#stopObservingResize = null;\n  }\n\n  #applyPosition(): void {\n    applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n\n    this.#applyPosition();\n  }\n}\n"],"mappings":";;;;;;AASA,IAAa,uBAAb,cAA0C,UAAU;;;EAOM,KAAA,WAAA;EAExC,KAAA,OAAA,IAAI,gBAAgB,MAAM;GACxC,SAAS;GACT,WAAW;EACb,CAAC;EAE2C,KAAA,uBAAA;EACnC,KAAA,SAAA;;;EAdiB,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,UAAU,EAAE,MAAM,OAAO,EAC3B;;CAIA;CAKA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,KAAKC,uBAAuB,cAAc,OAAO,CAAC,WAAW;GAC3D,KAAKC,SAAS,MAAO,YAAY;GACjC,KAAKC,eAAe;EACtB,CAAC;CACH;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKF,uBAAuB;EAC5B,KAAKA,uBAAuB;CAC9B;CAEA,iBAAuB;EACrB,YAAY,MAAM,sBAAsB,KAAKC,QAAQ,KAAK,QAAQ,CAAC;CACrE;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKF,KAAK;EAEtB,IAAI,KAAK,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;EAE9D,KAAKG,eAAe;CACtB;AACF"}

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

@@ -1,10 +1,9 @@
-import { MediaElement } from "../media-element.js";
+import { UIElement } from "../ui-element.js";
 import { sliderContext } from "./context.js";
 import { applyElementProps, applyStateDataAttrs } from "@videojs/core/dom";
 import { ContextConsumer } from "@videojs/element/context";
-
 //#region src/ui/slider/slider-thumb-element.ts
-var SliderThumbElement = class extends MediaElement {
+var SliderThumbElement = class extends UIElement {
 	static {
 		this.tagName = "media-slider-thumb";
 	}
@@ -37,7 +36,7 @@ var SliderThumbElement = class extends MediaElement {
 		applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
 	}
 };
-
 //#endregion
 export { SliderThumbElement };
+
 //# sourceMappingURL=slider-thumb-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-thumb-element.js","names":["#ctx","#disconnect","#thumbPropsApplied"],"sources":["../../../../src/ui/slider/slider-thumb-element.ts"],"sourcesContent":["import { applyElementProps, applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderThumbElement extends MediaElement {\n  static readonly tagName = 'media-slider-thumb';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  #disconnect: AbortController | null = null;\n  #thumbPropsApplied = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n    this.#thumbPropsApplied = false;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    this.#thumbPropsApplied = false;\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    // Apply keyboard and focus handlers once — they don't change per slider instance.\n    if (!this.#thumbPropsApplied && this.#disconnect) {\n      applyElementProps(this, ctx.thumbProps, { signal: this.#disconnect.signal });\n      this.#thumbPropsApplied = true;\n    }\n\n    // Apply ARIA attributes every update (values change as slider moves).\n    applyElementProps(this, ctx.thumbAttrs);\n\n    // Apply state data attributes.\n    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,qBAAb,cAAwC,aAAa;;iBACzB;;CAE1B,CAASA,MAAO,IAAI,gBAAgB,MAAM;EACxC,SAAS;EACT,WAAW;EACZ,CAAC;CAEF,cAAsC;CACtC,qBAAqB;CAErB,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AACzB,QAAKC,aAAc,IAAI,iBAAiB;AACxC,QAAKC,oBAAqB;;CAG5B,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKD,YAAa,OAAO;AACzB,QAAKA,aAAc;AACnB,QAAKC,oBAAqB;;CAG5B,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,MAAM,MAAKF,IAAK;AACtB,MAAI,CAAC,IAAK;AAGV,MAAI,CAAC,MAAKE,qBAAsB,MAAKD,YAAa;AAChD,qBAAkB,MAAM,IAAI,YAAY,EAAE,QAAQ,MAAKA,WAAY,QAAQ,CAAC;AAC5E,SAAKC,oBAAqB;;AAI5B,oBAAkB,MAAM,IAAI,WAAW;AAGvC,sBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}
+{"version":3,"file":"slider-thumb-element.js","names":["#ctx","#disconnect","#thumbPropsApplied"],"sources":["../../../../src/ui/slider/slider-thumb-element.ts"],"sourcesContent":["import { applyElementProps, applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { sliderContext } from './context';\n\nexport class SliderThumbElement extends UIElement {\n  static readonly tagName = 'media-slider-thumb';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  #disconnect: AbortController | null = null;\n  #thumbPropsApplied = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n    this.#thumbPropsApplied = false;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    this.#thumbPropsApplied = false;\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    // Apply keyboard and focus handlers once — they don't change per slider instance.\n    if (!this.#thumbPropsApplied && this.#disconnect) {\n      applyElementProps(this, ctx.thumbProps, { signal: this.#disconnect.signal });\n      this.#thumbPropsApplied = true;\n    }\n\n    // Apply ARIA attributes every update (values change as slider moves).\n    applyElementProps(this, ctx.thumbAttrs);\n\n    // Apply state data attributes.\n    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,qBAAb,cAAwC,UAAU;;EACtB,KAAA,UAAA;;CAE1B,OAAgB,IAAI,gBAAgB,MAAM;EACxC,SAAS;EACT,WAAW;CACb,CAAC;CAED,cAAsC;CACtC,qBAAqB;CAErB,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAKC,cAAc,IAAI,gBAAgB;EACvC,KAAKC,qBAAqB;CAC5B;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKD,aAAa,MAAM;EACxB,KAAKA,cAAc;EACnB,KAAKC,qBAAqB;CAC5B;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKF,KAAK;EACtB,IAAI,CAAC,KAAK;EAGV,IAAI,CAAC,KAAKE,sBAAsB,KAAKD,aAAa;GAChD,kBAAkB,MAAM,IAAI,YAAY,EAAE,QAAQ,KAAKA,YAAY,OAAO,CAAC;GAC3E,KAAKC,qBAAqB;EAC5B;EAGA,kBAAkB,MAAM,IAAI,UAAU;EAGtC,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;CACvD;AACF"}

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

@@ -1,7 +1,6 @@
 import { sliderContext } from "./context.js";
 import { ThumbnailElement } from "../thumbnail/thumbnail-element.js";
 import { ContextConsumer } from "@videojs/element/context";
-
 //#region src/ui/slider/slider-thumbnail-element.ts
 var SliderThumbnailElement = class extends ThumbnailElement {
 	static {
@@ -17,7 +16,7 @@ var SliderThumbnailElement = class extends ThumbnailElement {
 		super.update(changed);
 	}
 };
-
 //#endregion
 export { SliderThumbnailElement };
+
 //# sourceMappingURL=slider-thumbnail-element.js.map

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

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

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

@@ -1,7 +1,6 @@
 import { ContextPartElement } from "../context-part-element.js";
 import { sliderContext } from "./context.js";
 import { ContextConsumer } from "@videojs/element/context";
-
 //#region src/ui/slider/slider-track-element.ts
 var SliderTrackElement = class extends ContextPartElement {
 	constructor(..._args) {
@@ -15,7 +14,7 @@ var SliderTrackElement = class extends ContextPartElement {
 		this.tagName = "media-slider-track";
 	}
 };
-
 //#endregion
 export { SliderTrackElement };
+
 //# sourceMappingURL=slider-track-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-track-element.js","names":[],"sources":["../../../../src/ui/slider/slider-track-element.ts"],"sourcesContent":["import type { SliderState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { sliderContext } from './context';\n\nexport class SliderTrackElement extends ContextPartElement<SliderState> {\n  static readonly tagName = 'media-slider-track';\n\n  protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n}\n"],"mappings":";;;;;AAMA,IAAa,qBAAb,cAAwC,mBAAgC;;;kBAGxC,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAe,WAAW;GAAM,CAAC;;;iBAF1E"}
+{"version":3,"file":"slider-track-element.js","names":[],"sources":["../../../../src/ui/slider/slider-track-element.ts"],"sourcesContent":["import type { SliderState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { sliderContext } from './context';\n\nexport class SliderTrackElement extends ContextPartElement<SliderState> {\n  static readonly tagName = 'media-slider-track';\n\n  protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n}\n"],"mappings":";;;;AAMA,IAAa,qBAAb,cAAwC,mBAAgC;;;EAGxC,KAAA,WAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAe,WAAW;EAAK,CAAC;;;EAFzE,KAAA,UAAA;;AAG5B"}

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

@@ -1,13 +1,16 @@
-import { MediaElement } from "../media-element.js";
+import { UIElement } from "../ui-element.js";
 import { sliderContext } from "./context.js";
 import { applyStateDataAttrs } from "@videojs/core/dom";
 import { ContextConsumer } from "@videojs/element/context";
-
 //#region src/ui/slider/slider-value-element.ts
-var SliderValueElement = class extends MediaElement {
+var SliderValueElement = class extends UIElement {
 	constructor(..._args) {
 		super(..._args);
 		this.type = "current";
+		this.#ctx = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
 	}
 	static {
 		this.tagName = "media-slider-value";
@@ -15,10 +18,7 @@ var SliderValueElement = class extends MediaElement {
 	static {
 		this.properties = { type: { type: String } };
 	}
-	#ctx = new ContextConsumer(this, {
-		context: sliderContext,
-		subscribe: true
-	});
+	#ctx;
 	connectedCallback() {
 		super.connectedCallback();
 		this.setAttribute("aria-live", "off");
@@ -32,7 +32,7 @@ var SliderValueElement = class extends MediaElement {
 		applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
 	}
 };
-
 //#endregion
 export { SliderValueElement };
+
 //# sourceMappingURL=slider-value-element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"slider-value-element.js","names":["#ctx"],"sources":["../../../../src/ui/slider/slider-value-element.ts"],"sourcesContent":["import { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderValueElement extends MediaElement {\n  static readonly tagName = 'media-slider-value';\n\n  static override properties = {\n    type: { type: String },\n  } satisfies PropertyDeclarationMap<'type'>;\n\n  type: 'current' | 'pointer' = 'current';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-live', 'off');\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (!ctx) return;\n\n    const value = this.type === 'pointer' ? ctx.pointerValue : ctx.state.value;\n\n    this.textContent = ctx.formatValue ? ctx.formatValue(value, this.type) : String(Math.round(value));\n\n    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,qBAAb,cAAwC,aAAa;;;cAOrB;;;iBANJ;;;oBAEG,EAC3B,MAAM,EAAE,MAAM,QAAQ,EACvB;;CAID,CAASA,MAAO,IAAI,gBAAgB,MAAM;EACxC,SAAS;EACT,WAAW;EACZ,CAAC;CAEF,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AACzB,OAAK,aAAa,aAAa,MAAM;;CAGvC,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,MAAM,MAAKA,IAAK;AACtB,MAAI,CAAC,IAAK;EAEV,MAAM,QAAQ,KAAK,SAAS,YAAY,IAAI,eAAe,IAAI,MAAM;AAErE,OAAK,cAAc,IAAI,cAAc,IAAI,YAAY,OAAO,KAAK,KAAK,GAAG,OAAO,KAAK,MAAM,MAAM,CAAC;AAElG,sBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}
+{"version":3,"file":"slider-value-element.js","names":["#ctx"],"sources":["../../../../src/ui/slider/slider-value-element.ts"],"sourcesContent":["import { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { 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"}

package/dist/default/ui/status-announcer/status-announcer-element.js

@@ -0,0 +1,90 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { containerContext, playerContext } from "../../player/context.js";
+import { UIElement } from "../ui-element.js";
+import { StatusAnnouncerCore, createStatusAnnouncerLabels } from "@videojs/core";
+import { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/status-announcer/status-announcer-element.ts
+var StatusAnnouncerElement = class extends UIElement {
+	static {
+		this.tagName = "media-status-announcer";
+	}
+	static {
+		this.properties = { closeDelay: {
+			type: Number,
+			attribute: "close-delay"
+		} };
+	}
+	#i18n = new I18nController(this, i18nContext);
+	#core = new StatusAnnouncerCore();
+	#storeUnsubscribe = null;
+	#player = new ContextConsumer(this, {
+		context: playerContext,
+		callback: (store) => this.#reconnect(store),
+		subscribe: true
+	});
+	#container = new ContextConsumer(this, {
+		context: containerContext,
+		subscribe: true
+	});
+	#disconnect = null;
+	#liveText = null;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.setAttribute("role", "status");
+		this.#ensureLiveText();
+		this.#disconnect = new AbortController();
+		this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.#reconnect();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#storeUnsubscribe?.();
+		this.#storeUnsubscribe = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#storeUnsubscribe?.();
+		this.#core.destroy();
+		super.destroyCallback();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.#core.setProps({
+			closeDelay: this.closeDelay,
+			labels: createStatusAnnouncerLabels(this.#i18n.value, this.#i18n.locale),
+			shouldAnnounce: () => shouldAnnounceStatusChange(this.#container.value?.container)
+		});
+	}
+	update(changed) {
+		super.update(changed);
+		const label = this.#core.state.current.label;
+		const liveText = this.#ensureLiveText();
+		if (label === null) liveText.replaceChildren();
+		else liveText.replaceChildren(document.createTextNode(label));
+	}
+	#reconnect(store = this.#player.value) {
+		this.#storeUnsubscribe?.();
+		this.#storeUnsubscribe = null;
+		if (!store) {
+			this.#core.resetSnapshot();
+			return;
+		}
+		this.#storeUnsubscribe = subscribeToStatusAnnouncer(store, this.#core);
+	}
+	#ensureLiveText() {
+		if (this.#liveText?.isConnected) return this.#liveText;
+		const existing = this.querySelector("[data-status-announcer-content]");
+		this.#liveText = existing ?? document.createElement("span");
+		this.#liveText.setAttribute("data-status-announcer-content", "");
+		if (!existing) this.append(this.#liveText);
+		return this.#liveText;
+	}
+};
+//#endregion
+export { StatusAnnouncerElement };
+
+//# sourceMappingURL=status-announcer-element.js.map

package/dist/default/ui/status-announcer/status-announcer-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-announcer-element.js","names":["#i18n","#core","#player","#reconnect","#container","#ensureLiveText","#disconnect","#storeUnsubscribe","#liveText"],"sources":["../../../../src/ui/status-announcer/status-announcer-element.ts"],"sourcesContent":["import { createStatusAnnouncerLabels, StatusAnnouncerCore } from '@videojs/core';\nimport { type StatusAnnouncerStore, shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { containerContext, playerContext } from '../../player/context';\nimport { UIElement } from '../ui-element';\n\nexport class StatusAnnouncerElement extends UIElement {\n  static readonly tagName = 'media-status-announcer';\n\n  static override properties = {\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'closeDelay'>;\n\n  closeDelay: number | undefined;\n\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #core = new StatusAnnouncerCore();\n  // Context can resolve while connected markup is still upgrading.\n  #storeUnsubscribe: (() => void) | null = null;\n  readonly #player = new ContextConsumer(this, {\n    context: playerContext,\n    callback: (store) => this.#reconnect(store),\n    subscribe: true,\n  });\n  readonly #container = new ContextConsumer(this, { context: containerContext, subscribe: true });\n\n  #disconnect: AbortController | null = null;\n  #liveText: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.setAttribute('role', 'status');\n    this.#ensureLiveText();\n\n    this.#disconnect = new AbortController();\n    this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });\n    this.#reconnect();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#storeUnsubscribe?.();\n    this.#storeUnsubscribe = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#storeUnsubscribe?.();\n    this.#core.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps({\n      closeDelay: this.closeDelay,\n      labels: createStatusAnnouncerLabels(this.#i18n.value, this.#i18n.locale),\n      shouldAnnounce: () => shouldAnnounceStatusChange(this.#container.value?.container),\n    });\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const label = this.#core.state.current.label;\n    const liveText = this.#ensureLiveText();\n\n    if (label === null) {\n      liveText.replaceChildren();\n    } else {\n      liveText.replaceChildren(document.createTextNode(label));\n    }\n  }\n\n  #reconnect(store: StatusAnnouncerStore | undefined = this.#player.value): void {\n    this.#storeUnsubscribe?.();\n    this.#storeUnsubscribe = null;\n\n    if (!store) {\n      this.#core.resetSnapshot();\n      return;\n    }\n\n    this.#storeUnsubscribe = subscribeToStatusAnnouncer(store, this.#core);\n  }\n\n  #ensureLiveText(): HTMLElement {\n    if (this.#liveText?.isConnected) return this.#liveText;\n\n    const existing = this.querySelector<HTMLElement>('[data-status-announcer-content]');\n\n    this.#liveText = existing ?? document.createElement('span');\n    this.#liveText.setAttribute('data-status-announcer-content', '');\n\n    if (!existing) this.append(this.#liveText);\n\n    return this.#liveText;\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAa,yBAAb,cAA4C,UAAU;;EAC1B,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;EAAc,EACvD;;CAIA,QAAiB,IAAI,eAAe,MAAM,WAAW;CACrD,QAAiB,IAAI,oBAAoB;CAEzC,oBAAyC;CACzC,UAAmB,IAAI,gBAAgB,MAAM;EAC3C,SAAS;EACT,WAAW,UAAU,KAAKG,WAAW,KAAK;EAC1C,WAAW;CACb,CAAC;CACD,aAAsB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAkB,WAAW;CAAK,CAAC;CAE9F,cAAsC;CACtC,YAAgC;CAEhC,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,KAAK,aAAa,QAAQ,QAAQ;EAClC,KAAKE,gBAAgB;EAErB,KAAKC,cAAc,IAAI,gBAAgB;EACvC,KAAKL,MAAM,MAAM,gBAAgB,KAAK,cAAc,GAAG,EAAE,QAAQ,KAAKK,YAAY,OAAO,CAAC;EAC1F,KAAKH,WAAW;CAClB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKI,oBAAoB;EACzB,KAAKA,oBAAoB;EACzB,KAAKD,aAAa,MAAM;EACxB,KAAKA,cAAc;CACrB;CAEA,kBAAiC;EAC/B,KAAKC,oBAAoB;EACzB,KAAKN,MAAM,QAAQ;EACnB,MAAM,gBAAgB;CACxB;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EACxB,KAAKA,MAAM,SAAS;GAClB,YAAY,KAAK;GACjB,QAAQ,4BAA4B,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GACvE,sBAAsB,2BAA2B,KAAKI,WAAW,OAAO,SAAS;EACnF,CAAC;CACH;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,QAAQ,KAAKH,MAAM,MAAM,QAAQ;EACvC,MAAM,WAAW,KAAKI,gBAAgB;EAEtC,IAAI,UAAU,MACZ,SAAS,gBAAgB;OAEzB,SAAS,gBAAgB,SAAS,eAAe,KAAK,CAAC;CAE3D;CAEA,WAAW,QAA0C,KAAKH,QAAQ,OAAa;EAC7E,KAAKK,oBAAoB;EACzB,KAAKA,oBAAoB;EAEzB,IAAI,CAAC,OAAO;GACV,KAAKN,MAAM,cAAc;GACzB;EACF;EAEA,KAAKM,oBAAoB,2BAA2B,OAAO,KAAKN,KAAK;CACvE;CAEA,kBAA+B;EAC7B,IAAI,KAAKO,WAAW,aAAa,OAAO,KAAKA;EAE7C,MAAM,WAAW,KAAK,cAA2B,iCAAiC;EAElF,KAAKA,YAAY,YAAY,SAAS,cAAc,MAAM;EAC1D,KAAKA,UAAU,aAAa,iCAAiC,EAAE;EAE/D,IAAI,CAAC,UAAU,KAAK,OAAO,KAAKA,SAAS;EAEzC,OAAO,KAAKA;CACd;AACF"}

package/dist/default/ui/status-indicator/status-indicator-element.js

@@ -0,0 +1,61 @@
+import { i18nContext } from "../../i18n/context.js";
+import { I18nController } from "../../i18n/controller.js";
+import { InputIndicatorElement } from "../input-indicator/input-indicator-element.js";
+import { LiveIndicator } from "../input-indicator/live-indicator.js";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs, createInputIndicatorLabels, getStatusIndicatorDisplayValue } from "@videojs/core";
+import { createTransition } from "@videojs/core/dom";
+//#region src/ui/status-indicator/status-indicator-element.ts
+var StatusIndicatorElement = class extends InputIndicatorElement {
+	static {
+		this.tagName = "media-status-indicator";
+	}
+	static {
+		this.properties = {
+			actions: { type: String },
+			closeDelay: {
+				type: Number,
+				attribute: "close-delay"
+			}
+		};
+	}
+	#i18n = new I18nController(this, i18nContext);
+	#core = new StatusIndicatorCore();
+	#transition = createTransition();
+	#liveIndicator = new LiveIndicator({
+		host: this,
+		dataAttrs: StatusIndicatorDataAttrs,
+		render: renderStatusIndicator
+	});
+	#options = { replayOnUpdate: false };
+	get core() {
+		return this.#core;
+	}
+	get transition() {
+		return this.#transition;
+	}
+	get liveIndicator() {
+		return this.#liveIndicator;
+	}
+	get options() {
+		return this.#options;
+	}
+	syncCoreProps() {
+		this.#core.setProps({
+			actions: parseActions(this.actions),
+			closeDelay: this.closeDelay,
+			labels: createInputIndicatorLabels(this.#i18n.value)
+		});
+	}
+};
+function parseActions(actions) {
+	return actions?.split(/[\s,]+/).filter(Boolean);
+}
+function renderStatusIndicator(element, state) {
+	const value = element.querySelector("media-status-indicator-value");
+	if (!value) return;
+	value.textContent = getStatusIndicatorDisplayValue(state);
+}
+//#endregion
+export { StatusIndicatorElement };
+
+//# sourceMappingURL=status-indicator-element.js.map

package/dist/default/ui/status-indicator/status-indicator-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-element.js","names":["#i18n","#core","#transition","#liveIndicator","#options"],"sources":["../../../../src/ui/status-indicator/status-indicator-element.ts"],"sourcesContent":["import {\n  createInputIndicatorLabels,\n  getStatusIndicatorDisplayValue,\n  type InputAction,\n  StatusIndicatorCore,\n  StatusIndicatorDataAttrs,\n} from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { InputIndicatorElement, type InputIndicatorOptions } from '../input-indicator/input-indicator-element';\nimport { LiveIndicator } from '../input-indicator/live-indicator';\n\nexport class StatusIndicatorElement extends InputIndicatorElement<StatusIndicatorCore.State> {\n  static readonly tagName = 'media-status-indicator';\n\n  static override properties = {\n    actions: { type: String },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'actions' | 'closeDelay'>;\n\n  actions: string | undefined;\n  closeDelay: number | undefined;\n\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #core = new StatusIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: StatusIndicatorDataAttrs,\n    render: renderStatusIndicator,\n  });\n  readonly #options = { replayOnUpdate: false } satisfies InputIndicatorOptions;\n\n  protected get core() {\n    return this.#core;\n  }\n\n  protected get transition() {\n    return this.#transition;\n  }\n\n  protected get liveIndicator() {\n    return this.#liveIndicator;\n  }\n\n  protected override get options() {\n    return this.#options;\n  }\n\n  protected override syncCoreProps(): void {\n    this.#core.setProps({\n      actions: parseActions(this.actions),\n      closeDelay: this.closeDelay,\n      labels: createInputIndicatorLabels(this.#i18n.value),\n    });\n  }\n}\n\nfunction parseActions(actions: string | undefined): readonly InputAction[] | undefined {\n  return actions?.split(/[\\s,]+/).filter(Boolean) as readonly InputAction[] | undefined;\n}\n\nfunction renderStatusIndicator(element: HTMLElement, state: StatusIndicatorCore.State): void {\n  const value = element.querySelector('media-status-indicator-value');\n  if (!value) return;\n\n  value.textContent = getStatusIndicatorDisplayValue(state);\n}\n"],"mappings":";;;;;;;AAeA,IAAa,yBAAb,cAA4C,sBAAiD;;EACjE,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,SAAS,EAAE,MAAM,OAAO;GACxB,YAAY;IAAE,MAAM;IAAQ,WAAW;GAAc;EACvD;;CAKA,QAAiB,IAAI,eAAe,MAAM,WAAW;CACrD,QAAiB,IAAI,oBAAoB;CACzC,cAAuB,iBAAiB;CACxC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;CACV,CAAC;CACD,WAAoB,EAAE,gBAAgB,MAAM;CAE5C,IAAc,OAAO;EACnB,OAAO,KAAKC;CACd;CAEA,IAAc,aAAa;EACzB,OAAO,KAAKC;CACd;CAEA,IAAc,gBAAgB;EAC5B,OAAO,KAAKC;CACd;CAEA,IAAuB,UAAU;EAC/B,OAAO,KAAKC;CACd;CAEA,gBAAyC;EACvC,KAAKH,MAAM,SAAS;GAClB,SAAS,aAAa,KAAK,OAAO;GAClC,YAAY,KAAK;GACjB,QAAQ,2BAA2B,KAAKD,MAAM,KAAK;EACrD,CAAC;CACH;AACF;AAEA,SAAS,aAAa,SAAiE;CACrF,OAAO,SAAS,MAAM,QAAQ,CAAC,CAAC,OAAO,OAAO;AAChD;AAEA,SAAS,sBAAsB,SAAsB,OAAwC;CAC3F,MAAM,QAAQ,QAAQ,cAAc,8BAA8B;CAClE,IAAI,CAAC,OAAO;CAEZ,MAAM,cAAc,+BAA+B,KAAK;AAC1D"}

package/dist/default/ui/status-indicator/status-indicator-value-element.js

@@ -0,0 +1,11 @@
+import { UIElement } from "../ui-element.js";
+//#region src/ui/status-indicator/status-indicator-value-element.ts
+var StatusIndicatorValueElement = class extends UIElement {
+	static {
+		this.tagName = "media-status-indicator-value";
+	}
+};
+//#endregion
+export { StatusIndicatorValueElement };
+
+//# sourceMappingURL=status-indicator-value-element.js.map

package/dist/default/ui/status-indicator/status-indicator-value-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-value-element.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value-element.ts"],"sourcesContent":["import { UIElement } from '../ui-element';\n\nexport class StatusIndicatorValueElement extends UIElement {\n  static readonly tagName = 'media-status-indicator-value';\n}\n"],"mappings":";;AAEA,IAAa,8BAAb,cAAiD,UAAU;;EAC/B,KAAA,UAAA;;AAC5B"}

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

@@ -0,0 +1,14 @@
+import { i18nContext } from "../../i18n/context.js";
+import { createTextMixin } from "../../i18n/text-mixin.js";
+import { ReactiveElement } from "@videojs/element";
+//#region src/ui/text/text-element.ts
+const I18nTextMixin = createTextMixin({ context: i18nContext });
+var TextElement = class extends I18nTextMixin(ReactiveElement) {
+	static {
+		this.tagName = "media-text";
+	}
+};
+//#endregion
+export { I18nTextMixin, TextElement as MediaTextElement, TextElement };
+
+//# sourceMappingURL=text-element.js.map