@videojs/html 10.0.0-alpha.7 → 10.0.0-alpha.9

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

@@ -1 +1 @@
-{"version":3,"file":"minimal.tailwind.js","names":[],"sources":["../../../../../../../skins/dist/default/video/minimal.tailwind.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/video/minimal.tailwind.ts\nconst icon = cn(\"block [grid-area:1/1] size-4.5\", \"drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\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\", \"transition-[background-color,color,outline-offset] duration-150 ease-out\", \"focus-visible:outline-white focus-visible:outline-offset-2\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\"),\n\ticon: cn(\"grid w-[2.375rem] aspect-square bg-transparent rounded-md\", \"text-white\", \"hover:text-white/80 hover:no-underline\", \"focus-visible:text-white/80\", \"aria-expanded:text-white/80\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-lg\", \"text-black\")\n};\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-white/20 rounded-[inherit]\", \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)] 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-white\", \"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-white/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-white rounded-full\", \"ring ring-black/10 shadow-sm shadow-black/15\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-white 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};\nconst root = cn(\"block relative isolate overflow-clip @container/media-root\", \"rounded-(--media-border-radius,0.75rem) bg-black\", \"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]\", \"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\", \"[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]\", \"[&>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]\", \"[&_video::-webkit-media-text-track-container]:transition-transform\", \"[&_video::-webkit-media-text-track-container]:duration-150\", \"[&_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\");\nconst controls = cn(\"peer/controls\", \"absolute @container/media-controls bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 flex items-center 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 overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-visible/error:opacity-100\", \"peer-data-visible/error:duration-150\", \"peer-data-visible/error:delay-0\", \"peer-data-visible/error:backdrop-blur-sm\", \"motion-reduce:duration-100\");\nconst bufferingIndicator = \"absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex\";\nconst error = {\n\troot: \"peer/error group/error absolute inset-0 z-20 items-center justify-center pointer-events-none hidden data-visible:flex\",\n\tdialog: cn(\"hidden flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto\", \"group-data-visible/error:flex\", \"text-shadow-2xs text-shadow-black/50\", \"transition-[display,opacity,scale,transform] duration-500 delay-100 transition-discrete\", \"starting:opacity-0 starting:scale-50\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\"),\n\tcontent: \"flex flex-col gap-2 py-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\nconst buttonGroup = cn(\"flex items-center gap-[0.075rem]\", \"@2xl/media-root:gap-0.5\");\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-white/50\"),\n\tduration: cn(\"tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:text-white/50\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\nconst popup = {\n\tbase: cn(\"m-0 border-0 bg-transparent [--media-popover-side-offset:0.5rem]\", \"opacity-100 scale-100 origin-bottom blur-none\", \"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\"),\n\tvolume: \"p-1\"\n};\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\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};\nconst captions = {\n\troot: cn(\"absolute z-20 pointer-events-none text-balance text-base\", \"inset-x-4 bottom-6\", \"transition-transform duration-150 ease-out delay-600\", \"motion-reduce:duration-50\", \"@xs/media-root:text-2xl\", \"@3xl/media-root:text-3xl\", \"@7xl/media-root:text-4xl\", \"peer-data-visible/controls:-translate-y-10 peer-data-visible/controls:delay-25\"),\n\tcontainer: \"max-w-[42ch] mx-auto text-center flex flex-col items-center\",\n\tcue: cn(\"block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2\", \"[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]\", \"contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70\", \"*:inline\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time };\n//# sourceMappingURL=minimal.tailwind.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,kCAAkC,0EAA0E,yEAAyE;AAErM,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,mDAAmD,eAAe,4EAA4E,8DAA8D,qEAAqE;CACrX,MAAM,GAAG,6DAA6D,cAAc,0CAA0C,+BAA+B,8BAA8B;CAC3L,SAAS,GAAG,sCAAsC,aAAa;CAC/D;AACD,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,yEAAyE;CAC9R,OAAO,GAAG,kEAAkE,oDAAoD,6EAA6E,wEAAwE;CACrR,MAAM;EACL,MAAM;EACN,MAAM,GAAG,YAAY,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACtS,QAAQ,GAAG,qCAAqC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACpa;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,yBAAyB,gDAAgD,+EAA+E,mDAAmD,8DAA8D,oGAAoG,+GAA+G;EAC/hB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD;AACD,MAAM,OAAO,GAAG,8DAA8D,oDAAoD,uHAAuH,wBAAwB,6BAA6B,iDAAiD,+EAA+E,mEAAmE,4BAA4B,iFAAiF,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,sEAAsE,8DAA8D,0DAA0D,qFAAqF,uFAAuF,0DAA0D,qDAAqD,gEAAgE,2EAA2E,8BAA8B;AAC3qD,MAAM,WAAW,GAAG,iBAAiB,yDAAyD,8CAA8C,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC5tB,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,uCAAuC,wCAAwC,mCAAmC,4CAA4C,6BAA6B;AACpoB,MAAM,qBAAqB;AAC3B,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,6EAA6E,iCAAiC,wCAAwC,2FAA2F,wCAAwC,uGAAuG;CAC3Y,SAAS;CACT,OAAO;CACP,SAAS;CACT;AACD,MAAM,cAAc,GAAG,oCAAoC,0BAA0B;AACrF,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,4DAA4D,4BAA4B;CACpG,WAAW,GAAG,UAAU,6DAA6D;CACrF,UAAU,GAAG,qDAAqD,mCAAmC;CACrG,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F;AACD,MAAM,QAAQ;CACb,MAAM,GAAG,oEAAoE,iDAAiD,4DAA4D,yFAAyF,mFAAmF,0BAA0B;CAChY,QAAQ;CACR;AACD,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf;AACD,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD;AACD,MAAM,WAAW;CAChB,MAAM,GAAG,4DAA4D,sBAAsB,wDAAwD,6BAA6B,2BAA2B,4BAA4B,4BAA4B,iFAAiF;CACpV,WAAW;CACX,KAAK,GAAG,4EAA4E,uEAAuE,yGAAyG,WAAW;CAC/Q"}
+{"version":3,"file":"minimal.tailwind.js","names":[],"sources":["../../../../../../../skins/dist/default/video/minimal.tailwind.js"],"sourcesContent":["import { cn } from \"@videojs/utils/style\";\n\n//#region src/video/minimal.tailwind.ts\nconst icon = cn(\"block [grid-area:1/1] size-4.5\", \"drop-shadow-[0_1px_0_var(--tw-drop-shadow-color)] drop-shadow-black/25\", \"transition-discrete transition-[display,opacity] duration-150 ease-out\");\nconst iconHidden = \"hidden opacity-0\";\nconst iconFlipped = \"[scale:-1_1]\";\nconst iconContainer = \"relative\";\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\", \"transition-[background-color,color,outline-offset] duration-150 ease-out\", \"focus-visible:outline-white focus-visible:outline-offset-2\", \"disabled:cursor-not-allowed disabled:opacity-50 disabled:grayscale\"),\n\ticon: cn(\"grid w-[2.375rem] aspect-square bg-transparent rounded-md\", \"text-white\", \"hover:text-white/80 hover:no-underline\", \"focus-visible:text-white/80\", \"aria-expanded:text-white/80\"),\n\tdefault: cn(\"flex py-2 px-4 bg-white rounded-lg\", \"text-black\")\n};\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-white/20 rounded-[inherit]\", \"shadow-[0_0_0_1px_oklch(0_0_0/0.05)] 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-white\", \"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-white/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-white rounded-full\", \"ring ring-black/10 shadow-sm shadow-black/15\", \"transition-[opacity,scale,outline-offset] duration-150 ease-out select-none\", \"outline-2 outline-transparent -outline-offset-2\", \"focus-visible:outline-white 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};\nconst root = cn(\"block relative isolate overflow-clip @container/media-root\", \"rounded-(--media-border-radius,0.75rem) bg-black\", \"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]\", \"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\", \"[&>video]:block [&>video]:w-full [&>video]:h-full [&>video]:rounded-[inherit]\", \"[&>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]\", \"[&_video::-webkit-media-text-track-container]:transition-transform\", \"[&_video::-webkit-media-text-track-container]:duration-150\", \"[&_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\");\nconst controls = cn(\"peer/controls\", \"absolute @container/media-controls bottom-0 inset-x-0\", \"pt-8 px-1.5 pb-1.5 flex items-center 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 overlay = cn(\"absolute inset-0 flex flex-col items-start\", \"pointer-events-none rounded-[inherit]\", \"opacity-0\", \"bg-linear-to-t from-black/70 via-black/50 via-[7.5rem] to-transparent\", \"backdrop-blur-none backdrop-saturate-120 backdrop-brightness-90\", \"transition-[opacity,backdrop-filter] ease-out\", \"duration-500 delay-500\", \"peer-data-visible/controls:opacity-100\", \"peer-data-visible/controls:duration-150\", \"peer-data-visible/controls:delay-0\", \"peer-data-open/error:opacity-100\", \"peer-data-open/error:duration-150\", \"peer-data-open/error:delay-0\", \"peer-data-open/error:backdrop-blur-sm\", \"motion-reduce:duration-100\");\nconst bufferingIndicator = \"absolute inset-0 hidden items-center justify-center pointer-events-none z-10 text-white data-visible:flex\";\nconst error = {\n\troot: \"peer/error group/error absolute inset-0 z-20 flex items-center justify-center pointer-events-none\",\n\tdialog: cn(\"flex flex-col gap-3 max-w-64 p-4 text-white text-sm pointer-events-auto\", \"text-shadow-2xs text-shadow-black/50\", \"transition-[opacity,transform] duration-500 delay-100\", \"ease-[linear(0,0.034_1.5%,0.763_9.7%,1.066_13.9%,1.198_19.9%,1.184_21.8%,0.963_37.5%,0.997_50.9%,1)]\", \"group-data-[starting-style]/error:opacity-0 group-data-[starting-style]/error:scale-50\", \"group-data-[ending-style]/error:opacity-0 group-data-[ending-style]/error:scale-50\"),\n\tcontent: \"flex flex-col gap-2 py-1.5\",\n\ttitle: \"font-semibold leading-tight\",\n\tactions: \"flex gap-2 *:flex-1\"\n};\nconst buttonGroup = cn(\"flex items-center gap-[0.075rem]\", \"@2xl/media-root:gap-0.5\");\nconst time = {\n\tgroup: \"flex items-center gap-1\",\n\tcurrent: cn(\"hidden tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:inline\"),\n\tseparator: cn(\"hidden\", \"@md/media-controls:inline @md/media-controls:text-white/50\"),\n\tduration: cn(\"tabular-nums text-shadow-2xs text-shadow-black/25\", \"@md/media-controls:text-white/50\"),\n\tcontrols: cn(\"flex flex-row-reverse items-center flex-1 gap-3\", \"@md/media-controls:flex-row\")\n};\nconst popup = {\n\tbase: cn(\"m-0 border-0 bg-transparent [--media-popover-side-offset:0.5rem]\", \"opacity-100 scale-100 origin-bottom blur-none\", \"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\"),\n\tvolume: \"p-1\"\n};\nconst seek = {\n\tbutton: \"@max-md/media-controls:hidden\",\n\tlabel: \"text-[0.75em] font-[480] tabular-nums\",\n\tlabelForward: \"absolute -right-px -bottom-0.75\",\n\tlabelBackward: \"absolute -left-px -bottom-0.75\"\n};\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\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};\nconst captions = {\n\troot: cn(\"absolute z-20 pointer-events-none text-balance text-base\", \"inset-x-4 bottom-6\", \"transition-transform duration-150 ease-out delay-600\", \"motion-reduce:duration-50\", \"@xs/media-root:text-2xl\", \"@3xl/media-root:text-3xl\", \"@7xl/media-root:text-4xl\", \"peer-data-visible/controls:-translate-y-10 peer-data-visible/controls:delay-25\"),\n\tcontainer: \"max-w-[42ch] mx-auto text-center flex flex-col items-center\",\n\tcue: cn(\"block py-0.5 px-2 text-white text-center whitespace-pre-wrap leading-1.2\", \"[text-shadow:0_0_1px_oklab(0_0_0_/_0.7),0_0_8px_oklab(0_0_0_/_0.7)]\", \"contrast-more:[text-shadow:none] contrast-more:[box-decoration-break:clone] contrast-more:bg-black/70\", \"*:inline\")\n};\n\n//#endregion\nexport { bufferingIndicator, button, buttonGroup, captions, controls, error, icon, iconContainer, iconFlipped, iconHidden, iconState, overlay, popup, root, seek, slider, time };\n//# sourceMappingURL=minimal.tailwind.js.map"],"mappings":";;;AAGA,MAAM,OAAO,GAAG,kCAAkC,0EAA0E,yEAAyE;AAErM,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,mDAAmD,eAAe,4EAA4E,8DAA8D,qEAAqE;CACrX,MAAM,GAAG,6DAA6D,cAAc,0CAA0C,+BAA+B,8BAA8B;CAC3L,SAAS,GAAG,sCAAsC,aAAa;CAC/D;AACD,MAAM,SAAS;CACd,MAAM,GAAG,2FAA2F,iHAAiH,yEAAyE;CAC9R,OAAO,GAAG,kEAAkE,oDAAoD,6EAA6E,wEAAwE;CACrR,MAAM;EACL,MAAM;EACN,MAAM,GAAG,YAAY,gFAAgF,2DAA2D,8EAA8E,wDAAwD;EACtS,QAAQ,GAAG,qCAAqC,gFAAgF,8GAA8G,8EAA8E,wGAAwG;EACpa;CACD,OAAO;EACN,MAAM,GAAG,0DAA0D,yBAAyB,gDAAgD,+EAA+E,mDAAmD,8DAA8D,oGAAoG,+GAA+G;EAC/hB,aAAa,GAAG,oCAAoC,+DAA+D,4EAA4E;EAC/L;CACD;AACD,MAAM,OAAO,GAAG,8DAA8D,oDAAoD,uHAAuH,wBAAwB,6BAA6B,iDAAiD,+EAA+E,mEAAmE,4BAA4B,iFAAiF,4FAA4F,oDAAoD,mDAAmD,yCAAyC,uCAAuC,qCAAqC,0EAA0E,yEAAyE,sEAAsE,8DAA8D,0DAA0D,qFAAqF,uFAAuF,0DAA0D,qDAAqD,gEAAgE,2EAA2E,8BAA8B;AAC3qD,MAAM,WAAW,GAAG,iBAAiB,yDAAyD,8CAA8C,mBAAmB,0CAA0C,kDAAkD,uBAAuB,gEAAgE,iEAAiE,4DAA4D,+CAA+C,gDAAgD,qFAAqF,gEAAgE,yBAAyB;AAC5tB,MAAM,UAAU,GAAG,8CAA8C,yCAAyC,aAAa,yEAAyE,mEAAmE,iDAAiD,0BAA0B,0CAA0C,2CAA2C,sCAAsC,oCAAoC,qCAAqC,gCAAgC,yCAAyC,6BAA6B;AACxnB,MAAM,qBAAqB;AAC3B,MAAM,QAAQ;CACb,MAAM;CACN,QAAQ,GAAG,2EAA2E,wCAAwC,yDAAyD,wGAAwG,0FAA0F,qFAAqF;CAC9c,SAAS;CACT,OAAO;CACP,SAAS;CACT;AACD,MAAM,cAAc,GAAG,oCAAoC,0BAA0B;AACrF,MAAM,OAAO;CACZ,OAAO;CACP,SAAS,GAAG,4DAA4D,4BAA4B;CACpG,WAAW,GAAG,UAAU,6DAA6D;CACrF,UAAU,GAAG,qDAAqD,mCAAmC;CACrG,UAAU,GAAG,mDAAmD,8BAA8B;CAC9F;AACD,MAAM,QAAQ;CACb,MAAM,GAAG,oEAAoE,iDAAiD,4DAA4D,yFAAyF,mFAAmF,0BAA0B;CAChY,QAAQ;CACR;AACD,MAAM,OAAO;CACZ,QAAQ;CACR,OAAO;CACP,cAAc;CACd,eAAe;CACf;AACD,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD;AACD,MAAM,WAAW;CAChB,MAAM,GAAG,4DAA4D,sBAAsB,wDAAwD,6BAA6B,2BAA2B,4BAA4B,4BAA4B,iFAAiF;CACpV,WAAW;CACX,KAAK,GAAG,4EAA4E,uEAAuE,yGAAyG,WAAW;CAC/Q"}

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

@@ -24,10 +24,10 @@ function createProviderMixin(context, factory) {
 				super.connectedCallback();
 				this.#provider.setValue(this.store);
 			}
-			disconnectedCallback() {
-				super.disconnectedCallback();
+			destroyCallback() {
 				this.#store?.destroy();
 				this.#store = null;
+				super.destroyCallback();
 			}
 		}
 		return PlayerProviderElement;

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

@@ -1 +1 @@
-{"version":3,"file":"provider-mixin.js","names":["#store","#provider"],"sources":["../../../src/store/provider-mixin.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isNull } from '@videojs/utils/predicate';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerProvider, PlayerProviderConstructor } from './types';\n\nexport type ProviderMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerProviderConstructor<Store>;\n\n/**\n * Create a mixin that provides player context to descendant elements.\n *\n * @param context - Player context to provide to descendants.\n * @param factory - Factory function that creates a store instance.\n */\nexport function createProviderMixin<Store extends PlayerStore>(\n  context: PlayerContext<Store>,\n  factory: () => Store\n): ProviderMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerProviderElement extends BaseClass implements PlayerProvider<Store> {\n      #store: Store | null = factory();\n\n      #provider = new ContextProvider(this, {\n        context,\n        initialValue: this.store,\n      });\n\n      get store(): Store {\n        if (isNull(this.#store)) {\n          this.#store = factory();\n        }\n\n        return this.#store;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n        this.#provider.setValue(this.store);\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#store?.destroy();\n        this.#store = null;\n      }\n    }\n\n    return PlayerProviderElement;\n  };\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,oBACd,SACA,SACsB;AACtB,SAA+C,cAAqB;EAClE,MAAM,8BAA8B,UAA2C;GAC7E,SAAuB,SAAS;GAEhC,YAAY,IAAI,gBAAgB,MAAM;IACpC;IACA,cAAc,KAAK;IACpB,CAAC;GAEF,IAAI,QAAe;AACjB,QAAI,OAAO,MAAKA,MAAO,CACrB,OAAKA,QAAS,SAAS;AAGzB,WAAO,MAAKA;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AACzB,UAAKC,SAAU,SAAS,KAAK,MAAM;;GAGrC,AAAS,uBAAuB;AAC9B,UAAM,sBAAsB;AAC5B,UAAKD,OAAQ,SAAS;AACtB,UAAKA,QAAS;;;AAIlB,SAAO"}
+{"version":3,"file":"provider-mixin.js","names":["#store","#provider"],"sources":["../../../src/store/provider-mixin.ts"],"sourcesContent":["import type { PlayerStore } from '@videojs/core/dom';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isNull } from '@videojs/utils/predicate';\nimport type { MediaElementConstructor } from '@/ui/media-element';\nimport type { PlayerContext } from '../player/context';\nimport type { PlayerProvider, PlayerProviderConstructor } from './types';\n\nexport type ProviderMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(\n  BaseClass: Class\n) => Class & PlayerProviderConstructor<Store>;\n\n/**\n * Create a mixin that provides player context to descendant elements.\n *\n * @param context - Player context to provide to descendants.\n * @param factory - Factory function that creates a store instance.\n */\nexport function createProviderMixin<Store extends PlayerStore>(\n  context: PlayerContext<Store>,\n  factory: () => Store\n): ProviderMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerProviderElement extends BaseClass implements PlayerProvider<Store> {\n      #store: Store | null = factory();\n\n      #provider = new ContextProvider(this, {\n        context,\n        initialValue: this.store,\n      });\n\n      get store(): Store {\n        if (isNull(this.#store)) {\n          this.#store = factory();\n        }\n\n        return this.#store;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n        this.#provider.setValue(this.store);\n      }\n\n      override destroyCallback() {\n        this.#store?.destroy();\n        this.#store = null;\n        super.destroyCallback();\n      }\n    }\n\n    return PlayerProviderElement;\n  };\n}\n"],"mappings":";;;;;;;;;;AAiBA,SAAgB,oBACd,SACA,SACsB;AACtB,SAA+C,cAAqB;EAClE,MAAM,8BAA8B,UAA2C;GAC7E,SAAuB,SAAS;GAEhC,YAAY,IAAI,gBAAgB,MAAM;IACpC;IACA,cAAc,KAAK;IACpB,CAAC;GAEF,IAAI,QAAe;AACjB,QAAI,OAAO,MAAKA,MAAO,CACrB,OAAKA,QAAS,SAAS;AAGzB,WAAO,MAAKA;;GAGd,AAAS,oBAAoB;AAC3B,UAAM,mBAAmB;AACzB,UAAKC,SAAU,SAAS,KAAK,MAAM;;GAGrC,AAAS,kBAAkB;AACzB,UAAKD,OAAQ,SAAS;AACtB,UAAKA,QAAS;AACd,UAAM,iBAAiB;;;AAI3B,SAAO"}

package/dist/default/ui/alert-dialog/alert-dialog-close-element.js

@@ -0,0 +1,46 @@
+import { MediaElement } from "../media-element.js";
+import { alertDialogContext } from "./context.js";
+import { applyElementProps, applyStateDataAttrs, createButton } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+
+//#region src/ui/alert-dialog/alert-dialog-close-element.ts
+var AlertDialogCloseElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+	}
+	static {
+		this.tagName = "media-alert-dialog-close";
+	}
+	static {
+		this.properties = { disabled: { type: Boolean } };
+	}
+	#ctx = new ContextConsumer(this, {
+		context: alertDialogContext,
+		subscribe: true
+	});
+	#disconnect = null;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		const buttonProps = createButton({
+			onActivate: () => this.#ctx.value?.close(),
+			isDisabled: () => this.disabled
+		});
+		applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+
+//#endregion
+export { AlertDialogCloseElement };
+//# sourceMappingURL=alert-dialog-close-element.js.map

