npm - @videojs/html - Versions diffs - 10.0.0-beta.3 → 10.0.0-beta.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (159) hide show

package/dist/default/skins/dist/default/default/tailwind/video.tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/video.tailwind.js"],"sourcesContent":["import { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { ~~iconState } from \"./components/icon-state.js\";\nimport {~~ overlay } from \"./components/overlay.js\";\nimport { ~~tooltipState } from \"./components/tooltip-state.js\";\nimport {~~ cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/10\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,2rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\");\nconst surface = cn(surface$1, \"bg-white/10\", \"backdrop-~~brightness-90 backdrop-~~saturate-150 backdrop-blur-~~3xl~~\", \"ring-white/5 shadow-black/10\", \"after:ring-black/15\", \"[@media(prefers-reduced-transparency:reduce)]:bg-black/70\", \"contrast-more:bg-black/90\");\nconst controls = cn(controls$1, surface, \"absolute bottom-3 inset-x-3\", \"text-white z-10\", \"will-change-[scale,transform,filter,opacity]\", \"transition-[scale,transform,filter,opacity] ease-out\", \"delay-0 duration-100 origin-bottom\", \"not-data-visible:pointer-events-none not-data-visible:blur-sm\", \"not-data-visible:scale-90 not-data-visible:opacity-0\", \"not-data-visible:delay-500 not-data-visible:duration-300\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:blur-none\", \"motion-reduce:not-data-visible:scale-100\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-white/20 shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(error$1.dialog, surface)\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,4FAA4F;CAC/N,gJAAgJ;CAChJ,iFAAiF,CAAC;CAClF,EAAE,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,CAAC,cAAc;CAC5d;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,~~8BAA8B~~;~~AACtC~~,MAAM,UAAU,GAAG,WAAW,eAAe,~~kEAAkE~~,gCAAgC,uBAAuB,6DAA6D,4BAA4B;~~AAC/P~~,MAAM,WAAW,GAAG,YAAY,SAAS,+BAA+B,mBAAmB,gDAAgD,wDAAwD,sCAAsC,iEAAiE,wDAAwD,4DAA4D,+CAA+C,4CAA4C,2CAA2C;AACpiB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,mDAAmD;CAC7E;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,QAAQ,QAAQ;CACnC"}
1	+ {"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/default/tailwind/video.tailwind.js"],"sourcesContent":["import { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator as bufferingIndicator$1 } from \"./components/buffering.js\";\nimport { controls as controls$1 } from \"./components/controls.js\";\nimport { error as error$1 } from \"./components/error.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { surface as surface$1 } from \"./components/surface.js\";\nimport { button } from \"./components/button.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { playbackRate } from \"./components/playback-rate.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/default/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/10 dark:after:ring-white/10\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,2rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none\": isShadowDOM\n}, \"[&:fullscreen>img]:object-contain\");\nconst surface = cn(surface$1, \"bg-white/10\", \"backdrop-saturate-150 backdrop-blur-lg\", \"ring-white/5 shadow-black/10\", \"after:ring-black/15\", \"[@media(prefers-reduced-transparency:reduce)]:bg-black/70\", \"contrast-more:bg-black/90\");\nconst controls = cn(controls$1, surface, \"absolute bottom-3 inset-x-3\", \"text-white z-10\", \"will-change-[scale,transform,filter,opacity]\", \"transition-[scale,transform,filter,opacity] ease-out\", \"delay-0 duration-100 origin-bottom\", \"not-data-visible:pointer-events-none not-data-visible:blur-sm\", \"not-data-visible:scale-90 not-data-visible:opacity-0\", \"not-data-visible:delay-500 not-data-visible:duration-300\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:blur-none\", \"motion-reduce:not-data-visible:scale-100\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"bg-white/20 shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tpopover: cn(surface, popup$1.popover),\n\ttooltip: cn(surface, popup$1.tooltip)\n};\nconst bufferingIndicator = {\n\t...bufferingIndicator$1,\n\tcontainer: cn(bufferingIndicator$1.container, surface)\n};\nconst error = {\n\t...error$1,\n\tdialog: cn(error$1.dialog, surface)\n};\n\n//#endregion\nexport { bufferingIndicator, button, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, playbackRate, popup, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,4FAA4F;CAC/N,gJAAgJ;CAChJ,iFAAiF,CAAC;CAClF,EAAE,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,CAAC,cAAc;CAC5d;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,+BAA+B;CACtC,uCAAuC,CAAC;CACxC,+FAA+F;CAC/F,EAAE,oCAAoC;AACvC,MAAM,UAAU,GAAG,WAAW,eAAe,0CAA0C,gCAAgC,uBAAuB,6DAA6D,4BAA4B;AACvO,MAAM,WAAW,GAAG,YAAY,SAAS,+BAA+B,mBAAmB,gDAAgD,wDAAwD,sCAAsC,iEAAiE,wDAAwD,4DAA4D,+CAA+C,4CAA4C,2CAA2C;AACpiB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,mDAAmD;CAC7E;AACD,MAAM,QAAQ;CACb,GAAG;CACH,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC,SAAS,GAAG,SAAS,QAAQ,QAAQ;CACrC;AACD,MAAM,qBAAqB;CAC1B,GAAG;CACH,WAAW,GAAG,qBAAqB,WAAW,QAAQ;CACtD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,QAAQ,QAAQ;CACnC"}

package/dist/default/skins/dist/default/minimal/tailwind/audio.tailwind.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { controls as controls$1 } from "./components/controls.js";
 import { popup as popup$1 } from "./components/popup.js";
 import { root as root$1 } from "./components/root.js";
+import { iconState } from "../../shared/tailwind/icon-state.js";
+import { tooltipState } from "../../shared/tailwind/tooltip-state.js";
 import { bufferingIndicator } from "./components/buffering.js";
 import { button } from "./components/button.js";
 import { buttonGroup } from "./components/button-group.js";
@@ -13,31 +15,11 @@ import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/tailwind/audio.tailwind.js
 const root = cn(root$1, "[--media-controls-background-color:oklch(1_0_0)]", "[--media-controls-border-color:oklch(0_0_0/0.1)]", "[--media-controls-text-color:oklch(0_0_0)]", "dark:[--media-controls-background-color:oklch(0_0_0)]", "dark:[--media-controls-border-color:oklch(1_0_0/0.1)]", "dark:[--media-controls-text-color:oklch(1_0_0)]");
 const controls = cn(controls$1, "gap-2 p-1.5", "rounded-(--media-border-radius,0.75rem)", "bg-(--media-controls-background-color)", "text-(--media-controls-text-color)", "backdrop-blur backdrop-brightness-[0.98] backdrop-saturate-[1.2]", "ring-1 ring-(color:--media-controls-border-color)");
-const tooltipState = { play: {
-	wrapper: "contents group/play-tip",
-	replay: "hidden group-has-data-ended/play-tip:block",
-	play: "hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block",
-	pause: "hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block"
-} };
 const popup = {
 	...popup$1,
 	volume: cn("py-2 pr-0 pl-16", "bg-transparent bg-gradient-to-l from-(--media-controls-background-color) from-80% to-transparent", "[--media-popover-side-offset:0.75rem]")
 };
-const iconState = {
-	play: {
-		button: "group",
-		restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
-		play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
-		pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
-	},
-	mute: {
-		button: "group",
-		volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
-		volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
-		volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
-	}
-};
 //#endregion
-export { controls, iconState, popup, root, tooltipState };
+export { controls, popup, root };
 //# sourceMappingURL=audio.tailwind.js.map

package/dist/default/skins/dist/default/minimal/tailwind/audio.tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/audio.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-controls-background-color:oklch(1_0_0)]\", \"[--media-controls-border-color:oklch(0_0_0/0.1)]\", \"[--media-controls-text-color:oklch(0_0_0)]\", \"dark:[--media-controls-background-color:oklch(0_0_0)]\", \"dark:[--media-controls-border-color:oklch(1_0_0/0.1)]\", \"dark:[--media-controls-text-color:oklch(1_0_0)]\");\nconst controls = cn(controls$1, \"gap-2 p-1.5\", \"rounded-(--media-border-radius,0.75rem)\", \"bg-(--media-controls-background-color)\", \"text-(--media-controls-text-color)\", \"backdrop-blur backdrop-brightness-[0.98] backdrop-saturate-[1.2]\", \"ring-1 ring-(color:--media-controls-border-color)\");\nconst tooltipState = { play: {\n\twrapper: \"contents group/play-tip\",\n\treplay: \"hidden group-has-data-ended/play-tip:block\",\n\tplay: \"hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block\",\n\tpause: \"hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block\"\n} };\nconst popup = {\n\t...popup$1,\n\tvolume: cn(\"py-2 pr-0 pl-16\", \"bg-transparent bg-gradient-to-l from-(--media-controls-background-color) from-80% to-transparent\", \"[--media-popover-side-offset:0.75rem]\")\n};\~~nconst iconState = {\~~n\~~tplay: {\~~n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t}\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, popup, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":"~~;;;;;;;;;;;;;AAcA~~,MAAM,OAAO,GAAG,QAAQ,oDAAoD,oDAAoD,8CAA8C,yDAAyD,yDAAyD,kDAAkD;AAClV,MAAM,WAAW,GAAG,YAAY,eAAe,2CAA2C,0CAA0C,sCAAsC,oEAAoE,oDAAoD;AAClS,MAAM,~~eAAe,EAAE,MAAM;CAC5B,SAAS;CACT,~~QAAQ;~~CACR,MAAM;CACN,OAAO;CACP,EAAE;AACH,MAAM,QAAQ;~~CACb,GAAG;CACH,QAAQ,GAAG,mBAAmB,oGAAoG,wCAAwC;CAC1K~~;AACD,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD~~"}
1	+ {"version":3,"file":"audio.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/audio.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/audio.tailwind.ts\nconst root = cn(root$1, \"[--media-controls-background-color:oklch(1_0_0)]\", \"[--media-controls-border-color:oklch(0_0_0/0.1)]\", \"[--media-controls-text-color:oklch(0_0_0)]\", \"dark:[--media-controls-background-color:oklch(0_0_0)]\", \"dark:[--media-controls-border-color:oklch(1_0_0/0.1)]\", \"dark:[--media-controls-text-color:oklch(1_0_0)]\");\nconst controls = cn(controls$1, \"gap-2 p-1.5\", \"rounded-(--media-border-radius,0.75rem)\", \"bg-(--media-controls-background-color)\", \"text-(--media-controls-text-color)\", \"backdrop-blur backdrop-brightness-[0.98] backdrop-saturate-[1.2]\", \"ring-1 ring-(color:--media-controls-border-color)\");\nconst popup = {\n\t...popup$1,\n\tvolume: cn(\"py-2 pr-0 pl-16\", \"bg-transparent bg-gradient-to-l from-(--media-controls-background-color) from-80% to-transparent\", \"[--media-popover-side-offset:0.75rem]\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, popup, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=audio.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,OAAO,GAAG,QAAQ,oDAAoD,oDAAoD,8CAA8C,yDAAyD,yDAAyD,kDAAkD;AAClV,MAAM,WAAW,GAAG,YAAY,eAAe,2CAA2C,0CAA0C,sCAAsC,oEAAoE,oDAAoD;AAClS,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,mBAAmB,oGAAoG,wCAAwC;CAC1K"}

