@vizejs/ui 0.426.2 → 0.427.0

package/dist/media-player-volume-slider-DCtrE4IQ.mjs

@@ -0,0 +1,1355 @@
+import { a as useDeterministicId, n as deriveDeterministicId } from "./deterministic-id-bMmJU5xD.mjs";
+import { createContext } from "./context.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderSlot, shallowRef, toDisplayString, unref, useTemplateRef, watch } from "vue";
+//#region src/families/media/media-player/media-player-context.ts
+const mediaPlayerContext = createContext("MediaPlayer");
+//#endregion
+//#region src/families/media/media-player/media-player-format.ts
+/** English defaults for {@link MediaPlayerMessages}. */
+const mediaPlayerDefaultMessages = Object.freeze({
+	play: "Play",
+	pause: "Pause",
+	replay: "Replay",
+	mute: "Mute",
+	unmute: "Unmute",
+	seek: "Seek",
+	volume: "Volume",
+	seekValueText: (current, duration) => `${current} of ${duration}`,
+	volumeValueText: (percent, muted) => muted ? "Muted" : `${percent}%`,
+	showCaptions: "Show captions",
+	hideCaptions: "Hide captions",
+	playbackRate: (rate) => `Playback speed ${rate}×`,
+	enterFullscreen: "Enter fullscreen",
+	exitFullscreen: "Exit fullscreen",
+	enterPictureInPicture: "Enter picture-in-picture",
+	exitPictureInPicture: "Exit picture-in-picture",
+	loading: "Loading"
+});
+/** Playback rates cycled by MediaPlayerPlaybackRateButton by default. */
+const MEDIA_PLAYER_DEFAULT_RATES = Object.freeze([
+	.5,
+	1,
+	1.25,
+	1.5,
+	2
+]);
+/** Merge consumer messages over the English defaults. */
+function resolveMediaPlayerMessages(messages) {
+	const defaults = mediaPlayerDefaultMessages;
+	if (messages === void 0) return defaults;
+	return Object.freeze({
+		play: messages.play ?? defaults.play,
+		pause: messages.pause ?? defaults.pause,
+		replay: messages.replay ?? defaults.replay,
+		mute: messages.mute ?? defaults.mute,
+		unmute: messages.unmute ?? defaults.unmute,
+		seek: messages.seek ?? defaults.seek,
+		volume: messages.volume ?? defaults.volume,
+		seekValueText: messages.seekValueText ?? defaults.seekValueText,
+		volumeValueText: messages.volumeValueText ?? defaults.volumeValueText,
+		showCaptions: messages.showCaptions ?? defaults.showCaptions,
+		hideCaptions: messages.hideCaptions ?? defaults.hideCaptions,
+		playbackRate: messages.playbackRate ?? defaults.playbackRate,
+		enterFullscreen: messages.enterFullscreen ?? defaults.enterFullscreen,
+		exitFullscreen: messages.exitFullscreen ?? defaults.exitFullscreen,
+		enterPictureInPicture: messages.enterPictureInPicture ?? defaults.enterPictureInPicture,
+		exitPictureInPicture: messages.exitPictureInPicture ?? defaults.exitPictureInPicture,
+		loading: messages.loading ?? defaults.loading
+	});
+}
+/** Clamp a number into `[min, max]`, mapping non-finite input to `min`. */
+function clampMediaValue(value, min, max) {
+	if (Number.isNaN(value)) return min;
+	return Math.min(max, Math.max(min, value));
+}
+/** Normalize a native duration: `NaN` and negatives become `0`, live streams stay `Infinity`. */
+function normalizeMediaDuration(duration) {
+	if (duration === Number.POSITIVE_INFINITY) return duration;
+	return Number.isFinite(duration) && duration > 0 ? duration : 0;
+}
+/**
+* Format seconds as `m:ss` or `h:mm:ss`. The hour field appears when either the
+* value or `reference` (usually the duration) reaches one hour, so current and
+* total times align. Negative values render with a leading minus sign; unknown
+* or infinite values render as `--:--`.
+*/
+function formatMediaTime(seconds, reference = seconds) {
+	if (!Number.isFinite(seconds)) return "--:--";
+	const negative = seconds < 0;
+	const total = Math.floor(Math.abs(seconds));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const secs = total % 60;
+	const body = hours > 0 || Number.isFinite(reference) && Math.abs(reference) >= 3600 ? `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}` : `${minutes}:${String(secs).padStart(2, "0")}`;
+	return negative ? `-${body}` : body;
+}
+/** Copy a native `TimeRanges` object into immutable plain ranges. */
+function readTimeRanges(ranges) {
+	const result = [];
+	if (ranges === null || ranges === void 0) return result;
+	for (let index = 0; index < ranges.length; index += 1) result.push(Object.freeze({
+		start: ranges.start(index),
+		end: ranges.end(index)
+	}));
+	return result;
+}
+/** End of the buffered range that contains `time`, or `time` when none does. */
+function bufferedEnd(ranges, time) {
+	for (const range of ranges) if (time >= range.start && time <= range.end) return range.end;
+	return time;
+}
+/** Whether a text track can be toggled as captions. */
+function isCaptionTrack(track) {
+	return track.kind === "captions" || track.kind === "subtitles";
+}
+/** Whether a keyboard event target edits text, so shortcuts must not steal its keys. */
+function isEditableTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable) return true;
+	if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) return true;
+	if (!(target instanceof HTMLInputElement)) return false;
+	return ![
+		"button",
+		"checkbox",
+		"color",
+		"file",
+		"image",
+		"radio",
+		"range",
+		"reset",
+		"submit"
+	].includes(target.type);
+}
+/**
+* Resolve a keydown into a media shortcut, or `null` when the key is not a
+* shortcut. Modified keys (Ctrl, Meta, Alt) are never shortcuts.
+*
+* Space/K toggle play, J/L skip ±10 s, ←/→ seek ±5 s, ↑/↓ change volume, M
+* mutes, F toggles fullscreen, C toggles captions, and 0–9 seek to 0–90 %.
+*/
+function resolveMediaShortcut(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey) return null;
+	const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
+	switch (key) {
+		case " ":
+		case "k": return { action: "toggle-play" };
+		case "j": return { action: "skip-backward" };
+		case "l": return { action: "skip-forward" };
+		case "ArrowLeft": return { action: "seek-backward" };
+		case "ArrowRight": return { action: "seek-forward" };
+		case "ArrowUp": return { action: "volume-up" };
+		case "ArrowDown": return { action: "volume-down" };
+		case "m": return { action: "mute" };
+		case "f": return { action: "fullscreen" };
+		case "c": return { action: "captions" };
+		default:
+			if (/^[0-9]$/.test(key)) return {
+				action: "seek-percent",
+				percent: Number(key) * 10
+			};
+			return null;
+	}
+}
+/** Horizontal pointer fraction in reading direction, clamped to `[0, 1]`. */
+function pointerRatio(rect, clientX, rtl) {
+	const ratio = clampMediaValue(rect.width > 0 ? (clientX - rect.left) / rect.width : 0, 0, 1);
+	return rtl ? 1 - ratio : ratio;
+}
+/** Percentage (`0`–`100`, two decimals) of `value` within `[0, max]`. */
+function toPercent(value, max) {
+	if (!(max > 0) || !Number.isFinite(max)) return 0;
+	return Math.round(clampMediaValue(value / max, 0, 1) * 1e4) / 100;
+}
+/**
+* Resolve a slider keydown. Arrow keys step (horizontal arrows invert in RTL),
+* Page Up/Down page, and Home/End jump to the edges. Other keys return `null`.
+*/
+function resolveSliderKey(key, rtl) {
+	const forward = rtl ? -1 : 1;
+	switch (key) {
+		case "ArrowRight": return {
+			kind: "step",
+			sign: forward
+		};
+		case "ArrowLeft": return {
+			kind: "step",
+			sign: forward === 1 ? -1 : 1
+		};
+		case "ArrowUp": return {
+			kind: "step",
+			sign: 1
+		};
+		case "ArrowDown": return {
+			kind: "step",
+			sign: -1
+		};
+		case "PageUp": return {
+			kind: "page",
+			sign: 1
+		};
+		case "PageDown": return {
+			kind: "page",
+			sign: -1
+		};
+		case "Home": return {
+			kind: "edge",
+			edge: "min"
+		};
+		case "End": return {
+			kind: "edge",
+			edge: "max"
+		};
+		default: return null;
+	}
+}
+/** Capture a pointer, ignoring platforms or pointers that cannot be captured. */
+function captureMediaPointer(element, pointerId) {
+	try {
+		element.setPointerCapture(pointerId);
+	} catch {}
+}
+/** Release a captured pointer, ignoring pointers that are no longer captured. */
+function releaseMediaPointer(element, pointerId) {
+	try {
+		if (element.hasPointerCapture(pointerId)) element.releasePointerCapture(pointerId);
+	} catch {}
+}
+//#endregion
+//#region src/families/media/media-player/media-player-captions-button.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$8 = [
+	"disabled",
+	"aria-label",
+	"aria-controls",
+	"data-state",
+	"data-captions"
+];
+//#endregion
+//#region src/families/media/media-player/media-player-captions-button.vue
+var media_player_captions_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "media-player-captions-button",
+	props: { ariaLabel: {
+		type: [String, null],
+		required: false,
+		default: () => void 0
+	} },
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = mediaPlayerContext.use();
+		const element = useTemplateRef("element");
+		const disabled = computed(() => context.slotState.value.textTracks.every((track) => !isCaptionTrack(track)));
+		const defaultLabel = computed(() => context.slotState.value.captionTrack >= 0 ? context.messages.value.hideCaptions : context.messages.value.showCaptions);
+		const label = computed(() => __props.ariaLabel === void 0 ? defaultLabel.value : __props.ariaLabel ?? void 0);
+		function onClick(event) {
+			emit("click", event);
+			if (event.defaultPrevented || disabled.value) return;
+			context.toggleCaptions();
+		}
+		__expose({
+			disabled,
+			element
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				ref_key: "element",
+				ref: element,
+				type: "button",
+				disabled: disabled.value,
+				"aria-label": label.value,
+				"aria-controls": unref(context).media.value?.id || void 0,
+				"data-vize-ui": "media-player-captions-button",
+				part: "captions-button",
+				"data-state": unref(context).state.value,
+				"data-captions": unref(context).slotState.value.captionTrack >= 0 ? "true" : void 0,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context).slotState.value)), void 0, true)], 8, _hoisted_1$8);
+		};
+	}
+}), [["__scopeId", "data-v-73238ef6"]]);
+//#endregion
+//#region src/families/media/media-player/media-player-loading-indicator.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$7 = ["data-loading"];
+//#endregion
+//#region src/families/media/media-player/media-player-loading-indicator.vue
+var media_player_loading_indicator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "media-player-loading-indicator",
+	setup(__props) {
+		const context = mediaPlayerContext.use();
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				role: "status",
+				"data-vize-ui": "media-player-loading-indicator",
+				part: "loading-indicator",
+				"data-loading": unref(context).slotState.value.loading ? "true" : void 0
+			}, [unref(context).slotState.value.loading ? renderSlot(_ctx.$slots, "default", normalizeProps(mergeProps({ key: 0 }, unref(context).slotState.value)), () => [createTextVNode(toDisplayString(unref(context).messages.value.loading), 1)], true) : createCommentVNode("v-if", true)], 8, _hoisted_1$7);
+		};
+	}
+}), [["__scopeId", "data-v-488639f3"]]);
+//#endregion
+//#region src/families/media/media-player/media-player-mute-button.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$6 = [
+	"disabled",
+	"aria-label",
+	"aria-controls",
+	"data-state",
+	"data-muted"
+];
+//#endregion
+//#region src/families/media/media-player/media-player-mute-button.vue
+var media_player_mute_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "media-player-mute-button",
+	props: { ariaLabel: {
+		type: [String, null],
+		required: false,
+		default: () => void 0
+	} },
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = mediaPlayerContext.use();
+		const element = useTemplateRef("element");
+		const disabled = computed(() => context.media.value === null);
+		const defaultLabel = computed(() => context.muted.value ? context.messages.value.unmute : context.messages.value.mute);
+		const label = computed(() => __props.ariaLabel === void 0 ? defaultLabel.value : __props.ariaLabel ?? void 0);
+		function onClick(event) {
+			emit("click", event);
+			if (event.defaultPrevented || disabled.value) return;
+			context.setMuted(!context.muted.value);
+		}
+		__expose({
+			disabled,
+			element
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				ref_key: "element",
+				ref: element,
+				type: "button",
+				disabled: disabled.value,
+				"aria-label": label.value,
+				"aria-controls": unref(context).media.value?.id || void 0,
+				"data-vize-ui": "media-player-mute-button",
+				part: "mute-button",
+				"data-state": unref(context).state.value,
+				"data-muted": unref(context).muted.value ? "true" : void 0,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context).slotState.value)), void 0, true)], 8, _hoisted_1$6);
+		};
+	}
+}), [["__scopeId", "data-v-0b82b15b"]]);
+//#endregion
+//#region src/families/media/media-player/media-player-play-button.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$5 = [
+	"disabled",
+	"aria-label",
+	"aria-controls",
+	"data-state"
+];
+//#endregion
+//#region src/families/media/media-player/media-player-play-button.vue
+var media_player_play_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "media-player-play-button",
+	props: { ariaLabel: {
+		type: [String, null],
+		required: false,
+		default: () => void 0
+	} },
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = mediaPlayerContext.use();
+		const element = useTemplateRef("element");
+		const disabled = computed(() => context.media.value === null);
+		const defaultLabel = computed(() => context.state.value === "playing" ? context.messages.value.pause : context.state.value === "ended" ? context.messages.value.replay : context.messages.value.play);
+		const label = computed(() => __props.ariaLabel === void 0 ? defaultLabel.value : __props.ariaLabel ?? void 0);
+		function onClick(event) {
+			emit("click", event);
+			if (event.defaultPrevented || disabled.value) return;
+			context.togglePlay();
+		}
+		__expose({
+			disabled,
+			element
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				ref_key: "element",
+				ref: element,
+				type: "button",
+				disabled: disabled.value,
+				"aria-label": label.value,
+				"aria-controls": unref(context).media.value?.id || void 0,
+				"data-vize-ui": "media-player-play-button",
+				part: "play-button",
+				"data-state": unref(context).state.value,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context).slotState.value)), void 0, true)], 8, _hoisted_1$5);
+		};
+	}
+}), [["__scopeId", "data-v-17768469"]]);
+//#endregion
+//#region src/families/media/media-player/media-player-playback-rate-button.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$4 = [
+	"disabled",
+	"aria-label",
+	"aria-controls",
+	"data-state",
+	"data-rate"
+];
+//#endregion
+//#region src/families/media/media-player/media-player-playback-rate-button.vue
+var media_player_playback_rate_button_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "media-player-playback-rate-button",
+	props: {
+		ariaLabel: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		rates: {
+			type: Array,
+			required: false,
+			default: () => MEDIA_PLAYER_DEFAULT_RATES
+		}
+	},
+	emits: ["click"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const context = mediaPlayerContext.use();
+		const element = useTemplateRef("element");
+		const disabled = computed(() => context.media.value === null || __props.rates.length === 0);
+		const defaultLabel = computed(() => context.messages.value.playbackRate(context.slotState.value.playbackRate));
+		const label = computed(() => __props.ariaLabel === void 0 ? defaultLabel.value : __props.ariaLabel ?? void 0);
+		function nextRate(current) {
+			const index = __props.rates.indexOf(current);
+			return __props.rates[(index + 1) % __props.rates.length] ?? current;
+		}
+		function onClick(event) {
+			emit("click", event);
+			if (event.defaultPrevented || disabled.value) return;
+			context.setPlaybackRate(nextRate(context.slotState.value.playbackRate));
+		}
+		__expose({
+			disabled,
+			element
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				ref_key: "element",
+				ref: element,
+				type: "button",
+				disabled: disabled.value,
+				"aria-label": label.value,
+				"aria-controls": unref(context).media.value?.id || void 0,
+				"data-vize-ui": "media-player-playback-rate-button",
+				part: "playback-rate-button",
+				"data-state": unref(context).state.value,
+				"data-rate": unref(context).slotState.value.playbackRate,
+				onClick
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context).slotState.value)), void 0, true)], 8, _hoisted_1$4);
+		};
+	}
+}), [["__scopeId", "data-v-7838a98e"]]);
+//#endregion
+//#region src/families/media/media-player/media-player-platform.ts
+/**
+* Feature-detected fullscreen and picture-in-picture helpers. Prefixed WebKit
+* APIs are reached through `in` checks and `Reflect`, never through casts.
+* Every helper is client-only; callers run them from handlers or `onMounted`.
+*/
+function callMethod(target, name) {
+	if (!(name in target)) return void 0;
+	const method = Reflect.get(target, name);
+	if (typeof method !== "function") return void 0;
+	return Reflect.apply(method, target, []) ?? true;
+}
+function readProperty(target, name) {
+	return name in target ? Reflect.get(target, name) : void 0;
+}
+async function settle(result) {
+	if (result === void 0) return false;
+	if (result instanceof Promise) try {
+		await result;
+	} catch {
+		return false;
+	}
+	return true;
+}
+/** Element currently shown fullscreen, including the WebKit-prefixed API. */
+function currentFullscreenElement(targetDocument) {
+	if (targetDocument.fullscreenElement) return targetDocument.fullscreenElement;
+	const prefixed = readProperty(targetDocument, "webkitFullscreenElement");
+	return prefixed instanceof Element ? prefixed : null;
+}
+/** Whether `element` (or, on iOS, `media`) can enter fullscreen. */
+function canRequestFullscreen(element, media) {
+	if (typeof element.requestFullscreen === "function" && element.ownerDocument.fullscreenEnabled) return true;
+	if (typeof readProperty(element, "webkitRequestFullscreen") === "function") return true;
+	return media !== null && typeof readProperty(media, "webkitEnterFullscreen") === "function";
+}
+/** Enter fullscreen on `element`, falling back to native video fullscreen on iOS. */
+function requestElementFullscreen(element, media) {
+	if (typeof element.requestFullscreen === "function" && element.ownerDocument.fullscreenEnabled) return settle(element.requestFullscreen());
+	const prefixed = callMethod(element, "webkitRequestFullscreen");
+	if (prefixed !== void 0) return settle(prefixed);
+	return settle(media === null ? void 0 : callMethod(media, "webkitEnterFullscreen"));
+}
+/** Leave fullscreen, including the WebKit-prefixed API. */
+function exitDocumentFullscreen(targetDocument) {
+	if (typeof targetDocument.exitFullscreen === "function" && targetDocument.fullscreenElement) return settle(targetDocument.exitFullscreen());
+	return settle(callMethod(targetDocument, "webkitExitFullscreen"));
+}
+/** Whether `media` can enter picture-in-picture. */
+function canRequestPictureInPicture(media) {
+	if (!(media instanceof HTMLVideoElement)) return false;
+	const targetDocument = media.ownerDocument;
+	return readProperty(targetDocument, "pictureInPictureEnabled") === true && readProperty(media, "disablePictureInPicture") !== true && !media.hasAttribute("disablepictureinpicture") && typeof readProperty(media, "requestPictureInPicture") === "function";
+}
+/** Element currently floating in picture-in-picture. */
+function currentPictureInPictureElement(targetDocument) {
+	const element = readProperty(targetDocument, "pictureInPictureElement");
+	return element instanceof Element ? element : null;
+}
+/** Enter or leave picture-in-picture for `media`. */
+function togglePictureInPictureFor(media) {
+	const targetDocument = media.ownerDocument;
+	if (currentPictureInPictureElement(targetDocument) === media) return settle(callMethod(targetDocument, "exitPictureInPicture"));
+	if (!canRequestPictureInPicture(media)) return Promise.resolve(false);
+	return settle(callMethod(media, "requestPictureInPicture"));
+}
+//#endregion
+//#region src/families/media/media-player/media-player-root.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = [
+	"id",
+	"role",
+	"aria-label",
+	"aria-labelledby",
+	"dir",
+	"data-state",
+	"data-media-kind",
+	"data-loading",
+	"data-muted",
+	"data-fullscreen",
+	"data-picture-in-picture",
+	"data-captions"
+];
+//#endregion
+//#region src/families/media/media-player/media-player-root.vue
+var media_player_root_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "media-player-root",
+	props: {
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		volume: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		defaultVolume: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		muted: {
+			type: Boolean,
+			required: false,
+			default: () => void 0
+		},
+		defaultMuted: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		playbackRate: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		defaultPlaybackRate: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		currentTime: {
+			type: Number,
+			required: false,
+			default: () => void 0
+		},
+		keyboardShortcuts: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		seekStep: {
+			type: Number,
+			required: false,
+			default: 5
+		},
+		skipStep: {
+			type: Number,
+			required: false,
+			default: 10
+		},
+		volumeStep: {
+			type: Number,
+			required: false,
+			default: .05
+		},
+		messages: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		dir: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: [
+		"update:volume",
+		"update:muted",
+		"update:playbackRate",
+		"update:currentTime",
+		"play",
+		"pause",
+		"ended",
+		"playRejected",
+		"error"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const baseId = useDeterministicId({
+			id: () => __props.id,
+			hint: "media-player"
+		});
+		const media = shallowRef(null);
+		const kind = shallowRef(null);
+		const paused = shallowRef(true);
+		const ended = shallowRef(false);
+		const waiting = shallowRef(false);
+		const seeking = shallowRef(false);
+		const scrubbing = shallowRef(false);
+		const position = shallowRef(__props.currentTime ?? 0);
+		const duration = shallowRef(0);
+		const buffered = shallowRef([]);
+		const textTracks = shallowRef([]);
+		const fullscreen = shallowRef(false);
+		const pictureInPicture = shallowRef(false);
+		const errorCode = shallowRef(null);
+		const fullscreenSupported = shallowRef(false);
+		const pictureInPictureSupported = shallowRef(false);
+		let lastCaptionTrack = -1;
+		let resumeAfterScrub = false;
+		const volumeState = useControllableState({
+			value: () => __props.volume,
+			defaultValue: () => __props.defaultVolume
+		});
+		const mutedState = useControllableState({
+			value: () => __props.muted,
+			defaultValue: () => __props.defaultMuted
+		});
+		const rateState = useControllableState({
+			value: () => __props.playbackRate,
+			defaultValue: () => __props.defaultPlaybackRate
+		});
+		const volumeValue = computed(() => clampMediaValue(volumeState.value.value, 0, 1));
+		const mutedValue = computed(() => mutedState.value.value);
+		const rateValue = computed(() => rateState.value.value);
+		const state = computed(() => {
+			if (ended.value) return "ended";
+			return paused.value ? "paused" : "playing";
+		});
+		const loading = computed(() => seeking.value || !paused.value && waiting.value);
+		const captionTrack = computed(() => textTracks.value.find((track) => track.showing)?.index ?? -1);
+		const messagesValue = computed(() => resolveMediaPlayerMessages(__props.messages));
+		const slotState = computed(() => ({
+			buffered: buffered.value,
+			captionTrack: captionTrack.value,
+			currentTime: position.value,
+			duration: duration.value,
+			error: errorCode.value,
+			fullscreen: fullscreen.value,
+			loading: loading.value,
+			muted: mutedValue.value,
+			paused: paused.value,
+			pictureInPicture: pictureInPicture.value,
+			playbackRate: rateValue.value,
+			seeking: seeking.value,
+			state: state.value,
+			textTracks: textTracks.value,
+			volume: volumeValue.value
+		}));
+		function readTextTracks(target) {
+			const list = target.textTracks;
+			const tracks = [];
+			if (list === void 0 || list === null) return tracks;
+			for (let index = 0; index < list.length; index += 1) {
+				const track = list[index];
+				if (track === void 0) continue;
+				tracks.push(Object.freeze({
+					index,
+					kind: track.kind,
+					label: track.label,
+					language: track.language,
+					showing: track.mode === "showing"
+				}));
+			}
+			return tracks;
+		}
+		function syncTracks() {
+			if (media.value === null) return;
+			textTracks.value = readTextTracks(media.value);
+			if (captionTrack.value >= 0) lastCaptionTrack = captionTrack.value;
+		}
+		function syncFromMedia() {
+			if (media.value === null) return;
+			paused.value = media.value.paused;
+			ended.value = media.value.ended;
+			seeking.value = media.value.seeking;
+			duration.value = normalizeMediaDuration(media.value.duration);
+			if (!scrubbing.value) position.value = media.value.currentTime;
+			buffered.value = readTimeRanges(media.value.buffered);
+		}
+		function applyToMedia() {
+			if (media.value === null) return;
+			if (media.value.volume !== volumeValue.value) media.value.volume = volumeValue.value;
+			if (media.value.muted !== mutedValue.value) media.value.muted = mutedValue.value;
+			if (media.value.playbackRate !== rateValue.value) media.value.playbackRate = rateValue.value;
+		}
+		function setVolume(next, unmute = true) {
+			const target = Math.round(clampMediaValue(next, 0, 1) * 1e4) / 1e4;
+			const changed = volumeState.set(target);
+			if (changed) emit("update:volume", target);
+			if (unmute && target > 0 && mutedValue.value) setMuted(false);
+			return changed;
+		}
+		function setMuted(next) {
+			const changed = mutedState.set(next);
+			if (changed) emit("update:muted", next);
+			return changed;
+		}
+		function setPlaybackRate(next) {
+			if (!Number.isFinite(next) || next <= 0) return false;
+			const changed = rateState.set(next);
+			if (changed) emit("update:playbackRate", next);
+			return changed;
+		}
+		watch([
+			volumeValue,
+			mutedValue,
+			rateValue
+		], applyToMedia, { flush: "sync" });
+		const handlers = {
+			play: () => {
+				syncFromMedia();
+				emit("play");
+			},
+			playing: () => {
+				waiting.value = false;
+				syncFromMedia();
+			},
+			pause: () => {
+				syncFromMedia();
+				emit("pause");
+			},
+			ended: () => {
+				syncFromMedia();
+				emit("ended");
+			},
+			waiting: () => {
+				waiting.value = true;
+			},
+			canplay: () => {
+				waiting.value = false;
+				syncFromMedia();
+			},
+			seeking: syncFromMedia,
+			seeked: syncFromMedia,
+			timeupdate: () => {
+				syncFromMedia();
+				if (!scrubbing.value) emit("update:currentTime", position.value);
+			},
+			durationchange: syncFromMedia,
+			loadedmetadata: () => {
+				syncFromMedia();
+				syncTracks();
+			},
+			progress: syncFromMedia,
+			emptied: () => {
+				errorCode.value = null;
+				syncFromMedia();
+			},
+			volumechange: () => {
+				if (media.value === null) return;
+				if (media.value.muted !== mutedValue.value) setMuted(media.value.muted);
+				if (media.value.volume !== volumeValue.value) setVolume(media.value.volume, false);
+			},
+			ratechange: () => {
+				if (media.value !== null && media.value.playbackRate !== rateValue.value) setPlaybackRate(media.value.playbackRate);
+			},
+			error: () => {
+				errorCode.value = media.value?.error?.code ?? null;
+				waiting.value = false;
+				emit("error", errorCode.value);
+			},
+			enterpictureinpicture: () => {
+				pictureInPicture.value = true;
+			},
+			leavepictureinpicture: () => {
+				pictureInPicture.value = false;
+			},
+			webkitbeginfullscreen: () => {
+				fullscreen.value = true;
+			},
+			webkitendfullscreen: () => {
+				fullscreen.value = false;
+			}
+		};
+		function refreshCapabilities() {
+			fullscreenSupported.value = element.value !== null && canRequestFullscreen(element.value, media.value);
+			pictureInPictureSupported.value = canRequestPictureInPicture(media.value);
+		}
+		function registerMedia(target, mediaKind) {
+			media.value = target;
+			kind.value = mediaKind;
+			for (const [name, handler] of Object.entries(handlers)) target.addEventListener(name, handler);
+			const tracks = target.textTracks;
+			tracks?.addEventListener("addtrack", syncTracks);
+			tracks?.addEventListener("removetrack", syncTracks);
+			tracks?.addEventListener("change", syncTracks);
+			applyToMedia();
+			syncFromMedia();
+			syncTracks();
+			if (__props.currentTime !== void 0 && __props.currentTime > 0) seek(__props.currentTime, "api");
+			if (target.error !== null) handlers.error?.(new Event("error"));
+			refreshCapabilities();
+			return () => {
+				for (const [name, handler] of Object.entries(handlers)) target.removeEventListener(name, handler);
+				tracks?.removeEventListener("addtrack", syncTracks);
+				tracks?.removeEventListener("removetrack", syncTracks);
+				tracks?.removeEventListener("change", syncTracks);
+				if (media.value === target) {
+					media.value = null;
+					kind.value = null;
+					refreshCapabilities();
+				}
+			};
+		}
+		async function play() {
+			if (media.value === null) return false;
+			try {
+				await media.value.play();
+				return true;
+			} catch (reason) {
+				syncFromMedia();
+				emit("playRejected", reason);
+				return false;
+			}
+		}
+		function pause() {
+			media.value?.pause();
+		}
+		function togglePlay() {
+			if (media.value === null) return Promise.resolve(false);
+			if (media.value.paused || media.value.ended) return play();
+			pause();
+			return Promise.resolve(true);
+		}
+		function seek(time, _reason = "api") {
+			if (media.value === null || Number.isNaN(time)) return;
+			const target = clampMediaValue(time, 0, duration.value > 0 ? duration.value : Number.POSITIVE_INFINITY);
+			media.value.currentTime = target;
+			position.value = target;
+			ended.value = media.value.ended;
+			emit("update:currentTime", target);
+		}
+		function setScrubbing(next) {
+			if (scrubbing.value === next) return;
+			scrubbing.value = next;
+			if (media.value === null) return;
+			if (next) {
+				resumeAfterScrub = !media.value.paused;
+				if (resumeAfterScrub) media.value.pause();
+			} else if (resumeAfterScrub) {
+				resumeAfterScrub = false;
+				play();
+			}
+		}
+		function setCaptionTrack(index) {
+			const list = media.value?.textTracks;
+			if (list === void 0 || list === null) return false;
+			let changed = false;
+			for (let trackIndex = 0; trackIndex < list.length; trackIndex += 1) {
+				const track = list[trackIndex];
+				if (track === void 0 || !isCaptionTrack(track)) continue;
+				const mode = trackIndex === index ? "showing" : "disabled";
+				if (track.mode !== mode && (mode === "showing" || track.mode === "showing")) {
+					track.mode = mode;
+					changed = true;
+				}
+			}
+			if (index >= 0) lastCaptionTrack = index;
+			syncTracks();
+			return changed;
+		}
+		function toggleCaptions() {
+			if (captionTrack.value >= 0) return setCaptionTrack(-1);
+			const captions = textTracks.value.filter(isCaptionTrack);
+			const preferred = captions.find((track) => track.index === lastCaptionTrack) ?? captions[0] ?? null;
+			return preferred === null ? false : setCaptionTrack(preferred.index);
+		}
+		async function toggleFullscreen() {
+			if (element.value === null) return false;
+			if (fullscreen.value || currentFullscreenElement(element.value.ownerDocument) === element.value) return exitDocumentFullscreen(element.value.ownerDocument);
+			return requestElementFullscreen(element.value, media.value);
+		}
+		function togglePictureInPicture() {
+			return media.value === null ? Promise.resolve(false) : togglePictureInPictureFor(media.value);
+		}
+		function onFullscreenChange() {
+			if (element.value === null) return;
+			fullscreen.value = currentFullscreenElement(element.value.ownerDocument) === element.value;
+		}
+		function isActivationTarget(target) {
+			return target instanceof HTMLButtonElement || target instanceof HTMLAnchorElement || target instanceof HTMLElement && target.getAttribute("role") === "button";
+		}
+		function onKeydown(event) {
+			if (!__props.keyboardShortcuts || event.defaultPrevented || isEditableTarget(event.target)) return;
+			const intent = resolveMediaShortcut(event);
+			if (intent === null) return;
+			if (intent.action === "toggle-play" && event.key === " " && isActivationTarget(event.target)) return;
+			const direction = __props.dir === "rtl" ? -1 : 1;
+			switch (intent.action) {
+				case "toggle-play":
+					togglePlay();
+					break;
+				case "skip-backward":
+					seek(position.value - __props.skipStep, "keyboard");
+					break;
+				case "skip-forward":
+					seek(position.value + __props.skipStep, "keyboard");
+					break;
+				case "seek-backward":
+					seek(position.value - __props.seekStep * direction, "keyboard");
+					break;
+				case "seek-forward":
+					seek(position.value + __props.seekStep * direction, "keyboard");
+					break;
+				case "volume-up":
+					setVolume(volumeValue.value + __props.volumeStep);
+					break;
+				case "volume-down":
+					setVolume(volumeValue.value - __props.volumeStep);
+					break;
+				case "mute":
+					setMuted(!mutedValue.value);
+					break;
+				case "fullscreen":
+					if (!fullscreenSupported.value) return;
+					toggleFullscreen();
+					break;
+				case "captions":
+					if (!toggleCaptions()) return;
+					break;
+				case "seek-percent":
+					if (!(duration.value > 0) || !Number.isFinite(duration.value)) return;
+					seek(duration.value * (intent.percent ?? 0) / 100, "keyboard");
+					break;
+			}
+			event.preventDefault();
+		}
+		watch(() => __props.currentTime, (next) => {
+			if (next !== void 0 && Math.abs(next - position.value) > .5) seek(next, "api");
+		});
+		onMounted(() => {
+			element.value?.addEventListener("keydown", onKeydown);
+			document.addEventListener("fullscreenchange", onFullscreenChange);
+			document.addEventListener("webkitfullscreenchange", onFullscreenChange);
+			refreshCapabilities();
+			if (media.value !== null) pictureInPicture.value = currentPictureInPictureElement(document) === media.value;
+		});
+		onBeforeUnmount(() => {
+			element.value?.removeEventListener("keydown", onKeydown);
+			document.removeEventListener("fullscreenchange", onFullscreenChange);
+			document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
+		});
+		mediaPlayerContext.provide({
+			dir: computed(() => __props.dir),
+			fullscreenSupported,
+			getPartId: (part) => deriveDeterministicId(baseId.value, part),
+			id: baseId,
+			kind,
+			media,
+			messages: messagesValue,
+			muted: mutedValue,
+			pause,
+			pictureInPictureSupported,
+			play,
+			registerMedia,
+			seek,
+			seekStep: computed(() => __props.seekStep),
+			setCaptionTrack,
+			setMuted,
+			setPlaybackRate,
+			setScrubbing,
+			setVolume: (next) => setVolume(next),
+			slotState,
+			state,
+			toggleCaptions,
+			toggleFullscreen,
+			togglePictureInPicture,
+			togglePlay,
+			volumeStep: computed(() => __props.volumeStep)
+		});
+		__expose({
+			buffered,
+			captionTrack,
+			currentTime: position,
+			duration,
+			element,
+			error: errorCode,
+			fullscreen,
+			loading,
+			media,
+			muted: mutedValue,
+			pause,
+			paused,
+			pictureInPicture,
+			play,
+			playbackRate: rateValue,
+			seek: (time) => seek(time, "api"),
+			seekBy: (delta) => seek(position.value + delta, "api"),
+			seeking,
+			setCaptionTrack,
+			setMuted,
+			setPlaybackRate,
+			setVolume: (next) => setVolume(next),
+			state,
+			textTracks,
+			toggleCaptions,
+			toggleFullscreen,
+			togglePictureInPicture,
+			togglePlay,
+			volume: volumeValue
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				id: unref(baseId),
+				ref_key: "element",
+				ref: element,
+				role: __props.ariaLabel !== void 0 || __props.ariaLabelledby !== void 0 ? "group" : void 0,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				dir: __props.dir,
+				"data-vize-ui": "media-player-root",
+				part: "root",
+				"data-state": state.value,
+				"data-media-kind": kind.value ?? void 0,
+				"data-loading": loading.value ? "true" : void 0,
+				"data-muted": mutedValue.value ? "true" : void 0,
+				"data-fullscreen": fullscreen.value ? "true" : void 0,
+				"data-picture-in-picture": pictureInPicture.value ? "true" : void 0,
+				"data-captions": captionTrack.value >= 0 ? "true" : void 0
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), void 0, true)], 8, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-e5aebcc6"]]);
+//#endregion
+//#region src/families/media/media-player/media-player-seek-slider.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = [
+	"data-state",
+	"data-dragging",
+	"data-disabled"
+];
+const _hoisted_2$1 = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-disabled"
+];
+//#endregion
+//#region src/families/media/media-player/media-player-seek-slider.vue
+var media_player_seek_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "media-player-seek-slider",
+	props: {
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = mediaPlayerContext.use();
+		const element = useTemplateRef("element");
+		const thumb = useTemplateRef("thumb");
+		const activePointer = shallowRef(null);
+		const dragging = computed(() => activePointer.value !== null);
+		const duration = computed(() => context.slotState.value.duration);
+		const current = computed(() => clampMediaValue(context.slotState.value.currentTime, 0, duration.value));
+		const disabled = computed(() => context.media.value === null || !(duration.value > 0) || !Number.isFinite(duration.value));
+		const label = computed(() => __props.ariaLabelledby === void 0 ? __props.ariaLabel ?? context.messages.value.seek : __props.ariaLabel);
+		const valueText = computed(() => context.messages.value.seekValueText(formatMediaTime(current.value, duration.value), formatMediaTime(duration.value)));
+		const trackStyle = computed(() => ({
+			"--vize-ui-media-player-progress": `${toPercent(current.value, duration.value)}%`,
+			"--vize-ui-media-player-buffered": `${toPercent(bufferedEnd(context.slotState.value.buffered, current.value), duration.value)}%`
+		}));
+		function seekToPointer(event) {
+			if (element.value === null) return;
+			const ratio = pointerRatio(element.value.getBoundingClientRect(), event.clientX, context.dir.value === "rtl");
+			context.seek(ratio * duration.value, "pointer");
+		}
+		function onPointerdown(event) {
+			if (disabled.value || event.button !== 0 || element.value === null) return;
+			event.preventDefault();
+			activePointer.value = event.pointerId;
+			captureMediaPointer(element.value, event.pointerId);
+			thumb.value?.focus({ preventScroll: true });
+			context.setScrubbing(true);
+			seekToPointer(event);
+		}
+		function onPointermove(event) {
+			if (activePointer.value === event.pointerId) seekToPointer(event);
+		}
+		function onPointerup(event) {
+			if (activePointer.value !== event.pointerId) return;
+			activePointer.value = null;
+			if (element.value !== null) releaseMediaPointer(element.value, event.pointerId);
+			context.setScrubbing(false);
+		}
+		function onKeydown(event) {
+			const intent = resolveSliderKey(event.key, context.dir.value === "rtl");
+			if (intent === null || disabled.value) return;
+			event.preventDefault();
+			if (intent.kind === "edge") {
+				context.seek(intent.edge === "min" ? 0 : duration.value, "keyboard");
+				return;
+			}
+			const amount = intent.kind === "page" ? duration.value / 10 : context.seekStep.value;
+			context.seek(current.value + amount * intent.sign, "keyboard");
+		}
+		const thumbProps = computed(() => ({
+			role: "slider",
+			tabindex: disabled.value ? -1 : 0,
+			onKeydown
+		}));
+		function focus(options) {
+			thumb.value?.focus(options);
+		}
+		__expose({
+			dragging,
+			element,
+			focus,
+			thumb
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "media-player-seek-slider",
+				part: "seek-slider",
+				"data-state": unref(context).state.value,
+				"data-dragging": dragging.value ? "true" : void 0,
+				"data-disabled": disabled.value ? "true" : void 0,
+				style: normalizeStyle(trackStyle.value),
+				onPointerdown,
+				onPointermove,
+				onPointerup,
+				onPointercancel: onPointerup,
+				onLostpointercapture: onPointerup
+			}, [createElementVNode("div", mergeProps({
+				id: unref(context).getPartId("seek"),
+				ref_key: "thumb",
+				ref: thumb
+			}, thumbProps.value, {
+				"aria-label": label.value,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-orientation": "horizontal",
+				"aria-valuemin": 0,
+				"aria-valuemax": Math.floor(duration.value),
+				"aria-valuenow": Math.floor(current.value),
+				"aria-valuetext": valueText.value,
+				"aria-disabled": disabled.value ? "true" : void 0,
+				"data-vize-ui": "media-player-seek-thumb",
+				part: "seek-thumb"
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context).slotState.value)), void 0, true)], 16, _hoisted_2$1)], 44, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-36fa9e4f"]]);
+//#endregion
+//#region src/families/media/media-player/media-player-time-display.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = ["data-mode"];
+//#endregion
+//#region src/families/media/media-player/media-player-time-display.vue
+var media_player_time_display_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "media-player-time-display",
+	props: { mode: {
+		type: String,
+		required: false,
+		default: "current"
+	} },
+	setup(__props) {
+		const context = mediaPlayerContext.use();
+		const seconds = computed(() => {
+			const { currentTime, duration } = context.slotState.value;
+			if (__props.mode === "duration") return duration;
+			if (__props.mode === "remaining") return -Math.max(0, duration - currentTime);
+			return currentTime;
+		});
+		const text = computed(() => formatMediaTime(seconds.value, context.slotState.value.duration));
+		const slotState = computed(() => ({
+			...context.slotState.value,
+			seconds: seconds.value,
+			text: text.value
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				"data-vize-ui": "media-player-time-display",
+				part: "time-display",
+				"data-mode": __props.mode
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotState.value)), () => [createTextVNode(toDisplayString(text.value), 1)], true)], 8, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-08d54d72"]]);
+//#endregion
+//#region src/families/media/media-player/media-player-volume-slider.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["data-muted", "data-dragging"];
+const _hoisted_2 = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-valuenow",
+	"aria-valuetext"
+];
+const PAGE_STEP = .1;
+//#endregion
+//#region src/families/media/media-player/media-player-volume-slider.vue
+var media_player_volume_slider_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "media-player-volume-slider",
+	props: {
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const context = mediaPlayerContext.use();
+		const element = useTemplateRef("element");
+		const thumb = useTemplateRef("thumb");
+		const activePointer = shallowRef(null);
+		const dragging = computed(() => activePointer.value !== null);
+		const volume = computed(() => context.slotState.value.volume);
+		const percent = computed(() => Math.round(volume.value * 100));
+		const audible = computed(() => context.muted.value ? 0 : percent.value);
+		const label = computed(() => __props.ariaLabelledby === void 0 ? __props.ariaLabel ?? context.messages.value.volume : __props.ariaLabel);
+		const trackStyle = computed(() => ({ "--vize-ui-media-player-volume": `${audible.value}%` }));
+		function setFromPointer(event) {
+			if (element.value === null) return;
+			const rect = element.value.getBoundingClientRect();
+			context.setVolume(pointerRatio(rect, event.clientX, context.dir.value === "rtl"));
+		}
+		function onPointerdown(event) {
+			if (event.button !== 0 || element.value === null) return;
+			event.preventDefault();
+			activePointer.value = event.pointerId;
+			captureMediaPointer(element.value, event.pointerId);
+			thumb.value?.focus({ preventScroll: true });
+			setFromPointer(event);
+		}
+		function onPointermove(event) {
+			if (activePointer.value === event.pointerId) setFromPointer(event);
+		}
+		function onPointerup(event) {
+			if (activePointer.value !== event.pointerId) return;
+			activePointer.value = null;
+			if (element.value !== null) releaseMediaPointer(element.value, event.pointerId);
+		}
+		function onKeydown(event) {
+			const intent = resolveSliderKey(event.key, context.dir.value === "rtl");
+			if (intent === null) return;
+			event.preventDefault();
+			if (intent.kind === "edge") {
+				context.setVolume(intent.edge === "min" ? 0 : 1);
+				return;
+			}
+			const amount = intent.kind === "page" ? PAGE_STEP : context.volumeStep.value;
+			context.setVolume(volume.value + amount * intent.sign);
+		}
+		const thumbProps = computed(() => ({
+			role: "slider",
+			tabindex: 0,
+			onKeydown
+		}));
+		function focus(options) {
+			thumb.value?.focus(options);
+		}
+		__expose({
+			dragging,
+			element,
+			focus,
+			thumb
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "element",
+				ref: element,
+				"data-vize-ui": "media-player-volume-slider",
+				part: "volume-slider",
+				"data-muted": unref(context).muted.value ? "true" : void 0,
+				"data-dragging": dragging.value ? "true" : void 0,
+				style: normalizeStyle(trackStyle.value),
+				onPointerdown,
+				onPointermove,
+				onPointerup,
+				onPointercancel: onPointerup,
+				onLostpointercapture: onPointerup
+			}, [createElementVNode("div", mergeProps({
+				id: unref(context).getPartId("volume"),
+				ref_key: "thumb",
+				ref: thumb
+			}, thumbProps.value, {
+				"aria-label": label.value,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-orientation": "horizontal",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": percent.value,
+				"aria-valuetext": unref(context).messages.value.volumeValueText(percent.value, unref(context).muted.value),
+				"data-vize-ui": "media-player-volume-thumb",
+				part: "volume-thumb"
+			}), [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(context).slotState.value)), void 0, true)], 16, _hoisted_2)], 44, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-b914a1af"]]);
+//#endregion
+export { resolveMediaShortcut as _, media_player_playback_rate_button_default as a, media_player_loading_indicator_default as c, bufferedEnd as d, formatMediaTime as f, resolveMediaPlayerMessages as g, normalizeMediaDuration as h, media_player_root_default as i, media_player_captions_button_default as l, mediaPlayerDefaultMessages as m, media_player_time_display_default as n, media_player_play_button_default as o, isCaptionTrack as p, media_player_seek_slider_default as r, media_player_mute_button_default as s, media_player_volume_slider_default as t, MEDIA_PLAYER_DEFAULT_RATES as u, mediaPlayerContext as v };