package/dist/default/ui/alert-dialog/alert-dialog-close-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-close-element.js","names":["#ctx","#disconnect"],"sources":["../../../../src/ui/alert-dialog/alert-dialog-close-element.ts"],"sourcesContent":["import { applyElementProps, applyStateDataAttrs, createButton } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { alertDialogContext } from './context';\n\nexport class AlertDialogCloseElement extends MediaElement {\n  static readonly tagName = 'media-alert-dialog-close';\n\n  static override properties = {\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<'disabled'>;\n\n  disabled = false;\n\n  readonly #ctx = new ContextConsumer(this, { context: alertDialogContext, subscribe: true });\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n\n    const buttonProps = createButton({\n      onActivate: () => this.#ctx.value?.close(),\n      isDisabled: () => this.disabled,\n    });\n\n    applyElementProps(this, buttonProps, { signal: this.#disconnect.signal });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    const ctx = this.#ctx.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;AAOA,IAAa,0BAAb,cAA6C,aAAa;;;kBAO7C;;;iBANe;;;oBAEG,EAC3B,UAAU,EAAE,MAAM,SAAS,EAC5B;;CAID,CAASA,MAAO,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAoB,WAAW;EAAM,CAAC;CAE3F,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AACzB,QAAKC,aAAc,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,MAAKD,IAAK,OAAO,OAAO;GAC1C,kBAAkB,KAAK;GACxB,CAAC;AAEF,oBAAkB,MAAM,aAAa,EAAE,QAAQ,MAAKC,WAAY,QAAQ,CAAC;;CAG3E,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EACtB,MAAM,MAAM,MAAKD,IAAK;AACtB,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}

