@videojs/react 10.0.0-beta.4 → 10.0.0-beta.6

package/dist/default/skins/dist/default/minimal/tailwind/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/button.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/button.ts\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center\", \"outline-2 outline-transparent -outline-offset-2\", \"font-medium text-shadow-inherit\", \"transition-[background-color,color,outline-offset,scale] duration-150 ease-out\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"data-[availability=unavailable]:hidden\"),\n\ticon: cn(\"grid w-[2.375rem] aspect-square bg-transparent rounded-lg\", \"text-inherit\", \"hover:text-current/80 hover:no-underline\", \"focus-visible:text-current/80\", \"aria-expanded:text-current/80\", \"active:scale-90\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-lg\", \"text-black\")\n};\n\n//#endregion\nexport { button };\n//# sourceMappingURL=button.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,mDAAmD,mCAAmC,kFAAkF,gEAAgE,sEAAsE,yCAAyC;CAC3b,MAAM,GAAG,6DAA6D,gBAAgB,4CAA4C,iCAAiC,iCAAiC,kBAAkB;CACtN,SAAS,GAAG,sCAAsC,aAAa;CAC/D"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/button.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/button.ts\nconst button = {\n\tbase: cn(\"items-center justify-center shrink-0 border-none cursor-pointer select-none text-center touch-manipulation\", \"outline-2 outline-transparent -outline-offset-2\", \"font-medium text-shadow-inherit\", \"transition-[background-color,color,outline-offset,scale] duration-150 ease-out\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\", \"data-[availability=unavailable]:hidden\"),\n\ticon: cn(\"grid w-[2.375rem] aspect-square bg-transparent rounded-lg\", \"text-inherit\", \"hover:text-current/80 hover:no-underline\", \"focus-visible:text-current/80\", \"aria-expanded:text-current/80\", \"active:scale-90\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-lg\", \"text-black\")\n};\n\n//#endregion\nexport { button };\n//# sourceMappingURL=button.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,8GAA8G,mDAAmD,mCAAmC,kFAAkF,gEAAgE,sEAAsE,yCAAyC;CAC9c,MAAM,GAAG,6DAA6D,gBAAgB,4CAA4C,iCAAiC,iCAAiC,kBAAkB;CACtN,SAAS,GAAG,sCAAsC,aAAa;CAC/D"}

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

@@ -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-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");
+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", "[@media(pointer:fine)]:transition-[opacity,backdrop-filter]", "[@media(pointer:fine)]:ease-out", "[@media(pointer:fine)]:duration-500 [@media(pointer:fine)]:delay-500", "peer-data-visible/controls:opacity-100", "[@media(pointer:fine)]:peer-data-visible/controls:duration-150", "[@media(pointer:fine)]:peer-data-visible/controls:delay-0", "peer-data-open/error:opacity-100", "[@media(pointer:fine)]:peer-data-open/error:duration-150", "[@media(pointer:fine)]:peer-data-open/error:delay-0", "peer-data-open/error:backdrop-blur-lg", "[@media(pointer:fine)]:motion-reduce:duration-100");
 
 //#endregion
 export { overlay };

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

@@ -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-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"}
+{"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\", \"[@media(pointer:fine)]:transition-[opacity,backdrop-filter]\", \"[@media(pointer:fine)]:ease-out\", \"[@media(pointer:fine)]:duration-500 [@media(pointer:fine)]:delay-500\", \"peer-data-visible/controls:opacity-100\", \"[@media(pointer:fine)]:peer-data-visible/controls:duration-150\", \"[@media(pointer:fine)]:peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"[@media(pointer:fine)]:peer-data-open/error:duration-150\", \"[@media(pointer:fine)]:peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-lg\", \"[@media(pointer:fine)]:motion-reduce:duration-100\");\n\n//#endregion\nexport { overlay };\n//# sourceMappingURL=overlay.js.map"],"mappings":";;;AAGA,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,4CAA4C,+DAA+D,mCAAmC,wEAAwE,0CAA0C,kEAAkE,6DAA6D,oCAAoC,4DAA4D,uDAAuD,yCAAyC,oDAAoD"}

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

