@videojs/html 10.0.0-beta.6 → 10.0.0-beta.8

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

@@ -1 +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 { preview as preview$1 } from \"./components/preview.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-video-border-radius) [&_::slotted(video)]:[object-fit:var(--media-object-fit,contain)] [&_::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,2rem)]\", \"[&>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 surface = cn(surface$1, \"bg-white/10\", \"backdrop-saturate-150 backdrop-blur-lg\", \"ring-black/15 shadow-black/10\", \"after:ring-white/5\", \"[@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]\", \"[@media(pointer:fine)]:transition-[scale,transform,filter,opacity]\", \"ease-out origin-bottom\", \"[@media(pointer:fine)]:delay-0 [@media(pointer:fine)]:duration-100\", \"not-data-visible:pointer-events-none not-data-visible:opacity-0\", \"not-data-visible:blur-sm not-data-visible:scale-90\", \"[@media(pointer:fine)]:not-data-visible:delay-500\", \"[@media(pointer:fine)]:not-data-visible:duration-300\", \"[@media(pointer:fine)]:motion-reduce:not-data-visible:duration-100\", \"motion-reduce:not-data-visible:blur-none\", \"motion-reduce:not-data-visible:scale-100\");\nconst preview = {\n\t...preview$1,\n\troot: cn(\"absolute left-(--media-slider-pointer) bottom-[calc(100%+1.2rem)] -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\", surface, preview$1.root),\n\tthumbnail: cn(preview$1.thumbnail, \"max-w-44\")\n};\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, preview, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,4FAA4F;CAC/N,8RAA8R;CAC9R,wMAAwM,CAAC;CACzM,EAAE,iEAAiE,4FAA4F,kJAAkJ,mDAAmD,yCAAyC,qCAAqC,uCAAuC,0CAA0C,uDAAuD,0EAA0E,yEAAyE,CAAC,cAAc;CAC5tB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,4CAA4C;CACnD,uCAAuC,CAAC;CACxC,kDAAkD;CAClD,CAAC;AACF,MAAM,UAAU,GAAG,WAAW,eAAe,0CAA0C,iCAAiC,sBAAsB,6DAA6D,4BAA4B;AACvO,MAAM,WAAW,GAAG,YAAY,SAAS,+BAA+B,mBAAmB,gDAAgD,sEAAsE,0BAA0B,sEAAsE,mEAAmE,sDAAsD,qDAAqD,wDAAwD,sEAAsE,4CAA4C,2CAA2C;AACprB,MAAM,UAAU;CACf,GAAG;CACH,MAAM,GAAG,sFAAsF,4CAA4C,kDAAkD,oHAAoH,iIAAiI,8CAA8C,SAAS,UAAU,KAAK;CACxf,WAAW,GAAG,UAAU,WAAW,WAAW;CAC9C;AACD,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"}
+{"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 { root as root$1 } from \"./components/root.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 { seek } from \"./components/seek.js\";\nimport { time } from \"./components/time.js\";\nimport { preview as preview$1 } from \"./components/preview.js\";\nimport { overlay } from \"./components/overlay.js\";\nimport { poster } from \"./components/poster.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/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,contain)] [&_::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,2rem)]\", \"[--media-controls-transition-duration:100ms]\", \"[--media-controls-transition-delay:0ms]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]\", \"[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]\", \"motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:100ms]\", \"[--media-caption-track-y:-0.5rem]\", \"[--media-caption-track-delay:calc(var(--media-controls-transition-delay)_+_25ms)]\", \"[--media-caption-track-duration:var(--media-controls-transition-duration)]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-[translate]\",\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 surface = cn(surface$1, \"bg-white/10\", \"backdrop-saturate-150 backdrop-blur-lg\", \"ring-black/15 shadow-black/10\", \"after:ring-white/5\", \"[@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\", \"[color:var(--media-color-primary,oklch(1_0_0))] z-10\", \"ease-out origin-bottom\", \"duration-(--media-controls-transition-duration)\", \"delay-(--media-controls-transition-delay)\", \"[@media(pointer:fine)]:will-change-[scale,filter,opacity]\", \"[@media(pointer:fine)]:transition-[scale,filter,opacity]\", \"[@media(pointer:coarse)]:will-change-[scale,opacity]\", \"[@media(pointer:coarse)]:transition-[scale,opacity]\", \"not-data-visible:pointer-events-none not-data-visible:opacity-0\", \"motion-safe:not-data-visible:scale-90\", \"[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm\");\nconst preview = {\n\t...preview$1,\n\troot: cn(\"absolute left-(--media-slider-pointer) bottom-[calc(100%+1.2rem)] -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\", surface, preview$1.root),\n\tthumbnail: cn(preview$1.thumbnail, \"max-w-44\")\n};\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, poster, preview, root, seek, slider, surface, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,YAAY,+EAA+E,4FAA4F;CAC/N,8RAA8R;CAC9R,wMAAwM,CAAC;CACzM,EAAE,iEAAiE,gDAAgD,2CAA2C,8GAA8G,iHAAiH,mHAAmH,wGAAwG,qCAAqC,qFAAqF,8EAA8E,yEAAyE,CAAC,cAAc;CACx3B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,EAAE,EAAE,4CAA4C;CACnD,uCAAuC,CAAC;CACxC,kDAAkD;CAClD,CAAC;AACF,MAAM,UAAU,GAAG,WAAW,eAAe,0CAA0C,iCAAiC,sBAAsB,6DAA6D,4BAA4B;AACvO,MAAM,WAAW,GAAG,YAAY,SAAS,+BAA+B,wDAAwD,0BAA0B,mDAAmD,6CAA6C,6DAA6D,4DAA4D,wDAAwD,uDAAuD,mEAAmE,yCAAyC,8DAA8D;AAC5oB,MAAM,UAAU;CACf,GAAG;CACH,MAAM,GAAG,sFAAsF,4CAA4C,kDAAkD,oHAAoH,iIAAiI,8CAA8C,SAAS,UAAU,KAAK;CACxf,WAAW,GAAG,UAAU,WAAW,WAAW;CAC9C;AACD,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

@@ -13,7 +13,7 @@ import { time } from "./components/time.js";
 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 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:var(--media-color-primary,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:var(--media-color-primary,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 popup = {
 	...popup$1,

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

@@ -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 { 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(popup$1.popover, \"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,QAAQ,SAAS,mBAAmB,oGAAoG,wCAAwC;CAC3L"}
+{"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:var(--media-color-primary,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:var(--media-color-primary,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(popup$1.popover, \"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,yEAAyE,yDAAyD,yDAAyD,6EAA6E;AACxY,MAAM,WAAW,GAAG,YAAY,eAAe,2CAA2C,0CAA0C,sCAAsC,oEAAoE,oDAAoD;AAClS,MAAM,QAAQ;CACb,GAAG;CACH,QAAQ,GAAG,QAAQ,SAAS,mBAAmB,oGAAoG,wCAAwC;CAC3L"}

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

@@ -1,7 +1,7 @@
 import { cn } from "@videojs/utils/style";
 
 //#region ../skins/dist/default/minimal/tailwind/components/controls.js
-const controls = cn("peer/controls", "@container/media-controls", "flex items-center", "[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.25))]", "[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]", "text-shadow-[0_0_1px_var(--media-controls-current-shadow-color)]");
+const controls = cn("peer/controls", "@container/media-controls", "flex items-center", "[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]", "[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]", "text-shadow-[0_1px_0_var(--media-controls-current-shadow-color)]");
 
 //#endregion
 export { controls };

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

@@ -1 +1 @@
-{"version":3,"file":"controls.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/controls.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/controls.ts\nconst controls = cn(\"peer/controls\", \"@container/media-controls\", \"flex items-center\", \"[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.25))]\", \"[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]\", \"text-shadow-[0_0_1px_var(--media-controls-current-shadow-color)]\");\n\n//#endregion\nexport { controls };\n//# sourceMappingURL=controls.js.map"],"mappings":";;;AAGA,MAAM,WAAW,GAAG,iBAAiB,6BAA6B,qBAAqB,0GAA0G,+HAA+H,mEAAmE"}
+{"version":3,"file":"controls.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/controls.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/controls.ts\nconst controls = cn(\"peer/controls\", \"@container/media-controls\", \"flex items-center\", \"[--media-controls-current-shadow-color:oklch(from_currentColor_0_0_0/clamp(0,calc((l-0.5)*0.5),0.15))]\", \"[--media-controls-current-shadow-color-subtle:oklch(from_var(--media-controls-current-shadow-color)_l_c_h/calc(alpha*0.4))]\", \"text-shadow-[0_1px_0_var(--media-controls-current-shadow-color)]\");\n\n//#endregion\nexport { controls };\n//# sourceMappingURL=controls.js.map"],"mappings":";;;AAGA,MAAM,WAAW,GAAG,iBAAiB,6BAA6B,qBAAqB,0GAA0G,+HAA+H,mEAAmE"}

package/dist/default/skins/dist/default/minimal/tailwind/components/playback-rate.js

@@ -0,0 +1,6 @@
+//#region ../skins/dist/default/minimal/tailwind/components/playback-rate.js
+const playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };
+
+//#endregion
+export { playbackRate };
+//# sourceMappingURL=playback-rate.js.map

package/dist/default/skins/dist/default/minimal/tailwind/components/playback-rate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/playback-rate.js"],"sourcesContent":["//#region src/minimal/tailwind/components/playback-rate.ts\nconst playbackRate = { button: `after:content-[attr(data-rate)_'×'] after:w-[4ch] after:tabular-nums` };\n\n//#endregion\nexport { playbackRate };\n//# sourceMappingURL=playback-rate.js.map"],"mappings":";AACA,MAAM,eAAe,EAAE,QAAQ,wEAAwE"}

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

@@ -0,0 +1,16 @@
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/minimal/tailwind/components/poster.js
+const poster = (isShadowDOM) => cn("absolute inset-0 w-full h-full pointer-events-none", "transition-opacity duration-250", "not-data-visible:opacity-0", isShadowDOM ? [
+	"[&_::slotted(img)]:absolute",
+	"[&_::slotted(img)]:inset-0",
+	"[&_::slotted(img)]:w-full",
+	"[&_::slotted(img)]:h-full",
+	"[&_::slotted(img)]:[object-fit:var(--media-object-fit,contain)]",
+	"[&_::slotted(img)]:[object-position:var(--media-object-position,center)]",
+	"[&_::slotted(img)]:rounded-(--media-video-border-radius)"
+] : "rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]");
+
+//#endregion
+export { poster };
+//# sourceMappingURL=poster.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/poster.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/poster.ts\nconst poster = (isShadowDOM) => cn(\"absolute inset-0 w-full h-full pointer-events-none\", \"transition-opacity duration-250\", \"not-data-visible:opacity-0\", isShadowDOM ? [\n\t\"[&_::slotted(img)]:absolute\",\n\t\"[&_::slotted(img)]:inset-0\",\n\t\"[&_::slotted(img)]:w-full\",\n\t\"[&_::slotted(img)]:h-full\",\n\t\"[&_::slotted(img)]:[object-fit:var(--media-object-fit,contain)]\",\n\t\"[&_::slotted(img)]:[object-position:var(--media-object-position,center)]\",\n\t\"[&_::slotted(img)]:rounded-(--media-video-border-radius)\"\n] : \"rounded-[inherit] [object-fit:var(--media-object-fit,contain)] [object-position:var(--media-object-position,center)]\");\n\n//#endregion\nexport { poster };\n//# sourceMappingURL=poster.js.map"],"mappings":";;;AAGA,MAAM,UAAU,gBAAgB,GAAG,sDAAsD,mCAAmC,8BAA8B,cAAc;CACvK;CACA;CACA;CACA;CACA;CACA;CACA;CACA,GAAG,uHAAuH"}

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

@@ -4,7 +4,7 @@ import { cn } from "@videojs/utils/style";
 const time = {
 	group: "flex items-center gap-1",
 	current: cn("hidden tabular-nums", "@md/media-controls:inline"),
-	separator: cn("hidden", "@md/media-controls:inline @md/media-controls:text-white/50"),
+	separator: cn("hidden", "@md/media-controls:inline @md/media-controls:text-current/60"),
 	duration: cn("tabular-nums", "@md/media-controls:text-current/60"),
 	controls: cn("flex flex-row-reverse items-center flex-1 gap-3", "@md/media-controls:flex-row")
 };

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

@@ -1 +1 @@
-{"version":3,"file":"time.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/time.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/time.ts\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-white/50\"),\n\tduration: cn(\"tabular-nums\", \"@md/media-controls:text-current/60\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\n\n//#endregion\nexport { time };\n//# sourceMappingURL=time.js.map"],"mappings":";;;AAGA,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,uBAAuB,4BAA4B;CAC/D,WAAW,GAAG,UAAU,6DAA6D;CACrF,UAAU,GAAG,gBAAgB,qCAAqC;CAClE,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F"}
+{"version":3,"file":"time.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/time.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/components/time.ts\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-current/60\"),\n\tduration: cn(\"tabular-nums\", \"@md/media-controls:text-current/60\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\n\n//#endregion\nexport { time };\n//# sourceMappingURL=time.js.map"],"mappings":";;;AAGA,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,uBAAuB,4BAA4B;CAC/D,WAAW,GAAG,UAAU,+DAA+D;CACvF,UAAU,GAAG,gBAAgB,qCAAqC;CAClE,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F"}

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

