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

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

@@ -0,0 +1,29 @@
+import { LiveIndicator } from "../input-indicators/live-indicator.js";
+import { InputIndicatorElement } from "../input-indicators/input-indicator-element.js";
+import { index_d_exports } from "../../index.js";
+import * as _$_videojs_core0 from "@videojs/core";
+import { StatusIndicatorCore } from "@videojs/core";
+
+//#region src/ui/status-indicator/status-indicator-element.d.ts
+declare class StatusIndicatorElement extends InputIndicatorElement<StatusIndicatorCore.State> {
+  #private;
+  static readonly tagName = "media-status-indicator";
+  static properties: {
+    actions: {
+      type: StringConstructor;
+    };
+    closeDelay: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+  };
+  actions: string | undefined;
+  closeDelay: number | undefined;
+  protected get core(): StatusIndicatorCore;
+  protected get transition(): index_d_exports.TransitionApi;
+  protected get liveIndicator(): LiveIndicator<_$_videojs_core0.StatusIndicatorState>;
+  protected syncCoreProps(): void;
+}
+//#endregion
+export { StatusIndicatorElement };
+//# sourceMappingURL=status-indicator-element.d.ts.map

package/dist/dev/ui/status-indicator/status-indicator-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-element.d.ts","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-element.ts"],"mappings":";;;;;;;cAYa,sBAAA,SAA+B,qBAAA,CAAsB,mBAAA,CAAoB,KAAA;EAAA;kBACpE,OAAA;EAAA,OAEA,UAAA;;MACH,IAAA,EAAI,iBAAA;IAAA;;MACD,IAAA,EAAI,iBAAA;MAAU,SAAA;IAAA;EAAA;EAG9B,OAAA;EACA,UAAA;EAAA,cAUc,IAAA,CAAA,GAAI,mBAAA;EAAA,cAIJ,UAAA,CAAA,GAJI,eAAA,CAIM,aAAA;EAAA,cAIV,aAAA,CAAA,GAAa,aAAA,CAJH,gBAAA,CAIG,oBAAA;EAAA,UAIR,aAAA,CAAA;AAAA"}

package/dist/dev/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/dev/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/dev/ui/status-indicator/status-indicator-value-element.d.ts

@@ -0,0 +1,9 @@
+import { MediaElement } from "../media-element.js";
+
+//#region src/ui/status-indicator/status-indicator-value-element.d.ts
+declare class StatusIndicatorValueElement extends MediaElement {
+  static readonly tagName = "media-status-indicator-value";
+}
+//#endregion
+export { StatusIndicatorValueElement };
+//# sourceMappingURL=status-indicator-value-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-value-element.d.ts","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value-element.ts"],"mappings":";;;cAEa,2BAAA,SAAoC,YAAA;EAAA,gBAC/B,OAAA;AAAA"}

package/dist/dev/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/dev/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/dev/ui/tooltip/tooltip-element.d.ts

@@ -1,4 +1,5 @@
 import { MediaElement } from "../media-element.js";
+import { PositioningBoundary, TooltipOpenChangeReason } from "@videojs/core/dom";
 import { PropertyValues } from "@videojs/element";
 import * as _$_videojs_core0 from "@videojs/core";
 
@@ -34,6 +35,9 @@ declare class TooltipElement extends MediaElement {
     disabled: {
       type: BooleanConstructor;
     };
+    boundary: {
+      type: StringConstructor;
+    };
   };
   open: boolean;
   defaultOpen: boolean;