@@ -1,10 +1,11 @@
 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 base = cn("m-0 border-0 text-inherit overflow-visible", "transition-[transform,scale,opacity,filter] duration-150", "data-starting-style:opacity-0 data-starting-style:scale-50 data-starting-style:blur-sm", "data-ending-style:opacity-0 data-ending-style:scale-50 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", "before:absolute before:pointer-events-[inherit]", "data-[side=top]:before:left-0 data-[side=top]:before:right-0 data-[side=top]:before:top-full", "data-[side=bottom]:before:left-0 data-[side=bottom]:before:right-0 data-[side=bottom]:before:bottom-full", "data-[side=left]:before:top-0 data-[side=left]:before:bottom-0 data-[side=left]:before:left-full", "data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:right-full");
 const popup = {
-	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")
+	base,
+	popover: cn(base, "data-[side=top]:before:h-(--media-popover-side-offset) data-[side=bottom]:before:h-(--media-popover-side-offset)", "data-[side=left]:before:w-(--media-popover-side-offset) data-[side=right]:before:w-(--media-popover-side-offset)"),
+	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.75rem]", "data-[side=top]:before:h-(--media-tooltip-side-offset) data-[side=bottom]:before:h-(--media-tooltip-side-offset)", "data-[side=left]:before:w-(--media-tooltip-side-offset) data-[side=right]:before:w-(--media-tooltip-side-offset)", "[@media(prefers-reduced-transparency:reduce)]:bg-black/70", "contrast-more:bg-black/90")
 };
 
 //#endregion

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

@@ -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-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"}
+{"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-150\", \"data-starting-style:opacity-0 data-starting-style:scale-50 data-starting-style:blur-sm\", \"data-ending-style:opacity-0 data-ending-style:scale-50 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\", \"before:absolute before:pointer-events-[inherit]\", \"data-[side=top]:before:left-0 data-[side=top]:before:right-0 data-[side=top]:before:top-full\", \"data-[side=bottom]:before:left-0 data-[side=bottom]:before:right-0 data-[side=bottom]:before:bottom-full\", \"data-[side=left]:before:top-0 data-[side=left]:before:bottom-0 data-[side=left]:before:left-full\", \"data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:right-full\");\nconst popup = {\n\tbase,\n\tpopover: cn(base, \"data-[side=top]:before:h-(--media-popover-side-offset) data-[side=bottom]:before:h-(--media-popover-side-offset)\", \"data-[side=left]:before:w-(--media-popover-side-offset) data-[side=right]:before:w-(--media-popover-side-offset)\"),\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.75rem]\", \"data-[side=top]:before:h-(--media-tooltip-side-offset) data-[side=bottom]:before:h-(--media-tooltip-side-offset)\", \"data-[side=left]:before:w-(--media-tooltip-side-offset) data-[side=right]:before:w-(--media-tooltip-side-offset)\", \"[@media(prefers-reduced-transparency:reduce)]:bg-black/70\", \"contrast-more:bg-black/90\")\n};\n\n//#endregion\nexport { popup };\n//# sourceMappingURL=popup.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,8CAA8C,4DAA4D,0FAA0F,oFAAoF,2BAA2B,2HAA2H,mDAAmD,gGAAgG,4GAA4G,oGAAoG,uGAAuG;AACx4B,MAAM,QAAQ;CACb;CACA,SAAS,GAAG,MAAM,oHAAoH,mHAAmH;CACzP,SAAS,GAAG,MAAM,sIAAsI,yCAAyC,oHAAoH,oHAAoH,6DAA6D,4BAA4B;CAClgB"}

package/dist/default/skins/dist/default/minimal/tailwind/components/preview.js

@@ -0,0 +1,14 @@
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/minimal/tailwind/components/preview.js
+const preview = {
+	root: "group/preview pointer-events-none",
+	thumbnailWrapper: "relative rounded-lg bg-black/90",
+	thumbnail: cn("block rounded-[inherit] transition-opacity duration-150 ease-out", "data-loading:opacity-0"),
+	timestamp: "mt-2 block text-center tabular-nums",
+	spinner: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0", "transition-opacity duration-150 ease-out", "group-has-[[role=img][data-loading]]/preview:opacity-100")
+};
+
+//#endregion
+export { preview };
+//# sourceMappingURL=preview.js.map