@@ -12,14 +12,16 @@ 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 { playbackRate } from "./components/playback-rate.js";
+import { poster } from "./components/poster.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", {
+const root = (isShadowDOM) => cn(root$1, "bg-black overflow-clip", "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-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",
+}, "[--media-video-border-radius:var(--media-border-radius,0.75rem)]", "[--media-controls-transition-duration:100ms]", "[--media-controls-transition-delay:0ms]", "[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]", "[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]", "[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]", "motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:100ms]", "[--media-caption-track-y:-0.5rem]", "[--media-caption-track-delay:calc(var(--media-controls-transition-delay)_+_25ms)]", "[--media-caption-track-duration:var(--media-controls-transition-duration)]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3rem]", !isShadowDOM ? [
+	"[&_video::-webkit-media-text-track-container]:transition-[translate]",
 	"[&_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)",
@@ -31,7 +33,7 @@ const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:point
 	"[&:fullscreen_video]:object-contain": !isShadowDOM,
 	"[&: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 controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 gap-2", "[color:var(--media-color-primary,oklch(1_0_0))] z-10", "ease-out", "duration-(--media-controls-transition-duration)", "delay-(--media-controls-transition-delay)", "[@media(pointer:fine)]:will-change-[translate,filter,opacity]", "[@media(pointer:fine)]:transition-[translate,filter,opacity]", "[@media(pointer:coarse)]:will-change-[translate,opacity]", "[@media(pointer:coarse)]:transition-[translate,opacity]", "not-data-visible:opacity-0 not-data-visible:pointer-events-none", "motion-safe:not-data-visible:translate-y-full", "[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm", "@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),

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 { 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"}
+{"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 { playbackRate } from \"./components/playback-rate.js\";\nimport { poster } from \"./components/poster.js\";\nimport { cn } from \"@videojs/utils/style\";\n\n//#region src/minimal/tailwind/video.tailwind.ts\nconst root = (isShadowDOM) => cn(root$1, \"bg-black overflow-clip\", \"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)]\", \"[--media-controls-transition-duration:100ms]\", \"[--media-controls-transition-delay:0ms]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-delay:500ms]\", \"[@media(pointer:fine)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:300ms]\", \"[@media(pointer:coarse)]:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:150ms]\", \"motion-reduce:has-[[data-controls]:not([data-visible])]:[--media-controls-transition-duration:100ms]\", \"[--media-caption-track-y:-0.5rem]\", \"[--media-caption-track-delay:calc(var(--media-controls-transition-delay)_+_25ms)]\", \"[--media-caption-track-duration:var(--media-controls-transition-duration)]\", \"has-[[data-controls][data-visible]]:[--media-caption-track-y:-3rem]\", !isShadowDOM ? [\n\t\"[&_video::-webkit-media-text-track-container]:transition-[translate]\",\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\", \"[color:var(--media-color-primary,oklch(1_0_0))] z-10\", \"ease-out\", \"duration-(--media-controls-transition-duration)\", \"delay-(--media-controls-transition-delay)\", \"[@media(pointer:fine)]:will-change-[translate,filter,opacity]\", \"[@media(pointer:fine)]:transition-[translate,filter,opacity]\", \"[@media(pointer:coarse)]:will-change-[translate,opacity]\", \"[@media(pointer:coarse)]:transition-[translate,opacity]\", \"not-data-visible:opacity-0 not-data-visible:pointer-events-none\", \"motion-safe:not-data-visible:translate-y-full\", \"[@media(pointer:fine)]:motion-safe:not-data-visible:blur-sm\", \"@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, playbackRate, popup, poster, preview, root, seek, slider, time, tooltipState };\n//# sourceMappingURL=video.tailwind.js.map"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,MAAM,QAAQ,gBAAgB,GAAG,QAAQ,0BAA0B,+EAA+E,4FAA4F;CAC7O,4RAA4R;CAC5R,wMAAwM,CAAC;CACzM,EAAE,oEAAoE,gDAAgD,2CAA2C,8GAA8G,iHAAiH,mHAAmH,wGAAwG,qCAAqC,qFAAqF,8EAA8E,uEAAuE,CAAC,cAAc;CACz3B;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,wDAAwD,YAAY,mDAAmD,6CAA6C,iEAAiE,gEAAgE,4DAA4D,2DAA2D,mEAAmE,iDAAiD,+DAA+D,gEAAgE,yBAAyB;AACnwB,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/skins/dist/default/shared/tailwind/icon-state.js

@@ -21,6 +21,11 @@ const iconState = {
 		button: "group",
 		off: "hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100",
 		on: "hidden opacity-0 group-data-active:block group-data-active:opacity-100"
+	},
+	pip: {
+		button: "group",
+		off: "hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100",
+		on: "hidden opacity-0 group-data-pip:block group-data-pip:opacity-100"
 	}
 };
 

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

@@ -1 +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"}
+{"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\tpip: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-pip:block group-not-data-pip:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-pip:block group-data-pip: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,KAAK;EACJ,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD"}

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

@@ -1,25 +1,31 @@
 import { ContextConsumer } from "@videojs/element/context";
-import { noop } from "@videojs/utils/function";
 
 //#region src/store/container-mixin.ts
 /**
-* Create a mixin that consumes player context and auto-attaches media elements.
+* Create a mixin that consumes player context and registers itself as the
+* container element with the provider via `containerContext`.
 *
-* @param context - Player context to consume from an ancestor provider.
+* @param config - Container configuration with player and container contexts.
 */
-function createContainerMixin(context) {
+function createContainerMixin(config) {
 	return (BaseClass) => {
 		class PlayerContainerElement extends BaseClass {
-			#detach = noop;
-			#observer = null;
 			#contextStore = null;
+			#setContainer = null;
 			constructor(...args) {
 				super(...args);
 				new ContextConsumer(this, {
-					context,
+					context: config.playerContext,
 					callback: (value) => {
 						this.#contextStore = value ?? null;
-						this.#attachMedia();
+					},
+					subscribe: true
+				});
+				new ContextConsumer(this, {
+					context: config.containerContext,
+					callback: (value) => {
+						this.#setContainer = value?.setContainer ?? null;
+						if (this.isConnected) this.#setContainer?.(this);
 					},
 					subscribe: true
 				});
@@ -29,78 +35,16 @@ function createContainerMixin(context) {
 			}
 			connectedCallback() {
 				super.connectedCallback();
-				this.#observer = new MutationObserver((records) => {
-					if (records.some(hasMediaElement)) this.#attachMedia();
-				});
-				this.#observer.observe(this, {
-					childList: true,
-					subtree: true,
-					attributes: true,
-					attributeFilter: ["name"]
-				});
-				this.addEventListener("slotchange", this.#onSlotChange);
-				this.#attachMedia();
+				this.#setContainer?.(this);
 			}
 			disconnectedCallback() {
 				super.disconnectedCallback();
-				this.#observer?.disconnect();
-				this.#observer = null;
-				this.removeEventListener("slotchange", this.#onSlotChange);
-				this.#detach();
-			}
-			#onSlotChange = () => {
-				this.#attachMedia();
-			};
-			#getSlottedMedia() {
-				const slot = this.querySelector("slot[name=\"media\"]");
-				if (!slot) return null;
-				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") ?? this.#findMediaElement() ?? this.#getSlottedMedia();
-				if (!media) {
-					this.#detach();
-					this.#detach = noop;
-					return;
-				}
-				if (isCustomMediaElement(media)) globalThis.customElements?.upgrade?.(media);
-				const target = {
-					media,
-					container: this
-				};
-				const hasMediaChanged = store.target?.media !== target.media, hasContainerChanged = store.target?.container !== target.container;
-				if (hasMediaChanged || hasContainerChanged) {
-					this.#detach();
-					this.#detach = store.attach(target);
-				}
+				this.#setContainer?.(null);
 			}
 		}
 		return PlayerContainerElement;
 	};
 }
-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 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;
-}
 
 //#endregion
 export { createContainerMixin };

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

