@videojs/html 10.0.0-alpha.7 → 10.0.0-beta.1

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

@@ -0,0 +1,20 @@
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/minimal/tailwind/components/slider.js
+const slider = {
+	root: cn("group/slider relative flex flex-1 items-center justify-center rounded-full outline-none", "data-[orientation=horizontal]:min-w-20 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-5", "data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-[4.5rem]"),
+	track: cn("relative isolate overflow-hidden bg-current/20 rounded-[inherit] select-none", "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-0.75", "data-[orientation=vertical]:w-0.75 data-[orientation=vertical]:h-full"),
+	fill: {
+		base: "absolute rounded-[inherit] pointer-events-none",
+		fill: cn("bg-current", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:w-(--media-slider-fill,0)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:h-(--media-slider-fill,0)"),
+		buffer: cn("bg-current/20 duration-250 ease-out", "data-[orientation=horizontal]:inset-y-0 data-[orientation=horizontal]:left-0", "data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:w-(--media-slider-buffer,0)", "data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:bottom-0", "data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:h-(--media-slider-buffer)")
+	},
+	thumb: {
+		base: cn("z-10 absolute size-3 -translate-x-1/2 -translate-y-1/2", "bg-current rounded-full", "shadow-[0_0_0_1px_var(--media-controls-current-shadow-color-subtle,oklch(0_0_0/0.1)),0_1px_3px_0_oklch(0_0_0/0.15),0_1px_2px_-1px_oklch(0_0_0/0.15)]", "transition-[opacity,scale,outline-offset] duration-150 ease-out select-none", "outline-2 outline-transparent -outline-offset-2", "focus-visible:outline-current focus-visible:outline-offset-2", "data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:left-(--media-slider-fill,0)", "data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:top-[calc(100%-var(--media-slider-fill,0))]"),
+		interactive: 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")
+	}
+};
+
+//#endregion
+export { slider };
+//# sourceMappingURL=slider.js.map

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

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

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

@@ -0,0 +1,14 @@
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/minimal/tailwind/components/time.js
+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"),
+	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")
+};
+
+//#endregion
+export { time };
+//# sourceMappingURL=time.js.map

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

@@ -0,0 +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"}

package/dist/dev/skins/dist/default/minimal/tailwind/components/tooltip-state.js

@@ -0,0 +1,28 @@
+//#region ../skins/dist/default/minimal/tailwind/components/tooltip-state.js
+const tooltipState = {
+	play: {
+		wrapper: "contents group/play-tip",
+		replay: "hidden group-has-data-ended/play-tip:block",
+		play: "hidden group-[:has([data-paused]):not(:has([data-ended]))]/play-tip:block",
+		pause: "hidden group-[:not(:has([data-paused])):not(:has([data-ended]))]/play-tip:block"
+	},
+	fullscreen: {
+		wrapper: "contents group/fullscreen-tip",
+		enter: "hidden group-[:not(:has([data-fullscreen]))]/fullscreen-tip:block",
+		exit: "hidden group-has-data-fullscreen/fullscreen-tip:block"
+	},
+	captions: {
+		wrapper: "contents group/captions-tip",
+		enable: "hidden group-[:not(:has([data-active]))]/captions-tip:block",
+		disable: "hidden group-has-data-active/captions-tip:block"
+	},
+	pip: {
+		wrapper: "contents group/pip-tip",
+		enter: "hidden group-[:not(:has([data-pip]))]/pip-tip:block",
+		exit: "hidden group-has-data-pip/pip-tip:block"
+	}
+};
+
+//#endregion
+export { tooltipState };
+//# sourceMappingURL=tooltip-state.js.map

package/dist/dev/skins/dist/default/minimal/tailwind/components/tooltip-state.js.map

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

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