package/dist/default/skins/dist/default/minimal/tailwind/components/overlay.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/tailwind/components/overlay.js
-const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90", "transition-[opacity,backdrop-filter] ease-out", "duration-500 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur", "motion-reduce:duration-100");
+const overlay = cn("absolute inset-0 flex flex-col items-start", "pointer-events-none rounded-[inherit]", "opacity-0", "bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent", "backdrop-blur-none backdrop-saturate-150", "transition-[opacity,backdrop-filter] ease-out", "duration-500 delay-500", "peer-data-visible/controls:opacity-100", "peer-data-visible/controls:duration-150", "peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "peer-data-open/error:duration-150", "peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-lg", "motion-reduce:duration-100");
 //#endregion
 export { overlay };

package/dist/default/skins/dist/default/minimal/tailwind/components/overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-~~120 backdrop-brightness-90~~\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur\", \"motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,~~mEAAmE~~,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,~~sCAAsC~~,6BAA6B"}
1	+ {"version":3,"file":"overlay.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/overlay.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/overlay.ts\nconst overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-150\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-lg\", \"motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,4CAA4C,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,yCAAyC,6BAA6B"}

package/dist/default/skins/dist/default/minimal/tailwind/components/popup.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/tailwind/components/popup.js
 const base = cn("m-0 border-0 text-inherit overflow-visible", "transition-[transform,scale,opacity,filter] duration-200", "data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm", "data-instant:duration-0", "data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left");
 const popup = {
-	tooltip: cn(base, "px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-3xl backdrop-saturate-150 backdrop-brightness-90 text-[0.75rem] whitespace-nowrap", "[--media-tooltip-side-offset:0.5rem]"),
+	tooltip: cn(base, "px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-lg backdrop-saturate-150 text-[0.75rem] whitespace-nowrap", "[--media-tooltip-side-offset:0.5rem]"),
 	volume: cn(base, "py-2.5 px-1 rounded-full")
 };

package/dist/default/skins/dist/default/minimal/tailwind/components/popup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popup.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/popup.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/popup.ts\nconst base = cn(\"m-0 border-0 text-inherit overflow-visible\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\", \"data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left\");\nconst popup = {\n\ttooltip: cn(base, \"px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-~~3xl~~ backdrop-saturate-150 ~~backdrop-brightness-90~~ text-[0.75rem] whitespace-nowrap\", \"[--media-tooltip-side-offset:0.5rem]\"),\n\tvolume: cn(base, \"py-2.5 px-1 rounded-full\")\n};\n\n//#endregion\nexport { popup };\n//# sourceMappingURL=popup.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,8CAA8C,4DAA4D,yFAAyF,mFAAmF,2BAA2B,0HAA0H;AAC3b,MAAM,QAAQ;CACb,SAAS,GAAG,MAAM,~~8JAA8J~~,uCAAuC;~~CACvN~~,QAAQ,GAAG,MAAM,2BAA2B;CAC5C"}
1	+ {"version":3,"file":"popup.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/popup.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/popup.ts\nconst base = cn(\"m-0 border-0 text-inherit overflow-visible\", \"transition-[transform,scale,opacity,filter] duration-200\", \"data-starting-style:opacity-0 data-starting-style:scale-0 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-0 data-ending-style:blur-sm\", \"data-instant:duration-0\", \"data-[side=top]:origin-bottom data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left\");\nconst popup = {\n\ttooltip: cn(base, \"px-2 py-1 rounded-sm shadow-md shadow-black/10 bg-white/10 backdrop-blur-lg backdrop-saturate-150 text-[0.75rem] whitespace-nowrap\", \"[--media-tooltip-side-offset:0.5rem]\"),\n\tvolume: cn(base, \"py-2.5 px-1 rounded-full\")\n};\n\n//#endregion\nexport { popup };\n//# sourceMappingURL=popup.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,8CAA8C,4DAA4D,yFAAyF,mFAAmF,2BAA2B,0HAA0H;AAC3b,MAAM,QAAQ;CACb,SAAS,GAAG,MAAM,sIAAsI,uCAAuC;CAC/L,QAAQ,GAAG,MAAM,2BAA2B;CAC5C"}

package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js CHANGED Viewed

@@ -1,6 +1,8 @@
 import { controls as controls$1 } from "./components/controls.js";
 import { popup as popup$1 } from "./components/popup.js";
 import { root as root$1 } from "./components/root.js";
+import { iconState } from "../../shared/tailwind/icon-state.js";
+import { tooltipState } from "../../shared/tailwind/tooltip-state.js";
 import { bufferingIndicator } from "./components/buffering.js";
 import { button } from "./components/button.js";
 import { buttonGroup } from "./components/button-group.js";
@@ -8,9 +10,7 @@ import { icon, iconContainer, iconFlipped } from "./components/icon.js";
 import { seek } from "./components/seek.js";
 import { slider as slider$1 } from "./components/slider.js";
 import { time } from "./components/time.js";
-import { iconState } from "./components/icon-state.js";
 import { overlay } from "./components/overlay.js";
-import { tooltipState } from "./components/tooltip-state.js";
 import { cn } from "@videojs/utils/style";
 //#region ../skins/dist/default/minimal/tailwind/video.tailwind.js
@@ -27,7 +27,10 @@ const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:point
 	"[&_video::-webkit-media-text-track-container]:z-1",
 	"[&_video::-webkit-media-text-track-container]:font-[inherit]",
 	"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50"
