@videojs/html 10.0.0-beta.2 → 10.0.0-beta.21

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

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

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

@@ -1,17 +1,30 @@
-import { PlayerContext } from "../player/context.js";
 import { MediaElementConstructor } from "../ui/media-element.js";
+import { ContainerContext, MediaContext, PlayerContext } from "../player/context.js";
 import { PlayerProviderConstructor } from "./types.js";
 import { PlayerStore } from "@videojs/core/dom";
 
 //#region src/store/provider-mixin.d.ts
+interface ProviderMixinConfig<Store extends PlayerStore> {
+  playerContext: PlayerContext<Store>;
+  mediaContext: MediaContext;
+  containerContext: ContainerContext;
+  factory: () => Store;
+}
 type ProviderMixin<Store extends PlayerStore> = <Class extends MediaElementConstructor>(BaseClass: Class) => Class & PlayerProviderConstructor<Store>;
 /**
- * Create a mixin that provides player context to descendant elements.
+ * Create a mixin that provides player context to descendant elements and
+ * owns the `store.attach()` lifecycle.
  *
- * @param context - Player context to provide to descendants.
- * @param factory - Factory function that creates a store instance.
+ * Media and container elements register themselves via media/container
+ * contexts that carry both the current value and a setter. When a media
+ * element is available, the provider calls `store.attach({ media, container })`.
+ *
+ * As a fallback for plain `<video>`/`<audio>` that can't consume context,
+ * the provider queries its subtree after a microtask.
+ *
+ * @param config - Provider configuration with contexts and store factory.
  */
-declare function createProviderMixin<Store extends PlayerStore>(context: PlayerContext<Store>, factory: () => Store): ProviderMixin<Store>;
+declare function createProviderMixin<Store extends PlayerStore>(config: ProviderMixinConfig<Store>): ProviderMixin<Store>;
 //#endregion
-export { ProviderMixin, createProviderMixin };
+export { ProviderMixin, ProviderMixinConfig, createProviderMixin };
 //# sourceMappingURL=provider-mixin.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"provider-mixin.d.ts","names":[],"sources":["../../../src/store/provider-mixin.ts"],"mappings":";;;;;;KAOY,aAAA,eAA4B,WAAA,mBAA8B,uBAAA,EACpE,SAAA,EAAW,KAAA,KACR,KAAA,GAAQ,yBAAA,CAA0B,KAAA;;AAFvC;;;;;iBAUgB,mBAAA,eAAkC,WAAA,CAAA,CAChD,OAAA,EAAS,aAAA,CAAc,KAAA,GACvB,OAAA,QAAe,KAAA,GACd,aAAA,CAAc,KAAA"}
