@videojs/html 0.1.0-preview.2 → 0.1.0-preview.4

package/dist/media-skin-BlXPC9wG.js

@@ -1,1458 +0,0 @@
-import { createMediaStore, currentTimeDisplayStateDefinition, durationDisplayStateDefinition, fullscreenButtonStateDefinition, muteButtonStateDefinition, playButtonStateDefinition, timeSliderStateDefinition, volumeSliderStateDefinition } from "@videojs/core/store";
-import { formatDisplayTime, uniqueId } from "@videojs/utils";
-import { ConsumerMixin, ProviderMixin } from "@open-wc/context-protocol";
-import { getDocument, getNextTabbable, getPreviousTabbable, isOutsideEvent, namedNodeMapToObject, setAttributes } from "@videojs/utils/dom";
-import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
-import { TimeSlider, VolumeSlider } from "@videojs/core";
-
-//#region src/utils/component-factory.ts
-/**
-* Generic factory function to create connected HTML components using hooks pattern.
-* Provides equivalent functionality to React's toConnectedComponent but for custom elements.
-*
-* @param BaseClass - Base custom element class to extend
-* @param stateHook - Hook that defines state keys and transformation logic
-* @param propsHook - Hook that handles element attributes and properties based on state
-* @param eventsHook - Hook that defines event handling logic
-* @param displayName - Display name for debugging
-* @returns Connected custom element class with media store integration
-*/
-function toConnectedHTMLComponent(BaseClass, stateHook, propsHook, displayName) {
-	const ConnectedComponent = class extends ConsumerMixin(BaseClass) {
-		constructor(..._args) {
-			super(..._args);
-			this.contexts = { mediaStore: (mediaStore) => {
-				this._mediaStore = mediaStore;
-				this._mediaStore.subscribeKeys(stateHook.keys, (rawState) => {
-					const state = stateHook.transform(rawState, mediaStore);
-					const props = propsHook(state ?? {}, this);
-					this._update(props, state, mediaStore);
-				});
-			} };
-		}
-		static get observedAttributes() {
-			return [...super.observedAttributes ?? []];
-		}
-		connectedCallback() {
-			super.connectedCallback?.();
-		}
-		disconnectedCallback() {
-			super.disconnectedCallback?.();
-		}
-		handleEvent(event) {
-			super.handleEvent?.(event);
-		}
-	};
-	if (displayName) Object.defineProperty(ConnectedComponent, "name", { value: displayName });
-	return ConnectedComponent;
-}
-
-//#endregion
-//#region src/components/media-current-time-display.ts
-var CurrentTimeDisplayBase = class extends HTMLElement {
-	static {
-		this.shadowRootOptions = { mode: "open" };
-	}
-	static {
-		this.observedAttributes = ["show-remaining"];
-	}
-	constructor() {
-		super();
-		if (!this.shadowRoot) this.attachShadow(this.constructor.shadowRootOptions);
-	}
-	get currentTime() {
-		return this._state?.currentTime ?? 0;
-	}
-	get duration() {
-		return this._state?.duration ?? 0;
-	}
-	get showRemaining() {
-		return this.hasAttribute("show-remaining");
-	}
-	attributeChangedCallback(name, _oldValue, _newValue) {
-		if (name === "show-remaining" && this._state) this._update({}, this._state);
-	}
-	_update(_props, state) {
-		this._state = state;
-		/** @TODO Should this live here or elsewhere? (CJP) */
-		const timeLabel = this.showRemaining && state.duration != null && state.currentTime != null ? formatDisplayTime(-(state.duration - state.currentTime)) : formatDisplayTime(state.currentTime);
-		if (this.shadowRoot) this.shadowRoot.textContent = timeLabel;
-	}
-};
-const useCurrentTimeDisplayState = {
-	keys: [...currentTimeDisplayStateDefinition.keys],
-	transform: (rawState, _mediaStore) => ({ ...currentTimeDisplayStateDefinition.stateTransform(rawState) })
-};
-const getCurrentTimeDisplayProps = (_state, _element) => {
-	return {};
-};
-const CurrentTimeDisplay = toConnectedHTMLComponent(CurrentTimeDisplayBase, useCurrentTimeDisplayState, getCurrentTimeDisplayProps, "CurrentTimeDisplay");
-if (!globalThis.customElements.get("media-current-time-display")) globalThis.customElements.define("media-current-time-display", CurrentTimeDisplay);
-
-//#endregion
-//#region src/components/media-duration-display.ts
-function getTemplateHTML$3(_attrs, _props = {}) {
-	return `
-    <span></span>
-  `;
-}
-var DurationDisplayBase = class extends HTMLElement {
-	static {
-		this.shadowRootOptions = { mode: "open" };
-	}
-	static {
-		this.getTemplateHTML = getTemplateHTML$3;
-	}
-	constructor() {
-		super();
-		if (!this.shadowRoot) {
-			this.attachShadow(this.constructor.shadowRootOptions);
-			const attrs = namedNodeMapToObject(this.attributes);
-			const html = this.constructor.getTemplateHTML(attrs);
-			const shadowRoot = this.shadowRoot;
-			shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : shadowRoot.innerHTML = html;
-		}
-	}
-	get duration() {
-		return this._state?.duration ?? 0;
-	}
-	_update(_props, state) {
-		this._state = state;
-		const spanElement = this.shadowRoot?.querySelector("span");
-		if (spanElement) spanElement.textContent = formatDisplayTime(state.duration);
-	}
-};
-const useDurationDisplayState = {
-	keys: [...durationDisplayStateDefinition.keys],
-	transform: (rawState, _mediaStore) => ({ ...durationDisplayStateDefinition.stateTransform(rawState) })
-};
-const getDurationDisplayProps = (_state, _element) => {
-	return {};
-};
-const DurationDisplay = toConnectedHTMLComponent(DurationDisplayBase, useDurationDisplayState, getDurationDisplayProps, "DurationDisplay");
-if (!globalThis.customElements.get("media-duration-display")) globalThis.customElements.define("media-duration-display", DurationDisplay);
-
-//#endregion
-//#region src/components/media-chrome-button.ts
-function getTemplateHTML$2(_attrs, _props = {}) {
-	return `
-    <style>
-      /*
-        NOTE: Even though primitives should aim to be "unstyled" in their core definitions, we should
-        still add pointer-events, as this defines functionality. (CJP)
-      */
-      :host {
-        pointer-events: auto;
-      }
-    </style>
-    <slot>
-    </slot>
-  `;
-}
-var MediaChromeButton = class extends HTMLElement {
-	static {
-		this.shadowRootOptions = { mode: "open" };
-	}
-	static {
-		this.getTemplateHTML = getTemplateHTML$2;
-	}
-	constructor() {
-		super();
-		if (!this.shadowRoot) {
-			this.attachShadow(this.constructor.shadowRootOptions);
-			const attrs = namedNodeMapToObject(this.attributes);
-			const html = this.constructor.getTemplateHTML(attrs);
-			const shadowRoot = this.shadowRoot;
-			shadowRoot.setHTMLUnsafe ? shadowRoot.setHTMLUnsafe(html) : shadowRoot.innerHTML = html;
-		}
-		this.addEventListener("click", this);
-		this.addEventListener("keydown", this);
-	}
-	handleEvent(event) {
-		const { type } = event;
-		if (type === "keydown") this.#handleKeyDown(event);
-	}
-	#handleKeyDown = (event) => {
-		const { metaKey, altKey, key } = event;
-		if (metaKey || altKey || !["Enter", " "].includes(key)) {
-			this.removeEventListener("keyup", this.#handleKeyUp);
-			return;
-		}
-		this.addEventListener("keyup", this.#handleKeyUp, { once: true });
-	};
-	#handleKeyUp = (_event) => {
-		this.handleEvent({ type: "click" });
-	};
-};
-
-//#endregion
-//#region src/components/media-fullscreen-button.ts
-var FullscreenButtonBase = class extends MediaChromeButton {
-	handleEvent(event) {
-		super.handleEvent(event);
-		const { type } = event;
-		const state = this._state;
-		if (state && type === "click") if (state.fullscreen) state.requestExitFullscreen();
-		else state.requestEnterFullscreen();
-	}
-	get fullscreen() {
-		return this._state?.fullscreen ?? false;
-	}
-	_update(props, state, _mediaStore) {
-		this._state = state;
-		/** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */
-		setAttributes(this, props);
-	}
-};
-/**
-* FullscreenButton state hook - equivalent to React's useFullscreenButtonState
-* Handles media store state subscription and transformation
-*/
-const getFullscreenButtonState = {
-	keys: fullscreenButtonStateDefinition.keys,
-	transform: (rawState, mediaStore) => ({
-		...fullscreenButtonStateDefinition.stateTransform(rawState),
-		...fullscreenButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
-	})
-};
-const getFullscreenButtonProps = (state, _element) => {
-	return {
-		"data-fullscreen": state.fullscreen,
-		role: "button",
-		tabindex: "0",
-		"aria-label": state.fullscreen ? "exit fullscreen" : "enter fullscreen",
-		"data-tooltip": state.fullscreen ? "Exit Fullscreen" : "Enter Fullscreen"
-	};
-};
-const FullscreenButton = toConnectedHTMLComponent(FullscreenButtonBase, getFullscreenButtonState, getFullscreenButtonProps, "FullscreenButton");
-if (!globalThis.customElements.get("media-fullscreen-button")) globalThis.customElements.define("media-fullscreen-button", FullscreenButton);
-
-//#endregion
-//#region src/components/media-mute-button.ts
-var MuteButtonBase = class extends MediaChromeButton {
-	handleEvent(event) {
-		super.handleEvent(event);
-		const { type } = event;
-		const state = this._state;
-		if (state) {
-			if (type === "click") if (state.volumeLevel === "off") state.requestUnmute();
-			else state.requestMute();
-		}
-	}
-	get muted() {
-		return this._state?.muted ?? false;
-	}
-	get volumeLevel() {
-		return this._state?.volumeLevel ?? "high";
-	}
-	_update(props, state) {
-		this._state = state;
-		/** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */
-		setAttributes(this, props);
-	}
-};
-const getMuteButtonState = {
-	keys: muteButtonStateDefinition.keys,
-	transform: (rawState, mediaStore) => ({
-		...muteButtonStateDefinition.stateTransform(rawState),
-		...muteButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
-	})
-};
-const getMuteButtonProps = (state, _element) => {
-	return {
-		"data-muted": state.muted,
-		"data-volume-level": state.volumeLevel,
-		role: "button",
-		tabindex: "0",
-		"aria-label": state.muted ? "unmute" : "mute",
-		"data-tooltip": state.muted ? "Unmute" : "Mute"
-	};
-};
-const MuteButton = toConnectedHTMLComponent(MuteButtonBase, getMuteButtonState, getMuteButtonProps, "MuteButton");
-if (!globalThis.customElements.get("media-mute-button")) globalThis.customElements.define("media-mute-button", MuteButton);
-
-//#endregion
-//#region src/components/media-play-button.ts
-var PlayButtonBase = class extends MediaChromeButton {
-	handleEvent(event) {
-		super.handleEvent(event);
-		const { type } = event;
-		const state = this._state;
-		if (state && type === "click") if (state.paused) state.requestPlay();
-		else state.requestPause();
-	}
-	get paused() {
-		return this._state?.paused ?? true;
-	}
-	_update(props, state, _mediaStore) {
-		this._state = state;
-		/** @TODO Follow up with React vs. W.C. data-* attributes discrepancies (CJP)  */
-		setAttributes(this, props);
-	}
-};
-const getPlayButtonState = {
-	keys: playButtonStateDefinition.keys,
-	transform: (rawState, mediaStore) => ({
-		...playButtonStateDefinition.stateTransform(rawState),
-		...playButtonStateDefinition.createRequestMethods(mediaStore.dispatch)
-	})
-};
-const getPlayButtonProps = (state, _element) => {
-	return {
-		"data-paused": state.paused,
-		role: "button",
-		tabindex: "0",
-		"aria-label": state.paused ? "play" : "pause",
-		"data-tooltip": state.paused ? "Play" : "Pause"
-	};
-};
-const PlayButton = toConnectedHTMLComponent(PlayButtonBase, getPlayButtonState, getPlayButtonProps, "PlayButton");
-if (!globalThis.customElements.get("media-play-button")) globalThis.customElements.define("media-play-button", PlayButton);
-
-//#endregion
-//#region src/components/media-popover.ts
-var MediaPopoverRoot = class extends HTMLElement {
-	#open = false;
-	#hoverTimeout = null;
-	#cleanup = null;
-	#transitionStatus = "initial";
-	#abortController = null;
-	connectedCallback() {
-		this.#updateVisibility();
-		this.#abortController ??= new AbortController();
-		const { signal } = this.#abortController;
-		this.addEventListener("mouseenter", this, { signal });
-		this.addEventListener("mouseleave", this, { signal });
-		this.addEventListener("focusin", this, { signal });
-		this.addEventListener("focusout", this, { signal });
-		getDocument(this).documentElement.addEventListener("mouseleave", this, { signal });
-	}
-	disconnectedCallback() {
-		this.#clearHoverTimeout();
-		this.#cleanup?.();
-		this.#transitionStatus = "unmounted";
-		this.#updateVisibility();
-		this.#abortController?.abort();
-		this.#abortController = null;
-	}
-	handleEvent(event) {
-		switch (event.type) {
-			case "mouseenter":
-				this.#handleMouseEnter();
-				break;
-			case "mouseleave":
-				this.#handleMouseLeave(event);
-				break;
-			case "focusin":
-				this.#handleFocusIn(event);
-				break;
-			case "focusout":
-				this.#handleFocusOut(event);
-				break;
-			default: break;
-		}
-	}
-	static get observedAttributes() {
-		return [
-			"open-on-hover",
-			"delay",
-			"close-delay"
-		];
-	}
-	get openOnHover() {
-		return this.hasAttribute("open-on-hover");
-	}
-	get delay() {
-		return Number.parseInt(this.getAttribute("delay") ?? "0", 10);
-	}
-	get closeDelay() {
-		return Number.parseInt(this.getAttribute("close-delay") ?? "0", 10);
-	}
-	get #triggerElement() {
-		return this.querySelector("media-popover-trigger");
-	}
-	get #portalElement() {
-		return this.querySelector("media-popover-portal");
-	}
-	get #positionerElement() {
-		return this.#portalElement?.querySelector("media-popover-positioner");
-	}
-	get #popupElement() {
-		return this.#portalElement?.querySelector("media-popover-popup");
-	}
-	setOpen(open) {
-		if (this.#open === open) return;
-		this.#open = open;
-		if (open) {
-			this.#setupFloating();
-			this.#portalElement?.renderGuards();
-		} else {
-			this.#portalElement?.removeGuards();
-			this.#cleanup?.();
-			this.#cleanup = null;
-		}
-		if (open) {
-			this.#transitionStatus = "initial";
-			requestAnimationFrame(() => {
-				this.#transitionStatus = "open";
-				this.#updateVisibility();
-			});
-		} else this.#transitionStatus = "close";
-		this.#updateVisibility();
-	}
-	#updateVisibility() {
-		this.style.display = "contents";
-		if (this.#popupElement) {
-			const placement = this.#positionerElement?.side ?? "top";
-			this.#popupElement.setAttribute("data-side", placement);
-			this.#popupElement.toggleAttribute("data-starting-style", this.#transitionStatus === "initial");
-			this.#popupElement.toggleAttribute("data-open", this.#transitionStatus === "initial" || this.#transitionStatus === "open");
-			this.#popupElement.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
-			this.#popupElement.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
-			this.#abortController ??= new AbortController();
-			const { signal } = this.#abortController;
-			this.#popupElement.addEventListener("mouseleave", this, { signal });
-		}
-		const triggerElement = this.#triggerElement?.firstElementChild;
-		if (triggerElement) {
-			triggerElement.setAttribute("aria-expanded", this.#open.toString());
-			triggerElement.toggleAttribute("data-popup-open", this.#open);
-			if (this.#popupElement?.id) triggerElement.setAttribute("aria-controls", this.#popupElement?.id);
-		}
-	}
-	#setupFloating() {
-		if (!this.#triggerElement || !this.#popupElement) return;
-		const trigger = this.#triggerElement.firstElementChild;
-		const popup = this.#popupElement;
-		if (!trigger || !popup) return;
-		const placement = this.#positionerElement?.side ?? "top";
-		const sideOffset = this.#positionerElement?.sideOffset;
-		const updatePosition = () => {
-			computePosition(trigger, popup, {
-				placement,
-				middleware: [
-					offset(sideOffset),
-					flip(),
-					shift()
-				]
-			}).then(({ x, y }) => {
-				Object.assign(popup.style, {
-					left: `${x}px`,
-					top: `${y}px`
-				});
-			});
-		};
-		updatePosition();
-		this.#cleanup = autoUpdate(trigger, popup, updatePosition);
-	}
-	#clearHoverTimeout() {
-		if (this.#hoverTimeout) {
-			clearTimeout(this.#hoverTimeout);
-			this.#hoverTimeout = null;
-		}
-	}
-	#handleMouseEnter() {
-		if (!this.openOnHover) return;
-		this.#clearHoverTimeout();
-		this.#hoverTimeout = globalThis.setTimeout(() => {
-			this.setOpen(true);
-		}, this.delay);
-	}
-	#handleMouseLeave(event) {
-		if (!this.openOnHover) return;
-		if (event.relatedTarget && this.#popupElement?.contains(event.relatedTarget)) return;
-		this.#clearHoverTimeout();
-		this.#hoverTimeout = globalThis.setTimeout(() => {
-			this.setOpen(false);
-		}, this.closeDelay);
-	}
-	#handleFocusIn(_event) {
-		this.setOpen(true);
-	}
-	#handleFocusOut(event) {
-		const relatedTarget = event.relatedTarget;
-		if (relatedTarget && relatedTarget.hasAttribute("data-focus-guard")) return;
-		this.setOpen(false);
-	}
-};
-var MediaPopoverTrigger = class extends HTMLElement {
-	connectedCallback() {
-		this.style.display = "contents";
-		const triggerElement = this.firstElementChild;
-		if (triggerElement) {
-			triggerElement.setAttribute("aria-haspopup", "true");
-			triggerElement.setAttribute("aria-expanded", "false");
-			new MutationObserver((mutations) => {
-				mutations.forEach((mutation) => {
-					if (mutation.type === "attributes") {
-						const rootElement = this.closest("media-popover-root");
-						let popupElement = rootElement.querySelector("media-popover-popup");
-						if (!popupElement) {
-							const portalElement = rootElement.querySelector("media-popover-portal");
-							if (!portalElement) return;
-							popupElement = portalElement.querySelector("media-popover-popup");
-							if (!popupElement) return;
-						}
-						const attributeName = mutation.attributeName;
-						if (!attributeName || !attributeName.startsWith("data-")) return;
-						const attributeValue = triggerElement.getAttribute(attributeName);
-						if (attributeValue !== null) popupElement.setAttribute(attributeName, attributeValue);
-						else popupElement.removeAttribute(attributeName);
-					}
-				});
-			}).observe(triggerElement, { attributes: true });
-		}
-	}
-};
-var MediaPopoverPortal = class extends HTMLElement {
-	#portal = null;
-	#childrenArray = [];
-	#guards = [];
-	connectedCallback() {
-		this.style.display = "contents";
-		this.#setupPortal();
-	}
-	disconnectedCallback() {
-		this.#cleanupPortal();
-	}
-	querySelector(selector) {
-		return this.#portal.querySelector(selector);
-	}
-	querySelectorAll(selector) {
-		return this.#portal.querySelectorAll(selector);
-	}
-	handleEvent(event) {
-		this.dispatchEvent(new Event(event.type, { bubbles: true }));
-	}
-	#setupPortal() {
-		const portalId = this.getAttribute("root-id") ?? "@default_portal_id";
-		if (!portalId) return;
-		const portalContainer = this.getRootNode().getElementById(portalId) ?? this.getRootNode().querySelector("media-container")?.shadowRoot?.getElementById(portalId) ? this.getRootNode().querySelector("media-container") : void 0;
-		if (!portalContainer) return;
-		this.#portal = document.createElement("div");
-		this.#portal.slot = "portal";
-		this.#portal.id = uniqueId();
-		this.#childrenArray = Array.from(this.children);
-		this.#portal.append(...this.#childrenArray);
-		portalContainer.append(this.#portal);
-	}
-	#cleanupPortal() {
-		if (!this.#portal) return;
-		this.removeGuards();
-		this.append(...this.#childrenArray);
-		this.#portal.remove();
-		this.#portal = null;
-		this.#childrenArray = [];
-	}
-	renderGuards() {
-		if (!this.#portal) return;
-		if (this.#guards.length === 0) {
-			const beforeInsideGuard = createFocusGuard("inside");
-			const afterInsideGuard = createFocusGuard("inside");
-			const beforeOutsideGuard = createFocusGuard("outside");
-			const afterOutsideGuard = createFocusGuard("outside");
-			beforeOutsideGuard.addEventListener("focus", (event) => {
-				if (this.#portal && isOutsideEvent(event, this.#portal)) beforeInsideGuard.focus();
-				else getPreviousTabbable(this)?.focus();
-			});
-			afterOutsideGuard.addEventListener("focus", (event) => {
-				if (this.#portal && isOutsideEvent(event, this.#portal)) afterInsideGuard.focus();
-				else getNextTabbable(this)?.focus();
-			});
-			beforeInsideGuard.addEventListener("focus", (event) => {
-				if (this.#portal && isOutsideEvent(event, this.#portal)) getNextTabbable(this.#portal)?.focus();
-				else beforeOutsideGuard.focus();
-			});
-			afterInsideGuard.addEventListener("focus", (event) => {
-				if (this.#portal && isOutsideEvent(event, this.#portal)) getPreviousTabbable(this.#portal)?.focus();
-				else afterOutsideGuard.focus();
-			});
-			this.prepend(beforeOutsideGuard);
-			this.append(afterOutsideGuard);
-			this.#portal.prepend(beforeInsideGuard);
-			this.#portal.append(afterInsideGuard);
-			this.#guards = [
-				beforeOutsideGuard,
-				afterOutsideGuard,
-				beforeInsideGuard,
-				afterInsideGuard
-			];
-		}
-	}
-	removeGuards() {
-		this.#guards.forEach((guard) => guard.remove());
-		this.#guards = [];
-	}
-};
-function createFocusGuard(dataType) {
-	const focusGuard = document.createElement("span");
-	focusGuard.setAttribute("data-type", dataType);
-	focusGuard.setAttribute("tabindex", "0");
-	focusGuard.toggleAttribute("data-focus-guard", true);
-	return focusGuard;
-}
-var MediaPopoverPositioner = class extends HTMLElement {
-	connectedCallback() {
-		this.style.display = "contents";
-		const popup = this.firstElementChild;
-		if (popup) Object.assign(popup.style, {
-			position: "absolute",
-			top: "0",
-			left: "0"
-		});
-	}
-	get side() {
-		return this.getAttribute("side");
-	}
-	get sideOffset() {
-		return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
-	}
-};
-var MediaPopoverPopup = class extends HTMLElement {
-	connectedCallback() {
-		this.setAttribute("role", "dialog");
-		this.setAttribute("aria-modal", "false");
-		this.id = uniqueId();
-	}
-};
-if (!globalThis.customElements.get("media-popover-root")) globalThis.customElements.define("media-popover-root", MediaPopoverRoot);
-if (!globalThis.customElements.get("media-popover-trigger")) globalThis.customElements.define("media-popover-trigger", MediaPopoverTrigger);
-if (!globalThis.customElements.get("media-popover-portal")) globalThis.customElements.define("media-popover-portal", MediaPopoverPortal);
-if (!globalThis.customElements.get("media-popover-positioner")) globalThis.customElements.define("media-popover-positioner", MediaPopoverPositioner);
-if (!globalThis.customElements.get("media-popover-popup")) globalThis.customElements.define("media-popover-popup", MediaPopoverPopup);
-const Popover = {
-	Root: MediaPopoverRoot,
-	Trigger: MediaPopoverTrigger,
-	Portal: MediaPopoverPortal,
-	Positioner: MediaPopoverPositioner,
-	Popup: MediaPopoverPopup
-};
-
-//#endregion
-//#region src/components/media-time-slider.ts
-/**
-* TimeSlider Root props hook - equivalent to React's useTimeSliderRootProps
-* Handles element attributes and properties based on state
-*/
-const getTimeSliderRootProps = (state, element) => {
-	const formatTime = (time) => {
-		return `${Math.floor(time / 60)}:${Math.floor(time % 60).toString().padStart(2, "0")}`;
-	};
-	const currentTimeText = formatTime(state.currentTime);
-	const durationText = formatTime(state.duration);
-	return {
-		role: "slider",
-		tabindex: element.getAttribute("tabindex") ?? "0",
-		"data-current-time": state.currentTime.toString(),
-		"data-duration": state.duration.toString(),
-		"data-orientation": element.orientation || "horizontal",
-		"aria-label": "Seek",
-		"aria-valuemin": "0",
-		"aria-valuemax": Math.round(state.duration).toString(),
-		"aria-valuenow": Math.round(state.currentTime).toString(),
-		"aria-valuetext": `${currentTimeText} of ${durationText}`,
-		"aria-orientation": element.orientation || "horizontal"
-	};
-};
-var TimeSliderRootBase = class extends HTMLElement {
-	constructor(..._args) {
-		super(..._args);
-		this._core = null;
-	}
-	static {
-		this.observedAttributes = ["orientation"];
-	}
-	get currentTime() {
-		return this._state?.currentTime ?? 0;
-	}
-	get duration() {
-		return this._state?.duration ?? 0;
-	}
-	get orientation() {
-		return this.getAttribute("orientation") || "horizontal";
-	}
-	attributeChangedCallback(name, _oldValue, _newValue) {
-		if (name === "orientation" && this._state) this._render(getTimeSliderRootProps(this._state, this), this._state);
-	}
-	_update(_props, state) {
-		this._state = state;
-		if (state && !this._core) {
-			this._core = new TimeSlider();
-			this._core.subscribe(() => this._render(getTimeSliderRootProps(state, this), state));
-			this._core.attach(this);
-			state.core = this._core;
-		}
-		this._core?.setState(state);
-	}
-	_render(props, state) {
-		const coreState = state?.core?.getState();
-		if (!coreState) return;
-		this.style.setProperty("--slider-fill", `${Math.round(coreState._fillWidth)}%`);
-		this.style.setProperty("--slider-pointer", `${Math.round(coreState._pointerWidth)}%`);
-		setAttributes(this, props);
-	}
-};
-var TimeSliderTrackBase = class extends HTMLElement {
-	constructor() {
-		super();
-	}
-	connectedCallback() {
-		const rootElement = this.closest("media-time-slider-root");
-		if (rootElement?._state?.core) rootElement._state.core.setState({ _trackElement: this });
-	}
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.width = "100%";
-			this.style.removeProperty("height");
-		} else {
-			this.style.height = "100%";
-			this.style.removeProperty("width");
-		}
-	}
-};
-var TimeSliderProgressBase = class extends HTMLElement {
-	constructor() {
-		super();
-		this.style.position = "absolute";
-		this.style.width = "var(--slider-fill, 0%)";
-		this.style.height = "100%";
-	}
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.width = "var(--slider-fill, 0%)";
-			this.style.height = "100%";
-			this.style.top = "0";
-			this.style.removeProperty("bottom");
-		} else {
-			this.style.height = "var(--slider-fill, 0%)";
-			this.style.width = "100%";
-			this.style.bottom = "0";
-			this.style.removeProperty("top");
-		}
-	}
-};
-var TimeSliderPointerBase = class extends HTMLElement {
-	constructor() {
-		super();
-		this.style.position = "absolute";
-		this.style.width = "var(--slider-pointer, 0%)";
-		this.style.height = "100%";
-	}
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.width = "var(--slider-pointer, 0%)";
-			this.style.height = "100%";
-			this.style.top = "0";
-			this.style.removeProperty("bottom");
-		} else {
-			this.style.height = "var(--slider-pointer, 0%)";
-			this.style.width = "100%";
-			this.style.bottom = "0";
-			this.style.removeProperty("top");
-		}
-	}
-};
-var TimeSliderThumbBase = class extends HTMLElement {
-	constructor() {
-		super();
-		this.style.position = "absolute";
-	}
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.left = "var(--slider-fill, 0%)";
-			this.style.top = "50%";
-			this.style.transform = "translate(-50%, -50%)";
-		} else {
-			this.style.bottom = "var(--slider-fill, 0%)";
-			this.style.left = "50%";
-			this.style.transform = "translate(-50%, 50%)";
-		}
-	}
-};
-const useTimeSliderRootState = {
-	keys: timeSliderStateDefinition.keys,
-	transform: (rawState, mediaStore) => ({
-		...timeSliderStateDefinition.stateTransform(rawState),
-		...timeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),
-		core: null
-	})
-};
-const getTimeSliderTrackProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider-root");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-const getTimeSliderProgressProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider-root");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-const getTimeSliderPointerProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider-root");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-const getTimeSliderThumbProps = (_state, element) => {
-	const rootElement = element.closest("media-time-slider-root");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-const TimeSliderRoot = toConnectedHTMLComponent(TimeSliderRootBase, useTimeSliderRootState, getTimeSliderRootProps, "TimeSliderRoot");
-const TimeSliderTrack = toConnectedHTMLComponent(TimeSliderTrackBase, {
-	keys: [],
-	transform: () => ({})
-}, getTimeSliderTrackProps, "TimeSliderTrack");
-const TimeSliderProgress = toConnectedHTMLComponent(TimeSliderProgressBase, {
-	keys: [],
-	transform: () => ({})
-}, getTimeSliderProgressProps, "TimeSliderProgress");
-const TimeSliderPointer = toConnectedHTMLComponent(TimeSliderPointerBase, {
-	keys: [],
-	transform: () => ({})
-}, getTimeSliderPointerProps, "TimeSliderPointer");
-const TimeSliderThumb = toConnectedHTMLComponent(TimeSliderThumbBase, {
-	keys: [],
-	transform: () => ({})
-}, getTimeSliderThumbProps, "TimeSliderThumb");
-const TimeSlider$1 = Object.assign({}, {
-	Root: TimeSliderRoot,
-	Track: TimeSliderTrack,
-	Progress: TimeSliderProgress,
-	Pointer: TimeSliderPointer,
-	Thumb: TimeSliderThumb
-});
-if (!globalThis.customElements.get("media-time-slider-root")) globalThis.customElements.define("media-time-slider-root", TimeSliderRoot);
-if (!globalThis.customElements.get("media-time-slider-track")) globalThis.customElements.define("media-time-slider-track", TimeSliderTrack);
-if (!globalThis.customElements.get("media-time-slider-progress")) globalThis.customElements.define("media-time-slider-progress", TimeSliderProgress);
-if (!globalThis.customElements.get("media-time-slider-pointer")) globalThis.customElements.define("media-time-slider-pointer", TimeSliderPointer);
-if (!globalThis.customElements.get("media-time-slider-thumb")) globalThis.customElements.define("media-time-slider-thumb", TimeSliderThumb);
-
-//#endregion
-//#region src/components/media-tooltip.ts
-var MediaTooltipRoot = class extends HTMLElement {
-	#open = false;
-	#hoverTimeout = null;
-	#cleanup = null;
-	#arrowElement = null;
-	#mousePosition = {
-		x: 0,
-		y: 0
-	};
-	#transitionStatus = "initial";
-	constructor() {
-		super();
-		this.addEventListener("mouseenter", this);
-		this.addEventListener("mouseleave", this);
-		this.addEventListener("mousemove", this);
-	}
-	handleEvent(event) {
-		if (event.type === "mouseenter") this.#handleMouseEnter();
-		else if (event.type === "mouseleave") this.#handleMouseLeave();
-		else if (event.type === "mousemove") this.#handleMouseMove(event);
-	}
-	connectedCallback() {
-		this.#updateVisibility();
-	}
-	disconnectedCallback() {
-		this.#clearHoverTimeout();
-		this.#cleanup?.();
-		this.#transitionStatus = "unmounted";
-		this.#updateVisibility();
-	}
-	static get observedAttributes() {
-		return [
-			"delay",
-			"close-delay",
-			"track-cursor-axis"
-		];
-	}
-	get delay() {
-		return Number.parseInt(this.getAttribute("delay") ?? "0", 10);
-	}
-	get closeDelay() {
-		return Number.parseInt(this.getAttribute("close-delay") ?? "0", 10);
-	}
-	get trackCursorAxis() {
-		const value = this.getAttribute("track-cursor-axis");
-		return value === "x" || value === "y" || value === "both" ? value : void 0;
-	}
-	get #triggerElement() {
-		return this.querySelector("media-tooltip-trigger");
-	}
-	get #portalElement() {
-		return this.querySelector("media-tooltip-portal");
-	}
-	get #positionerElement() {
-		return this.#portalElement?.querySelector("media-tooltip-positioner");
-	}
-	get #popupElement() {
-		return this.#portalElement?.querySelector("media-tooltip-popup");
-	}
-	#setOpen(open) {
-		if (this.#open === open) return;
-		this.#open = open;
-		if (open) {
-			this.#transitionStatus = "initial";
-			requestAnimationFrame(() => {
-				this.#transitionStatus = "open";
-				this.#updateVisibility();
-			});
-		} else this.#transitionStatus = "close";
-		this.#updateVisibility();
-		if (open) this.#setupFloating();
-		else {
-			this.#cleanup?.();
-			this.#cleanup = null;
-		}
-	}
-	#updateVisibility() {
-		this.style.display = "contents";
-		if (this.#popupElement) {
-			const placement = this.#positionerElement?.side ?? "top";
-			this.#popupElement.setAttribute("data-side", placement);
-			this.#popupElement.toggleAttribute("data-starting-style", this.#transitionStatus === "initial");
-			this.#popupElement.toggleAttribute("data-open", this.#transitionStatus === "initial" || this.#transitionStatus === "open");
-			this.#popupElement.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
-			this.#popupElement.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
-		}
-		const triggerElement = this.#triggerElement?.firstElementChild;
-		if (triggerElement) triggerElement.toggleAttribute("data-popup-open", this.#open);
-	}
-	#setupFloating() {
-		if (!this.#triggerElement || !this.#popupElement) return;
-		const trigger = this.#triggerElement.firstElementChild;
-		const popup = this.#popupElement;
-		if (!trigger || !popup) return;
-		const placement = this.#positionerElement?.side ?? "top";
-		const sideOffset = this.#positionerElement?.sideOffset ?? 0;
-		const collisionPadding = this.#positionerElement?.collisionPadding ?? 0;
-		const mediaContainer = this.closest("media-container");
-		this.#arrowElement = popup.querySelector("media-tooltip-arrow");
-		const updatePosition = () => {
-			const middleware = [
-				offset(sideOffset),
-				flip(),
-				shift({
-					boundary: mediaContainer,
-					padding: collisionPadding
-				})
-			];
-			if (this.#arrowElement) middleware.push(arrow({ element: this.#arrowElement }));
-			computePosition(this.trackCursorAxis ? { getBoundingClientRect: () => {
-				const triggerRect = trigger.getBoundingClientRect();
-				if (this.trackCursorAxis === "x") return {
-					width: 0,
-					height: 0,
-					top: triggerRect.top,
-					right: this.#mousePosition.x,
-					bottom: triggerRect.bottom,
-					left: this.#mousePosition.x,
-					x: this.#mousePosition.x,
-					y: triggerRect.top
-				};
-				else if (this.trackCursorAxis === "y") return {
-					width: 0,
-					height: 0,
-					top: this.#mousePosition.y,
-					right: triggerRect.right,
-					bottom: this.#mousePosition.y,
-					left: triggerRect.left,
-					x: triggerRect.left,
-					y: this.#mousePosition.y
-				};
-				else return {
-					width: 0,
-					height: 0,
-					top: this.#mousePosition.y,
-					right: this.#mousePosition.x,
-					bottom: this.#mousePosition.y,
-					left: this.#mousePosition.x,
-					x: this.#mousePosition.x,
-					y: this.#mousePosition.y
-				};
-			} } : trigger, popup, {
-				placement,
-				middleware
-			}).then(({ x, y, middlewareData, placement: computedPlacement }) => {
-				Object.assign(popup.style, {
-					left: `${x}px`,
-					top: `${y}px`
-				});
-				popup.setAttribute("data-side", computedPlacement);
-				if (this.#arrowElement && middlewareData.arrow) {
-					const { x: arrowX, y: arrowY } = middlewareData.arrow;
-					Object.assign(this.#arrowElement.style, {
-						left: arrowX != null ? `${arrowX}px` : void 0,
-						top: arrowY != null ? `${arrowY}px` : void 0
-					});
-				}
-			});
-		};
-		updatePosition();
-		if (!this.trackCursorAxis) this.#cleanup = autoUpdate(trigger, popup, updatePosition);
-	}
-	#updatePosition() {
-		if (this.#open && this.trackCursorAxis) this.#setupFloating();
-	}
-	#clearHoverTimeout() {
-		if (this.#hoverTimeout) {
-			clearTimeout(this.#hoverTimeout);
-			this.#hoverTimeout = null;
-		}
-	}
-	#handleMouseEnter() {
-		this.#clearHoverTimeout();
-		this.#hoverTimeout = globalThis.setTimeout(() => {
-			this.#setOpen(true);
-		}, this.delay);
-	}
-	#handleMouseLeave() {
-		this.#clearHoverTimeout();
-		this.#hoverTimeout = globalThis.setTimeout(() => {
-			this.#setOpen(false);
-		}, this.closeDelay);
-	}
-	#handleMouseMove(event) {
-		if (this.trackCursorAxis) {
-			this.#mousePosition = {
-				x: event.clientX,
-				y: event.clientY
-			};
-			if (this.#open) this.#updatePosition();
-		}
-	}
-};
-var MediaTooltipTrigger = class extends HTMLElement {
-	connectedCallback() {
-		this.style.display = "contents";
-		const triggerElement = this.firstElementChild;
-		if (triggerElement) new MutationObserver((mutations) => {
-			mutations.forEach((mutation) => {
-				if (mutation.type === "attributes") {
-					const rootElement = this.closest("media-tooltip-root");
-					let popupElement = rootElement.querySelector("media-tooltip-popup");
-					if (!popupElement) {
-						const portalElement = rootElement.querySelector("media-tooltip-portal");
-						if (!portalElement) return;
-						popupElement = portalElement.querySelector("media-tooltip-popup");
-						if (!popupElement) return;
-					}
-					const attributeName = mutation.attributeName;
-					if (!attributeName || !attributeName.startsWith("data-")) return;
-					const attributeValue = triggerElement.getAttribute(attributeName);
-					if (attributeValue !== null) popupElement.setAttribute(attributeName, attributeValue);
-					else popupElement.removeAttribute(attributeName);
-				}
-			});
-		}).observe(triggerElement, { attributes: true });
-	}
-};
-var MediaTooltipPortal = class extends HTMLElement {
-	#portal = null;
-	connectedCallback() {
-		this.style.display = "contents";
-		this.#setupPortal();
-	}
-	disconnectedCallback() {
-		this.#cleanupPortal();
-	}
-	querySelector(selector) {
-		return this.#portal?.querySelector(selector) ?? null;
-	}
-	#setupPortal() {
-		const portalId = this.getAttribute("root-id") ?? "@default_portal_id";
-		if (!portalId) return;
-		const portalContainer = this.getRootNode().getElementById(portalId) ?? this.getRootNode().querySelector("media-container")?.shadowRoot?.getElementById(portalId) ? this.getRootNode().querySelector("media-container") : void 0;
-		if (!portalContainer) return;
-		this.#portal = document.createElement("div");
-		this.#portal.slot = "portal";
-		this.#portal.id = uniqueId();
-		portalContainer.append(this.#portal);
-		this.#portal.append(...this.children);
-	}
-	#cleanupPortal() {
-		if (!this.#portal) return;
-		this.append(...this.#portal.children);
-		this.#portal.remove();
-		this.#portal = null;
-	}
-};
-var MediaTooltipPositioner = class extends HTMLElement {
-	connectedCallback() {
-		this.style.display = "contents";
-		const popup = this.firstElementChild;
-		if (popup) Object.assign(popup.style, {
-			position: "absolute",
-			top: "0",
-			left: "0"
-		});
-	}
-	get side() {
-		return this.getAttribute("side") ?? "top";
-	}
-	get sideOffset() {
-		return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
-	}
-	get collisionPadding() {
-		return Number.parseInt(this.getAttribute("collision-padding") ?? "0", 10);
-	}
-};
-var MediaTooltipPopup = class extends HTMLElement {
-	connectedCallback() {
-		this.setAttribute("role", "tooltip");
-	}
-};
-var MediaTooltipArrow = class extends HTMLElement {
-	connectedCallback() {
-		this.setAttribute("aria-hidden", "true");
-	}
-};
-if (!globalThis.customElements.get("media-tooltip-root")) globalThis.customElements.define("media-tooltip-root", MediaTooltipRoot);
-if (!globalThis.customElements.get("media-tooltip-trigger")) globalThis.customElements.define("media-tooltip-trigger", MediaTooltipTrigger);
-if (!globalThis.customElements.get("media-tooltip-portal")) globalThis.customElements.define("media-tooltip-portal", MediaTooltipPortal);
-if (!globalThis.customElements.get("media-tooltip-positioner")) globalThis.customElements.define("media-tooltip-positioner", MediaTooltipPositioner);
-if (!globalThis.customElements.get("media-tooltip-popup")) globalThis.customElements.define("media-tooltip-popup", MediaTooltipPopup);
-if (!globalThis.customElements.get("media-tooltip-arrow")) globalThis.customElements.define("media-tooltip-arrow", MediaTooltipArrow);
-const Tooltip = {
-	Root: MediaTooltipRoot,
-	Trigger: MediaTooltipTrigger,
-	Portal: MediaTooltipPortal,
-	Positioner: MediaTooltipPositioner,
-	Popup: MediaTooltipPopup,
-	Arrow: MediaTooltipArrow
-};
-
-//#endregion
-//#region src/components/media-volume-slider.ts
-/**
-* VolumeSlider Root props hook - equivalent to React's useVolumeSliderRootProps
-* Handles element attributes and properties based on state
-*/
-const getVolumeSliderRootProps = (state, element) => {
-	const volumeText = `${Math.round(state.muted ? 0 : state.volume * 100)}%`;
-	return {
-		role: "slider",
-		tabindex: element.getAttribute("tabindex") ?? "0",
-		"data-muted": state.muted.toString(),
-		"data-volume-level": state.volumeLevel,
-		"data-orientation": element.orientation || "horizontal",
-		"aria-label": "Volume",
-		"aria-valuemin": "0",
-		"aria-valuemax": "100",
-		"aria-valuetext": volumeText,
-		"aria-orientation": element.orientation || "horizontal"
-	};
-};
-var VolumeSliderRootBase = class extends HTMLElement {
-	constructor(..._args) {
-		super(..._args);
-		this._core = null;
-	}
-	static {
-		this.observedAttributes = ["orientation"];
-	}
-	get volume() {
-		return this._state?.volume;
-	}
-	get muted() {
-		return this._state?.muted ?? false;
-	}
-	get volumeLevel() {
-		return this._state?.volumeLevel ?? "high";
-	}
-	get orientation() {
-		return this.getAttribute("orientation") || "horizontal";
-	}
-	attributeChangedCallback(name, _oldValue, _newValue) {
-		if (name === "orientation" && this._state) this._render(getVolumeSliderRootProps(this._state, this), this._state);
-	}
-	_update(_props, state) {
-		this._state = state;
-		if (state && !this._core) {
-			this._core = new VolumeSlider();
-			this._core.subscribe(() => this._render(getVolumeSliderRootProps(state, this), state));
-			this._core.attach(this);
-			state.core = this._core;
-		}
-		this._core?.setState(state);
-	}
-	_render(props, state) {
-		const coreState = state?.core?.getState();
-		if (!coreState) return;
-		this.style.setProperty("--slider-fill", `${coreState._fillWidth.toFixed(3)}%`);
-		this.style.setProperty("--slider-pointer", `${coreState._pointerWidth.toFixed(3)}%`);
-		props["aria-valuenow"] = coreState._fillWidth.toString();
-		setAttributes(this, props);
-	}
-};
-/**
-* VolumeSlider Track component - Track element that captures pointer events
-*/
-var VolumeSliderTrackBase = class extends HTMLElement {
-	constructor() {
-		super();
-	}
-	connectedCallback() {
-		const rootElement = this.closest("media-volume-slider-root");
-		if (rootElement?._state?.core) rootElement._state.core.setState({ _trackElement: this });
-	}
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.width = "100%";
-			this.style.removeProperty("height");
-		} else {
-			this.style.height = "100%";
-			this.style.removeProperty("width");
-		}
-	}
-};
-/**
-* VolumeSlider Progress component - Shows current progress
-*/
-var VolumeSliderProgressBase = class extends HTMLElement {
-	constructor() {
-		super();
-		this.style.position = "absolute";
-		this.style.width = "var(--slider-fill, 0%)";
-		this.style.height = "100%";
-	}
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.width = "var(--slider-fill, 0%)";
-			this.style.height = "100%";
-			this.style.top = "0";
-			this.style.removeProperty("bottom");
-		} else {
-			this.style.height = "var(--slider-fill, 0%)";
-			this.style.width = "100%";
-			this.style.bottom = "0";
-			this.style.removeProperty("top");
-		}
-	}
-};
-/**
-* VolumeSlider Thumb component - Draggable thumb element
-*/
-var VolumeSliderThumbBase = class extends HTMLElement {
-	constructor() {
-		super();
-		this.style.position = "absolute";
-	}
-	_update(props, _state) {
-		setAttributes(this, props);
-		if (props["data-orientation"] === "horizontal") {
-			this.style.left = "var(--slider-fill, 0%)";
-			this.style.top = "50%";
-			this.style.transform = "translate(-50%, -50%)";
-		} else {
-			this.style.bottom = "var(--slider-fill, 0%)";
-			this.style.left = "50%";
-			this.style.transform = "translate(-50%, 50%)";
-		}
-	}
-};
-/**
-* VolumeSlider Root state hook - equivalent to React's useVolumeSliderRootState
-* Handles media store state subscription and transformation
-*/
-const useVolumeSliderRootState = {
-	keys: volumeSliderStateDefinition.keys,
-	transform: (rawState, mediaStore) => ({
-		...volumeSliderStateDefinition.stateTransform(rawState),
-		...volumeSliderStateDefinition.createRequestMethods(mediaStore.dispatch),
-		core: null
-	})
-};
-/**
-* VolumeSlider Track props hook
-*/
-const getVolumeSliderTrackProps = (_state, element) => {
-	const rootElement = element.closest("media-volume-slider-root");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-/**
-* VolumeSlider Progress props hook
-*/
-const getVolumeSliderProgressProps = (_state, element) => {
-	const rootElement = element.closest("media-volume-slider-root");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-/**
-* VolumeSlider Thumb props hook
-*/
-const getVolumeSliderThumbProps = (_state, element) => {
-	const rootElement = element.closest("media-volume-slider-root");
-	return { "data-orientation": rootElement?.orientation || "horizontal" };
-};
-/**
-* Connected VolumeSlider Root component using hook-style architecture
-*/
-const VolumeSliderRoot = toConnectedHTMLComponent(VolumeSliderRootBase, useVolumeSliderRootState, getVolumeSliderRootProps, "VolumeSliderRoot");
-/**
-* Connected VolumeSlider Track component
-*/
-const VolumeSliderTrack = toConnectedHTMLComponent(VolumeSliderTrackBase, {
-	keys: [],
-	transform: () => ({})
-}, getVolumeSliderTrackProps, "VolumeSliderTrack");
-/**
-* Connected VolumeSlider Progress component
-*/
-const VolumeSliderProgress = toConnectedHTMLComponent(VolumeSliderProgressBase, {
-	keys: [],
-	transform: () => ({})
-}, getVolumeSliderProgressProps, "VolumeSliderProgress");
-/**
-* Connected VolumeSlider Thumb component
-*/
-const VolumeSliderThumb = toConnectedHTMLComponent(VolumeSliderThumbBase, {
-	keys: [],
-	transform: () => ({})
-}, getVolumeSliderThumbProps, "VolumeSliderThumb");
-/**
-* Compound VolumeSlider component object
-*/
-const VolumeSlider$1 = Object.assign({}, {
-	Root: VolumeSliderRoot,
-	Track: VolumeSliderTrack,
-	Progress: VolumeSliderProgress,
-	Thumb: VolumeSliderThumb
-});
-if (!globalThis.customElements.get("media-volume-slider-root")) globalThis.customElements.define("media-volume-slider-root", VolumeSliderRoot);
-if (!globalThis.customElements.get("media-volume-slider-track")) globalThis.customElements.define("media-volume-slider-track", VolumeSliderTrack);
-if (!globalThis.customElements.get("media-volume-slider-progress")) globalThis.customElements.define("media-volume-slider-progress", VolumeSliderProgress);
-if (!globalThis.customElements.get("media-volume-slider-thumb")) globalThis.customElements.define("media-volume-slider-thumb", VolumeSliderThumb);
-
-//#endregion
-//#region src/media/media-container.ts
-function getTemplateHTML$1() {
-	return `
-    <slot name="media"></slot>
-    <slot></slot>
-    <div id="@default_portal_id" style={ position: absolute; zIndex: 10; }>
-      <slot name="portal"></slot>
-    </div>
-  `;
-}
-const CustomElementConsumer = ConsumerMixin(HTMLElement);
-var MediaContainer = class extends CustomElementConsumer {
-	static {
-		this.shadowRootOptions = { mode: "open" };
-	}
-	static {
-		this.getTemplateHTML = getTemplateHTML$1;
-	}
-	constructor() {
-		super();
-		this._paused = true;
-		this.contexts = { mediaStore: (mediaStore) => {
-			this._mediaStore = mediaStore;
-			this._handleMediaSlotChange();
-			this._registerContainerStateOwner();
-			this._subscribeToPlayState();
-		} };
-		this._registerContainerStateOwner = () => {
-			if (!this._mediaStore) return;
-			this._mediaStore.dispatch({
-				type: "containerstateownerchangerequest",
-				detail: this
-			});
-		};
-		this._unregisterContainerStateOwner = () => {
-			if (!this._mediaStore) return;
-			this._mediaStore.dispatch({
-				type: "containerstateownerchangerequest",
-				detail: null
-			});
-		};
-		this._handleMediaSlotChange = () => {
-			const media = this._mediaSlot.assignedElements({ flatten: true })[0];
-			this._mediaStore.dispatch({
-				type: "mediastateownerchangerequest",
-				detail: media
-			});
-		};
-		this._handleClick = (event) => {
-			if (!this._mediaStore) return;
-			if (!["video", "audio"].includes(event.target.localName || "")) return;
-			if (this._paused) this._mediaStore.dispatch({ type: "playrequest" });
-			else this._mediaStore.dispatch({ type: "pauserequest" });
-		};
-		this._subscribeToPlayState = () => {
-			if (!this._mediaStore) return;
-			this._mediaStore.subscribe((state) => {
-				this._paused = state.paused ?? true;
-			});
-		};
-		if (!this.shadowRoot) {
-			this.attachShadow(this.constructor.shadowRootOptions);
-			this.shadowRoot.innerHTML = this.constructor.getTemplateHTML();
-		}
-		this._mediaSlot = this.shadowRoot.querySelector("slot[name=media]");
-		this._mediaSlot.addEventListener("slotchange", this._handleMediaSlotChange);
-		this.addEventListener("click", this._handleClick);
-	}
-	connectedCallback() {
-		super.connectedCallback?.();
-		this._registerContainerStateOwner();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback?.();
-		this._unregisterContainerStateOwner();
-	}
-};
-if (!globalThis.customElements.get("media-container")) globalThis.customElements.define("media-container", MediaContainer);
-
-//#endregion
-//#region src/media/media-provider.ts
-const ProviderHTMLElement = ProviderMixin(HTMLElement);
-var MediaProvider = class extends ProviderHTMLElement {
-	constructor(..._args) {
-		super(..._args);
-		this.contexts = { mediaStore: () => {
-			return createMediaStore();
-		} };
-	}
-};
-customElements.define("media-provider", MediaProvider);
-
-//#endregion
-//#region src/media/media-skin.ts
-function getTemplateHTML() {
-	return `
-    <style>
-      :host {
-        display: block;
-      }
-
-      media-container {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-    </style>
-    <slot></slot>
-  `;
-}
-var MediaSkin = class extends HTMLElement {
-	static {
-		this.shadowRootOptions = { mode: "open" };
-	}
-	static {
-		this.getTemplateHTML = getTemplateHTML;
-	}
-	constructor() {
-		super();
-		if (!this.shadowRoot) {
-			this.attachShadow(this.constructor.shadowRootOptions);
-			this.shadowRoot.innerHTML = this.constructor.getTemplateHTML();
-		}
-	}
-};
-if (!customElements.get("media-skin")) customElements.define("media-skin", MediaSkin);
-
-//#endregion
-export { Tooltip as a, PlayButton as c, DurationDisplay as d, CurrentTimeDisplay as f, VolumeSlider$1 as i, MuteButton as l, MediaProvider as n, TimeSlider$1 as o, toConnectedHTMLComponent as p, MediaContainer as r, Popover as s, MediaSkin as t, FullscreenButton as u };
-//# sourceMappingURL=media-skin-BlXPC9wG.js.map