@@ -0,0 +1,44 @@
+import { controls as controls$1 } from "./components/controls.js";
+import { popup as popup$1 } from "./components/popup.js";
+import { root as root$1 } from "./components/root.js";
+import { bufferingIndicator } from "./components/buffering.js";
+import { button } from "./components/button.js";
+import { buttonGroup } from "./components/button-group.js";
+import { error } from "./components/error.js";
+import { icon, iconContainer, iconFlipped } from "./components/icon.js";
+import { seek } from "./components/seek.js";
+import { slider as slider$1 } from "./components/slider.js";
+import { time } from "./components/time.js";
+import { iconState } from "./components/icon-state.js";
+import { overlay } from "./components/overlay.js";
+import { tooltipState } from "./components/tooltip-state.js";
+import { cn } from "@videojs/utils/style";
+
+//#region ../skins/dist/default/minimal/tailwind/video.tailwind.js
+const root = (isShadowDOM) => cn(root$1, "bg-black", "after:absolute after:pointer-events-none after:rounded-[inherit] after:z-10", "after:inset-0 after:ring-1 after:ring-inset after:ring-black/15", "dark:after:ring-white/15", {
+	"[&_::slotted(video)]:block [&_::slotted(video)]:w-full [&_::slotted(video)]:h-full [&_::slotted(video)]:rounded-(--media-border-radius,0.75rem)": isShadowDOM,
+	"[&_video]:block [&_video]:w-full [&_video]:h-full [&_video]:rounded-[inherit]": !isShadowDOM
+}, "[&>img]:absolute [&>img]:inset-0 [&>img]:w-full [&>img]:h-full [&>img]:rounded-[inherit]", "[&>img]:object-cover [&>img]:pointer-events-none", "[&>img]:transition-opacity [&>img]:duration-250", "[&>img:not([data-visible])]:opacity-0", "[--media-caption-track-delay:600ms]", "[--media-caption-track-y:-0.5rem]", "has-[[data-controls][data-visible]]:[--media-caption-track-delay:25ms]", "has-[[data-controls][data-visible]]:[--media-caption-track-y:-3.5rem]", !isShadowDOM ? [
+	"[&_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");
+const controls = cn(controls$1, "absolute bottom-0 inset-x-0", "pt-8 px-1.5 pb-1.5 gap-2", "text-white z-10", "will-change-[translate,filter,opacity]", "transition-[translate,filter,opacity] ease-out", "delay-0 duration-75", "not-data-visible:opacity-0 not-data-visible:translate-y-full", "not-data-visible:blur-sm not-data-visible:pointer-events-none", "not-data-visible:delay-500 not-data-visible:duration-500", "motion-reduce:not-data-visible:duration-100", "motion-reduce:not-data-visible:translate-y-0", "motion-reduce:not-data-visible:blur-none motion-reduce:not-data-visible:scale-100", "@sm/media-root:pt-10 @sm/media-root:px-3 @sm/media-root:pb-3", "@sm/media-root:gap-3.5");
+const slider = {
+	...slider$1,
+	track: cn(slider$1.track, "shadow-[0_0_0_1px_oklch(0_0_0/0.05)]")
+};
+const popup = {
+	...popup$1,
+	volume: cn("[--media-popover-side-offset:0.5rem] p-1 bg-transparent")
+};
+
+//#endregion
+export { controls, popup, root, slider };
+//# sourceMappingURL=video.tailwind.js.map

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

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

package/dist/dev/store/container-mixin.d.ts

@@ -1,5 +1,5 @@
-import { MediaElementConstructor } from "../ui/media-element.js";
 import { PlayerContext } from "../player/context.js";
+import { MediaElementConstructor } from "../ui/media-element.js";
 import { PlayerConsumerConstructor } from "./types.js";
 import { PlayerStore } from "@videojs/core/dom";
 

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

@@ -34,20 +34,33 @@ function createContainerMixin(context) {
 				});
 				this.#observer.observe(this, {
 					childList: true,
-					subtree: true
+					subtree: true,
+					attributes: true,
+					attributeFilter: ["data-media-element"]
 				});
+				this.addEventListener("slotchange", this.#onSlotChange);
 				this.#attachMedia();
 			}
 			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 (el instanceof HTMLMediaElement) return el;
+				return null;
+			}
 			#attachMedia() {
 				const store = this.#contextStore ?? this.store;
 				if (!store) return;