@@ -1 +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"}
+{"version":3,"file":"container-mixin.js","names":["#contextStore","#setContainer"],"sources":["../../../src/store/container-mixin.ts"],"sourcesContent":["import type { MediaContainer, PlayerStore } from '@videojs/core/dom';\nimport { ContextConsumer } from '@videojs/element/context';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { ContainerContext, PlayerContext } from '../player/context';\nimport type { PlayerConsumer, PlayerConsumerConstructor } from './types';\n\nexport interface ContainerMixinConfig<Store extends PlayerStore> {\n  playerContext: PlayerContext<Store>;\n  containerContext: ContainerContext;\n}\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 registers itself as the\n * container element with the provider via `containerContext`.\n *\n * @param config - Container configuration with player and container contexts.\n */\nexport function createContainerMixin<Store extends PlayerStore>(\n  config: ContainerMixinConfig<Store>\n): ContainerMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerContainerElement extends BaseClass implements PlayerConsumer<Store>, MediaContainer {\n      #contextStore: Store | null = null;\n      #setContainer: ((container: MediaContainer | null) => void) | null = null;\n\n      constructor(...args: any[]) {\n        super(...args);\n\n        new ContextConsumer(this, {\n          context: config.playerContext,\n          callback: (value) => {\n            this.#contextStore = value ?? null;\n          },\n          subscribe: true,\n        });\n\n        new ContextConsumer(this, {\n          context: config.containerContext,\n          callback: (value) => {\n            this.#setContainer = value?.setContainer ?? null;\n            if (this.isConnected) this.#setContainer?.(this);\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        this.#setContainer?.(this);\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#setContainer?.(null);\n      }\n    }\n\n    return PlayerContainerElement;\n  };\n}\n"],"mappings":";;;;;;;;;AAqBA,SAAgB,qBACd,QACuB;AACvB,SAA+C,cAAqB;EAClE,MAAM,+BAA+B,UAA2D;GAC9F,gBAA8B;GAC9B,gBAAqE;GAErE,YAAY,GAAG,MAAa;AAC1B,UAAM,GAAG,KAAK;AAEd,QAAI,gBAAgB,MAAM;KACxB,SAAS,OAAO;KAChB,WAAW,UAAU;AACnB,YAAKA,eAAgB,SAAS;;KAEhC,WAAW;KACZ,CAAC;AAEF,QAAI,gBAAgB,MAAM;KACxB,SAAS,OAAO;KAChB,WAAW,UAAU;AACnB,YAAKC,eAAgB,OAAO,gBAAgB;AAC5C,UAAI,KAAK,YAAa,OAAKA,eAAgB,KAAK;;KAElD,WAAW;KACZ,CAAC;;GAGJ,IAAI,QAAsB;AACxB,WAAO,MAAKD;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AACzB,UAAKC,eAAgB,KAAK;;GAG5B,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKA,eAAgB,KAAK;;;AAI9B,SAAO"}