+{"version":3,"file":"provider-mixin.d.ts","names":[],"sources":["../../../src/store/provider-mixin.ts"],"mappings":";;;;;;UAOiB,mBAAA,eAAkC,WAAA;EACjD,aAAA,EAAe,aAAA,CAAc,KAAA;EAC7B,YAAA,EAAc,YAAA;EACd,gBAAA,EAAkB,gBAAA;EAClB,OAAA,QAAe,KAAA;AAAA;AAAA,KAGL,aAAA,eAA4B,WAAA,mBAA8B,uBAAA,EACpE,SAAA,EAAW,KAAA,KACR,KAAA,GAAQ,yBAAA,CAA0B,KAAA;;;;;;;;;;;;;;iBAevB,mBAAA,eAAkC,WAAA,CAAA,CAChD,MAAA,EAAQ,mBAAA,CAAoB,KAAA,IAC3B,aAAA,CAAc,KAAA"}

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

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

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 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"}
+{"version":3,"file":"provider-mixin.js","names":["#media","#mediaProvider","#setMedia","#tryAttach","#container","#containerProvider","#setContainer","#store","#playerProvider","#queueFallbackDiscovery","#detachStore","#detach","#fallbackQueued"],"sources":["../../../src/store/provider-mixin.ts"],"sourcesContent":["import type { Media, MediaContainer, PlayerStore, PlayerTarget } 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 { ContainerContext, MediaContext, PlayerContext } from '../player/context';\nimport type { PlayerProvider, PlayerProviderConstructor } from './types';\n\nexport interface ProviderMixinConfig<Store extends PlayerStore> {\n  playerContext: PlayerContext<Store>;\n  mediaContext: MediaContext;\n  containerContext: ContainerContext;\n  factory: () => Store;\n}\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 and\n * owns the `store.attach()` lifecycle.\n *\n * Media and container elements register themselves via media/container\n * contexts that carry both the current value and a setter. When a media\n * element is available, the provider calls `store.attach({ media, container })`.\n *\n * As a fallback for plain `<video>`/`<audio>` that can't consume context,\n * the provider queries its subtree after a microtask.\n *\n * @param config - Provider configuration with contexts and store factory.\n */\nexport function createProviderMixin<Store extends PlayerStore>(\n  config: ProviderMixinConfig<Store>\n): ProviderMixin<Store> {\n  return <Class extends MediaElementConstructor>(BaseClass: Class) => {\n    class PlayerProviderElement extends BaseClass implements PlayerProvider<Store> {\n      #store: Store | null = config.factory();\n      #detach: (() => void) | null = null;\n      #media: Media | null = null;\n      #container: MediaContainer | null = null;\n      #fallbackQueued = false;\n\n      #setMedia = (media: Media | null): void => {\n        if (this.#media === media) return;\n        this.#media = media;\n        this.#mediaProvider.setValue({ media, setMedia: this.#setMedia });\n        this.#tryAttach();\n      };\n\n      #setContainer = (container: MediaContainer | null): void => {\n        if (this.#container === container) return;\n        this.#container = container;\n        this.#containerProvider.setValue({ container, setContainer: this.#setContainer });\n        this.#tryAttach();\n      };\n\n      #playerProvider = new ContextProvider(this, {\n        context: config.playerContext,\n        initialValue: this.store,\n      });\n\n      #mediaProvider = new ContextProvider(this, {\n        context: config.mediaContext,\n        initialValue: { media: this.#media, setMedia: this.#setMedia },\n      });\n\n      #containerProvider = new ContextProvider(this, {\n        context: config.containerContext,\n        initialValue: { container: this.#container, setContainer: this.#setContainer },\n      });\n\n      get store(): Store {\n        if (isNull(this.#store)) {\n          this.#store = config.factory();\n        }\n\n        return this.#store;\n      }\n\n      override connectedCallback() {\n        super.connectedCallback();\n        this.#playerProvider.setValue(this.store);\n        this.#mediaProvider.setValue({ media: this.#media, setMedia: this.#setMedia });\n        this.#containerProvider.setValue({ container: this.#container, setContainer: this.#setContainer });\n        this.#tryAttach();\n        this.#queueFallbackDiscovery();\n      }\n\n      override disconnectedCallback() {\n        super.disconnectedCallback();\n        this.#detachStore();\n      }\n\n      override destroyCallback() {\n        this.#detachStore();\n        this.#store?.destroy();\n        this.#store = null;\n        super.destroyCallback();\n      }\n\n      #tryAttach(): void {\n        const store = this.#store;\n        if (!store) return;\n\n        if (!this.#media) {\n          this.#detachStore();\n          return;\n        }\n\n        const target: PlayerTarget = {\n          media: this.#media,\n          container: this.#container,\n        };\n\n        const hasMediaChanged = store.target?.media !== target.media;\n        const hasContainerChanged = store.target?.container !== target.container;\n\n        if (hasMediaChanged || hasContainerChanged) {\n          this.#detachStore();\n          this.#detach = store.attach(target);\n        }\n      }\n\n      #detachStore(): void {\n        this.#detach?.();\n        this.#detach = null;\n      }\n\n      #queueFallbackDiscovery(): void {\n        if (this.#media || this.#fallbackQueued) return;\n        this.#fallbackQueued = true;\n\n        queueMicrotask(() => {\n          this.#fallbackQueued = false;\n\n          // Context already registered media — skip fallback.\n          if (this.#media) return;\n\n          const media = this.querySelector<HTMLMediaElement>('video, audio');\n          if (media) {\n            this.#setMedia(media);\n          }\n        });\n      }\n    }\n\n    return PlayerProviderElement;\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AA+BA,SAAgB,oBACd,QACsB;AACtB,SAA+C,cAAqB;EAClE,MAAM,8BAA8B,UAA2C;GAC7E,SAAuB,OAAO,SAAS;GACvC,UAA+B;GAC/B,SAAuB;GACvB,aAAoC;GACpC,kBAAkB;GAElB,aAAa,UAA8B;AACzC,QAAI,MAAA,UAAgB,MAAO;AAC3B,UAAA,QAAc;AACd,UAAA,cAAoB,SAAS;KAAE;KAAO,UAAU,MAAA;KAAgB,CAAC;AACjE,UAAA,WAAiB;;GAGnB,iBAAiB,cAA2C;AAC1D,QAAI,MAAA,cAAoB,UAAW;AACnC,UAAA,YAAkB;AAClB,UAAA,kBAAwB,SAAS;KAAE;KAAW,cAAc,MAAA;KAAoB,CAAC;AACjF,UAAA,WAAiB;;GAGnB,kBAAkB,IAAI,gBAAgB,MAAM;IAC1C,SAAS,OAAO;IAChB,cAAc,KAAK;IACpB,CAAC;GAEF,iBAAiB,IAAI,gBAAgB,MAAM;IACzC,SAAS,OAAO;IAChB,cAAc;KAAE,OAAO,MAAA;KAAa,UAAU,MAAA;KAAgB;IAC/D,CAAC;GAEF,qBAAqB,IAAI,gBAAgB,MAAM;IAC7C,SAAS,OAAO;IAChB,cAAc;KAAE,WAAW,MAAA;KAAiB,cAAc,MAAA;KAAoB;IAC/E,CAAC;GAEF,IAAI,QAAe;AACjB,QAAI,OAAO,MAAA,MAAY,CACrB,OAAA,QAAc,OAAO,SAAS;AAGhC,WAAO,MAAA;;GAGT,oBAA6B;AAC3B,UAAM,mBAAmB;AACzB,UAAA,eAAqB,SAAS,KAAK,MAAM;AACzC,UAAA,cAAoB,SAAS;KAAE,OAAO,MAAA;KAAa,UAAU,MAAA;KAAgB,CAAC;AAC9E,UAAA,kBAAwB,SAAS;KAAE,WAAW,MAAA;KAAiB,cAAc,MAAA;KAAoB,CAAC;AAClG,UAAA,WAAiB;AACjB,UAAA,wBAA8B;;GAGhC,uBAAgC;AAC9B,UAAM,sBAAsB;AAC5B,UAAA,aAAmB;;GAGrB,kBAA2B;AACzB,UAAA,aAAmB;AACnB,UAAA,OAAa,SAAS;AACtB,UAAA,QAAc;AACd,UAAM,iBAAiB;;GAGzB,aAAmB;IACjB,MAAM,QAAQ,MAAA;AACd,QAAI,CAAC,MAAO;AAEZ,QAAI,CAAC,MAAA,OAAa;AAChB,WAAA,aAAmB;AACnB;;IAGF,MAAM,SAAuB;KAC3B,OAAO,MAAA;KACP,WAAW,MAAA;KACZ;IAED,MAAM,kBAAkB,MAAM,QAAQ,UAAU,OAAO;IACvD,MAAM,sBAAsB,MAAM,QAAQ,cAAc,OAAO;AAE/D,QAAI,mBAAmB,qBAAqB;AAC1C,WAAA,aAAmB;AACnB,WAAA,SAAe,MAAM,OAAO,OAAO;;;GAIvC,eAAqB;AACnB,UAAA,UAAgB;AAChB,UAAA,SAAe;;GAGjB,0BAAgC;AAC9B,QAAI,MAAA,SAAe,MAAA,eAAsB;AACzC,UAAA,iBAAuB;AAEvB,yBAAqB;AACnB,WAAA,iBAAuB;AAGvB,SAAI,MAAA,MAAa;KAEjB,MAAM,QAAQ,KAAK,cAAgC,eAAe;AAClE,SAAI,MACF,OAAA,SAAe,MAAM;MAEvB;;;AAIN,SAAO"}

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

@@ -2,7 +2,6 @@ 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) {
@@ -40,7 +39,7 @@ var AlertDialogCloseElement = class extends MediaElement {
 		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

@@ -1 +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"}
+{"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,OAAgB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAoB,WAAW;EAAM,CAAC;CAE3F,cAAsC;CAEtC,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,QAAA,aAAmB,IAAI,iBAAiB;EAExC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,MAAA,IAAU,OAAO,OAAO;GAC1C,kBAAkB,KAAK;GACxB,CAAC;AAEF,oBAAkB,MAAM,aAAa,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CAAC;;CAG3E,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;CAGrB,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EACtB,MAAM,MAAM,MAAA,IAAU;AACtB,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}

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

@@ -1,7 +1,6 @@
 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) {
@@ -20,7 +19,7 @@ var AlertDialogDescriptionElement = class extends ContextPartElement {
 		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

@@ -1 +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"}
+{"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,OAA0B,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.map

@@ -1 +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"}
+{"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;EAsBA,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

@@ -4,7 +4,6 @@ import { applyElementProps, applyStateDataAttrs, createAlertDialog, createTransi
 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 {
@@ -28,6 +27,7 @@ var AlertDialogElement = class extends MediaElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.destroyed) return;
 		this.#dialog = createAlertDialog({
 			transition: createTransition(),
 			onOpenChange: (nextOpen) => {
@@ -67,7 +67,7 @@ var AlertDialogElement = class extends MediaElement {
 		});
 	}
 };
-
 //#endregion
 export { AlertDialogElement };
+
 //# sourceMappingURL=alert-dialog-element.js.map

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

@@ -1 +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"}
+{"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    if (this.destroyed) return;\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,QAAiB,IAAI,iBAAiB;CACtC,YAAqB,IAAI,gBAAgB,MAAM,EAAE,SAAS,oBAAoB,CAAC;CAC/E,WAAoB,0BAA0B;CAC9C,iBAA0B,yBAAyB;CAEnD,UAAiC;CACjC,YAAyD;CAEzD,cAAc;AACZ,SAAO;cAXF;AAYL,QAAA,KAAW,WAAW,MAAA,QAAc;AACpC,QAAA,KAAW,iBAAiB,MAAA,cAAoB;;CAGlD,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,QAAA,SAAe,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,QAAA,OAAa,WAAW,KAAK;AAE7B,MAAI,MAAA,SACF,OAAA,SAAe,MAAM,MAAA,OAAa,MAAM;MAExC,OAAA,WAAiB,IAAI,mBAAmB,MAAM,MAAA,OAAa,MAAM;;CAIrE,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,QAAc,SAAS;AACvB,QAAA,SAAe;;CAGjB,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AAGzB,MAAI,MAAA,UAAgB,QAAQ,IAAI,OAAO,EAAE;GACvC,MAAM,EAAE,QAAQ,cAAc,MAAA,OAAa,MAAM;AACjD,OAAI,KAAK,SAAS,UAChB,KAAI,KAAK,KACP,OAAA,OAAa,MAAM;OAEnB,OAAA,OAAa,OAAO;;;CAM5B,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,MAAA,OAAc;EAEnB,MAAM,QAAQ,MAAA,OAAa,MAAM;AACjC,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAEnC,oBAAkB,MAAM,MAAA,KAAW,SAAS,MAAM,CAAC;AACnD,sBAAoB,MAAM,OAAO,qBAAqB;AAEtD,QAAA,SAAe,SAAS;GACtB;GACA,cAAc;GACd,aAAa,MAAA,QAAc,OAAO;GACnC,CAAC"}

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

@@ -1,7 +1,6 @@
 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) {
@@ -20,7 +19,7 @@ var AlertDialogTitleElement = class extends ContextPartElement {
 		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

@@ -1 +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"}
+{"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,OAA0B,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.js

@@ -1,9 +1,6 @@
 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);
-
+const alertDialogContext = createContext(Symbol("@videojs/alert-dialog"));
 //#endregion
 export { alertDialogContext };
+
 //# sourceMappingURL=context.js.map

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

@@ -1 +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"}
+{"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":";AAWA,MAAa,qBAAqB,cAFD,OAAO,wBAAwB,CAEkC"}

package/dist/dev/ui/buffering-indicator/buffering-indicator-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buffering-indicator-element.d.ts","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator-element.ts"],"mappings":";;;;cAQa,yBAAA,SAAkC,YAAA;EAAA;kBAC7B,OAAA;EAAA,OAEA,UAAA;;;;;EAIhB,KAAA;EAOS,iBAAA,CAAA;EAcA,oBAAA,CAAA;EAAA,UAMU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}
+{"version":3,"file":"buffering-indicator-element.d.ts","names":[],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator-element.ts"],"mappings":";;;;cAQa,yBAAA,SAAkC,YAAA;EAAA;kBAC7B,OAAA;EAAA,OAEA,UAAA;;;;;EAIhB,KAAA;EAOS,iBAAA,CAAA;EAeA,oBAAA,CAAA;EAAA,UAMU,UAAA,CAAW,OAAA,EAAS,cAAA;EAAA,UAKpB,MAAA,CAAO,OAAA,EAAS,cAAA;AAAA"}

package/dist/dev/ui/buffering-indicator/buffering-indicator-element.js

@@ -3,7 +3,6 @@ import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
 import { applyStateDataAttrs, logMissingFeature, selectPlayback } from "@videojs/core/dom";
 import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from "@videojs/core";
-
 //#region src/ui/buffering-indicator/buffering-indicator-element.ts
 var BufferingIndicatorElement = class extends MediaElement {
 	constructor(..._args) {
@@ -21,6 +20,7 @@ var BufferingIndicatorElement = class extends MediaElement {
 	#disconnect = null;
 	connectedCallback() {
 		super.connectedCallback();
+		if (this.destroyed) return;
 		this.#disconnect = new AbortController();
 		this.#core.state.subscribe(() => this.requestUpdate(), { signal: this.#disconnect.signal });
 		if (!this.#state.value) logMissingFeature(this.localName, this.#state.displayName);
@@ -42,7 +42,7 @@ var BufferingIndicatorElement = class extends MediaElement {
 		applyStateDataAttrs(this, this.#core.state.current, BufferingIndicatorDataAttrs);
 	}
 };
-
 //#endregion
 export { BufferingIndicatorElement };
+
 //# sourceMappingURL=buffering-indicator-element.js.map

package/dist/dev/ui/buffering-indicator/buffering-indicator-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"buffering-indicator-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator-element.ts"],"sourcesContent":["import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class BufferingIndicatorElement extends MediaElement {\n  static readonly tagName = 'media-buffering-indicator';\n\n  static override properties = {\n    delay: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof BufferingIndicatorCore.Props>;\n\n  delay = BufferingIndicatorCore.defaultProps.delay;\n\n  readonly #core = new BufferingIndicatorCore();\n  readonly #state = new PlayerController(this, playerContext, selectPlayback);\n\n  #disconnect: AbortController | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#disconnect = new AbortController();\n\n    this.#core.state.subscribe(() => this.requestUpdate(), {\n      signal: this.#disconnect.signal,\n    });\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\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\n    const media = this.#state.value;\n\n    if (!media) return;\n\n    this.#core.update(media);\n    applyStateDataAttrs(this, this.#core.state.current, BufferingIndicatorDataAttrs);\n  }\n}\n"],"mappings":";;;;;;;AAQA,IAAa,4BAAb,cAA+C,aAAa;;;eAOlD,uBAAuB,aAAa;;;iBANlB;;;oBAEG,EAC3B,OAAO,EAAE,MAAM,QAAQ,EACxB;;CAID,CAASA,OAAQ,IAAI,wBAAwB;CAC7C,CAASC,QAAS,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,cAAsC;CAEtC,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,QAAKC,aAAc,IAAI,iBAAiB;AAExC,QAAKF,KAAM,MAAM,gBAAgB,KAAK,eAAe,EAAE,EACrD,QAAQ,MAAKE,WAAY,QAC1B,CAAC;AAEF,MAAe,CAAC,MAAKD,MAAO,MAC1B,mBAAkB,KAAK,WAAW,MAAKA,MAAO,YAAa;;CAI/D,AAAS,uBAA6B;AACpC,QAAM,sBAAsB;AAC5B,QAAKC,YAAa,OAAO;AACzB,QAAKA,aAAc;;CAGrB,AAAmB,WAAW,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAKF,KAAM,SAAS,KAAK;;CAG3B,AAAmB,OAAO,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAKC,MAAO;AAE1B,MAAI,CAAC,MAAO;AAEZ,QAAKD,KAAM,OAAO,MAAM;AACxB,sBAAoB,MAAM,MAAKA,KAAM,MAAM,SAAS,4BAA4B"}
+{"version":3,"file":"buffering-indicator-element.js","names":["#core","#state","#disconnect"],"sources":["../../../../src/ui/buffering-indicator/buffering-indicator-element.ts"],"sourcesContent":["import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\n\nexport class BufferingIndicatorElement extends MediaElement {\n  static readonly tagName = 'media-buffering-indicator';\n\n  static override properties = {\n    delay: { type: Number },\n  } satisfies PropertyDeclarationMap<keyof BufferingIndicatorCore.Props>;\n\n  delay = BufferingIndicatorCore.defaultProps.delay;\n\n  readonly #core = new BufferingIndicatorCore();\n  readonly #state = new PlayerController(this, playerContext, selectPlayback);\n\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\n    this.#core.state.subscribe(() => this.requestUpdate(), {\n      signal: this.#disconnect.signal,\n    });\n\n    if (__DEV__ && !this.#state.value) {\n      logMissingFeature(this.localName, this.#state.displayName!);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\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\n    const media = this.#state.value;\n\n    if (!media) return;\n\n    this.#core.update(media);\n    applyStateDataAttrs(this, this.#core.state.current, BufferingIndicatorDataAttrs);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,4BAAb,cAA+C,aAAa;;;eAOlD,uBAAuB,aAAa;;;iBANlB;;;oBAEG,EAC3B,OAAO,EAAE,MAAM,QAAQ,EACxB;;CAID,QAAiB,IAAI,wBAAwB;CAC7C,SAAkB,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAE3E,cAAsC;CAEtC,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,MAAI,KAAK,UAAW;AAEpB,QAAA,aAAmB,IAAI,iBAAiB;AAExC,QAAA,KAAW,MAAM,gBAAgB,KAAK,eAAe,EAAE,EACrD,QAAQ,MAAA,WAAiB,QAC1B,CAAC;AAEF,MAAe,CAAC,MAAA,MAAY,MAC1B,mBAAkB,KAAK,WAAW,MAAA,MAAY,YAAa;;CAI/D,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;;CAGrB,WAA8B,SAA+B;AAC3D,QAAM,WAAW,QAAQ;AACzB,QAAA,KAAW,SAAS,KAAK;;CAG3B,OAA0B,SAA+B;AACvD,QAAM,OAAO,QAAQ;EAErB,MAAM,QAAQ,MAAA,MAAY;AAE1B,MAAI,CAAC,MAAO;AAEZ,QAAA,KAAW,OAAO,MAAM;AACxB,sBAAoB,MAAM,MAAA,KAAW,MAAM,SAAS,4BAA4B"}

package/dist/dev/ui/captions-button/captions-button-element.d.ts

@@ -12,6 +12,7 @@ declare class CaptionsButtonElement extends MediaButtonElement<CaptionsButtonCor
     readonly availability: "data-availability";
   };
   protected readonly mediaState: PlayerController<_videojs_core_dom0.AnyPlayerStore, MediaTextTrackState | undefined>;
+  protected readonly hotkeyAction = "toggleSubtitles";
   protected activate(state: MediaTextTrackState): void;
 }
 //#endregion

package/dist/dev/ui/captions-button/captions-button-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"captions-button-element.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button-element.ts"],"mappings":";;;;;;cAOa,qBAAA,SAA8B,kBAAA,CAAmB,kBAAA;EAAA,gBAC5C,OAAA;EAAA,mBAEG,IAAA,EAAI,kBAAA;EAAA,mBACJ,YAAA;IAAA;;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,mBAAA;EAAA,UAEnB,QAAA,CAAS,KAAA,EAAO,mBAAA;AAAA"}
+{"version":3,"file":"captions-button-element.d.ts","names":[],"sources":["../../../../src/ui/captions-button/captions-button-element.ts"],"mappings":";;;;;;cAOa,qBAAA,SAA8B,kBAAA,CAAmB,kBAAA;EAAA,gBAC5C,OAAA;EAAA,mBAEG,IAAA,EAAI,kBAAA;EAAA,mBACJ,YAAA;IAAA;;;qBACA,UAAA,EAAU,gBAAA,CAFN,kBAAA,CAEM,cAAA,EAAA,mBAAA;EAAA,mBACD,YAAA;EAAA,UAElB,QAAA,CAAS,KAAA,EAAO,mBAAA;AAAA"}

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

@@ -3,7 +3,6 @@ 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) {
@@ -11,6 +10,7 @@ var CaptionsButtonElement = class extends MediaButtonElement {
 		this.core = new CaptionsButtonCore();
 		this.stateAttrMap = CaptionsButtonDataAttrs;
 		this.mediaState = new PlayerController(this, playerContext, selectTextTrack);
+		this.hotkeyAction = "toggleSubtitles";
 	}
 	static {
 		this.tagName = "media-captions-button";
@@ -19,7 +19,7 @@ var CaptionsButtonElement = class extends MediaButtonElement {
 		this.core.toggle(state);
 	}
 };
-
 //#endregion
 export { CaptionsButtonElement };
+
 //# sourceMappingURL=captions-button-element.js.map

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

@@ -1 +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"}
+{"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  protected override readonly hotkeyAction = 'toggleSubtitles';\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;sBAC/C;;;iBALjB;;CAO1B,SAAmB,OAAkC;AACnD,OAAK,KAAK,OAAO,MAAM"}

package/dist/dev/ui/context-part-element.d.ts

@@ -28,5 +28,5 @@ declare abstract class ContextPartElement<State extends object> extends MediaEle
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { ContextPartElement };
+export { ContextPartElement, PartContextValue };
 //# sourceMappingURL=context-part-element.d.ts.map

package/dist/dev/ui/context-part-element.js

@@ -1,6 +1,5 @@
 import { MediaElement } from "./media-element.js";
 import { applyStateDataAttrs } from "@videojs/core/dom";
-
 //#region src/ui/context-part-element.ts
 /**
 * Abstract base for compound-component part elements that consume a parent
@@ -22,7 +21,7 @@ var ContextPartElement = class extends MediaElement {
 		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
 	}
 };
-
 //#endregion
 export { ContextPartElement };
+
 //# sourceMappingURL=context-part-element.js.map

package/dist/dev/ui/context-part-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-part-element.js","names":[],"sources":["../../../src/ui/context-part-element.ts"],"sourcesContent":["import type { StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { MediaElement } from './media-element';\n\n/** Shape that compound context values must satisfy for parts to consume. */\nexport interface PartContextValue<State extends object> {\n  state: State;\n  stateAttrMap: StateAttrMap<State>;\n}\n\n/**\n * Abstract base for compound-component part elements that consume a parent\n * context and apply data attributes from `ctx.state` + `ctx.stateAttrMap`.\n *\n * Subclasses only need to declare the `consumer` property:\n *\n * ```ts\n * export class SliderTrackElement extends ContextPartElement<SliderState> {\n *   static readonly tagName = 'media-slider-track';\n *   protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n * }\n * ```\n */\nexport abstract class ContextPartElement<State extends object> extends MediaElement {\n  protected abstract readonly consumer: { value?: PartContextValue<State> | undefined };\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    const ctx = this.consumer.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,IAAsB,qBAAtB,cAAuE,aAAa;CAGlF,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EACtB,MAAM,MAAM,KAAK,SAAS;AAC1B,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}
+{"version":3,"file":"context-part-element.js","names":[],"sources":["../../../src/ui/context-part-element.ts"],"sourcesContent":["import type { StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { MediaElement } from './media-element';\n\n/** Shape that compound context values must satisfy for parts to consume. */\nexport interface PartContextValue<State extends object> {\n  state: State;\n  stateAttrMap: StateAttrMap<State>;\n}\n\n/**\n * Abstract base for compound-component part elements that consume a parent\n * context and apply data attributes from `ctx.state` + `ctx.stateAttrMap`.\n *\n * Subclasses only need to declare the `consumer` property:\n *\n * ```ts\n * export class SliderTrackElement extends ContextPartElement<SliderState> {\n *   static readonly tagName = 'media-slider-track';\n *   protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n * }\n * ```\n */\nexport abstract class ContextPartElement<State extends object> extends MediaElement {\n  protected abstract readonly consumer: { value?: PartContextValue<State> | undefined };\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    const ctx = this.consumer.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAsB,qBAAtB,cAAuE,aAAa;CAGlF,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EACtB,MAAM,MAAM,KAAK,SAAS;AAC1B,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}

package/dist/dev/ui/controls/context.js

@@ -1,9 +1,6 @@
 import { createContext } from "@videojs/element/context";
-
-//#region src/ui/controls/context.ts
-const CONTROLS_CONTEXT_KEY = Symbol("@videojs/controls");
-const controlsContext = createContext(CONTROLS_CONTEXT_KEY);
-
+const controlsContext = createContext(Symbol("@videojs/controls"));
 //#endregion
 export { controlsContext };
+
 //# sourceMappingURL=context.js.map

package/dist/dev/ui/controls/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.ts"],"sourcesContent":["import type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst CONTROLS_CONTEXT_KEY = Symbol('@videojs/controls');\n\nexport const controlsContext = createContext<ControlsContextValue>(CONTROLS_CONTEXT_KEY);\n"],"mappings":";;;AAQA,MAAM,uBAAuB,OAAO,oBAAoB;AAExD,MAAa,kBAAkB,cAAoC,qBAAqB"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/controls/context.ts"],"sourcesContent":["import type { ControlsState, StateAttrMap } from '@videojs/core';\nimport { createContext } from '@videojs/element/context';\n\nexport interface ControlsContextValue {\n  state: ControlsState;\n  stateAttrMap: StateAttrMap<ControlsState>;\n}\n\nconst CONTROLS_CONTEXT_KEY = Symbol('@videojs/controls');\n\nexport const controlsContext = createContext<ControlsContextValue>(CONTROLS_CONTEXT_KEY);\n"],"mappings":";AAUA,MAAa,kBAAkB,cAFF,OAAO,oBAAoB,CAEgC"}

package/dist/dev/ui/controls/controls-element.js

@@ -5,7 +5,6 @@ import { controlsContext } from "./context.js";
 import { applyStateDataAttrs, logMissingFeature, selectControls } from "@videojs/core/dom";
 import { ContextProvider } from "@videojs/element/context";
 import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
-
 //#region src/ui/controls/controls-element.ts
 var ControlsElement = class extends MediaElement {
 	static {
@@ -31,7 +30,7 @@ var ControlsElement = class extends MediaElement {
 		});
 	}
 };
-
 //#endregion
 export { ControlsElement };
+
 //# sourceMappingURL=controls-element.js.map

package/dist/dev/ui/controls/controls-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls-element.js","names":["#core","#mediaState","#provider"],"sources":["../../../../src/ui/controls/controls-element.ts"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { controlsContext } from './context';\n\nexport class ControlsElement extends MediaElement {\n  static readonly tagName = 'media-controls';\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const media = this.#mediaState.value;\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n  }\n}\n"],"mappings":";;;;;;;;;AAUA,IAAa,kBAAb,cAAqC,aAAa;;iBACtB;;CAE1B,CAASA,OAAQ,IAAI,cAAc;CACnC,CAASC,aAAc,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAChF,CAASC,WAAY,IAAI,gBAAgB,MAAM,EAAE,SAAS,iBAAiB,CAAC;CAE5E,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAKD,WAAY,SAAS,MAAKA,WAAY,YACzD,mBAAkB,KAAK,WAAW,MAAKA,WAAY,YAAY;;CAInE,AAAmB,OAAO,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,QAAQ,MAAKA,WAAY;AAC/B,MAAI,CAAC,MAAO;AAEZ,QAAKD,KAAM,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAKA,KAAM,UAAU;AAEnC,sBAAoB,MAAM,OAAO,kBAAkB;AAEnD,QAAKE,SAAU,SAAS;GACtB;GACA,cAAc;GACf,CAAC"}
+{"version":3,"file":"controls-element.js","names":["#core","#mediaState","#provider"],"sources":["../../../../src/ui/controls/controls-element.ts"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaElement } from '../media-element';\nimport { controlsContext } from './context';\n\nexport class ControlsElement extends MediaElement {\n  static readonly tagName = 'media-controls';\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const media = this.#mediaState.value;\n    if (!media) return;\n\n    this.#core.setMedia(media);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAa,kBAAb,cAAqC,aAAa;;iBACtB;;CAE1B,QAAiB,IAAI,cAAc;CACnC,cAAuB,IAAI,iBAAiB,MAAM,eAAe,eAAe;CAChF,YAAqB,IAAI,gBAAgB,MAAM,EAAE,SAAS,iBAAiB,CAAC;CAE5E,oBAAmC;AACjC,QAAM,mBAAmB;AAEzB,MAAe,CAAC,MAAA,WAAiB,SAAS,MAAA,WAAiB,YACzD,mBAAkB,KAAK,WAAW,MAAA,WAAiB,YAAY;;CAInE,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,QAAQ,MAAA,WAAiB;AAC/B,MAAI,CAAC,MAAO;AAEZ,QAAA,KAAW,SAAS,MAAM;EAC1B,MAAM,QAAQ,MAAA,KAAW,UAAU;AAEnC,sBAAoB,MAAM,OAAO,kBAAkB;AAEnD,QAAA,SAAe,SAAS;GACtB;GACA,cAAc;GACf,CAAC"}

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

@@ -1,7 +1,6 @@
 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
 var ControlsGroupElement = class extends ContextPartElement {
 	constructor(..._args) {
@@ -19,7 +18,7 @@ var ControlsGroupElement = class extends ContextPartElement {
 		if (this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) this.setAttribute("role", "group");
 	}
 };
-
 //#endregion
 export { ControlsGroupElement };
+
 //# sourceMappingURL=controls-group-element.js.map

package/dist/dev/ui/controls/controls-group-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls-group-element.js","names":[],"sources":["../../../../src/ui/controls/controls-group-element.ts"],"sourcesContent":["import type { ControlsState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { controlsContext } from './context';\n\nexport class ControlsGroupElement extends ContextPartElement<ControlsState> {\n  static readonly tagName = 'media-controls-group';\n\n  protected readonly consumer = new ContextConsumer(this, { context: controlsContext, subscribe: true });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) {\n      this.setAttribute('role', 'group');\n    }\n  }\n}\n"],"mappings":";;;;;AAMA,IAAa,uBAAb,cAA0C,mBAAkC;;;kBAG5C,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAiB,WAAW;GAAM,CAAC;;;iBAF5E;;CAI1B,AAAS,oBAA0B;AACjC,QAAM,mBAAmB;AAEzB,MAAI,KAAK,aAAa,aAAa,IAAI,KAAK,aAAa,kBAAkB,CACzE,MAAK,aAAa,QAAQ,QAAQ"}
+{"version":3,"file":"controls-group-element.js","names":[],"sources":["../../../../src/ui/controls/controls-group-element.ts"],"sourcesContent":["import type { ControlsState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { controlsContext } from './context';\n\nexport class ControlsGroupElement extends ContextPartElement<ControlsState> {\n  static readonly tagName = 'media-controls-group';\n\n  protected readonly consumer = new ContextConsumer(this, { context: controlsContext, subscribe: true });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.hasAttribute('aria-label') || this.hasAttribute('aria-labelledby')) {\n      this.setAttribute('role', 'group');\n    }\n  }\n}\n"],"mappings":";;;;AAMA,IAAa,uBAAb,cAA0C,mBAAkC;;;kBAG5C,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAiB,WAAW;GAAM,CAAC;;;iBAF5E;;CAI1B,oBAAmC;AACjC,QAAM,mBAAmB;AAEzB,MAAI,KAAK,aAAa,aAAa,IAAI,KAAK,aAAa,kBAAkB,CACzE,MAAK,aAAa,QAAQ,QAAQ"}

package/dist/dev/ui/error-dialog/error-dialog-element.d.ts

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