package/dist/default/ui/alert-dialog/alert-dialog-description-element.js

@@ -0,0 +1,26 @@
+import { alertDialogContext } from "./context.js";
+import { ContextPartElement } from "../context-part-element.js";
+import { ContextConsumer } from "@videojs/element/context";
+
+//#region src/ui/alert-dialog/alert-dialog-description-element.ts
+var AlertDialogDescriptionElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: alertDialogContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-alert-dialog-description";
+	}
+	update(changed) {
+		super.update(changed);
+		const descriptionId = this.consumer.value?.state.descriptionId;
+		if (descriptionId) this.id = descriptionId;
+	}
+};
+
+//#endregion
+export { AlertDialogDescriptionElement };
+//# sourceMappingURL=alert-dialog-description-element.js.map

package/dist/default/ui/alert-dialog/alert-dialog-description-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-description-element.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-description-element.ts"],"sourcesContent":["import type { AlertDialogState } from '@videojs/core';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { alertDialogContext } from './context';\n\nexport class AlertDialogDescriptionElement extends ContextPartElement<AlertDialogState> {\n  static readonly tagName = 'media-alert-dialog-description';\n\n  protected readonly consumer = new ContextConsumer(this, { context: alertDialogContext, subscribe: true });\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n    const descriptionId = this.consumer.value?.state.descriptionId;\n    if (descriptionId) this.id = descriptionId;\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,gCAAb,cAAmD,mBAAqC;;;kBAGxD,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAoB,WAAW;GAAM,CAAC;;;iBAF/E;;CAI1B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EACrB,MAAM,gBAAgB,KAAK,SAAS,OAAO,MAAM;AACjD,MAAI,cAAe,MAAK,KAAK"}

package/dist/default/ui/alert-dialog/alert-dialog-element.js

@@ -0,0 +1,73 @@
+import { MediaElement } from "../media-element.js";
+import { alertDialogContext } from "./context.js";
+import { applyElementProps, applyStateDataAttrs, createAlertDialog, createTransition } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { SnapshotController } from "@videojs/store/html";
+import { AlertDialogCore, AlertDialogDataAttrs } from "@videojs/core";
+
+//#region src/ui/alert-dialog/alert-dialog-element.ts
+let idCounter = 0;
+var AlertDialogElement = class extends MediaElement {
+	static {
+		this.tagName = "media-alert-dialog";
+	}
+	static {
+		this.properties = { open: { type: Boolean } };
+	}
+	#core = new AlertDialogCore();
+	#provider = new ContextProvider(this, { context: alertDialogContext });
+	#titleId = `vjs-alert-dialog-title-${idCounter++}`;
+	#descriptionId = `vjs-alert-dialog-desc-${idCounter++}`;
+	#dialog = null;
+	#snapshot = null;
+	constructor() {
+		super();
+		this.open = false;
+		this.#core.setTitleId(this.#titleId);
+		this.#core.setDescriptionId(this.#descriptionId);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#dialog = createAlertDialog({
+			transition: createTransition(),
+			onOpenChange: (nextOpen) => {
+				this.open = nextOpen;
+				this.dispatchEvent(new CustomEvent("open-change", { detail: { open: nextOpen } }));
+			}
+		});
+		this.#dialog.setElement(this);
+		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
+		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#dialog?.destroy();
+		this.#dialog = null;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (this.#dialog && changed.has("open")) {
+			const { active: inputOpen } = this.#dialog.input.current;
+			if (this.open !== inputOpen) if (this.open) this.#dialog.open();
+			else this.#dialog.close();
+		}
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#dialog) return;
+		const input = this.#dialog.input.current;
+		this.#core.setInput(input);
+		const state = this.#core.getState();
+		applyElementProps(this, this.#core.getAttrs(state));
+		applyStateDataAttrs(this, state, AlertDialogDataAttrs);
+		this.#provider.setValue({
+			state,
+			stateAttrMap: AlertDialogDataAttrs,
+			close: () => this.#dialog?.close()
+		});
+	}
+};
+
+//#endregion
+export { AlertDialogElement };
+//# sourceMappingURL=alert-dialog-element.js.map

