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

package/cdn/{compounds-BHHGcL_P.js → compounds-DxdDY3jr.js}

@@ -1,7 +1,7 @@
-import { A as MediaElement, C as isMediaStreamTypeCapable, D as throwNoTargetError, E as noop, F as isInteractiveActivation, M as ContextConsumer, O as AbortControllerRegistry, P as isEditableTarget, S as isMediaSeekCapable, T as createState, _ as errorFeature, b as bufferFeature, c as timeFeature, d as remotePlaybackFeature, f as playbackRateFeature, g as fullscreenFeature, h as liveFeature, j as ContextProvider, l as textTrackFeature, m as pipFeature, n as PlayerController, p as playbackFeature, r as SnapshotController, s as volumeFeature, u as sourceFeature, v as controlsFeature, w as definePlayerFeature, x as isMediaBufferCapable } from "./create-player-B-gVAMdr.js";
+import { C as isMediaSeekCapable, D as noop, E as createState, F as isEditableTarget, I as isInteractiveActivation, M as ContextProvider, N as ContextConsumer, O as throwNoTargetError, S as isMediaBufferCapable, T as definePlayerFeature, _ as fullscreenFeature, b as getGestureCoordinator, c as volumeFeature, d as sourceFeature, f as remotePlaybackFeature, g as liveFeature, h as pipFeature, j as MediaElement, k as AbortControllerRegistry, l as timeFeature, m as playbackFeature, n as PlayerController, p as playbackRateFeature, r as SnapshotController, u as textTrackFeature, v as errorFeature, w as isMediaStreamTypeCapable, x as bufferFeature, y as controlsFeature } from "./create-player-_WED6HtK.js";
 import { t as listen } from "./listen-CJT7C4kM.js";
 import { n as kebabCase, t as pick } from "./pick-D-wCJ3iA.js";
-import { a as isUndefined, c as playerContext, d as safeDefine, l as createContext, n as isNull, o as containerContext, r as isNumber, t as isFunction } from "./predicate-BOcV_HDG.js";
+import { a as isString, f as safeDefine, l as playerContext, n as isNull, o as isUndefined, r as isNumber, s as containerContext, t as isFunction, u as createContext } from "./predicate-Dqd8wbW6.js";
 import { t as MediaStreamTypes } from "./types-B_4Es-UH.js";
 
 //#region ../utils/dist/dom/direction.js