package/dist/default/store/media-attach-mixin.js

@@ -0,0 +1,45 @@
+import { mediaContext } from "../player/context.js";
+import { ContextEvent } from "@videojs/element/context";
+
+//#region src/store/media-attach-mixin.ts
+/**
+* Create a mixin that consumes `mediaContext` and registers the
+* element as the media with the provider.
+*
+* Uses the raw context-request protocol so it works with any
+* `HTMLElement` subclass — no `ReactiveControllerHost` required.
+*
+* @param context - The media context to consume.
+*/
+function createMediaAttachMixin(context) {
+	return (BaseClass) => {
+		class MediaAttachElement extends BaseClass {
+			#setMedia = null;
+			#unsubscribe = null;
+			getMediaTarget() {
+				return this;
+			}
+			connectedCallback() {
+				super.connectedCallback?.();
+				this.dispatchEvent(new ContextEvent(context, this, (value, unsubscribe) => {
+					if (unsubscribe) this.#unsubscribe = unsubscribe;
+					this.#setMedia = value?.setMedia ?? null;
+					if (this.isConnected) this.#setMedia?.(this.getMediaTarget());
+				}, true));
+			}
+			disconnectedCallback() {
+				super.disconnectedCallback?.();
+				this.#setMedia?.(null);
+				this.#unsubscribe?.();
+				this.#unsubscribe = null;
+				this.#setMedia = null;
+			}
+		}
+		return MediaAttachElement;
+	};
+}
+const MediaAttachMixin = createMediaAttachMixin(mediaContext);
+
+//#endregion
+export { MediaAttachMixin, createMediaAttachMixin };
+//# sourceMappingURL=media-attach-mixin.js.map

