@videojs/html 10.0.0-beta.9 → 10.0.0-rc.1

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

@@ -1,10 +1,9 @@
-import { MediaElement } from "./media-element.js";
+import { UIElement } from "./ui-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
-* context and apply data attributes from `ctx.state` + `ctx.stateAttrMap`.
+* Abstract base for compound-component part elements that consume a parent context and apply data attributes from
+* `ctx.state` + `ctx.stateAttrMap`.
 *
 * Subclasses only need to declare the `consumer` property:
 *
@@ -15,14 +14,21 @@ import { applyStateDataAttrs } from "@videojs/core/dom";
 * }
 * ```
 */
-var ContextPartElement = class extends MediaElement {
+var ContextPartElement = class extends UIElement {
+	connectedCallback() {
+		super.connectedCallback();
+		this.#applyState();
+	}
 	update(_changed) {
 		super.update(_changed);
+		this.#applyState();
+	}
+	#applyState() {
 		const ctx = this.consumer.value;
 		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":["#applyState"],"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 { UIElement } from './ui-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 context and apply data attributes from\n * `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 UIElement {\n  protected abstract readonly consumer: { value?: PartContextValue<State> | undefined };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#applyState();\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    this.#applyState();\n  }\n\n  #applyState(): void {\n    const ctx = this.consumer.value;\n\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAsB,qBAAtB,cAAuE,UAAU;CAG/E,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAKA,YAAY;CACnB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EACrB,KAAKA,YAAY;CACnB;CAEA,cAAoB;EAClB,MAAM,MAAM,KAAK,SAAS;EAE1B,IAAI,KAAK,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;CAChE;AACF"}

package/dist/dev/ui/controls/context.d.ts

@@ -1,5 +1,4 @@
 import { ControlsState, StateAttrMap } from "@videojs/core";
-
 //#region src/ui/controls/context.d.ts
 interface ControlsContextValue {
   state: ControlsState;

package/dist/dev/ui/controls/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/controls/context.ts"],"mappings":";;;UAGiB,oBAAA;EACf,KAAA,EAAO,aAAA;EACP,YAAA,EAAc,YAAA,CAAa,aAAA;AAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/controls/context.ts"],"mappings":";;UAGiB;EACf,OAAO;EACP,cAAc,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,mBAE+B,CAAoB"}

package/dist/dev/ui/controls/controls-backdrop-element.d.ts

@@ -0,0 +1,16 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { ControlsContextValue } from "./context.js";
+import { ControlsState } from "@videojs/core";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/controls/controls-backdrop-element.d.ts
+/** Presentational backdrop that reflects its owning controls surface's state. */
+declare class ControlsBackdropElement extends ContextPartElement<ControlsState> {
+  static readonly tagName = "media-controls-backdrop";
+  protected readonly consumer: ContextConsumer<{
+    __context__: ControlsContextValue;
+  }, this>;
+  connectedCallback(): void;
+}
+//#endregion
+export { ControlsBackdropElement };
+//# sourceMappingURL=controls-backdrop-element.d.ts.map

package/dist/dev/ui/controls/controls-backdrop-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-backdrop-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-backdrop-element.ts"],"mappings":";;;;;;cAOa,gCAAgC,mBAAmB;kBAC9C;qBAEG,UAAQ;iBAHmC;;EAKrD"}

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

@@ -0,0 +1,26 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { controlsContext } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/controls/controls-backdrop-element.ts
+/** Presentational backdrop that reflects its owning controls surface's state. */
+var ControlsBackdropElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: controlsContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-controls-backdrop";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "presentation");
+		this.setAttribute("aria-hidden", "true");
+	}
+};
+//#endregion
+export { ControlsBackdropElement };
+
+//# sourceMappingURL=controls-backdrop-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls-backdrop-element.js","names":[],"sources":["../../../../src/ui/controls/controls-backdrop-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\n/** Presentational backdrop that reflects its owning controls surface's state. */\nexport class ControlsBackdropElement extends ContextPartElement<ControlsState> {\n  static readonly tagName = 'media-controls-backdrop';\n\n  protected readonly consumer = new ContextConsumer(this, { context: controlsContext, subscribe: true });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'presentation');\n    this.setAttribute('aria-hidden', 'true');\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,0BAAb,cAA6C,mBAAkC;;;EAG/C,KAAA,WAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAiB,WAAW;EAAK,CAAC;;;EAF3E,KAAA,UAAA;;CAI1B,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,aAAa,QAAQ,cAAc;EACxC,KAAK,aAAa,eAAe,MAAM;CACzC;AACF"}

