@videojs/html 10.0.0-beta.23 → 10.0.0-beta.24

package/dist/default/ui/position-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"position-controller.js","names":["#host","#abort","#trigger","#frame","#resizeObserver"],"sources":["../../../src/ui/position-controller.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\n\nexport type PositionControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller that manages JS-fallback positioning for floating\n * popup elements (tooltips, popovers). Tracks scroll, resize, and\n * ResizeObserver events to keep the popup aligned with its trigger.\n *\n * When native CSS Anchor Positioning is supported, `sync()` is a no-op.\n */\nexport class PositionController implements ReactiveController {\n  readonly #host: PositionControllerHost;\n\n  #abort: AbortController | null = null;\n  #frame = 0;\n  #resizeObserver: ResizeObserver | null = null;\n  #trigger: HTMLElement | null = null;\n\n  constructor(host: PositionControllerHost) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  /** Discover a trigger element linked via `commandfor` attribute. */\n  findTrigger(): HTMLElement | null {\n    if (!this.#host.id) return null;\n    const root = this.#host.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.#host.id}\"]`);\n  }\n\n  /** Start or update position tracking for the given trigger. */\n  sync(trigger: HTMLElement | null): void {\n    if (supportsAnchorPositioning()) return;\n    if (!trigger) return;\n    if (this.#abort && this.#trigger === trigger) return;\n\n    this.cleanup();\n    this.#abort = new AbortController();\n    this.#trigger = trigger;\n    const { signal } = this.#abort;\n\n    const reposition = () => {\n      cancelAnimationFrame(this.#frame);\n      this.#frame = requestAnimationFrame(() => {\n        if (signal.aborted) return;\n        this.#host.requestUpdate();\n      });\n    };\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true, signal });\n    window.addEventListener('resize', reposition, { signal });\n\n    if (typeof ResizeObserver === 'function') {\n      this.#resizeObserver = new ResizeObserver(() => {\n        reposition();\n      });\n      this.#resizeObserver.observe(trigger);\n      this.#resizeObserver.observe(this.#host);\n    }\n\n    reposition();\n  }\n\n  /** Stop all position tracking. */\n  cleanup(): void {\n    this.#abort?.abort();\n    this.#abort = null;\n    this.#trigger = null;\n    cancelAnimationFrame(this.#frame);\n    this.#frame = 0;\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  hostDisconnected(): void {\n    this.cleanup();\n  }\n\n  hostDestroyed(): void {\n    this.cleanup();\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,IAAa,qBAAb,MAA8D;CAC5D;CAEA,SAAiC;CACjC,SAAS;CACT,kBAAyC;CACzC,WAA+B;CAE/B,YAAY,MAA8B;AACxC,QAAA,OAAa;AACb,OAAK,cAAc,KAAK;;;CAI1B,cAAkC;AAChC,MAAI,CAAC,MAAA,KAAW,GAAI,QAAO;AAE3B,SADa,MAAA,KAAW,aAAa,CACzB,cAA2B,gBAAgB,MAAA,KAAW,GAAG,IAAI;;;CAI3E,KAAK,SAAmC;AACtC,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,QAAS;AACd,MAAI,MAAA,SAAe,MAAA,YAAkB,QAAS;AAE9C,OAAK,SAAS;AACd,QAAA,QAAc,IAAI,iBAAiB;AACnC,QAAA,UAAgB;EAChB,MAAM,EAAE,WAAW,MAAA;EAEnB,MAAM,mBAAmB;AACvB,wBAAqB,MAAA,MAAY;AACjC,SAAA,QAAc,4BAA4B;AACxC,QAAI,OAAO,QAAS;AACpB,UAAA,KAAW,eAAe;KAC1B;;AAGJ,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM;GAAQ,CAAC;AACvF,SAAO,iBAAiB,UAAU,YAAY,EAAE,QAAQ,CAAC;AAEzD,MAAI,OAAO,mBAAmB,YAAY;AACxC,SAAA,iBAAuB,IAAI,qBAAqB;AAC9C,gBAAY;KACZ;AACF,SAAA,eAAqB,QAAQ,QAAQ;AACrC,SAAA,eAAqB,QAAQ,MAAA,KAAW;;AAG1C,cAAY;;;CAId,UAAgB;AACd,QAAA,OAAa,OAAO;AACpB,QAAA,QAAc;AACd,QAAA,UAAgB;AAChB,uBAAqB,MAAA,MAAY;AACjC,QAAA,QAAc;AACd,QAAA,gBAAsB,YAAY;AAClC,QAAA,iBAAuB;;CAGzB,mBAAyB;AACvB,OAAK,SAAS;;CAGhB,gBAAsB;AACpB,OAAK,SAAS"}
+{"version":3,"file":"position-controller.js","names":["#host","#abort","#trigger","#boundary","#frame","#resizeObserver"],"sources":["../../../src/ui/position-controller.ts"],"sourcesContent":["import { isEventWithinElement } from '@videojs/core/dom';\nimport type { ReactiveController, ReactiveControllerHost } from '@videojs/element';\n\nexport type PositionControllerHost = ReactiveControllerHost & HTMLElement;\n\n/**\n * Reactive controller that manages JS-fallback positioning for floating\n * popup elements (tooltips, popovers). Tracks scroll, resize, and\n * ResizeObserver events to keep the popup aligned with its trigger.\n *\n * Native CSS Anchor Positioning still uses this controller for dynamic\n * sizing variables such as available width/height.\n */\nexport class PositionController implements ReactiveController {\n  readonly #host: PositionControllerHost;\n\n  #abort: AbortController | null = null;\n  #frame = 0;\n  #resizeObserver: ResizeObserver | null = null;\n  #trigger: HTMLElement | null = null;\n  #boundary: Element | null = null;\n\n  constructor(host: PositionControllerHost) {\n    this.#host = host;\n    host.addController(this);\n  }\n\n  /** Discover a trigger element linked via `commandfor` attribute. */\n  findTrigger(): HTMLElement | null {\n    if (!this.#host.id) return null;\n    const root = this.#host.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.#host.id}\"]`);\n  }\n\n  /** Start or update position tracking for the given trigger. */\n  sync(trigger: HTMLElement | null, boundary: Element | null = null): void {\n    if (!trigger) return;\n    if (this.#abort && this.#trigger === trigger && this.#boundary === boundary) return;\n\n    this.cleanup();\n    this.#abort = new AbortController();\n    this.#trigger = trigger;\n    this.#boundary = boundary;\n    const { signal } = this.#abort;\n\n    const reposition = (event?: Event) => {\n      if (event && isEventWithinElement(event, this.#host)) return;\n\n      cancelAnimationFrame(this.#frame);\n      this.#frame = requestAnimationFrame(() => {\n        if (signal.aborted) return;\n        this.#host.requestUpdate();\n      });\n    };\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true, signal });\n    window.addEventListener('resize', reposition, { signal });\n\n    if (typeof ResizeObserver === 'function') {\n      this.#resizeObserver = new ResizeObserver(() => {\n        reposition();\n      });\n      this.#resizeObserver.observe(trigger);\n      this.#resizeObserver.observe(this.#host);\n      if (boundary) this.#resizeObserver.observe(boundary);\n    }\n\n    reposition();\n  }\n\n  /** Stop all position tracking. */\n  cleanup(): void {\n    this.#abort?.abort();\n    this.#abort = null;\n    this.#trigger = null;\n    this.#boundary = null;\n    cancelAnimationFrame(this.#frame);\n    this.#frame = 0;\n    // Disconnect unobserves trigger, host, and boundary together.\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  hostDisconnected(): void {\n    this.cleanup();\n  }\n\n  hostDestroyed(): void {\n    this.cleanup();\n  }\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAa,qBAAb,MAA8D;CAC5D;CAEA,SAAiC;CACjC,SAAS;CACT,kBAAyC;CACzC,WAA+B;CAC/B,YAA4B;CAE5B,YAAY,MAA8B;AACxC,QAAA,OAAa;AACb,OAAK,cAAc,KAAK;;;CAI1B,cAAkC;AAChC,MAAI,CAAC,MAAA,KAAW,GAAI,QAAO;AAE3B,SADa,MAAA,KAAW,aAAa,CACzB,cAA2B,gBAAgB,MAAA,KAAW,GAAG,IAAI;;;CAI3E,KAAK,SAA6B,WAA2B,MAAY;AACvE,MAAI,CAAC,QAAS;AACd,MAAI,MAAA,SAAe,MAAA,YAAkB,WAAW,MAAA,aAAmB,SAAU;AAE7E,OAAK,SAAS;AACd,QAAA,QAAc,IAAI,iBAAiB;AACnC,QAAA,UAAgB;AAChB,QAAA,WAAiB;EACjB,MAAM,EAAE,WAAW,MAAA;EAEnB,MAAM,cAAc,UAAkB;AACpC,OAAI,SAAS,qBAAqB,OAAO,MAAA,KAAW,CAAE;AAEtD,wBAAqB,MAAA,MAAY;AACjC,SAAA,QAAc,4BAA4B;AACxC,QAAI,OAAO,QAAS;AACpB,UAAA,KAAW,eAAe;KAC1B;;AAGJ,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM;GAAQ,CAAC;AACvF,SAAO,iBAAiB,UAAU,YAAY,EAAE,QAAQ,CAAC;AAEzD,MAAI,OAAO,mBAAmB,YAAY;AACxC,SAAA,iBAAuB,IAAI,qBAAqB;AAC9C,gBAAY;KACZ;AACF,SAAA,eAAqB,QAAQ,QAAQ;AACrC,SAAA,eAAqB,QAAQ,MAAA,KAAW;AACxC,OAAI,SAAU,OAAA,eAAqB,QAAQ,SAAS;;AAGtD,cAAY;;;CAId,UAAgB;AACd,QAAA,OAAa,OAAO;AACpB,QAAA,QAAc;AACd,QAAA,UAAgB;AAChB,QAAA,WAAiB;AACjB,uBAAqB,MAAA,MAAY;AACjC,QAAA,QAAc;AAEd,QAAA,gBAAsB,YAAY;AAClC,QAAA,iBAAuB;;CAGzB,mBAAyB;AACvB,OAAK,SAAS;;CAGhB,gBAAsB;AACpB,OAAK,SAAS"}

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

@@ -0,0 +1,44 @@
+import { InputIndicatorElement } from "../input-indicators/input-indicator-element.js";
+import { LiveIndicator } from "../input-indicators/live-indicator.js";
+import { createTransition } from "@videojs/core/dom";
+import { SeekIndicatorCore, SeekIndicatorDataAttrs, getSeekIndicatorDisplayValue } from "@videojs/core";
+//#region src/ui/seek-indicator/seek-indicator-element.ts
+var SeekIndicatorElement = class extends InputIndicatorElement {
+	static {
+		this.tagName = "media-seek-indicator";
+	}
+	static {
+		this.properties = { closeDelay: {
+			type: Number,
+			attribute: "close-delay"
+		} };
+	}
+	#core = new SeekIndicatorCore();
+	#transition = createTransition();
+	#liveIndicator = new LiveIndicator({
+		host: this,
+		dataAttrs: SeekIndicatorDataAttrs,
+		render: renderSeekIndicator
+	});
+	get core() {
+		return this.#core;
+	}
+	get transition() {
+		return this.#transition;
+	}
+	get liveIndicator() {
+		return this.#liveIndicator;
+	}
+	syncCoreProps() {
+		this.#core.setProps({ closeDelay: this.closeDelay });
+	}
+};
+function renderSeekIndicator(element, state) {
+	const value = element.querySelector("media-seek-indicator-value");
+	if (!value) return;
+	value.textContent = getSeekIndicatorDisplayValue(state);
+}
+//#endregion
+export { SeekIndicatorElement };
+
+//# sourceMappingURL=seek-indicator-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"seek-indicator-element.js","names":["#core","#transition","#liveIndicator"],"sources":["../../../../src/ui/seek-indicator/seek-indicator-element.ts"],"sourcesContent":["import { getSeekIndicatorDisplayValue, SeekIndicatorCore, SeekIndicatorDataAttrs } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { InputIndicatorElement } from '../input-indicators/input-indicator-element';\nimport { LiveIndicator } from '../input-indicators/live-indicator';\n\nexport class SeekIndicatorElement extends InputIndicatorElement<SeekIndicatorCore.State> {\n  static readonly tagName = 'media-seek-indicator';\n\n  static override properties = {\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'closeDelay'>;\n\n  closeDelay: number | undefined;\n\n  readonly #core = new SeekIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: SeekIndicatorDataAttrs,\n    render: renderSeekIndicator,\n  });\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 syncCoreProps(): void {\n    this.#core.setProps({ closeDelay: this.closeDelay });\n  }\n}\n\nfunction renderSeekIndicator(element: HTMLElement, state: SeekIndicatorCore.State): void {\n  const value = element.querySelector('media-seek-indicator-value');\n  if (!value) return;\n\n  value.textContent = getSeekIndicatorDisplayValue(state);\n}\n"],"mappings":";;;;;AAOA,IAAa,uBAAb,cAA0C,sBAA+C;;iBAC7D;;;oBAEG,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;GAAe,EACvD;;CAID,QAAiB,IAAI,mBAAmB;CACxC,cAAuB,kBAAkB;CACzC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;EACT,CAAC;CAEF,IAAc,OAAO;AACnB,SAAO,MAAA;;CAGT,IAAc,aAAa;AACzB,SAAO,MAAA;;CAGT,IAAc,gBAAgB;AAC5B,SAAO,MAAA;;CAGT,gBAAyC;AACvC,QAAA,KAAW,SAAS,EAAE,YAAY,KAAK,YAAY,CAAC;;;AAIxD,SAAS,oBAAoB,SAAsB,OAAsC;CACvF,MAAM,QAAQ,QAAQ,cAAc,6BAA6B;AACjE,KAAI,CAAC,MAAO;AAEZ,OAAM,cAAc,6BAA6B,MAAM"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"seek-indicator-value-element.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-value-element.ts"],"sourcesContent":["import { MediaElement } from '../media-element';\n\nexport class SeekIndicatorValueElement extends MediaElement {\n  static readonly tagName = 'media-seek-indicator-value';\n}\n"],"mappings":";;AAEA,IAAa,4BAAb,cAA+C,aAAa;;iBAChC"}

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