package/dist/default/store/media-attach-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-attach-mixin.js","names":["#unsubscribe","#setMedia"],"sources":["../../../src/store/media-attach-mixin.ts"],"sourcesContent":["import type { Media } from '@videojs/core/dom';\nimport { ContextEvent } from '@videojs/element/context';\nimport type { CustomElement } from '@videojs/utils/dom';\nimport type { AnyConstructor, Constructor } from '@videojs/utils/types';\nimport { type MediaContext, mediaContext } from '../player/context';\n\nexport type MediaAttachMixin = <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => Class;\n\n/**\n * Create a mixin that consumes `mediaContext` and registers the\n * element as the media with the provider.\n *\n * Uses the raw context-request protocol so it works with any\n * `HTMLElement` subclass — no `ReactiveControllerHost` required.\n *\n * @param context - The media context to consume.\n */\nexport function createMediaAttachMixin(context: MediaContext): MediaAttachMixin {\n  return <Class extends AnyConstructor<HTMLElement>>(BaseClass: Class) => {\n    class MediaAttachElement extends (BaseClass as unknown as Constructor<CustomElement>) {\n      #setMedia: ((media: Media | null) => void) | null = null;\n      #unsubscribe: (() => void) | null = null;\n\n      getMediaTarget(): Media | null {\n        return this as unknown as Media;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback?.();\n\n        this.dispatchEvent(\n          new ContextEvent(\n            context,\n            this,\n            (value, unsubscribe) => {\n              if (unsubscribe) this.#unsubscribe = unsubscribe;\n              this.#setMedia = value?.setMedia ?? null;\n              if (this.isConnected) {\n                this.#setMedia?.(this.getMediaTarget());\n              }\n            },\n            true\n          )\n        );\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback?.();\n        this.#setMedia?.(null);\n        this.#unsubscribe?.();\n        this.#unsubscribe = null;\n        this.#setMedia = null;\n      }\n    }\n\n    return MediaAttachElement as unknown as Class;\n  };\n}\n\nexport const MediaAttachMixin = createMediaAttachMixin(mediaContext);\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,uBAAuB,SAAyC;AAC9E,SAAmD,cAAqB;EACtE,MAAM,2BAA4B,UAAoD;GACpF,YAAoD;GACpD,eAAoC;GAEpC,iBAA+B;AAC7B,WAAO;;GAGT,AAAS,oBAAoB;AAC3B,UAAM,qBAAqB;AAE3B,SAAK,cACH,IAAI,aACF,SACA,OACC,OAAO,gBAAgB;AACtB,SAAI,YAAa,OAAKA,cAAe;AACrC,WAAKC,WAAY,OAAO,YAAY;AACpC,SAAI,KAAK,YACP,OAAKA,WAAY,KAAK,gBAAgB,CAAC;OAG3C,KACD,CACF;;GAGH,AAAS,uBAAuB;AAC9B,UAAM,wBAAwB;AAC9B,UAAKA,WAAY,KAAK;AACtB,UAAKD,eAAgB;AACrB,UAAKA,cAAe;AACpB,UAAKC,WAAY;;;AAIrB,SAAO;;;AAIX,MAAa,mBAAmB,uBAAuB,aAAa"}