package/dist/dev/ui/controls/controls-content-element.d.ts

@@ -0,0 +1,16 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { ControlsContextValue } from "./context.js";
+import { ControlsState } from "@videojs/core";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/controls/controls-content-element.d.ts
+/** Interactive surface that reflects its owning controls state. */
+declare class ControlsContentElement extends ContextPartElement<ControlsState> {
+  static readonly tagName = "media-controls-content";
+  protected readonly consumer: ContextConsumer<{
+    __context__: ControlsContextValue;
+  }, this>;
+  connectedCallback(): void;
+}
+//#endregion
+export { ControlsContentElement };
+//# sourceMappingURL=controls-content-element.d.ts.map

package/dist/dev/ui/controls/controls-content-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls-content-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-content-element.ts"],"mappings":";;;;;;cAOa,+BAA+B,mBAAmB;kBAC7C;qBAEG,UAAQ;iBAHkC;;EAKpD"}

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

@@ -0,0 +1,25 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { controlsContext } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/controls/controls-content-element.ts
+/** Interactive surface that reflects its owning controls state. */
+var ControlsContentElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: controlsContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-controls-content";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("data-interactive", "");
+	}
+};
+//#endregion
+export { ControlsContentElement };
+
+//# sourceMappingURL=controls-content-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls-content-element.js","names":[],"sources":["../../../../src/ui/controls/controls-content-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\n/** Interactive surface that reflects its owning controls state. */\nexport class ControlsContentElement extends ContextPartElement<ControlsState> {\n  static readonly tagName = 'media-controls-content';\n\n  protected readonly consumer = new ContextConsumer(this, { context: controlsContext, subscribe: true });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('data-interactive', '');\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,yBAAb,cAA4C,mBAAkC;;;EAG9C,KAAA,WAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAiB,WAAW;EAAK,CAAC;;;EAF3E,KAAA,UAAA;;CAI1B,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,aAAa,oBAAoB,EAAE;CAC1C;AACF"}

package/dist/dev/ui/controls/controls-element.d.ts

@@ -1,10 +1,16 @@
-import { MediaElement } from "../media-element.js";
+import { UIElement } from "../ui-element.js";
+import { ControlsVisibility } from "@videojs/core";
 import { PropertyValues } from "@videojs/element";
-
 //#region src/ui/controls/controls-element.d.ts
-declare class ControlsElement extends MediaElement {
+declare class ControlsElement extends UIElement {
   #private;
   static readonly tagName = "media-controls";
+  static properties: {
+    visibility: {
+      type: StringConstructor;
+    };
+  };
+  visibility: ControlsVisibility;
   connectedCallback(): void;
   protected update(_changed: PropertyValues): void;
 }

package/dist/dev/ui/controls/controls-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-element.ts"],"mappings":";;;;cAUa,eAAA,SAAwB,YAAA;EAAA;kBACnB,OAAA;EAMP,iBAAA,CAAA;EAAA,UAQU,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}
+{"version":3,"file":"controls-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-element.ts"],"mappings":";;;;cAWa,wBAAwB;;kBACnB;SAEA;;MACA,MAAI;;;EAGpB,YAAY;EAOH;YAQU,OAAO,UAAU"}

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

@@ -1,37 +1,59 @@
 import { playerContext } from "../../player/context.js";
-import { MediaElement } from "../media-element.js";
 import { PlayerController } from "../../player/player-controller.js";
+import { UIElement } from "../ui-element.js";
 import { controlsContext } from "./context.js";
+import { ControlsCore, ControlsDataAttrs, POPUP_HOST_SELECTOR } from "@videojs/core";
 import { applyStateDataAttrs, logMissingFeature, selectControls } from "@videojs/core/dom";
 import { ContextProvider } from "@videojs/element/context";
-import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
-
+import { isFunction } from "@videojs/utils/predicate";
 //#region src/ui/controls/controls-element.ts