package/dist/default/skins/dist/default/minimal/tailwind/components/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/preview.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/preview.ts\nconst preview = {\n\troot: \"group/preview pointer-events-none\",\n\tthumbnailWrapper: \"relative rounded-lg bg-black/90\",\n\tthumbnail: cn(\"block rounded-[inherit] transition-opacity duration-150 ease-out\", \"data-loading:opacity-0\"),\n\ttimestamp: \"mt-2 block text-center tabular-nums\",\n\tspinner: cn(\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0\", \"transition-opacity duration-150 ease-out\", \"group-has-[[role=img][data-loading]]/preview:opacity-100\")\n};\n\n//#endregion\nexport { preview };\n//# sourceMappingURL=preview.js.map"],"mappings":";;;AAGA,MAAM,UAAU;CACf,MAAM;CACN,kBAAkB;CAClB,WAAW,GAAG,oEAAoE,yBAAyB;CAC3G,WAAW;CACX,SAAS,GAAG,yEAAyE,4CAA4C,2DAA2D;CAC5L"}

package/dist/default/skins/dist/default/minimal/tailwind/components/root.js

@@ -1,7 +1,7 @@
 import { cn } from "@videojs/utils/style";
 
 //#region ../skins/dist/default/minimal/tailwind/components/root.js
-const root = cn("block relative isolate @container/media-root", "rounded-(--media-border-radius,0.75rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border **:m-0", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]");
+const root = cn("block relative isolate @container/media-root", "rounded-(--media-border-radius,0.75rem)", "font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased", "**:box-border", "[&_button]:font-[inherit]", "motion-safe:[interpolate-size:allow-keywords]");
 
 //#endregion
 export { root };

package/dist/default/skins/dist/default/minimal/tailwind/components/root.js.map

@@ -1 +1 @@
-{"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/root.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/root.ts\nconst root = cn(\"block relative isolate @container/media-root\", \"rounded-(--media-border-radius,0.75rem)\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border **:m-0\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\");\n\n//#endregion\nexport { root };\n//# sourceMappingURL=root.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,gDAAgD,2CAA2C,uHAAuH,wBAAwB,6BAA6B,gDAAgD"}
+{"version":3,"file":"root.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/root.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/root.ts\nconst root = cn(\"block relative isolate @container/media-root\", \"rounded-(--media-border-radius,0.75rem)\", \"font-[Inter_Variable,Inter,ui-sans-serif,system-ui,sans-serif] text-[0.8125rem] leading-normal subpixel-antialiased\", \"**:box-border\", \"[&_button]:font-[inherit]\", \"motion-safe:[interpolate-size:allow-keywords]\");\n\n//#endregion\nexport { root };\n//# sourceMappingURL=root.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,gDAAgD,2CAA2C,uHAAuH,iBAAiB,6BAA6B,gDAAgD"}

package/dist/default/skins/dist/default/minimal/tailwind/components/slider.js