package/dist/default/store/provider-mixin.js

@@ -3,32 +3,122 @@ import { isNull } from "@videojs/utils/predicate";
 
 //#region src/store/provider-mixin.ts
 /**
-* Create a mixin that provides player context to descendant elements.
+* Create a mixin that provides player context to descendant elements and
+* owns the `store.attach()` lifecycle.
 *
-* @param context - Player context to provide to descendants.
-* @param factory - Factory function that creates a store instance.
+* Media and container elements register themselves via media/container
+* contexts that carry both the current value and a setter. When a media
+* element is available, the provider calls `store.attach({ media, container })`.
+*
+* As a fallback for plain `<video>`/`<audio>` that can't consume context,
+* the provider queries its subtree after a microtask.
+*
+* @param config - Provider configuration with contexts and store factory.
 */
-function createProviderMixin(context, factory) {
+function createProviderMixin(config) {
 	return (BaseClass) => {
 		class PlayerProviderElement extends BaseClass {
-			#store = factory();
-			#provider = new ContextProvider(this, {
-				context,
+			#store = config.factory();
+			#detach = null;
+			#media = null;
+			#container = null;
+			#fallbackQueued = false;
+			#setMedia = (media) => {
+				if (this.#media === media) return;
+				this.#media = media;
+				this.#mediaProvider.setValue({
+					media,
+					setMedia: this.#setMedia
+				});
+				this.#tryAttach();
+			};
+			#setContainer = (container) => {
+				if (this.#container === container) return;
+				this.#container = container;
+				this.#containerProvider.setValue({
+					container,
+					setContainer: this.#setContainer
+				});
+				this.#tryAttach();
+			};
+			#playerProvider = new ContextProvider(this, {
+				context: config.playerContext,
 				initialValue: this.store
 			});
