@videojs/html 10.0.0-alpha.4 → 10.0.0-alpha.6

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

@@ -0,0 +1,117 @@
+import { MediaElement } from "../media-element.js";
+import { sliderContext } from "./context.js";
+import { 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";
+
+//#region src/ui/slider/slider-element.ts
+var SliderElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = SliderCore.defaultProps.label;
+		this.value = SliderCore.defaultProps.value;
+		this.min = SliderCore.defaultProps.min;
+		this.max = SliderCore.defaultProps.max;
+		this.step = SliderCore.defaultProps.step;
+		this.largeStep = SliderCore.defaultProps.largeStep;
+		this.orientation = SliderCore.defaultProps.orientation;
+		this.disabled = SliderCore.defaultProps.disabled;
+		this.thumbAlignment = SliderCore.defaultProps.thumbAlignment;
+	}
+	static {
+		this.tagName = "media-slider";
+	}
+	static {
+		this.properties = {
+			label: { type: String },
+			value: { type: Number },
+			min: { type: Number },
+			max: { type: Number },
+			step: { type: Number },
+			largeStep: {
+				type: Number,
+				attribute: "large-step"
+			},
+			orientation: { type: String },
+			disabled: { type: Boolean },
+			thumbAlignment: {
+				type: String,
+				attribute: "thumb-alignment"
+			}
+		};
+	}
+	#core = new SliderCore();
+	#provider = new ContextProvider(this, { context: sliderContext });
+	#slider = null;
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		const signal = this.#disconnect.signal;
+		this.#slider = createSlider({
+			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(),
+			getLargeStepPercent: () => this.#core.getLargeStepPercent(),
+			onValueChange: (percent) => {
+				this.value = this.#core.valueFromPercent(percent);
+				this.dispatchEvent(new CustomEvent("value-change", {
+					detail: { value: this.value },
+					bubbles: true
+				}));
+			},
+			onValueCommit: (percent) => {
+				this.value = this.#core.valueFromPercent(percent);
+				this.dispatchEvent(new CustomEvent("value-commit", {
+					detail: { value: this.value },
+					bubbles: true
+				}));
+			},
+			onDragStart: () => {
+				this.dispatchEvent(new CustomEvent("drag-start", { bubbles: true }));
+			},
+			onDragEnd: () => {
+				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
+			}
+		});
+		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
+		this.style.touchAction = "none";
+		this.style.userSelect = "none";
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#slider?.destroy();
+		this.#slider = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	willUpdate(_changed) {
+		super.willUpdate(_changed);
+		this.#core.setProps(this);
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#slider) return;
+		this.#core.setInput(this.#slider.input.current);
+		const state = this.#core.getSliderState(this.value);
+		const cssVars = getSliderCSSVars(state);
+		applyStyles(this, cssVars);
+		applyStateDataAttrs(this, state, SliderDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: SliderDataAttrs,
+			pointerValue: this.#core.valueFromPercent(state.pointerPercent),
+			thumbAttrs: this.#core.getAttrs(state),
+			thumbProps: this.#slider.thumbProps
+		});
+	}
+};
+
+//#endregion
+export { SliderElement };
+//# sourceMappingURL=slider-element.js.map

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