@@ -2,7 +2,7 @@ import { cn } from "@videojs/utils/style";
 
 //#region ../skins/dist/default/minimal/tailwind/components/slider.js
 const slider = {
-	root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]"),
+	root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none cursor-pointer", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]"),
 	track: cn("relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none", "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75", "data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full"),
 	fill: {
 		base: "absolute rounded-[inherit] pointer-events-none",

package/dist/default/skins/dist/default/minimal/tailwind/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/slider.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/slider.ts\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-current\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-current/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-current rounded-full\", \"shadow-[0_0_0_1px_var(--media-controls-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\n\n//#endregion\nexport { slider };\n//# sourceMappingURL=slider.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,yEAAyE;CAC9R,OAAO,GAAG,gFAAgF,6EAA6E,wEAAwE;CAC/O,MAAM;EACL,MAAM;EACN,MAAM,GAAG,cAAc,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACxS,QAAQ,GAAG,uCAAuC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACta;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,2BAA2B,wJAAwJ,+EAA+E,mDAAmD,gEAAgE,oGAAoG,+GAA+G;EAC3oB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/slider.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/slider.ts\nconst slider = {\n\troot: cn(\"group/slider relative flex flex-1 items-center justify-center rounded-full outline-none cursor-pointer\", \"data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5\", \"data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]\"),\n\ttrack: cn(\"relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none\", \"data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75\", \"data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full\"),\n\tfill: {\n\t\tbase: \"absolute rounded-[inherit] pointer-events-none\",\n\t\tfill: cn(\"bg-current\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:w-(--media-slider-fill,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:h-(--media-slider-fill,0)\"),\n\t\tbuffer: cn(\"bg-current/20 duration-250 ease-out\", \"data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0\", \"data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)\", \"data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0\", \"data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)\")\n\t},\n\tthumb: {\n\t\tbase: cn(\"z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2\", \"bg-current rounded-full\", \"shadow-[0_0_0_1px_var(--media-controls-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-current focus-visible:outline-offset-2\", \"data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)\", \"data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]\"),\n\t\tinteractive: cn(\"opacity-0 scale-70 origin-center\", \"group-hover/slider:opacity-100 group-hover/slider:scale-100\", \"group-focus-within/slider:opacity-100 group-focus-within/slider:scale-100\")\n\t}\n};\n\n//#endregion\nexport { slider };\n//# sourceMappingURL=slider.js.map"],"mappings":";;;AAGA,MAAM,SAAS;CACd,MAAM,GAAG,0GAA0G,iHAAiH,yEAAyE;CAC7S,OAAO,GAAG,gFAAgF,6EAA6E,wEAAwE;CAC/O,MAAM;EACL,MAAM;EACN,MAAM,GAAG,cAAc,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACxS,QAAQ,GAAG,uCAAuC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACta;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,2BAA2B,wJAAwJ,+EAA+E,mDAAmD,gEAAgE,oGAAoG,+GAA+G;EAC3oB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD"}

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

@@ -10,37 +10,43 @@ 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 { preview as preview$1 } from "./components/preview.js";
 import { overlay } from "./components/overlay.js";
 import { cn } from "@videojs/utils/style";
 
 //#region ../skins/dist/default/minimal/tailwind/video.tailwind.js
 const 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", {