package/dist/default/ui/alert-dialog/alert-dialog-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-element.js","names":["#core","#provider","#titleId","#descriptionId","#dialog","#snapshot"],"sources":["../../../../src/ui/alert-dialog/alert-dialog-element.ts"],"sourcesContent":["import { AlertDialogCore, AlertDialogDataAttrs, type AlertDialogInput } from '@videojs/core';\nimport {\n  type AlertDialogApi,\n  applyElementProps,\n  applyStateDataAttrs,\n  createAlertDialog,\n  createTransition,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\n\nimport { MediaElement } from '../media-element';\nimport { alertDialogContext } from './context';\n\nlet idCounter = 0;\n\nexport class AlertDialogElement extends MediaElement {\n  static readonly tagName = 'media-alert-dialog';\n\n  static override properties = {\n    open: { type: Boolean },\n  } satisfies PropertyDeclarationMap<'open'>;\n\n  open = false;\n\n  readonly #core = new AlertDialogCore();\n  readonly #provider = new ContextProvider(this, { context: alertDialogContext });\n  readonly #titleId = `vjs-alert-dialog-title-${idCounter++}`;\n  readonly #descriptionId = `vjs-alert-dialog-desc-${idCounter++}`;\n\n  #dialog: AlertDialogApi | null = null;\n  #snapshot: SnapshotController<AlertDialogInput> | null = null;\n\n  constructor() {\n    super();\n    this.#core.setTitleId(this.#titleId);\n    this.#core.setDescriptionId(this.#descriptionId);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#dialog = createAlertDialog({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen } }));\n      },\n    });\n\n    // Register self as the dialog element.\n    this.#dialog.setElement(this);\n\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#dialog.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#dialog.input);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#dialog?.destroy();\n    this.#dialog = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    // Sync controlled open state.\n    if (this.#dialog && changed.has('open')) {\n      const { active: inputOpen } = this.#dialog.input.current;\n      if (this.open !== inputOpen) {\n        if (this.open) {\n          this.#dialog.open();\n        } else {\n          this.#dialog.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#dialog) return;\n\n    const input = this.#dialog.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    applyElementProps(this, this.#core.getAttrs(state));\n    applyStateDataAttrs(this, state, AlertDialogDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: AlertDialogDataAttrs,\n      close: () => this.#dialog?.close(),\n    });\n  }\n}\n"],"mappings":";;;;;;;;AAeA,IAAI,YAAY;AAEhB,IAAa,qBAAb,cAAwC,aAAa;;iBACzB;;;oBAEG,EAC3B,MAAM,EAAE,MAAM,SAAS,EACxB;;CAID,CAASA,OAAQ,IAAI,iBAAiB;CACtC,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,oBAAoB,CAAC;CAC/E,CAASC,UAAW,0BAA0B;CAC9C,CAASC,gBAAiB,yBAAyB;CAEnD,UAAiC;CACjC,YAAyD;CAEzD,cAAc;AACZ,SAAO;cAXF;AAYL,QAAKH,KAAM,WAAW,MAAKE,QAAS;AACpC,QAAKF,KAAM,iBAAiB,MAAKG,cAAe;;CAGlD,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,SAAU,kBAAkB;GAC/B,YAAY,kBAAkB;GAC9B,eAAe,aAAsB;AACnC,SAAK,OAAO;AACZ,SAAK,cAAc,IAAI,YAAY,eAAe,EAAE,QAAQ,EAAE,MAAM,UAAU,EAAE,CAAC,CAAC;;GAErF,CAAC;AAGF,QAAKA,OAAQ,WAAW,KAAK;AAE7B,MAAI,MAAKC,SACP,OAAKA,SAAU,MAAM,MAAKD,OAAQ,MAAM;MAExC,OAAKC,WAAY,IAAI,mBAAmB,MAAM,MAAKD,OAAQ,MAAM;;CAIrE,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,QAAS,SAAS;AACvB,QAAKA,SAAU;;CAGjB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AAGzB,MAAI,MAAKA,UAAW,QAAQ,IAAI,OAAO,EAAE;GACvC,MAAM,EAAE,QAAQ,cAAc,MAAKA,OAAQ,MAAM;AACjD,OAAI,KAAK,SAAS,UAChB,KAAI,KAAK,KACP,OAAKA,OAAQ,MAAM;OAEnB,OAAKA,OAAQ,OAAO;;;CAM5B,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,MAAKA,OAAS;EAEnB,MAAM,QAAQ,MAAKA,OAAQ,MAAM;AACjC,QAAKJ,KAAM,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAKA,KAAM,UAAU;AAEnC,oBAAkB,MAAM,MAAKA,KAAM,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,qBAAqB;AAEtD,QAAKC,SAAU,SAAS;GACtB;GACA,cAAc;GACd,aAAa,MAAKG,QAAS,OAAO;GACnC,CAAC"}

package/dist/default/ui/alert-dialog/alert-dialog-title-element.js

@@ -0,0 +1,26 @@
+import { alertDialogContext } from "./context.js";
+import { ContextPartElement } from "../context-part-element.js";
+import { ContextConsumer } from "@videojs/element/context";
+
+//#region src/ui/alert-dialog/alert-dialog-title-element.ts
+var AlertDialogTitleElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: alertDialogContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-alert-dialog-title";
+	}
+	update(changed) {
+		super.update(changed);
+		const titleId = this.consumer.value?.state.titleId;
+		if (titleId) this.id = titleId;
+	}
+};
+
+//#endregion
+export { AlertDialogTitleElement };
+//# sourceMappingURL=alert-dialog-title-element.js.map