@@ -0,0 +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 { applyStateDataAttrs, createSlider, getSliderCSSVars, type SliderApi } 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\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    });\n\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    // Prevent default touch gestures and text selection during interaction.\n    this.style.touchAction = 'none';\n    this.style.userSelect = 'none';\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#slider?.destroy();\n    this.#slider = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#slider) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const state = this.#core.getSliderState(this.value);\n    const cssVars = getSliderCSSVars(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":";;;;;;;;AASA,IAAa,gBAAb,cAAmC,aAAa;;;eAetC,WAAW,aAAa;eACxB,WAAW,aAAa;aAC1B,WAAW,aAAa;aACxB,WAAW,aAAa;cACvB,WAAW,aAAa;mBACnB,WAAW,aAAa;qBACtB,WAAW,aAAa;kBAC3B,WAAW,aAAa;wBAClB,WAAW,aAAa;;;iBAtBf;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,OAAO,EAAE,MAAM,QAAQ;GACvB,KAAK,EAAE,MAAM,QAAQ;GACrB,KAAK,EAAE,MAAM,QAAQ;GACrB,MAAM,EAAE,MAAM,QAAQ;GACtB,WAAW;IAAE,MAAM;IAAQ,WAAW;IAAc;GACpD,aAAa,EAAE,MAAM,QAAQ;GAC7B,UAAU,EAAE,MAAM,SAAS;GAC3B,gBAAgB;IAAE,MAAM;IAAQ,WAAW;IAAmB;GAC/D;;CAYD,CAASA,OAAQ,IAAI,YAAY;CACjC,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,eAAe,CAAC;CAE1E,UAA4B;CAC5B,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;EACxC,MAAM,SAAS,MAAKA,WAAY;AAEhC,QAAKC,SAAU,aAAa;GAC1B,kBAAkB;GAClB,uBAAuB,KAAK,cAA2B,qBAAqB;GAC5E,sBAAsB,KAAK;GAC3B,aAAa,MAAM,KAAK;GACxB,kBAAkB,KAAK;GACvB,kBAAkB,MAAKH,KAAM,iBAAiB,KAAK,MAAM;GACzD,sBAAsB,MAAKA,KAAM,gBAAgB;GACjD,2BAA2B,MAAKA,KAAM,qBAAqB;GAC3D,gBAAgB,YAAY;AAC1B,SAAK,QAAQ,MAAKA,KAAM,iBAAiB,QAAQ;AACjD,SAAK,cAAc,IAAI,YAAY,gBAAgB;KAAE,QAAQ,EAAE,OAAO,KAAK,OAAO;KAAE,SAAS;KAAM,CAAC,CAAC;;GAEvG,gBAAgB,YAAY;AAC1B,SAAK,QAAQ,MAAKA,KAAM,iBAAiB,QAAQ;AACjD,SAAK,cAAc,IAAI,YAAY,gBAAgB;KAAE,QAAQ,EAAE,OAAO,KAAK,OAAO;KAAE,SAAS;KAAM,CAAC,CAAC;;GAEvG,mBAAmB;AACjB,SAAK,cAAc,IAAI,YAAY,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC;;GAEtE,iBAAiB;AACf,SAAK,cAAc,IAAI,YAAY,YAAY,EAAE,SAAS,MAAM,CAAC,CAAC;;GAErE,CAAC;AAEF,QAAKG,OAAQ,MAAM,gBAAgB,KAAK,eAAe,EAAE,EAAE,QAAQ,CAAC;AAGpE,OAAK,MAAM,cAAc;AACzB,OAAK,MAAM,aAAa;;CAG1B,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,QAAS,SAAS;AACvB,QAAKA,SAAU;AACf,QAAKD,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,UAAgC;AAC5D,QAAM,WAAW,SAAS;AAC1B,QAAKF,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,MAAKG,OAAS;AAEnB,QAAKH,KAAM,SAAS,MAAKG,OAAQ,MAAM,QAAQ;EAC/C,MAAM,QAAQ,MAAKH,KAAM,eAAe,KAAK,MAAM;EACnD,MAAM,UAAU,iBAAiB,MAAM;AAEvC,cAAY,MAAM,QAAQ;AAG1B,sBAAoB,MAAM,OAAO,gBAAgB;AAGjD,QAAKC,SAAU,SAAS;GACtB;GACA,cAAc;GACd,cAAc,MAAKD,KAAM,iBAAiB,MAAM,eAAe;GAC/D,YAAY,MAAKA,KAAM,SAAS,MAAM;GACtC,YAAY,MAAKG,OAAQ;GAC1B,CAAC"}

package/dist/dev/ui/slider/slider-events.d.ts

@@ -0,0 +1,18 @@
+//#region src/ui/slider/slider-events.d.ts
+interface SliderValueEventDetail {
+  /** The current slider value in the domain range (e.g., seconds for time, 0–1 for volume). */
+  value: number;
+}
+interface SliderEventMap {
+  /** Fires continuously as the slider value changes during drag or keyboard interaction. */
+  'value-change': CustomEvent<SliderValueEventDetail>;
+  /** Fires when the user commits a value — on pointer up or keyboard release. */
+  'value-commit': CustomEvent<SliderValueEventDetail>;
+  /** Fires when a drag interaction begins (pointer down on the slider). */
+  'drag-start': CustomEvent<void>;
+  /** Fires when a drag interaction ends (pointer up after dragging). */
+  'drag-end': CustomEvent<void>;
+}
+//#endregion
+export { SliderEventMap, SliderValueEventDetail };
+//# sourceMappingURL=slider-events.d.ts.map