-	"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,0.75rem)": isShadowDOM,
-	"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]": !isShadowDOM
-}, "[&>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 ? [
+	"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,cover)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]": isShadowDOM,
+	"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]": !isShadowDOM
+}, "[--media-video-border-radius:var(--media-border-radius,0.75rem)]", "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:[object-fit:var(--media-object-fit,contain)] [&>img]:[object-position:var(--media-object-position,center)] [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-y:-0.5rem]", "[--media-caption-track-delay:600ms]", "[--media-caption-track-duration:150ms]", "motion-reduce:[--media-caption-track-duration:50ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", !isShadowDOM ? [
 	"[&_video::-webkit-media-text-track-container]:transition-transform",
-	"[&_video::-webkit-media-text-track-container]:duration-150",
+	"[&_video::-webkit-media-text-track-container]:duration-(--media-caption-track-duration)",
 	"[&_video::-webkit-media-text-track-container]:ease-out",
 	"[&_video::-webkit-media-text-track-container]:delay-(--media-caption-track-delay)",
 	"[&_video::-webkit-media-text-track-container]:translate-y-(--media-caption-track-y)",
 	"[&_video::-webkit-media-text-track-container]:scale-98",
 	"[&_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", {
+	"[&_video::-webkit-media-text-track-container]:font-[inherit]"
+] : [], "[&:fullscreen]:[--media-border-radius:0]", {
 	"[&: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");
+	"[&:fullscreen_::slotted(video)]:object-contain": isShadowDOM
+});
+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]", "[@media(pointer:fine)]:transition-[translate,filter,opacity]", "ease-out", "[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-75", "not-data-visible:opacity-0 not-data-visible:pointer-events-none", "not-data-visible:translate-y-full not-data-visible:blur-sm", "[@media(pointer:fine)]:not-data-visible:delay-500", "[@media(pointer:fine)]:not-data-visible:duration-500", "[@media(pointer:fine)]: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 preview = {
+	...preview$1,
+	root: cn("absolute left-(--media-slider-pointer) bottom-[calc(100%+0.5rem)] -translate-x-1/2", "opacity-0 scale-80 blur-sm origin-bottom", "transition-[scale,opacity,filter] duration-150", "group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none", "[&:has([role=img][data-hidden])]:opacity-0 [&:has([role=img][data-hidden])]:scale-80 [&:has([role=img][data-hidden])]:blur-sm", "[&:has([role=img][data-loading])]:max-h-24", preview$1.root),
+	thumbnailWrapper: cn(preview$1.thumbnailWrapper, "after:absolute after:inset-0 after:rounded-[inherit]", "after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20"),
+	thumbnail: cn(preview$1.thumbnail, "max-w-44")
+};
 const slider = {
 	...slider$1,
-	track: cn(slider$1.track, "shadow-[0_0_0_1px_oklch(0_0_0/0.05)]")
+	track: cn(slider$1.track, "ring-1 ring-black/5")
 };
 const popup = {
 	...popup$1,
-	volume: cn("[--media-popover-side-offset:0.5rem] p-1 bg-transparent")
+	volume: cn(popup$1.popover, "[--media-popover-side-offset:0.5rem] p-1 bg-transparent")
 };
 
 //#endregion
-export { controls, popup, root, slider };
+export { controls, popup, preview, root, slider };
 //# sourceMappingURL=video.tailwind.js.map

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

@@ -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 { 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"}
+{"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 { preview as preview$1 } from \"./components/preview.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-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,cover)] [&_::slotted(video)]:[object-position:var(--media-object-position,center)]\": isShadowDOM,\n\t\"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit] [&_video]:[object-fit:var(--media-object-fit,contain)] [&_video]:[object-position:var(--media-object-position,center)]\": !isShadowDOM\n}, \"[--media-video-border-radius:var(--media-border-radius,0.75rem)]\", \"[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]\", \"[&>img]:[object-fit:var(--media-object-fit,contain)] [&>img]:[object-position:var(--media-object-position,center)] [&>img]:pointer-events-none\", \"[&>img]:transition-opacity [&>img]:duration-250\", \"[&>img:not([data-visible])]:opacity-0\", \"[--media-caption-track-y:-0.5rem]\", \"[--media-caption-track-delay:600ms]\", \"[--media-caption-track-duration:150ms]\", \"motion-reduce:[--media-caption-track-duration:50ms]\", \"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-(--media-caption-track-duration)\",\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] : [], \"[&:fullscreen]:[--media-border-radius:0]\", {\n\t\"[&:fullscreen_video]:object-contain\": !isShadowDOM,\n\t\"[&:fullscreen_::slotted(video)]:object-contain\": isShadowDOM\n});\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]\", \"[@media(pointer:fine)]:transition-[translate,filter,opacity]\", \"ease-out\", \"[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-75\", \"not-data-visible:opacity-0 not-data-visible:pointer-events-none\", \"not-data-visible:translate-y-full not-data-visible:blur-sm\", \"[@media(pointer:fine)]:not-data-visible:delay-500\", \"[@media(pointer:fine)]:not-data-visible:duration-500\", \"[@media(pointer:fine)]: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 preview = {\n\t...preview$1,\n\troot: cn(\"absolute left-(--media-slider-pointer) bottom-[calc(100%+0.5rem)] -translate-x-1/2\", \"opacity-0 scale-80 blur-sm origin-bottom\", \"transition-[scale,opacity,filter] duration-150\", \"group-data-pointing/slider:opacity-100 group-data-pointing/slider:scale-100 group-data-pointing/slider:blur-none\", \"[&:has([role=img][data-hidden])]:opacity-0 [&:has([role=img][data-hidden])]:scale-80 [&:has([role=img][data-hidden])]:blur-sm\", \"[&:has([role=img][data-loading])]:max-h-24\", preview$1.root),\n\tthumbnailWrapper: cn(preview$1.thumbnailWrapper, \"after:absolute after:inset-0 after:rounded-[inherit]\", \"after:ring-1 after:ring-black/5 after:shadow-sm after:shadow-black/20\"),\n\tthumbnail: cn(preview$1.thumbnail, \"max-w-44\")\n};\nconst slider = {\n\t...slider$1,\n\ttrack: cn(slider$1.track, \"ring-1 ring-black/5\")\n};\nconst popup = {\n\t...popup$1,\n\tvolume: cn(popup$1.popover, \"[--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, preview, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,mEAAmE,4BAA4B;CAClO,4RAA4R;CAC5R,wMAAwM,CAAC;CACzM,EAAE,oEAAoE,4FAA4F,kJAAkJ,mDAAmD,yCAAyC,qCAAqC,uCAAuC,0CAA0C,uDAAuD,0EAA0E,yEAAyE,CAAC,cAAc;CAC/tB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,4CAA4C;CACnD,uCAAuC,CAAC;CACxC,kDAAkD;CAClD,CAAC;AACF,MAAM,WAAW,GAAG,YAAY,+BAA+B,4BAA4B,mBAAmB,0CAA0C,gEAAgE,YAAY,qEAAqE,mEAAmE,8DAA8D,qDAAqD,wDAAwD,sEAAsE,gDAAgD,4CAA4C,4CAA4C,gEAAgE,yBAAyB;AAC9zB,MAAM,UAAU;CACf,GAAG;CACH,MAAM,GAAG,sFAAsF,4CAA4C,kDAAkD,oHAAoH,iIAAiI,8CAA8C,UAAU,KAAK;CAC/e,kBAAkB,GAAG,UAAU,kBAAkB,wDAAwD,wEAAwE;CACjL,WAAW,GAAG,UAAU,WAAW,WAAW;CAC9C;AACD,MAAM,SAAS;CACd,GAAG;CACH,OAAO,GAAG,SAAS,OAAO,sBAAsB;CAChD;AACD,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,0DAA0D;CACtF"}

package/dist/default/ui/thumbnail/index.js

@@ -0,0 +1,3 @@
+import { Thumbnail } from "./thumbnail.js";
+
+export { Thumbnail };

package/dist/dev/presets/audio/minimal-skin.css

@@ -70,7 +70,6 @@
 .media-minimal-skin *::before,
 .media-minimal-skin *::after {
   box-sizing: border-box;
-  margin: 0;
 }
 .media-minimal-skin img,
 .media-minimal-skin video,
@@ -299,6 +298,7 @@
   transition-timing-function: ease-out;
   cursor: pointer;
   user-select: none;
+  touch-action: manipulation;
 
   &:focus-visible {
     outline-color: currentColor;
@@ -407,6 +407,7 @@
   flex: 1;
   border-radius: calc(infinity * 1px);
   outline: none;
+  cursor: pointer;
 
   &[data-orientation="horizontal"] {
     min-width: 5rem;
@@ -536,11 +537,6 @@
   }
 }
 
-/* Time display within slider */
-.media-minimal-skin .media-slider__time-display {
-  font-variant-numeric: tabular-nums;
-}
-
 /* ==========================================================================
    Popups & Animations
    ========================================================================== */
@@ -552,12 +548,12 @@
   color: inherit;
   overflow: visible;
   transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
+  transition-duration: 150ms;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0);
+    transform: scale(0.5);
     filter: blur(8px);
   }
 
