@videojs/html 10.0.0-beta.2 → 10.0.0-beta.4

package/cdn/video.dev.js

@@ -556,14 +556,11 @@ const controlsFeature = definePlayerFeature({
 			pointerDownTime = Date.now();
 		}
 		function onPointerUp(event) {
-			if (event.pointerType === "touch" && Date.now() - pointerDownTime < TAP_THRESHOLD) if (get().controlsVisible) {
-				clearIdle();
-				set({
-					userActive: false,
-					controlsVisible: computeVisible(false)
-				});
+			if (event.pointerType === "touch" && Date.now() - pointerDownTime < TAP_THRESHOLD) {
+				const isMediaOrContainer = [media, container].includes(event.target);
+				if (get().controlsVisible && isMediaOrContainer) setInactive();
+				else setActive();
 			} else setActive();
-			else setActive();
 		}
 		function onPlaybackChange() {
 			const { userActive } = get();
@@ -575,7 +572,7 @@ const controlsFeature = definePlayerFeature({
 		listen(container, "pointerup", onPointerUp, { signal });
 		listen(container, "keyup", setActive, { signal });
 		listen(container, "focusin", setActive, { signal });
-		listen(container, "pointerleave", setInactive, { signal });
+		listen(container, "mouseleave", setInactive, { signal });
 		listen(media, "play", onPlaybackChange, { signal });
 		listen(media, "pause", onPlaybackChange, { signal });
 		listen(media, "ended", onPlaybackChange, { signal });
@@ -667,6 +664,10 @@ async function exitFullscreen() {
 
 //#endregion
 //#region ../core/dist/dev/dom/presentation/pip.js
+function resolveMediaTarget(media) {
+	const target = media.target;
+	return target instanceof HTMLMediaElement ? target : media;
+}
 /**
 * Check if Picture-in-Picture is supported on this platform.
 *
@@ -684,8 +685,9 @@ function isPictureInPictureEnabled() {
 * Check if Picture-in-Picture is currently active for a media element.
 */
 function isPictureInPictureElement(media) {
-	if (document.pictureInPictureElement === media) return true;
-	return media.webkitPresentationMode === "picture-in-picture";
+	const target = resolveMediaTarget(media);
+	if (document.pictureInPictureElement === target) return true;
+	return target.webkitPresentationMode === "picture-in-picture";
 }
 /**
 * Request Picture-in-Picture mode.
@@ -694,7 +696,7 @@ function isPictureInPictureElement(media) {
 * WebKit presentation mode.
 */
 async function requestPictureInPicture(media) {
-	const video = media;
+	const video = resolveMediaTarget(media);
 	if (isFunction(video.requestPictureInPicture)) {
 		await video.requestPictureInPicture();
 		return;
@@ -712,13 +714,14 @@ async function requestPictureInPicture(media) {
 * WebKit presentation mode.
 */
 async function exitPictureInPicture(media) {
-	if (document.pictureInPictureElement && isFunction(document.exitPictureInPicture)) {
+	if (isFunction(document.exitPictureInPicture)) try {
 		await document.exitPictureInPicture();
 		return;
-	}
+	} catch {}
 	if (media) {
-		const video = media;
-		if (video.webkitPresentationMode === "picture-in-picture" && isFunction(video.webkitSetPresentationMode)) {
+		const video = resolveMediaTarget(media);
+		const mode = video.webkitPresentationMode;
+		if (isFunction(video.webkitSetPresentationMode) && (!mode || mode === "picture-in-picture")) {
 			video.webkitSetPresentationMode("inline");
 			return;
 		}
@@ -2493,13 +2496,13 @@ function createContainerMixin(context) {
 			connectedCallback() {
 				super.connectedCallback();
 				this.#observer = new MutationObserver((records) => {
-					if (records.some(hasMediaNode)) this.#attachMedia();
+					if (records.some(hasMediaElement)) this.#attachMedia();
 				});
 				this.#observer.observe(this, {
 					childList: true,
 					subtree: true,
 					attributes: true,
-					attributeFilter: ["data-media-element"]
+					attributeFilter: ["name"]
 				});
 				this.addEventListener("slotchange", this.#onSlotChange);
 				this.#attachMedia();
@@ -2517,18 +2520,24 @@ function createContainerMixin(context) {
 			#getSlottedMedia() {
 				const slot = this.querySelector("slot[name=\"media\"]");
 				if (!slot) return null;
-				for (const el of slot.assignedElements({ flatten: true })) if (el instanceof HTMLMediaElement) return el;
+				for (const el of slot.assignedElements({ flatten: true })) if (isMediaElement(el)) return el;
+				return null;
+			}
+			#findMediaElement() {
+				const media = Array.from(this.children).find(isMediaElement);
+				if (media) return media;
 				return null;
 			}
 			#attachMedia() {
 				const store = this.#contextStore ?? this.store;
 				if (!store) return;
-				const media = this.querySelector("video, audio, [data-media-element]") ?? this.#getSlottedMedia();
+				const media = this.querySelector("video, audio") ?? this.#findMediaElement() ?? this.#getSlottedMedia();
 				if (!media) {
 					this.#detach();
 					this.#detach = noop;
 					return;
 				}
+				if (isCustomMediaElement(media)) globalThis.customElements?.upgrade?.(media);
 				const target = {
 					media,
 					container: this
@@ -2543,13 +2552,19 @@ function createContainerMixin(context) {
 		return PlayerContainerElement;
 	};
 }
-function isMediaNode(node) {
-	return node instanceof HTMLMediaElement || node instanceof Element && node.hasAttribute("data-media-element");
+function isMediaElement(node) {
+	return node instanceof HTMLMediaElement || isCustomMediaElement(node);
+}
+function isCustomMediaElement(node) {
+	return node instanceof HTMLElement && (node.localName.endsWith("-audio") || node.localName.endsWith("-video"));
 }
-function hasMediaNode(record) {
-	if (record.type === "attributes" && record.target instanceof Element) return record.target.hasAttribute("data-media-element");
-	for (const node of record.addedNodes) if (isMediaNode(node)) return true;
-	for (const node of record.removedNodes) if (isMediaNode(node)) return true;
+function isMediaSlotElement(node) {
+	return node instanceof HTMLSlotElement && node.name === "media";
+}
+function hasMediaElement(record) {
+	if (isMediaSlotElement(record.target)) return true;
+	for (const node of record.addedNodes) if (isMediaElement(node) || isMediaSlotElement(node)) return true;
+	for (const node of record.removedNodes) if (isMediaElement(node) || isMediaSlotElement(node)) return true;
 	return false;
 }
 
@@ -3248,36 +3263,17 @@ function renderIcon(name, attrs) {
 }
 
 //#endregion
-//#region src/define/skin-mixin.ts
-/**
-* Light DOM stylesheet that bridges CSS custom properties set by skins
-* to native WebKit text track pseudo-elements on the slotted `<video>`.
-*
-* `::slotted(video)::-webkit-media-text-track-container` is invalid per
-* CSS spec, so this bridge lives in light DOM where it can directly
-* target the video element's pseudo-elements.
-*/
-const NATIVE_CAPTION_BRIDGE_CSS = `
-.media-skin > video::-webkit-media-text-track-container {
-  transition: transform var(--media-caption-track-duration, 150ms) ease-out;
-  transition-delay: var(--media-caption-track-delay, 600ms);
-  transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);
-  z-index: var(--media-caption-track-z, 1);
-  font-family: inherit;
-}
+//#region inline-css:src/define/base.js
+var base_default = "video-player {\n  display: contents;\n}\n\nvideo-player video,\nvideo-player hls-video,\nvideo-player simple-hls-video {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\nvideo-player video::-webkit-media-text-track-container {\n  transition: transform var(--media-caption-track-duration, 150ms) ease-out;\n  transition-delay: var(--media-caption-track-delay, 600ms);\n  transform: translateY(var(--media-caption-track-y, 0)) scale(0.98);\n  z-index: var(--media-caption-track-z, 1);\n  font-family: inherit;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  video-player video::-webkit-media-text-track-container {\n    transition-duration: 50ms;\n  }\n}\n";
 
-@media (prefers-reduced-motion: reduce) {
-  .media-skin > video::-webkit-media-text-track-container {
-    transition-duration: 50ms;
-  }
-}
-`;
-const BRIDGE_ID = "media-caption-bridge";
-function ensureCaptionBridge() {
-	if (document.getElementById(BRIDGE_ID)) return;
+//#endregion
+//#region src/define/skin-mixin.ts
+const STYLES_ID = "__media-styles";
+function ensureStyles() {
+	if (document.getElementById(STYLES_ID)) return;
 	const style = document.createElement("style");
-	style.id = BRIDGE_ID;
-	style.textContent = NATIVE_CAPTION_BRIDGE_CSS;
+	style.id = STYLES_ID;
+	style.textContent = base_default;
 	document.head.appendChild(style);
 }
 /**
@@ -3285,8 +3281,8 @@ function ensureCaptionBridge() {
 * `getTemplateHTML` method into a shadow root. Native `<slot>` elements
 * handle light DOM projection automatically.
 *
-* When `static styles` is set, the stylesheet is adopted into the shadow
-* root via `adoptedStyleSheets`.
+* When `static styles` is set, the stylesheet is adopted into the
+* shadow root via `adoptedStyleSheets`.
 */
 function SkinMixin(BaseClass) {
 	class SkinElement extends BaseClass {
@@ -3295,8 +3291,7 @@ function SkinMixin(BaseClass) {
 		}
 		constructor(...args) {
 			super(...args);
-			this.classList.add("media-skin");
-			ensureCaptionBridge();
+			ensureStyles();
 			if (!this.shadowRoot) {
 				const ctor = this.constructor;
 				this.attachShadow(ctor.shadowRootOptions);
@@ -3316,7 +3311,7 @@ function createStyles(css) {
 
 //#endregion
 //#region inline-css:src/define/video/skin.js
-var skin_default = "/* ==========================================================================\n   Icon State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state icon buttons.\n   Uses :is() with both element selectors (for HTML custom element wrappers)\n   and class selectors (for React rendered SVG elements).\n   ========================================================================== */\n\n/* --- All icons hidden by default --- */\n\n.media-button--play .media-icon--restart,\n.media-button--play .media-icon--play,\n.media-button--play .media-icon--pause,\n.media-button--mute .media-icon--volume-off,\n.media-button--mute .media-icon--volume-low,\n.media-button--mute .media-icon--volume-high,\n.media-button--fullscreen .media-icon--fullscreen-enter,\n.media-button--fullscreen .media-icon--fullscreen-exit,\n.media-button--captions .media-icon--captions-off,\n.media-button--captions .media-icon--captions-on {\n  display: none;\n  opacity: 0;\n}\n\n/* --- Active icon per state --- */\n\n/* Play: ended → restart */\n.media-button--play[data-ended] .media-icon--restart,\n/* Play: paused (not ended) → play */\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\n/* Play: playing (not paused, not ended) → pause */\n.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,\n/* Mute: muted → volume off */\n.media-button--mute[data-muted] .media-icon--volume-off,\n/* Mute: volume low (not muted) → volume low */\n.media-button--mute:not([data-muted])[data-volume-level=\"low\"] .media-icon--volume-low,\n/* Mute: volume high (not muted, not low) → volume high */\n.media-button--mute:not([data-muted]):not([data-volume-level=\"low\"]) .media-icon--volume-high,\n/* Fullscreen: not fullscreen → enter */\n.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,\n/* Fullscreen: fullscreen → exit */\n.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,\n/* Captions: not active → captions off */\n.media-button--captions:not([data-active]) .media-icon--captions-off,\n/* Captions: active → captions on */\n.media-button--captions[data-active] .media-icon--captions-on {\n  display: block;\n  opacity: 1;\n}\n\n/* ==========================================================================\n   Tooltip Label State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state tooltip labels.\n   Uses adjacent sibling selectors to match button state → tooltip content.\n   ========================================================================== */\n\n/* --- All multi-state labels hidden by default --- */\n\n.media-tooltip-label {\n  display: none;\n}\n\n/* --- Active label per state --- */\n\n/* Play: ended → replay */\n.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,\n/* Play: paused (not ended) → play */\n  .media-button--play:not([data-ended])[data-paused] + .media-tooltip\n  .media-tooltip-label--play,\n/* Play: playing (not paused, not ended) → pause */\n  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip\n  .media-tooltip-label--pause,\n/* Fullscreen: not fullscreen → enter */\n  .media-button--fullscreen:not([data-fullscreen]) + .media-tooltip\n  .media-tooltip-label--enter-fullscreen,\n/* Fullscreen: fullscreen → exit */\n  .media-button--fullscreen[data-fullscreen] + .media-tooltip\n  .media-tooltip-label--exit-fullscreen,\n/* Captions: not active → enable */\n  .media-button--captions:not([data-active]) + .media-tooltip\n  .media-tooltip-label--enable-captions,\n/* Captions: active → disable */\n  .media-button--captions[data-active] + .media-tooltip\n  .media-tooltip-label--disable-captions,\n/* PiP: not in pip → enter */\n  .media-button--pip:not([data-pip]) + .media-tooltip\n  .media-tooltip-label--enter-pip,\n/* PiP: in pip → exit */\n  .media-button--pip[data-pip] + .media-tooltip\n  .media-tooltip-label--exit-pip {\n  display: block;\n}\n\n/* ==========================================================================\n   Reset\n   ========================================================================== */\n\n.media-default-skin *,\n.media-default-skin *::before,\n.media-default-skin *::after {\n  box-sizing: border-box;\n  margin: 0;\n}\n.media-default-skin img,\n.media-default-skin video,\n.media-default-skin svg {\n  display: block;\n  max-width: 100%;\n}\n.media-default-skin button {\n  font: inherit;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .media-default-skin {\n    interpolate-size: allow-keywords;\n  }\n}\n\n/* ==========================================================================\n   Root Container\n   ========================================================================== */\n\n.media-default-skin {\n  position: relative;\n  isolation: isolate;\n  display: block;\n  container: media-root / inline-size;\n  border-radius: var(--media-border-radius, 2rem);\n  font-family:\n    Inter Variable,\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    sans-serif;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  letter-spacing: normal;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n\n  &:fullscreen {\n    border-radius: 0;\n  }\n}\n\n/* ==========================================================================\n   Surface (shared glass effect for tooltips, popovers, controls)\n   ========================================================================== */\n\n.media-default-skin .media-surface {\n  background-color: var(--media-surface-background-color);\n  backdrop-filter: var(--media-surface-backdrop-filter);\n  box-shadow:\n    inset 0 0 0 1px var(--media-surface-inner-border-color),\n    0 1px 3px 0 var(--media-surface-shadow-color),\n    0 1px 2px -1px var(--media-surface-shadow-color);\n\n  /* Inner border ring */\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    border-radius: inherit;\n    box-shadow: 0 0 0 1px var(--media-surface-outer-border-color);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-transparency: reduce) {\n    background-color: oklch(from var(--media-surface-background-color) l c h / 0.7);\n  }\n\n  @media (prefers-contrast: more) {\n    background-color: oklch(from var(--media-surface-background-color) l c h / 0.9);\n  }\n}\n\n/* ==========================================================================\n   Media Element\n   ========================================================================== */\n\n.media-default-skin ::slotted(video),\n.media-default-skin video {\n  display: block;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--media-border-radius, 2rem);\n}\n\n/* ==========================================================================\n   Poster Image\n   ========================================================================== */\n\n.media-default-skin > img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  object-fit: cover;\n  transition: opacity 0.25s;\n  pointer-events: none;\n\n  &:not([data-visible]) {\n    opacity: 0;\n  }\n}\n\n/* ==========================================================================\n   Overlay / Scrim\n   ========================================================================== */\n\n.media-default-skin .media-overlay {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));\n  backdrop-filter: blur(0) saturate(1.2) brightness(0.9);\n  opacity: 0;\n  transition-property: opacity, backdrop-filter;\n  transition-duration: 300ms;\n  transition-delay: 500ms;\n  transition-timing-function: ease-out;\n  pointer-events: none;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 100ms;\n  }\n}\n\n.media-default-skin .media-controls[data-visible] ~ .media-overlay,\n.media-default-skin .media-error[data-open] ~ .media-overlay {\n  opacity: 1;\n  transition-duration: 150ms;\n  transition-delay: 0ms;\n}\n\n.media-default-skin .media-error[data-open] ~ .media-overlay {\n  backdrop-filter: blur(8px) saturate(1.2) brightness(0.9);\n}\n\n/* ==========================================================================\n   Buffering Indicator\n   ========================================================================== */\n\n.media-default-skin .media-buffering-indicator {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  color: oklch(1 0 0);\n  pointer-events: none;\n\n  &[data-visible] {\n    display: flex;\n  }\n\n  .media-surface {\n    padding: 0.25rem;\n    border-radius: 100%;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-default-skin .media-error {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.media-default-skin .media-error__dialog {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  max-width: 18rem;\n  padding: 0.75rem;\n  border-radius: 1.75rem;\n  color: oklch(1 0 0);\n  font-size: 0.875rem;\n  transition-property: opacity, transform;\n  transition-duration: 500ms;\n  transition-delay: 100ms;\n  transition-timing-function: linear(\n    0,\n    0.034 1.5%,\n    0.763 9.7%,\n    1.066 13.9%,\n    1.198 19.9%,\n    1.184 21.8%,\n    0.963 37.5%,\n    0.997 50.9%,\n    1\n  );\n\n  /* Simple, fast transition for reduced motion users */\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 100ms;\n    transition-delay: 0ms;\n    transition-timing-function: ease-out;\n  }\n}\n\n.media-default-skin .media-error[data-starting-style] .media-error__dialog,\n.media-default-skin .media-error[data-ending-style] .media-error__dialog {\n  opacity: 0;\n  transform: scale(0.5);\n}\n\n.media-default-skin .media-error__content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.5rem 0.5rem 0.375rem;\n}\n\n.media-default-skin .media-error__title {\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.media-default-skin .media-error__description {\n  opacity: 0.7;\n}\n\n.media-default-skin .media-error__actions {\n  display: flex;\n  gap: 0.5rem;\n\n  & > * {\n    flex: 1;\n  }\n}\n\n/* ==========================================================================\n   Controls\n   ========================================================================== */\n\n.media-default-skin .media-controls {\n  container: media-controls / inline-size;\n  display: flex;\n  align-items: center;\n  gap: 0.075rem;\n  padding: 0.175rem;\n  border-radius: calc(infinity * 1px);\n  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.25));\n  --media-controls-current-shadow-color-subtle: oklch(\n    from var(--media-controls-current-shadow-color) l c h /\n    calc(alpha * 0.4)\n  );\n  text-shadow: 0 0 1px var(--media-controls-current-shadow-color);\n\n  @container media-root (width > 40rem) {\n    gap: 0.125rem;\n    padding: 0.25rem;\n  }\n}\n\n/* ==========================================================================\n   Time Display\n   ========================================================================== */\n\n.media-default-skin .media-time {\n  container: media-time / inline-size;\n  display: flex;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n  padding-inline: 0.5rem;\n\n  & .media-time__value:first-child {\n    display: none;\n\n    @container media-time (width > 18rem) {\n      display: block;\n    }\n  }\n}\n\n.media-default-skin .media-time__value {\n  font-variant-numeric: tabular-nums;\n}\n\n/* ==========================================================================\n   Buttons\n   ========================================================================== */\n\n/* Base button */\n.media-default-skin .media-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0.5rem 1rem;\n  background: oklch(1 0 0);\n  border: none;\n  border-radius: calc(infinity * 1px);\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  color: oklch(0 0 0);\n  font-weight: 500;\n  text-align: center;\n  transition-property: background-color, color, outline-offset, transform;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  cursor: pointer;\n  user-select: none;\n\n  &:focus-visible {\n    outline-color: oklch(62.3% 0.214 259.815);\n    outline-offset: 2px;\n  }\n\n  &[disabled] {\n    opacity: 0.5;\n    filter: grayscale(1);\n    cursor: not-allowed;\n  }\n\n  &[data-availability=\"unavailable\"] {\n    display: none;\n  }\n}\n\n/* Icon button variant */\n.media-default-skin .media-button--icon {\n  display: grid;\n  width: 2.125rem;\n  padding: 0;\n  aspect-ratio: 1;\n  background: transparent;\n  color: inherit;\n  text-shadow: inherit;\n\n  &:hover,\n  &:focus-visible,\n  &[aria-expanded=\"true\"] {\n    background-color: oklch(from currentColor l c h / 0.1);\n    text-decoration: none;\n  }\n\n  &:active {\n    transform: scale(0.9);\n  }\n\n  & .media-icon {\n    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, oklch(0 0 0 / 0.25)));\n  }\n}\n\n/* Seek button */\n.media-default-skin .media-button--seek {\n  & .media-icon__label {\n    position: absolute;\n    right: -1px;\n    bottom: -3px;\n    font-size: 0.75em;\n    font-weight: 480;\n    font-variant-numeric: tabular-nums;\n  }\n\n  &:has(.media-icon--flipped) .media-icon__label {\n    right: unset;\n    left: -1px;\n  }\n\n  @container media-controls (width < 28rem) {\n    display: none;\n  }\n}\n\n/* Playback rate button */\n.media-default-skin .media-button--playback-rate {\n  padding: 0;\n\n  &::after {\n    content: attr(data-rate) \"\\00D7\";\n    width: 4ch;\n    font-variant-numeric: tabular-nums;\n  }\n}\n\n/* ==========================================================================\n   Icons\n   ========================================================================== */\n\n.media-default-skin .media-icon__container {\n  position: relative;\n}\n.media-default-skin .media-icon {\n  display: block;\n  flex-shrink: 0;\n  grid-area: 1 / 1;\n  width: 18px;\n  height: 18px;\n  transition-behavior: allow-discrete;\n  transition-property: display, opacity;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.media-default-skin .media-icon--flipped {\n  scale: -1 1;\n}\n\n/* ==========================================================================\n   Slider\n   ========================================================================== */\n\n.media-default-skin .media-slider {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  border-radius: calc(infinity * 1px);\n  outline: none;\n\n  &[data-orientation=\"horizontal\"] {\n    min-width: 5rem;\n    width: 100%;\n    height: 1.25rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 1.25rem;\n    height: 5rem;\n  }\n}\n\n/* Track */\n.media-default-skin .media-slider__track {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  border-radius: inherit;\n  user-select: none;\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: 0.25rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 0.25rem;\n    height: 100%;\n  }\n}\n\n/* Thumb */\n.media-default-skin .media-slider__thumb {\n  z-index: 10;\n  position: absolute;\n  transform: translate(-50%, -50%);\n  width: 0.625rem;\n  height: 0.625rem;\n  background-color: currentColor;\n  border-radius: calc(infinity * 1px);\n  box-shadow:\n    0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),\n    0 1px 3px 0 oklch(0 0 0 / 0.15),\n    0 1px 2px -1px oklch(0 0 0 / 0.15);\n  opacity: 0;\n  transition-property: opacity, height, width, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  user-select: none;\n  outline: 4px solid transparent;\n  outline-offset: -4px;\n\n  &[data-orientation=\"horizontal\"] {\n    top: 50%;\n    left: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    left: 50%;\n    top: calc(100% - var(--media-slider-fill));\n  }\n\n  &:hover,\n  &:focus {\n    outline-color: oklch(from currentColor l c h / 0.25);\n    outline-offset: 0;\n  }\n}\n\n.media-default-skin .media-slider:active .media-slider__thumb,\n.media-default-skin .media-slider__thumb--persistent {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n.media-default-skin .media-slider:hover .media-slider__thumb,\n.media-default-skin .media-slider__thumb:focus-visible,\n.media-default-skin .media-slider__thumb--persistent {\n  opacity: 1;\n}\n\n/* Shared track fills */\n.media-default-skin .media-slider__buffer,\n.media-default-skin .media-slider__fill {\n  position: absolute;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.media-default-skin .media-slider__buffer[data-orientation=\"horizontal\"],\n.media-default-skin .media-slider__fill[data-orientation=\"horizontal\"] {\n  inset-block: 0;\n  left: 0;\n}\n\n.media-default-skin .media-slider__buffer[data-orientation=\"vertical\"],\n.media-default-skin .media-slider__fill[data-orientation=\"vertical\"] {\n  inset-inline: 0;\n  bottom: 0;\n}\n\n/* Buffer */\n.media-default-skin .media-slider__buffer {\n  background-color: oklch(from currentColor l c h / 0.2);\n  transition-duration: 0.25s;\n  transition-timing-function: ease-out;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-buffer);\n    transition-property: width;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-buffer);\n    transition-property: height;\n  }\n}\n\n/* Fill */\n.media-default-skin .media-slider__fill {\n  background-color: currentColor;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-fill);\n  }\n}\n\n/* Time display within slider */\n.media-default-skin .media-slider__time-display {\n  font-variant-numeric: tabular-nums;\n}\n\n/* ==========================================================================\n   Popups & Tooltips\n   ========================================================================== */\n\n.media-default-skin .media-popover,\n.media-default-skin .media-tooltip {\n  margin: 0;\n  border: 0;\n  color: inherit;\n  overflow: visible;\n  transition-property: transform, scale, opacity, filter;\n  transition-duration: 200ms;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0);\n    filter: blur(8px);\n  }\n\n  &[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  &[data-side=\"top\"] {\n    transform-origin: bottom;\n  }\n  &[data-side=\"bottom\"] {\n    transform-origin: top;\n  }\n  &[data-side=\"left\"] {\n    transform-origin: right;\n  }\n  &[data-side=\"right\"] {\n    transform-origin: left;\n  }\n}\n\n.media-default-skin .media-popover {\n  --media-popover-side-offset: 0.5rem;\n}\n.media-default-skin .media-popover--volume {\n  padding: 0.625rem 0.25rem;\n  border-radius: calc(infinity * 1px);\n}\n\n.media-default-skin .media-tooltip {\n  padding: 0.25rem 0.625rem;\n  border-radius: calc(infinity * 1px);\n  font-size: 0.75rem;\n  white-space: nowrap;\n  --media-tooltip-side-offset: 0.5rem;\n}\n\n/* ==========================================================================\n   Captions\n   ========================================================================== */\n\n.media-default-skin .media-captions {\n  position: absolute;\n  inset: auto 1rem 1.5rem 1rem;\n  z-index: 20;\n  font-size: 1rem;\n  text-wrap: balance;\n  pointer-events: none;\n\n  @container media-root (width > 20rem) {\n    font-size: 1.5rem;\n  }\n\n  @container media-root (width > 48rem) {\n    font-size: 1.875rem;\n  }\n\n  @container media-root (width > 80rem) {\n    font-size: 2.25rem;\n  }\n}\n\n.media-default-skin .media-captions__container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  max-width: 42ch;\n  margin: 0 auto;\n  text-align: center;\n}\n\n.media-default-skin .media-captions__text {\n  display: block;\n  padding: 0.125rem 0.5rem;\n  color: oklch(1 0 0);\n  text-shadow:\n    0 0 1px oklch(0 0 0 / 0.7),\n    0 0 8px oklch(0 0 0 / 0.7);\n  text-align: center;\n  white-space: pre-wrap;\n  line-height: 1.2;\n\n  @media (prefers-contrast: more) {\n    background: oklch(0 0 0 / 0.7);\n    text-shadow: none;\n    box-decoration-break: clone;\n  }\n\n  & > * {\n    display: inline;\n  }\n}\n\n/* Caption shifting styles (custom and native) */\n.media-default-skin {\n  --media-caption-track-delay: 600ms;\n  --media-caption-track-y: -0.5rem;\n\n  &:has(.media-controls[data-visible]) {\n    --media-caption-track-delay: 25ms;\n    --media-caption-track-y: -3.5rem;\n  }\n}\n\n.media-default-skin .media-captions,\n.media-default-skin video::-webkit-media-text-track-container {\n  /* NOTE: The delay must account for the controls delay/duration */\n  transition: transform 150ms ease-out;\n  transition-delay: var(--media-caption-track-delay);\n}\n\n.media-default-skin video::-webkit-media-text-track-container {\n  transform: translateY(var(--media-caption-track-y)) scale(0.98);\n  z-index: 1;\n  font-family: inherit;\n}\n\n/* When controls are visible, shift captions up to avoid overlap */\n.media-default-skin .media-controls[data-visible] ~ .media-captions {\n  transform: translateY(calc(var(--media-caption-track-y) - 0.5rem));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .media-default-skin .media-captions,\n  .media-default-skin video::-webkit-media-text-track-container {\n    transition-duration: 50ms;\n  }\n}\n\n\n/* ==========================================================================\n   Root\n   ========================================================================== */\n\n.media-default-skin--video {\n  background: oklch(0 0 0);\n  --media-border-color: oklch(0 0 0 / 0.1);\n  --media-surface-background-color: oklch(1 0 0 / 0.1);\n  --media-surface-inner-border-color: oklch(1 0 0 / 0.05);\n  --media-surface-outer-border-color: oklch(0 0 0 / 0.1);\n  --media-surface-shadow-color: oklch(0 0 0 / 0.15);\n  --media-surface-backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\n\n  @media (prefers-color-scheme: dark) {\n    --media-border-color: oklch(1 0 0 / 0.1);\n  }\n\n  /* Inner border ring */\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px var(--media-border-color);\n    pointer-events: none;\n  }\n}\n\n/* ==========================================================================\n   Controls (hide/show behavior)\n   ========================================================================== */\n\n.media-default-skin--video .media-controls {\n  position: absolute;\n  bottom: 0.75rem;\n  inset-inline: 0.75rem;\n  z-index: 10;\n  will-change: scale, transform, filter, opacity;\n  transition-property: scale, transform, filter, opacity;\n  transition-duration: 100ms;\n  transition-delay: 0ms;\n  transition-timing-function: ease-out;\n  transform-origin: bottom;\n  color: oklch(1 0 0);\n\n  &:not([data-visible]) {\n    opacity: 0;\n    scale: 0.9;\n    filter: blur(8px);\n    transition-duration: 300ms;\n    transition-delay: 500ms;\n    pointer-events: none;\n\n    @media (prefers-reduced-motion: reduce) {\n      scale: 1;\n      filter: blur(0);\n      transition-duration: 100ms;\n    }\n  }\n}\n\n/* ==========================================================================\n   Sliders\n   ========================================================================== */\n\n.media-default-skin--video .media-slider__track {\n  background-color: oklch(1 0 0 / 0.2);\n  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);\n}\n\n";
+var skin_default = "/* ==========================================================================\n   Icon State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state icon buttons.\n   Uses :is() with both element selectors (for HTML custom element wrappers)\n   and class selectors (for React rendered SVG elements).\n   ========================================================================== */\n\n/* --- All icons hidden by default --- */\n\n.media-button--play .media-icon--restart,\n.media-button--play .media-icon--play,\n.media-button--play .media-icon--pause,\n.media-button--mute .media-icon--volume-off,\n.media-button--mute .media-icon--volume-low,\n.media-button--mute .media-icon--volume-high,\n.media-button--fullscreen .media-icon--fullscreen-enter,\n.media-button--fullscreen .media-icon--fullscreen-exit,\n.media-button--captions .media-icon--captions-off,\n.media-button--captions .media-icon--captions-on {\n  display: none;\n  opacity: 0;\n}\n\n/* --- Active icon per state --- */\n\n/* Play: ended → restart */\n.media-button--play[data-ended] .media-icon--restart,\n/* Play: paused (not ended) → play */\n.media-button--play:not([data-ended])[data-paused] .media-icon--play,\n/* Play: playing (not paused, not ended) → pause */\n.media-button--play:not([data-paused]):not([data-ended]) .media-icon--pause,\n/* Mute: muted → volume off */\n.media-button--mute[data-muted] .media-icon--volume-off,\n/* Mute: volume low (not muted) → volume low */\n.media-button--mute:not([data-muted])[data-volume-level=\"low\"] .media-icon--volume-low,\n/* Mute: volume high (not muted, not low) → volume high */\n.media-button--mute:not([data-muted]):not([data-volume-level=\"low\"]) .media-icon--volume-high,\n/* Fullscreen: not fullscreen → enter */\n.media-button--fullscreen:not([data-fullscreen]) .media-icon--fullscreen-enter,\n/* Fullscreen: fullscreen → exit */\n.media-button--fullscreen[data-fullscreen] .media-icon--fullscreen-exit,\n/* Captions: not active → captions off */\n.media-button--captions:not([data-active]) .media-icon--captions-off,\n/* Captions: active → captions on */\n.media-button--captions[data-active] .media-icon--captions-on {\n  display: block;\n  opacity: 1;\n}\n\n/* ==========================================================================\n   Tooltip Label State Visibility for Video Skins\n\n   Data-attribute-driven visibility rules for multi-state tooltip labels.\n   Uses adjacent sibling selectors to match button state → tooltip content.\n   ========================================================================== */\n\n/* --- All multi-state labels hidden by default --- */\n\n.media-tooltip-label {\n  display: none;\n}\n\n/* --- Active label per state --- */\n\n/* Play: ended → replay */\n.media-button--play[data-ended] + .media-tooltip .media-tooltip-label--replay,\n/* Play: paused (not ended) → play */\n  .media-button--play:not([data-ended])[data-paused] + .media-tooltip\n  .media-tooltip-label--play,\n/* Play: playing (not paused, not ended) → pause */\n  .media-button--play:not([data-paused]):not([data-ended]) + .media-tooltip\n  .media-tooltip-label--pause,\n/* Fullscreen: not fullscreen → enter */\n  .media-button--fullscreen:not([data-fullscreen]) + .media-tooltip\n  .media-tooltip-label--enter-fullscreen,\n/* Fullscreen: fullscreen → exit */\n  .media-button--fullscreen[data-fullscreen] + .media-tooltip\n  .media-tooltip-label--exit-fullscreen,\n/* Captions: not active → enable */\n  .media-button--captions:not([data-active]) + .media-tooltip\n  .media-tooltip-label--enable-captions,\n/* Captions: active → disable */\n  .media-button--captions[data-active] + .media-tooltip\n  .media-tooltip-label--disable-captions,\n/* PiP: not in pip → enter */\n  .media-button--pip:not([data-pip]) + .media-tooltip\n  .media-tooltip-label--enter-pip,\n/* PiP: in pip → exit */\n  .media-button--pip[data-pip] + .media-tooltip\n  .media-tooltip-label--exit-pip {\n  display: block;\n}\n\n/* ==========================================================================\n   Reset\n   ========================================================================== */\n\n.media-default-skin *,\n.media-default-skin *::before,\n.media-default-skin *::after {\n  box-sizing: border-box;\n  margin: 0;\n}\n.media-default-skin img,\n.media-default-skin video,\n.media-default-skin svg {\n  display: block;\n  max-width: 100%;\n}\n.media-default-skin button {\n  font: inherit;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .media-default-skin {\n    interpolate-size: allow-keywords;\n  }\n}\n\n/* ==========================================================================\n   Root Container\n   ========================================================================== */\n\n.media-default-skin {\n  position: relative;\n  isolation: isolate;\n  display: block;\n  height: 100%;\n  width: 100%;\n  container: media-root / inline-size;\n  border-radius: var(--media-border-radius, 2rem);\n  font-family:\n    Inter Variable,\n    Inter,\n    ui-sans-serif,\n    system-ui,\n    sans-serif;\n  font-size: 0.8125rem;\n  line-height: 1.5;\n  letter-spacing: normal;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n/* ==========================================================================\n   Surface (shared glass effect for tooltips, popovers, controls)\n   ========================================================================== */\n\n.media-default-skin .media-surface {\n  background-color: var(--media-surface-background-color);\n  backdrop-filter: var(--media-surface-backdrop-filter);\n  box-shadow:\n    inset 0 0 0 1px var(--media-surface-inner-border-color),\n    0 1px 3px 0 var(--media-surface-shadow-color),\n    0 1px 2px -1px var(--media-surface-shadow-color);\n\n  /* Inner border ring */\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    border-radius: inherit;\n    box-shadow: 0 0 0 1px var(--media-surface-outer-border-color);\n    pointer-events: none;\n  }\n\n  @media (prefers-reduced-transparency: reduce) {\n    background-color: oklch(from var(--media-surface-background-color) l c h / 0.7);\n  }\n\n  @media (prefers-contrast: more) {\n    background-color: oklch(from var(--media-surface-background-color) l c h / 0.9);\n  }\n}\n\n/* ==========================================================================\n   Media Element\n   ========================================================================== */\n\n.media-default-skin ::slotted(video),\n.media-default-skin video {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.media-default-skin ::slotted(video) {\n  border-radius: var(--media-border-radius, 2rem);\n}\n.media-default-skin video {\n  border-radius: inherit;\n}\n\n/* ==========================================================================\n   Poster Image\n   ========================================================================== */\n\n.media-default-skin > img {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  object-fit: cover;\n  transition: opacity 0.25s;\n  pointer-events: none;\n\n  &:not([data-visible]) {\n    opacity: 0;\n  }\n}\n\n/* ==========================================================================\n   Fullscreen\n   ========================================================================== */\n\n.media-default-skin:fullscreen video,\n.media-default-skin:fullscreen ::slotted(video),\n.media-default-skin > img {\n  object-fit: contain;\n}\n.media-default-skin:fullscreen ::slotted(video) {\n  border-radius: 0;\n}\n\n/* ==========================================================================\n   Overlay / Scrim\n   ========================================================================== */\n\n.media-default-skin .media-overlay {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-image: linear-gradient(to top, oklch(0 0 0 / 0.5), oklch(0 0 0 / 0.3), oklch(0 0 0 / 0));\n  backdrop-filter: blur(0) saturate(1.5);\n  opacity: 0;\n  transition-property: opacity, backdrop-filter;\n  transition-duration: 300ms;\n  transition-delay: 500ms;\n  transition-timing-function: ease-out;\n  pointer-events: none;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 100ms;\n  }\n}\n\n.media-default-skin .media-controls[data-visible] ~ .media-overlay,\n.media-default-skin .media-error[data-open] ~ .media-overlay {\n  opacity: 1;\n  transition-duration: 150ms;\n  transition-delay: 0ms;\n}\n\n.media-default-skin .media-error[data-open] ~ .media-overlay {\n  backdrop-filter: blur(16px) saturate(1.5);\n}\n\n/* ==========================================================================\n   Buffering Indicator\n   ========================================================================== */\n\n.media-default-skin .media-buffering-indicator {\n  position: absolute;\n  inset: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  color: oklch(1 0 0);\n  pointer-events: none;\n\n  &[data-visible] {\n    display: flex;\n  }\n\n  .media-surface {\n    padding: 0.25rem;\n    border-radius: 100%;\n  }\n}\n\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-default-skin .media-error {\n  position: absolute;\n  inset: 0;\n  z-index: 20;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.media-default-skin .media-error__dialog {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  max-width: 18rem;\n  padding: 0.75rem;\n  border-radius: 1.75rem;\n  color: oklch(1 0 0);\n  font-size: 0.875rem;\n  transition-property: opacity, transform;\n  transition-duration: 500ms;\n  transition-delay: 100ms;\n  transition-timing-function: linear(\n    0,\n    0.034 1.5%,\n    0.763 9.7%,\n    1.066 13.9%,\n    1.198 19.9%,\n    1.184 21.8%,\n    0.963 37.5%,\n    0.997 50.9%,\n    1\n  );\n\n  /* Simple, fast transition for reduced motion users */\n  @media (prefers-reduced-motion: reduce) {\n    transition-duration: 100ms;\n    transition-delay: 0ms;\n    transition-timing-function: ease-out;\n  }\n}\n\n.media-default-skin .media-error[data-starting-style] .media-error__dialog,\n.media-default-skin .media-error[data-ending-style] .media-error__dialog {\n  opacity: 0;\n  transform: scale(0.5);\n}\n\n.media-default-skin .media-error__content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.5rem 0.5rem 0.375rem;\n}\n\n.media-default-skin .media-error__title {\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.media-default-skin .media-error__description {\n  opacity: 0.7;\n}\n\n.media-default-skin .media-error__actions {\n  display: flex;\n  gap: 0.5rem;\n\n  & > * {\n    flex: 1;\n  }\n}\n\n/* ==========================================================================\n   Controls\n   ========================================================================== */\n\n.media-default-skin .media-controls {\n  container: media-controls / inline-size;\n  display: flex;\n  align-items: center;\n  gap: 0.075rem;\n  padding: 0.175rem;\n  border-radius: calc(infinity * 1px);\n  --media-controls-current-shadow-color: oklch(from currentColor 0 0 0 / clamp(0, calc((l - 0.5) * 0.5), 0.25));\n  --media-controls-current-shadow-color-subtle: oklch(\n    from var(--media-controls-current-shadow-color) l c h /\n    calc(alpha * 0.4)\n  );\n  text-shadow: 0 0 1px var(--media-controls-current-shadow-color);\n\n  @container media-root (width > 40rem) {\n    gap: 0.125rem;\n    padding: 0.25rem;\n  }\n}\n\n/* ==========================================================================\n   Time Display\n   ========================================================================== */\n\n.media-default-skin .media-time {\n  container: media-time / inline-size;\n  display: flex;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n  padding-inline: 0.5rem;\n\n  & .media-time__value:first-child {\n    display: none;\n\n    @container media-time (width > 18rem) {\n      display: block;\n    }\n  }\n}\n\n.media-default-skin .media-time__value {\n  font-variant-numeric: tabular-nums;\n}\n\n/* ==========================================================================\n   Buttons\n   ========================================================================== */\n\n/* Base button */\n.media-default-skin .media-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  padding: 0.5rem 1rem;\n  background: oklch(1 0 0);\n  border: none;\n  border-radius: calc(infinity * 1px);\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  color: oklch(0 0 0);\n  font-weight: 500;\n  text-align: center;\n  transition-property: background-color, color, outline-offset, transform;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  cursor: pointer;\n  user-select: none;\n\n  &:focus-visible {\n    outline-color: oklch(62.3% 0.214 259.815);\n    outline-offset: 2px;\n  }\n\n  &[disabled] {\n    opacity: 0.5;\n    filter: grayscale(1);\n    cursor: not-allowed;\n  }\n\n  &[data-availability=\"unavailable\"] {\n    display: none;\n  }\n}\n\n/* Icon button variant */\n.media-default-skin .media-button--icon {\n  display: grid;\n  width: 2.125rem;\n  padding: 0;\n  aspect-ratio: 1;\n  background: transparent;\n  color: inherit;\n  text-shadow: inherit;\n\n  &:hover,\n  &:focus-visible,\n  &[aria-expanded=\"true\"] {\n    background-color: oklch(from currentColor l c h / 0.1);\n    text-decoration: none;\n  }\n\n  &:active {\n    transform: scale(0.9);\n  }\n\n  & .media-icon {\n    filter: drop-shadow(0 1px 0 var(--media-controls-current-shadow-color, oklch(0 0 0 / 0.25)));\n  }\n}\n\n/* Seek button */\n.media-default-skin .media-button--seek {\n  & .media-icon__label {\n    position: absolute;\n    right: -1px;\n    bottom: -3px;\n    font-size: 0.75em;\n    font-weight: 480;\n    font-variant-numeric: tabular-nums;\n  }\n\n  &:has(.media-icon--flipped) .media-icon__label {\n    right: unset;\n    left: -1px;\n  }\n\n  @container media-controls (width < 28rem) {\n    display: none;\n  }\n}\n\n/* Playback rate button */\n.media-default-skin .media-button--playback-rate {\n  padding: 0;\n\n  &::after {\n    content: attr(data-rate) \"\\00D7\";\n    width: 4ch;\n    font-variant-numeric: tabular-nums;\n  }\n}\n\n/* ==========================================================================\n   Icons\n   ========================================================================== */\n\n.media-default-skin .media-icon__container {\n  position: relative;\n}\n.media-default-skin .media-icon {\n  display: block;\n  flex-shrink: 0;\n  grid-area: 1 / 1;\n  width: 18px;\n  height: 18px;\n  transition-behavior: allow-discrete;\n  transition-property: display, opacity;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n}\n.media-default-skin .media-icon--flipped {\n  scale: -1 1;\n}\n\n/* ==========================================================================\n   Slider\n   ========================================================================== */\n\n.media-default-skin .media-slider {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  border-radius: calc(infinity * 1px);\n  outline: none;\n\n  &[data-orientation=\"horizontal\"] {\n    min-width: 5rem;\n    width: 100%;\n    height: 1.25rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 1.25rem;\n    height: 5rem;\n  }\n}\n\n/* Track */\n.media-default-skin .media-slider__track {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  border-radius: inherit;\n  user-select: none;\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: 0.25rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 0.25rem;\n    height: 100%;\n  }\n}\n\n/* Thumb */\n.media-default-skin .media-slider__thumb {\n  z-index: 10;\n  position: absolute;\n  transform: translate(-50%, -50%);\n  width: 0.625rem;\n  height: 0.625rem;\n  background-color: currentColor;\n  border-radius: calc(infinity * 1px);\n  box-shadow:\n    0 0 0 1px var(--media-controls-current-shadow-color-subtle, oklch(0 0 0 / 0.1)),\n    0 1px 3px 0 oklch(0 0 0 / 0.15),\n    0 1px 2px -1px oklch(0 0 0 / 0.15);\n  opacity: 0;\n  transition-property: opacity, height, width, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  user-select: none;\n  outline: 4px solid transparent;\n  outline-offset: -4px;\n\n  &[data-orientation=\"horizontal\"] {\n    top: 50%;\n    left: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    left: 50%;\n    top: calc(100% - var(--media-slider-fill));\n  }\n\n  &:hover,\n  &:focus {\n    outline-color: oklch(from currentColor l c h / 0.25);\n    outline-offset: 0;\n  }\n}\n\n.media-default-skin .media-slider:active .media-slider__thumb,\n.media-default-skin .media-slider__thumb--persistent {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n.media-default-skin .media-slider:hover .media-slider__thumb,\n.media-default-skin .media-slider__thumb:focus-visible,\n.media-default-skin .media-slider__thumb--persistent {\n  opacity: 1;\n}\n\n/* Shared track fills */\n.media-default-skin .media-slider__buffer,\n.media-default-skin .media-slider__fill {\n  position: absolute;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.media-default-skin .media-slider__buffer[data-orientation=\"horizontal\"],\n.media-default-skin .media-slider__fill[data-orientation=\"horizontal\"] {\n  inset-block: 0;\n  left: 0;\n}\n\n.media-default-skin .media-slider__buffer[data-orientation=\"vertical\"],\n.media-default-skin .media-slider__fill[data-orientation=\"vertical\"] {\n  inset-inline: 0;\n  bottom: 0;\n}\n\n/* Buffer */\n.media-default-skin .media-slider__buffer {\n  background-color: oklch(from currentColor l c h / 0.2);\n  transition-duration: 0.25s;\n  transition-timing-function: ease-out;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-buffer);\n    transition-property: width;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-buffer);\n    transition-property: height;\n  }\n}\n\n/* Fill */\n.media-default-skin .media-slider__fill {\n  background-color: currentColor;\n\n  &[data-orientation=\"horizontal\"] {\n    width: var(--media-slider-fill);\n  }\n\n  &[data-orientation=\"vertical\"] {\n    height: var(--media-slider-fill);\n  }\n}\n\n/* Time display within slider */\n.media-default-skin .media-slider__time-display {\n  font-variant-numeric: tabular-nums;\n}\n\n/* ==========================================================================\n   Popups & Tooltips\n   ========================================================================== */\n\n.media-default-skin .media-popover,\n.media-default-skin .media-tooltip {\n  margin: 0;\n  border: 0;\n  color: inherit;\n  overflow: visible;\n  transition-property: transform, scale, opacity, filter;\n  transition-duration: 200ms;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: scale(0);\n    filter: blur(8px);\n  }\n\n  &[data-instant] {\n    transition-duration: 0ms;\n  }\n\n  &[data-side=\"top\"] {\n    transform-origin: bottom;\n  }\n  &[data-side=\"bottom\"] {\n    transform-origin: top;\n  }\n  &[data-side=\"left\"] {\n    transform-origin: right;\n  }\n  &[data-side=\"right\"] {\n    transform-origin: left;\n  }\n}\n\n.media-default-skin .media-popover {\n  --media-popover-side-offset: 0.5rem;\n}\n.media-default-skin .media-popover--volume {\n  padding: 0.625rem 0.25rem;\n  border-radius: calc(infinity * 1px);\n}\n\n.media-default-skin .media-tooltip {\n  padding: 0.25rem 0.625rem;\n  border-radius: calc(infinity * 1px);\n  font-size: 0.75rem;\n  white-space: nowrap;\n  --media-tooltip-side-offset: 0.5rem;\n}\n\n/* ==========================================================================\n   Native Caption Track\n   ========================================================================== */\n\n.media-default-skin {\n  --media-caption-track-delay: 600ms;\n  --media-caption-track-y: -0.5rem;\n\n  &:has(.media-controls[data-visible]) {\n    --media-caption-track-delay: 25ms;\n    --media-caption-track-y: -3.5rem;\n  }\n}\n\n.media-default-skin video::-webkit-media-text-track-container {\n  /* NOTE: The delay must account for the controls delay/duration */\n  transition: transform 150ms ease-out;\n  transition-delay: var(--media-caption-track-delay);\n  transform: translateY(var(--media-caption-track-y)) scale(0.98);\n  z-index: 1;\n  font-family: inherit;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .media-default-skin video::-webkit-media-text-track-container {\n    transition-duration: 50ms;\n  }\n}\n\n\n/* ==========================================================================\n   Root\n   ========================================================================== */\n\n.media-default-skin--video {\n  background: oklch(0 0 0);\n  --media-border-color: oklch(0 0 0 / 0.1);\n  --media-surface-background-color: oklch(1 0 0 / 0.1);\n  --media-surface-inner-border-color: oklch(1 0 0 / 0.05);\n  --media-surface-outer-border-color: oklch(0 0 0 / 0.1);\n  --media-surface-shadow-color: oklch(0 0 0 / 0.15);\n  --media-surface-backdrop-filter: blur(16px) saturate(1.5);\n\n  @media (prefers-color-scheme: dark) {\n    --media-border-color: oklch(1 0 0 / 0.1);\n  }\n\n  /* Inner border ring */\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    z-index: 10;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px var(--media-border-color);\n    pointer-events: none;\n  }\n\n  &:fullscreen {\n    border-radius: 0;\n  }\n}\n\n/* ==========================================================================\n   Controls (hide/show behavior)\n   ========================================================================== */\n\n.media-default-skin--video .media-controls {\n  position: absolute;\n  bottom: 0.75rem;\n  inset-inline: 0.75rem;\n  z-index: 10;\n  will-change: scale, transform, filter, opacity;\n  transition-property: scale, transform, filter, opacity;\n  transition-duration: 100ms;\n  transition-delay: 0ms;\n  transition-timing-function: ease-out;\n  transform-origin: bottom;\n  color: oklch(1 0 0);\n\n  &:not([data-visible]) {\n    opacity: 0;\n    scale: 0.9;\n    filter: blur(8px);\n    transition-duration: 300ms;\n    transition-delay: 500ms;\n    pointer-events: none;\n\n    @media (prefers-reduced-motion: reduce) {\n      scale: 1;\n      filter: blur(0);\n      transition-duration: 100ms;\n    }\n  }\n}\n\n/* ==========================================================================\n   Sliders\n   ========================================================================== */\n\n.media-default-skin--video .media-slider__track {\n  background-color: oklch(1 0 0 / 0.2);\n  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);\n}\n\nmedia-tooltip-group {\n  display: contents;\n}\n\n";
 
 //#endregion
 //#region src/define/media/container.ts
@@ -4313,6 +4308,42 @@ const TooltipDataAttrs = {
 	transitionEnding: "data-ending-style"
 };
 
+//#endregion
+//#region ../core/dist/dev/core/ui/tooltip/tooltip-group-core.js
+var TooltipGroupCore = class TooltipGroupCore {
+	static defaultProps = {
+		delay: 600,
+		closeDelay: 0,
+		timeout: 400
+	};
+	#props = { ...TooltipGroupCore.defaultProps };
+	#lastCloseTime = 0;
+	#isOpen = false;
+	constructor(props) {
+		if (props) this.setProps(props);
+	}
+	setProps(props) {
+		this.#props = defaults(props, TooltipGroupCore.defaultProps);
+	}
+	get delay() {
+		return this.#props.delay;
+	}
+	get closeDelay() {
+		return this.#props.closeDelay;
+	}
+	shouldSkipDelay() {
+		if (this.#isOpen) return true;
+		return Date.now() - this.#lastCloseTime < this.#props.timeout;
+	}
+	notifyOpen() {
+		this.#isOpen = true;
+	}
+	notifyClose() {
+		this.#isOpen = false;
+		this.#lastCloseTime = Date.now();
+	}
+};
+
 //#endregion
 //#region ../core/dist/dev/core/ui/volume-slider/volume-slider-core.js
 /** Volume-domain slider: maps media volume/mute state to slider state. */
@@ -5523,6 +5554,44 @@ var TooltipElement = class extends MediaElement {
 //#region src/define/ui/tooltip.ts
 safeDefine(TooltipElement);
 
+//#endregion
+//#region src/ui/tooltip/tooltip-group-element.ts
+var TooltipGroupElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.delay = TooltipGroupCore.defaultProps.delay;
+		this.closeDelay = TooltipGroupCore.defaultProps.closeDelay;
+		this.timeout = TooltipGroupCore.defaultProps.timeout;
+	}
+	static {
+		this.tagName = "media-tooltip-group";
+	}
+	static {
+		this.properties = {
+			delay: { type: Number },
+			closeDelay: {
+				type: Number,
+				attribute: "close-delay"
+			},
+			timeout: { type: Number }
+		};
+	}
+	#core = new TooltipGroupCore();
+	#provider = new ContextProvider(this, {
+		context: tooltipGroupContext,
+		initialValue: this.#core
+	});
+	update(_changed) {
+		super.update(_changed);
+		this.#core.setProps(this);
+		this.#provider.setValue(this.#core);
+	}
+};
+
+//#endregion
+//#region src/define/ui/tooltip-group.ts
+safeDefine(TooltipGroupElement);
+
 //#endregion
 //#region src/ui/volume-slider/volume-slider-element.ts
 var VolumeSliderElement = class extends MediaElement {
@@ -5658,107 +5727,97 @@ function getTemplateHTML() {
         </div>
       </media-buffering-indicator>
 
-      <!--<div class="media-error" role="alertdialog" aria-labelledby="media-error-title" aria-describedby="media-error-description">
-        <div class="media-error__dialog media-surface">
-          <div class="media-error__content">
-            <p id="media-error-title" class="media-error__title">Something went wrong.</p>
-            <p id="media-error-description" class="media-error__description">An error occurred while trying to play the video. Please try again.</p>
-          </div>
-          <div class="media-error__actions">
-            <button type="button" class="media-button">OK</button>
-          </div>
-        </div>
-      </div>-->
-
       <media-controls class="media-surface media-controls">
-        <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
-          ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
-          ${renderIcon("play", { class: "media-icon media-icon--play" })}
-          ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
-        </media-play-button>
-        <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
-          <span class="media-tooltip-label media-tooltip-label--play">Play</span>
-          <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
-        </media-tooltip>
-
-        <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-          <span class="media-icon__container">
-            ${renderIcon("seek", { class: "media-icon media-icon--flipped" })}
-            <span class="media-icon__label">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
-          Seek backward ${SEEK_TIME} seconds
-        </media-tooltip>
-
-        <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
-          <span class="media-icon__container">
-            ${renderIcon("seek", { class: "media-icon" })}
-            <span class="media-icon__label">${SEEK_TIME}</span>
-          </span>
-        </media-seek-button>
-        <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
-          Seek forward ${SEEK_TIME} seconds
-        </media-tooltip>
-
-        <media-time-group class="media-time">
-          <media-time type="current" class="media-time__value"></media-time>
-          <media-time-slider class="media-slider">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-              <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
-          </media-time-slider>
-          <media-time type="duration" class="media-time__value"></media-time>
-        </media-time-group>
-
-        <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
-        <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
-          Toggle playback rate
-        </media-tooltip>
-
-        <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
-          ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
-          ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
-          ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
-        </media-mute-button>
-
-        <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
-          <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
-            <media-slider-track class="media-slider__track">
-              <media-slider-fill class="media-slider__fill"></media-slider-fill>
-            </media-slider-track>
-            <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
-          </media-volume-slider>
-        </media-popover>
-
-        <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
-          ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
-          ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
-        </media-captions-button>
-        <media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
-          <span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
-        </media-tooltip>
-
-        <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon">
-          ${renderIcon("pip", { class: "media-icon" })}
-        </media-pip-button>
-        <media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
-          <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
-        </media-tooltip>
-
-        <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
-          ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
-          ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
-        </media-fullscreen-button>
-        <media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
-          <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
-          <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
-        </media-tooltip>
+        <media-tooltip-group>
+          <media-play-button commandfor="play-tooltip" class="media-button media-button--icon media-button--play">
+            ${renderIcon("restart", { class: "media-icon media-icon--restart" })}
+            ${renderIcon("play", { class: "media-icon media-icon--play" })}
+            ${renderIcon("pause", { class: "media-icon media-icon--pause" })}
+          </media-play-button>
+          <media-tooltip id="play-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--replay">Replay</span>
+            <span class="media-tooltip-label media-tooltip-label--play">Play</span>
+            <span class="media-tooltip-label media-tooltip-label--pause">Pause</span>
+          </media-tooltip>
+
+          <media-seek-button commandfor="seek-backward-tooltip" seconds="${-SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <span class="media-icon__container">
+              ${renderIcon("seek", { class: "media-icon media-icon--flipped" })}
+              <span class="media-icon__label">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-backward-tooltip" side="top" class="media-surface media-tooltip">
+            Seek backward ${SEEK_TIME} seconds
+          </media-tooltip>
+
+          <media-seek-button commandfor="seek-forward-tooltip" seconds="${SEEK_TIME}" class="media-button media-button--icon media-button--seek">
+            <span class="media-icon__container">
+              ${renderIcon("seek", { class: "media-icon" })}
+              <span class="media-icon__label">${SEEK_TIME}</span>
+            </span>
+          </media-seek-button>
+          <media-tooltip id="seek-forward-tooltip" side="top" class="media-surface media-tooltip">
+            Seek forward ${SEEK_TIME} seconds
+          </media-tooltip>
+
+          <media-time-group class="media-time">
+            <media-time type="current" class="media-time__value"></media-time>
+            <media-time-slider class="media-slider">
+              <media-slider-track class="media-slider__track">
+                <media-slider-fill class="media-slider__fill"></media-slider-fill>
+                <media-slider-buffer class="media-slider__buffer"></media-slider-buffer>
+              </media-slider-track>
+              <media-slider-thumb class="media-slider__thumb"></media-slider-thumb>
+            </media-time-slider>
+            <media-time type="duration" class="media-time__value"></media-time>
+          </media-time-group>
+
+          <media-playback-rate-button commandfor="playback-rate-tooltip"  class="media-button media-button--icon media-button--playback-rate"></media-playback-rate-button>
+          <media-tooltip id="playback-rate-tooltip" side="top" class="media-surface media-tooltip">
+            Toggle playback rate
+          </media-tooltip>
+
+          <media-mute-button commandfor="video-volume-popover" class="media-button media-button--icon media-button--mute">
+            ${renderIcon("volume-off", { class: "media-icon media-icon--volume-off" })}
+            ${renderIcon("volume-low", { class: "media-icon media-icon--volume-low" })}
+            ${renderIcon("volume-high", { class: "media-icon media-icon--volume-high" })}
+          </media-mute-button>
+
+          <media-popover id="video-volume-popover" open-on-hover delay="200" close-delay="100" side="top" class="media-surface media-popover media-popover--volume">
+            <media-volume-slider class="media-slider" orientation="vertical" thumb-alignment="edge">
+              <media-slider-track class="media-slider__track">
+                <media-slider-fill class="media-slider__fill"></media-slider-fill>
+              </media-slider-track>
+              <media-slider-thumb class="media-slider__thumb media-slider__thumb--persistent"></media-slider-thumb>
+            </media-volume-slider>
+          </media-popover>
+
+          <media-captions-button commandfor="captions-tooltip" class="media-button media-button--icon media-button--captions">
+            ${renderIcon("captions-off", { class: "media-icon media-icon--captions-off" })}
+            ${renderIcon("captions-on", { class: "media-icon media-icon--captions-on" })}
+          </media-captions-button>
+          <media-tooltip id="captions-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--enable-captions">Enable captions</span>
+            <span class="media-tooltip-label media-tooltip-label--disable-captions">Disable captions</span>
+          </media-tooltip>
+
+          <media-pip-button commandfor="pip-tooltip" class="media-button media-button--icon media-button--pip">
+            ${renderIcon("pip", { class: "media-icon" })}
+          </media-pip-button>
+          <media-tooltip id="pip-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--enter-pip">Enter picture-in-picture</span>
+            <span class="media-tooltip-label media-tooltip-label--exit-pip">Exit picture-in-picture</span>
+          </media-tooltip>
+
+          <media-fullscreen-button commandfor="fullscreen-tooltip" class="media-button media-button--icon media-button--fullscreen">
+            ${renderIcon("fullscreen-enter", { class: "media-icon media-icon--fullscreen-enter" })}
+            ${renderIcon("fullscreen-exit", { class: "media-icon media-icon--fullscreen-exit" })}
+          </media-fullscreen-button>
+          <media-tooltip id="fullscreen-tooltip" side="top" class="media-surface media-tooltip">
+            <span class="media-tooltip-label media-tooltip-label--enter-fullscreen">Enter fullscreen</span>
+            <span class="media-tooltip-label media-tooltip-label--exit-fullscreen">Exit fullscreen</span>
+          </media-tooltip>
+        </media-tooltip-group>
       </media-controls>
 
       <div class="media-overlay"></div>