package/dist/default/ui/alert-dialog/alert-dialog-title-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-title-element.js","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-title-element.ts"],"sourcesContent":["import type { AlertDialogState } from '@videojs/core';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { alertDialogContext } from './context';\n\nexport class AlertDialogTitleElement extends ContextPartElement<AlertDialogState> {\n  static readonly tagName = 'media-alert-dialog-title';\n\n  protected readonly consumer = new ContextConsumer(this, { context: alertDialogContext, subscribe: true });\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n    const titleId = this.consumer.value?.state.titleId;\n    if (titleId) this.id = titleId;\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,0BAAb,cAA6C,mBAAqC;;;kBAGlD,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAoB,WAAW;GAAM,CAAC;;;iBAF/E;;CAI1B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EACrB,MAAM,UAAU,KAAK,SAAS,OAAO,MAAM;AAC3C,MAAI,QAAS,MAAK,KAAK"}

package/dist/default/ui/alert-dialog/context.js

@@ -0,0 +1,9 @@
+import { createContext } from "@videojs/element/context";
+
+//#region src/ui/alert-dialog/context.ts
+const ALERT_DIALOG_CONTEXT_KEY = Symbol("@videojs/alert-dialog");
+const alertDialogContext = createContext(ALERT_DIALOG_CONTEXT_KEY);
+
+//#endregion
+export { alertDialogContext };
+//# sourceMappingURL=context.js.map

package/dist/default/ui/alert-dialog/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/alert-dialog/context.ts"],"sourcesContent":["import type { AlertDialogState, StateAttrMap } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nexport interface AlertDialogContextValue {\n  state: AlertDialogState;\n  stateAttrMap: StateAttrMap<AlertDialogState>;\n  close: () => void;\n}\n\nconst ALERT_DIALOG_CONTEXT_KEY = Symbol('@videojs/alert-dialog');\n\nexport const alertDialogContext = createContext<AlertDialogContextValue>(ALERT_DIALOG_CONTEXT_KEY);\n"],"mappings":";;;AASA,MAAM,2BAA2B,OAAO,wBAAwB;AAEhE,MAAa,qBAAqB,cAAuC,yBAAyB"}

package/dist/default/ui/captions-button/captions-button-element.js

@@ -0,0 +1,25 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../player/player-controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { selectTextTrack } from "@videojs/core/dom";
+import { CaptionsButtonCore, CaptionsButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/captions-button/captions-button-element.ts
+var CaptionsButtonElement = class extends MediaButtonElement {
+	constructor(..._args) {
+		super(..._args);
+		this.core = new CaptionsButtonCore();
+		this.stateAttrMap = CaptionsButtonDataAttrs;
+		this.mediaState = new PlayerController(this, playerContext, selectTextTrack);
+	}
+	static {
+		this.tagName = "media-captions-button";
+	}
+	activate(state) {
+		this.core.toggle(state);
+	}
+};
+
+//#endregion
+export { CaptionsButtonElement };
+//# sourceMappingURL=captions-button-element.js.map

package/dist/default/ui/captions-button/captions-button-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"captions-button-element.js","names":[],"sources":["../../../../src/ui/captions-button/captions-button-element.ts"],"sourcesContent":["import { CaptionsButtonCore, CaptionsButtonDataAttrs, type MediaTextTrackState } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class CaptionsButtonElement extends MediaButtonElement<CaptionsButtonCore> {\n  static readonly tagName = 'media-captions-button';\n\n  protected readonly core = new CaptionsButtonCore();\n  protected readonly stateAttrMap = CaptionsButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectTextTrack);\n\n  protected activate(state: MediaTextTrackState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;;AAOA,IAAa,wBAAb,cAA2C,mBAAuC;;;cAGtD,IAAI,oBAAoB;sBAChB;oBACF,IAAI,iBAAiB,MAAM,eAAe,gBAAgB;;;iBAJhE;;CAM1B,AAAU,SAAS,OAAkC;AACnD,OAAK,KAAK,OAAO,MAAM"}

package/dist/default/ui/controls/controls-group-element.js

@@ -1,5 +1,5 @@
-import { controlsContext } from "./context.js";
 import { ContextPartElement } from "../context-part-element.js";
+import { controlsContext } from "./context.js";
 import { ContextConsumer } from "@videojs/element/context";
 
 //#region src/ui/controls/controls-group-element.ts

package/dist/default/ui/media-element.js

@@ -1,7 +1,8 @@
-import { ReactiveElement } from "@videojs/element";
+import { DestroyMixin, ReactiveElement } from "@videojs/element";
 
 //#region src/ui/media-element.ts
-var MediaElement = class extends ReactiveElement {};
+/** Base class for interactive media UI elements. */
+var MediaElement = class extends DestroyMixin(ReactiveElement) {};
 
 //#endregion
 export { MediaElement };

package/dist/default/ui/media-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"media-element.js","names":[],"sources":["../../../src/ui/media-element.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\nexport class MediaElement extends ReactiveElement {}\n\nexport interface MediaElementConstructor extends Constructor<MediaElement> {}\n"],"mappings":";;;AAGA,IAAa,eAAb,cAAkC,gBAAgB"}
+{"version":3,"file":"media-element.js","names":[],"sources":["../../../src/ui/media-element.ts"],"sourcesContent":["import { DestroyMixin, ReactiveElement } from '@videojs/element';\nimport type { Constructor } from '@videojs/utils/types';\n\n/** Base class for interactive media UI elements. */\nexport class MediaElement extends DestroyMixin(ReactiveElement) {}\n\nexport interface MediaElementConstructor extends Constructor<MediaElement> {}\n"],"mappings":";;;;AAIA,IAAa,eAAb,cAAkC,aAAa,gBAAgB,CAAC"}

package/dist/default/ui/popover/popover-element.js

@@ -59,6 +59,7 @@ var PopoverElement = class extends MediaElement {
 	#currentTrigger = null;
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.destroyed) return;
 		this.#disconnect = new AbortController();
 		this.#popover = createPopover({
 			transition: createTransition(),
@@ -86,12 +87,14 @@ var PopoverElement = class extends MediaElement {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.#cleanupTrigger();
-		this.#popover?.destroy();
-		this.#popover = null;
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
+	destroyCallback() {
+		this.#cleanupTrigger();
+		this.#popover?.destroy();
+		super.destroyCallback();
+	}
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.#core.setProps(this);

package/dist/default/ui/popover/popover-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-element.js","names":["#core","#disconnect","#popover","#snapshot","#cleanupTrigger","#findTrigger","#syncTrigger","#currentTrigger","#triggerAbort"],"sources":["../../../../src/ui/popover/popover-element.ts"],"sourcesContent":["import { PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createPopover,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  type PopoverApi,\n  type PopoverChangeDetails,\n  resolveOffsets,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\n\nexport class PopoverElement extends MediaElement {\n  static readonly tagName = 'media-popover';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    modal: { type: Boolean },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n    closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n    openOnHover: { type: Boolean, attribute: 'open-on-hover' },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<keyof PopoverCore.Props>;\n\n  open = PopoverCore.defaultProps.open;\n  defaultOpen = PopoverCore.defaultProps.defaultOpen;\n  side = PopoverCore.defaultProps.side;\n  align = PopoverCore.defaultProps.align;\n  modal: PopoverProps['modal'] = PopoverCore.defaultProps.modal;\n  closeOnEscape = PopoverCore.defaultProps.closeOnEscape;\n  closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;\n  openOnHover = PopoverCore.defaultProps.openOnHover;\n  delay = PopoverCore.defaultProps.delay;\n  closeDelay = PopoverCore.defaultProps.closeDelay;\n\n  readonly #core = new PopoverCore();\n  #popover: PopoverApi | null = null;\n  #snapshot: SnapshotController<PopoverInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n\n    this.#popover = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      closeOnEscape: () => this.closeOnEscape,\n      closeOnOutsideClick: () => this.closeOnOutsideClick,\n      openOnHover: () => this.openOnHover,\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#popover.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    // Reuse the controller across connect/disconnect cycles to avoid\n    // leaking stale controllers in the host's controller set.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#popover.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#popover.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#popover?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#popover?.destroy();\n    this.#popover = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#popover && changed.has('open')) {\n      const { active: interactionOpen } = this.#popover.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#popover.open();\n        } else {\n          this.#popover.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#popover) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#popover.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, PopoverDataAttrs);\n\n    // Apply trigger ARIA and anchor-name to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) return;\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n\n    if (supportsAnchorPositioning()) {\n      // Native CSS Anchor Positioning — no JS rect measurements needed.\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts));\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n      const selfRect = this.getBoundingClientRect();\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(this);\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));\n    }\n  }\n\n  // --- Trigger discovery ---\n\n  #findTrigger(): HTMLElement | null {\n    if (!this.id) return null;\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.id}\"]`);\n  }\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#popover?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#popover) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      // Remove ARIA attributes and anchor-name style from the old trigger.\n      applyElementProps(this.#currentTrigger, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"popover-element.js","names":["#core","#disconnect","#popover","#snapshot","#cleanupTrigger","#findTrigger","#syncTrigger","#currentTrigger","#triggerAbort"],"sources":["../../../../src/ui/popover/popover-element.ts"],"sourcesContent":["import { PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createPopover,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  type PopoverApi,\n  type PopoverChangeDetails,\n  resolveOffsets,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { SnapshotController } from '@videojs/store/html';\nimport { applyStyles, supportsAnchorPositioning } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\n\nexport class PopoverElement extends MediaElement {\n  static readonly tagName = 'media-popover';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    modal: { type: Boolean },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n    closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n    openOnHover: { type: Boolean, attribute: 'open-on-hover' },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n  } satisfies PropertyDeclarationMap<keyof PopoverCore.Props>;\n\n  open = PopoverCore.defaultProps.open;\n  defaultOpen = PopoverCore.defaultProps.defaultOpen;\n  side = PopoverCore.defaultProps.side;\n  align = PopoverCore.defaultProps.align;\n  modal: PopoverProps['modal'] = PopoverCore.defaultProps.modal;\n  closeOnEscape = PopoverCore.defaultProps.closeOnEscape;\n  closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;\n  openOnHover = PopoverCore.defaultProps.openOnHover;\n  delay = PopoverCore.defaultProps.delay;\n  closeDelay = PopoverCore.defaultProps.closeDelay;\n\n  readonly #core = new PopoverCore();\n  #popover: PopoverApi | null = null;\n  #snapshot: SnapshotController<PopoverInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n\n    this.#popover = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      closeOnEscape: () => this.closeOnEscape,\n      closeOnOutsideClick: () => this.closeOnOutsideClick,\n      openOnHover: () => this.openOnHover,\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#popover.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    // Reuse the controller across connect/disconnect cycles to avoid\n    // leaking stale controllers in the host's controller set.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#popover.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#popover.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#popover?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#cleanupTrigger();\n    this.#popover?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#popover && changed.has('open')) {\n      const { active: interactionOpen } = this.#popover.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#popover.open();\n        } else {\n          this.#popover.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#popover) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#findTrigger();\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#popover.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, PopoverDataAttrs);\n\n    // Apply trigger ARIA and anchor-name to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) return;\n\n    // Apply positioning styles to self.\n    const posOpts = { side: state.side, align: state.align };\n\n    if (supportsAnchorPositioning()) {\n      // Native CSS Anchor Positioning — no JS rect measurements needed.\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts));\n    } else {\n      // JS fallback: measure rects and resolve CSS var offsets.\n      const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n      const selfRect = this.getBoundingClientRect();\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(this);\n      applyStyles(this, getAnchorPositionStyle(this.id, posOpts, triggerRect, selfRect, boundaryRect, offsets));\n    }\n  }\n\n  // --- Trigger discovery ---\n\n  #findTrigger(): HTMLElement | null {\n    if (!this.id) return null;\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return root.querySelector<HTMLElement>(`[commandfor=\"${this.id}\"]`);\n  }\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#popover?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#popover) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      // Remove ARIA attributes and anchor-name style from the old trigger.\n      applyElementProps(this.#currentTrigger, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n}\n"],"mappings":";;;;;;;AAkBA,IAAa,iBAAb,cAAoC,aAAa;;;cAgBxC,YAAY,aAAa;qBAClB,YAAY,aAAa;cAChC,YAAY,aAAa;eACxB,YAAY,aAAa;eACF,YAAY,aAAa;uBACxC,YAAY,aAAa;6BACnB,YAAY,aAAa;qBACjC,YAAY,aAAa;eAC/B,YAAY,aAAa;oBACpB,YAAY,aAAa;;;iBAxBZ;;;oBAEG;GAC3B,MAAM,EAAE,MAAM,SAAS;GACvB,aAAa;IAAE,MAAM;IAAS,WAAW;IAAgB;GACzD,MAAM,EAAE,MAAM,QAAQ;GACtB,OAAO,EAAE,MAAM,QAAQ;GACvB,OAAO,EAAE,MAAM,SAAS;GACxB,eAAe;IAAE,MAAM;IAAS,WAAW;IAAmB;GAC9D,qBAAqB;IAAE,MAAM;IAAS,WAAW;IAA0B;GAC3E,aAAa;IAAE,MAAM;IAAS,WAAW;IAAiB;GAC1D,OAAO,EAAE,MAAM,QAAQ;GACvB,YAAY;IAAE,MAAM;IAAQ,WAAW;IAAe;GACvD;;CAaD,CAASA,OAAQ,IAAI,aAAa;CAClC,WAA8B;CAC9B,YAAqD;CAGrD,cAAsC;CACtC,gBAAwC;CACxC,kBAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,QAAKC,aAAc,IAAI,iBAAiB;AAExC,QAAKC,UAAW,cAAc;GAC5B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,SAAK,OAAO;AACZ,SAAK,cAAc,IAAI,YAAY,eAAe,EAAE,QAAQ;KAAE,MAAM;KAAU,GAAG;KAAS,EAAE,CAAC,CAAC;;GAEhG,qBAAqB,KAAK;GAC1B,2BAA2B,KAAK;GAChC,mBAAmB,KAAK;GACxB,aAAa,KAAK;GAClB,kBAAkB,KAAK;GACxB,CAAC;AAGF,QAAKA,QAAS,gBAAgB,KAAK;AAGnC,oBAAkB,MAAM,MAAKA,QAAS,YAAY,EAAE,QAAQ,MAAKD,WAAY,QAAQ,CAAC;AAKtF,MAAI,MAAKE,SACP,OAAKA,SAAU,MAAM,MAAKD,QAAS,MAAM;MAEzC,OAAKC,WAAY,IAAI,mBAAmB,MAAM,MAAKD,QAAS,MAAM;;CAItE,AAAmB,aAAa,SAA+B;AAC7D,QAAM,aAAa,QAAQ;AAI3B,MAAI,KAAK,eAAe,CAAC,KAAK,KAC5B,OAAKA,SAAU,MAAM;;CAIzB,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKD,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAS,kBAAwB;AAC/B,QAAKG,gBAAiB;AACtB,QAAKF,SAAU,SAAS;AACxB,QAAM,iBAAiB;;CAGzB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKF,KAAM,SAAS,KAAK;AAGzB,MAAI,MAAKE,WAAY,QAAQ,IAAI,OAAO,EAAE;GACxC,MAAM,EAAE,QAAQ,oBAAoB,MAAKA,QAAS,MAAM;AACxD,OAAI,KAAK,SAAS,gBAChB,KAAI,KAAK,KACP,OAAKA,QAAS,MAAM;OAEpB,OAAKA,QAAS,OAAO;;;CAM7B,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,MAAKA,QAAU;EAGpB,MAAM,YAAY,MAAKG,aAAc;AACrC,QAAKC,YAAa,UAAU;EAG5B,MAAM,QAAQ,MAAKJ,QAAS,MAAM;AAClC,QAAKF,KAAM,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAKA,KAAM,UAAU;AAGnC,oBAAkB,MAAM,MAAKA,KAAM,cAAc,MAAM,CAAC;AACxD,sBAAoB,MAAM,OAAO,iBAAiB;AAGlD,MAAI,MAAKO,gBAAiB;AACxB,qBAAkB,MAAKA,gBAAiB,MAAKP,KAAM,gBAAgB,OAAO,KAAK,GAAG,CAAC;AACnF,eAAY,MAAKO,gBAAiB,mBAAmB,KAAK,GAAG,CAAC;;AAIhE,MAAI,CAAC,MAAM,KAAM;EAGjB,MAAM,UAAU;GAAE,MAAM,MAAM;GAAM,OAAO,MAAM;GAAO;AAExD,MAAI,2BAA2B,CAE7B,aAAY,MAAM,uBAAuB,KAAK,IAAI,QAAQ,CAAC;OACtD;GAEL,MAAM,cAAc,MAAKA,gBAAiB,uBAAuB;GACjE,MAAM,WAAW,KAAK,uBAAuB;GAC7C,MAAM,eAAe,SAAS,gBAAgB,uBAAuB;GACrE,MAAM,UAAU,eAAe,KAAK;AACpC,eAAY,MAAM,uBAAuB,KAAK,IAAI,SAAS,aAAa,UAAU,cAAc,QAAQ,CAAC;;;CAM7G,eAAmC;AACjC,MAAI,CAAC,KAAK,GAAI,QAAO;AAErB,SADa,KAAK,aAAa,CACnB,cAA2B,gBAAgB,KAAK,GAAG,IAAI;;CAGrE,aAAa,WAAqC;AAChD,MAAI,cAAc,MAAKA,eAAiB;AAExC,QAAKH,gBAAiB;AACtB,QAAKG,iBAAkB;AACvB,QAAKL,SAAU,kBAAkB,UAAU;AAE3C,MAAI,aAAa,MAAKA,SAAU;AAC9B,SAAKM,eAAgB,IAAI,iBAAiB;AAC1C,qBAAkB,WAAW,MAAKN,QAAS,cAAc,EAAE,QAAQ,MAAKM,aAAc,QAAQ,CAAC;;;CAInG,kBAAwB;AACtB,MAAI,MAAKD,gBAAiB;AAExB,qBAAkB,MAAKA,gBAAiB;IACtC,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;IAClB,CAAC;AACF,SAAKA,eAAgB,MAAM,eAAe,cAAc;;AAG1D,QAAKC,cAAe,OAAO;AAC3B,QAAKA,eAAgB;AACrB,QAAKD,iBAAkB"}

package/dist/default/ui/slider/slider-element.js

@@ -1,6 +1,6 @@
 import { MediaElement } from "../media-element.js";
 import { sliderContext } from "./context.js";
-import { applyStateDataAttrs, createSlider, getSliderCSSVars } from "@videojs/core/dom";
+import { applyElementProps, applyStateDataAttrs, createSlider, getSliderCSSVars } from "@videojs/core/dom";
 import { ContextProvider } from "@videojs/element/context";
 import { SliderCore, SliderDataAttrs } from "@videojs/core";
 import { applyStyles, isRTL } from "@videojs/utils/dom";
@@ -47,6 +47,7 @@ var SliderElement = class extends MediaElement {
 	#disconnect = null;
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.destroyed) return;
 		this.#disconnect = new AbortController();
 		const signal = this.#disconnect.signal;
 		this.#slider = createSlider({
@@ -77,19 +78,23 @@ var SliderElement = class extends MediaElement {
 			},
 			onDragEnd: () => {
 				this.dispatchEvent(new CustomEvent("drag-end", { bubbles: true }));
-			}
+			},
+			adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize)
 		});