@@ -577,6 +573,48 @@
   &[data-side="right"] {
     transform-origin: left;
   }
+
+  /* Safe area between trigger and popup */
+  &::before {
+    content: "";
+    position: absolute;
+    pointer-events: inherit;
+  }
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    width: 100%;
+    inset-inline: 0;
+  }
+  &[data-side="top"]::before {
+    top: 100%;
+  }
+  &[data-side="bottom"]::before {
+    bottom: 100%;
+  }
+
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    height: 100%;
+    inset-block: 0;
+  }
+  &[data-side="left"]::before {
+    left: 100%;
+  }
+  &[data-side="right"]::before {
+    right: 100%;
+  }
+}
+
+.media-minimal-skin .media-popover {
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-popover-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-popover-side-offset);
+  }
 }
 
 .media-minimal-skin .media-tooltip {
@@ -589,7 +627,16 @@
     0 2px 4px -2px oklch(0 0 0 / 0.1);
   font-size: 0.75rem;
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.5rem;
+  --media-tooltip-side-offset: 0.75rem;
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-tooltip-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-tooltip-side-offset);
+  }
 
   @media (prefers-reduced-transparency: reduce) {
     background-color: oklch(0 0 0 / 0.7);

package/dist/dev/presets/audio/skin.css

@@ -70,7 +70,6 @@
 .media-default-skin *::before,
 .media-default-skin *::after {
   box-sizing: border-box;
-  margin: 0;
 }
 .media-default-skin img,
 .media-default-skin video,
@@ -120,7 +119,7 @@
   background-color: var(--media-surface-background-color);
   backdrop-filter: var(--media-surface-backdrop-filter);
   box-shadow:
-    inset 0 0 0 1px var(--media-surface-inner-border-color),
+    0 0 0 1px var(--media-surface-outer-border-color),
     0 1px 3px 0 var(--media-surface-shadow-color),
     0 1px 2px -1px var(--media-surface-shadow-color);
 
@@ -131,7 +130,7 @@
     inset: 0;
     z-index: 10;
     border-radius: inherit;
-    box-shadow: 0 0 0 1px var(--media-surface-outer-border-color);
+    box-shadow: inset 0 0 0 1px var(--media-surface-inner-border-color);
     pointer-events: none;
   }
 