package/dist/dev/ui/slider/slider-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-events.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-events.ts"],"mappings":";UAAiB,sBAAA;EAAA;EAEf,KAAA;AAAA;AAAA,UAGe,cAAA;EAHV;EAKL,cAAA,EAAgB,WAAA,CAAY,sBAAA;EAFC;EAI7B,cAAA,EAAgB,WAAA,CAAY,sBAAA;EAFA;EAI5B,YAAA,EAAc,WAAA;EAFc;EAI5B,UAAA,EAAY,WAAA;AAAA"}

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

@@ -0,0 +1,15 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { SliderContextValue } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+import { SliderState } from "@videojs/core";
+
+//#region src/ui/slider/slider-fill-element.d.ts
+declare class SliderFillElement extends ContextPartElement<SliderState> {
+  static readonly tagName = "media-slider-fill";
+  protected readonly consumer: ContextConsumer<{
+    __context__: SliderContextValue;
+  }, this>;
+}
+//#endregion
+export { SliderFillElement };
+//# sourceMappingURL=slider-fill-element.d.ts.map

package/dist/dev/ui/slider/slider-fill-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-fill-element.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-fill-element.ts"],"mappings":";;;;;;cAMa,iBAAA,SAA0B,kBAAA,CAAmB,WAAA;EAAA,gBACxC,OAAA;EAAA,mBAEG,QAAA,EAAQ,eAAA;iBAHwC,kBAAA;EAAA;AAAA"}

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

@@ -0,0 +1,21 @@
+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) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-slider-fill";
+	}
+};
+
+//#endregion
+export { SliderFillElement };
+//# sourceMappingURL=slider-fill-element.js.map

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

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

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

@@ -0,0 +1,14 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+
+//#region src/ui/slider/slider-thumb-element.d.ts
+declare class SliderThumbElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-slider-thumb";
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { SliderThumbElement };
+//# sourceMappingURL=slider-thumb-element.d.ts.map

package/dist/dev/ui/slider/slider-thumb-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-thumb-element.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-thumb-element.ts"],"mappings":";;;;cAOa,kBAAA,SAA2B,YAAA;EAAA;kBACtB,OAAA;EAUP,iBAAA,CAAA;EAMA,oBAAA,CAAA;EAAA,UAOU,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

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

@@ -0,0 +1,43 @@
+import { MediaElement } from "../media-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 {
+	static {
+		this.tagName = "media-slider-thumb";
+	}
+	#ctx = new ContextConsumer(this, {
+		context: sliderContext,
+		subscribe: true
+	});
+	#disconnect = null;
+	#thumbPropsApplied = false;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#thumbPropsApplied = false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#thumbPropsApplied = false;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx) return;
+		if (!this.#thumbPropsApplied && this.#disconnect) {
+			applyElementProps(this, ctx.thumbProps, { signal: this.#disconnect.signal });
+			this.#thumbPropsApplied = true;
+		}
+		applyElementProps(this, ctx.thumbAttrs);
+		applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+
+//#endregion
+export { SliderThumbElement };
+//# sourceMappingURL=slider-thumb-element.js.map

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

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

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

@@ -0,0 +1,15 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { SliderContextValue } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+import { SliderState } from "@videojs/core";
+
+//#region src/ui/slider/slider-track-element.d.ts
+declare class SliderTrackElement extends ContextPartElement<SliderState> {
+  static readonly tagName = "media-slider-track";
+  protected readonly consumer: ContextConsumer<{
+    __context__: SliderContextValue;
+  }, this>;
+}
+//#endregion
+export { SliderTrackElement };
+//# sourceMappingURL=slider-track-element.d.ts.map

package/dist/dev/ui/slider/slider-track-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-track-element.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-track-element.ts"],"mappings":";;;;;;cAMa,kBAAA,SAA2B,kBAAA,CAAmB,WAAA;EAAA,gBACzC,OAAA;EAAA,mBAEG,QAAA,EAAQ,eAAA;iBAHyC,kBAAA;EAAA;AAAA"}

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

@@ -0,0 +1,21 @@
+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) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: sliderContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-slider-track";
+	}
+};
+
+//#endregion
+export { SliderTrackElement };
+//# sourceMappingURL=slider-track-element.js.map

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

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

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