+		applyElementProps(this, this.#slider.rootProps, { signal });
 		this.#slider.input.subscribe(() => this.requestUpdate(), { signal });
 		this.style.touchAction = "none";
 		this.style.userSelect = "none";
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this.#slider?.destroy();
-		this.#slider = null;
 		this.#disconnect?.abort();
 		this.#disconnect = null;
 	}
+	destroyCallback() {
+		this.#slider?.destroy();
+		super.destroyCallback();
+	}
 	willUpdate(_changed) {
 		super.willUpdate(_changed);
 		this.#core.setProps(this);
@@ -99,7 +104,7 @@ var SliderElement = class extends MediaElement {
 		if (!this.#slider) return;
 		this.#core.setInput(this.#slider.input.current);
 		const state = this.#core.getSliderState(this.value);
-		const cssVars = getSliderCSSVars(state);
+		const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));
 		applyStyles(this, cssVars);
 		applyStateDataAttrs(this, state, SliderDataAttrs);
 		this.#provider.setValue({

package/dist/default/ui/slider/slider-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-element.js","names":["#core","#provider","#disconnect","#slider"],"sources":["../../../../src/ui/slider/slider-element.ts"],"sourcesContent":["import { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, createSlider, getSliderCSSVars, type SliderApi } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles, isRTL } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderElement extends MediaElement {\n  static readonly tagName = 'media-slider';\n\n  static override properties = {\n    label: { type: String },\n    value: { type: Number },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<keyof SliderCore.Props>;\n\n  label = SliderCore.defaultProps.label;\n  value = SliderCore.defaultProps.value;\n  min = SliderCore.defaultProps.min;\n  max = SliderCore.defaultProps.max;\n  step = SliderCore.defaultProps.step;\n  largeStep = SliderCore.defaultProps.largeStep;\n  orientation = SliderCore.defaultProps.orientation;\n  disabled = SliderCore.defaultProps.disabled;\n  thumbAlignment = SliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new SliderCore();\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isRTL: () => isRTL(this),\n      isDisabled: () => this.disabled,\n      getPercent: () => this.#core.percentFromValue(this.value),\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true }));\n      },\n      onValueCommit: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-commit', { detail: { value: this.value }, bubbles: true }));\n      },\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n    });\n\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    // Prevent default touch gestures and text selection during interaction.\n    this.style.touchAction = 'none';\n    this.style.userSelect = 'none';\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#slider?.destroy();\n    this.#slider = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#slider) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const state = this.#core.getSliderState(this.value);\n    const cssVars = getSliderCSSVars(state);\n\n    applyStyles(this, cssVars);\n\n    // Apply state data attributes to the root element.\n    applyStateDataAttrs(this, state, SliderDataAttrs);\n\n    // Provide context to child elements (thumb, value, track, etc.).\n    this.#provider.setValue({\n      state,\n      stateAttrMap: SliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n    });\n  }\n}\n"],"mappings":";;;;;;;;AASA,IAAa,gBAAb,cAAmC,aAAa;;;eAetC,WAAW,aAAa;eACxB,WAAW,aAAa;aAC1B,WAAW,aAAa;aACxB,WAAW,aAAa;cACvB,WAAW,aAAa;mBACnB,WAAW,aAAa;qBACtB,WAAW,aAAa;kBAC3B,WAAW,aAAa;wBAClB,WAAW,aAAa;;;iBAtBf;;;oBAEG;GAC3B,OAAO,EAAE,MAAM,QAAQ;GACvB,OAAO,EAAE,MAAM,QAAQ;GACvB,KAAK,EAAE,MAAM,QAAQ;GACrB,KAAK,EAAE,MAAM,QAAQ;GACrB,MAAM,EAAE,MAAM,QAAQ;GACtB,WAAW;IAAE,MAAM;IAAQ,WAAW;IAAc;GACpD,aAAa,EAAE,MAAM,QAAQ;GAC7B,UAAU,EAAE,MAAM,SAAS;GAC3B,gBAAgB;IAAE,MAAM;IAAQ,WAAW;IAAmB;GAC/D;;CAYD,CAASA,OAAQ,IAAI,YAAY;CACjC,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,eAAe,CAAC;CAE1E,UAA4B;CAC5B,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;EACxC,MAAM,SAAS,MAAKA,WAAY;AAEhC,QAAKC,SAAU,aAAa;GAC1B,kBAAkB;GAClB,uBAAuB,KAAK,cAA2B,qBAAqB;GAC5E,sBAAsB,KAAK;GAC3B,aAAa,MAAM,KAAK;GACxB,kBAAkB,KAAK;GACvB,kBAAkB,MAAKH,KAAM,iBAAiB,KAAK,MAAM;GACzD,sBAAsB,MAAKA,KAAM,gBAAgB;GACjD,2BAA2B,MAAKA,KAAM,qBAAqB;GAC3D,gBAAgB,YAAY;AAC1B,SAAK,QAAQ,MAAKA,KAAM,iBAAiB,QAAQ;AACjD,SAAK,cAAc,IAAI,YAAY,gBAAgB;KAAE,QAAQ,EAAE,OAAO,KAAK,OAAO;KAAE,SAAS;KAAM,CAAC,CAAC;;GAEvG,gBAAgB,YAAY;AAC1B,SAAK,QAAQ,MAAKA,KAAM,iBAAiB,QAAQ;AACjD,SAAK,cAAc,IAAI,YAAY,gBAAgB;KAAE,QAAQ,EAAE,OAAO,KAAK,OAAO;KAAE,SAAS;KAAM,CAAC,CAAC;;GAEvG,mBAAmB;AACjB,SAAK,cAAc,IAAI,YAAY,cAAc,EAAE,SAAS,MAAM,CAAC,CAAC;;GAEtE,iBAAiB;AACf,SAAK,cAAc,IAAI,YAAY,YAAY,EAAE,SAAS,MAAM,CAAC,CAAC;;GAErE,CAAC;AAEF,QAAKG,OAAQ,MAAM,gBAAgB,KAAK,eAAe,EAAE,EAAE,QAAQ,CAAC;AAGpE,OAAK,MAAM,cAAc;AACzB,OAAK,MAAM,aAAa;;CAG1B,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,QAAS,SAAS;AACvB,QAAKA,SAAU;AACf,QAAKD,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,UAAgC;AAC5D,QAAM,WAAW,SAAS;AAC1B,QAAKF,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,MAAKG,OAAS;AAEnB,QAAKH,KAAM,SAAS,MAAKG,OAAQ,MAAM,QAAQ;EAC/C,MAAM,QAAQ,MAAKH,KAAM,eAAe,KAAK,MAAM;EACnD,MAAM,UAAU,iBAAiB,MAAM;AAEvC,cAAY,MAAM,QAAQ;AAG1B,sBAAoB,MAAM,OAAO,gBAAgB;AAGjD,QAAKC,SAAU,SAAS;GACtB;GACA,cAAc;GACd,cAAc,MAAKD,KAAM,iBAAiB,MAAM,eAAe;GAC/D,YAAY,MAAKA,KAAM,SAAS,MAAM;GACtC,YAAY,MAAKG,OAAQ;GAC1B,CAAC"}
+{"version":3,"file":"slider-element.js","names":["#core","#provider","#disconnect","#slider"],"sources":["../../../../src/ui/slider/slider-element.ts"],"sourcesContent":["import { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createSlider,\n  getSliderCSSVars,\n  type SliderApi,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { applyStyles, isRTL } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderElement extends MediaElement {\n  static readonly tagName = 'media-slider';\n\n  static override properties = {\n    label: { type: String },\n    value: { type: Number },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    largeStep: { type: Number, attribute: 'large-step' },\n    orientation: { type: String },\n    disabled: { type: Boolean },\n    thumbAlignment: { type: String, attribute: 'thumb-alignment' },\n  } satisfies PropertyDeclarationMap<keyof SliderCore.Props>;\n\n  label = SliderCore.defaultProps.label;\n  value = SliderCore.defaultProps.value;\n  min = SliderCore.defaultProps.min;\n  max = SliderCore.defaultProps.max;\n  step = SliderCore.defaultProps.step;\n  largeStep = SliderCore.defaultProps.largeStep;\n  orientation = SliderCore.defaultProps.orientation;\n  disabled = SliderCore.defaultProps.disabled;\n  thumbAlignment = SliderCore.defaultProps.thumbAlignment;\n\n  readonly #core = new SliderCore();\n  readonly #provider = new ContextProvider(this, { context: sliderContext });\n\n  #slider: SliderApi | null = null;\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const signal = this.#disconnect.signal;\n\n    this.#slider = createSlider({\n      getElement: () => this,\n      getThumbElement: () => this.querySelector<HTMLElement>('media-slider-thumb'),\n      getOrientation: () => this.orientation,\n      isRTL: () => isRTL(this),\n      isDisabled: () => this.disabled,\n      getPercent: () => this.#core.percentFromValue(this.value),\n      getStepPercent: () => this.#core.getStepPercent(),\n      getLargeStepPercent: () => this.#core.getLargeStepPercent(),\n      onValueChange: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: this.value }, bubbles: true }));\n      },\n      onValueCommit: (percent) => {\n        this.value = this.#core.valueFromPercent(percent);\n        this.dispatchEvent(new CustomEvent('value-commit', { detail: { value: this.value }, bubbles: true }));\n      },\n      onDragStart: () => {\n        this.dispatchEvent(new CustomEvent('drag-start', { bubbles: true }));\n      },\n      onDragEnd: () => {\n        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true }));\n      },\n      adjustPercent: (raw, thumbSize, trackSize) => this.#core.adjustPercentForAlignment(raw, thumbSize, trackSize),\n    });\n\n    applyElementProps(this, this.#slider.rootProps, { signal });\n    this.#slider.input.subscribe(() => this.requestUpdate(), { signal });\n\n    // Prevent default touch gestures and text selection during interaction.\n    this.style.touchAction = 'none';\n    this.style.userSelect = 'none';\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#slider?.destroy();\n    super.destroyCallback();\n  }\n\n  protected override willUpdate(_changed: PropertyValues): void {\n    super.willUpdate(_changed);\n    this.#core.setProps(this);\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#slider) return;\n\n    this.#core.setInput(this.#slider.input.current);\n    const state = this.#core.getSliderState(this.value);\n\n    const cssVars = getSliderCSSVars(this.#slider.adjustForAlignment(state));\n\n    applyStyles(this, cssVars);\n\n    // Apply state data attributes to the root element.\n    applyStateDataAttrs(this, state, SliderDataAttrs);\n\n    // Provide context to child elements (thumb, value, track, etc.).\n    this.#provider.setValue({\n      state,\n      stateAttrMap: SliderDataAttrs,\n      pointerValue: this.#core.valueFromPercent(state.pointerPercent),\n      thumbAttrs: this.#core.getAttrs(state),\n      thumbProps: this.#slider.thumbProps,\n    });\n  }\n}\n"],"mappings":"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"}

package/dist/default/ui/slider/slider-preview-element.js

@@ -0,0 +1,51 @@
+import { MediaElement } from "../media-element.js";
+import { sliderContext } from "./context.js";
+import { applyStateDataAttrs, getSliderPreviewStyle } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+import { applyStyles } from "@videojs/utils/dom";
+
+//#region src/ui/slider/slider-preview-element.ts
+var SliderPreviewElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.overflow = "clamp";
+	}
+	static {
+		this.tagName = "media-slider-preview";
+	}
+	static {
+		this.properties = { overflow: { type: String } };
+	}
+	#ctx = new ContextConsumer(this, {
+		context: sliderContext,
+		subscribe: true
+	});
+	#resizeObserver = null;
+	#width = 0;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#resizeObserver = new ResizeObserver(([entry]) => {
+			this.#width = entry.contentRect.width;
+			this.#applyPosition();
+		});
+		this.#resizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = null;
+	}
+	#applyPosition() {
+		applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+		this.#applyPosition();
+	}
+};
+
+//#endregion
+export { SliderPreviewElement };
+//# sourceMappingURL=slider-preview-element.js.map