-var ControlsElement = class extends MediaElement {
+var ControlsElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.visibility = ControlsCore.defaultProps.visibility;
+		this.#core = new ControlsCore();
+		this.#mediaState = new PlayerController(this, playerContext, selectControls);
+		this.#provider = new ContextProvider(this, { context: controlsContext });
+		this.#visible = true;
+	}
 	static {
 		this.tagName = "media-controls";
 	}
-	#core = new ControlsCore();
-	#mediaState = new PlayerController(this, playerContext, selectControls);
-	#provider = new ContextProvider(this, { context: controlsContext });
+	static {
+		this.properties = { visibility: { type: String } };
+	}
+	#core;
+	#mediaState;
+	#provider;
+	#visible;
 	connectedCallback() {
 		super.connectedCallback();
-		if (!this.#mediaState.value && this.#mediaState.displayName) logMissingFeature(this.localName, this.#mediaState.displayName);
+		if (this.visibility === "auto" && !this.#mediaState.value && this.#mediaState.displayName) logMissingFeature(this.localName, this.#mediaState.displayName);
 	}
 	update(_changed) {
 		super.update(_changed);
-		const media = this.#mediaState.value;
-		if (!media) return;
-		this.#core.setMedia(media);
+		this.#core.setProps({ visibility: this.visibility });
+		this.#core.setMedia(this.#mediaState.value ?? null);
 		const state = this.#core.getState();
+		if (!state) return;
 		applyStateDataAttrs(this, state, ControlsDataAttrs);
 		this.#provider.setValue({
 			state,
 			stateAttrMap: ControlsDataAttrs
 		});
+		const wasVisible = this.#visible;
+		this.#visible = state.visible;
+		if (wasVisible && !state.visible) this.#closeOwnedOverlays();
+	}
+	#closeOwnedOverlays() {
+		for (const element of this.querySelectorAll(POPUP_HOST_SELECTOR)) {
+			const host = element;
+			if (!isFunction(host.close)) continue;
+			host.close("imperative-action");
+		}
 	}
 };
-
 //#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","#visible","#closeOwnedOverlays"],"sources":["../../../../src/ui/controls/controls-element.ts"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs, type ControlsVisibility, POPUP_HOST_SELECTOR } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport { isFunction } from '@videojs/utils/predicate';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { UIElement } from '../ui-element';\nimport { controlsContext } from './context';\n\nexport class ControlsElement extends UIElement {\n  static readonly tagName = 'media-controls';\n\n  static override properties = {\n    visibility: { type: String },\n  } satisfies PropertyDeclarationMap<'visibility'>;\n\n  visibility: ControlsVisibility = ControlsCore.defaultProps.visibility;\n\n  readonly #core = new ControlsCore();\n  readonly #mediaState = new PlayerController(this, playerContext, selectControls);\n  readonly #provider = new ContextProvider(this, { context: controlsContext });\n  #visible = true;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (__DEV__ && this.visibility === 'auto' && !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    this.#core.setProps({ visibility: this.visibility });\n    this.#core.setMedia(this.#mediaState.value ?? null);\n\n    const state = this.#core.getState();\n    if (!state) return;\n\n    applyStateDataAttrs(this, state, ControlsDataAttrs);\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: ControlsDataAttrs,\n    });\n\n    const wasVisible = this.#visible;\n\n    this.#visible = state.visible;\n\n    if (wasVisible && !state.visible) {\n      this.#closeOwnedOverlays();\n    }\n  }\n\n  #closeOwnedOverlays(): void {\n    for (const element of this.querySelectorAll(POPUP_HOST_SELECTOR)) {\n      const host = element as Element & { close?: unknown };\n      if (!isFunction(host.close)) continue;\n\n      host.close('imperative-action');\n    }\n  }\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,kBAAb,cAAqC,UAAU;;;EAOZ,KAAA,aAAA,aAAa,aAAa;EAE1C,KAAA,QAAA,IAAI,aAAa;EACX,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,cAAc;EAC1D,KAAA,YAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,gBAAgB,CAAC;EAChE,KAAA,WAAA;;;EAXe,KAAA,UAAA;;;EAEG,KAAA,aAAA,EAC3B,YAAY,EAAE,MAAM,OAAO,EAC7B;;CAIA;CACA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAe,KAAK,eAAe,UAAU,CAAC,KAAKC,YAAY,SAAS,KAAKA,YAAY,aACvF,kBAAkB,KAAK,WAAW,KAAKA,YAAY,WAAW;CAElE;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,KAAKD,MAAM,SAAS,EAAE,YAAY,KAAK,WAAW,CAAC;EACnD,KAAKA,MAAM,SAAS,KAAKC,YAAY,SAAS,IAAI;EAElD,MAAM,QAAQ,KAAKD,MAAM,SAAS;EAClC,IAAI,CAAC,OAAO;EAEZ,oBAAoB,MAAM,OAAO,iBAAiB;EAElD,KAAKE,UAAU,SAAS;GACtB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,aAAa,KAAKC;EAExB,KAAKA,WAAW,MAAM;EAEtB,IAAI,cAAc,CAAC,MAAM,SACvB,KAAKC,oBAAoB;CAE7B;CAEA,sBAA4B;EAC1B,KAAK,MAAM,WAAW,KAAK,iBAAiB,mBAAmB,GAAG;GAChE,MAAM,OAAO;GACb,IAAI,CAAC,WAAW,KAAK,KAAK,GAAG;GAE7B,KAAK,MAAM,mBAAmB;EAChC;CACF;AACF"}