@@ -0,0 +1,70 @@
+import { containerContext, playerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+import { StatusAnnouncerCore } from "@videojs/core";
+//#region src/ui/status-announcer/status-announcer-element.ts
+var StatusAnnouncerElement = class extends MediaElement {
+	static {
+		this.tagName = "media-status-announcer";
+	}
+	static {
+		this.properties = { closeDelay: {
+			type: Number,
+			attribute: "close-delay"
+		} };
+	}
+	#core = new StatusAnnouncerCore();
+	#player = new PlayerController(this, playerContext);
+	#container = new ContextConsumer(this, {
+		context: containerContext,
+		callback: () => this.#reconnect(),
+		subscribe: true
+	});
+	#disconnect = null;
+	#inputActionUnsubscribe = null;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.setAttribute("role", "status");
+		this.#disconnect = new AbortController();
+		this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.#reconnect();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#inputActionUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#inputActionUnsubscribe?.();
+		this.#core.destroy();
+		super.destroyCallback();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.#core.setProps({ closeDelay: this.closeDelay });
+	}
+	update(changed) {
+		super.update(changed);
+		const label = this.#core.state.current.label;
+		if (label) this.setAttribute("aria-label", label);
+		else this.removeAttribute("aria-label");
+	}
+	#reconnect() {
+		this.#inputActionUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		const container = this.#container.value?.container;
+		if (!container) return;
+		this.#inputActionUnsubscribe = subscribeToInputActions(container, (event) => {
+			this.#core.processEvent(event, getMediaSnapshot(this.#player.value));
+		});
+	}
+};
+//#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":["#core","#player","#container","#reconnect","#disconnect","#inputActionUnsubscribe"],"sources":["../../../../src/ui/status-announcer/status-announcer-element.ts"],"sourcesContent":["import { StatusAnnouncerCore } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class StatusAnnouncerElement extends MediaElement {\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 #core = new StatusAnnouncerCore();\n  readonly #player = new PlayerController(this, playerContext);\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: () => this.#reconnect(),\n    subscribe: true,\n  });\n\n  #disconnect: AbortController | null = null;\n  #inputActionUnsubscribe: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.setAttribute('role', 'status');\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.#inputActionUnsubscribe?.();\n    this.#inputActionUnsubscribe = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#inputActionUnsubscribe?.();\n    this.#core.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps({ closeDelay: this.closeDelay });\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const label = this.#core.state.current.label;\n    if (label) {\n      this.setAttribute('aria-label', label);\n    } else {\n      this.removeAttribute('aria-label');\n    }\n  }\n\n  #reconnect(): void {\n    this.#inputActionUnsubscribe?.();\n    this.#inputActionUnsubscribe = null;\n\n    const container = this.#container.value?.container;\n    if (!container) return;\n\n    this.#inputActionUnsubscribe = subscribeToInputActions(container, (event) => {\n      this.#core.processEvent(event, getMediaSnapshot(this.#player.value));\n    });\n  }\n}\n"],"mappings":";;;;;;;AASA,IAAa,yBAAb,cAA4C,aAAa;;iBAC7B;;;oBAEG,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;GAAe,EACvD;;CAID,QAAiB,IAAI,qBAAqB;CAC1C,UAAmB,IAAI,iBAAiB,MAAM,cAAc;CAC5D,aAAsB,IAAI,gBAAgB,MAAM;EAC9C,SAAS;EACT,gBAAgB,MAAA,WAAiB;EACjC,WAAW;EACZ,CAAC;CAEF,cAAsC;CACtC,0BAA+C;CAE/C,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,OAAK,aAAa,QAAQ,SAAS;AAEnC,QAAA,aAAmB,IAAI,iBAAiB;AACxC,QAAA,KAAW,MAAM,gBAAgB,KAAK,eAAe,EAAE,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;AAC3F,QAAA,WAAiB;;CAGnB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,0BAAgC;AAChC,QAAA,yBAA+B;AAC/B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;CAGrB,kBAAiC;AAC/B,QAAA,0BAAgC;AAChC,QAAA,KAAW,SAAS;AACpB,QAAM,iBAAiB;;CAGzB,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAA,KAAW,SAAS,EAAE,YAAY,KAAK,YAAY,CAAC;;CAGtD,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAA,KAAW,MAAM,QAAQ;AACvC,MAAI,MACF,MAAK,aAAa,cAAc,MAAM;MAEtC,MAAK,gBAAgB,aAAa;;CAItC,aAAmB;AACjB,QAAA,0BAAgC;AAChC,QAAA,yBAA+B;EAE/B,MAAM,YAAY,MAAA,UAAgB,OAAO;AACzC,MAAI,CAAC,UAAW;AAEhB,QAAA,yBAA+B,wBAAwB,YAAY,UAAU;AAC3E,SAAA,KAAW,aAAa,OAAO,iBAAiB,MAAA,OAAa,MAAM,CAAC;IACpE"}

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

@@ -0,0 +1,53 @@
+import { InputIndicatorElement } from "../input-indicators/input-indicator-element.js";
+import { LiveIndicator } from "../input-indicators/live-indicator.js";
+import { createTransition } from "@videojs/core/dom";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs, getStatusIndicatorDisplayValue } from "@videojs/core";
+//#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"
+			}
+		};
+	}
+	#core = new StatusIndicatorCore();
+	#transition = createTransition();
+	#liveIndicator = new LiveIndicator({
+		host: this,
+		dataAttrs: StatusIndicatorDataAttrs,
+		render: renderStatusIndicator
+	});
+	get core() {
+		return this.#core;
+	}
+	get transition() {
+		return this.#transition;
+	}
+	get liveIndicator() {
+		return this.#liveIndicator;
+	}
+	syncCoreProps() {
+		this.#core.setProps({
+			actions: parseActions(this.actions),
+			closeDelay: this.closeDelay
+		});
+	}
+};
+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":["#core","#transition","#liveIndicator"],"sources":["../../../../src/ui/status-indicator/status-indicator-element.ts"],"sourcesContent":["import {\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 { InputIndicatorElement } from '../input-indicators/input-indicator-element';\nimport { LiveIndicator } from '../input-indicators/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 #core = new StatusIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: StatusIndicatorDataAttrs,\n    render: renderStatusIndicator,\n  });\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 syncCoreProps(): void {\n    this.#core.setProps({ actions: parseActions(this.actions), closeDelay: this.closeDelay });\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":";;;;;AAYA,IAAa,yBAAb,cAA4C,sBAAiD;;iBACjE;;;oBAEG;GAC3B,SAAS,EAAE,MAAM,QAAQ;GACzB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACvD;;CAKD,QAAiB,IAAI,qBAAqB;CAC1C,cAAuB,kBAAkB;CACzC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;EACT,CAAC;CAEF,IAAc,OAAO;AACnB,SAAO,MAAA;;CAGT,IAAc,aAAa;AACzB,SAAO,MAAA;;CAGT,IAAc,gBAAgB;AAC5B,SAAO,MAAA;;CAGT,gBAAyC;AACvC,QAAA,KAAW,SAAS;GAAE,SAAS,aAAa,KAAK,QAAQ;GAAE,YAAY,KAAK;GAAY,CAAC;;;AAI7F,SAAS,aAAa,SAAiE;AACrF,QAAO,SAAS,MAAM,SAAS,CAAC,OAAO,QAAQ;;AAGjD,SAAS,sBAAsB,SAAsB,OAAwC;CAC3F,MAAM,QAAQ,QAAQ,cAAc,+BAA+B;AACnE,KAAI,CAAC,MAAO;AAEZ,OAAM,cAAc,+BAA+B,MAAM"}

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