@@ -43,9 +47,11 @@ declare class TooltipElement extends MediaElement {
   closeDelay: number;
   disableHoverablePopup: boolean;
   disabled: boolean;
+  boundary: PositioningBoundary;
   connectedCallback(): void;
   protected firstUpdated(changed: PropertyValues): void;
   disconnectedCallback(): void;
+  close(reason?: TooltipOpenChangeReason): void;
   protected willUpdate(changed: PropertyValues): void;
   protected update(_changed: PropertyValues): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-element.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"mappings":";;;;;cAgCa,cAAA,SAAuB,YAAA;EAAA;kBAClB,OAAA;EAAA,OAEA,UAAA;;MACN,IAAA,EAAI,kBAAA;IAAA;;MACG,IAAA,EAAI,kBAAA;MAAW,SAAA;IAAA;;MACtB,IAAA,EAAI,iBAAA;IAAA;;MACH,IAAA,EAAI,iBAAA;IAAA;;MACJ,IAAA,EAAI,iBAAA;IAAA;;MACC,IAAA,EAAI,iBAAA;MAAU,SAAA;IAAA;;MACH,IAAA,EAAI,kBAAA;MAAW,SAAA;IAAA;;MAC5B,IAAA,EAAI,kBAAA;IAAA;EAAA;EAGlB,IAAA;EACA,WAAA;EACA,IAAA,EALkB,gBAAA,CAKd,WAAA;EACJ,KAAA,EADI,gBAAA,CACC,YAAA;EACL,KAAA;EACA,UAAA;EACA,qBAAA;EACA,QAAA;EAaS,iBAAA,CAAA;EAAA,UAkCU,YAAA,CAAa,OAAA,EAAS,cAAA;EAUhC,oBAAA,CAAA;EAAA,UASU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAiBpB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}
+{"version":3,"file":"tooltip-element.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-element.ts"],"mappings":";;;;;;cA4Ca,cAAA,SAAuB,YAAA;EAAA;kBAClB,OAAA;EAAA,OAEA,UAAA;;MACN,IAAA,EAAI,kBAAA;IAAA;;MACG,IAAA,EAAI,kBAAA;MAAW,SAAA;IAAA;;MACtB,IAAA,EAAI,iBAAA;IAAA;;MACH,IAAA,EAAI,iBAAA;IAAA;;MACJ,IAAA,EAAI,iBAAA;IAAA;;MACC,IAAA,EAAI,iBAAA;MAAU,SAAA;IAAA;;MACH,IAAA,EAAI,kBAAA;MAAW,SAAA;IAAA;;MAC5B,IAAA,EAAI,kBAAA;IAAA;;MACJ,IAAA,EAAI,iBAAA;IAAA;EAAA;EAGlB,IAAA;EACA,WAAA;EACA,IAAA,EALkB,gBAAA,CAKd,WAAA;EACJ,KAAA,EADI,gBAAA,CACC,YAAA;EACL,KAAA;EACA,UAAA;EACA,qBAAA;EACA,QAAA;EACA,QAAA,EAAU,mBAAA;EAcD,iBAAA,CAAA;EAAA,UAoCU,YAAA,CAAa,OAAA,EAAS,cAAA;EAUhC,oBAAA,CAAA;EAST,KAAA,CAAM,MAAA,GAAQ,uBAAA;EAAA,UAIK,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAiBpB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

package/dist/dev/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/dev/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":"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"}
+{"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/dev/ui/volume-indicator/volume-indicator-element.d.ts

@@ -0,0 +1,25 @@
+import { LiveIndicator } from "../input-indicators/live-indicator.js";
+import { InputIndicatorElement } from "../input-indicators/input-indicator-element.js";
+import { index_d_exports } from "../../index.js";
+import * as _$_videojs_core0 from "@videojs/core";
+import { VolumeIndicatorCore } from "@videojs/core";
+
+//#region src/ui/volume-indicator/volume-indicator-element.d.ts
+declare class VolumeIndicatorElement extends InputIndicatorElement<VolumeIndicatorCore.State> {
+  #private;
+  static readonly tagName = "media-volume-indicator";
+  static properties: {
+    closeDelay: {
+      type: NumberConstructor;
+      attribute: string;
+    };
+  };
+  closeDelay: number | undefined;
+  protected get core(): VolumeIndicatorCore;
+  protected get transition(): index_d_exports.TransitionApi;
+  protected get liveIndicator(): LiveIndicator<_$_videojs_core0.VolumeIndicatorState>;
+  protected syncCoreProps(): void;
+}
+//#endregion
+export { VolumeIndicatorElement };
+//# sourceMappingURL=volume-indicator-element.d.ts.map

package/dist/dev/ui/volume-indicator/volume-indicator-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-element.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-element.ts"],"mappings":";;;;;;;cAYa,sBAAA,SAA+B,qBAAA,CAAsB,mBAAA,CAAoB,KAAA;EAAA;kBACpE,OAAA;EAAA,OAEA,UAAA;;MACA,IAAA,EAAI,iBAAA;MAAU,SAAA;IAAA;EAAA;EAG9B,UAAA;EAAA,cAUc,IAAA,CAAA,GAAI,mBAAA;EAAA,cAIJ,UAAA,CAAA,GAJI,eAAA,CAIM,aAAA;EAAA,cAIV,aAAA,CAAA,GAAa,aAAA,CAJH,gBAAA,CAIG,oBAAA;EAAA,UAIR,aAAA,CAAA;AAAA"}

package/dist/dev/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/dev/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/dev/ui/volume-indicator/volume-indicator-fill-element.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-fill-element.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-fill-element.ts"],"mappings":";;;cAEa,0BAAA,SAAmC,YAAA;EAAA,gBAC9B,OAAA;AAAA"}

package/dist/dev/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/dev/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/dev/ui/volume-indicator/volume-indicator-value-element.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"volume-indicator-value-element.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/volume-indicator-value-element.ts"],"mappings":";;;cAEa,2BAAA,SAAoC,YAAA;EAAA,gBAC/B,OAAA;AAAA"}