@@ -0,0 +1,19 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+
+//#region src/ui/slider/slider-value-element.d.ts
+declare class SliderValueElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-slider-value";
+  static properties: {
+    type: {
+      type: StringConstructor;
+    };
+  };
+  type: 'current' | 'pointer';
+  connectedCallback(): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { SliderValueElement };
+//# sourceMappingURL=slider-value-element.d.ts.map

package/dist/dev/ui/slider/slider-value-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-value-element.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-value-element.ts"],"mappings":";;;;cAOa,kBAAA,SAA2B,YAAA;EAAA;kBACtB,OAAA;EAAA,OAEA,UAAA;;;;;EAIhB,IAAA;EAOS,iBAAA,CAAA;EAAA,UAKU,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

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

@@ -0,0 +1,38 @@
+import { MediaElement } from "../media-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 {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "current";
+	}
+	static {
+		this.tagName = "media-slider-value";
+	}
+	static {
+		this.properties = { type: { type: String } };
+	}
+	#ctx = new ContextConsumer(this, {
+		context: sliderContext,
+		subscribe: true
+	});
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("aria-live", "off");
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx) return;
+		const value = this.type === "pointer" ? ctx.pointerValue : ctx.state.value;
+		this.textContent = ctx.formatValue ? ctx.formatValue(value, this.type) : String(Math.round(value));
+		applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+
+//#endregion
+export { SliderValueElement };
+//# sourceMappingURL=slider-value-element.js.map

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

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

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

@@ -0,0 +1,42 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+import { ThumbnailCore, ThumbnailImage } from "@videojs/core";
+
+//#region src/ui/thumbnail/thumbnail-element.d.ts
+declare class ThumbnailElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-thumbnail";
+  static properties: {
+    time: {
+      type: NumberConstructor;
+    };
+    crossOrigin: {
+      type: StringConstructor;
+      attribute: string;
+    };
+    loading: {
+      type: StringConstructor;
+    };
+    fetchPriority: {
+      type: StringConstructor;
+      attribute: string;
+    };
+  };
+  time: number;
+  crossOrigin: ThumbnailCore.Props['crossOrigin'];
+  loading: ThumbnailCore.Props['loading'];
+  fetchPriority: ThumbnailCore.Props['fetchPriority'];
+  constructor();
+  /**
+   * Set thumbnail images directly, bypassing the automatic `<track>` detection.
+   * When set, this takes priority over the text track path.
+   */
+  get thumbnails(): ThumbnailImage[] | undefined;
+  set thumbnails(value: ThumbnailImage[] | undefined);
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { ThumbnailElement };
+//# sourceMappingURL=thumbnail-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail-element.d.ts","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail-element.ts"],"mappings":";;;;;cAyBa,gBAAA,SAAyB,YAAA;EAAA;kBACpB,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;;;;;EAOhB,IAAA;EACA,WAAA,EAAa,aAAA,CAAc,KAAA;EAC3B,OAAA,EAAS,aAAA,CAAc,KAAA;EACvB,aAAA,EAAe,aAAA,CAAc,KAAA;;;;;;MA+BzB,UAAA,CAAA,GAAc,cAAA;EAAA,IAId,UAAA,CAAW,KAAA,EAAO,cAAA;EAKb,iBAAA,CAAA;EAUA,oBAAA,CAAA;EAAA,UAMU,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

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