@@ -0,0 +1,11 @@
+import { MediaElement } from "../media-element.js";
+//#region src/ui/status-indicator/status-indicator-value-element.ts
+var StatusIndicatorValueElement = class extends MediaElement {
+	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 { MediaElement } from '../media-element';\n\nexport class StatusIndicatorValueElement extends MediaElement {\n  static readonly tagName = 'media-status-indicator-value';\n}\n"],"mappings":";;AAEA,IAAa,8BAAb,cAAiD,aAAa;;iBAClC"}

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

@@ -1,11 +1,12 @@
+import { containerContext } from "../../player/context.js";
 import { MediaElement } from "../media-element.js";
 import { PositionController } from "../position-controller.js";
 import { tooltipGroupContext } from "./context.js";
-import { applyElementProps, applyStateDataAttrs, createTooltip, createTransition, getAnchorNameStyle, getAnchorPositionStyle, getPopupPositionRect, resolveOffsets } from "@videojs/core/dom";
+import { applyElementProps, applyStateDataAttrs, createTooltip, createTransition, getAnchorNameStyle, getAnchorPositionStyle, getPopupPositionRect, getPositioningBoundaryRect, resolveOffsets, resolvePositioningBoundary } from "@videojs/core/dom";
 import { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from "@videojs/utils/dom";
 import { ContextConsumer } from "@videojs/element/context";
 import { SnapshotController } from "@videojs/store/html";
-import { TooltipCSSVars, TooltipCore, TooltipDataAttrs } from "@videojs/core";
+import { POPUP_HOST_ATTR, TooltipCSSVars, TooltipCore, TooltipDataAttrs } from "@videojs/core";
 //#region src/ui/tooltip/tooltip-element.ts
 function isLabelTrigger(el) {
 	return "$state" in el;
@@ -21,8 +22,13 @@ var TooltipElement = class extends MediaElement {
 		this.closeDelay = TooltipCore.defaultProps.closeDelay;
 		this.disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;
 		this.disabled = TooltipCore.defaultProps.disabled;
+		this.boundary = "container";
 		this.#core = new TooltipCore();
 		this.#groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });
+		this.#containerCtx = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
 		this.#position = new PositionController(this);
 		this.#tooltip = null;
 		this.#snapshot = null;
@@ -51,11 +57,13 @@ var TooltipElement = class extends MediaElement {
 				type: Boolean,
 				attribute: "disable-hoverable-popup"
 			},
-			disabled: { type: Boolean }
+			disabled: { type: Boolean },
+			boundary: { type: String }
 		};
 	}
 	#core;
 	#groupConsumer;
+	#containerCtx;
 	#position;
 	#tooltip;
 	#snapshot;
@@ -65,6 +73,7 @@ var TooltipElement = class extends MediaElement {
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;
+		this.setAttribute(POPUP_HOST_ATTR, "");
 		this.#disconnect = new AbortController();
 		this.#tooltip = createTooltip({
 			transition: createTransition(),
@@ -98,6 +107,9 @@ var TooltipElement = class extends MediaElement {
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
+	close(reason = "imperative-action") {
+		this.#tooltip?.close(reason);
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);
@@ -128,15 +140,16 @@ var TooltipElement = class extends MediaElement {
 			side: state.side,
 			align: state.align
 		};
-		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts, void 0, void 0, void 0, void 0, TooltipCSSVars));
+		const boundaryElement = this.#getBoundaryElement();
+		const triggerRect = this.#currentTrigger?.getBoundingClientRect();
+		const boundaryRect = getPositioningBoundaryRect(boundaryElement);
+		const offsets = resolveOffsets(this, TooltipCSSVars);
+		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, void 0, boundaryRect, offsets, TooltipCSSVars));
 		else {
-			const triggerRect = this.#currentTrigger?.getBoundingClientRect();
 			const selfRect = getPopupPositionRect(this);
-			const boundaryRect = document.documentElement.getBoundingClientRect();
-			const offsets = resolveOffsets(this, TooltipCSSVars);
 			applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets, TooltipCSSVars));
 		}