@@ -316,6 +315,7 @@
   transition-timing-function: ease-out;
   cursor: pointer;
   user-select: none;
+  touch-action: manipulation;
 
   &:focus-visible {
     outline-color: oklch(62.3% 0.214 259.815);
@@ -425,6 +425,7 @@
   flex: 1;
   border-radius: calc(infinity * 1px);
   outline: none;
+  cursor: pointer;
 
   &[data-orientation="horizontal"] {
     min-width: 5rem;
@@ -557,11 +558,6 @@
   }
 }
 
-/* Time display within slider */
-.media-default-skin .media-slider__time-display {
-  font-variant-numeric: tabular-nums;
-}
-
 /* ==========================================================================
    Popups & Tooltips
    ========================================================================== */
@@ -573,12 +569,12 @@
   color: inherit;
   overflow: visible;
   transition-property: transform, scale, opacity, filter;
-  transition-duration: 200ms;
+  transition-duration: 150ms;
 
   &[data-starting-style],
   &[data-ending-style] {
     opacity: 0;
-    transform: scale(0);
+    transform: scale(0.5);
     filter: blur(8px);
   }
 
@@ -598,10 +594,50 @@
   &[data-side="right"] {
     transform-origin: left;
   }
+
+  /* Safe area between trigger and popup */
+  &::before {
+    content: "";
+    position: absolute;
+    pointer-events: inherit;
+  }
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    width: 100%;
+    inset-inline: 0;
+  }
+  &[data-side="top"]::before {
+    top: 100%;
+  }
+  &[data-side="bottom"]::before {
+    bottom: 100%;
+  }
+
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    height: 100%;
+    inset-block: 0;
+  }
+  &[data-side="left"]::before {
+    left: 100%;
+  }
+  &[data-side="right"]::before {
+    right: 100%;
+  }
 }
 
 .media-default-skin .media-popover {
   --media-popover-side-offset: 0.5rem;
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-popover-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-popover-side-offset);
+  }
 }
 .media-default-skin .media-popover--volume {
   padding: 0.625rem 0.25rem;
@@ -613,7 +649,16 @@
   border-radius: calc(infinity * 1px);
   font-size: 0.75rem;
   white-space: nowrap;
-  --media-tooltip-side-offset: 0.5rem;
+  --media-tooltip-side-offset: 0.75rem;
+
+  &[data-side="top"]::before,
+  &[data-side="bottom"]::before {
+    height: var(--media-tooltip-side-offset);
+  }
+  &[data-side="left"]::before,
+  &[data-side="right"]::before {
+    width: var(--media-tooltip-side-offset);
+  }
 }