+			#mediaProvider = new ContextProvider(this, {
+				context: config.mediaContext,
+				initialValue: {
+					media: this.#media,
+					setMedia: this.#setMedia
+				}
+			});
+			#containerProvider = new ContextProvider(this, {
+				context: config.containerContext,
+				initialValue: {
+					container: this.#container,
+					setContainer: this.#setContainer
+				}
+			});
 			get store() {
-				if (isNull(this.#store)) this.#store = factory();
+				if (isNull(this.#store)) this.#store = config.factory();
 				return this.#store;
 			}
 			connectedCallback() {
 				super.connectedCallback();
-				this.#provider.setValue(this.store);
+				this.#playerProvider.setValue(this.store);
+				this.#mediaProvider.setValue({
+					media: this.#media,
+					setMedia: this.#setMedia
+				});
+				this.#containerProvider.setValue({
+					container: this.#container,
+					setContainer: this.#setContainer
+				});
+				this.#tryAttach();
+				this.#queueFallbackDiscovery();
+			}
+			disconnectedCallback() {
+				super.disconnectedCallback();
+				this.#detachStore();
 			}
 			destroyCallback() {
+				this.#detachStore();
 				this.#store?.destroy();
 				this.#store = null;
 				super.destroyCallback();
 			}
+			#tryAttach() {
+				const store = this.#store;
+				if (!store) return;
+				if (!this.#media) {
+					this.#detachStore();
+					return;
+				}
+				const target = {
+					media: this.#media,
+					container: this.#container
+				};
+				const hasMediaChanged = store.target?.media !== target.media;
+				const hasContainerChanged = store.target?.container !== target.container;
+				if (hasMediaChanged || hasContainerChanged) {
+					this.#detachStore();
+					this.#detach = store.attach(target);
+				}
+			}
+			#detachStore() {
+				this.#detach?.();
+				this.#detach = null;
+			}
+			#queueFallbackDiscovery() {
+				if (this.#media || this.#fallbackQueued) return;
+				this.#fallbackQueued = true;
+				queueMicrotask(() => {
+					this.#fallbackQueued = false;
+					if (this.#media) return;
+					const media = this.querySelector("video, audio");
+					if (media) this.#setMedia(media);
+				});
+			}
 		}
 		return PlayerProviderElement;
 	};