-		this.#position.sync(this.#currentTrigger);
+		this.#position.sync(this.#currentTrigger, boundaryElement);
 	}
 	#syncTrigger(triggerEl) {
 		if (triggerEl === this.#currentTrigger) return;
@@ -162,6 +175,12 @@ var TooltipElement = class extends MediaElement {
 		this.#triggerAbort = null;
 		this.#currentTrigger = null;
 	}
+	#getBoundaryElement() {
+		return resolvePositioningBoundary(this.boundary, {
+			container: this.#containerCtx.value?.container ?? null,
+			root: this.getRootNode()
+		});
+	}
 };
 //#endregion
 export { TooltipElement };

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-element.js","names":["#core","#groupConsumer","#position","#disconnect","#tooltip","#snapshot","#cleanupTrigger","#syncTrigger","#currentTrigger","#triggerAbort","#syncContent"],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"sourcesContent":["import { type ButtonState, TooltipCore, TooltipCSSVars, TooltipDataAttrs, type TooltipInput } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  getPopupPositionRect,\n  resolveOffsets,\n  type TooltipApi,\n  type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { State } from '@videojs/store';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { PositionController } from '../position-controller';\nimport { tooltipGroupContext } from './context';\n\ntype TriggerElement = HTMLElement & {\n  getLabel(): string | undefined;\n  $state: State<ButtonState>;\n};\n\nfunction isLabelTrigger(el: HTMLElement): el is TriggerElement {\n  return '$state' in el;\n}\n\nexport class TooltipElement extends MediaElement {\n  static readonly tagName = 'media-tooltip';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    disableHoverablePopup: { type: Boolean, attribute: 'disable-hoverable-popup' },\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<keyof TooltipCore.Props>;\n\n  open = TooltipCore.defaultProps.open;\n  defaultOpen = TooltipCore.defaultProps.defaultOpen;\n  side = TooltipCore.defaultProps.side;\n  align = TooltipCore.defaultProps.align;\n  delay = TooltipCore.defaultProps.delay;\n  closeDelay = TooltipCore.defaultProps.closeDelay;\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;\n  disabled = TooltipCore.defaultProps.disabled;\n\n  readonly #core = new TooltipCore();\n  readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });\n  readonly #position = new PositionController(this);\n  #tooltip: TooltipApi | null = null;\n  #snapshot: SnapshotController<TooltipInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n\n    this.#tooltip = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      disableHoverablePopup: () => this.disableHoverablePopup,\n      disabled: () => this.disabled,\n      // Lazy getter — group may arrive after connect via context.\n      group: () => this.#groupConsumer.value,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#tooltip.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#tooltip.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#tooltip.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#tooltip.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#tooltip?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#tooltip?.destroy();\n    this.#tooltip = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#tooltip && changed.has('open')) {\n      const { active: interactionOpen } = this.#tooltip.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#tooltip.open();\n        } else {\n          this.#tooltip.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#tooltip) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#position.findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#tooltip.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, TooltipDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Apply anchor-name to the discovered trigger for CSS positioning.\n    if (this.#currentTrigger) {\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n\n    if (supportsAnchorPositioning()) {\n      // Native CSS Anchor Positioning — no JS rect measurements needed.\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, undefined, undefined, undefined, undefined, TooltipCSSVars)\n      );\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n      const selfRect = getPopupPositionRect(this);\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(this, TooltipCSSVars);\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets, TooltipCSSVars)\n      );\n    }\n\n    this.#position.sync(this.#currentTrigger);\n  }\n\n  // --- Trigger management ---\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#tooltip?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#tooltip) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });\n\n      if (isLabelTrigger(triggerEl)) {\n        this.#syncContent(triggerEl);\n        triggerEl.$state.subscribe(() => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n      }\n    }\n  }\n\n  #syncContent(triggerEl: TriggerElement): void {\n    this.textContent = triggerEl.getLabel() ?? '';\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":";;;;;;;;;AA4BA,SAAS,eAAe,IAAuC;AAC7D,QAAO,YAAY;;AAGrB,IAAa,iBAAb,cAAoC,aAAa;;;cAcxC,YAAY,aAAa;qBAClB,YAAY,aAAa;cAChC,YAAY,aAAa;eACxB,YAAY,aAAa;eACzB,YAAY,aAAa;oBACpB,YAAY,aAAa;+BACd,YAAY,aAAa;kBACtC,YAAY,aAAa;eAEnB,IAAI,aAAa;wBACR,IAAI,gBAAgB,MAAM,EAAE,SAAS,qBAAqB,CAAC;mBAChE,IAAI,mBAAmB,KAAK;kBACnB;mBACuB;qBAGf;uBACE;yBACF;;;iBA/BZ;;;oBAEG;GAC3B,MAAM,EAAE,MAAM,SAAS;GACvB,aAAa;IAAE,MAAM;IAAS,WAAW;IAAgB;GACzD,MAAM,EAAE,MAAM,QAAQ;GACtB,OAAO,EAAE,MAAM,QAAQ;GACvB,OAAO,EAAE,MAAM,QAAQ;GACvB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACtD,uBAAuB;IAAE,MAAM;IAAS,WAAW;IAA2B;GAC9E,UAAU,EAAE,MAAM,SAAS;GAC5B;;CAWD;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,QAAA,aAAmB,IAAI,iBAAiB;AAExC,QAAA,UAAgB,cAAc;GAC5B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,SAAK,OAAO;AACZ,SAAK,cAAc,IAAI,YAAY,eAAe,EAAE,QAAQ;KAAE,MAAM;KAAU,GAAG;KAAS,EAAE,CAAC,CAAC;;GAEhG,aAAa,KAAK;GAClB,kBAAkB,KAAK;GACvB,6BAA6B,KAAK;GAClC,gBAAgB,KAAK;GAErB,aAAa,MAAA,cAAoB;GAClC,CAAC;AAGF,QAAA,QAAc,gBAAgB,KAAK;AAGnC,oBAAkB,MAAM,MAAA,QAAc,YAAY,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;AAGtF,MAAI,MAAA,SACF,OAAA,SAAe,MAAM,MAAA,QAAc,MAAM;MAEzC,OAAA,WAAiB,IAAI,mBAAmB,MAAM,MAAA,QAAc,MAAM;;CAItE,aAAgC,SAA+B;AAC7D,QAAM,aAAa,QAAQ;AAI3B,MAAI,KAAK,eAAe,CAAC,KAAK,KAC5B,OAAA,SAAe,MAAM;;CAIzB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,gBAAsB;AACtB,QAAA,SAAe,SAAS;AACxB,QAAA,UAAgB;AAChB,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;CAGrB,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAA,KAAW,SAAS,KAAK;AAGzB,MAAI,MAAA,WAAiB,QAAQ,IAAI,OAAO,EAAE;GACxC,MAAM,EAAE,QAAQ,oBAAoB,MAAA,QAAc,MAAM;AACxD,OAAI,KAAK,SAAS,gBAChB,KAAI,KAAK,KACP,OAAA,QAAc,MAAM;OAEpB,OAAA,QAAc,OAAO;;;CAM7B,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,MAAA,QAAe;EAGpB,MAAM,YAAY,MAAA,SAAe,aAAa;AAC9C,QAAA,YAAkB,UAAU;EAG5B,MAAM,QAAQ,MAAA,QAAc,MAAM;AAClC,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAGnC,oBAAkB,MAAM,MAAA,KAAW,cAAc,MAAM,CAAC;AACxD,sBAAoB,MAAM,OAAO,iBAAiB;AAIlD,MAAI,MAAM,KACR,gBAAe,KAAK;MAEpB,gBAAe,KAAK;AAItB,MAAI,MAAA,eACF,aAAY,MAAA,gBAAsB,mBAAmB,KAAK,GAAG,CAAC;AAIhE,MAAI,CAAC,MAAM,MAAM;AACf,SAAA,SAAe,SAAS;AACxB;;EAIF,MAAM,UAAU;GAAE,MAAM,MAAM;GAAM,OAAO,MAAM;GAAO;AAExD,MAAI,2BAA2B,CAE7B,aACE,MACA,uBAAuB,KAAK,IAAI,SAAS,KAAA,GAAW,KAAA,GAAW,KAAA,GAAW,KAAA,GAAW,eAAe,CACrG;OACI;GAEL,MAAM,cAAc,MAAA,gBAAsB,uBAAuB;GACjE,MAAM,WAAW,qBAAqB,KAAK;GAC3C,MAAM,eAAe,SAAS,gBAAgB,uBAAuB;GACrE,MAAM,UAAU,eAAe,MAAM,eAAe;AACpD,eACE,MACA,uBAAuB,KAAK,IAAI,SAAS,aAAa,UAAU,cAAc,SAAS,eAAe,CACvG;;AAGH,QAAA,SAAe,KAAK,MAAA,eAAqB;;CAK3C,aAAa,WAAqC;AAChD,MAAI,cAAc,MAAA,eAAsB;AAExC,QAAA,SAAe,SAAS;AACxB,QAAA,gBAAsB;AACtB,QAAA,iBAAuB;AACvB,QAAA,SAAe,kBAAkB,UAAU;AAE3C,MAAI,aAAa,MAAA,SAAe;AAC9B,SAAA,eAAqB,IAAI,iBAAiB;AAC1C,qBAAkB,WAAW,MAAA,QAAc,cAAc,EAAE,QAAQ,MAAA,aAAmB,QAAQ,CAAC;AAE/F,OAAI,eAAe,UAAU,EAAE;AAC7B,UAAA,YAAkB,UAAU;AAC5B,cAAU,OAAO,gBAAgB,MAAA,YAAkB,UAAU,EAAE,EAC7D,QAAQ,MAAA,aAAmB,QAC5B,CAAC;;;;CAKR,aAAa,WAAiC;AAC5C,OAAK,cAAc,UAAU,UAAU,IAAI;;CAG7C,kBAAwB;AACtB,MAAI,MAAA,eACF,OAAA,eAAqB,MAAM,eAAe,cAAc;AAG1D,QAAA,cAAoB,OAAO;AAC3B,QAAA,eAAqB;AACrB,QAAA,iBAAuB"}
+{"version":3,"file":"tooltip-element.js","names":["#core","#groupConsumer","#containerCtx","#position","#disconnect","#tooltip","#snapshot","#cleanupTrigger","#syncTrigger","#currentTrigger","#getBoundaryElement","#triggerAbort","#syncContent"],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"sourcesContent":["import {\n  type ButtonState,\n  POPUP_HOST_ATTR,\n  TooltipCore,\n  TooltipCSSVars,\n  TooltipDataAttrs,\n  type TooltipInput,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createTooltip,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  getPopupPositionRect,\n  getPositioningBoundaryRect,\n  type PositioningBoundary,\n  resolveOffsets,\n  resolvePositioningBoundary,\n  type TooltipApi,\n  type TooltipChangeDetails,\n  type TooltipOpenChangeReason,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { State } from '@videojs/store';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { containerContext } from '../../player/context';\nimport { MediaElement } from '../media-element';\nimport { PositionController } from '../position-controller';\nimport { tooltipGroupContext } from './context';\n\ntype TriggerElement = HTMLElement & {\n  getLabel(): string | undefined;\n  $state: State<ButtonState>;\n};\n\nfunction isLabelTrigger(el: HTMLElement): el is TriggerElement {\n  return '$state' in el;\n}\n\nexport class TooltipElement extends MediaElement {\n  static readonly tagName = 'media-tooltip';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    disableHoverablePopup: { type: Boolean, attribute: 'disable-hoverable-popup' },\n    disabled: { type: Boolean },\n    boundary: { type: String },\n  } satisfies PropertyDeclarationMap<keyof TooltipCore.Props | 'boundary'>;\n\n  open = TooltipCore.defaultProps.open;\n  defaultOpen = TooltipCore.defaultProps.defaultOpen;\n  side = TooltipCore.defaultProps.side;\n  align = TooltipCore.defaultProps.align;\n  delay = TooltipCore.defaultProps.delay;\n  closeDelay = TooltipCore.defaultProps.closeDelay;\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup;\n  disabled = TooltipCore.defaultProps.disabled;\n  boundary: PositioningBoundary = 'container';\n\n  readonly #core = new TooltipCore();\n  readonly #groupConsumer = new ContextConsumer(this, { context: tooltipGroupContext });\n  readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #position = new PositionController(this);\n  #tooltip: TooltipApi | null = null;\n  #snapshot: SnapshotController<TooltipInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.setAttribute(POPUP_HOST_ATTR, '');\n\n    this.#disconnect = new AbortController();\n\n    this.#tooltip = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      disableHoverablePopup: () => this.disableHoverablePopup,\n      disabled: () => this.disabled,\n      // Lazy getter — group may arrive after connect via context.\n      group: () => this.#groupConsumer.value,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#tooltip.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#tooltip.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#tooltip.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#tooltip.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#tooltip?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#tooltip?.destroy();\n    this.#tooltip = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  close(reason: TooltipOpenChangeReason = 'imperative-action'): void {\n    this.#tooltip?.close(reason);\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#tooltip && changed.has('open')) {\n      const { active: interactionOpen } = this.#tooltip.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#tooltip.open();\n        } else {\n          this.#tooltip.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#tooltip) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#position.findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#tooltip.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, TooltipDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Apply anchor-name to the discovered trigger for CSS positioning.\n    if (this.#currentTrigger) {\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n    const boundaryElement = this.#getBoundaryElement();\n    const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n    const boundaryRect = getPositioningBoundaryRect(boundaryElement);\n    const offsets = resolveOffsets(this, TooltipCSSVars);\n\n    if (supportsAnchorPositioning()) {\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, triggerRect, undefined, boundaryRect, offsets, TooltipCSSVars)\n      );\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const selfRect = getPopupPositionRect(this);\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets, TooltipCSSVars)\n      );\n    }\n\n    this.#position.sync(this.#currentTrigger, boundaryElement);\n  }\n\n  // --- Trigger management ---\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#tooltip?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#tooltip) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#tooltip.triggerProps, { signal: this.#triggerAbort.signal });\n\n      if (isLabelTrigger(triggerEl)) {\n        this.#syncContent(triggerEl);\n        triggerEl.$state.subscribe(() => this.#syncContent(triggerEl), {\n          signal: this.#triggerAbort.signal,\n        });\n      }\n    }\n  }\n\n  #syncContent(triggerEl: TriggerElement): void {\n    this.textContent = triggerEl.getLabel() ?? '';\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n\n  #getBoundaryElement(): Element | null {\n    return resolvePositioningBoundary(this.boundary, {\n      container: this.#containerCtx.value?.container ?? null,\n      root: this.getRootNode() as Document | ShadowRoot,\n    });\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+import { InputIndicatorElement } from "../input-indicators/input-indicator-element.js";
+import { LiveIndicator } from "../input-indicators/live-indicator.js";
+import { createTransition } from "@videojs/core/dom";
+import { VolumeIndicatorCSSVars, VolumeIndicatorCore, VolumeIndicatorDataAttrs, getVolumeIndicatorDisplayValue } from "@videojs/core";
+//#region src/ui/volume-indicator/volume-indicator-element.ts
+var VolumeIndicatorElement = class extends InputIndicatorElement {
+	static {
+		this.tagName = "media-volume-indicator";
+	}
+	static {
+		this.properties = { closeDelay: {
+			type: Number,
+			attribute: "close-delay"
+		} };
+	}
+	#core = new VolumeIndicatorCore();
+	#transition = createTransition();
+	#liveIndicator = new LiveIndicator({
+		host: this,
+		dataAttrs: VolumeIndicatorDataAttrs,
+		render: renderVolumeIndicator
+	});
+	get core() {
+		return this.#core;
+	}
+	get transition() {
+		return this.#transition;
+	}
+	get liveIndicator() {
+		return this.#liveIndicator;
+	}
+	syncCoreProps() {
+		this.#core.setProps({ closeDelay: this.closeDelay });
+	}
+};
+function renderVolumeIndicator(element, state) {
+	const fill = element.querySelector("media-volume-indicator-fill");
+	const value = element.querySelector("media-volume-indicator-value");
+	if (state.fill) fill?.style.setProperty(VolumeIndicatorCSSVars.fill, state.fill);
+	else fill?.style.removeProperty(VolumeIndicatorCSSVars.fill);
+	if (value) value.textContent = getVolumeIndicatorDisplayValue(state);
+}
+//#endregion
+export { VolumeIndicatorElement };
+
+//# sourceMappingURL=volume-indicator-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-element.js","names":["#core","#transition","#liveIndicator"],"sources":["../../../../src/ui/volume-indicator/volume-indicator-element.ts"],"sourcesContent":["import {\n  getVolumeIndicatorDisplayValue,\n  VolumeIndicatorCore,\n  VolumeIndicatorCSSVars,\n  VolumeIndicatorDataAttrs,\n} from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap } from '@videojs/element';\n\nimport { InputIndicatorElement } from '../input-indicators/input-indicator-element';\nimport { LiveIndicator } from '../input-indicators/live-indicator';\n\nexport class VolumeIndicatorElement extends InputIndicatorElement<VolumeIndicatorCore.State> {\n  static readonly tagName = 'media-volume-indicator';\n\n  static override properties = {\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<'closeDelay'>;\n\n  closeDelay: number | undefined;\n\n  readonly #core = new VolumeIndicatorCore();\n  readonly #transition = createTransition();\n  readonly #liveIndicator = new LiveIndicator({\n    host: this,\n    dataAttrs: VolumeIndicatorDataAttrs,\n    render: renderVolumeIndicator,\n  });\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 syncCoreProps(): void {\n    this.#core.setProps({ closeDelay: this.closeDelay });\n  }\n}\n\nfunction renderVolumeIndicator(element: HTMLElement, state: VolumeIndicatorCore.State): void {\n  const fill = element.querySelector<HTMLElement>('media-volume-indicator-fill');\n  const value = element.querySelector('media-volume-indicator-value');\n\n  if (state.fill) {\n    fill?.style.setProperty(VolumeIndicatorCSSVars.fill, state.fill);\n  } else {\n    fill?.style.removeProperty(VolumeIndicatorCSSVars.fill);\n  }\n\n  if (value) {\n    value.textContent = getVolumeIndicatorDisplayValue(state);\n  }\n}\n"],"mappings":";;;;;AAYA,IAAa,yBAAb,cAA4C,sBAAiD;;iBACjE;;;oBAEG,EAC3B,YAAY;GAAE,MAAM;GAAQ,WAAW;GAAe,EACvD;;CAID,QAAiB,IAAI,qBAAqB;CAC1C,cAAuB,kBAAkB;CACzC,iBAA0B,IAAI,cAAc;EAC1C,MAAM;EACN,WAAW;EACX,QAAQ;EACT,CAAC;CAEF,IAAc,OAAO;AACnB,SAAO,MAAA;;CAGT,IAAc,aAAa;AACzB,SAAO,MAAA;;CAGT,IAAc,gBAAgB;AAC5B,SAAO,MAAA;;CAGT,gBAAyC;AACvC,QAAA,KAAW,SAAS,EAAE,YAAY,KAAK,YAAY,CAAC;;;AAIxD,SAAS,sBAAsB,SAAsB,OAAwC;CAC3F,MAAM,OAAO,QAAQ,cAA2B,8BAA8B;CAC9E,MAAM,QAAQ,QAAQ,cAAc,+BAA+B;AAEnE,KAAI,MAAM,KACR,OAAM,MAAM,YAAY,uBAAuB,MAAM,MAAM,KAAK;KAEhE,OAAM,MAAM,eAAe,uBAAuB,KAAK;AAGzD,KAAI,MACF,OAAM,cAAc,+BAA+B,MAAM"}