package/dist/default/ui/slider/slider-preview-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-preview-element.js","names":["#ctx","#resizeObserver","#width","#applyPosition"],"sources":["../../../../src/ui/slider/slider-preview-element.ts"],"sourcesContent":["import type { SliderPreviewOverflow } from '@videojs/core/dom';\nimport { applyStateDataAttrs, getSliderPreviewStyle } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { applyStyles } from '@videojs/utils/dom';\n\nimport { MediaElement } from '../media-element';\nimport { sliderContext } from './context';\n\nexport class SliderPreviewElement extends MediaElement {\n  static readonly tagName = 'media-slider-preview';\n\n  static override properties = {\n    overflow: { type: String },\n  } satisfies PropertyDeclarationMap<'overflow'>;\n\n  overflow: SliderPreviewOverflow = 'clamp';\n\n  readonly #ctx = new ContextConsumer(this, {\n    context: sliderContext,\n    subscribe: true,\n  });\n\n  #resizeObserver: ResizeObserver | null = null;\n  #width = 0;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#resizeObserver = new ResizeObserver(([entry]) => {\n      this.#width = entry!.contentRect.width;\n      this.#applyPosition();\n    });\n\n    this.#resizeObserver.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#resizeObserver?.disconnect();\n    this.#resizeObserver = null;\n  }\n\n  #applyPosition(): void {\n    applyStyles(this, getSliderPreviewStyle(this.#width, this.overflow));\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n\n    this.#applyPosition();\n  }\n}\n"],"mappings":";;;;;;;AASA,IAAa,uBAAb,cAA0C,aAAa;;;kBAOnB;;;iBANR;;;oBAEG,EAC3B,UAAU,EAAE,MAAM,QAAQ,EAC3B;;CAID,CAASA,MAAO,IAAI,gBAAgB,MAAM;EACxC,SAAS;EACT,WAAW;EACZ,CAAC;CAEF,kBAAyC;CACzC,SAAS;CAET,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,iBAAkB,IAAI,gBAAgB,CAAC,WAAW;AACrD,SAAKC,QAAS,MAAO,YAAY;AACjC,SAAKC,eAAgB;IACrB;AAEF,QAAKF,eAAgB,QAAQ,KAAK;;CAGpC,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKA,gBAAiB,YAAY;AAClC,QAAKA,iBAAkB;;CAGzB,iBAAuB;AACrB,cAAY,MAAM,sBAAsB,MAAKC,OAAQ,KAAK,SAAS,CAAC;;CAGtE,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,MAAM,MAAKF,IAAK;AACtB,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa;AAE/D,QAAKG,eAAgB"}