-] : [], "[&:fullscreen]:rounded-none");
+] : [], "[&:fullscreen]:rounded-none", {
+	"[&:fullscreen_video]:object-contain": !isShadowDOM,
+	"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none": isShadowDOM
+}, "[&:fullscreen>img]:object-contain");
 const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "transition-[translate,filter,opacity] ease-out", "delay-0 duration-75", "not-data-visible:opacity-0 not-data-visible:translate-y-full", "not-data-visible:blur-sm not-data-visible:pointer-events-none", "not-data-visible:delay-500 not-data-visible:duration-500", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:translate-y-0", "motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
 const slider = {
 	...slider$1,

package/dist/default/skins/dist/default/minimal/tailwind/video.tailwind.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { ~~bufferingIndicator~~ } from \"~~./components~~/~~buffering~~.js\";\nimport { ~~button~~ } from \"~~./components~~/~~button~~.js\";\nimport { ~~buttonGroup~~ } from \"./components/~~button-group~~.js\";\nimport { ~~error~~ } from \"./components/~~error~~.js\";\nimport { ~~icon,~~ ~~iconContainer, iconFlipped, iconHidden~~ } from \"./components/~~icon~~.js\";\nimport { ~~seek~~ } from \"./components/~~seek~~.js\";\nimport { ~~slider~~ as ~~slider$1~~ } from \"./components/~~slider~~.js\";\nimport { ~~time~~ } from \"./components/~~time~~.js\";\nimport { ~~iconState~~ } from \"./components/~~icon-state~~.js\";\nimport { ~~overlay~~ } from \"./components/~~overlay~~.js\";\nimport { ~~tooltipState~~ } from \"./components/~~tooltip-state~~.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15\", \"dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,0.75rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\");\nconst controls = cn(controls$1, \"absolute bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"transition-[translate,filter,opacity] ease-out\", \"delay-0 duration-75\", \"not-data-visible:opacity-0 not-data-visible:translate-y-full\", \"not-data-visible:blur-sm not-data-visible:pointer-events-none\", \"not-data-visible:delay-500 not-data-visible:duration-500\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:translate-y-0\", \"motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(\"[--media-popover-side-offset:0.5rem] p-1 bg-transparent\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,mEAAmE,4BAA4B;CAClO,mJAAmJ;CACnJ,iFAAiF,CAAC;CAClF,EAAE,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,CAAC,cAAc;CAC5d;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,~~8BAA8B~~;~~AACtC~~,MAAM,WAAW,GAAG,YAAY,+BAA+B,4BAA4B,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC3qB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,uCAAuC;CACjE;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0DAA0D;CACrE"}
1	+ {"version":3,"file":"video.tailwind.js","names":[],"sources":["../../../../../../../../skins/dist/default/minimal/tailwind/video.tailwind.js"],"sourcesContent":["import { controls as controls$1 } from \"./components/controls.js\";\nimport { popup as popup$1 } from \"./components/popup.js\";\nimport { root as root$1 } from \"./components/root.js\";\nimport { iconState } from \"../../shared/tailwind/icon-state.js\";\nimport { tooltipState } from \"../../shared/tailwind/tooltip-state.js\";\nimport { bufferingIndicator } from \"./components/buffering.js\";\nimport { button } from \"./components/button.js\";\nimport { buttonGroup } from \"./components/button-group.js\";\nimport { error } from \"./components/error.js\";\nimport { icon, iconContainer, iconFlipped, iconHidden } from \"./components/icon.js\";\nimport { seek } from \"./components/seek.js\";\nimport { slider as slider$1 } from \"./components/slider.js\";\nimport { time } from \"./components/time.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black\", \"after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10\", \"after:inset-0 after:ring-1 after:ring-inset after:ring-black/15\", \"dark:after:ring-white/15\", {\n\t\"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,0.75rem)\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]\": !isShadowDOM\n}, \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:object-cover [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-y:-0.5rem]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-transform\",\n\t\"[&_video::-webkit-media-text-track-container]:duration-150\",\n\t\"[&_video::-webkit-media-text-track-container]:ease-out\",\n\t\"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)\",\n\t\"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)\",\n\t\"[&_video::-webkit-media-text-track-container]:scale-98\",\n\t\"[&_video::-webkit-media-text-track-container]:z-1\",\n\t\"[&_video::-webkit-media-text-track-container]:font-[inherit]\",\n\t\"motion-reduce:[&_video::-webkit-media-text-track-container]:duration-50\"\n] : [], \"[&:fullscreen]:rounded-none\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain [&:fullscreen_::slotted(video)]:rounded-none\": isShadowDOM\n}, \"[&:fullscreen>img]:object-contain\");\nconst controls = cn(controls$1, \"absolute bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 gap-2\", \"text-white z-10\", \"will-change-[translate,filter,opacity]\", \"transition-[translate,filter,opacity] ease-out\", \"delay-0 duration-75\", \"not-data-visible:opacity-0 not-data-visible:translate-y-full\", \"not-data-visible:blur-sm not-data-visible:pointer-events-none\", \"not-data-visible:delay-500 not-data-visible:duration-500\", \"motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:translate-y-0\", \"motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100\", \"@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3\", \"@sm/media-root:gap-3.5\");\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)]\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(\"[--media-popover-side-offset:0.5rem] p-1 bg-transparent\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,mEAAmE,4BAA4B;CAClO,mJAAmJ;CACnJ,iFAAiF,CAAC;CAClF,EAAE,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,CAAC,cAAc;CAC5d;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,+BAA+B;CACtC,uCAAuC,CAAC;CACxC,+FAA+F;CAC/F,EAAE,oCAAoC;AACvC,MAAM,WAAW,GAAG,YAAY,+BAA+B,4BAA4B,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC3qB,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,uCAAuC;CACjE;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,0DAA0D;CACrE"}

package/dist/default/skins/dist/default/{default/tailwind/components → shared/tailwind}/icon-state.js RENAMED Viewed

@@ -1,4 +1,4 @@
-//#region ../skins/dist/default/default/tailwind/components/icon-state.js
+//#region ../skins/dist/default/shared/tailwind/icon-state.js
 const iconState = {
 	play: {
 		button: "group",

package/dist/default/skins/dist/default/shared/tailwind/icon-state.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/icon-state.js"],"sourcesContent":["//#region src/shared/tailwind/icon-state.ts\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\n\n//#endregion\nexport { iconState };\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD"}

package/dist/{dev/skins/dist/default/default/tailwind/components → default/skins/dist/default/shared/tailwind}/tooltip-state.js RENAMED Viewed

@@ -1,4 +1,4 @@
-//#region ../skins/dist/default/default/tailwind/components/tooltip-state.js
+//#region ../skins/dist/default/shared/tailwind/tooltip-state.js
 const tooltipState = {
 	play: {
 		wrapper: "contents group/play-tip",

package/dist/default/skins/dist/default/shared/tailwind/tooltip-state.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"tooltip-state.js","names":[],"sources":["../../../../../../../../skins/dist/default/shared/tailwind/tooltip-state.js"],"sourcesContent":["//#region src/shared/tailwind/tooltip-state.ts\nconst tooltipState = {\n\tplay: {\n\t\twrapper: \"contents group/play-tip\",\n\t\treplay: \"hidden group-has-data-ended/play-tip:block\",\n\t\tplay: \"hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block\",\n\t\tpause: \"hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block\"\n\t},\n\tfullscreen: {\n\t\twrapper: \"contents group/fullscreen-tip\",\n\t\tenter: \"hidden group-[:not(:has([data-fullscreen]))]/fullscreen-tip:block\",\n\t\texit: \"hidden group-has-data-fullscreen/fullscreen-tip:block\"\n\t},\n\tcaptions: {\n\t\twrapper: \"contents group/captions-tip\",\n\t\tenable: \"hidden group-[:not(:has([data-active]))]/captions-tip:block\",\n\t\tdisable: \"hidden group-has-data-active/captions-tip:block\"\n\t},\n\tpip: {\n\t\twrapper: \"contents group/pip-tip\",\n\t\tenter: \"hidden group-[:not(:has([data-pip]))]/pip-tip:block\",\n\t\texit: \"hidden group-has-data-pip/pip-tip:block\"\n\t}\n};\n\n//#endregion\nexport { tooltipState };\n//# sourceMappingURL=tooltip-state.js.map"],"mappings":";AACA,MAAM,eAAe;CACpB,MAAM;EACL,SAAS;EACT,QAAQ;EACR,MAAM;EACN,OAAO;EACP;CACD,YAAY;EACX,SAAS;EACT,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,SAAS;EACT,QAAQ;EACR,SAAS;EACT;CACD,KAAK;EACJ,SAAS;EACT,OAAO;EACP,MAAM;EACN;CACD"}

package/dist/default/store/container-mixin.js CHANGED Viewed

@@ -30,13 +30,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();
@@ -54,18 +54,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
@@ -80,13 +86,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 isMediaSlotElement(node) {
+	return node instanceof HTMLSlotElement && node.name === "media";
 }
-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 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;
 }

package/dist/default/store/container-mixin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"container-mixin.js","names":["#contextStore","#attachMedia","#observer","#onSlotChange","#detach","#getSlottedMedia"],"sources":["../../../src/store/container-mixin.ts"],"sourcesContent":["import type { MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { noop } from '@videojs/utils/function';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerConsumer, PlayerConsumerConstructor } from './types';\n\nexport type ContainerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n BaseClass: Class\n) => Class & PlayerConsumerConstructor<Store>;\n\n/*\n Create a mixin that consumes player context and auto-attaches media elements.\n \n @param context - Player context to consume from an ancestor provider.\n */\nexport function createContainerMixin<Store extends PlayerStore>(context: PlayerContext<Store>): ContainerMixin<Store> {\n return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n class PlayerContainerElement extends BaseClass implements PlayerConsumer<Store>, MediaContainer {\n #detach = noop;\n #observer: MutationObserver \| null = null;\n #contextStore: Store \| null = null;\n\n constructor(...args: any[]) {\n super(...args);\n\n // Created in the constructor body (after all field initializers) so\n // that #contextStore's private slot exists if the callback fires\n // synchronously — which happens when the element is already connected.\n // The host's controller list keeps the consumer alive; no field needed.\n new ContextConsumer(this, {\n context,\n callback: (value) => {\n this.#contextStore = value ?? null;\n this.#attachMedia();\n },\n subscribe: true,\n });\n }\n\n get store(): Store \| null {\n return this.#contextStore;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#observer = new MutationObserver((records) => {\n if (records.some(~~hasMediaNode~~)) this.#attachMedia();\n });\n\n this.#observer.observe(this, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['~~data-media-element~~'],\n });\n\n // Slotted media elements don't appear in the container's subtree,\n // so listen for slot reassignments to pick them up.\n this.addEventListener('slotchange', this.#onSlotChange);\n\n this.#attachMedia();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#observer?.disconnect();\n this.#observer = null;\n this.removeEventListener('slotchange', this.#onSlotChange);\n this.#detach();\n }\n\n #onSlotChange = () => {\n this.#attachMedia();\n };\n\n #getSlottedMedia(): HTMLMediaElement \| null {\n const slot = this.querySelector<HTMLSlotElement>('slot[name=\"media\"]');\n if (!slot) return null;\n\n for (const el of slot.assignedElements({ flatten: true })) {\n if (el ~~instanceof HTMLMediaElement~~) return el;\n }\n\n return null;\n }\n\n #attachMedia() {\n // Prefer the cached context value; fall back to `this.store` which\n // ProviderMixin overrides when both mixins are applied to one element.\n const store = this.#contextStore ?? this.store;\n if (!store) return;\n\n const media =\n this.querySelector<HTMLMediaElement>('video, audio~~, [data-media-element]~~') ?? this.#getSlottedMedia();\n\n if (!media) {\n this.#detach();\n this.#detach = noop;\n return;\n }\n\n const target: PlayerTarget = {\n media,\n container: this,\n };\n\n const hasMediaChanged = store.target?.media !== target.media,\n hasContainerChanged = store.target?.container !== target.container;\n\n if (hasMediaChanged \|\| hasContainerChanged) {\n this.#detach();\n this.#detach = store.attach(target);\n }\n }\n }\n\n return PlayerContainerElement;\n };\n}\n\nfunction ~~isMediaNode~~(node: Node): boolean {\n return node instanceof HTMLMediaElement \|\| (node instanceof ~~Element~~ && node.~~hasAttribute~~('~~data~~-~~media~~-~~element~~'));\n}\n\nfunction ~~hasMediaNode~~(~~record~~: ~~MutationRecord~~): boolean {\n // ~~Attribute~~ ~~mutation:~~ ~~data-media-element~~ ~~was~~ ~~added to a descendant\n if (record~~.~~type~~ === '~~attributes~~' && record~~.target~~ ~~instanceof Element~~) {\n ~~return~~ record.target~~.hasAttribute('data-media-element'~~);\n }\n\n for (const node of record.addedNodes) {\n if (~~isMediaNode~~(node)) return true;\n }\n\n for (const node of record.removedNodes) {\n if (~~isMediaNode~~(node)) return true;\n }\n\n return false;\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,qBAAgD,SAAsD;AACpH,SAA+C,cAAqB;EAClE,MAAM,+BAA+B,UAA2D;GAC9F,UAAU;GACV,YAAqC;GACrC,gBAA8B;GAE9B,YAAY,GAAG,MAAa;AAC1B,UAAM,GAAG,KAAK;AAMd,QAAI,gBAAgB,MAAM;KACxB;KACA,WAAW,UAAU;AACnB,YAAKA,eAAgB,SAAS;AAC9B,YAAKC,aAAc;;KAErB,WAAW;KACZ,CAAC;;GAGJ,IAAI,QAAsB;AACxB,WAAO,MAAKD;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AAEzB,UAAKE,WAAY,IAAI,kBAAkB,YAAY;AACjD,SAAI,QAAQ,KAAK,~~aAAa~~,CAAE,OAAKD,aAAc;~~MACnD~~;AAEF,UAAKC,SAAU,QAAQ,MAAM;KAC3B,WAAW;KACX,SAAS;KACT,YAAY;KACZ,iBAAiB,CAAC,~~qBAAqB~~;~~KACxC~~,CAAC;AAIF,SAAK,iBAAiB,cAAc,MAAKC,aAAc;AAEvD,UAAKF,aAAc;;GAGrB,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKC,UAAW,YAAY;AAC5B,UAAKA,WAAY;AACjB,SAAK,oBAAoB,cAAc,MAAKC,aAAc;AAC1D,UAAKC,QAAS;;GAGhB,sBAAsB;AACpB,UAAKH,aAAc;;GAGrB,mBAA4C;IAC1C,MAAM,OAAO,KAAK,cAA+B,uBAAqB;AACtE,QAAI,CAAC,KAAM,QAAO;AAElB,SAAK,MAAM,MAAM,KAAK,iBAAiB,EAAE,SAAS,MAAM,CAAC,CACvD,KAAI,~~cAAc~~,~~iBAAkB~~,QAAO;~~AAG7C~~,WAAO;;GAGT,eAAe;IAGb,MAAM,QAAQ,MAAKD,gBAAiB,KAAK;AACzC,QAAI,CAAC,MAAO;IAEZ,MAAM,QACJ,KAAK,cAAgC,~~qCAAqC~~,IAAI,MAAKK,iBAAkB;~~AAEvG~~,QAAI,CAAC,OAAO;AACV,~~WAAKD~~,QAAS;AACd,WAAKA,SAAU;AACf;;~~IAGF~~,MAAM,SAAuB;KAC3B;KACA,WAAW;KACZ;IAED,MAAM,kBAAkB,MAAM,QAAQ,UAAU,OAAO,OACrD,sBAAsB,MAAM,QAAQ,cAAc,OAAO;AAE3D,QAAI,mBAAmB,qBAAqB;AAC1C,WAAKA,QAAS;AACd,WAAKA,SAAU,MAAM,OAAO,OAAO;;;;AAKzC,SAAO;;;AAIX,SAAS,~~YAAY~~,MAAqB;~~AACxC~~,QAAO,gBAAgB,~~oBAAqB~~,gBAAgB,~~WAAW~~,KAAK,~~aAAa~~,~~qBAAqB~~;;~~AAGhH~~,SAAS,~~aAAa~~,~~QAAiC~~;~~AAErD~~,~~KAAI~~,~~OAAO~~,SAAS,gBAAgB,~~OAAO~~,~~kBAAkB~~,~~QAC3D~~,~~QAAO,~~OAAO,OAAO,~~aAAa~~,~~qBAAqB~~;~~AAGzD~~,MAAK,MAAM,QAAQ,OAAO,WACxB,KAAI,~~YAAY~~,KAAK,CAAE,QAAO;~~AAGhC~~,MAAK,MAAM,QAAQ,OAAO,aACxB,KAAI,~~YAAY~~,KAAK,CAAE,QAAO;~~AAGhC~~,QAAO"}
1	+ {"version":3,"file":"container-mixin.js","names":["#contextStore","#attachMedia","#observer","#onSlotChange","#detach","#findMediaElement","#getSlottedMedia"],"sources":["../../../src/store/container-mixin.ts"],"sourcesContent":["import type { MediaContainer, PlayerStore, PlayerTarget } from '@videojs/core/dom';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { noop } from '@videojs/utils/function';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerConsumer, PlayerConsumerConstructor } from './types';\n\nexport type ContainerMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n BaseClass: Class\n) => Class & PlayerConsumerConstructor<Store>;\n\n/*\n Create a mixin that consumes player context and auto-attaches media elements.\n \n @param context - Player context to consume from an ancestor provider.\n */\nexport function createContainerMixin<Store extends PlayerStore>(context: PlayerContext<Store>): ContainerMixin<Store> {\n return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n class PlayerContainerElement extends BaseClass implements PlayerConsumer<Store>, MediaContainer {\n #detach = noop;\n #observer: MutationObserver \| null = null;\n #contextStore: Store \| null = null;\n\n constructor(...args: any[]) {\n super(...args);\n\n // Created in the constructor body (after all field initializers) so\n // that #contextStore's private slot exists if the callback fires\n // synchronously — which happens when the element is already connected.\n // The host's controller list keeps the consumer alive; no field needed.\n new ContextConsumer(this, {\n context,\n callback: (value) => {\n this.#contextStore = value ?? null;\n this.#attachMedia();\n },\n subscribe: true,\n });\n }\n\n get store(): Store \| null {\n return this.#contextStore;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n\n this.#observer = new MutationObserver((records) => {\n if (records.some(hasMediaElement)) this.#attachMedia();\n });\n\n this.#observer.observe(this, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['name'],\n });\n\n // Slotted media elements don't appear in the container's subtree,\n // so listen for slot reassignments to pick them up.\n this.addEventListener('slotchange', this.#onSlotChange);\n\n this.#attachMedia();\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.#observer?.disconnect();\n this.#observer = null;\n this.removeEventListener('slotchange', this.#onSlotChange);\n this.#detach();\n }\n\n #onSlotChange = () => {\n this.#attachMedia();\n };\n\n #getSlottedMedia(): HTMLMediaElement \| null {\n const slot = this.querySelector<HTMLSlotElement>('slot[name=\"media\"]');\n if (!slot) return null;\n\n for (const el of slot.assignedElements({ flatten: true })) {\n if (isMediaElement(el)) return el as HTMLMediaElement;\n }\n\n return null;\n }\n\n #findMediaElement(): HTMLMediaElement \| null {\n const media = Array.from(this.children).find(isMediaElement);\n if (media) return media as HTMLMediaElement;\n return null;\n }\n\n #attachMedia() {\n // Prefer the cached context value; fall back to `this.store` which\n // ProviderMixin overrides when both mixins are applied to one element.\n const store = this.#contextStore ?? this.store;\n if (!store) return;\n\n const media =\n this.querySelector<HTMLMediaElement>('video, audio') ?? this.#findMediaElement() ?? this.#getSlottedMedia();\n\n if (!media) {\n this.#detach();\n this.#detach = noop;\n return;\n }\n\n if (isCustomMediaElement(media)) {\n globalThis.customElements?.upgrade?.(media);\n }\n\n const target: PlayerTarget = {\n media,\n container: this,\n };\n\n const hasMediaChanged = store.target?.media !== target.media,\n hasContainerChanged = store.target?.container !== target.container;\n\n if (hasMediaChanged \|\| hasContainerChanged) {\n this.#detach();\n this.#detach = store.attach(target);\n }\n }\n }\n\n return PlayerContainerElement;\n };\n}\n\nfunction isMediaElement(node: Node): boolean {\n return node instanceof HTMLMediaElement \|\| isCustomMediaElement(node);\n}\n\nfunction isCustomMediaElement(node: Node): boolean {\n return node instanceof HTMLElement && (node.localName.endsWith('-audio') \|\| node.localName.endsWith('-video'));\n}\n\nfunction isMediaSlotElement(node: Node): boolean {\n return node instanceof HTMLSlotElement && node.name === 'media';\n}\n\nfunction hasMediaElement(record: MutationRecord): boolean {\n if (isMediaSlotElement(record.target)) return true;\n\n for (const node of record.addedNodes) {\n if (isMediaElement(node) \|\| isMediaSlotElement(node)) return true;\n }\n\n for (const node of record.removedNodes) {\n if (isMediaElement(node) \|\| isMediaSlotElement(node)) return true;\n }\n\n return false;\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,qBAAgD,SAAsD;AACpH,SAA+C,cAAqB;EAClE,MAAM,+BAA+B,UAA2D;GAC9F,UAAU;GACV,YAAqC;GACrC,gBAA8B;GAE9B,YAAY,GAAG,MAAa;AAC1B,UAAM,GAAG,KAAK;AAMd,QAAI,gBAAgB,MAAM;KACxB;KACA,WAAW,UAAU;AACnB,YAAKA,eAAgB,SAAS;AAC9B,YAAKC,aAAc;;KAErB,WAAW;KACZ,CAAC;;GAGJ,IAAI,QAAsB;AACxB,WAAO,MAAKD;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AAEzB,UAAKE,WAAY,IAAI,kBAAkB,YAAY;AACjD,SAAI,QAAQ,KAAK,gBAAgB,CAAE,OAAKD,aAAc;MACtD;AAEF,UAAKC,SAAU,QAAQ,MAAM;KAC3B,WAAW;KACX,SAAS;KACT,YAAY;KACZ,iBAAiB,CAAC,OAAO;KAC1B,CAAC;AAIF,SAAK,iBAAiB,cAAc,MAAKC,aAAc;AAEvD,UAAKF,aAAc;;GAGrB,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKC,UAAW,YAAY;AAC5B,UAAKA,WAAY;AACjB,SAAK,oBAAoB,cAAc,MAAKC,aAAc;AAC1D,UAAKC,QAAS;;GAGhB,sBAAsB;AACpB,UAAKH,aAAc;;GAGrB,mBAA4C;IAC1C,MAAM,OAAO,KAAK,cAA+B,uBAAqB;AACtE,QAAI,CAAC,KAAM,QAAO;AAElB,SAAK,MAAM,MAAM,KAAK,iBAAiB,EAAE,SAAS,MAAM,CAAC,CACvD,KAAI,eAAe,GAAG,CAAE,QAAO;AAGjC,WAAO;;GAGT,oBAA6C;IAC3C,MAAM,QAAQ,MAAM,KAAK,KAAK,SAAS,CAAC,KAAK,eAAe;AAC5D,QAAI,MAAO,QAAO;AAClB,WAAO;;GAGT,eAAe;IAGb,MAAM,QAAQ,MAAKD,gBAAiB,KAAK;AACzC,QAAI,CAAC,MAAO;IAEZ,MAAM,QACJ,KAAK,cAAgC,eAAe,IAAI,MAAKK,kBAAmB,IAAI,MAAKC,iBAAkB;AAE7G,QAAI,CAAC,OAAO;AACV,WAAKF,QAAS;AACd,WAAKA,SAAU;AACf;;AAGF,QAAI,qBAAqB,MAAM,CAC7B,YAAW,gBAAgB,UAAU,MAAM;IAG7C,MAAM,SAAuB;KAC3B;KACA,WAAW;KACZ;IAED,MAAM,kBAAkB,MAAM,QAAQ,UAAU,OAAO,OACrD,sBAAsB,MAAM,QAAQ,cAAc,OAAO;AAE3D,QAAI,mBAAmB,qBAAqB;AAC1C,WAAKA,QAAS;AACd,WAAKA,SAAU,MAAM,OAAO,OAAO;;;;AAKzC,SAAO;;;AAIX,SAAS,eAAe,MAAqB;AAC3C,QAAO,gBAAgB,oBAAoB,qBAAqB,KAAK;;AAGvE,SAAS,qBAAqB,MAAqB;AACjD,QAAO,gBAAgB,gBAAgB,KAAK,UAAU,SAAS,SAAS,IAAI,KAAK,UAAU,SAAS,SAAS;;AAG/G,SAAS,mBAAmB,MAAqB;AAC/C,QAAO,gBAAgB,mBAAmB,KAAK,SAAS;;AAG1D,SAAS,gBAAgB,QAAiC;AACxD,KAAI,mBAAmB,OAAO,OAAO,CAAE,QAAO;AAE9C,MAAK,MAAM,QAAQ,OAAO,WACxB,KAAI,eAAe,KAAK,IAAI,mBAAmB,KAAK,CAAE,QAAO;AAG/D,MAAK,MAAM,QAAQ,OAAO,aACxB,KAAI,eAAe,KAAK,IAAI,mBAAmB,KAAK,CAAE,QAAO;AAG/D,QAAO"}

package/dist/default/ui/tooltip/tooltip-group-element.js CHANGED Viewed

@@ -25,7 +25,10 @@ var TooltipGroupElement = class extends MediaElement {
 		};
 	}
 	#core = new TooltipGroupCore();
-	#provider = new ContextProvider(this, { context: tooltipGroupContext });
+	#provider = new ContextProvider(this, {
+		context: tooltipGroupContext,
+		initialValue: this.#core
+	});
 	update(_changed) {
 		super.update(_changed);
 		this.#core.setProps(this);

package/dist/default/ui/tooltip/tooltip-group-element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip-group-element.js","names":["#core","#provider"],"sources":["../../../../src/ui/tooltip/tooltip-group-element.ts"],"sourcesContent":["import { TooltipGroupCore } from '@videojs/core';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipGroupElement extends MediaElement {\n static readonly tagName = 'media-tooltip-group';\n\n static override properties = {\n delay: { type: Number },\n closeDelay: { type: Number, attribute: 'close-delay' },\n timeout: { type: Number },\n } satisfies PropertyDeclarationMap<keyof TooltipGroupCore.Props>;\n\n delay = TooltipGroupCore.defaultProps.delay;\n closeDelay = TooltipGroupCore.defaultProps.closeDelay;\n timeout = TooltipGroupCore.defaultProps.timeout;\n\n readonly #core = new TooltipGroupCore();\n readonly #provider = new ContextProvider(this, { context: tooltipGroupContext });\n\n protected override update(_changed: PropertyValues): void {\n super.update(_changed);\n this.#core.setProps(this);\n this.#provider.setValue(this.#core);\n }\n}\n"],"mappings":";;;;;;AAOA,IAAa,sBAAb,cAAyC,aAAa;;;eAS5C,iBAAiB,aAAa;oBACzB,iBAAiB,aAAa;iBACjC,iBAAiB,aAAa;;;iBAVd;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACtD,SAAS,EAAE,MAAM,QAAQ;GAC1B;;CAMD,CAASA,OAAQ,IAAI,kBAAkB;CACvC,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,~~qBAAqB~~,CAAC;~~CAEhF~~,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,~~QAAKD~~,KAAM,SAAS,KAAK;AACzB,QAAKC,SAAU,SAAS,MAAKD,KAAM"}
1	+ {"version":3,"file":"tooltip-group-element.js","names":["#core","#provider"],"sources":["../../../../src/ui/tooltip/tooltip-group-element.ts"],"sourcesContent":["import { TooltipGroupCore } from '@videojs/core';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { tooltipGroupContext } from './context';\n\nexport class TooltipGroupElement extends MediaElement {\n static readonly tagName = 'media-tooltip-group';\n\n static override properties = {\n delay: { type: Number },\n closeDelay: { type: Number, attribute: 'close-delay' },\n timeout: { type: Number },\n } satisfies PropertyDeclarationMap<keyof TooltipGroupCore.Props>;\n\n delay = TooltipGroupCore.defaultProps.delay;\n closeDelay = TooltipGroupCore.defaultProps.closeDelay;\n timeout = TooltipGroupCore.defaultProps.timeout;\n\n readonly #core = new TooltipGroupCore();\n readonly #provider = new ContextProvider(this, { context: tooltipGroupContext, initialValue: this.#core });\n\n protected override update(_changed: PropertyValues): void {\n super.update(_changed);\n this.#core.setProps(this);\n this.#provider.setValue(this.#core);\n }\n}\n"],"mappings":";;;;;;AAOA,IAAa,sBAAb,cAAyC,aAAa;;;eAS5C,iBAAiB,aAAa;oBACzB,iBAAiB,aAAa;iBACjC,iBAAiB,aAAa;;;iBAVd;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACtD,SAAS,EAAE,MAAM,QAAQ;GAC1B;;CAMD,CAASA,OAAQ,IAAI,kBAAkB;CACvC,CAASC,WAAY,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAqB,cAAc,MAAKD;EAAO,CAAC;CAE1G,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,QAAKA,KAAM,SAAS,KAAK;AACzB,QAAKC,SAAU,SAAS,MAAKD,KAAM"}

package/dist/dev/_virtual/inline-css_src/define/audio/minimal-skin.js CHANGED Viewed

@@ -1,5 +1,5 @@
 //#region inline-css:src/define/audio/minimal-skin.js
-var minimal_skin_default = "/* ==========================================================================\n   Icon State Visibility for Audio 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  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  display: block;\n  opacity: 1;\n}\n\n/* ==========================================================================\n   Tooltip Label State Visibility for Audio 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  display: block;\n}\n\n/* ==========================================================================\n   Reset\n   ========================================================================== */\n\n.media-minimal-skin *,\n.media-minimal-skin *::before,\n.media-minimal-skin *::after {\n  box-sizing: border-box;\n  margin: 0;\n}\n.media-minimal-skin img,\n.media-minimal-skin video,\n.media-minimal-skin svg {\n  display: block;\n  max-width: 100%;\n}\n.media-minimal-skin button {\n  font: inherit;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .media-minimal-skin {\n    interpolate-size: allow-keywords;\n  }\n}\n\n/* ==========================================================================\n   Root Container\n   ========================================================================== */\n\n.media-minimal-skin {\n  position: relative;\n  isolation: isolate;\n  display: block;\n  container: media-root / inline-size;\n  border-radius: var(--media-border-radius, 0.75rem);\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   Buffering Indicator\n   ========================================================================== */\n\n.media-minimal-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\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-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  pointer-events: none;\n}\n\n.media-minimal-skin .media-error__dialog {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  max-width: 16rem;\n  padding: 1rem;\n  color: oklch(1 0 0);\n  font-size: 0.875rem;\n  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);\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-minimal-skin .media-error[data-starting-style] .media-error__dialog,\n.media-minimal-skin .media-error[data-ending-style] .media-error__dialog {\n  opacity: 0;\n  transform: scale(0.5);\n}\n\n.media-minimal-skin .media-error__content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.375rem 0;\n}\n\n.media-minimal-skin .media-error__title {\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.media-minimal-skin .media-error__description {\n  opacity: 0.7;\n}\n\n.media-minimal-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-minimal-skin .media-controls {\n  container: media-controls / inline-size;\n  display: flex;\n  align-items: center;\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\n/* ==========================================================================\n   Time Controls & Display\n   ========================================================================== */\n\n.media-minimal-skin .media-time-controls {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n}\n.media-minimal-skin .media-time {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.media-minimal-skin .media-time__value {\n  font-variant-numeric: tabular-nums;\n}\n.media-minimal-skin .media-time__value--current,\n.media-minimal-skin .media-time__separator {\n  display: none;\n}\n@container media-controls (width > 28rem) {\n  .media-minimal-skin .media-time-controls {\n    flex-direction: row;\n  }\n  .media-minimal-skin .media-time__value--duration,\n  .media-minimal-skin .media-time__separator {\n    color: oklch(from currentColor l c h / 0.6);\n  }\n  .media-minimal-skin .media-time__value--current,\n  .media-minimal-skin .media-time__separator {\n    display: inline;\n  }\n}\n\n/* ==========================================================================\n   Button Groups\n   ========================================================================== */\n\n.media-minimal-skin .media-button-group {\n  display: flex;\n  align-items: center;\n  gap: 0.075rem;\n\n  @container media-root (width > 40rem) {\n    gap: 0.125rem;\n  }\n}\n\n/* ==========================================================================\n   Buttons\n   ========================================================================== */\n\n/* Base button */\n.media-minimal-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: 0.5rem;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  color: oklch(0 0 0);\n  font-weight: 500;\n  text-align: center;\n  text-shadow: inherit;\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: currentColor;\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-minimal-skin .media-button--icon {\n  display: grid;\n  width: 2.375rem;\n  padding: 0;\n  aspect-ratio: 1;\n  background: transparent;\n  color: inherit;\n\n  &:hover,\n  &:focus-visible,\n  &[aria-expanded=\"true\"] {\n    color: oklch(from currentColor l c h / 0.8);\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-minimal-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-minimal-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-minimal-skin .media-icon__container {\n  position: relative;\n}\n.media-minimal-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-minimal-skin .media-icon--flipped {\n  scale: -1 1;\n}\n\n/* ==========================================================================\n   Slider\n   ========================================================================== */\n\n.media-minimal-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: 4.5rem;\n  }\n}\n\n/* Track */\n.media-minimal-skin .media-slider__track {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  border-radius: inherit;\n  user-select: none;\n  background-color: oklch(from currentColor l c h / 0.2);\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: 0.1875rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 0.1875rem;\n    height: 100%;\n  }\n}\n\n/* Thumb */\n.media-minimal-skin .media-slider__thumb {\n  position: absolute;\n  transform: translate(-50%, -50%);\n  z-index: 10;\n  width: 0.75rem;\n  height: 0.75rem;\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  scale: 0.7;\n  transform-origin: center;\n  transition-property: opacity, scale, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\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  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n}\n\n.media-minimal-skin .media-slider:hover .media-slider__thumb,\n.media-minimal-skin .media-slider:focus-within .media-slider__thumb,\n.media-minimal-skin .media-slider__thumb--persistent {\n  opacity: 1;\n  scale: 1;\n}\n\n/* Shared track fills */\n.media-minimal-skin .media-slider__buffer,\n.media-minimal-skin .media-slider__fill {\n  position: absolute;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"horizontal\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"horizontal\"] {\n  inset-block: 0;\n  left: 0;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"vertical\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"vertical\"] {\n  inset-inline: 0;\n  bottom: 0;\n}\n\n/* Buffer */\n.media-minimal-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-minimal-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-minimal-skin .media-slider__time-display {\n  font-variant-numeric: tabular-nums;\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin .media-popover,\n.media-minimal-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-minimal-skin .media-tooltip {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  background-color: oklch(1 0 0 / 0.1);\n  backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\n  box-shadow:\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  font-size: 0.75rem;\n  white-space: nowrap;\n  --media-tooltip-side-offset: 0.5rem;\n\n  @media (prefers-reduced-transparency: reduce) {\n    background-color: oklch(0 0 0 / 0.7);\n  }\n\n  @media (prefers-contrast: more) {\n    background-color: oklch(0 0 0 / 0.9);\n  }\n}\n\n\n/* ==========================================================================\n  Controls\n  ========================================================================== */\n\n.media-minimal-skin--audio {\n  --media-controls-background-color: oklch(1 0 0);\n  --media-controls-border-color: oklch(0 0 0 / 0.1);\n  --media-controls-text-color: oklch(0 0 0);\n\n  @media (prefers-color-scheme: dark) {\n    --media-controls-background-color: oklch(0 0 0);\n    --media-controls-border-color: oklch(1 0 0 / 0.1);\n    --media-controls-text-color: oklch(1 0 0);\n  }\n}\n.media-minimal-skin--audio .media-controls {\n  gap: 0.5rem;\n  padding: 0.375rem;\n  background-color: var(--media-controls-background-color);\n  backdrop-filter: blur(8px) brightness(0.98) saturate(1.2);\n  border-radius: var(--media-border-radius, 0.75rem);\n  color: var(--media-controls-text-color);\n  box-shadow: 0 0 0 1px var(--media-controls-border-color);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin--audio .media-popover--volume {\n  background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%);\n  padding: 0.5rem 0 0.5rem 4rem;\n  --media-popover-side-offset: 0.75rem;\n}\n\n";
+var minimal_skin_default = "/* ==========================================================================\n   Icon State Visibility for Audio 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  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  display: block;\n  opacity: 1;\n}\n\n/* ==========================================================================\n   Tooltip Label State Visibility for Audio 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  display: block;\n}\n\n/* ==========================================================================\n   Reset\n   ========================================================================== */\n\n.media-minimal-skin *,\n.media-minimal-skin *::before,\n.media-minimal-skin *::after {\n  box-sizing: border-box;\n  margin: 0;\n}\n.media-minimal-skin img,\n.media-minimal-skin video,\n.media-minimal-skin svg {\n  display: block;\n  max-width: 100%;\n}\n.media-minimal-skin button {\n  font: inherit;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .media-minimal-skin {\n    interpolate-size: allow-keywords;\n  }\n}\n\n/* ==========================================================================\n   Root Container\n   ========================================================================== */\n\n.media-minimal-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, 0.75rem);\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   Buffering Indicator\n   ========================================================================== */\n\n.media-minimal-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\n/* ==========================================================================\n   Error Dialog\n   ========================================================================== */\n\n.media-minimal-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  pointer-events: none;\n}\n\n.media-minimal-skin .media-error__dialog {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  max-width: 16rem;\n  padding: 1rem;\n  color: oklch(1 0 0);\n  font-size: 0.875rem;\n  text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);\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-minimal-skin .media-error[data-starting-style] .media-error__dialog,\n.media-minimal-skin .media-error[data-ending-style] .media-error__dialog {\n  opacity: 0;\n  transform: scale(0.5);\n}\n\n.media-minimal-skin .media-error__content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.375rem 0;\n}\n\n.media-minimal-skin .media-error__title {\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.media-minimal-skin .media-error__description {\n  opacity: 0.7;\n}\n\n.media-minimal-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-minimal-skin .media-controls {\n  container: media-controls / inline-size;\n  display: flex;\n  align-items: center;\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\n/* ==========================================================================\n   Time Controls & Display\n   ========================================================================== */\n\n.media-minimal-skin .media-time-controls {\n  display: flex;\n  flex-direction: row-reverse;\n  align-items: center;\n  flex: 1;\n  gap: 0.75rem;\n}\n.media-minimal-skin .media-time {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.media-minimal-skin .media-time__value {\n  font-variant-numeric: tabular-nums;\n}\n.media-minimal-skin .media-time__value--current,\n.media-minimal-skin .media-time__separator {\n  display: none;\n}\n@container media-controls (width > 28rem) {\n  .media-minimal-skin .media-time-controls {\n    flex-direction: row;\n  }\n  .media-minimal-skin .media-time__value--duration,\n  .media-minimal-skin .media-time__separator {\n    color: oklch(from currentColor l c h / 0.6);\n  }\n  .media-minimal-skin .media-time__value--current,\n  .media-minimal-skin .media-time__separator {\n    display: inline;\n  }\n}\n\n/* ==========================================================================\n   Button Groups\n   ========================================================================== */\n\n.media-minimal-skin .media-button-group {\n  display: flex;\n  align-items: center;\n  gap: 0.075rem;\n\n  @container media-root (width > 40rem) {\n    gap: 0.125rem;\n  }\n}\n\n/* ==========================================================================\n   Buttons\n   ========================================================================== */\n\n/* Base button */\n.media-minimal-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: 0.5rem;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\n  color: oklch(0 0 0);\n  font-weight: 500;\n  text-align: center;\n  text-shadow: inherit;\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: currentColor;\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-minimal-skin .media-button--icon {\n  display: grid;\n  width: 2.375rem;\n  padding: 0;\n  aspect-ratio: 1;\n  background: transparent;\n  color: inherit;\n\n  &:hover,\n  &:focus-visible,\n  &[aria-expanded=\"true\"] {\n    color: oklch(from currentColor l c h / 0.8);\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-minimal-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-minimal-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-minimal-skin .media-icon__container {\n  position: relative;\n}\n.media-minimal-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-minimal-skin .media-icon--flipped {\n  scale: -1 1;\n}\n\n/* ==========================================================================\n   Slider\n   ========================================================================== */\n\n.media-minimal-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: 4.5rem;\n  }\n}\n\n/* Track */\n.media-minimal-skin .media-slider__track {\n  position: relative;\n  isolation: isolate;\n  overflow: hidden;\n  border-radius: inherit;\n  user-select: none;\n  background-color: oklch(from currentColor l c h / 0.2);\n\n  &[data-orientation=\"horizontal\"] {\n    width: 100%;\n    height: 0.1875rem;\n  }\n\n  &[data-orientation=\"vertical\"] {\n    width: 0.1875rem;\n    height: 100%;\n  }\n}\n\n/* Thumb */\n.media-minimal-skin .media-slider__thumb {\n  position: absolute;\n  transform: translate(-50%, -50%);\n  z-index: 10;\n  width: 0.75rem;\n  height: 0.75rem;\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  scale: 0.7;\n  transform-origin: center;\n  transition-property: opacity, scale, outline-offset;\n  transition-duration: 150ms;\n  transition-timing-function: ease-out;\n  user-select: none;\n  outline: 2px solid transparent;\n  outline-offset: -2px;\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  &:focus-visible {\n    outline-color: currentColor;\n    outline-offset: 2px;\n  }\n}\n\n.media-minimal-skin .media-slider:hover .media-slider__thumb,\n.media-minimal-skin .media-slider:focus-within .media-slider__thumb,\n.media-minimal-skin .media-slider__thumb--persistent {\n  opacity: 1;\n  scale: 1;\n}\n\n/* Shared track fills */\n.media-minimal-skin .media-slider__buffer,\n.media-minimal-skin .media-slider__fill {\n  position: absolute;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"horizontal\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"horizontal\"] {\n  inset-block: 0;\n  left: 0;\n}\n\n.media-minimal-skin .media-slider__buffer[data-orientation=\"vertical\"],\n.media-minimal-skin .media-slider__fill[data-orientation=\"vertical\"] {\n  inset-inline: 0;\n  bottom: 0;\n}\n\n/* Buffer */\n.media-minimal-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-minimal-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-minimal-skin .media-slider__time-display {\n  font-variant-numeric: tabular-nums;\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin .media-popover,\n.media-minimal-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-minimal-skin .media-tooltip {\n  padding: 0.25rem 0.5rem;\n  border-radius: 0.25rem;\n  background-color: oklch(1 0 0 / 0.1);\n  backdrop-filter: blur(16px) saturate(1.5);\n  box-shadow:\n    0 4px 6px -1px oklch(0 0 0 / 0.1),\n    0 2px 4px -2px oklch(0 0 0 / 0.1);\n  font-size: 0.75rem;\n  white-space: nowrap;\n  --media-tooltip-side-offset: 0.5rem;\n\n  @media (prefers-reduced-transparency: reduce) {\n    background-color: oklch(0 0 0 / 0.7);\n  }\n\n  @media (prefers-contrast: more) {\n    background-color: oklch(0 0 0 / 0.9);\n  }\n}\n\n\n/* ==========================================================================\n  Controls\n  ========================================================================== */\n\n.media-minimal-skin--audio {\n  --media-controls-background-color: oklch(1 0 0);\n  --media-controls-border-color: oklch(0 0 0 / 0.1);\n  --media-controls-text-color: oklch(0 0 0);\n\n  @media (prefers-color-scheme: dark) {\n    --media-controls-background-color: oklch(0 0 0);\n    --media-controls-border-color: oklch(1 0 0 / 0.1);\n    --media-controls-text-color: oklch(1 0 0);\n  }\n}\n.media-minimal-skin--audio .media-controls {\n  gap: 0.5rem;\n  padding: 0.375rem;\n  background-color: var(--media-controls-background-color);\n  backdrop-filter: blur(16px) saturate(1.5);\n  border-radius: var(--media-border-radius, 0.75rem);\n  color: var(--media-controls-text-color);\n  box-shadow: 0 0 0 1px var(--media-controls-border-color);\n}\n\n/* ==========================================================================\n   Popups & Animations\n   ========================================================================== */\n\n.media-minimal-skin--audio .media-popover--volume {\n  background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%);\n  padding: 0.5rem 0 0.5rem 4rem;\n  --media-popover-side-offset: 0.75rem;\n}\n\nmedia-tooltip-group {\n  display: contents;\n}\n\n";
 //#endregion
 export { minimal_skin_default as default };

package/dist/dev/_virtual/inline-css_src/define/audio/minimal-skin.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../../../inline-css:src/define/audio/minimal-skin.js"],"sourcesContent":["export default \"/* ==========================================================================\\n Icon State Visibility for Audio 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 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 display: block;\\n opacity: 1;\\n}\\n\\n/ ==========================================================================\\n Tooltip Label State Visibility for Audio 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 display: block;\\n}\\n\\n/ ==========================================================================\\n Reset\\n ========================================================================== /\\n\\n.media-minimal-skin ,\\n.media-minimal-skin ::before,\\n.media-minimal-skin ::after {\\n box-sizing: border-box;\\n margin: 0;\\n}\\n.media-minimal-skin img,\\n.media-minimal-skin video,\\n.media-minimal-skin svg {\\n display: block;\\n max-width: 100%;\\n}\\n.media-minimal-skin button {\\n font: inherit;\\n}\\n@media (prefers-reduced-motion: no-preference) {\\n .media-minimal-skin {\\n interpolate-size: allow-keywords;\\n }\\n}\\n\\n/* ==========================================================================\\n Root Container\\n ========================================================================== /\\n\\n.media-minimal-skin {\\n position: relative;\\n isolation: isolate;\\n display: block;\\n container: media-root / inline-size;\\n border-radius: var(--media-border-radius, 0.75rem);\\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 Buffering Indicator\\n ========================================================================== /\\n\\n.media-minimal-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\\n/ ==========================================================================\\n Error Dialog\\n ========================================================================== /\\n\\n.media-minimal-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 pointer-events: none;\\n}\\n\\n.media-minimal-skin .media-error__dialog {\\n display: flex;\\n flex-direction: column;\\n gap: 0.75rem;\\n max-width: 16rem;\\n padding: 1rem;\\n color: oklch(1 0 0);\\n font-size: 0.875rem;\\n text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);\\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-minimal-skin .media-error[data-starting-style] .media-error__dialog,\\n.media-minimal-skin .media-error[data-ending-style] .media-error__dialog {\\n opacity: 0;\\n transform: scale(0.5);\\n}\\n\\n.media-minimal-skin .media-error__content {\\n display: flex;\\n flex-direction: column;\\n gap: 0.5rem;\\n padding: 0.375rem 0;\\n}\\n\\n.media-minimal-skin .media-error__title {\\n font-weight: 600;\\n line-height: 1.25;\\n}\\n\\n.media-minimal-skin .media-error__description {\\n opacity: 0.7;\\n}\\n\\n.media-minimal-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-minimal-skin .media-controls {\\n container: media-controls / inline-size;\\n display: flex;\\n align-items: center;\\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\\n/* ==========================================================================\\n Time Controls & Display\\n ========================================================================== /\\n\\n.media-minimal-skin .media-time-controls {\\n display: flex;\\n flex-direction: row-reverse;\\n align-items: center;\\n flex: 1;\\n gap: 0.75rem;\\n}\\n.media-minimal-skin .media-time {\\n display: flex;\\n align-items: center;\\n gap: 0.25rem;\\n}\\n.media-minimal-skin .media-time__value {\\n font-variant-numeric: tabular-nums;\\n}\\n.media-minimal-skin .media-time__value--current,\\n.media-minimal-skin .media-time__separator {\\n display: none;\\n}\\n@container media-controls (width > 28rem) {\\n .media-minimal-skin .media-time-controls {\\n flex-direction: row;\\n }\\n .media-minimal-skin .media-time__value--duration,\\n .media-minimal-skin .media-time__separator {\\n color: oklch(from currentColor l c h / 0.6);\\n }\\n .media-minimal-skin .media-time__value--current,\\n .media-minimal-skin .media-time__separator {\\n display: inline;\\n }\\n}\\n\\n/ ==========================================================================\\n Button Groups\\n ========================================================================== /\\n\\n.media-minimal-skin .media-button-group {\\n display: flex;\\n align-items: center;\\n gap: 0.075rem;\\n\\n @container media-root (width > 40rem) {\\n gap: 0.125rem;\\n }\\n}\\n\\n/ ==========================================================================\\n Buttons\\n ========================================================================== /\\n\\n/ Base button /\\n.media-minimal-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: 0.5rem;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n color: oklch(0 0 0);\\n font-weight: 500;\\n text-align: center;\\n text-shadow: inherit;\\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: currentColor;\\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-minimal-skin .media-button--icon {\\n display: grid;\\n width: 2.375rem;\\n padding: 0;\\n aspect-ratio: 1;\\n background: transparent;\\n color: inherit;\\n\\n &:hover,\\n &:focus-visible,\\n &[aria-expanded=\\\"true\\\"] {\\n color: oklch(from currentColor l c h / 0.8);\\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-minimal-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-minimal-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-minimal-skin .media-icon__container {\\n position: relative;\\n}\\n.media-minimal-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-minimal-skin .media-icon--flipped {\\n scale: -1 1;\\n}\\n\\n/ ==========================================================================\\n Slider\\n ========================================================================== /\\n\\n.media-minimal-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: 4.5rem;\\n }\\n}\\n\\n/* Track /\\n.media-minimal-skin .media-slider__track {\\n position: relative;\\n isolation: isolate;\\n overflow: hidden;\\n border-radius: inherit;\\n user-select: none;\\n background-color: oklch(from currentColor l c h / 0.2);\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n width: 100%;\\n height: 0.1875rem;\\n }\\n\\n &[data-orientation=\\\"vertical\\\"] {\\n width: 0.1875rem;\\n height: 100%;\\n }\\n}\\n\\n/ Thumb /\\n.media-minimal-skin .media-slider__thumb {\\n position: absolute;\\n transform: translate(-50%, -50%);\\n z-index: 10;\\n width: 0.75rem;\\n height: 0.75rem;\\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 scale: 0.7;\\n transform-origin: center;\\n transition-property: opacity, scale, outline-offset;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\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 &:focus-visible {\\n outline-color: currentColor;\\n outline-offset: 2px;\\n }\\n}\\n\\n.media-minimal-skin .media-slider:hover .media-slider__thumb,\\n.media-minimal-skin .media-slider:focus-within .media-slider__thumb,\\n.media-minimal-skin .media-slider__thumb--persistent {\\n opacity: 1;\\n scale: 1;\\n}\\n\\n/* Shared track fills /\\n.media-minimal-skin .media-slider__buffer,\\n.media-minimal-skin .media-slider__fill {\\n position: absolute;\\n border-radius: inherit;\\n pointer-events: none;\\n}\\n\\n.media-minimal-skin .media-slider__buffer[data-orientation=\\\"horizontal\\\"],\\n.media-minimal-skin .media-slider__fill[data-orientation=\\\"horizontal\\\"] {\\n inset-block: 0;\\n left: 0;\\n}\\n\\n.media-minimal-skin .media-slider__buffer[data-orientation=\\\"vertical\\\"],\\n.media-minimal-skin .media-slider__fill[data-orientation=\\\"vertical\\\"] {\\n inset-inline: 0;\\n bottom: 0;\\n}\\n\\n/ Buffer /\\n.media-minimal-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-minimal-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-minimal-skin .media-slider__time-display {\\n font-variant-numeric: tabular-nums;\\n}\\n\\n/ ==========================================================================\\n Popups & Animations\\n ========================================================================== /\\n\\n.media-minimal-skin .media-popover,\\n.media-minimal-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-minimal-skin .media-tooltip {\\n padding: 0.25rem 0.5rem;\\n border-radius: 0.25rem;\\n background-color: oklch(1 0 0 / 0.1);\\n backdrop-filter: blur(64px) brightness(0.9) saturate(1.5);\\n box-shadow:\\n 0 4px 6px -1px oklch(0 0 0 / 0.1),\\n 0 2px 4px -2px oklch(0 0 0 / 0.1);\\n font-size: 0.75rem;\\n white-space: nowrap;\\n --media-tooltip-side-offset: 0.5rem;\\n\\n @media (prefers-reduced-transparency: reduce) {\\n background-color: oklch(0 0 0 / 0.7);\\n }\\n\\n @media (prefers-contrast: more) {\\n background-color: oklch(0 0 0 / 0.9);\\n }\\n}\\n\\n\\n/ ==========================================================================\\n Controls\\n ========================================================================== /\\n\\n.media-minimal-skin--audio {\\n --media-controls-background-color: oklch(1 0 0);\\n --media-controls-border-color: oklch(0 0 0 / 0.1);\\n --media-controls-text-color: oklch(0 0 0);\\n\\n @media (prefers-color-scheme: dark) {\\n --media-controls-background-color: oklch(0 0 0);\\n --media-controls-border-color: oklch(1 0 0 / 0.1);\\n --media-controls-text-color: oklch(1 0 0);\\n }\\n}\\n.media-minimal-skin--audio .media-controls {\\n gap: 0.5rem;\\n padding: 0.375rem;\\n background-color: var(--media-controls-background-color);\\n backdrop-filter: blur(8px) brightness(0.98) saturate(1.2);\\n border-radius: var(--media-border-radius, 0.75rem);\\n color: var(--media-controls-text-color);\\n box-shadow: 0 0 0 1px var(--media-controls-border-color);\\n}\\n\\n/ ==========================================================================\\n Popups & Animations\\n ========================================================================== */\\n\\n.media-minimal-skin--audio .media-popover--volume {\\n background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%);\\n padding: 0.5rem 0 0.5rem 4rem;\\n --media-popover-side-offset: 0.75rem;\\n}\\n\\n\";"],"mappings":";AAAA,2BAAe"}
1	+ {"version":3,"file":"minimal-skin.js","names":[],"sources":["../../../../../../inline-css:src/define/audio/minimal-skin.js"],"sourcesContent":["export default \"/* ==========================================================================\\n Icon State Visibility for Audio 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 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 display: block;\\n opacity: 1;\\n}\\n\\n/ ==========================================================================\\n Tooltip Label State Visibility for Audio 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 display: block;\\n}\\n\\n/ ==========================================================================\\n Reset\\n ========================================================================== /\\n\\n.media-minimal-skin ,\\n.media-minimal-skin ::before,\\n.media-minimal-skin ::after {\\n box-sizing: border-box;\\n margin: 0;\\n}\\n.media-minimal-skin img,\\n.media-minimal-skin video,\\n.media-minimal-skin svg {\\n display: block;\\n max-width: 100%;\\n}\\n.media-minimal-skin button {\\n font: inherit;\\n}\\n@media (prefers-reduced-motion: no-preference) {\\n .media-minimal-skin {\\n interpolate-size: allow-keywords;\\n }\\n}\\n\\n/* ==========================================================================\\n Root Container\\n ========================================================================== /\\n\\n.media-minimal-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, 0.75rem);\\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 Buffering Indicator\\n ========================================================================== /\\n\\n.media-minimal-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\\n/ ==========================================================================\\n Error Dialog\\n ========================================================================== /\\n\\n.media-minimal-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 pointer-events: none;\\n}\\n\\n.media-minimal-skin .media-error__dialog {\\n display: flex;\\n flex-direction: column;\\n gap: 0.75rem;\\n max-width: 16rem;\\n padding: 1rem;\\n color: oklch(1 0 0);\\n font-size: 0.875rem;\\n text-shadow: 0 1px 0 oklch(0 0 0 / 0.5);\\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-minimal-skin .media-error[data-starting-style] .media-error__dialog,\\n.media-minimal-skin .media-error[data-ending-style] .media-error__dialog {\\n opacity: 0;\\n transform: scale(0.5);\\n}\\n\\n.media-minimal-skin .media-error__content {\\n display: flex;\\n flex-direction: column;\\n gap: 0.5rem;\\n padding: 0.375rem 0;\\n}\\n\\n.media-minimal-skin .media-error__title {\\n font-weight: 600;\\n line-height: 1.25;\\n}\\n\\n.media-minimal-skin .media-error__description {\\n opacity: 0.7;\\n}\\n\\n.media-minimal-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-minimal-skin .media-controls {\\n container: media-controls / inline-size;\\n display: flex;\\n align-items: center;\\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\\n/* ==========================================================================\\n Time Controls & Display\\n ========================================================================== /\\n\\n.media-minimal-skin .media-time-controls {\\n display: flex;\\n flex-direction: row-reverse;\\n align-items: center;\\n flex: 1;\\n gap: 0.75rem;\\n}\\n.media-minimal-skin .media-time {\\n display: flex;\\n align-items: center;\\n gap: 0.25rem;\\n}\\n.media-minimal-skin .media-time__value {\\n font-variant-numeric: tabular-nums;\\n}\\n.media-minimal-skin .media-time__value--current,\\n.media-minimal-skin .media-time__separator {\\n display: none;\\n}\\n@container media-controls (width > 28rem) {\\n .media-minimal-skin .media-time-controls {\\n flex-direction: row;\\n }\\n .media-minimal-skin .media-time__value--duration,\\n .media-minimal-skin .media-time__separator {\\n color: oklch(from currentColor l c h / 0.6);\\n }\\n .media-minimal-skin .media-time__value--current,\\n .media-minimal-skin .media-time__separator {\\n display: inline;\\n }\\n}\\n\\n/ ==========================================================================\\n Button Groups\\n ========================================================================== /\\n\\n.media-minimal-skin .media-button-group {\\n display: flex;\\n align-items: center;\\n gap: 0.075rem;\\n\\n @container media-root (width > 40rem) {\\n gap: 0.125rem;\\n }\\n}\\n\\n/ ==========================================================================\\n Buttons\\n ========================================================================== /\\n\\n/ Base button /\\n.media-minimal-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: 0.5rem;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\n color: oklch(0 0 0);\\n font-weight: 500;\\n text-align: center;\\n text-shadow: inherit;\\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: currentColor;\\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-minimal-skin .media-button--icon {\\n display: grid;\\n width: 2.375rem;\\n padding: 0;\\n aspect-ratio: 1;\\n background: transparent;\\n color: inherit;\\n\\n &:hover,\\n &:focus-visible,\\n &[aria-expanded=\\\"true\\\"] {\\n color: oklch(from currentColor l c h / 0.8);\\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-minimal-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-minimal-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-minimal-skin .media-icon__container {\\n position: relative;\\n}\\n.media-minimal-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-minimal-skin .media-icon--flipped {\\n scale: -1 1;\\n}\\n\\n/ ==========================================================================\\n Slider\\n ========================================================================== /\\n\\n.media-minimal-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: 4.5rem;\\n }\\n}\\n\\n/* Track /\\n.media-minimal-skin .media-slider__track {\\n position: relative;\\n isolation: isolate;\\n overflow: hidden;\\n border-radius: inherit;\\n user-select: none;\\n background-color: oklch(from currentColor l c h / 0.2);\\n\\n &[data-orientation=\\\"horizontal\\\"] {\\n width: 100%;\\n height: 0.1875rem;\\n }\\n\\n &[data-orientation=\\\"vertical\\\"] {\\n width: 0.1875rem;\\n height: 100%;\\n }\\n}\\n\\n/ Thumb /\\n.media-minimal-skin .media-slider__thumb {\\n position: absolute;\\n transform: translate(-50%, -50%);\\n z-index: 10;\\n width: 0.75rem;\\n height: 0.75rem;\\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 scale: 0.7;\\n transform-origin: center;\\n transition-property: opacity, scale, outline-offset;\\n transition-duration: 150ms;\\n transition-timing-function: ease-out;\\n user-select: none;\\n outline: 2px solid transparent;\\n outline-offset: -2px;\\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 &:focus-visible {\\n outline-color: currentColor;\\n outline-offset: 2px;\\n }\\n}\\n\\n.media-minimal-skin .media-slider:hover .media-slider__thumb,\\n.media-minimal-skin .media-slider:focus-within .media-slider__thumb,\\n.media-minimal-skin .media-slider__thumb--persistent {\\n opacity: 1;\\n scale: 1;\\n}\\n\\n/* Shared track fills /\\n.media-minimal-skin .media-slider__buffer,\\n.media-minimal-skin .media-slider__fill {\\n position: absolute;\\n border-radius: inherit;\\n pointer-events: none;\\n}\\n\\n.media-minimal-skin .media-slider__buffer[data-orientation=\\\"horizontal\\\"],\\n.media-minimal-skin .media-slider__fill[data-orientation=\\\"horizontal\\\"] {\\n inset-block: 0;\\n left: 0;\\n}\\n\\n.media-minimal-skin .media-slider__buffer[data-orientation=\\\"vertical\\\"],\\n.media-minimal-skin .media-slider__fill[data-orientation=\\\"vertical\\\"] {\\n inset-inline: 0;\\n bottom: 0;\\n}\\n\\n/ Buffer /\\n.media-minimal-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-minimal-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-minimal-skin .media-slider__time-display {\\n font-variant-numeric: tabular-nums;\\n}\\n\\n/ ==========================================================================\\n Popups & Animations\\n ========================================================================== /\\n\\n.media-minimal-skin .media-popover,\\n.media-minimal-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-minimal-skin .media-tooltip {\\n padding: 0.25rem 0.5rem;\\n border-radius: 0.25rem;\\n background-color: oklch(1 0 0 / 0.1);\\n backdrop-filter: blur(16px) saturate(1.5);\\n box-shadow:\\n 0 4px 6px -1px oklch(0 0 0 / 0.1),\\n 0 2px 4px -2px oklch(0 0 0 / 0.1);\\n font-size: 0.75rem;\\n white-space: nowrap;\\n --media-tooltip-side-offset: 0.5rem;\\n\\n @media (prefers-reduced-transparency: reduce) {\\n background-color: oklch(0 0 0 / 0.7);\\n }\\n\\n @media (prefers-contrast: more) {\\n background-color: oklch(0 0 0 / 0.9);\\n }\\n}\\n\\n\\n/ ==========================================================================\\n Controls\\n ========================================================================== /\\n\\n.media-minimal-skin--audio {\\n --media-controls-background-color: oklch(1 0 0);\\n --media-controls-border-color: oklch(0 0 0 / 0.1);\\n --media-controls-text-color: oklch(0 0 0);\\n\\n @media (prefers-color-scheme: dark) {\\n --media-controls-background-color: oklch(0 0 0);\\n --media-controls-border-color: oklch(1 0 0 / 0.1);\\n --media-controls-text-color: oklch(1 0 0);\\n }\\n}\\n.media-minimal-skin--audio .media-controls {\\n gap: 0.5rem;\\n padding: 0.375rem;\\n background-color: var(--media-controls-background-color);\\n backdrop-filter: blur(16px) saturate(1.5);\\n border-radius: var(--media-border-radius, 0.75rem);\\n color: var(--media-controls-text-color);\\n box-shadow: 0 0 0 1px var(--media-controls-border-color);\\n}\\n\\n/ ==========================================================================\\n Popups & Animations\\n ========================================================================== */\\n\\n.media-minimal-skin--audio .media-popover--volume {\\n background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%);\\n padding: 0.5rem 0 0.5rem 4rem;\\n --media-popover-side-offset: 0.75rem;\\n}\\n\\nmedia-tooltip-group {\\n display: contents;\\n}\\n\\n\";"],"mappings":";AAAA,2BAAe"}