-				const media = this.querySelector("video, audio");
+				const media = this.querySelector("video, audio, [data-media-element]") ?? this.#getSlottedMedia();
 				if (!media) {
 					this.#detach();
 					this.#detach = noop;
@@ -68,9 +81,10 @@ function createContainerMixin(context) {
 	};
 }
 function isMediaNode(node) {
-	return node instanceof HTMLMediaElement;
+	return node instanceof HTMLMediaElement || node instanceof Element && node.hasAttribute("data-media-element");
 }
 function hasMediaNode(record) {
+	if (record.type === "attributes" && record.target instanceof Element) return record.target.hasAttribute("data-media-element");
 	for (const node of record.addedNodes) if (isMediaNode(node)) return true;
 	for (const node of record.removedNodes) if (isMediaNode(node)) return true;
 	return false;

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

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

package/dist/dev/store/provider-mixin.d.ts

@@ -1,5 +1,5 @@
-import { MediaElementConstructor } from "../ui/media-element.js";
 import { PlayerContext } from "../player/context.js";
+import { MediaElementConstructor } from "../ui/media-element.js";
 import { PlayerProviderConstructor } from "./types.js";
 import { PlayerStore } from "@videojs/core/dom";
 

package/dist/dev/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/dev/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/dev/ui/alert-dialog/alert-dialog-close-element.d.ts

@@ -0,0 +1,20 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+
+//#region src/ui/alert-dialog/alert-dialog-close-element.d.ts
+declare class AlertDialogCloseElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-alert-dialog-close";
+  static properties: {
+    disabled: {
+      type: BooleanConstructor;
+    };
+  };
+  disabled: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { AlertDialogCloseElement };
+//# sourceMappingURL=alert-dialog-close-element.d.ts.map

package/dist/dev/ui/alert-dialog/alert-dialog-close-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-close-element.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-close-element.ts"],"mappings":";;;;cAOa,uBAAA,SAAgC,YAAA;EAAA;kBAC3B,OAAA;EAAA,OAEA,UAAA;;;;;EAIhB,QAAA;EAMS,iBAAA,CAAA;EAYA,oBAAA,CAAA;EAAA,UAMU,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

package/dist/dev/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/dev/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/dev/ui/alert-dialog/alert-dialog-description-element.d.ts

@@ -0,0 +1,17 @@
+import { AlertDialogContextValue } from "./context.js";
+import { ContextPartElement } from "../context-part-element.js";
+import { ContextConsumer } from "@videojs/element/context";
+import { PropertyValues } from "@videojs/element";
+import { AlertDialogState } from "@videojs/core";
+
+//#region src/ui/alert-dialog/alert-dialog-description-element.d.ts
+declare class AlertDialogDescriptionElement extends ContextPartElement<AlertDialogState> {
+  static readonly tagName = "media-alert-dialog-description";
+  protected readonly consumer: ContextConsumer<{
+    __context__: AlertDialogContextValue;
+  }, this>;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { AlertDialogDescriptionElement };
+//# sourceMappingURL=alert-dialog-description-element.d.ts.map

package/dist/dev/ui/alert-dialog/alert-dialog-description-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-description-element.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-description-element.ts"],"mappings":";;;;;;;cAOa,6BAAA,SAAsC,kBAAA,CAAmB,gBAAA;EAAA,gBACpD,OAAA;EAAA,mBAEG,QAAA,EAAQ,eAAA;iBAHyD,uBAAA;EAAA;EAAA,UAKjE,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

package/dist/dev/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/dev/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/dev/ui/alert-dialog/alert-dialog-element.d.ts

@@ -0,0 +1,22 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+
+//#region src/ui/alert-dialog/alert-dialog-element.d.ts
+declare class AlertDialogElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-alert-dialog";
+  static properties: {
+    open: {
+      type: BooleanConstructor;
+    };
+  };
+  open: boolean;
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { AlertDialogElement };
+//# sourceMappingURL=alert-dialog-element.d.ts.map

package/dist/dev/ui/alert-dialog/alert-dialog-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-element.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-element.ts"],"mappings":";;;;cAiBa,kBAAA,SAA2B,YAAA;EAAA;kBACtB,OAAA;EAAA,OAEA,UAAA;;;;;EAIhB,IAAA;;EAgBS,iBAAA,CAAA;EAqBA,oBAAA,CAAA;EAAA,UAMU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAgBpB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

package/dist/dev/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/dev/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/dev/ui/alert-dialog/alert-dialog-title-element.d.ts

@@ -0,0 +1,17 @@
+import { AlertDialogContextValue } from "./context.js";
+import { ContextPartElement } from "../context-part-element.js";
+import { ContextConsumer } from "@videojs/element/context";
+import { PropertyValues } from "@videojs/element";
+import { AlertDialogState } from "@videojs/core";
+
+//#region src/ui/alert-dialog/alert-dialog-title-element.d.ts
+declare class AlertDialogTitleElement extends ContextPartElement<AlertDialogState> {
+  static readonly tagName = "media-alert-dialog-title";
+  protected readonly consumer: ContextConsumer<{
+    __context__: AlertDialogContextValue;
+  }, this>;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { AlertDialogTitleElement };
+//# sourceMappingURL=alert-dialog-title-element.d.ts.map

package/dist/dev/ui/alert-dialog/alert-dialog-title-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog-title-element.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/alert-dialog-title-element.ts"],"mappings":";;;;;;;cAOa,uBAAA,SAAgC,kBAAA,CAAmB,gBAAA;EAAA,gBAC9C,OAAA;EAAA,mBAEG,QAAA,EAAQ,eAAA;iBAHmD,uBAAA;EAAA;EAAA,UAK3D,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

package/dist/dev/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/dev/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/dev/ui/alert-dialog/context.d.ts

@@ -0,0 +1,14 @@
+import { AlertDialogState, StateAttrMap } from "@videojs/core";
+
+//#region src/ui/alert-dialog/context.d.ts
+interface AlertDialogContextValue {
+  state: AlertDialogState;
+  stateAttrMap: StateAttrMap<AlertDialogState>;
+  close: () => void;
+}
+declare const alertDialogContext: {
+  __context__: AlertDialogContextValue;
+};
+//#endregion
+export { AlertDialogContextValue, alertDialogContext };
+//# sourceMappingURL=context.d.ts.map

package/dist/dev/ui/alert-dialog/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/context.ts"],"mappings":";;;UAGiB,uBAAA;EACf,KAAA,EAAO,gBAAA;EACP,YAAA,EAAc,YAAA,CAAa,gBAAA;EAC3B,KAAA;AAAA;AAAA,cAKW,kBAAA;eAAqF,uBAAA;AAAA"}

package/dist/dev/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/dev/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"}