package/dist/dev/ui/controls/controls-group-element.d.ts

@@ -1,8 +1,7 @@
 import { ContextPartElement } from "../context-part-element.js";
 import { ControlsContextValue } from "./context.js";
-import { ContextConsumer } from "@videojs/element/context";
 import { ControlsState } from "@videojs/core";
-
+import { ContextConsumer } from "@videojs/element/context";
 //#region src/ui/controls/controls-group-element.d.ts
 declare class ControlsGroupElement extends ContextPartElement<ControlsState> {
   static readonly tagName = "media-controls-group";

package/dist/dev/ui/controls/controls-group-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controls-group-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-group-element.ts"],"mappings":";;;;;;cAMa,oBAAA,SAA6B,kBAAA,CAAmB,aAAA;EAAA,gBAC3C,OAAA;EAAA,mBAEG,QAAA,EAAQ,eAAA;iBAH6C,oBAAA;EAAA;EAK/D,iBAAA,CAAA;AAAA"}
+{"version":3,"file":"controls-group-element.d.ts","names":[],"sources":["../../../../src/ui/controls/controls-group-element.ts"],"mappings":";;;;;cAMa,6BAA6B,mBAAmB;kBAC3C;qBAEG,UAAQ;iBAHgC;;EAKlD"}

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;;;EAG5C,KAAA,WAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAiB,WAAW;EAAK,CAAC;;;EAF3E,KAAA,UAAA;;CAI1B,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,aAAa,YAAY,KAAK,KAAK,aAAa,iBAAiB,GACxE,KAAK,aAAa,QAAQ,OAAO;CAErC;AACF"}

package/dist/dev/ui/dialog/context.d.ts

@@ -0,0 +1,17 @@
+import { DialogCore, DialogState, StateAttrMap } from "@videojs/core";
+import { DialogApi } from "@videojs/core/dom";
+//#region src/ui/dialog/context.d.ts
+interface DialogContextValue {
+  state: DialogState;
+  stateAttrMap: StateAttrMap<DialogState>;
+  dialog: DialogApi;
+  popupId: string;
+  popupAttrs: ReturnType<DialogCore['getPopupAttrs']>;
+  close: () => void;
+}
+declare const dialogContext: {
+  __context__: DialogContextValue;
+};
+//#endregion
+export { DialogContextValue, dialogContext };
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/dialog/context.ts"],"mappings":";;;UAIiB;EACf,OAAO;EACP,cAAc,aAAa;EAC3B,QAAQ;EACR;EACA,YAAY,WAAW;EACvB;;cAKW;eAAA"}

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

@@ -0,0 +1,6 @@
+import { createContext } from "@videojs/element/context";
+const dialogContext = createContext(Symbol("@videojs/dialog"));
+//#endregion
+export { dialogContext };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/dialog/context.ts"],"sourcesContent":["import type { DialogCore, DialogState, StateAttrMap } from '@videojs/core';\nimport type { DialogApi } from '@videojs/core/dom';\nimport { createContext } from '@videojs/element/context';\n\nexport interface DialogContextValue {\n  state: DialogState;\n  stateAttrMap: StateAttrMap<DialogState>;\n  dialog: DialogApi;\n  popupId: string;\n  popupAttrs: ReturnType<DialogCore['getPopupAttrs']>;\n  close: () => void;\n}\n\nconst DIALOG_CONTEXT_KEY = Symbol('@videojs/dialog');\n\nexport const dialogContext = createContext<DialogContextValue>(DIALOG_CONTEXT_KEY);\n"],"mappings":";AAeA,MAAa,gBAAgB,cAFF,OAAO,iBAE6B,CAAkB"}

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

@@ -0,0 +1,17 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { DialogContextValue } from "./context.js";
+import "../../index.js";
+import { DialogState } from "@videojs/core";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/dialog/dialog-backdrop-element.d.ts
+/** Presentational backdrop that reflects its owning dialog's state. */
+declare class DialogBackdropElement extends ContextPartElement<DialogState> {
+  static readonly tagName = "media-dialog-backdrop";
+  protected readonly consumer: ContextConsumer<{
+    __context__: DialogContextValue;
+  }, this>;
+  connectedCallback(): void;
+}
+//#endregion
+export { DialogBackdropElement };
+//# sourceMappingURL=dialog-backdrop-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-backdrop-element.d.ts","names":[],"sources":["../../../../src/ui/dialog/dialog-backdrop-element.ts"],"mappings":";;;;;;;cAOa,8BAA8B,mBAAmB;kBAC5C;qBAEG,UAAQ;iBAHiC;;EAKnD"}

package/dist/dev/ui/dialog/dialog-backdrop-element.js

@@ -0,0 +1,26 @@
+import { dialogContext } from "./context.js";
+import { ContextPartElement } from "../context-part-element.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/dialog/dialog-backdrop-element.ts
+/** Presentational backdrop that reflects its owning dialog's state. */
+var DialogBackdropElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: dialogContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-dialog-backdrop";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "presentation");
+		this.setAttribute("aria-hidden", "true");
+	}
+};
+//#endregion
+export { DialogBackdropElement };
+
+//# sourceMappingURL=dialog-backdrop-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-backdrop-element.js","names":[],"sources":["../../../../src/ui/dialog/dialog-backdrop-element.ts"],"sourcesContent":["import type { DialogState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { dialogContext } from './context';\n\n/** Presentational backdrop that reflects its owning dialog's state. */\nexport class DialogBackdropElement extends ContextPartElement<DialogState> {\n  static readonly tagName = 'media-dialog-backdrop';\n\n  protected readonly consumer = new ContextConsumer(this, { context: dialogContext, subscribe: true });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'presentation');\n    this.setAttribute('aria-hidden', 'true');\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,wBAAb,cAA2C,mBAAgC;;;EAG3C,KAAA,WAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAe,WAAW;EAAK,CAAC;;;EAFzE,KAAA,UAAA;;CAI1B,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,aAAa,QAAQ,cAAc;EACxC,KAAK,aAAa,eAAe,MAAM;CACzC;AACF"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-close-element.d.ts","names":[],"sources":["../../../../src/ui/dialog/dialog-close-element.ts"],"mappings":";;;cAOa,2BAA2B;;kBACtB;SAEA;;MACF,MAAI;;;EAGlB;EAKS;EAYA;YAMU,OAAO,UAAU"}

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