@@ -0,0 +1,136 @@
+import { playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from "@videojs/core/dom";
+import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
+
+//#region src/ui/thumbnail/thumbnail-element.ts
+const SHADOW_CSS = `\
+:host {
+  display: inline-block;
+  overflow: hidden;
+}
+img {
+  display: block;
+}`;
+var ThumbnailElement = class extends MediaElement {
+	static {
+		this.tagName = "media-thumbnail";
+	}
+	static {
+		this.properties = {
+			time: { type: Number },
+			crossOrigin: {
+				type: String,
+				attribute: "crossorigin"
+			},
+			loading: { type: String },
+			fetchPriority: {
+				type: String,
+				attribute: "fetchpriority"
+			}
+		};
+	}
+	#core = new ThumbnailCore();
+	#img = document.createElement("img");
+	#textTracks = new PlayerController(this, playerContext, selectTextTrack);
+	#thumbnails = [];
+	#externalThumbnails;
+	#lastTextTrack;
+	#api = null;
+	constructor() {
+		super();
+		this.time = 0;
+		const shadow = this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = SHADOW_CSS;
+		shadow.appendChild(style);
+		this.#img.alt = "";
+		this.#img.setAttribute("part", "img");
+		this.#img.setAttribute("aria-hidden", "true");
+		this.#img.setAttribute("decoding", "async");
+		shadow.appendChild(this.#img);
+	}
+	/**
+	* Set thumbnail images directly, bypassing the automatic `<track>` detection.
+	* When set, this takes priority over the text track path.
+	*/
+	get thumbnails() {
+		return this.#externalThumbnails;
+	}
+	set thumbnails(value) {
+		this.#externalThumbnails = value;
+		this.requestUpdate();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#api = createThumbnail({
+			getContainer: () => this,
+			getImg: () => this.#img,
+			onStateChange: () => this.requestUpdate()
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#api?.destroy();
+		this.#api = null;
+	}
+	update(changed) {
+		super.update(changed);
+		if (this.#externalThumbnails) this.#thumbnails = this.#externalThumbnails;
+		else {
+			const textTrack = this.#textTracks.value;
+			if (textTrack !== this.#lastTextTrack) {
+				this.#lastTextTrack = textTrack;
+				this.#thumbnails = textTrack && textTrack.thumbnailCues.length > 0 ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? void 0) : [];
+			}
+		}
+		const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);
+		applyElementProps(this.#img, {
+			crossorigin: this.crossOrigin || void 0,
+			loading: this.loading,
+			fetchpriority: this.fetchPriority
+		});
+		this.#api?.updateSrc(thumbnail?.url);
+		if (!thumbnail) {
+			this.#img.removeAttribute("src");
+			this.#resetStyles();
+			const state = this.#core.getState(false, false, void 0);
+			applyElementProps(this, this.#core.getAttrs(state));
+			applyStateDataAttrs(this, state, ThumbnailDataAttrs);
+			return;
+		}
+		if (this.#img.getAttribute("src") !== thumbnail.url) this.#img.src = thumbnail.url;
+		const api = this.#api;
+		const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);
+		applyElementProps(this, this.#core.getAttrs(state));
+		applyStateDataAttrs(this, state, ThumbnailDataAttrs);
+		if (api?.naturalWidth && api.naturalHeight) {
+			const constraints = api.readConstraints();
+			const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);
+			if (result) this.#applyResize(result);
+		}
+	}
+	#applyResize(result) {
+		this.style.width = `${result.containerWidth}px`;
+		this.style.height = `${result.containerHeight}px`;
+		const imgStyle = this.#img.style;
+		imgStyle.width = `${result.imageWidth}px`;
+		imgStyle.height = `${result.imageHeight}px`;
+		imgStyle.maxWidth = "none";
+		imgStyle.transform = result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : "";
+	}
+	#resetStyles() {
+		this.style.width = "";
+		this.style.height = "";
+		const imgStyle = this.#img.style;
+		imgStyle.width = "";
+		imgStyle.height = "";
+		imgStyle.maxWidth = "";
+		imgStyle.transform = "";
+	}
+};
+
+//#endregion
+export { ThumbnailElement };
+//# sourceMappingURL=thumbnail-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail-element.js","names":["#core","#img","#textTracks","#externalThumbnails","#api","#thumbnails","#lastTextTrack","#resetStyles","#applyResize"],"sources":["../../../../src/ui/thumbnail/thumbnail-element.ts"],"sourcesContent":["import {\n  type MediaTextTrackState,\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailImage,\n  type ThumbnailResizeResult,\n} from '@videojs/core';\nimport type { ThumbnailApi } from '@videojs/core/dom';\nimport { applyElementProps, applyStateDataAttrs, createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nconst SHADOW_CSS = `\\\n:host {\n  display: inline-block;\n  overflow: hidden;\n}\nimg {\n  display: block;\n}`;\n\nexport class ThumbnailElement extends MediaElement {\n  static readonly tagName = 'media-thumbnail';\n\n  static override properties = {\n    time: { type: Number },\n    crossOrigin: { type: String, attribute: 'crossorigin' },\n    loading: { type: String },\n    fetchPriority: { type: String, attribute: 'fetchpriority' },\n  } satisfies PropertyDeclarationMap<keyof ThumbnailCore.Props>;\n\n  time = 0;\n  crossOrigin: ThumbnailCore.Props['crossOrigin'];\n  loading: ThumbnailCore.Props['loading'];\n  fetchPriority: ThumbnailCore.Props['fetchPriority'];\n\n  readonly #core = new ThumbnailCore();\n  readonly #img = document.createElement('img');\n  readonly #textTracks = new PlayerController(this, playerContext, selectTextTrack);\n\n  #thumbnails: ThumbnailImage[] = [];\n  #externalThumbnails: ThumbnailImage[] | undefined;\n  #lastTextTrack: MediaTextTrackState | undefined;\n  #api: ThumbnailApi | null = null;\n\n  constructor() {\n    super();\n\n    const shadow = this.attachShadow({ mode: 'open' });\n\n    const style = document.createElement('style');\n    style.textContent = SHADOW_CSS;\n    shadow.appendChild(style);\n\n    this.#img.alt = '';\n    this.#img.setAttribute('part', 'img');\n    this.#img.setAttribute('aria-hidden', 'true');\n    this.#img.setAttribute('decoding', 'async');\n    shadow.appendChild(this.#img);\n  }\n\n  /**\n   * Set thumbnail images directly, bypassing the automatic `<track>` detection.\n   * When set, this takes priority over the text track path.\n   */\n  get thumbnails(): ThumbnailImage[] | undefined {\n    return this.#externalThumbnails;\n  }\n\n  set thumbnails(value: ThumbnailImage[] | undefined) {\n    this.#externalThumbnails = value;\n    this.requestUpdate();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#api = createThumbnail({\n      getContainer: () => this,\n      getImg: () => this.#img,\n      onStateChange: () => this.requestUpdate(),\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#api?.destroy();\n    this.#api = null;\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    // Resolve thumbnails: external prop takes priority over auto <track> path.\n    if (this.#externalThumbnails) {\n      this.#thumbnails = this.#externalThumbnails;\n    } else {\n      const textTrack = this.#textTracks.value;\n\n      if (textTrack !== this.#lastTextTrack) {\n        this.#lastTextTrack = textTrack;\n        this.#thumbnails =\n          textTrack && textTrack.thumbnailCues.length > 0\n            ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n            : [];\n      }\n    }\n\n    const thumbnail = this.#core.findActiveThumbnail(this.#thumbnails, this.time);\n\n    // Sync img attributes from element properties.\n    applyElementProps(this.#img, {\n      crossorigin: this.crossOrigin || undefined,\n      loading: this.loading,\n      fetchpriority: this.fetchPriority,\n    });\n\n    // Track src changes via the thumbnail API.\n    this.#api?.updateSrc(thumbnail?.url);\n\n    if (!thumbnail) {\n      this.#img.removeAttribute('src');\n      this.#resetStyles();\n\n      const state = this.#core.getState(false, false, undefined);\n      applyElementProps(this, this.#core.getAttrs(state));\n      applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n      return;\n    }\n\n    // Set the img src directly (imperative DOM).\n    if (this.#img.getAttribute('src') !== thumbnail.url) {\n      this.#img.src = thumbnail.url;\n    }\n\n    const api = this.#api;\n    const state = this.#core.getState(api?.loading ?? false, api?.error ?? false, thumbnail);\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, ThumbnailDataAttrs);\n\n    if (api?.naturalWidth && api.naturalHeight) {\n      const constraints = api.readConstraints();\n      const result = this.#core.resize(thumbnail, api.naturalWidth, api.naturalHeight, constraints);\n\n      if (result) {\n        this.#applyResize(result);\n      }\n    }\n  }\n\n  #applyResize(result: ThumbnailResizeResult): void {\n    this.style.width = `${result.containerWidth}px`;\n    this.style.height = `${result.containerHeight}px`;\n\n    const imgStyle = this.#img.style;\n    imgStyle.width = `${result.imageWidth}px`;\n    imgStyle.height = `${result.imageHeight}px`;\n    imgStyle.maxWidth = 'none';\n    imgStyle.transform =\n      result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : '';\n  }\n\n  #resetStyles(): void {\n    this.style.width = '';\n    this.style.height = '';\n\n    const imgStyle = this.#img.style;\n    imgStyle.width = '';\n    imgStyle.height = '';\n    imgStyle.maxWidth = '';\n    imgStyle.transform = '';\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"time-element.d.ts","names":[],"sources":["../../../../src/ui/time/time-element.ts"],"mappings":";;;;;;cAQa,WAAA,SAAoB,YAAA;EAAA;kBACf,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;EAMhB,IAAA,EAAM,QAAA;EACN,YAAA;EACA,KAAA,aAAK,KAAA,EAFS,cAAA,CAET,SAAA;;EAaI,iBAAA,CAAA;EAAA,UAQU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}
+{"version":3,"file":"time-element.d.ts","names":[],"sources":["../../../../src/ui/time/time-element.ts"],"mappings":";;;;;;cAQa,WAAA,SAAoB,YAAA;EAAA;kBACf,OAAA;EAAA,OAEA,UAAA;;;;;;;;;;;;EAMhB,IAAA,EAAM,QAAA;EACN,YAAA;EACA,KAAA,aAAK,KAAA,EAFS,cAAA,CAET,SAAA;;EAkBI,iBAAA,CAAA;EAAA,UAQU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

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

@@ -5,7 +5,7 @@ import { applyElementProps, applyStateDataAttrs, logMissingFeature, selectTime }
 import { TimeCore, TimeDataAttrs } from "@videojs/core";
 
 //#region src/ui/time/time-element.ts
-var TimeElement = class TimeElement extends MediaElement {
+var TimeElement = class extends MediaElement {
 	static {
 		this.tagName = "media-time";
 	}
@@ -29,10 +29,13 @@ var TimeElement = class TimeElement extends MediaElement {
 		this.negativeSign = TimeCore.defaultProps.negativeSign;
 		this.label = TimeCore.defaultProps.label;
 		this.#signSpan.setAttribute("aria-hidden", "true");
+		this.#signSpan.hidden = true;
+		this.appendChild(this.#signSpan);
+		this.appendChild(this.#textNode);
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		if (!this.#state.value) logMissingFeature(TimeElement.tagName, "time");
+		if (!this.#state.value) logMissingFeature(this.localName, this.#state.displayName);
 	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
@@ -42,22 +45,11 @@ var TimeElement = class TimeElement extends MediaElement {
 		super.update(changed);
 		const media = this.#state.value;
 		if (!media) return;
-		const state = this.#core.getState(media);
-		if (state.negative) {
-			this.#signSpan.textContent = this.negativeSign;
-			this.#textNode.textContent = state.text;
-			if (!this.#signSpan.parentNode) {
-				this.textContent = "";
-				this.appendChild(this.#signSpan);
-				this.appendChild(this.#textNode);
-			}
-		} else {
-			if (this.#signSpan.parentNode) {
-				this.#signSpan.remove();
-				this.#textNode.remove();
-			}
-			this.textContent = state.text;
-		}
+		this.#core.setMedia(media);
+		const state = this.#core.getState();
+		this.#signSpan.hidden = !state.negative;
+		this.#signSpan.textContent = state.negative ? this.negativeSign : "";
+		this.#textNode.textContent = state.text;
 		applyElementProps(this, this.#core.getAttrs(state));
 		applyStateDataAttrs(this, state, TimeDataAttrs);
 	}