@@ -75,12 +75,23 @@ function resolveCSSLength(el, value) {
 
 //#endregion
 //#region ../core/dist/dev/core/ui/transition.js
+/** Shared data attributes for open/close transition state. Spread into component data-attrs objects. */
+const TransitionDataAttrs = {
+	transitionStarting: "data-starting-style",
+	transitionEnding: "data-ending-style"
+};
 function getTransitionFlags(status) {
 	return {
 		transitionStarting: status === "starting",
 		transitionEnding: status === "ending"
 	};
 }
+function getTransitionStyleAttrs({ transitionStarting, transitionEnding }) {
+	return {
+		[TransitionDataAttrs.transitionStarting]: transitionStarting ? "" : void 0,
+		[TransitionDataAttrs.transitionEnding]: transitionEnding ? "" : void 0
+	};
+}
 
 //#endregion
 //#region ../core/dist/dev/core/ui/alert-dialog/alert-dialog-core.js
@@ -127,8 +138,7 @@ var AlertDialogCore = class {
 //#region ../core/dist/dev/core/ui/alert-dialog/alert-dialog-data-attrs.js
 const AlertDialogDataAttrs = {
 	open: "data-open",
-	transitionStarting: "data-starting-style",
-	transitionEnding: "data-ending-style"
+	...TransitionDataAttrs
 };
 
 //#endregion
@@ -265,152 +275,757 @@ var ErrorDialogCore = class extends AlertDialogCore {
 };
 
 //#endregion
-//#region ../core/dist/dev/core/ui/mute-button/mute-button-core.js
-var MuteButtonCore = class MuteButtonCore {
-	static defaultProps = {
-		label: "",
-		disabled: false
-	};
-	state = createState({
-		muted: false,
-		volumeLevel: "off",
-		label: ""
-	});
-	#props = { ...MuteButtonCore.defaultProps };
-	#media = null;
-	constructor(props) {
-		if (props) this.setProps(props);
+//#region ../core/dist/dev/core/ui/input-feedback/indicator-lifecycle.js
+var IndicatorCloseController = class {
+	#timer = null;
+	#close;
+	#getDelay;
+	constructor(close, getDelay) {
+		this.#close = close;
+		this.#getDelay = getDelay;
+	}
+	arm() {
+		this.clear();
+		this.#timer = setTimeout(() => {
+			this.#timer = null;
+			this.#close();
+		}, this.#getDelay());
+	}
+	clear() {
+		if (this.#timer === null) return;
+		clearTimeout(this.#timer);
+		this.#timer = null;
+	}
+	close() {
+		this.clear();
+		this.#close();
 	}
-	setProps(props) {
-		this.#props = defaults(props, MuteButtonCore.defaultProps);
+	destroy() {
+		this.clear();
 	}
-	getLabel(state) {
-		const { label } = this.#props;
-		if (isFunction(label)) {
-			const customLabel = label(state);
-			if (customLabel) return customLabel;
-		} else if (label) return label;
-		return state.muted ? "Unmute" : "Mute";
+};
+var IndicatorVisibilityCoordinator = class {
+	#handles = /* @__PURE__ */ new Set();
+	register(handle) {
+		this.#handles.add(handle);
+		return () => this.#handles.delete(handle);
 	}
-	getAttrs(state) {
+	show(handle) {
+		for (const nextHandle of this.#handles) if (nextHandle !== handle) nextHandle.close();
+	}
+};
+function getIndicatorCloseDelay(props) {
+	return props.closeDelay ?? 800;
+}
+function isIndicatorPresent(current, transition) {
+	return current.open || transition.active;
+}
+function getRenderedIndicatorState(current, snapshot, transition) {
+	const payload = current.open ? current : snapshot;
+	return {
+		...payload,
+		open: current.open && transition.active,
+		generation: current.open ? current.generation : payload.generation,
+		...getTransitionFlags(transition.status)
+	};
+}
+
+//#endregion
+//#region ../utils/dist/number/number.js
+/** Clamp a value between min and max (inclusive). */
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(max, value));
+}
+/** Snap a value to the nearest step, offset from min. */
+function roundToStep(value, step, min) {
+	const nearest = Math.round((value - min) / step) * step + min;
+	const dot = `${step}`.indexOf(".");
+	return dot === -1 ? nearest : Number(nearest.toFixed(`${step}`.length - dot - 1));
+}
+
+//#endregion
+//#region ../utils/dist/time/format.js
+const UNIT_LABELS = [
+	{
+		singular: "hour",
+		plural: "hours"
+	},
+	{
+		singular: "minute",
+		plural: "minutes"
+	},
+	{
+		singular: "second",
+		plural: "seconds"
+	}
+];
+function isValidTime(value) {
+	return isNumber(value) && Number.isFinite(value);
+}
+function toTimeUnitPhrase(value, unitIndex) {
+	return `${value} ${value === 1 ? UNIT_LABELS[unitIndex]?.singular : UNIT_LABELS[unitIndex]?.plural}`;
+}
+/**
+* Format seconds to digital display string.
+*
+* @param seconds - Time in seconds (can be negative)
+* @param guide - Guide time (typically duration) to determine display format
+* @returns Formatted string like "1:30" or "1:05:30"
+*
+* @example
+* formatTime(90) // "1:30"
+* formatTime(3661) // "1:01:01"
+* formatTime(35, 3600) // "0:00:35" (guided by 1-hour duration)
+* formatTime(35, 600) // "00:35" (guided by 10-minute duration)
+*/
+function formatTime(seconds, guide) {
+	if (!isValidTime(seconds)) return "0:00";
+	const negative = seconds < 0;
+	const positiveSeconds = Math.abs(seconds);
+	const h = Math.floor(positiveSeconds / 3600);
+	const m = Math.floor(positiveSeconds / 60 % 60);
+	const s = Math.floor(positiveSeconds % 60);
+	const guideAbs = guide ? Math.abs(guide) : 0;
+	const gh = Math.floor(guideAbs / 3600);
+	const gm = Math.floor(guideAbs / 60 % 60);
+	const showHours = h > 0 || gh > 0;
+	const padMinutes = showHours || gm >= 10;
+	const hoursStr = showHours ? `${h}:` : "";
+	const minutesStr = `${padMinutes && m < 10 ? "0" : ""}${m}:`;
+	const secondsStr = s < 10 ? `0${s}` : `${s}`;
+	return `${negative ? "-" : ""}${hoursStr}${minutesStr}${secondsStr}`;
+}
+/**
+* Format seconds to human-readable phrase for screen readers.
+*
+* @param seconds - Time in seconds (negative indicates remaining)
+* @returns Human-readable phrase like "1 minute, 30 seconds"
+*
+* @example
+* formatTimeAsPhrase(90) // "1 minute, 30 seconds"
+* formatTimeAsPhrase(3661) // "1 hour, 1 minute, 1 second"
+* formatTimeAsPhrase(-270) // "4 minutes, 30 seconds remaining"
+*/
+function formatTimeAsPhrase(seconds) {
+	if (!isValidTime(seconds)) return "";
+	const negative = seconds < 0;
+	const positiveSeconds = Math.abs(seconds);
+	const h = Math.floor(positiveSeconds / 3600);
+	const m = Math.floor(positiveSeconds / 60 % 60);
+	const s = Math.floor(positiveSeconds % 60);
+	if (positiveSeconds === 0) return `${toTimeUnitPhrase(0, 2)}${negative ? " remaining" : ""}`;
+	return `${[
+		h,
+		m,
+		s
+	].map((value, index) => value > 0 ? toTimeUnitPhrase(value, index) : null).filter(Boolean).join(", ")}${negative ? " remaining" : ""}`;
+}
+/**
+* Convert seconds to ISO 8601 duration for datetime attribute.
+*
+* @param seconds - Time in seconds
+* @returns ISO 8601 duration string like "PT1M30S"
+*
+* @example
+* secondsToIsoDuration(90) // "PT1M30S"
+* secondsToIsoDuration(3661) // "PT1H1M1S"
+*/
+function secondsToIsoDuration(seconds) {
+	if (!isValidTime(seconds)) return "PT0S";
+	const positiveSeconds = Math.abs(seconds);
+	const h = Math.floor(positiveSeconds / 3600);
+	const m = Math.floor(positiveSeconds / 60 % 60);
+	const s = Math.floor(positiveSeconds % 60);
+	let duration = "PT";
+	if (h > 0) duration += `${h}H`;
+	if (m > 0) duration += `${m}M`;
+	if (s > 0 || duration === "PT") duration += `${s}S`;
+	return duration;
+}
+
+//#endregion
+//#region ../core/dist/dev/core/ui/input-feedback/status.js
+const DEFAULT_INPUT_INDICATOR_LABELS = {
+	muted: "Muted",
+	volume: "Volume",
+	captionsOn: "Captions on",
+	captionsOff: "Captions off",
+	paused: "Paused",
+	playing: "Playing",
+	fullscreen: "Fullscreen",
+	exitFullscreen: "Exit fullscreen",
+	pictureInPicture: "Picture in picture",
+	exitPictureInPicture: "Exit picture in picture"
+};
+function isVolumeIndicatorAction(action) {
+	return action === "toggleMuted" || action === "volumeStep";
+}
+function isSeekIndicatorAction(action) {
+	return action === "seekStep" || action === "seekToPercent";
+}
+function deriveStatus(event, snapshot, labels = DEFAULT_INPUT_INDICATOR_LABELS) {
+	switch (event.action) {
+		case "togglePaused": {
+			const paused = snapshot.paused !== void 0 ? !snapshot.paused : true;
+			return {
+				status: paused ? "pause" : "play",
+				label: paused ? labels.paused : labels.playing,
+				value: null,
+				volumeLevel: null
+			};
+		}
+		case "toggleMuted":
+		case "volumeStep": return deriveVolumeStatus(event, snapshot, labels);
+		case "toggleSubtitles": {
+			const showing = snapshot.subtitlesShowing !== void 0 ? !snapshot.subtitlesShowing : true;
+			return {
+				status: showing ? "captions-on" : "captions-off",
+				label: showing ? labels.captionsOn : labels.captionsOff,
+				value: null,
+				volumeLevel: null
+			};
+		}
+		case "toggleFullscreen": {
+			const fullscreen = snapshot.fullscreen !== void 0 ? !snapshot.fullscreen : true;
+			return {
+				status: fullscreen ? "fullscreen" : "exit-fullscreen",
+				label: fullscreen ? labels.fullscreen : labels.exitFullscreen,
+				value: null,
+				volumeLevel: null
+			};
+		}
+		case "togglePictureInPicture": {
+			const pip = snapshot.pip !== void 0 ? !snapshot.pip : true;
+			return {
+				status: pip ? "pip" : "exit-pip",
+				label: pip ? labels.pictureInPicture : labels.exitPictureInPicture,
+				value: null,
+				volumeLevel: null
+			};
+		}
+		default: return null;
+	}
+}
+function deriveAnnouncerLabel(event, snapshot, labels = DEFAULT_INPUT_INDICATOR_LABELS) {
+	const details = deriveStatus(event, snapshot, labels);
+	if (!details) return null;
+	if (isVolumeIndicatorAction(event.action)) return details.status === "volume-off" ? labels.muted : `${labels.volume} ${details.value}`;
+	return details.label;
+}
+function getVolumeLevel$1(volume) {
+	if (volume <= 0) return "off";
+	return volume <= .5 ? "low" : "high";
+}
+function formatVolumeValue(volume) {
+	return `${Math.round(clamp(volume, 0, 1) * 100)}%`;
+}
+function formatCurrentTime(snapshot) {
+	return formatTime(snapshot.currentTime ?? 0, snapshot.duration);
+}
+function getStatusIndicatorDisplayValue(state) {
+	return state.value ?? state.label ?? "";
+}
+function getVolumeIndicatorDisplayValue(state) {
+	return state.value ?? "";
+}
+function getSeekIndicatorDisplayValue(state) {
+	return state.value ?? state.currentTime;
+}
+function getSeekToPercent(event) {
+	if (event.value !== void 0) return clamp(event.value, 0, 100);
+	if (!event.key || event.key < "0" || event.key > "9") return null;
+	return Number(event.key) * 10;
+}
+function getSeekDirection(event, snapshot) {
+	if (event.action === "seekStep" && event.value !== void 0) {
+		if (event.value > 0) return "forward";
+		if (event.value < 0) return "backward";
+	}
+	if (event.action === "seekToPercent") {
+		const percent = getSeekToPercent(event);
+		if (percent === null || snapshot.duration === void 0 || snapshot.duration <= 0) return null;
+		const targetTime = percent / 100 * snapshot.duration;
+		const currentTime = snapshot.currentTime ?? 0;
+		if (targetTime > currentTime) return "forward";
+		if (targetTime < currentTime) return "backward";
+	}
+	return null;
+}
+function isInputActionIncluded(action, actions) {
+	if (!action) return false;
+	return !actions || actions.includes(action);
+}
+function predictVolumeActionOutcome(event, snapshot) {
+	const muted = snapshot.muted === true;
+	const snapshotVolume = snapshot.volume ?? 0;
+	if (event.action === "toggleMuted") return {
+		snapshotVolume,
+		nextMuted: !muted,
+		nextVolume: snapshotVolume
+	};
+	if (event.action === "volumeStep") {
+		const nextVolume = clamp(snapshotVolume + (event.value ?? 0), 0, 1);
 		return {
-			"aria-label": this.getLabel(state),
-			"aria-disabled": this.#props.disabled ? "true" : void 0
+			snapshotVolume,
+			nextMuted: muted && nextVolume <= 0,
+			nextVolume
 		};
 	}
-	setMedia(media) {
-		this.#media = media;
-	}
-	getState() {
-		const media = this.#media;
+	return {
+		snapshotVolume,
+		nextMuted: muted,
+		nextVolume: snapshotVolume
+	};
+}
+function volumePredictionToStatusDetails(prediction, labels) {
+	const level = prediction.nextMuted ? "off" : getVolumeLevel$1(prediction.nextVolume);
+	const value = prediction.nextMuted ? "0%" : formatVolumeValue(prediction.nextVolume);
+	return {
+		status: level === "off" ? "volume-off" : level === "low" ? "volume-low" : "volume-high",
+		label: level === "off" ? labels.muted : labels.volume,
+		value,
+		volumeLevel: level
+	};
+}
+/** Labels/value/level for volume actions — single source shared with `VolumeIndicatorCore`. */
+function deriveVolumeStatus(event, snapshot, labels = DEFAULT_INPUT_INDICATOR_LABELS, cachedPrediction) {
+	return volumePredictionToStatusDetails(cachedPrediction ?? predictVolumeActionOutcome(event, snapshot), labels);
+}
+
+//#endregion
+//#region ../core/dist/dev/core/ui/input-feedback/seek-indicator-core.js
+const INITIAL_STATE$2 = {
+	open: false,
+	generation: 0,
+	direction: null,
+	count: 0,
+	seekTotal: 0,
+	value: null,
+	currentTime: "0:00",
+	transitionStarting: false,
+	transitionEnding: false
+};
+var SeekIndicatorCore = class {
+	state = createState({ ...INITIAL_STATE$2 });
+	#props = {};
+	#originTime = null;
+	#close = new IndicatorCloseController(() => {
+		this.#originTime = null;
 		this.state.patch({
-			muted: media.muted || media.volume === 0,
-			volumeLevel: getVolumeLevel(media)
+			open: false,
+			direction: null,
+			count: 0,
+			seekTotal: 0,
+			value: null
 		});
-		this.state.patch({ label: this.getLabel(this.state.current) });
-		return this.state.current;
+	}, () => getIndicatorCloseDelay(this.#props));
+	setProps(props) {
+		this.#props = props;
 	}
-	toggle(media) {
-		if (this.#props.disabled) return;
-		media.toggleMuted();
+	destroy() {
+		this.#close.destroy();
+	}
+	close() {
+		this.#close.close();
+	}
+	processEvent(event, snapshot) {
+		if (!isSeekIndicatorAction(event.action)) return false;
+		const current = this.state.current;
+		const direction = getSeekDirection(event, snapshot);
+		const rapidRepeat = current.open && event.action === "seekStep" && current.direction === direction;
+		if (!rapidRepeat) this.#originTime = snapshot.currentTime ?? null;
+		const value = this.#getEffectiveSeekValue(event, snapshot, rapidRepeat);
+		const seekTotal = rapidRepeat ? current.seekTotal + Math.abs(value) : Math.abs(value);
+		this.state.patch({
+			open: true,
+			generation: current.generation + 1,
+			direction,
+			count: rapidRepeat ? current.count + 1 : 1,
+			seekTotal,
+			value: event.action === "seekStep" && seekTotal > 0 ? `${seekTotal}s` : null,
+			currentTime: formatCurrentTime(snapshot)
+		});
+		this.#close.arm();
+		return true;
+	}
+	#getEffectiveSeekValue(event, snapshot, rapidRepeat) {
+		if (event.action !== "seekStep" || event.value === void 0) return 0;
+		if (!rapidRepeat || this.#originTime === null) return event.value;
+		const originTime = this.#originTime;
+		const duration = snapshot.duration ?? Infinity;
+		const currentTotal = this.state.current.seekTotal;
+		const step = Math.abs(event.value);
+		return (event.value < 0 ? Math.max(0, originTime - currentTotal) : Math.max(0, duration - originTime - currentTotal)) >= step ? event.value : 0;
 	}
 };
-function getVolumeLevel(media) {
-	if (media.muted || media.volume === 0) return "off";
-	if (media.volume < .5) return "low";
-	if (media.volume < .75) return "medium";
-	return "high";
-}
 
 //#endregion
-//#region ../core/dist/dev/core/ui/mute-button/mute-button-data-attrs.js
-const MuteButtonDataAttrs = {
-	muted: "data-muted",
-	volumeLevel: "data-volume-level"
+//#region ../core/dist/dev/core/ui/input-feedback/seek-indicator-data-attrs.js
+const SeekIndicatorDataAttrs = {
+	open: "data-open",
+	direction: "data-direction",
+	transitionStarting: "data-starting-style",
+	transitionEnding: "data-ending-style"
 };
 
 //#endregion
-//#region ../core/dist/dev/core/ui/play-button/play-button-core.js
-var PlayButtonCore = class PlayButtonCore {
-	static defaultProps = {
-		label: "",
-		disabled: false
-	};
-	state = createState({
-		paused: true,
-		ended: false,
-		started: false,
-		label: ""
-	});
-	#props = { ...PlayButtonCore.defaultProps };
-	#media = null;
-	constructor(props) {
-		if (props) this.setProps(props);
-	}
+//#region ../core/dist/dev/core/ui/input-feedback/status-announcer-core.js
+var StatusAnnouncerCore = class {
+	state = createState({ label: null });
+	#props = {};
+	#close = new IndicatorCloseController(() => this.state.patch({ label: null }), () => getIndicatorCloseDelay(this.#props));
 	setProps(props) {
-		this.#props = defaults(props, PlayButtonCore.defaultProps);
+		this.#props = props;
 	}
-	getLabel(state) {
-		const { label } = this.#props;
-		if (isFunction(label)) {
-			const customLabel = label(state);
-			if (customLabel) return customLabel;
-		} else if (label) return label;
-		if (state.ended) return "Replay";
-		return state.paused ? "Play" : "Pause";
+	destroy() {
+		this.#close.destroy();
 	}
-	getAttrs(state) {
-		return {
-			"aria-label": this.getLabel(state),
-			"aria-disabled": this.#props.disabled ? "true" : void 0
-		};
+	processEvent(event, snapshot) {
+		const label = deriveAnnouncerLabel(event, snapshot, {
+			...DEFAULT_INPUT_INDICATOR_LABELS,
+			...this.#props.labels
+		});
+		if (!label) return false;
+		this.state.patch({ label });
+		this.#close.arm();
+		return true;
 	}
-	setMedia(media) {
+};
+
+//#endregion
+//#region ../core/dist/dev/core/ui/input-feedback/status-indicator-core.js
+const INITIAL_STATE$1 = {
+	open: false,
+	generation: 0,
+	status: null,
+	label: null,
+	value: null,
+	transitionStarting: false,
+	transitionEnding: false
+};
+var StatusIndicatorCore = class {
+	state = createState({ ...INITIAL_STATE$1 });
+	#props = {};
+	#close = new IndicatorCloseController(() => this.state.patch({
+		open: false,
+		status: null,
+		label: null,
+		value: null
+	}), () => getIndicatorCloseDelay(this.#props));
+	setProps(props) {
+		this.#props = props;
+	}
+	destroy() {
+		this.#close.destroy();
+	}
+	close() {
+		this.#close.close();
+	}
+	processEvent(event, snapshot) {
+		if (!isInputActionIncluded(event.action, this.#props.actions)) return false;
+		const details = deriveStatus(event, snapshot, {
+			...DEFAULT_INPUT_INDICATOR_LABELS,
+			...this.#props.labels
+		});
+		if (!details) return false;
+		this.state.patch({
+			open: true,
+			generation: this.state.current.generation + 1,
+			status: details.status,
+			label: details.label,
+			value: details.value
+		});
+		this.#close.arm();
+		return true;
+	}
+};
+
+//#endregion
+//#region ../core/dist/dev/core/ui/input-feedback/status-indicator-data-attrs.js
+const StatusIndicatorDataAttrs = {
+	open: "data-open",
+	status: "data-status",
+	transitionStarting: "data-starting-style",
+	transitionEnding: "data-ending-style"
+};
+
+//#endregion
+//#region ../core/dist/dev/core/ui/input-feedback/volume-indicator-core.js
+const BOUNDARY_CLEAR_DELAY = 300;
+const INITIAL_STATE = {
+	open: false,
+	generation: 0,
+	level: null,
+	value: null,
+	fill: null,
+	min: false,
+	max: false,
+	transitionStarting: false,
+	transitionEnding: false
+};
+var VolumeIndicatorCore = class {
+	state = createState({ ...INITIAL_STATE });
+	#props = {};
+	#boundaryTimer = null;
+	#boundaryRestartTimer = null;
+	#close = new IndicatorCloseController(() => this.state.patch({
+		open: false,
+		level: null,
+		value: null,
+		fill: null,
+		min: false,
+		max: false
+	}), () => getIndicatorCloseDelay(this.#props));
+	setProps(props) {
+		this.#props = props;
+	}
+	destroy() {
+		this.#close.destroy();
+		this.#clearBoundaryTimers();
+	}
+	close() {
+		this.#clearBoundaryTimers();
+		this.#close.close();
+	}
+	processEvent(event, snapshot) {
+		if (!isVolumeIndicatorAction(event.action)) return false;
+		const current = this.state.current;
+		const prediction = predictVolumeActionOutcome(event, snapshot);
+		const details = deriveVolumeStatus(event, snapshot, DEFAULT_INPUT_INDICATOR_LABELS, prediction);
+		const boundary = getVolumeBoundary(event, prediction.snapshotVolume, prediction.nextVolume);
+		const repeatedBoundary = boundary !== null && current[boundary] === true;
+		if (!boundary) this.#clearBoundaryTimers();
+		this.state.patch({
+			open: true,
+			generation: current.generation + 1,
+			level: details.volumeLevel,
+			value: details.value,
+			fill: details.value,
+			min: boundary === "min" && !repeatedBoundary,
+			max: boundary === "max" && !repeatedBoundary
+		});
+		if (boundary) if (repeatedBoundary) this.#restartBoundary(boundary);
+		else this.#scheduleBoundaryClear();
+		this.#close.arm();
+		return true;
+	}
+	#scheduleBoundaryClear() {
+		this.#clearBoundaryTimer();
+		this.#boundaryTimer = setTimeout(() => {
+			this.#boundaryTimer = null;
+			this.state.patch({
+				min: false,
+				max: false
+			});
+		}, BOUNDARY_CLEAR_DELAY);
+	}
+	#restartBoundary(boundary) {
+		this.#clearBoundaryTimers();
+		this.state.patch({
+			min: false,
+			max: false
+		});
+		this.#boundaryRestartTimer = setTimeout(() => {
+			this.#boundaryRestartTimer = null;
+			this.state.patch({ [boundary]: true });
+			this.#scheduleBoundaryClear();
+		}, 0);
+	}
+	#clearBoundaryTimer() {
+		if (this.#boundaryTimer === null) return;
+		clearTimeout(this.#boundaryTimer);
+		this.#boundaryTimer = null;
+	}
+	#clearBoundaryRestartTimer() {
+		if (this.#boundaryRestartTimer === null) return;
+		clearTimeout(this.#boundaryRestartTimer);
+		this.#boundaryRestartTimer = null;
+	}
+	#clearBoundaryTimers() {
+		this.#clearBoundaryTimer();
+		this.#clearBoundaryRestartTimer();
+	}
+};
+function getVolumeBoundary(event, currentVolume, nextVolume) {
+	if (event.action !== "volumeStep" || event.value === void 0 || event.value === 0) return null;
+	if (nextVolume !== currentVolume) return null;
+	return event.value < 0 ? "min" : "max";
+}
+
+//#endregion
+//#region ../core/dist/dev/core/ui/input-feedback/volume-indicator-css-vars.js
+const VolumeIndicatorCSSVars = { fill: "--media-volume-fill" };
+
+//#endregion
+//#region ../core/dist/dev/core/ui/input-feedback/volume-indicator-data-attrs.js
+const VolumeIndicatorDataAttrs = {
+	open: "data-open",
+	level: "data-level",
+	min: "data-min",
+	max: "data-max",
+	transitionStarting: "data-starting-style",
+	transitionEnding: "data-ending-style"
+};
+
+//#endregion
+//#region ../core/dist/dev/core/ui/menu/menu-core.js
+/** Base menu logic: ARIA attributes and open/close state computation. */
+var MenuCore = class MenuCore {
+	static defaultProps = {
+		side: "bottom",
+		align: "start",
+		open: false,
+		defaultOpen: false,
+		closeOnEscape: true,
+		closeOnOutsideClick: true,
+		isSubmenu: false
+	};
+	#props = { ...MenuCore.defaultProps };
+	#input = null;
+	get props() {
+		return this.#props;
+	}
+	constructor(props) {
+		if (props) this.setProps(props);
+	}
+	setProps(props) {
+		this.#props = defaults(props, MenuCore.defaultProps);
+	}
+	setInput(input) {
+		this.#input = input;
+	}
+	getState() {
+		const input = this.#input;
+		const isSubmenu = this.#props.isSubmenu;
+		return {
+			open: input.active,
+			status: input.status,
+			side: isSubmenu ? void 0 : this.#props.side,
+			align: isSubmenu ? void 0 : this.#props.align,
+			isSubmenu,
+			...getTransitionFlags(input.status)
+		};
+	}
+	getTriggerAttrs(state, contentId) {
+		return {
+			"aria-haspopup": "menu",
+			"aria-expanded": state.open ? "true" : "false",
+			"aria-controls": contentId
+		};
+	}
+	getContentAttrs(state) {
+		return {
+			role: "menu",
+			tabIndex: -1,
+			...!state.isSubmenu && { popover: "manual" }
+		};
+	}
+};
+
+//#endregion
+//#region ../core/dist/dev/core/ui/menu/menu-data-attrs.js
+/** Data attributes set on the menu Content element and inherited by all children. */
+const MenuDataAttrs = {
+	open: "data-open",
+	side: "data-side",
+	align: "data-align",
+	isSubmenu: "data-submenu",
+	...TransitionDataAttrs
+};
+
+//#endregion
+//#region ../core/dist/dev/core/ui/menu/menu-item-data-attrs.js
+/** Data attributes set on all navigable menu item elements. */
+const MenuItemDataAttrs = {
+	item: "data-item",
+	highlighted: "data-highlighted"
+};
+
+//#endregion
+//#region ../core/dist/dev/core/ui/mute-button/mute-button-core.js
+var MuteButtonCore = class MuteButtonCore {
+	static defaultProps = {
+		label: "",
+		disabled: false
+	};
+	state = createState({
+		muted: false,
+		volumeLevel: "off",
+		label: ""
+	});
+	#props = { ...MuteButtonCore.defaultProps };
+	#media = null;
+	constructor(props) {
+		if (props) this.setProps(props);
+	}
+	setProps(props) {
+		this.#props = defaults(props, MuteButtonCore.defaultProps);
+	}
+	getLabel(state) {
+		const { label } = this.#props;
+		if (isFunction(label)) {
+			const customLabel = label(state);
+			if (customLabel) return customLabel;
+		} else if (label) return label;
+		return state.muted ? "Unmute" : "Mute";
+	}
+	getAttrs(state) {
+		return {
+			"aria-label": this.getLabel(state),
+			"aria-disabled": this.#props.disabled ? "true" : void 0
+		};
+	}
+	setMedia(media) {
 		this.#media = media;
 	}
 	getState() {
 		const media = this.#media;
 		this.state.patch({
-			paused: media.paused,
-			ended: media.ended,
-			started: media.started
+			muted: media.muted || media.volume === 0,
+			volumeLevel: getVolumeLevel(media)
 		});
 		this.state.patch({ label: this.getLabel(this.state.current) });
 		return this.state.current;
 	}
-	async toggle(media) {
+	toggle(media) {
 		if (this.#props.disabled) return;
-		if (media.paused || media.ended) return media.play();
-		media.pause();
+		media.toggleMuted();
 	}
 };
+function getVolumeLevel(media) {
+	if (media.muted || media.volume === 0) return "off";
+	if (media.volume < .5) return "low";
+	if (media.volume < .75) return "medium";
+	return "high";
+}
 
 //#endregion
-//#region ../core/dist/dev/core/ui/play-button/play-button-data-attrs.js
-const PlayButtonDataAttrs = {
-	paused: "data-paused",
-	ended: "data-ended",
-	started: "data-started"
+//#region ../core/dist/dev/core/ui/mute-button/mute-button-data-attrs.js
+const MuteButtonDataAttrs = {
+	muted: "data-muted",
+	volumeLevel: "data-volume-level"
 };
 
 //#endregion
-//#region ../core/dist/dev/core/ui/playback-rate-button/playback-rate-button-core.js
-var PlaybackRateButtonCore = class PlaybackRateButtonCore {
+//#region ../core/dist/dev/core/ui/play-button/play-button-core.js
+var PlayButtonCore = class PlayButtonCore {
 	static defaultProps = {
 		label: "",
 		disabled: false
 	};
 	state = createState({
-		rate: 1,
+		paused: true,
+		ended: false,
+		started: false,
 		label: ""
 	});
-	#props = { ...PlaybackRateButtonCore.defaultProps };
+	#props = { ...PlayButtonCore.defaultProps };
 	#media = null;
 	constructor(props) {
 		if (props) this.setProps(props);
 	}
 	setProps(props) {
-		this.#props = defaults(props, PlaybackRateButtonCore.defaultProps);
+		this.#props = defaults(props, PlayButtonCore.defaultProps);
 	}
 	getLabel(state) {
 		const { label } = this.#props;
@@ -418,7 +1033,8 @@ var PlaybackRateButtonCore = class PlaybackRateButtonCore {
 			const customLabel = label(state);
 			if (customLabel) return customLabel;
 		} else if (label) return label;
-		return `Playback rate ${state.rate}`;
+		if (state.ended) return "Replay";
+		return state.paused ? "Play" : "Pause";
 	}
 	getAttrs(state) {
 		return {
@@ -431,23 +1047,28 @@ var PlaybackRateButtonCore = class PlaybackRateButtonCore {
 	}
 	getState() {
 		const media = this.#media;
-		this.state.patch({ rate: media.playbackRate });
+		this.state.patch({
+			paused: media.paused,
+			ended: media.ended,
+			started: media.started
+		});
 		this.state.patch({ label: this.getLabel(this.state.current) });
 		return this.state.current;
 	}
-	cycle(media) {
+	async toggle(media) {
 		if (this.#props.disabled) return;
-		const { playbackRates, playbackRate } = media;
-		if (playbackRates.length === 0) return;
-		const idx = playbackRates.indexOf(playbackRate);
-		const next = idx === -1 ? playbackRates.find((r) => r > playbackRate) ?? playbackRates[0] : playbackRates[(idx + 1) % playbackRates.length];
-		media.setPlaybackRate(next);
+		if (media.paused || media.ended) return media.play();
+		media.pause();
 	}
 };
 
 //#endregion
-//#region ../core/dist/dev/core/ui/playback-rate-button/playback-rate-button-data-attrs.js
-const PlaybackRateButtonDataAttrs = { rate: "data-rate" };
+//#region ../core/dist/dev/core/ui/play-button/play-button-data-attrs.js
+const PlayButtonDataAttrs = {
+	paused: "data-paused",
+	ended: "data-ended",
+	started: "data-started"
+};
 
 //#endregion
 //#region ../core/dist/dev/core/ui/popover/popover-core.js
@@ -507,6 +1128,7 @@ var PopoverCore = class PopoverCore {
 const PopoverCSSVars = {
 	sideOffset: "--media-popover-side-offset",
 	alignOffset: "--media-popover-align-offset",
+	boundaryOffset: "--media-popover-boundary-offset",
 	anchorWidth: "--media-popover-anchor-width",
 	anchorHeight: "--media-popover-anchor-height",
 	availableWidth: "--media-popover-available-width",
@@ -519,84 +1141,19 @@ const PopoverDataAttrs = {
 	open: "data-open",
 	side: "data-side",
 	align: "data-align",
-	transitionStarting: "data-starting-style",
-	transitionEnding: "data-ending-style"
-};
-
-//#endregion
-//#region ../core/dist/dev/core/ui/seek-button/seek-button-core.js
-var SeekButtonCore = class SeekButtonCore {
-	static defaultProps = {
-		seconds: 30,
-		label: "",
-		disabled: false
-	};
-	state = createState({
-		seeking: false,
-		direction: "forward",
-		label: ""
-	});
-	#props = { ...SeekButtonCore.defaultProps };
-	#media = null;
-	constructor(props) {
-		if (props) this.setProps(props);
-	}
-	setProps(props) {
-		this.#props = defaults(props, SeekButtonCore.defaultProps);
-	}
-	getLabel(state) {
-		const { label } = this.#props;
-		if (isFunction(label)) {
-			const customLabel = label(state);
-			if (customLabel) return customLabel;
-		} else if (label) return label;
-		const abs = Math.abs(this.#props.seconds);
-		return state.direction === "backward" ? `Seek backward ${abs} seconds` : `Seek forward ${abs} seconds`;
-	}
-	getAttrs(state) {
-		return {
-			"aria-label": this.getLabel(state),
-			"aria-disabled": this.#props.disabled ? "true" : void 0
-		};
-	}
-	setMedia(media) {
-		this.#media = media;
-	}
-	getState() {
-		const media = this.#media;
-		const direction = this.#props.seconds < 0 ? "backward" : "forward";
-		this.state.patch({
-			seeking: media.seeking,
-			direction
-		});
-		this.state.patch({ label: this.getLabel(this.state.current) });
-		return this.state.current;
-	}
-	async seek(media) {
-		if (this.#props.disabled) return;
-		await media.seek(media.currentTime + this.#props.seconds);
-	}
-};
-
-//#endregion
-//#region ../core/dist/dev/core/ui/seek-button/seek-button-data-attrs.js
-const SeekButtonDataAttrs = {
-	seeking: "data-seeking",
-	direction: "data-direction"
+	...TransitionDataAttrs
 };
 
 //#endregion
-//#region ../utils/dist/number/number.js
-/** Clamp a value between min and max (inclusive). */
-function clamp(value, min, max) {
-	return Math.max(min, Math.min(max, value));
-}
-/** Snap a value to the nearest step, offset from min. */
-function roundToStep(value, step, min) {
-	const nearest = Math.round((value - min) / step) * step + min;
-	const dot = `${step}`.indexOf(".");
-	return dot === -1 ? nearest : Number(nearest.toFixed(`${step}`.length - dot - 1));
-}
+//#region ../core/dist/dev/core/ui/popover/popup-host-attr.js
+/**
+* Hosted floating UI surfaces (popover, menu, tooltip, and future overlays) that support
+* parent-driven lifecycle may set {@link POPUP_HOST_ATTR}. Ancestors can discover them with
+* {@link POPUP_HOST_SELECTOR} and call methods such as `close('imperative-action')` when
+* the element implements that contract.
+*/
+const POPUP_HOST_ATTR = "data-popup";
+const POPUP_HOST_SELECTOR = `[${POPUP_HOST_ATTR}]`;
 
 //#endregion
 //#region ../core/dist/dev/core/ui/slider/slider-core.js
@@ -877,106 +1434,6 @@ function mapCuesToThumbnails(cues, baseURL) {
 	return images;
 }
 
-//#endregion
-//#region ../utils/dist/time/format.js
-const UNIT_LABELS = [
-	{
-		singular: "hour",
-		plural: "hours"
-	},
-	{
-		singular: "minute",
-		plural: "minutes"
-	},
-	{
-		singular: "second",
-		plural: "seconds"
-	}
-];
-function isValidTime(value) {
-	return isNumber(value) && Number.isFinite(value);
-}
-function toTimeUnitPhrase(value, unitIndex) {
-	return `${value} ${value === 1 ? UNIT_LABELS[unitIndex]?.singular : UNIT_LABELS[unitIndex]?.plural}`;
-}
-/**
-* Format seconds to digital display string.
-*
-* @param seconds - Time in seconds (can be negative)
-* @param guide - Guide time (typically duration) to determine display format
-* @returns Formatted string like "1:30" or "1:05:30"
-*
-* @example
-* formatTime(90) // "1:30"
-* formatTime(3661) // "1:01:01"
-* formatTime(35, 3600) // "0:00:35" (guided by 1-hour duration)
-* formatTime(35, 600) // "00:35" (guided by 10-minute duration)
-*/
-function formatTime(seconds, guide) {
-	if (!isValidTime(seconds)) return "0:00";
-	const negative = seconds < 0;
-	const positiveSeconds = Math.abs(seconds);
-	const h = Math.floor(positiveSeconds / 3600);
-	const m = Math.floor(positiveSeconds / 60 % 60);
-	const s = Math.floor(positiveSeconds % 60);
-	const guideAbs = guide ? Math.abs(guide) : 0;
-	const gh = Math.floor(guideAbs / 3600);
-	const gm = Math.floor(guideAbs / 60 % 60);
-	const showHours = h > 0 || gh > 0;
-	const padMinutes = showHours || gm >= 10;
-	const hoursStr = showHours ? `${h}:` : "";
-	const minutesStr = `${padMinutes && m < 10 ? "0" : ""}${m}:`;
-	const secondsStr = s < 10 ? `0${s}` : `${s}`;
-	return `${negative ? "-" : ""}${hoursStr}${minutesStr}${secondsStr}`;
-}
-/**
-* Format seconds to human-readable phrase for screen readers.
-*
-* @param seconds - Time in seconds (negative indicates remaining)
-* @returns Human-readable phrase like "1 minute, 30 seconds"
-*
-* @example
-* formatTimeAsPhrase(90) // "1 minute, 30 seconds"
-* formatTimeAsPhrase(3661) // "1 hour, 1 minute, 1 second"
-* formatTimeAsPhrase(-270) // "4 minutes, 30 seconds remaining"
-*/
-function formatTimeAsPhrase(seconds) {
-	if (!isValidTime(seconds)) return "";
-	const negative = seconds < 0;
-	const positiveSeconds = Math.abs(seconds);
-	const h = Math.floor(positiveSeconds / 3600);
-	const m = Math.floor(positiveSeconds / 60 % 60);
-	const s = Math.floor(positiveSeconds % 60);
-	if (positiveSeconds === 0) return `${toTimeUnitPhrase(0, 2)}${negative ? " remaining" : ""}`;
-	return `${[
-		h,
-		m,
-		s
-	].map((value, index) => value > 0 ? toTimeUnitPhrase(value, index) : null).filter(Boolean).join(", ")}${negative ? " remaining" : ""}`;
-}
-/**
-* Convert seconds to ISO 8601 duration for datetime attribute.
-*
-* @param seconds - Time in seconds
-* @returns ISO 8601 duration string like "PT1M30S"
-*
-* @example
-* secondsToIsoDuration(90) // "PT1M30S"
-* secondsToIsoDuration(3661) // "PT1H1M1S"
-*/
-function secondsToIsoDuration(seconds) {
-	if (!isValidTime(seconds)) return "PT0S";
-	const positiveSeconds = Math.abs(seconds);
-	const h = Math.floor(positiveSeconds / 3600);
-	const m = Math.floor(positiveSeconds / 60 % 60);
-	const s = Math.floor(positiveSeconds % 60);
-	let duration = "PT";
-	if (h > 0) duration += `${h}H`;
-	if (m > 0) duration += `${m}M`;
-	if (s > 0 || duration === "PT") duration += `${s}S`;
-	return duration;
-}
-
 //#endregion
 //#region ../core/dist/dev/core/ui/time/time-core.js
 const DEFAULT_LABELS = {
@@ -1171,6 +1628,7 @@ var TooltipCore = class TooltipCore {
 const TooltipCSSVars = {
 	sideOffset: "--media-tooltip-side-offset",
 	alignOffset: "--media-tooltip-align-offset",
+	boundaryOffset: "--media-tooltip-boundary-offset",
 	anchorWidth: "--media-tooltip-anchor-width",
 	anchorHeight: "--media-tooltip-anchor-height",
 	availableWidth: "--media-tooltip-available-width",
@@ -1183,8 +1641,7 @@ const TooltipDataAttrs = {
 	open: "data-open",
 	side: "data-side",
 	align: "data-align",
-	transitionStarting: "data-starting-style",
-	transitionEnding: "data-ending-style"
+	...TransitionDataAttrs
 };
 
 //#endregion
@@ -1390,10 +1847,15 @@ var HotkeyCoordinator = class {
 	#docDisconnect = null;
 	/** Action name → bound keys. Controls query this to set `aria-keyshortcuts`. */
 	#ariaRegistry = /* @__PURE__ */ new Map();
+	#subscribers = /* @__PURE__ */ new Set();
 	#destroyed = false;
 	constructor(target) {
 		this.#target = target;
 	}
+	subscribe(callback) {
+		this.#subscribers.add(callback);
+		return () => this.#subscribers.delete(callback);
+	}
 	add(options) {
 		const parsed = parseHotkeyPattern(options.keys);
 		const binding = {
@@ -1463,6 +1925,7 @@ var HotkeyCoordinator = class {
 	#handleEvent = (event) => {
 		if (event.key === "Unidentified") return;
 		if (isInteractiveActivation(event)) return;
+		if (event.defaultPrevented) return;
 		const editable = isEditableTarget(event);
 		for (const binding of this.#bindings) {
 			const { options, parsed } = binding;
@@ -1472,6 +1935,19 @@ var HotkeyCoordinator = class {
 			for (const p of parsed) {
 				if (!matchesHotkeyEvent(p, event)) continue;
 				if (editable && p.modifiers.size === 0) continue;
+				if (this.#subscribers.size > 0) {
+					const activateEvent = {
+						source: "hotkey",
+						action: options.action,
+						value: options.value,
+						event
+					};
+					for (const cb of this.#subscribers) try {
+						cb(activateEvent);
+					} catch (error) {
+						console.warn("[vjs-hotkey] subscribe callback threw:", error);
+					}
+				}
 				event.preventDefault();
 				options.onActivate(event, p.originalKey);
 				return;
@@ -1564,7 +2040,8 @@ const coordinators = /* @__PURE__ */ new WeakMap();
 function findHotkeyCoordinator(target) {
 	return coordinators.get(target);
 }
-function getCoordinator(target) {
+/** Look up or create the hotkey coordinator for a target element. */
+function getHotkeyCoordinator(target) {
 	let coordinator = coordinators.get(target);
 	if (!coordinator) {
 		coordinator = new HotkeyCoordinator(target);
@@ -1589,7 +2066,7 @@ function getCoordinator(target) {
 * @returns A cleanup function that removes the binding.
 */
 function createHotkey(target, options) {
-	return getCoordinator(target).add(options);
+	return getHotkeyCoordinator(target).add(options);
 }
 
 //#endregion
@@ -1625,6 +2102,7 @@ function createDismissLayer(options) {
 	}
 	function handleKeydown(event) {
 		if (event.key !== "Escape") return;
+		if (event.defaultPrevented) return;
 		if (!state.current.active) return;
 		if (!(options.closeOnEscape?.() ?? true)) return;
 		options.onEscapeDismiss(event);
@@ -1765,6 +2243,50 @@ function createButton(options) {
 	};
 }
 
+//#endregion
+//#region ../core/dist/dev/dom/ui/input-action.js
+function toInputActionEvent(event) {
+	return {
+		action: event.action,
+		value: event.value,
+		source: event.source,
+		key: "key" in event.event ? event.event.key : void 0
+	};
+}
+function getMediaSnapshot(store) {
+	if (!store) return {};
+	const state = store.state;
+	const time = selectTime(state);
+	return {
+		paused: selectPlayback(state)?.paused,
+		volume: selectVolume(state)?.volume,
+		muted: selectVolume(state)?.muted,
+		fullscreen: selectFullscreen(state)?.fullscreen,
+		subtitlesShowing: selectTextTrack(state)?.subtitlesShowing,
+		pip: selectPiP(state)?.pip,
+		currentTime: time?.currentTime,
+		duration: time?.duration
+	};
+}
+function subscribeToInputActions(container, callback) {
+	const handleEvent = (event) => callback(toInputActionEvent(event));
+	const gestureUnsubscribe = getGestureCoordinator(container).subscribe(handleEvent);
+	const hotkeyUnsubscribe = getHotkeyCoordinator(container).subscribe(handleEvent);
+	return () => {
+		gestureUnsubscribe();
+		hotkeyUnsubscribe();
+	};
+}
+const indicatorVisibilityCoordinators = /* @__PURE__ */ new WeakMap();
+function getIndicatorVisibilityCoordinator(container) {
+	let coordinator = indicatorVisibilityCoordinators.get(container);
+	if (!coordinator) {
+		coordinator = new IndicatorVisibilityCoordinator();
+		indicatorVisibilityCoordinators.set(container, coordinator);
+	}
+	return coordinator;
+}
+
 //#endregion
 //#region ../core/dist/dev/dom/ui/popover/popover.js
 function createPopover(options) {
@@ -1788,6 +2310,9 @@ function createPopover(options) {
 		}
 	});
 	const state = layer.input;
+	const groupMember = { close(reason) {
+		applyClose(reason);
+	} };
 	function clearHoverTimeout() {
 		if (hoverTimeout !== null) {
 			clearTimeout(hoverTimeout);
@@ -1823,6 +2348,7 @@ function createPopover(options) {
 	function applyOpen(reason, event) {
 		const opening = layer.open();
 		if (!opening) return;
+		options.group?.()?.open(groupMember);
 		onOpenChange(true, event ? {
 			reason,
 			event
@@ -1835,6 +2361,7 @@ function createPopover(options) {
 	function applyClose(reason, event) {
 		const closing = layer.close(popupEl);
 		if (!closing) return;
+		options.group?.()?.close(groupMember);
 		onOpenChange(false, event ? {
 			reason,
 			event
@@ -1858,6 +2385,7 @@ function createPopover(options) {
 		applyClose("outside-click", event);
 	}
 	layer.signal.addEventListener("abort", () => {
+		options.group?.()?.close(groupMember);
 		clearHoverTimeout();
 		capturedPointers.clear();
 		triggerEl = null;
@@ -1947,14 +2475,621 @@ function createPopover(options) {
 	};
 }
 
+//#endregion
+//#region ../core/dist/dev/dom/ui/menu/create-menu.js
+function isMenuNavigationKey(event) {
+	const { key } = event;
+	return key === "ArrowDown" || key === "ArrowUp" || key === "ArrowLeft" || key === "ArrowRight" || key === "Home" || key === "End" || key === "Enter" || key === " " || key === "Escape" || key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey;
+}
+function getRootPositionOptions(side, align) {
+	if (!side || !align) return null;
+	return {
+		side,
+		align
+	};
+}
+function completeMenuItemSelection(menu, parentMenu = null) {
+	if (parentMenu) parentMenu.pop();
+	else menu.close();
+}
+function createMenu(options) {
+	const items = [];
+	let highlightedItem = null;
+	let triggerElement = null;
+	let contentElement = null;
+	let typeaheadBuffer = "";
+	let typeaheadTimer = null;
+	let openRafId = 0;
+	let lastCloseReason = null;
+	const navigationState = createState({
+		stack: [],
+		direction: "forward"
+	});
+	function push(menuId, triggerId) {
+		const stack = navigationState.current.stack;
+		if (stack[stack.length - 1]?.menuId === menuId) return;
+		navigationState.patch({
+			stack: [...stack, {
+				menuId,
+				triggerId
+			}],
+			direction: "forward"
+		});
+	}
+	function pop() {
+		const stack = navigationState.current.stack;
+		if (stack.length === 0) return;
+		navigationState.patch({
+			stack: stack.slice(0, -1),
+			direction: "back"
+		});
+	}
+	function highlight(element, highlightOptions) {
+		if (highlightedItem === element) return;
+		if (highlightedItem) {
+			highlightedItem.tabIndex = -1;
+			highlightedItem.removeAttribute(MenuItemDataAttrs.highlighted);
+		}
+		highlightedItem = element;
+		if (element) {
+			element.tabIndex = 0;
+			element.setAttribute(MenuItemDataAttrs.highlighted, "");
+			if (highlightOptions?.focus !== false) if (highlightOptions?.preventScroll) element.focus({ preventScroll: true });
+			else element.focus();
+		}
+		options.onHighlightChange?.(element);
+	}
+	function clearHighlight() {
+		if (highlightedItem) {
+			highlightedItem.tabIndex = -1;
+			highlightedItem.removeAttribute(MenuItemDataAttrs.highlighted);
+			highlightedItem = null;
+			options.onHighlightChange?.(null);
+		}
+	}
+	function highlightFirstItem(options) {
+		highlight(items[0] ?? null, options);
+	}
+	function getInitialHighlightItem() {
+		return items.find((item) => item.matches("[aria-checked=\"true\"], [aria-selected=\"true\"]")) ?? items[0] ?? null;
+	}
+	function clearTypeahead() {
+		if (typeaheadTimer !== null) {
+			clearTimeout(typeaheadTimer);
+			typeaheadTimer = null;
+		}
+		typeaheadBuffer = "";
+	}
+	function scheduleInitialHighlight() {
+		cancelAnimationFrame(openRafId);
+		openRafId = requestAnimationFrame(() => {
+			openRafId = 0;
+			if (!popover.input.current.active || popover.input.current.status === "ending" || highlightedItem) return;
+			highlight(getInitialHighlightItem());
+		});
+	}
+	function handleTypeahead(char) {
+		typeaheadBuffer = typeaheadBuffer.length === 1 && typeaheadBuffer.toLowerCase() === char.toLowerCase() ? char : typeaheadBuffer + char;
+		if (typeaheadTimer !== null) clearTimeout(typeaheadTimer);
+		typeaheadTimer = setTimeout(clearTypeahead, 500);
+		const searchStart = (highlightedItem ? items.indexOf(highlightedItem) : -1) + 1;
+		const candidates = [...items.slice(searchStart), ...items.slice(0, searchStart)];
+		const needle = typeaheadBuffer.toLowerCase();
+		const match = candidates.find((candidate) => {
+			return (candidate.textContent?.trim().toLowerCase() ?? "").startsWith(needle);
+		});
+		if (match) highlight(match);
+	}
+	const popover = createPopover({
+		transition: options.transition,
+		onOpenChange(open, details) {
+			lastCloseReason = open ? null : details.reason;
+			options.onOpenChange(open, details);
+			if (open) scheduleInitialHighlight();
+			else {
+				clearHighlight();
+				clearTypeahead();
+				navigationState.patch({
+					stack: [],
+					direction: "forward"
+				});
+			}
+		},
+		onOpenChangeComplete(open) {
+			options.onOpenChangeComplete?.(open);
+			if (!open && lastCloseReason !== "imperative-action" && lastCloseReason !== "group-open") triggerElement?.focus();
+		},
+		closeOnEscape: options.closeOnEscape,
+		closeOnOutsideClick: options.closeOnOutsideClick,
+		...options.group ? { group: options.group } : {}
+	});
+	const contentProps = {
+		onFocusOut: popover.popupProps.onFocusOut,
+		onKeyDown(event) {
+			const { key } = event;
+			if (key !== "Escape" && isMenuNavigationKey(event) && !event.defaultPrevented) event.preventDefault();
+			if (items.length === 0) return;
+			switch (key) {
+				case "ArrowDown":
+					event.preventDefault();
+					highlight(items[((highlightedItem ? items.indexOf(highlightedItem) : -1) + 1) % items.length] ?? null);
+					break;
+				case "ArrowUp": {
+					event.preventDefault();
+					const currentIndex = highlightedItem ? items.indexOf(highlightedItem) : 0;
+					highlight(items[(currentIndex <= 0 ? items.length : currentIndex) - 1] ?? null);
+					break;
+				}
+				case "Home":
+					event.preventDefault();
+					highlight(items[0] ?? null);
+					break;
+				case "End":
+					event.preventDefault();
+					highlight(items[items.length - 1] ?? null);
+					break;
+				case "Enter":
+				case " ":
+					event.preventDefault();
+					highlightedItem?.click();
+					break;
+				default: if (key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) handleTypeahead(key);
+			}
+		}
+	};
+	function handleTriggerKeyDown(event) {
+		const input = popover.input.current;
+		if (!input.active || input.status === "ending") return;
+		if (event.key === "Escape") return;
+		if (!isMenuNavigationKey(event)) return;
+		contentProps.onKeyDown(event);
+		event.stopPropagation();
+	}
+	function setTriggerElement(element) {
+		triggerElement = element;
+		popover.setTriggerElement(element);
+	}
+	function setContentElement(element) {
+		contentElement = element;
+		popover.setPopupElement(element);
+	}
+	function compareItems(a, b) {
+		if (a === b) return 0;
+		const position = a.compareDocumentPosition(b);
+		if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+		if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+		return 0;
+	}
+	function registerItem(element) {
+		element.tabIndex = -1;
+		element.setAttribute(MenuItemDataAttrs.item, "");
+		items.push(element);
+		items.sort(compareItems);
+		if (popover.input.current.active && popover.input.current.status !== "ending" && !highlightedItem) scheduleInitialHighlight();
+		return () => {
+			const index = items.indexOf(element);
+			if (index !== -1) items.splice(index, 1);
+			if (highlightedItem === element) clearHighlight();
+		};
+	}
+	function destroy() {
+		cancelAnimationFrame(openRafId);
+		openRafId = 0;
+		clearTypeahead();
+		popover.destroy();
+	}
+	return {
+		input: popover.input,
+		navigationInput: navigationState,
+		triggerProps: {
+			onClick: popover.triggerProps.onClick,
+			onKeyDown: handleTriggerKeyDown
+		},
+		contentProps,
+		get triggerElement() {
+			return triggerElement;
+		},
+		get contentElement() {
+			return contentElement;
+		},
+		setTriggerElement,
+		setContentElement,
+		registerItem,
+		highlight,
+		highlightFirstItem,
+		push,
+		pop,
+		open: popover.open,
+		close: popover.close,
+		destroy
+	};
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/utils/layout.js
+function forceLayout(element) {
+	element?.getBoundingClientRect();
+}
+function createDOMRect(left, top, width, height) {
+	const right = left + width;
+	const bottom = top + height;
+	return {
+		x: left,
+		y: top,
+		width,
+		height,
+		top,
+		right,
+		bottom,
+		left,
+		toJSON() {
+			return {
+				x: left,
+				y: top,
+				width,
+				height,
+				top,
+				right,
+				bottom,
+				left
+			};
+		}
+	};
+}
+function intersectDOMRects(firstRect, secondRect) {
+	const left = Math.max(firstRect.left, secondRect.left);
+	const top = Math.max(firstRect.top, secondRect.top);
+	const right = Math.min(firstRect.right, secondRect.right);
+	const bottom = Math.min(firstRect.bottom, secondRect.bottom);
+	return createDOMRect(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
+}
+function getPositioningBoundaryRect(boundaryElement) {
+	const viewportRect = document.documentElement.getBoundingClientRect();
+	return boundaryElement ? intersectDOMRects(viewportRect, boundaryElement.getBoundingClientRect()) : viewportRect;
+}
+function resolvePositioningBoundary(boundary, options = {}) {
+	if (!boundary) return null;
+	if (!isString(boundary)) return boundary;
+	if (boundary === "viewport") return null;
+	if (boundary === "container") return options.container ?? null;
+	try {
+		return (options.root ?? document).querySelector(boundary);
+	} catch {
+		return null;
+	}
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/ui/menu/create-menu-view-transition.js
+const DEFAULT_MENU_VIEW_TRANSITION_STATE = {
+	phase: "hidden",
+	direction: "forward",
+	triggerId: null
+};
+async function waitForElementAnimations(element) {
+	const animations = element.getAnimations?.() ?? [];
+	if (!animations.length) return;
+	await Promise.all(animations.map((animation) => animation.finished)).catch(() => {});
+}
+function focusFirstMenuViewItem(element) {
+	element.querySelector("[data-item]")?.focus({ preventScroll: true });
+}
+function getMenuViewState(phase) {
+	return phase === "entering" || phase === "active" ? "active" : "inactive";
+}
+function getMenuViewTransitionAttrs(state) {
+	return {
+		"data-menu-view": "",
+		"data-menu-view-state": getMenuViewState(state.phase),
+		"data-direction": state.direction,
+		...getTransitionStyleAttrs({
+			transitionStarting: state.phase === "entering",
+			transitionEnding: state.phase === "exiting"
+		}),
+		"data-open": state.phase !== "hidden" ? "" : void 0,
+		hidden: state.phase === "hidden"
+	};
+}
+function createMenuViewTransition(options = {}) {
+	const input = createState(DEFAULT_MENU_VIEW_TRANSITION_STATE);
+	const waitForAnimations = options.waitForAnimations ?? waitForElementAnimations;
+	const focusFirstItem = options.focusFirstItem ?? focusFirstMenuViewItem;
+	let element = null;
+	let transitionId = 0;
+	let raf1 = 0;
+	let raf2 = 0;
+	let focusRaf = 0;
+	let scheduledTransitionId = 0;
+	let scheduledPhase = null;
+	function cancelFrames() {
+		cancelAnimationFrame(raf1);
+		cancelAnimationFrame(raf2);
+		cancelAnimationFrame(focusRaf);
+		raf1 = 0;
+		raf2 = 0;
+		focusRaf = 0;
+		scheduledTransitionId = 0;
+		scheduledPhase = null;
+	}
+	function scheduleCurrentPhase() {
+		const { phase } = input.current;
+		if (!element || phase !== "entering" && phase !== "exiting") return;
+		if (scheduledTransitionId === transitionId && scheduledPhase === phase) return;
+		scheduledTransitionId = transitionId;
+		scheduledPhase = phase;
+		if (phase === "entering") scheduleEnterComplete(transitionId, element);
+		else scheduleExitComplete(transitionId, element);
+	}
+	function scheduleEnterComplete(currentTransitionId, currentElement) {
+		forceLayout(currentElement);
+		raf1 = requestAnimationFrame(() => {
+			if (currentTransitionId !== transitionId) return;
+			raf2 = requestAnimationFrame(() => {
+				if (currentTransitionId !== transitionId) return;
+				forceLayout(currentElement);
+				input.patch({ phase: "active" });
+				focusRaf = requestAnimationFrame(() => {
+					if (currentTransitionId !== transitionId) return;
+					focusFirstItem(currentElement);
+				});
+			});
+		});
+	}
+	function scheduleExitComplete(currentTransitionId, currentElement) {
+		forceLayout(currentElement);
+		raf1 = requestAnimationFrame(async () => {
+			await waitForAnimations(currentElement);
+			if (currentTransitionId !== transitionId) return;
+			const { direction, triggerId } = input.current;
+			input.patch({
+				phase: "hidden",
+				triggerId: null
+			});
+			if (direction === "back") options.restoreFocus?.(triggerId);
+		});
+	}
+	function startEnter(direction, triggerId) {
+		transitionId++;
+		cancelFrames();
+		input.patch({
+			phase: "entering",
+			direction,
+			triggerId
+		});
+		scheduleCurrentPhase();
+	}
+	function startExit(direction) {
+		transitionId++;
+		cancelFrames();
+		input.patch({
+			phase: "exiting",
+			direction
+		});
+		scheduleCurrentPhase();
+	}
+	function setElement(nextElement) {
+		if (element === nextElement) return;
+		element = nextElement;
+		scheduleCurrentPhase();
+	}
+	function sync({ active, direction, triggerId = null }) {
+		const { phase } = input.current;
+		if (active && (phase === "hidden" || phase === "exiting")) startEnter(direction, triggerId);
+		else if (!active && (phase === "active" || phase === "entering")) startExit(direction);
+	}
+	function destroy() {
+		transitionId++;
+		cancelFrames();
+		element = null;
+		input.patch(DEFAULT_MENU_VIEW_TRANSITION_STATE);
+	}
+	return {
+		input,
+		setElement,
+		sync,
+		destroy
+	};
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/ui/menu/menu-viewport-transition.js
+const DEFAULT_MENU_VIEWPORT_MIN_WIDTH = 160;
+const MENU_VIEW_ATTR = "data-menu-view";
+const MENU_VIEW_STATE_ATTR = "data-menu-view-state";
+const MENU_VIEW_ACTIVE_STATE = "active";
+const MENU_VIEW_INACTIVE_STATE = "inactive";
+const MENU_ROOT_VIEW_ATTR = "data-menu-root-view";
+const MENU_VIEWPORT_ATTR = "data-menu-viewport";
+const MENU_WIDTH_VAR = "--media-menu-width";
+const MENU_HEIGHT_VAR = "--media-menu-height";
+const MENU_VIEW_MEASURE_STYLE_PROPERTIES = [
+	"position",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"width",
+	"height",
+	"min-width",
+	"max-width"
+];
+const viewportTransitionStates = /* @__PURE__ */ new WeakMap();
+function getMenuViewportAttrs() {
+	return { "data-menu-viewport": "" };
+}
+function getMenuRootViewAttrs() {
+	return {
+		"data-menu-root-view": "",
+		"data-menu-view": ""
+	};
+}
+function getViewportTransitionState(content) {
+	let state = viewportTransitionStates.get(content);
+	if (!state) {
+		state = {
+			pending: null,
+			phaseKeys: /* @__PURE__ */ new WeakMap()
+		};
+		viewportTransitionStates.set(content, state);
+	}
+	return state;
+}
+function getMenuViewportElement(content) {
+	if (!content) return null;
+	return content.querySelector(`:scope > [${MENU_VIEWPORT_ATTR}]`) ?? content;
+}
+function getViewportElement(content, view) {
+	const viewport = getMenuViewportElement(content);
+	if (viewport && viewport !== content) return viewport;
+	if (view?.parentElement && content.contains(view.parentElement)) return view.parentElement;
+	return content;
+}
+function getRootViewElement(viewport) {
+	return viewport.querySelector(`:scope > [${MENU_ROOT_VIEW_ATTR}]`);
+}
+function getActiveMenuViewElement(viewport) {
+	return Array.from(viewport.children).find((child) => child instanceof HTMLElement && child.hasAttribute(MENU_VIEW_ATTR) && !child.hasAttribute(MENU_ROOT_VIEW_ATTR) && !child.hidden && !child.hasAttribute(TransitionDataAttrs.transitionEnding)) ?? null;
+}
+function resolveMinWidth(options) {
+	return options?.minWidth ?? DEFAULT_MENU_VIEWPORT_MIN_WIDTH;
+}
+function snapshotInlineStyle(element) {
+	return MENU_VIEW_MEASURE_STYLE_PROPERTIES.map((property) => ({
+		property,
+		value: element.style.getPropertyValue(property),
+		priority: element.style.getPropertyPriority(property)
+	}));
+}
+function restoreInlineStyle(element, snapshot) {
+	for (const { property, value, priority } of snapshot) if (value) element.style.setProperty(property, value, priority);
+	else element.style.removeProperty(property);
+}
+function measureMenuView(view, minWidth) {
+	const snapshot = snapshotInlineStyle(view);
+	try {
+		view.style.setProperty("position", "absolute");
+		view.style.setProperty("top", "0px");
+		view.style.setProperty("right", "auto");
+		view.style.setProperty("bottom", "auto");
+		view.style.setProperty("left", "0px");
+		view.style.setProperty("width", "max-content");
+		view.style.setProperty("height", "auto");
+		view.style.setProperty("min-width", `${minWidth}px`);
+		view.style.setProperty("max-width", "none");
+		forceLayout(view);
+		const rect = view.getBoundingClientRect();
+		return {
+			width: Math.ceil(Math.max(minWidth, rect.width, view.scrollWidth)),
+			height: Math.ceil(Math.max(rect.height, view.scrollHeight))
+		};
+	} finally {
+		restoreInlineStyle(view, snapshot);
+		forceLayout(view);
+	}
+}
+function setViewportSize(content, size) {
+	content.style.setProperty(MENU_WIDTH_VAR, `${size.width}px`);
+	content.style.setProperty(MENU_HEIGHT_VAR, `${size.height}px`);
+}
+function setMenuViewState(view, state) {
+	view.setAttribute(MENU_VIEW_STATE_ATTR, state);
+	if (state === MENU_VIEW_ACTIVE_STATE) view.setAttribute("data-open", "");
+	else view.removeAttribute("data-open");
+}
+function prepareEnteringMenuView(content, rootView, entering, state, options) {
+	const minWidth = resolveMinWidth(options);
+	const fromSize = measureMenuView(rootView, minWidth);
+	state.pending = {
+		entering,
+		fromSize,
+		toSize: measureMenuView(entering, minWidth)
+	};
+	setMenuViewState(rootView, MENU_VIEW_ACTIVE_STATE);
+	setViewportSize(content, fromSize);
+	forceLayout(content);
+}
+function startEnteringMenuView(content, rootView, entering, state, options) {
+	const minWidth = resolveMinWidth(options);
+	const current = state.pending?.entering === entering ? state.pending : {
+		entering,
+		fromSize: measureMenuView(rootView, minWidth),
+		toSize: measureMenuView(entering, minWidth)
+	};
+	state.pending = null;
+	setViewportSize(content, current.fromSize);
+	forceLayout(rootView);
+	setMenuViewState(rootView, MENU_VIEW_INACTIVE_STATE);
+	forceLayout(rootView);
+	setViewportSize(content, current.toSize);
+}
+function startExitingMenuView(content, rootView, exiting, transitionState, options) {
+	transitionState.pending = null;
+	const minWidth = resolveMinWidth(options);
+	const fromSize = measureMenuView(exiting, minWidth);
+	const toSize = measureMenuView(rootView, minWidth);
+	setViewportSize(content, fromSize);
+	setMenuViewState(rootView, MENU_VIEW_INACTIVE_STATE);
+	forceLayout(rootView);
+	setMenuViewState(rootView, MENU_VIEW_ACTIVE_STATE);
+	forceLayout(rootView);
+	setViewportSize(content, toSize);
+}
+function syncMenuViewRoot(content, hasActiveChildView, options) {
+	if (!content || hasActiveChildView) return;
+	const viewport = getViewportElement(content);
+	const rootView = getRootViewElement(viewport);
+	if (!rootView || getActiveMenuViewElement(viewport)) return;
+	const size = measureMenuView(rootView, resolveMinWidth(options));
+	setMenuViewState(rootView, MENU_VIEW_ACTIVE_STATE);
+	setViewportSize(content, size);
+}
+function syncMenuViewTransition(content, view, viewState, options) {
+	if (!content || !view) return;
+	const viewport = getViewportElement(content, view);
+	const rootView = getRootViewElement(viewport);
+	if (!rootView) return;
+	const state = getViewportTransitionState(content);
+	const phaseKey = `${viewState.phase}:${viewState.direction}`;
+	if (state.phaseKeys.get(view) === phaseKey) return;
+	state.phaseKeys.set(view, phaseKey);
+	if (viewState.phase === "hidden") {
+		state.phaseKeys.delete(view);
+		syncMenuViewRoot(content, getActiveMenuViewElement(viewport) !== null, options);
+		return;
+	}
+	if (viewState.phase === "entering") {
+		prepareEnteringMenuView(content, rootView, view, state, options);
+		return;
+	}
+	if (viewState.phase === "active") {
+		startEnteringMenuView(content, rootView, view, state, options);
+		return;
+	}
+	startExitingMenuView(content, rootView, view, state, options);
+}
+
 //#endregion
 //#region ../core/dist/dev/dom/ui/popover/popover-positioning.js
+const ZERO_OFFSETS = {
+	sideOffset: 0,
+	alignOffset: 0,
+	boundaryOffset: 0
+};
 const OPPOSITE_SIDE = {
 	top: "bottom",
 	bottom: "top",
 	left: "right",
 	right: "left"
 };
+function formatPixels(value) {
+	return `${clamp(value, 0, Infinity)}px`;
+}
+function getCrossAxisAvailable(start, end, size, boundaryStart, boundaryEnd, align, alignOffset) {
+	if (align === "start") return boundaryEnd - (start + alignOffset);
+	if (align === "end") return end + alignOffset - boundaryStart;
+	const center = start + size / 2 + alignOffset;
+	return Math.min(center - boundaryStart, boundaryEnd - center) * 2;
+}
 /**
 * Get positioning styles for the popup element.
 *
@@ -1971,17 +3106,20 @@ const OPPOSITE_SIDE = {
 * `applyStyles()` from `@videojs/utils/dom`.
 */
 function getAnchorPositionStyle(anchorName, opts, triggerRect, popupRect, boundaryRect, offsets, cssVars = PopoverCSSVars) {
-	if (supportsAnchorPositioning()) return getAnchorPositionCSS(anchorName, opts, cssVars);
-	if (triggerRect && popupRect) return {
-		...getManualPositionStyle(triggerRect, popupRect, opts, offsets ?? {
-			sideOffset: 0,
-			alignOffset: 0
-		}),
-		...boundaryRect ? getPositioningCSSVars(triggerRect, boundaryRect, opts.side, cssVars) : {},
-		position: "fixed",
-		inset: "auto",
-		margin: "0"
+	if (supportsAnchorPositioning()) return {
+		...getAnchorPositionCSS(anchorName, opts, cssVars),
+		...triggerRect && boundaryRect ? getPositioningCSSVars(triggerRect, boundaryRect, opts, offsets, cssVars) : {}
 	};
+	if (triggerRect && popupRect) {
+		const resolved = offsets ?? ZERO_OFFSETS;
+		return {
+			...getManualPositionStyle(triggerRect, popupRect, opts, resolved),
+			...boundaryRect ? getPositioningCSSVars(triggerRect, boundaryRect, opts, resolved, cssVars) : {},
+			position: "fixed",
+			inset: "auto",
+			margin: "0"
+		};
+	}
 	return {};
 }
 /** Generate style to set on the trigger for CSS Anchor Positioning. */
@@ -2029,16 +3167,24 @@ function getAnchorPositionCSS(anchorName, opts, cssVars = PopoverCSSVars) {
 * Accepts a `cssVars` map so the same logic works for both popover
 * (`--media-popover-*`) and tooltip (`--media-tooltip-*`) namespaces.
 */
-function getPositioningCSSVars(triggerRect, boundaryRect, side, cssVars = PopoverCSSVars) {
+function getPositioningCSSVars(triggerRect, boundaryRect, opts, offsets = ZERO_OFFSETS, cssVars = PopoverCSSVars) {
 	const vars = {};
+	const { side, align } = opts;
+	const boundaryOffset = offsets.boundaryOffset ?? 0;
+	const boundaryStartX = boundaryRect.left + boundaryOffset;
+	const boundaryEndX = boundaryRect.right - boundaryOffset;
+	const boundaryStartY = boundaryRect.top + boundaryOffset;
+	const boundaryEndY = boundaryRect.bottom - boundaryOffset;
 	vars[cssVars.anchorWidth] = `${triggerRect.width}px`;
 	vars[cssVars.anchorHeight] = `${triggerRect.height}px`;
 	if (side === "top" || side === "bottom") {
-		vars[cssVars.availableHeight] = side === "top" ? `${triggerRect.top - boundaryRect.top}px` : `${boundaryRect.bottom - triggerRect.bottom}px`;
-		vars[cssVars.availableWidth] = `${boundaryRect.width}px`;
+		const sideSpace = side === "top" ? triggerRect.top - boundaryStartY : boundaryEndY - triggerRect.bottom;
+		vars[cssVars.availableHeight] = formatPixels(sideSpace - offsets.sideOffset);
+		vars[cssVars.availableWidth] = formatPixels(getCrossAxisAvailable(triggerRect.left, triggerRect.right, triggerRect.width, boundaryStartX, boundaryEndX, align, offsets.alignOffset));
 	} else {
-		vars[cssVars.availableWidth] = side === "left" ? `${triggerRect.left - boundaryRect.left}px` : `${boundaryRect.right - triggerRect.right}px`;
-		vars[cssVars.availableHeight] = `${boundaryRect.height}px`;
+		const sideSpace = side === "left" ? triggerRect.left - boundaryStartX : boundaryEndX - triggerRect.right;
+		vars[cssVars.availableWidth] = formatPixels(sideSpace - offsets.sideOffset);
+		vars[cssVars.availableHeight] = formatPixels(getCrossAxisAvailable(triggerRect.top, triggerRect.bottom, triggerRect.height, boundaryStartY, boundaryEndY, align, offsets.alignOffset));
 	}
 	return vars;
 }
@@ -2076,14 +3222,15 @@ function getManualPositionStyle(triggerRect, popupRect, opts, offsets = {
 	};
 }
 /**
-* Read side-offset and align-offset CSS custom properties from the
+* Read positioning offset CSS custom properties from the
 * popup element's computed style, returning numeric pixel values.
 */
 function resolveOffsets(el, cssVars = PopoverCSSVars) {
 	const computed = getComputedStyle(el);
 	return {
 		sideOffset: resolveCSSLength(el, computed.getPropertyValue(cssVars.sideOffset)),
-		alignOffset: resolveCSSLength(el, computed.getPropertyValue(cssVars.alignOffset))
+		alignOffset: resolveCSSLength(el, computed.getPropertyValue(cssVars.alignOffset)),
+		boundaryOffset: resolveCSSLength(el, computed.getPropertyValue(cssVars.boundaryOffset))
 	};
 }
 /**
@@ -2097,17 +3244,7 @@ function getPopupPositionRect(el) {
 	const rect = el.getBoundingClientRect();
 	const width = el.offsetWidth || rect.width;
 	const height = el.offsetHeight || rect.height;
-	const adjustedRect = {
-		...rect,
-		width,
-		height,
-		right: rect.left + width,
-		bottom: rect.top + height
-	};
-	return {
-		...adjustedRect,
-		toJSON: () => adjustedRect
-	};
+	return createDOMRect(rect.left, rect.top, width, height);
 }
 
 //#endregion
@@ -2479,7 +3616,8 @@ const REASON_MAP = {
 	hover: "hover",
 	focus: "focus",
 	escape: "escape",
-	blur: "blur"
+	blur: "blur",
+	"imperative-action": "imperative-action"
 };
 function createTooltip(options) {
 	const popoverOpts = {
@@ -2547,7 +3685,7 @@ function createTooltip(options) {
 			return popover.triggerElement;
 		},
 		open: () => popover.open("hover"),
-		close: () => popover.close("hover")
+		close: (reason = "hover") => popover.close(reason)
 	};
 }
 
@@ -2677,8 +3815,17 @@ function applyElementProps(element, props, options) {
 }
 
 //#endregion
-//#region ../core/dist/dev/dom/utils/log.js
-const warned = /* @__PURE__ */ new Set();
+//#region ../core/dist/dev/dom/utils/event.js
+function isEventWithinElement(event, element) {
+	if (!element) return false;
+	if (isFunction(event.composedPath)) return event.composedPath().includes(element);
+	const target = event.target;
+	return target instanceof Node && element.contains(target);
+}
+
+//#endregion
+//#region ../core/dist/dev/dom/utils/log.js
+const warned = /* @__PURE__ */ new Set();
 function logMissingFeature(displayName, featureName) {
 	const key = `${displayName}:${featureName}`;
 	if (warned.has(key)) return;
@@ -2836,23 +3983,6 @@ var PlayButtonElement = class extends MediaButtonElement {
 	}
 };
 
-//#endregion
-//#region src/ui/playback-rate-button/playback-rate-button-element.ts
-var PlaybackRateButtonElement = class extends MediaButtonElement {
-	constructor(..._args) {
-		super(..._args);
-		this.core = new PlaybackRateButtonCore();
-		this.stateAttrMap = PlaybackRateButtonDataAttrs;
-		this.mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
-	}
-	static {
-		this.tagName = "media-playback-rate-button";
-	}
-	activate(state) {
-		this.core.cycle(state);
-	}
-};
-
 //#endregion
 //#region src/ui/position-controller.ts
 /**
@@ -2860,7 +3990,8 @@ var PlaybackRateButtonElement = class extends MediaButtonElement {
 * popup elements (tooltips, popovers). Tracks scroll, resize, and
 * ResizeObserver events to keep the popup aligned with its trigger.
 *
-* When native CSS Anchor Positioning is supported, `sync()` is a no-op.
+* Native CSS Anchor Positioning still uses this controller for dynamic
+* sizing variables such as available width/height.
 */
 var PositionController = class {
 	#host;
@@ -2868,6 +3999,7 @@ var PositionController = class {
 	#frame = 0;
 	#resizeObserver = null;
 	#trigger = null;
+	#boundary = null;
 	constructor(host) {
 		this.#host = host;
 		host.addController(this);
@@ -2878,15 +4010,16 @@ var PositionController = class {
 		return this.#host.getRootNode().querySelector(`[commandfor="${this.#host.id}"]`);
 	}
 	/** Start or update position tracking for the given trigger. */
-	sync(trigger) {
-		if (supportsAnchorPositioning()) return;
+	sync(trigger, boundary = null) {
 		if (!trigger) return;
-		if (this.#abort && this.#trigger === trigger) return;
+		if (this.#abort && this.#trigger === trigger && this.#boundary === boundary) return;
 		this.cleanup();
 		this.#abort = new AbortController();
 		this.#trigger = trigger;
+		this.#boundary = boundary;
 		const { signal } = this.#abort;
-		const reposition = () => {
+		const reposition = (event) => {
+			if (event && isEventWithinElement(event, this.#host)) return;
 			cancelAnimationFrame(this.#frame);
 			this.#frame = requestAnimationFrame(() => {
 				if (signal.aborted) return;
@@ -2905,6 +4038,7 @@ var PositionController = class {
 			});
 			this.#resizeObserver.observe(trigger);
 			this.#resizeObserver.observe(this.#host);
+			if (boundary) this.#resizeObserver.observe(boundary);
 		}
 		reposition();
 	}
@@ -2913,6 +4047,7 @@ var PositionController = class {
 		this.#abort?.abort();
 		this.#abort = null;
 		this.#trigger = null;
+		this.#boundary = null;
 		cancelAnimationFrame(this.#frame);
 		this.#frame = 0;
 		this.#resizeObserver?.disconnect();
@@ -2926,6 +4061,440 @@ var PositionController = class {
 	}
 };
 
+//#endregion
+//#region src/ui/menu/context.ts
+const MENU_CONTEXT_KEY = Symbol("@videojs/menu");
+const MENU_RADIO_GROUP_CONTEXT_KEY = Symbol("@videojs/menu-radio-group");
+const menuContext = createContext(MENU_CONTEXT_KEY);
+const menuRadioGroupContext = createContext(MENU_RADIO_GROUP_CONTEXT_KEY);
+
+//#endregion
+//#region src/ui/menu/menu-element.ts
+var MenuElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = MenuCore.defaultProps.open;
+		this.defaultOpen = MenuCore.defaultProps.defaultOpen;
+		this.side = MenuCore.defaultProps.side;
+		this.align = MenuCore.defaultProps.align;
+		this.closeOnEscape = MenuCore.defaultProps.closeOnEscape;
+		this.closeOnOutsideClick = MenuCore.defaultProps.closeOnOutsideClick;
+		this.boundary = "container";
+		this.#core = new MenuCore();
+		this.#provider = new ContextProvider(this, { context: menuContext });
+		this.#position = new PositionController(this);
+		this.#containerCtx = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
+		this.#parentCtx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#menuViewTransition = createMenuViewTransition({
+			focusFirstItem: () => {
+				this.#menu?.highlightFirstItem({ preventScroll: true });
+			},
+			restoreFocus: (triggerId) => {
+				const triggerElement = triggerId ? document.getElementById(triggerId) : null;
+				const fallbackTrigger = this.parentElement?.querySelector(`[data-has-submenu][commandfor="${this.id}"]`);
+				(triggerElement ?? fallbackTrigger)?.focus({ preventScroll: true });
+			}
+		});
+		this.#menu = null;
+		this.#snapshot = null;
+		this.#navSnapshot = null;
+		this.#menuViewSnapshot = null;
+		this.#navState = {
+			stack: [],
+			direction: "forward"
+		};
+		this.#disconnect = null;
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
+		this.#handleContentKeyDown = (event) => {
+			const isNavigationKey = isMenuNavigationKey(event);
+			const defaultPreventedBeforeMenu = event.defaultPrevented;
+			this.#menu?.contentProps.onKeyDown(event);
+			const parentCtx = this.#parentCtx.value ?? null;
+			if (!parentCtx) {
+				if (event.key === "Escape") return;
+				if (isNavigationKey) event.stopPropagation();
+				return;
+			}
+			const stack = parentCtx.menu.navigationInput.current.stack;
+			const ownsActiveSubmenu = stack[stack.length - 1]?.menuId === this.id;
+			const isBackNavigationKey = event.key === "ArrowLeft" || event.key === "Escape";
+			if (isBackNavigationKey && ownsActiveSubmenu && !defaultPreventedBeforeMenu) {
+				event.preventDefault();
+				parentCtx.menu.pop();
+			}
+			if (isNavigationKey && (!isBackNavigationKey || ownsActiveSubmenu)) event.stopPropagation();
+		};
+		this.#handleContentFocusOut = (event) => {
+			this.#menu?.contentProps.onFocusOut(event);
+		};
+	}
+	static {
+		this.tagName = "media-menu";
+	}
+	static {
+		this.properties = {
+			open: { type: Boolean },
+			defaultOpen: {
+				type: Boolean,
+				attribute: "default-open"
+			},
+			side: { type: String },
+			align: { type: String },
+			closeOnEscape: {
+				type: Boolean,
+				attribute: "close-on-escape"
+			},
+			closeOnOutsideClick: {
+				type: Boolean,
+				attribute: "close-on-outside-click"
+			},
+			boundary: { type: String }
+		};
+	}
+	#core;
+	#provider;
+	#position;
+	#containerCtx;
+	#parentCtx;
+	#menuViewTransition;
+	#menu;
+	#snapshot;
+	#navSnapshot;
+	#menuViewSnapshot;
+	#navState;
+	#disconnect;
+	#triggerAbort;
+	#currentTrigger;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.setAttribute(POPUP_HOST_ATTR, "");
+		this.#disconnect = new AbortController();
+		this.#menu = createMenu({
+			transition: createTransition(),
+			onOpenChange: (nextOpen, details) => {
+				this.open = nextOpen;
+				this.dispatchEvent(new CustomEvent("open-change", { detail: {
+					open: nextOpen,
+					...details
+				} }));
+			},
+			closeOnEscape: () => this.closeOnEscape,
+			closeOnOutsideClick: () => this.closeOnOutsideClick,
+			group: () => this.#parentCtx.value ? void 0 : this.#containerCtx.value?.popupGroup
+		});
+		this.#menu.setContentElement(this);
+		applyElementProps(this, {
+			onKeyDown: this.#handleContentKeyDown,
+			onFocusOut: this.#handleContentFocusOut
+		}, { signal: this.#disconnect.signal });
+		if (this.#snapshot) this.#snapshot.track(this.#menu.input);
+		else this.#snapshot = new SnapshotController(this, this.#menu.input);
+		if (this.#navSnapshot) this.#navSnapshot.track(this.#menu.navigationInput);
+		else this.#navSnapshot = new SnapshotController(this, this.#menu.navigationInput);
+		if (this.#menuViewSnapshot) this.#menuViewSnapshot.track(this.#menuViewTransition.input);
+		else this.#menuViewSnapshot = new SnapshotController(this, this.#menuViewTransition.input);
+	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		if (this.defaultOpen && !this.open) this.#menu?.open();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupTrigger();
+		this.#menu?.destroy();
+		this.#menu = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#menuViewTransition.destroy();
+	}
+	close(reason = "imperative-action") {
+		this.#menu?.close(reason);
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		const isSubmenu = (this.#parentCtx.value ?? null) !== null;
+		this.#core.setProps({
+			open: this.open,
+			defaultOpen: this.defaultOpen,
+			side: this.side,
+			align: this.align,
+			closeOnEscape: this.closeOnEscape,
+			closeOnOutsideClick: this.closeOnOutsideClick,
+			isSubmenu
+		});
+		if (this.#menu && changed.has("open") && !isSubmenu) {
+			const { active: interactionOpen } = this.#menu.input.current;
+			if (this.open !== interactionOpen) if (this.open) this.#menu.open();
+			else this.#menu.close();
+		}
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#menu) return;
+		const parentCtx = this.#parentCtx.value ?? null;
+		const isSubmenu = parentCtx !== null;
+		this.#navState = this.#menu.navigationInput.current;
+		const input = this.#menu.input.current;
+		this.#core.setInput(input);
+		const state = this.#core.getState();
+		if (isSubmenu && parentCtx) this.#updateAsSubmenu(parentCtx);
+		else this.#updateAsRoot(state);
+		const parentMenu = parentCtx?.menu ?? null;
+		this.#provider.setValue({
+			menu: this.#menu,
+			state,
+			stateAttrMap: MenuDataAttrs,
+			navigation: this.#navState,
+			parentMenu
+		});
+	}
+	#updateAsRoot(state) {
+		if (!this.#menu) return;
+		const triggerElement = this.#position.findTrigger();
+		this.#syncTrigger(triggerElement);
+		applyElementProps(this, {
+			...this.#core.getContentAttrs(state),
+			...getMenuViewportAttrs()
+		});
+		applyStateDataAttrs(this, state, MenuDataAttrs);
+		if (state.open) tryShowPopover(this);
+		else tryHidePopover(this);
+		if (this.#currentTrigger) {
+			applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
+			applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));
+		}
+		if (!state.open) {
+			this.#position.cleanup();
+			return;
+		}
+		syncMenuViewRoot(this, this.#navState.stack.length > 0);
+		const positionOptions = getRootPositionOptions(state.side, state.align);
+		if (!positionOptions) return;
+		const boundaryElement = this.#getBoundaryElement();
+		const triggerRect = this.#currentTrigger?.getBoundingClientRect();
+		const boundaryRect = getPositioningBoundaryRect(boundaryElement);
+		const offsets = resolveOffsets(this);
+		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, positionOptions, triggerRect, void 0, boundaryRect, offsets));
+		else {
+			const selfRect = getPopupPositionRect(this);
+			applyStyles(this, getAnchorPositionStyle(this.id, positionOptions, triggerRect, selfRect, boundaryRect, offsets));
+		}
+		this.#position.sync(this.#currentTrigger, boundaryElement);
+	}
+	#updateAsSubmenu(parentCtx) {
+		const parentNavigation = parentCtx.navigation;
+		const topEntry = parentNavigation.stack[parentNavigation.stack.length - 1];
+		const isActive = (topEntry?.menuId ?? null) === this.id;
+		this.#menuViewTransition.setElement(this);
+		this.#menuViewTransition.sync({
+			active: isActive,
+			direction: parentNavigation.direction,
+			triggerId: topEntry?.triggerId ?? null
+		});
+		const transitionState = this.#menuViewTransition.input.current;
+		applyElementProps(this, {
+			...getMenuViewTransitionAttrs(transitionState),
+			role: "menu",
+			tabIndex: -1,
+			"data-submenu": ""
+		});
+		syncMenuViewTransition(parentCtx.menu.contentElement, this, transitionState);
+	}
+	#handleContentKeyDown;
+	#handleContentFocusOut;
+	#syncTrigger(triggerElement) {
+		if (triggerElement === this.#currentTrigger) return;
+		this.#position.cleanup();
+		this.#cleanupTrigger();
+		this.#currentTrigger = triggerElement;
+		this.#menu?.setTriggerElement(triggerElement);
+		if (triggerElement && this.#menu) {
+			this.#triggerAbort = new AbortController();
+			applyElementProps(triggerElement, this.#menu.triggerProps, { signal: this.#triggerAbort.signal });
+		}
+	}
+	#cleanupTrigger() {
+		if (this.#currentTrigger) {
+			applyElementProps(this.#currentTrigger, {
+				"aria-expanded": void 0,
+				"aria-haspopup": void 0,
+				"aria-controls": void 0
+			});
+			this.#currentTrigger.style.removeProperty("anchor-name");
+		}
+		this.#triggerAbort?.abort();
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
+	}
+	#getBoundaryElement() {
+		return resolvePositioningBoundary(this.boundary, {
+			container: this.#containerCtx.value?.container ?? null,
+			root: this.getRootNode()
+		});
+	}
+};
+
+//#endregion
+//#region src/ui/menu/menu-item-indicator-element.ts
+var MenuItemIndicatorElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.forceMount = false;
+	}
+	static {
+		this.tagName = "media-menu-item-indicator";
+	}
+	static {
+		this.properties = {
+			checked: { type: Boolean },
+			forceMount: {
+				type: Boolean,
+				attribute: "force-mount"
+			}
+		};
+	}
+	update(_changed) {
+		super.update(_changed);
+		const hidden = !this.checked && !this.forceMount;
+		applyElementProps(this, {
+			"aria-hidden": "true",
+			hidden
+		});
+	}
+};
+
+//#endregion
+//#region src/ui/menu/menu-radio-group-element.ts
+var MenuRadioGroupElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.label = void 0;
+		this.#menuCtx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#provider = new ContextProvider(this, { context: menuRadioGroupContext });
+	}
+	static {
+		this.tagName = "media-menu-radio-group";
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			label: { type: String }
+		};
+	}
+	#menuCtx;
+	#provider;
+	update(_changed) {
+		super.update(_changed);
+		applyElementProps(this, {
+			role: "group",
+			"aria-label": this.label
+		});
+		const ctx = this.#menuCtx.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+		this.#provider.setValue({
+			value: this.value,
+			onValueChange: (next) => {
+				this.value = next;
+				this.dispatchEvent(new CustomEvent("value-change", {
+					detail: { value: next },
+					bubbles: true
+				}));
+			}
+		});
+	}
+};
+
+//#endregion
+//#region src/ui/menu/menu-radio-item-element.ts
+var MenuRadioItemElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.disabled = false;
+		this.#menuCtx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#groupCtx = new ContextConsumer(this, {
+			context: menuRadioGroupContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#registered = false;
+		this.#cleanupRegistration = null;
+	}
+	static {
+		this.tagName = "media-menu-radio-item";
+	}
+	static {
+		this.properties = {
+			value: { type: String },
+			disabled: { type: Boolean }
+		};
+	}
+	#menuCtx;
+	#groupCtx;
+	#disconnect;
+	#registered;
+	#cleanupRegistration;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#registered = false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#registered = false;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const menuCtx = this.#menuCtx.value;
+		const groupCtx = this.#groupCtx.value;
+		if (!menuCtx || !groupCtx || !this.#disconnect) return;
+		if (!this.#registered) {
+			this.#registered = true;
+			this.#cleanupRegistration = menuCtx.menu.registerItem(this);
+			applyElementProps(this, {
+				onClick: () => {
+					const currentMenuCtx = this.#menuCtx.value;
+					const currentGroupCtx = this.#groupCtx.value;
+					if (!currentMenuCtx || !currentGroupCtx || this.disabled) return;
+					currentGroupCtx.onValueChange(this.value);
+					completeMenuItemSelection(currentMenuCtx.menu, currentMenuCtx.parentMenu);
+				},
+				onPointerenter: () => {
+					const currentMenuCtx = this.#menuCtx.value;
+					if (!this.disabled) currentMenuCtx?.menu.highlight(this, { focus: false });
+				}
+			}, { signal: this.#disconnect.signal });
+		}
+		const checked = groupCtx.value === this.value;
+		applyElementProps(this, {
+			role: "menuitemradio",
+			"aria-checked": String(checked),
+			"aria-disabled": this.disabled ? "true" : void 0
+		});
+		applyStateDataAttrs(this, menuCtx.state, menuCtx.stateAttrMap);
+	}
+};
+
 //#endregion
 //#region src/ui/popover/popover-element.ts
 var PopoverElement = class extends MediaElement {
@@ -2941,7 +4510,12 @@ var PopoverElement = class extends MediaElement {
 		this.openOnHover = PopoverCore.defaultProps.openOnHover;
 		this.delay = PopoverCore.defaultProps.delay;
 		this.closeDelay = PopoverCore.defaultProps.closeDelay;
+		this.boundary = "container";
 		this.#core = new PopoverCore();
+		this.#containerCtx = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
 		this.#position = new PositionController(this);
 		this.#popover = null;
 		this.#snapshot = null;
@@ -2978,10 +4552,12 @@ var PopoverElement = class extends MediaElement {
 			closeDelay: {
 				type: Number,
 				attribute: "close-delay"
-			}
+			},
+			boundary: { type: String }
 		};
 	}
 	#core;
+	#containerCtx;
 	#position;
 	#popover;
 	#snapshot;
@@ -2991,6 +4567,7 @@ var PopoverElement = class extends MediaElement {
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.destroyed) return;
+		this.setAttribute(POPUP_HOST_ATTR, "");
 		this.#disconnect = new AbortController();
 		this.#popover = createPopover({
 			transition: createTransition(),
@@ -3005,7 +4582,8 @@ var PopoverElement = class extends MediaElement {
 			closeOnOutsideClick: () => this.closeOnOutsideClick,
 			openOnHover: () => this.openOnHover,
 			delay: () => this.delay,
-			closeDelay: () => this.closeDelay
+			closeDelay: () => this.closeDelay,
+			group: () => this.#containerCtx.value?.popupGroup
 		});
 		this.#popover.setPopupElement(this);
 		applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });
@@ -3026,6 +4604,9 @@ var PopoverElement = class extends MediaElement {
 		this.#popover?.destroy();
 		super.destroyCallback();
 	}
+	close(reason = "imperative-action") {
+		this.#popover?.close(reason);
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);
@@ -3059,15 +4640,16 @@ var PopoverElement = class extends MediaElement {
 			side: state.side,
 			align: state.align
 		};
-		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts));
+		const boundaryElement = this.#getBoundaryElement();
+		const triggerRect = this.#currentTrigger?.getBoundingClientRect();
+		const boundaryRect = getPositioningBoundaryRect(boundaryElement);
+		const offsets = resolveOffsets(this);
+		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, void 0, boundaryRect, offsets));
 		else {
-			const triggerRect = this.#currentTrigger?.getBoundingClientRect();
 			const selfRect = getPopupPositionRect(this);
-			const boundaryRect = document.documentElement.getBoundingClientRect();
-			const offsets = resolveOffsets(this);
 			applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));
 		}
-		this.#position.sync(this.#currentTrigger);
+		this.#position.sync(this.#currentTrigger, boundaryElement);
 	}
 	#syncTrigger(triggerEl) {
 		if (triggerEl === this.#currentTrigger) return;
@@ -3093,29 +4675,11 @@ var PopoverElement = class extends MediaElement {
 		this.#triggerAbort = null;
 		this.#currentTrigger = null;
 	}
-};
-
-//#endregion
-//#region src/ui/seek-button/seek-button-element.ts
-var SeekButtonElement = class extends MediaButtonElement {
-	constructor(..._args) {
-		super(..._args);
-		this.seconds = SeekButtonCore.defaultProps.seconds;
-		this.core = new SeekButtonCore();
-		this.stateAttrMap = SeekButtonDataAttrs;
-		this.mediaState = new PlayerController(this, playerContext, selectTime);
-	}
-	static {
-		this.tagName = "media-seek-button";
-	}
-	static {
-		this.properties = {
-			...MediaButtonElement.properties,
-			seconds: { type: Number }
-		};
-	}
-	activate(state) {
-		this.core.seek(state);
+	#getBoundaryElement() {
+		return resolvePositioningBoundary(this.boundary, {
+			container: this.#containerCtx.value?.container ?? null,
+			root: this.getRootNode()
+		});
 	}
 };
 
@@ -3140,8 +4704,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;
@@ -3170,11 +4739,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;
@@ -3184,6 +4755,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(),
@@ -3217,6 +4789,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);
@@ -3247,15 +4822,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;
@@ -3281,6 +4857,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
@@ -3383,169 +4965,644 @@ var AlertDialogCloseElement = class extends MediaElement {
 var ContextPartElement = class extends MediaElement {
 	update(_changed) {
 		super.update(_changed);
-		const ctx = this.consumer.value;
-		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+		const ctx = this.consumer.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+
+//#endregion
+//#region src/ui/alert-dialog/alert-dialog-description-element.ts
+var AlertDialogDescriptionElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: alertDialogContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-alert-dialog-description";
+	}
+	update(changed) {
+		super.update(changed);
+		const descriptionId = this.consumer.value?.state.descriptionId;
+		if (descriptionId) this.id = descriptionId;
+	}
+};
+
+//#endregion
+//#region src/ui/alert-dialog/alert-dialog-title-element.ts
+var AlertDialogTitleElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: alertDialogContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-alert-dialog-title";
+	}
+	update(changed) {
+		super.update(changed);
+		const titleId = this.consumer.value?.state.titleId;
+		if (titleId) this.id = titleId;
+	}
+};
+
+//#endregion
+//#region src/ui/controls/context.ts
+const CONTROLS_CONTEXT_KEY = Symbol("@videojs/controls");
+const controlsContext = createContext(CONTROLS_CONTEXT_KEY);
+
+//#endregion
+//#region src/ui/controls/controls-element.ts
+var ControlsElement = class extends MediaElement {
+	static {
+		this.tagName = "media-controls";
+	}
+	#core = new ControlsCore();
+	#mediaState = new PlayerController(this, playerContext, selectControls);
+	#provider = new ContextProvider(this, { context: controlsContext });
+	#visible = true;
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.#mediaState.value && this.#mediaState.displayName) logMissingFeature(this.localName, this.#mediaState.displayName);
+	}
+	update(_changed) {
+		super.update(_changed);
+		const media = this.#mediaState.value;
+		if (!media) return;
+		this.#core.setMedia(media);
+		const state = this.#core.getState();
+		applyStateDataAttrs(this, state, ControlsDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: ControlsDataAttrs
+		});
+		const wasVisible = this.#visible;
+		this.#visible = state.visible;
+		if (wasVisible && !state.visible) this.#closeOwnedOverlays();
+	}
+	#closeOwnedOverlays() {
+		for (const element of this.querySelectorAll(POPUP_HOST_SELECTOR)) {
+			const host = element;
+			if (!isFunction(host.close)) continue;
+			host.close("imperative-action");
+		}
+	}
+};
+
+//#endregion
+//#region src/ui/controls/controls-group-element.ts
+var ControlsGroupElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: controlsContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-controls-group";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) this.setAttribute("role", "group");
+	}
+};
+
+//#endregion
+//#region src/ui/error-dialog/error-dialog-element.ts
+const FALLBACK_MESSAGE = "An error occurred. Please try again.";
+let idCounter = 0;
+var ErrorDialogElement = class extends MediaElement {
+	static {
+		this.tagName = "media-error-dialog";
+	}
+	#core = new ErrorDialogCore();
+	#provider = new ContextProvider(this, { context: alertDialogContext });
+	#titleId = `vjs-error-dialog-title-${idCounter++}`;
+	#descriptionId = `vjs-error-dialog-desc-${idCounter++}`;
+	#errorState = new PlayerController(this, playerContext, selectError);
+	#dialog = null;
+	#snapshot = null;
+	#lastErrorMessage = null;
+	constructor() {
+		super();
+		this.#core.setTitleId(this.#titleId);
+		this.#core.setDescriptionId(this.#descriptionId);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#dialog = createAlertDialog({
+			transition: createTransition(),
+			onOpenChange: (nextOpen) => {
+				if (!nextOpen) this.#errorState.value?.dismissError();
+			}
+		});
+		this.#dialog.setElement(this);
+		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
+		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#dialog?.destroy();
+		this.#dialog = null;
+	}
+	willUpdate(_changed) {
+		super.willUpdate(_changed);
+		if (!this.#dialog) return;
+		const errorState = this.#errorState.value;
+		const hasError = Boolean(errorState?.error);
+		const { active: isOpen } = this.#dialog.input.current;
+		if (errorState?.error) {
+			const message = errorState.error.message?.trim();
+			this.#lastErrorMessage = message || null;
+		}
+		const desc = this.querySelector("media-alert-dialog-description");
+		if (desc) desc.textContent = this.#lastErrorMessage ?? FALLBACK_MESSAGE;
+		if (hasError && !isOpen) this.#dialog.open();
+		else if (!hasError && isOpen) this.#dialog.close();
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#dialog) return;
+		const input = this.#dialog.input.current;
+		this.#core.setInput(input);
+		const state = this.#core.getState();
+		applyElementProps(this, this.#core.getAttrs(state));
+		applyStateDataAttrs(this, state, AlertDialogDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: AlertDialogDataAttrs,
+			close: () => this.#dialog?.close()
+		});
+	}
+};
+
+//#endregion
+//#region src/ui/menu/menu-back-element.ts
+var MenuBackElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "Back";
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#bound = false;
+	}
+	static {
+		this.tagName = "media-menu-back";
+	}
+	static {
+		this.properties = { label: { type: String } };
+	}
+	#ctx;
+	#disconnect;
+	#bound;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#bound = false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#bound = false;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx || !this.#disconnect) return;
+		if (!this.#bound) {
+			this.#bound = true;
+			applyElementProps(this, { onClick: () => {
+				ctx.parentMenu?.pop();
+			} }, { signal: this.#disconnect.signal });
+		}
+		applyElementProps(this, {
+			role: "button",
+			"aria-label": this.label
+		});
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+
+//#endregion
+//#region src/ui/menu/menu-checkbox-item-element.ts
+var MenuCheckboxItemElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.disabled = false;
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#registered = false;
+		this.#cleanupRegistration = null;
+	}
+	static {
+		this.tagName = "media-menu-checkbox-item";
+	}
+	static {
+		this.properties = {
+			checked: { type: Boolean },
+			disabled: { type: Boolean }
+		};
+	}
+	#ctx;
+	#disconnect;
+	#registered;
+	#cleanupRegistration;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#registered = false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#registered = false;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx || !this.#disconnect) return;
+		if (!this.#registered) {
+			this.#registered = true;
+			this.#cleanupRegistration = ctx.menu.registerItem(this);
+			applyElementProps(this, {
+				onClick: () => {
+					if (!this.#ctx.value || this.disabled) return;
+					this.checked = !this.checked;
+					this.dispatchEvent(new CustomEvent("checked-change", {
+						detail: { checked: this.checked },
+						bubbles: true
+					}));
+				},
+				onPointerenter: () => {
+					const currentCtx = this.#ctx.value;
+					if (!this.disabled) currentCtx?.menu.highlight(this, { focus: false });
+				}
+			}, { signal: this.#disconnect.signal });
+		}
+		applyElementProps(this, {
+			role: "menuitemcheckbox",
+			"aria-checked": String(this.checked),
+			"aria-disabled": this.disabled ? "true" : void 0
+		});
+		applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+
+//#endregion
+//#region src/ui/menu/menu-group-element.ts
+var MenuGroupElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = void 0;
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-menu-group";
+	}
+	static {
+		this.properties = { label: { type: String } };
+	}
+	#ctx;
+	update(_changed) {
+		super.update(_changed);
+		applyElementProps(this, {
+			role: "group",
+			"aria-label": this.label
+		});
+		const ctx = this.#ctx.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+
+//#endregion
+//#region src/ui/menu/menu-item-element.ts
+var MenuItemElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.commandfor = void 0;
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#registered = false;
+		this.#cleanupRegistration = null;
+	}
+	static {
+		this.tagName = "media-menu-item";
+	}
+	static {
+		this.properties = {
+			disabled: { type: Boolean },
+			commandfor: { type: String }
+		};
+	}
+	#ctx;
+	#disconnect;
+	#registered;
+	#cleanupRegistration;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#registered = false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#registered = false;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx || !this.#disconnect) return;
+		if (!this.#registered) {
+			this.#registered = true;
+			this.#cleanupRegistration = ctx.menu.registerItem(this);
+			applyElementProps(this, {
+				onClick: (event) => {
+					const currentCtx = this.#ctx.value;
+					if (!currentCtx || this.disabled) return;
+					const target = this.commandfor;
+					if (target) currentCtx.menu.push(target, this.id);
+					else {
+						this.dispatchEvent(new CustomEvent("select", { bubbles: true }));
+						completeMenuItemSelection(currentCtx.menu, currentCtx.parentMenu);
+					}
+					event.preventDefault();
+				},
+				onKeyDown: (event) => {
+					const currentCtx = this.#ctx.value;
+					if (!currentCtx || this.disabled || event.key !== "ArrowRight") return;
+					const target = this.commandfor;
+					if (!target) return;
+					currentCtx.menu.push(target, this.id);
+					event.preventDefault();
+				},
+				onPointerenter: () => {
+					const currentCtx = this.#ctx.value;
+					if (!this.disabled) currentCtx?.menu.highlight(this, { focus: false });
+				}
+			}, { signal: this.#disconnect.signal });
+		}
+		const hasSubmenu = Boolean(this.commandfor);
+		const activeSubMenuId = ctx.navigation.stack[ctx.navigation.stack.length - 1]?.menuId ?? null;
+		const isExpanded = hasSubmenu ? activeSubMenuId === this.commandfor : void 0;
+		applyElementProps(this, {
+			role: "menuitem",
+			"aria-disabled": this.disabled ? "true" : void 0,
+			...hasSubmenu && {
+				"aria-haspopup": "menu",
+				"aria-expanded": isExpanded ? "true" : "false",
+				"data-has-submenu": ""
+			}
+		});
+		applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
 	}
 };
 
 //#endregion
-//#region src/ui/alert-dialog/alert-dialog-description-element.ts
-var AlertDialogDescriptionElement = class extends ContextPartElement {
+//#region src/ui/menu/menu-label-element.ts
+var MenuLabelElement = class extends ContextPartElement {
 	constructor(..._args) {
 		super(..._args);
 		this.consumer = new ContextConsumer(this, {
-			context: alertDialogContext,
+			context: menuContext,
 			subscribe: true
 		});
 	}
 	static {
-		this.tagName = "media-alert-dialog-description";
-	}
-	update(changed) {
-		super.update(changed);
-		const descriptionId = this.consumer.value?.state.descriptionId;
-		if (descriptionId) this.id = descriptionId;
+		this.tagName = "media-menu-label";
 	}
 };
 
 //#endregion
-//#region src/ui/alert-dialog/alert-dialog-title-element.ts
-var AlertDialogTitleElement = class extends ContextPartElement {
-	constructor(..._args) {
-		super(..._args);
-		this.consumer = new ContextConsumer(this, {
-			context: alertDialogContext,
-			subscribe: true
-		});
-	}
+//#region src/ui/menu/menu-separator-element.ts
+var MenuSeparatorElement = class extends MediaElement {
 	static {
-		this.tagName = "media-alert-dialog-title";
+		this.tagName = "media-menu-separator";
 	}
-	update(changed) {
-		super.update(changed);
-		const titleId = this.consumer.value?.state.titleId;
-		if (titleId) this.id = titleId;
+	#ctx = new ContextConsumer(this, {
+		context: menuContext,
+		subscribe: true
+	});
+	update(_changed) {
+		super.update(_changed);
+		applyElementProps(this, { role: "separator" });
+		const ctx = this.#ctx.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
 	}
 };
 
 //#endregion
-//#region src/ui/controls/context.ts
-const CONTROLS_CONTEXT_KEY = Symbol("@videojs/controls");
-const controlsContext = createContext(CONTROLS_CONTEXT_KEY);
-
-//#endregion
-//#region src/ui/controls/controls-element.ts
-var ControlsElement = class extends MediaElement {
+//#region src/ui/menu/menu-view-element.ts
+var MenuViewElement = class extends MediaElement {
 	static {
-		this.tagName = "media-controls";
-	}
-	#core = new ControlsCore();
-	#mediaState = new PlayerController(this, playerContext, selectControls);
-	#provider = new ContextProvider(this, { context: controlsContext });
-	connectedCallback() {
-		super.connectedCallback();
-		if (!this.#mediaState.value && this.#mediaState.displayName) logMissingFeature(this.localName, this.#mediaState.displayName);
+		this.tagName = "media-menu-view";
 	}
-	update(_changed) {
-		super.update(_changed);
-		const media = this.#mediaState.value;
-		if (!media) return;
-		this.#core.setMedia(media);
-		const state = this.#core.getState();
-		applyStateDataAttrs(this, state, ControlsDataAttrs);
-		this.#provider.setValue({
-			state,
-			stateAttrMap: ControlsDataAttrs
-		});
+	update(changed) {
+		super.update(changed);
+		applyElementProps(this, getMenuRootViewAttrs());
 	}
 };
 
 //#endregion
-//#region src/ui/controls/controls-group-element.ts
-var ControlsGroupElement = class extends ContextPartElement {
+//#region src/ui/input-indicators/input-indicator-element.ts
+var InputIndicatorElement = class extends MediaElement {
 	constructor(..._args) {
 		super(..._args);
-		this.consumer = new ContextConsumer(this, {
-			context: controlsContext,
+		this.player = new PlayerController(this, playerContext);
+		this.container = new ContextConsumer(this, {
+			context: containerContext,
+			callback: () => this.#reconnect(),
 			subscribe: true
 		});
+		this.#disconnect = null;
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		this.#visibilityHandle = null;
+		this.#lastGeneration = 0;
+		this.#snapshot = null;
 	}
-	static {
-		this.tagName = "media-controls-group";
+	#disconnect;
+	#inputActionUnsubscribe;
+	#visibilityUnsubscribe;
+	#visibilityHandle;
+	#lastGeneration;
+	#snapshot;
+	#getVisibilityHandle() {
+		return this.#visibilityHandle ??= { close: () => this.core.close() };
+	}
+	#payloadSnapshot() {
+		return this.#snapshot ?? this.core.state.current;
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		if (this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) this.setAttribute("role", "group");
+		if (this.destroyed) return;
+		this.#snapshot = this.core.state.current;
+		this.#disconnect = new AbortController();
+		this.core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.transition.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
+		this.hidden = true;
+		this.#reconnect();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	destroyCallback() {
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.core.destroy();
+		this.transition.destroy();
+		this.liveIndicator.remove();
+		super.destroyCallback();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.syncCoreProps();
+	}
+	update(changed) {
+		super.update(changed);
+		this.#syncTransition();
+		const currentState = this.core.state.current;
+		const transitionState = this.transition.state.current;
+		if (!isIndicatorPresent(currentState, transitionState)) {
+			this.liveIndicator.remove();
+			return;
+		}
+		const state = getRenderedIndicatorState(currentState, this.#payloadSnapshot(), transitionState);
+		this.liveIndicator.render(state);
+	}
+	#syncTransition() {
+		const currentState = this.core.state.current;
+		if (currentState.open) {
+			this.#snapshot = currentState;
+			if (this.#lastGeneration !== currentState.generation) {
+				this.#lastGeneration = currentState.generation;
+				this.transition.open();
+			}
+			return;
+		}
+		const { active, status } = this.transition.state.current;
+		if (active && status !== "ending") this.transition.close(this.liveIndicator.element);
+	}
+	#reconnect() {
+		this.#inputActionUnsubscribe?.();
+		this.#visibilityUnsubscribe?.();
+		this.#inputActionUnsubscribe = null;
+		this.#visibilityUnsubscribe = null;
+		const container = this.container.value?.container;
+		if (!container) return;
+		const visibility = getIndicatorVisibilityCoordinator(container);
+		const visibilityHandle = this.#getVisibilityHandle();
+		this.#visibilityUnsubscribe = visibility.register(visibilityHandle);
+		this.#inputActionUnsubscribe = subscribeToInputActions(container, (event) => {
+			if (this.core.processEvent(event, getMediaSnapshot(this.player.value))) visibility.show(visibilityHandle);
+		});
 	}
 };
 
 //#endregion
-//#region src/ui/error-dialog/error-dialog-element.ts
-const FALLBACK_MESSAGE = "An error occurred. Please try again.";
-let idCounter = 0;
-var ErrorDialogElement = class extends MediaElement {
+//#region src/ui/input-indicators/live-indicator.ts
+var LiveIndicator = class {
+	#host;
+	#dataAttrs;
+	#render;
+	constructor(options) {
+		this.#host = options.host;
+		this.#dataAttrs = options.dataAttrs;
+		this.#render = options.render;
+	}
+	get element() {
+		return this.#host;
+	}
+	render(state) {
+		this.#host.hidden = false;
+		applyStateDataAttrs(this.#host, state, this.#dataAttrs);
+		this.#render(this.#host, state);
+		return this.#host;
+	}
+	remove() {
+		this.#host.hidden = true;
+		for (const key in this.#dataAttrs) {
+			const name = this.#dataAttrs[key];
+			if (name) this.#host.removeAttribute(name);
+		}
+	}
+};
+
+//#endregion
+//#region src/ui/seek-indicator/seek-indicator-element.ts
+var SeekIndicatorElement = class extends InputIndicatorElement {
 	static {
-		this.tagName = "media-error-dialog";
+		this.tagName = "media-seek-indicator";
 	}
-	#core = new ErrorDialogCore();
-	#provider = new ContextProvider(this, { context: alertDialogContext });
-	#titleId = `vjs-error-dialog-title-${idCounter++}`;
-	#descriptionId = `vjs-error-dialog-desc-${idCounter++}`;
-	#errorState = new PlayerController(this, playerContext, selectError);
-	#dialog = null;
-	#snapshot = null;
-	#lastErrorMessage = null;
-	constructor() {
-		super();
-		this.#core.setTitleId(this.#titleId);
-		this.#core.setDescriptionId(this.#descriptionId);
+	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;
 	}
-	connectedCallback() {
-		super.connectedCallback();
-		if (this.destroyed) return;
-		this.#dialog = createAlertDialog({
-			transition: createTransition(),
-			onOpenChange: (nextOpen) => {
-				if (!nextOpen) this.#errorState.value?.dismissError();
-			}
-		});
-		this.#dialog.setElement(this);
-		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
-		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+	get transition() {
+		return this.#transition;
 	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#dialog?.destroy();
-		this.#dialog = null;
+	get liveIndicator() {
+		return this.#liveIndicator;
 	}
-	willUpdate(_changed) {
-		super.willUpdate(_changed);
-		if (!this.#dialog) return;
-		const errorState = this.#errorState.value;
-		const hasError = Boolean(errorState?.error);
-		const { active: isOpen } = this.#dialog.input.current;
-		if (errorState?.error) {
-			const message = errorState.error.message?.trim();
-			this.#lastErrorMessage = message || null;
-		}
-		const desc = this.querySelector("media-alert-dialog-description");
-		if (desc) desc.textContent = this.#lastErrorMessage ?? FALLBACK_MESSAGE;
-		if (hasError && !isOpen) this.#dialog.open();
-		else if (!hasError && isOpen) this.#dialog.close();
+	syncCoreProps() {
+		this.#core.setProps({ closeDelay: this.closeDelay });
 	}
-	update(_changed) {
-		super.update(_changed);
-		if (!this.#dialog) return;
-		const input = this.#dialog.input.current;
-		this.#core.setInput(input);
-		const state = this.#core.getState();
-		applyElementProps(this, this.#core.getAttrs(state));
-		applyStateDataAttrs(this, state, AlertDialogDataAttrs);
-		this.#provider.setValue({
-			state,
-			stateAttrMap: AlertDialogDataAttrs,
-			close: () => this.#dialog?.close()
-		});
+};
+function renderSeekIndicator(element, state) {
+	const value = element.querySelector("media-seek-indicator-value");
+	if (!value) return;
+	value.textContent = getSeekIndicatorDisplayValue(state);
+}
+
+//#endregion
+//#region src/ui/seek-indicator/seek-indicator-value-element.ts
+var SeekIndicatorValueElement = class extends MediaElement {
+	static {
+		this.tagName = "media-seek-indicator-value";
 	}
 };
 
@@ -3866,6 +5923,123 @@ var SliderValueElement = class extends MediaElement {
 	}
 };
 
+//#endregion
+//#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
+//#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
+//#region src/ui/status-indicator/status-indicator-value-element.ts
+var StatusIndicatorValueElement = class extends MediaElement {
+	static {
+		this.tagName = "media-status-indicator-value";
+	}
+};
+
 //#endregion
 //#region src/ui/time/time-element.ts
 var TimeElement = class extends MediaElement {
@@ -4073,6 +6247,62 @@ var TimeSliderElement = class extends MediaElement {
 	}
 };
 
+//#endregion
+//#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
+//#region src/ui/volume-indicator/volume-indicator-fill-element.ts
+var VolumeIndicatorFillElement = class extends MediaElement {
+	static {
+		this.tagName = "media-volume-indicator-fill";
+	}
+};
+
+//#endregion
+//#region src/ui/volume-indicator/volume-indicator-value-element.ts
+var VolumeIndicatorValueElement = class extends MediaElement {
+	static {
+		this.tagName = "media-volume-indicator-value";
+	}
+};
+
 //#endregion
 //#region src/ui/volume-slider/volume-slider-element.ts
 var VolumeSliderElement = class extends MediaElement {
@@ -4200,6 +6430,19 @@ var VolumeSliderElement = class extends MediaElement {
 
 //#endregion
 //#region src/define/ui/compounds.ts
+function defineMenu() {
+	safeDefine(MenuElement);
+	safeDefine(MenuBackElement);
+	safeDefine(MenuItemElement);
+	safeDefine(MenuLabelElement);
+	safeDefine(MenuSeparatorElement);
+	safeDefine(MenuGroupElement);
+	safeDefine(MenuRadioGroupElement);
+	safeDefine(MenuRadioItemElement);
+	safeDefine(MenuCheckboxItemElement);
+	safeDefine(MenuItemIndicatorElement);
+	safeDefine(MenuViewElement);
+}
 function defineControls() {
 	safeDefine(ControlsElement);
 	safeDefine(ControlsGroupElement);
@@ -4210,6 +6453,16 @@ function defineErrorDialog() {
 	safeDefine(AlertDialogDescriptionElement);
 	safeDefine(AlertDialogTitleElement);
 }
+function defineInputIndicators() {
+	safeDefine(StatusAnnouncerElement);
+	safeDefine(StatusIndicatorElement);
+	safeDefine(StatusIndicatorValueElement);
+	safeDefine(VolumeIndicatorElement);
+	safeDefine(VolumeIndicatorFillElement);
+	safeDefine(VolumeIndicatorValueElement);
+	safeDefine(SeekIndicatorElement);
+	safeDefine(SeekIndicatorValueElement);
+}
 /** Shared slider sub-elements used by all slider types. */
 function defineSliderParts() {
 	safeDefine(SliderFillElement);
@@ -4235,5 +6488,5 @@ function defineVolumeSlider() {
 }
 
 //#endregion
-export { selectTime as C, selectTextTrack as S, defaults as T, selectFullscreen as _, defineVolumeSlider as a, selectPlaybackRate as b, SeekButtonElement as c, PlayButtonElement as d, MuteButtonElement as f, createHotkey as g, logMissingFeature as h, defineTimeSlider as i, PopoverElement as l, applyStateDataAttrs as m, defineErrorDialog as n, TooltipGroupElement as o, MediaButtonElement as p, defineTime as r, TooltipElement as s, defineControls as t, PlaybackRateButtonElement as u, selectPiP as v, selectVolume as w, selectRemotePlayback as x, selectPlayback as y };
-//# sourceMappingURL=compounds-BHHGcL_P.js.map
+export { selectTextTrack as A, selectBuffer as C, selectPlayback as D, selectPiP as E, selectVolume as M, defaults as N, selectPlaybackRate as O, createHotkey as S, selectLive as T, MediaButtonElement as _, defineTime as a, applyElementProps as b, TooltipGroupElement as c, MenuRadioItemElement as d, MenuRadioGroupElement as f, MuteButtonElement as g, PlayButtonElement as h, defineMenu as i, selectTime as j, selectRemotePlayback as k, TooltipElement as l, MenuElement as m, defineErrorDialog as n, defineTimeSlider as o, MenuItemIndicatorElement as p, defineInputIndicators as r, defineVolumeSlider as s, defineControls as t, PopoverElement as u, applyStateDataAttrs as v, selectFullscreen as w, createButton as x, logMissingFeature as y };
+//# sourceMappingURL=compounds-DxdDY3jr.js.map