package/dist/dev/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/dev/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/docs/README.md

@@ -0,0 +1,7 @@
+# @videojs/html documentation
+
+Bundled markdown documentation for `@videojs/html` v10.0.0-beta.24.
+
+Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.
+
+Canonical online version: https://videojs.org/docs/framework/html

package/docs/concepts/accessibility.md

@@ -0,0 +1,60 @@
+# Accessibility
+
+How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
+
+Video.js is built with accessibility in mind so your player can reach the widest possible audience.
+
+Here are some of the accessibility aspects we consider. You should consider them too if you’re performing deeper customization.
+
+## Standards we target
+
+*   [**WAI-ARIA 1.2**](https://www.w3.org/TR/wai-aria-1.2/) defines roles, states, and properties that [assistive technologies](https://www.w3.org/WAI/people-use-web/tools-techniques/) use to understand controls.
+*   [**WCAG 2.2**](https://www.w3.org/TR/WCAG22/) provides success criteria for perceivable, operable, understandable, and robust web content.
+*   [**CVAA**](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa) is a U.S. federal law requiring closed captioning and accessible controls for video content.
+*   [**ADA**](https://www.ada.gov/) is a U.S. civil rights law that prohibits disability discrimination. Courts increasingly apply it to websites, including video players.
+
+## ARIA roles and labels
+
+Components set ARIA roles and attributes automatically. For example, sliders render with `role="slider"` and value attributes, buttons update their `aria-label` based on player state, and decorative elements like time separators are hidden with `aria-hidden="true"`.
+
+Verify that labels are contextually correct for your content and language. Each component’s reference page documents the attributes it sets.
+
+## Keyboard interaction
+
+All interactive components support keyboard control. For example, buttons activate with Enter and Space, sliders respond to Arrow keys, Home, End, and Page Up/Page Down, and popovers close with Escape. Each component’s reference page lists its full keyboard support. We follow the patterns in the [WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/).
+
+## Focus management
+
+Interactive elements are focusable when enabled and leave the [tab order](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) when disabled. Popover triggers link to their popups with `aria-controls` and `aria-expanded`.
+
+## Captions and subtitles
+
+The [text tracks feature](../reference/feature-text-tracks.md) supports captions and subtitles. Closed captions in the U.S. are governed by the [FCC](https://www.fcc.gov/) under the [CVAA](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa), which requires both captioning and viewer control over caption appearance (font, size, color, opacity, and edge style). Non-compliance carries legal risk. The [WebKit Caption Display Settings explainer](https://github.com/WebKit/explainers/tree/main/CaptionDisplaySettings) tracks how browsers are bringing these customization preferences into the web platform natively.
+
+## Color contrast
+
+Skins respond to [`prefers-contrast: more`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) by increasing background opacity on overlays and controls, and to [`prefers-reduced-transparency: reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) by raising baseline opacity so text stays readable over video.
+
+Video is harder than most UI for contrast because the background is always changing. A control that passes checks over a dark frame can disappear over a bright title card. Automated tools won’t catch this, so test your controls against light, dark, and mixed video content. Custom components should test against [WCAG 1.4.3 (contrast minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) and [1.4.11 (non-text contrast)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast).
+
+## Touch targets
+
+Controls use rem-based sizing so they scale with the user’s font size preference. All interactive elements set [`touch-action: manipulation`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) to eliminate tap delay on touch devices. Skins use [`pointer: fine` and `pointer: coarse`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) to adapt transitions for mouse and touch input.
+
+If you build custom controls, target at least 24x24 CSS pixels per [WCAG 2.5.8 (target size minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum). Larger is better on touch-first surfaces.
+
+## Color scheme
+
+Skins adapt to [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). Borders, backgrounds, and text colors adjust through CSS custom properties. Custom components can use the same design tokens. See [Skins](./skins.md) for details.
+
+## Reduced motion
+
+Skins respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) by simplifying or removing animations and transitions. Follow the same pattern in custom components.
+
+## Test with assistive technology
+
+Automated tools catch markup issues but miss real usability problems. Test your player with a [screen reader](https://www.w3.org/WAI/people-use-web/tools-techniques/) ([VoiceOver](https://support.apple.com/guide/voiceover/welcome/mac) on macOS, [NVDA](https://www.nvaccess.org/about-nvda/) or [JAWS](https://www.freedomscientific.com/products/software/jaws/) on Windows) and keyboard-only navigation. Verify that every control is reachable, operable, and announces its purpose and state. The [WAI “Easy Checks”](https://www.w3.org/WAI/test-evaluate/preliminary/) are a good starting point.
+
+## Further reading
+
+The W3C WAI guides on [making audio and video media accessible](https://www.w3.org/WAI/media/av/) and [accessible media players](https://www.w3.org/WAI/media/av/player/) go deeper on everything covered here.

package/docs/concepts/browser-support.md

@@ -0,0 +1,37 @@
+# Browser Support
+
+Which browsers Video.js 10 supports and how it handles newer platform features
+
+Video.js 10 currently targets **evergreen browsers** : the latest two stable versions of Chrome, Firefox, Safari, and Edge.
+
+Note
+
+Video.js 10 is in beta. The browser support matrix may expand as we approach GA based on community feedback and usage data.
+
+## Why evergreen?
+
+Video.js 10 builds directly on the web platform: custom elements, CSS custom properties, anchor positioning, and modern JavaScript APIs. Targeting evergreen browsers lets us:
+
+*   **Ship smaller bundles** by avoiding polyfills and transpilation for outdated syntax
+*   **Use platform-native features** like `popover` and anchor positioning instead of JavaScript equivalents
+*   **Keep the core slim** so platform-specific adapters (HTML, React) add only what they need
+
+## Progressive enhancement
+
+When we use a platform feature that hasn’t landed in all supported browsers yet, we provide a fallback. The player works either way; the experience may differ slightly in older browsers. For example, tooltips and popovers use CSS anchor positioning where available and fall back to absolute positioning where it isn’t.
+
+## Rendering contexts
+
+### WebViews and PWAs
+
+A [WebView](https://developer.mozilla.org/en-US/docs/Glossary/WebView) is a browser engine embedded inside a native app. WebViews on iOS (WKWebView) and Android (Android WebView) behave differently from the full browser; autoplay policies, fullscreen APIs, and hardware acceleration can vary. Progressive Web Apps (PWAs) installed via “Add to Homescreen” can exhibit similar quirks, since they also run in a limited browser context rather than a full browser tab.
+
+Video.js 10 beta targets only standard browser environments. If you embed a player inside a native app or PWA, test thoroughly for your specific platform and runtime.
+
+### Smart TVs and set-top boxes
+
+TV platforms run embedded browsers with limited standards support. Video.js 10’s core is not tied to any specific platform, which makes future TV adapters possible, but TV is not a supported target today.
+
+### Server-side rendering
+
+Video.js components render valid markup on the server. Interactivity — state management, media playback, and event handling — requires the browser and kicks in after hydration.