@@ -0,0 +1,47 @@
+import { UIElement } from "../ui-element.js";
+import { dialogContext } from "./context.js";
+import { applyElementProps, applyStateDataAttrs, createButton } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/dialog/dialog-close-element.ts
+var DialogCloseElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.#ctx = new ContextConsumer(this, {
+			context: dialogContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+	}
+	static {
+		this.tagName = "media-dialog-close";
+	}
+	static {
+		this.properties = { disabled: { type: Boolean } };
+	}
+	#ctx;
+	#disconnect;
+	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 { DialogCloseElement };
+
+//# sourceMappingURL=dialog-close-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-close-element.js","names":["#ctx","#disconnect"],"sources":["../../../../src/ui/dialog/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 { UIElement } from '../ui-element';\nimport { dialogContext } from './context';\n\nexport class DialogCloseElement extends UIElement {\n  static readonly tagName: string = 'media-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: dialogContext, subscribe: true });\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\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,qBAAb,cAAwC,UAAU;;;EAOrC,KAAA,WAAA;EAEK,KAAA,OAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAe,WAAW;EAAK,CAAC;EAC/C,KAAA,cAAA;;;EATJ,KAAA,UAAA;;;EAEL,KAAA,aAAA,EAC3B,UAAU,EAAE,MAAM,QAAQ,EAC5B;;CAIA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAKC,cAAc,IAAI,gBAAgB;EAEvC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,KAAKD,KAAK,OAAO,MAAM;GACzC,kBAAkB,KAAK;EACzB,CAAC;EAED,kBAAkB,MAAM,aAAa,EAAE,QAAQ,KAAKC,YAAY,OAAO,CAAC;CAC1E;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKA,aAAa,MAAM;EACxB,KAAKA,cAAc;CACrB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EACrB,MAAM,MAAM,KAAKD,KAAK;EAEtB,IAAI,KAAK,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;CAChE;AACF"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-description-element.d.ts","names":[],"sources":["../../../../src/ui/dialog/dialog-description-element.ts"],"mappings":";;;;;;;cAOa,iCAAiC,mBAAmB;kBAC/C;qBAEG,UAAQ;iBAHoC;;YAK5C,OAAO,SAAS"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-description-element.js","names":[],"sources":["../../../../src/ui/dialog/dialog-description-element.ts"],"sourcesContent":["import type { DialogState } from '@videojs/core';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { dialogContext } from './context';\n\nexport class DialogDescriptionElement extends ContextPartElement<DialogState> {\n  static readonly tagName: string = 'media-dialog-description';\n\n  protected readonly consumer = new ContextConsumer(this, { context: dialogContext, subscribe: true });\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n    const descriptionId = this.consumer.value?.state.descriptionId;\n\n    if (descriptionId) this.id = descriptionId;\n  }\n}\n"],"mappings":";;;;AAOA,IAAa,2BAAb,cAA8C,mBAAgC;;;EAG9C,KAAA,WAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAe,WAAW;EAAK,CAAC;;;EAFjE,KAAA,UAAA;;CAIlC,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EACpB,MAAM,gBAAgB,KAAK,SAAS,OAAO,MAAM;EAEjD,IAAI,eAAe,KAAK,KAAK;CAC/B;AACF"}

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