package/dist/default/ui/volume-indicator/volume-indicator-fill-element.js

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

package/dist/default/ui/volume-indicator/volume-indicator-fill-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-fill-element.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill-element.ts"],"sourcesContent":["import { MediaElement } from '../media-element';\n\nexport class VolumeIndicatorFillElement extends MediaElement {\n  static readonly tagName = 'media-volume-indicator-fill';\n}\n"],"mappings":";;AAEA,IAAa,6BAAb,cAAgD,aAAa;;iBACjC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-value-element.js","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value-element.ts"],"sourcesContent":["import { MediaElement } from '../media-element';\n\nexport class VolumeIndicatorValueElement extends MediaElement {\n  static readonly tagName = 'media-volume-indicator-value';\n}\n"],"mappings":";;AAEA,IAAa,8BAAb,cAAiD,aAAa;;iBAClC"}

package/dist/dev/_virtual/inline-css_src/define/audio/minimal-skin.js

@@ -1,5 +1,5 @@
 //#region inline-css:src/define/audio/minimal-skin.js
-var minimal_skin_default = "/* -------------------------------------------------------------------------- */\n/* Base                                                                       */\n/* -------------------------------------------------------------------------- */\n\nvideo-player {\n  display: contents;\n}\n\n/*\nRequired to override any default video and image styles (such as\nTailwind's CSS reset) and ensure they fill the container as expected.\n*/\nvideo-player video,\nvideo-player [slot=\"poster\"] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\nvideo-player video::-webkit-media-text-track-container {\n  transition: translate var(--media-caption-track-duration, 0) ease-out;\n  transition-delay: var(--media-caption-track-delay, 0);\n  translate: 0 var(--media-caption-track-y, 0);\n  scale: 0.98;\n  z-index: 1;\n  font-family: inherit;\n}\n\nmedia-tooltip-group {\n  display: contents;\n}\n\n:host {\n  /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */\n  display: grid;\n  width: 100%;\n}\n\n/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */\n.media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n\n/* ==========================================================================\n   Reset\n   ========================================================================== */\n\n.media-minimal-skin *,\n.media-minimal-skin *::before,\n.media-minimal-skin *::after {\n  box-sizing: border-box;\n}\n.media-minimal-skin img,\n.media-minimal-skin video,\n.media-minimal-skin svg {\n  display: block;\n  max-width: 100%;\n}\n.media-minimal-skin button {\n  font: inherit;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .media-minimal-skin {\n    interpolate-size: allow-keywords;\n  }\n}\n\n/* ==========================================================================\n   Root Container\n   ========================================================================== */\n\n.media-minimal-skin {\n  container: media-root / inline-size;\n  position: relative;\n  isolation: isolate;\n  display: block;\n  height: 100%;\n  width: 100%;\n  border-radius: var(--media-border-radius, 0.75rem);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n\n  &:focus-visible {\n    outline-color: currentColor;\n  }\n  font-family:\n    Inter Variable,\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    sans-serif;\n  line-height: 1.5;\n  letter-spacing: normal;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n\n  & > * {\n    font-size: 0.75rem; /* 12px at 100% font size */\n  }\n\n  @container media-root (width > 48rem) {\n    & > * {\n      font-size: 0.875rem; /* 14px at 100% font size */\n    }\n  }\n}\n\n/* ==========================================================================\n   Buffering Indicator\n   ========================================================================== */\n\n.media-minimal-skin .media-buffering-indicator {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  color: oklch(1 0 0);\n  pointer-events: none;\n\n  &[data-visible] {\n    display: flex;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin .media-error:not([data-open]) {\n  display: none;\n}\n\n.media-minimal-skin .media-error__title {\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.media-minimal-skin .media-error__description {\n  opacity: 0.7;\n  overflow-wrap: anywhere;\n}\n\n.media-minimal-skin .media-error__actions {\n  display: flex;\n  gap: 0.5rem;\n\n  & > * {\n    flex: 1;\n  }\n}\n\n.media-minimal-skin .media-error[data-open] ~ .media-controls * {\n  visibility: hidden;\n}\n\n/* ==========================================================================\n   Controls\n   ========================================================================== */\n\n.media-minimal-skin .media-controls {\n  container: media-controls / inline-size;\n  display: flex;\n  align-items: center;\n  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));\n  --media-controls-current-shadow-color-subtle: oklch(\n    from var(--media-controls-current-shadow-color) l c h /\n    calc(alpha * 0.4)\n  );\n  background-color: var(--media-controls-background-color);\n  backdrop-filter: var(--media-controls-backdrop-filter);\n  text-shadow: 0 1px 0 var(--media-controls-current-shadow-color);\n}\n\n/* ==========================================================================\n   Time Controls & Display\n   ========================================================================== */\n\n.media-minimal-skin .media-time-controls {\n  container: media-time-controls / inline-size;\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n}\n\n.media-minimal-skin .media-time-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.media-minimal-skin .media-time {\n  font-variant-numeric: tabular-nums;\n}\n\n.media-minimal-skin .media-time--current,\n.media-minimal-skin .media-time-separator {\n  display: none;\n}\n\n@container media-root (width > 42rem) {\n  .media-minimal-skin .media-time-controls {\n    flex-direction: row;\n  }\n\n  .media-minimal-skin .media-time--duration,\n  .media-minimal-skin .media-time-separator {\n    color: oklch(from currentColor l c h / 0.6);\n  }\n\n  .media-minimal-skin .media-time--current,\n  .media-minimal-skin .media-time-separator {\n    display: inline;\n  }\n}\n\n/* ==========================================================================\n   Buttons\n   ========================================================================== */\n\n/* Base button */\n.media-minimal-skin .media-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0.5rem 1rem;\n  border: none;\n  border-radius: 0.5rem;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  transition-property: background-color, outline-offset, scale;\n  /* Fix weird jumping when clicking on the buttons in Safari. */\n  will-change: scale;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  cursor: pointer;\n  user-select: none;\n  text-align: center;\n  touch-action: manipulation;\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n\n  &:active {\n    scale: 0.98;\n  }\n\n  &[disabled] {\n    opacity: 0.5;\n    filter: grayscale(1);\n    cursor: not-allowed;\n  }\n\n  &[data-availability=\"unavailable\"],\n  &[data-availability=\"unsupported\"] {\n    display: none;\n  }\n}\n\n/* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */\n@supports (corner-shape: squircle) {\n  .media-minimal-skin .media-button {\n    border-radius: 1rem;\n    /* biome-ignore lint/correctness/noUnknownProperty: corner-shape is an emerging CSS spec */\n    corner-shape: squircle;\n  }\n}\n\n/* Primary button variant */\n.media-minimal-skin .media-button--primary {\n  background: oklch(1 0 0);\n  color: oklch(0 0 0);\n  font-weight: 500;\n  text-shadow: none;\n}\n\n/* Subtle button variant */\n.media-minimal-skin .media-button--subtle {\n  background: transparent;\n  color: inherit;\n  text-shadow: inherit;\n\n  &:hover,\n  &:focus-visible,\n  &[aria-expanded=\"true\"] {\n    background: oklch(from currentColor l c h / 0.1);\n  }\n}\n\n/* Icon button variant */\n.media-minimal-skin .media-button--icon {\n  display: grid;\n  width: 2.375rem;\n  padding: 0;\n  aspect-ratio: 1;\n\n  &:active {\n    scale: 0.9;\n  }\n\n  & .media-icon {\n    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, oklch(0 0 0 / 0.25)));\n  }\n}\n\n/* Seek button */\n.media-minimal-skin .media-button--seek {\n  & .media-icon__label {\n    position: absolute;\n    right: -1px;\n    bottom: -3px;\n    font-size: 10px; /* Hard coded due to size limitations. */\n    font-weight: 480;\n    font-variant-numeric: tabular-nums;\n  }\n\n  &:has(.media-icon--flipped) .media-icon__label {\n    right: unset;\n    left: -1px;\n  }\n}\n\n/* Playback rate button */\n.media-minimal-skin .media-button--playback-rate {\n  padding: 0;\n\n  &::after {\n    content: attr(data-rate) \"\\00D7\";\n    width: 4ch;\n    font-variant-numeric: tabular-nums;\n  }\n}\n\n/* ==========================================================================\n   Button Groups\n   ========================================================================== */\n\n.media-minimal-skin .media-button-group {\n  display: flex;\n  align-items: center;\n  gap: 0.075rem;\n\n  @container media-root (width > 42rem) {\n    gap: 0.125rem;\n  }\n}\n\n/* ==========================================================================\n   Icons\n   ========================================================================== */\n\n.media-minimal-skin .media-icon__container {\n  position: relative;\n}\n.media-minimal-skin .media-icon {\n  display: block;\n  flex-shrink: 0;\n  grid-area: 1 / 1;\n  width: 18px;\n  height: 18px;\n  transition-behavior: allow-discrete;\n  transition-property: display, opacity;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.media-minimal-skin .media-icon--flipped {\n  scale: -1 1;\n}\n\n/* ==========================================================================\n   Slider\n   ========================================================================== */\n\n.media-minimal-skin .media-slider {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  border-radius: calc(infinity * 1px);\n  outline: none;\n  cursor: pointer;\n\n  &[data-orientation=\"horizontal\"] {\n    min-width: 5rem;\n    width: 100%;\n    height: 2rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 2rem;\n    height: 4.5rem;\n  }\n}\n\n/* Track */\n.media-minimal-skin .media-slider__track {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  border-radius: inherit;\n  user-select: none;\n  background-color: oklch(from currentColor l c h / 0.2);\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: 0.1875rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 0.1875rem;\n    height: 100%;\n  }\n}\n\n/* Thumb */\n.media-minimal-skin .media-slider__thumb {\n  position: absolute;\n  translate: -50% -50%;\n  z-index: 10;\n  width: 0.75rem;\n  height: 0.75rem;\n  background-color: currentColor;\n  border-radius: calc(infinity * 1px);\n  box-shadow:\n    0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),\n    0 1px 3px 0 oklch(0 0 0 / 0.15),\n    0 1px 2px -1px oklch(0 0 0 / 0.15);\n  opacity: 0;\n  scale: 0.7;\n  transform-origin: center;\n  transition-property: opacity, scale, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n\n  &[data-orientation=\"horizontal\"] {\n    top: 50%;\n    left: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    left: 50%;\n    top: calc(100% - var(--media-slider-fill));\n  }\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n}\n\n.media-minimal-skin .media-slider:hover .media-slider__thumb,\n.media-minimal-skin .media-slider:focus-within .media-slider__thumb,\n.media-minimal-skin .media-slider__thumb--persistent {\n  opacity: 1;\n  scale: 1;\n}\n\n/* Shared track fills */\n.media-minimal-skin .media-slider__buffer,\n.media-minimal-skin .media-slider__fill {\n  position: absolute;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"horizontal\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"horizontal\"] {\n  inset-block: 0;\n  left: 0;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"vertical\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"vertical\"] {\n  inset-inline: 0;\n  bottom: 0;\n}\n\n/* Buffer */\n.media-minimal-skin .media-slider__buffer {\n  background-color: oklch(from currentColor l c h / 0.2);\n  transition-duration: 0.25s;\n  transition-timing-function: ease-out;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-buffer);\n    transition-property: width;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-buffer);\n    transition-property: height;\n  }\n}\n\n/* Fill */\n.media-minimal-skin .media-slider__fill {\n  background-color: currentColor;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-fill);\n  }\n}\n\n/* Dragging — thumb and fill follow the pointer position */\n.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=\"horizontal\"] {\n  left: var(--media-slider-pointer);\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=\"vertical\"] {\n  top: calc(100% - var(--media-slider-pointer));\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=\"horizontal\"] {\n  width: var(--media-slider-pointer);\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=\"vertical\"] {\n  height: var(--media-slider-pointer);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin .media-popover,\n.media-minimal-skin .media-tooltip {\n  margin: 0;\n  border: 0;\n  color: inherit;\n  overflow: visible;\n  transition-property: scale, opacity, filter;\n  transition-duration: var(--media-popup-transition-duration);\n  transition-timing-function: var(--media-popup-transition-timing-function);\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    scale: 0.5;\n    filter: blur(8px);\n  }\n\n  &[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  &[data-side=\"top\"] {\n    transform-origin: bottom;\n  }\n  &[data-side=\"bottom\"] {\n    transform-origin: top;\n  }\n  &[data-side=\"left\"] {\n    transform-origin: right;\n  }\n  &[data-side=\"right\"] {\n    transform-origin: left;\n  }\n\n  /* Safe area between trigger and popup */\n  &::before {\n    content: \"\";\n    position: absolute;\n    pointer-events: inherit;\n  }\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    width: 100%;\n    inset-inline: 0;\n  }\n  &[data-side=\"top\"]::before {\n    top: 100%;\n  }\n  &[data-side=\"bottom\"]::before {\n    bottom: 100%;\n  }\n\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    height: 100%;\n    inset-block: 0;\n  }\n  &[data-side=\"left\"]::before {\n    left: 100%;\n  }\n  &[data-side=\"right\"]::before {\n    right: 100%;\n  }\n}\n\n.media-minimal-skin .media-popover {\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-popover-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-popover-side-offset);\n  }\n}\n\n.media-minimal-skin .media-tooltip {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.5rem;\n  background-color: var(--media-tooltip-background-color);\n  backdrop-filter: var(--media-tooltip-backdrop-filter);\n  box-shadow:\n    0 0 0 1px var(--media-tooltip-border-color),\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  color: var(--media-tooltip-text-color);\n  font-size: 0.75rem; /* 12px at 100% font size */\n  white-space: nowrap;\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-tooltip-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-tooltip-side-offset);\n  }\n}\n\n.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n\n/* ==========================================================================\n   Icon State Visibility for Audio Skins\n\n   Data-attribute-driven visibility rules for multi-state icon buttons.\n   Uses :is() with both element selectors (for HTML custom element wrappers)\n   and class selectors (for React rendered SVG elements).\n   ========================================================================== */\n\n/* --- All icons hidden by default --- */\n\n.media-button--play .media-icon--restart,\n.media-button--play .media-icon--play,\n.media-button--play .media-icon--pause,\n.media-button--mute .media-icon--volume-off,\n.media-button--mute .media-icon--volume-low,\n.media-button--mute .media-icon--volume-high {\n  display: none;\n  opacity: 0;\n}\n\n/* --- Active icon per state --- */\n\n/* Play: ended → restart */\n.media-button--play[data-ended] .media-icon--restart,\n/* Play: paused (not ended) → play */\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\n/* Play: playing (not paused, not ended) → pause */\n.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,\n/* Mute: muted → volume off */\n.media-button--mute[data-muted] .media-icon--volume-off,\n/* Mute: volume low (not muted) → volume low */\n.media-button--mute:not([data-muted])[data-volume-level=\"low\"] .media-icon--volume-low,\n/* Mute: volume high (not muted, not low) → volume high */\n.media-button--mute:not([data-muted]):not([data-volume-level=\"low\"]) .media-icon--volume-high {\n  display: block;\n  opacity: 1;\n}\n\n\n/* ==========================================================================\n  Root\n  ========================================================================== */\n\n.media-minimal-skin--audio {\n  --media-controls-background-color: oklch(1 0 0);\n  --media-controls-backdrop-filter: blur(16px) saturate(1.5);\n  --media-controls-border-color: oklch(0 0 0 / 0.05);\n  --media-controls-text-color: var(--media-color-primary, oklch(0 0 0));\n  --media-error-dialog-transition-duration: 250ms;\n  --media-error-dialog-transition-delay: 100ms;\n  --media-popup-transition-duration: 100ms;\n  --media-popup-transition-timing-function: ease-out;\n  --media-tooltip-background-color: oklch(1 0 0 / 0.1);\n  --media-tooltip-border-color: oklch(0 0 0 / 0.05);\n  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);\n  --media-tooltip-text-color: currentColor;\n  --media-tooltip-side-offset: 0.75rem;\n  --media-popover-side-offset: 0.75rem;\n\n  @media (prefers-reduced-motion: reduce) {\n    --media-error-dialog-transition-duration: 50ms;\n    --media-error-dialog-transition-delay: 0ms;\n    --media-popup-transition-duration: 0ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    --media-controls-background-color: oklch(0 0 0);\n    --media-controls-border-color: oklch(1 0 0 / 0.1);\n    --media-controls-text-color: var(--media-color-primary, oklch(1 0 0));\n  }\n\n  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\n    --media-tooltip-background-color: oklch(1 0 0);\n  }\n\n  @media (prefers-color-scheme: dark) and ((prefers-reduced-transparency: reduce) or (prefers-contrast: more)) {\n    --media-tooltip-background-color: oklch(0 0 0);\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin--audio .media-error__dialog {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  padding-inline: 1.25rem 0.5rem;\n  transition-property: opacity, filter, scale;\n  transition-duration: var(--media-error-dialog-transition-duration);\n  transition-delay: var(--media-error-dialog-transition-delay);\n  transition-timing-function: ease-out;\n  border-radius: calc(infinity * 1px);\n  background-color: oklch(from var(--media-controls-background-color) l c h / 1);\n}\n\n.media-minimal-skin--audio .media-error[data-starting-style] .media-error__dialog,\n.media-minimal-skin--audio .media-error[data-ending-style] .media-error__dialog {\n  opacity: 0;\n  filter: blur(4px);\n  scale: 0.95;\n}\n.media-minimal-skin--audio .media-error[data-ending-style] .media-error__dialog {\n  transition-delay: 0ms;\n}\n\n.media-minimal-skin--audio .media-error__content {\n  flex: 1;\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n/* ==========================================================================\n  Controls\n  ========================================================================== */\n\n.media-minimal-skin--audio .media-controls {\n  padding: 0.375rem;\n  gap: 0.5rem;\n  color: var(--media-controls-text-color);\n  box-shadow: 0 0 0 1px var(--media-controls-border-color);\n  border-radius: var(--media-border-radius, 1rem);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin--audio .media-popover--volume {\n  background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%);\n  padding: 0 0 0 4rem;\n}\n\n";
+var minimal_skin_default = "/* -------------------------------------------------------------------------- */\n/* Global styles for the host document, outside of the Shadow DOM             */\n/* -------------------------------------------------------------------------- */\n\nvideo-player,\nlive-video-player {\n  display: contents;\n}\n\n/*\nRequired to override any default video and image styles (such as\nTailwind's CSS reset) and ensure they fill the container as expected.\n*/\nvideo-player video,\nvideo-player [slot=\"poster\"],\nlive-video-player video,\nlive-video-player [slot=\"poster\"] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\nvideo-player video::-webkit-media-text-track-container,\nlive-video-player video::-webkit-media-text-track-container {\n  z-index: 1;\n  font-family: inherit;\n  scale: 0.98;\n  translate: 0 var(--media-caption-track-y, 0);\n  transition: translate var(--media-caption-track-duration, 0) ease-out;\n  transition-delay: var(--media-caption-track-delay, 0);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Shared styles for all HTML skins                                           */\n/* -------------------------------------------------------------------------- */\n\nmedia-tooltip-group {\n  display: contents;\n}\n\n:host {\n  /* `display:grid` fixes a weird issue with Safari when setting aspect-ratio */\n  display: grid;\n  width: 100%;\n}\n\n/* Hide volume popover when volume control is unsupported (e.g., iOS Safari). */\n.media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n\n/* ==========================================================================\n   Reset\n   ========================================================================== */\n\n.media-minimal-skin *,\n.media-minimal-skin *::before,\n.media-minimal-skin *::after {\n  box-sizing: border-box;\n}\n.media-minimal-skin img,\n.media-minimal-skin video,\n.media-minimal-skin svg {\n  display: block;\n  max-width: 100%;\n}\n.media-minimal-skin button {\n  font: inherit;\n}\n.media-minimal-skin [hidden][hidden] {\n  /* Keep authored templates hidden even when component classes set display. */\n  display: none;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .media-minimal-skin {\n    interpolate-size: allow-keywords;\n  }\n}\n\n/* ==========================================================================\n   Root Container\n   ========================================================================== */\n\n.media-minimal-skin {\n  --media-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.15));\n  --media-current-shadow-color-subtle: oklch(from var(--media-current-shadow-color) l c h / calc(alpha * 0.4));\n  --media-icon-size: 18px;\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n  container: media-root / inline-size;\n  font-family:\n    Inter Variable,\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    sans-serif;\n  font-size: 0.8125rem; /* 13px at 100% font size */\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n  line-height: 1.5;\n  letter-spacing: normal;\n  outline: 2px solid transparent;\n  outline-offset: -4px;\n  border-radius: var(--media-border-radius, 0.75rem);\n  isolation: isolate;\n  transition-timing-function: ease-out;\n  transition-duration: 100ms;\n  transition-property: outline-offset, outline-color;\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n}\n\n/* ==========================================================================\n   Buffering Indicator\n   ========================================================================== */\n\n.media-minimal-skin .media-buffering-indicator {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  color: oklch(1 0 0);\n  pointer-events: none;\n\n  &:not([data-visible]) {\n    --media-spinner-animation: none;\n  }\n\n  &[data-visible] {\n    display: flex;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin .media-error:not([data-open]) {\n  display: none;\n}\n\n.media-minimal-skin .media-error__title {\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.media-minimal-skin .media-error__description {\n  overflow-wrap: anywhere;\n  opacity: 0.7;\n}\n\n.media-minimal-skin .media-error__actions {\n  display: flex;\n  gap: 0.5rem;\n\n  & > * {\n    flex: 1;\n  }\n}\n\n.media-minimal-skin .media-error[data-open] ~ .media-controls * {\n  visibility: hidden;\n}\n\n/* ==========================================================================\n   Controls\n   ========================================================================== */\n\n.media-minimal-skin .media-controls {\n  display: flex;\n  align-items: center;\n  container: media-controls / inline-size;\n  text-shadow: 0 1px 0 var(--media-current-shadow-color);\n  background-color: var(--media-controls-background-color);\n  backdrop-filter: var(--media-controls-backdrop-filter);\n}\n\n/* ==========================================================================\n   Time Controls & Display\n   ========================================================================== */\n\n.media-minimal-skin .media-time-controls {\n  display: flex;\n  flex: 1;\n  flex-direction: row-reverse;\n  gap: 0.75rem;\n  align-items: center;\n  container: media-time-controls / inline-size;\n}\n\n.media-minimal-skin .media-time-group {\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n}\n\n.media-minimal-skin .media-time {\n  font-variant-numeric: tabular-nums;\n}\n\n.media-minimal-skin .media-time--current,\n.media-minimal-skin .media-time-separator {\n  display: none;\n}\n\n@container media-root (width > 42rem) {\n  .media-minimal-skin .media-time-controls {\n    flex-direction: row;\n  }\n\n  .media-minimal-skin .media-time--duration,\n  .media-minimal-skin .media-time-separator {\n    color: oklch(from currentColor l c h / 0.6);\n  }\n\n  .media-minimal-skin .media-time--current,\n  .media-minimal-skin .media-time-separator {\n    display: inline;\n  }\n}\n\n/* ==========================================================================\n   Buttons\n   ========================================================================== */\n\n/* Base button */\n.media-minimal-skin .media-button {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  min-height: 0;\n  padding: 0.5rem 1rem;\n  text-align: center;\n  touch-action: manipulation;\n  cursor: pointer;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  border: none;\n  border-radius: 0.5rem;\n  transition-timing-function: ease-out;\n  transition-duration: 150ms;\n  transition-property: background-color, outline-offset, scale;\n  /* Fix weird jumping when clicking on the buttons in Safari. */\n  will-change: scale;\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n\n  &:active {\n    scale: 0.98;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n    filter: grayscale(1);\n  }\n\n  &[data-availability=\"unavailable\"],\n  &[data-availability=\"unsupported\"] {\n    display: none;\n  }\n}\n\n@supports (corner-shape: squircle) {\n  .media-minimal-skin .media-button {\n    border-radius: 1rem;\n    corner-shape: squircle;\n  }\n}\n\n/* Primary button variant */\n.media-minimal-skin .media-button--primary {\n  font-weight: 500;\n  color: oklch(0 0 0);\n  text-shadow: none;\n  background: oklch(1 0 0);\n}\n\n/* Subtle button variant */\n.media-minimal-skin .media-button--subtle {\n  color: inherit;\n  text-shadow: inherit;\n  background: transparent;\n\n  &:hover,\n  &:focus-visible,\n  &[aria-expanded=\"true\"] {\n    background: oklch(from currentColor l c h / 0.1);\n  }\n}\n\n/* Icon button variant */\n.media-minimal-skin .media-button--icon {\n  display: grid;\n  width: 2.375rem;\n  aspect-ratio: 1;\n  padding: 0;\n\n  &:active {\n    scale: 0.9;\n  }\n\n  & .media-icon {\n    grid-area: 1 / 1;\n    transition-behavior: allow-discrete;\n    transition-property: display, opacity;\n    transition-duration: 150ms;\n    transition-timing-function: ease-out;\n    filter: drop-shadow(0 1px 0 var(--media-current-shadow-color));\n  }\n}\n\n/* Seek button */\n.media-minimal-skin .media-button--seek {\n  & .media-icon__label {\n    position: absolute;\n    right: -1px;\n    bottom: -3px;\n    font-size: 10px; /* Hard coded due to size limitations. */\n    font-weight: 480;\n    font-variant-numeric: tabular-nums;\n  }\n\n  &:has(.media-icon--flipped) .media-icon__label {\n    right: unset;\n    left: -1px;\n  }\n}\n\n/* Playback rate button */\n.media-minimal-skin .media-button--playback-rate {\n  padding: 0;\n  font-variant-numeric: tabular-nums;\n\n  &::after {\n    width: 4ch;\n    content: attr(data-rate) \"\\00D7\";\n  }\n\n  &[data-inline-rate-label]::after {\n    content: none;\n  }\n}\n\n/* Live button — wide pill button with a status dot (gray → red at the live\n   edge) rendered via ::before, and \"LIVE\" text rendered as the button's own\n   text content. */\n.media-minimal-skin .media-button--live {\n  display: inline-flex;\n  gap: 0.4rem;\n  align-items: center;\n  width: auto;\n  aspect-ratio: auto;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  line-height: 1;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n\n  &::before {\n    display: inline-block;\n    flex-shrink: 0;\n    width: 0.5rem;\n    height: 0.5rem;\n    content: \"\";\n    background-color: oklch(from currentColor l c h / 0.4);\n    border-radius: 50%;\n    transition: background-color 150ms ease-out;\n  }\n\n  &[data-live-edge]::before {\n    background-color: oklch(0.65 0.22 27);\n  }\n}\n\n/* ==========================================================================\n   Button Groups\n   ========================================================================== */\n\n.media-minimal-skin .media-button-group {\n  display: flex;\n  gap: 0.075rem;\n  align-items: center;\n\n  @container media-root (width > 42rem) {\n    gap: 0.125rem;\n  }\n}\n\n/* ==========================================================================\n   Icons\n   ========================================================================== */\n\n.media-minimal-skin .media-icon__container {\n  position: relative;\n}\n.media-minimal-skin .media-icon {\n  flex-shrink: 0;\n  width: var(--media-icon-size);\n  height: var(--media-icon-size);\n}\n.media-minimal-skin .media-icon--flipped {\n  scale: -1 1;\n}\n\n/* ==========================================================================\n   Slider\n   ========================================================================== */\n\n.media-minimal-skin .media-slider {\n  position: relative;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  outline: none;\n  border-radius: calc(infinity * 1px);\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    min-width: 5rem;\n    height: 2rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 2rem;\n    height: 4.5rem;\n  }\n}\n\n/* Track */\n.media-minimal-skin .media-slider__track {\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  background-color: oklch(from currentColor l c h / 0.2);\n  border-radius: inherit;\n  isolation: isolate;\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: 0.1875rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 0.1875rem;\n    height: 100%;\n  }\n}\n\n/* Thumb */\n.media-minimal-skin .media-slider__thumb {\n  position: absolute;\n  z-index: 10;\n  width: 0.75rem;\n  height: 0.75rem;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  background-color: currentColor;\n  border-radius: calc(infinity * 1px);\n  box-shadow:\n    0 0 0 1px var(--media-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),\n    0 1px 3px 0 oklch(0 0 0 / 0.15),\n    0 1px 2px -1px oklch(0 0 0 / 0.15);\n  opacity: 0;\n  transform-origin: center;\n  scale: 0.7;\n  translate: -50% -50%;\n  transition-timing-function: ease-out;\n  transition-duration: 150ms;\n  transition-property: opacity, scale, outline-offset;\n\n  &[data-orientation=\"horizontal\"] {\n    top: 50%;\n    left: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    top: calc(100% - var(--media-slider-fill));\n    left: 50%;\n  }\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n}\n\n.media-minimal-skin .media-slider:hover .media-slider__thumb,\n.media-minimal-skin .media-slider:focus-within .media-slider__thumb,\n.media-minimal-skin .media-slider__thumb--persistent {\n  opacity: 1;\n  scale: 1;\n}\n\n/* Shared track fills */\n.media-minimal-skin .media-slider__buffer,\n.media-minimal-skin .media-slider__fill {\n  position: absolute;\n  pointer-events: none;\n  border-radius: inherit;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"horizontal\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"horizontal\"] {\n  inset-block: 0;\n  left: 0;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"vertical\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"vertical\"] {\n  inset-inline: 0;\n  bottom: 0;\n}\n\n/* Buffer */\n.media-minimal-skin .media-slider__buffer {\n  background-color: oklch(from currentColor l c h / 0.2);\n  transition-timing-function: ease-out;\n  transition-duration: 0.25s;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-buffer);\n    transition-property: width;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-buffer);\n    transition-property: height;\n  }\n}\n\n/* Fill */\n.media-minimal-skin .media-slider__fill {\n  background-color: currentColor;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-fill);\n  }\n}\n\n/* Dragging — thumb and fill follow the pointer position */\n.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=\"horizontal\"] {\n  left: var(--media-slider-pointer);\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__thumb[data-orientation=\"vertical\"] {\n  top: calc(100% - var(--media-slider-pointer));\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=\"horizontal\"] {\n  width: var(--media-slider-pointer);\n}\n\n.media-minimal-skin .media-slider[data-dragging] .media-slider__fill[data-orientation=\"vertical\"] {\n  height: var(--media-slider-pointer);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin .media-popover,\n.media-minimal-skin .media-tooltip {\n  margin: 0;\n  overflow: visible;\n  color: inherit;\n  border: 0;\n  transition-timing-function: var(--media-popup-transition-timing-function);\n  transition-duration: var(--media-popup-transition-duration);\n  transition-property: scale, opacity, filter;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    filter: blur(8px);\n    scale: 0.5;\n  }\n\n  &[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  &[data-side=\"top\"] {\n    transform-origin: bottom;\n  }\n  &[data-side=\"bottom\"] {\n    transform-origin: top;\n  }\n  &[data-side=\"left\"] {\n    transform-origin: right;\n  }\n  &[data-side=\"right\"] {\n    transform-origin: left;\n  }\n\n  /* Safe area between trigger and popup */\n  &::before {\n    position: absolute;\n    pointer-events: inherit;\n    content: \"\";\n  }\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    inset-inline: 0;\n    width: 100%;\n  }\n  &[data-side=\"top\"]::before {\n    top: 100%;\n  }\n  &[data-side=\"bottom\"]::before {\n    bottom: 100%;\n  }\n\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    inset-block: 0;\n    height: 100%;\n  }\n  &[data-side=\"left\"]::before {\n    left: 100%;\n  }\n  &[data-side=\"right\"]::before {\n    right: 100%;\n  }\n}\n\n.media-minimal-skin .media-popover {\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-popover-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-popover-side-offset);\n  }\n}\n\n.media-minimal-skin .media-tooltip {\n  padding: 0.25rem 0.5rem;\n  font-size: 0.75rem; /* 12px at 100% font size */\n  color: var(--media-tooltip-text-color);\n  white-space: nowrap;\n  background-color: var(--media-tooltip-background-color);\n  border-radius: 0.5rem;\n  box-shadow:\n    0 0 0 1px var(--media-tooltip-border-color),\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  backdrop-filter: var(--media-tooltip-backdrop-filter);\n\n  &[data-side=\"top\"]::before,\n  &[data-side=\"bottom\"]::before {\n    height: var(--media-tooltip-side-offset);\n  }\n  &[data-side=\"left\"]::before,\n  &[data-side=\"right\"]::before {\n    width: var(--media-tooltip-side-offset);\n  }\n}\n\n.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability=\"unsupported\"]) {\n  display: none;\n}\n\n/* ==========================================================================\n   Menus\n   Note: Menus use `.media-popover` styles for positioning and transitions.\n   ========================================================================== */\n\n.media-minimal-skin .media-popover.media-menu {\n  box-sizing: border-box;\n  min-width: min(6rem, var(--media-popover-available-width, 6rem));\n  max-width: var(--media-popover-available-width, none);\n  max-height: var(--media-popover-available-height, none);\n  padding: 0.25rem;\n  overflow: auto;\n  overscroll-behavior: none;\n  background-color: var(--media-tooltip-background-color);\n  border-radius: 0.75rem;\n  box-shadow:\n    0 0 0 1px var(--media-tooltip-border-color),\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  backdrop-filter: var(--media-tooltip-backdrop-filter);\n\n  &::before {\n    display: none;\n  }\n}\n\n.media-minimal-skin .media-popover.media-menu .media-menu__group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n.media-minimal-skin .media-popover.media-menu .media-menu__item {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  justify-content: space-between;\n  min-height: 2rem;\n  padding: 0 0.625rem;\n  font-variant-numeric: tabular-nums;\n  color: inherit;\n  cursor: pointer;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  border-radius: 0.5rem;\n\n  &:hover,\n  &[data-highlighted] {\n    background-color: oklch(from currentColor l c h / 0.1);\n  }\n\n  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n\n  &[aria-disabled=\"true\"] {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}\n\n.media-minimal-skin .media-popover.media-menu .media-menu__indicator {\n  flex-shrink: 0;\n  margin-right: -0.25rem;\n  opacity: 0;\n}\n\n.media-minimal-skin .media-popover.media-menu .media-menu__item[aria-checked=\"true\"] .media-menu__indicator {\n  opacity: 1;\n}\n\n/* ==========================================================================\n   Icon State Visibility for Audio Skins\n\n   Data-attribute-driven visibility rules for multi-state icon buttons.\n   Uses :is() with both element selectors (for HTML custom element wrappers)\n   and class selectors (for React rendered SVG elements).\n   ========================================================================== */\n\n/* --- All icons hidden by default --- */\n\n.media-button--play .media-icon--restart,\n.media-button--play .media-icon--play,\n.media-button--play .media-icon--pause,\n.media-button--mute .media-icon--volume-off,\n.media-button--mute .media-icon--volume-low,\n.media-button--mute .media-icon--volume-high {\n  display: none;\n  opacity: 0;\n}\n\n/* --- Active icon per state --- */\n\n/* Play: ended → restart */\n.media-button--play[data-ended] .media-icon--restart,\n/* Play: paused (not ended) → play */\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\n/* Play: playing (not paused, not ended) → pause */\n.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,\n/* Mute: muted → volume off */\n.media-button--mute[data-muted] .media-icon--volume-off,\n/* Mute: volume low (not muted) → volume low */\n.media-button--mute:not([data-muted])[data-volume-level=\"low\"] .media-icon--volume-low,\n/* Mute: volume high (not muted, not low) → volume high */\n.media-button--mute:not([data-muted]):not([data-volume-level=\"low\"]) .media-icon--volume-high {\n  display: block;\n  opacity: 1;\n}\n\n\n/* ==========================================================================\n  Root\n  ========================================================================== */\n\n.media-minimal-skin--audio {\n  --media-controls-background-color: oklch(1 0 0);\n  --media-controls-backdrop-filter: blur(16px) saturate(1.5);\n  --media-controls-border-color: oklch(0 0 0 / 0.05);\n  --media-controls-text-color: var(--media-color-primary, oklch(0 0 0));\n  --media-error-dialog-transition-duration: 250ms;\n  --media-error-dialog-transition-delay: 100ms;\n  --media-popup-transition-duration: 100ms;\n  --media-popup-transition-timing-function: ease-out;\n  --media-tooltip-background-color: oklch(1 0 0 / 0.1);\n  --media-tooltip-border-color: oklch(0 0 0 / 0.05);\n  --media-tooltip-backdrop-filter: blur(16px) saturate(1.5);\n  --media-tooltip-text-color: currentColor;\n  --media-tooltip-side-offset: 0.75rem;\n  --media-tooltip-boundary-offset: 0.75rem;\n  --media-popover-side-offset: 0.75rem;\n  --media-popover-boundary-offset: 0.75rem;\n\n  @media (prefers-reduced-motion: reduce) {\n    --media-error-dialog-transition-duration: 50ms;\n    --media-error-dialog-transition-delay: 0ms;\n    --media-popup-transition-duration: 0ms;\n  }\n\n  @media (prefers-color-scheme: dark) {\n    --media-controls-background-color: oklch(0 0 0);\n    --media-controls-border-color: oklch(1 0 0 / 0.1);\n    --media-controls-text-color: var(--media-color-primary, oklch(1 0 0));\n  }\n\n  @media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {\n    --media-tooltip-background-color: oklch(1 0 0);\n  }\n\n  @media (prefers-color-scheme: dark) and ((prefers-reduced-transparency: reduce) or (prefers-contrast: more)) {\n    --media-tooltip-background-color: oklch(0 0 0);\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-skin--audio .media-error__dialog {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  padding-inline: 1.25rem 0.5rem;\n  background-color: oklch(from var(--media-controls-background-color) l c h / 1);\n  border-radius: calc(infinity * 1px);\n  transition-delay: var(--media-error-dialog-transition-delay);\n  transition-timing-function: ease-out;\n  transition-duration: var(--media-error-dialog-transition-duration);\n  transition-property: opacity, filter, scale;\n}\n\n.media-minimal-skin--audio .media-error[data-starting-style] .media-error__dialog,\n.media-minimal-skin--audio .media-error[data-ending-style] .media-error__dialog {\n  opacity: 0;\n  filter: blur(4px);\n  scale: 0.95;\n}\n.media-minimal-skin--audio .media-error[data-ending-style] .media-error__dialog {\n  transition-delay: 0ms;\n}\n\n.media-minimal-skin--audio .media-error__content {\n  display: flex;\n  flex: 1;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n/* ==========================================================================\n  Controls\n  ========================================================================== */\n\n.media-minimal-skin--audio .media-controls {\n  gap: 0.5rem;\n  padding: 0.375rem;\n  color: var(--media-controls-text-color);\n  border-radius: var(--media-border-radius, 1rem);\n  box-shadow: 0 0 0 1px var(--media-controls-border-color);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin--audio .media-popover--volume {\n  padding: 0 0 0 4rem;\n  background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%);\n}\n\n";
 //#endregion
 export { minimal_skin_default as default };