@@ -0,0 +1,42 @@
+import { UIElement } from "../ui-element.js";
+import { DialogCore, DialogState, StateAttrMap } from "@videojs/core";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/dialog/dialog-element.d.ts
+interface DialogElementBaseOptions {
+  core?: DialogCore;
+  stateAttrMap?: StateAttrMap<DialogState>;
+  idPrefix?: string;
+  bindTrigger?: boolean;
+}
+declare class DialogElementBase extends UIElement {
+  #private;
+  static properties: {
+    open: {
+      type: BooleanConstructor;
+    };
+    defaultOpen: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+    closeOnEscape: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+  };
+  open: boolean;
+  defaultOpen: boolean;
+  closeOnEscape: boolean;
+  constructor({ core, stateAttrMap, idPrefix, bindTrigger }?: DialogElementBaseOptions);
+  connectedCallback(): void;
+  protected firstUpdated(changed: PropertyValues): void;
+  disconnectedCallback(): void;
+  close(): void;
+  protected willUpdate(changed: PropertyValues): void;
+  protected update(_changed: PropertyValues): void;
+}
+declare class DialogElement extends DialogElementBase {
+  static readonly tagName = "media-dialog";
+}
+//#endregion
+export { DialogElement, DialogElementBase, DialogElementBaseOptions };
+//# sourceMappingURL=dialog-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-element.d.ts","names":[],"sources":["../../../../src/ui/dialog/dialog-element.ts"],"mappings":";;;;UAkBiB;EACf,OAAO;EACP,eAAe,aAAa;EAC5B;EACA;;cAGW,0BAA0B;;SACrB;;MACN,MAAI;;;MACG,MAAI;MAAW;;;MACb,MAAI;MAAW;;;EAGlC;EACA;EACA;EAgBA,cACE,MACA,cACA,UACA,gBACC;EAYM;YAwBU,aAAa,SAAS;EAMhC;EAOT;YAImB,WAAW,SAAS;YAcpB,OAAO,UAAU;;cA2DzB,sBAAsB;kBACjB"}