@videojs/html 10.0.0-rc.1 → 10.0.0-rc.3

package/dist/dev/ui/controls/backdrop.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/backdrop.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=backdrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.js","names":[],"sources":["../../../../src/ui/controls/backdrop.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/content.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/content.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=content.d.ts.map

package/dist/dev/ui/controls/content.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/content.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=content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","names":[],"sources":["../../../../src/ui/controls/content.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/element.d.ts

@@ -0,0 +1,23 @@
+import { UIElement } from "../ui-element.js";
+import { ControlsVisibility } from "@videojs/core";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/controls/element.d.ts
+/**
+ * Tracks controls visibility, reflects it as data attributes, and shares it with its descendant controls parts. Hiding
+ * the controls closes any popup open inside it.
+ */
+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;
+}
+//#endregion
+export { ControlsElement };
+//# sourceMappingURL=element.d.ts.map

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

@@ -0,0 +1,63 @@
+import { playerContext } from "../../player/context.js";
+import { PlayerController } from "../../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 { isFunction } from "@videojs/utils/predicate";
+//#region src/ui/controls/element.ts
+/**
+* Tracks controls visibility, reflects it as data attributes, and shares it with its descendant controls parts. Hiding
+* the controls closes any popup open inside it.
+*/
+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";
+	}
+	static {
+		this.properties = { visibility: { type: String } };
+	}
+	#core;
+	#mediaState;
+	#provider;
+	#visible;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.visibility === "auto" && !this.#mediaState.value && this.#mediaState.displayName) logMissingFeature(this.localName, this.#mediaState.displayName);
+	}
+	update(_changed) {
+		super.update(_changed);
+		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=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#core","#mediaState","#provider","#visible","#closeOwnedOverlays"],"sources":["../../../../src/ui/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/controller';\nimport { UIElement } from '../ui-element';\nimport { controlsContext } from './context';\n\n/**\n * Tracks controls visibility, reflects it as data attributes, and shares it with its descendant controls parts. Hiding\n * the controls closes any popup open inside it.\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":";;;;;;;;;;;;;AAeA,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/group.d.ts

@@ -0,0 +1,15 @@
+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/group.d.ts
+declare class ControlsGroupElement extends ContextPartElement<ControlsState> {
+  static readonly tagName = "media-controls-group";
+  protected readonly consumer: ContextConsumer<{
+    __context__: ControlsContextValue;
+  }, this>;
+  connectedCallback(): void;
+}
+//#endregion
+export { ControlsGroupElement };
+//# sourceMappingURL=group.d.ts.map

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

@@ -0,0 +1,24 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { controlsContext } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/controls/group.ts
+var ControlsGroupElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: controlsContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-controls-group";
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) this.setAttribute("role", "group");
+	}
+};
+//#endregion
+export { ControlsGroupElement };
+
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":[],"sources":["../../../../src/ui/controls/group.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/backdrop.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/backdrop.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=backdrop.d.ts.map

package/dist/dev/ui/dialog/backdrop.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/backdrop.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=backdrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.js","names":[],"sources":["../../../../src/ui/dialog/backdrop.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/close.d.ts

@@ -0,0 +1,20 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/dialog/close.d.ts
+/** Button that closes its owning dialog; the element itself takes `role="button"` and keyboard focus. */
+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=close.d.ts.map

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

@@ -0,0 +1,48 @@
+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/close.ts
+/** Button that closes its owning dialog; the element itself takes `role="button"` and keyboard focus. */
+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=close.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"close.js","names":["#ctx","#disconnect"],"sources":["../../../../src/ui/dialog/close.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\n/** Button that closes its owning dialog; the element itself takes `role=\"button\"` and keyboard focus. */\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":";;;;;;AAQA,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/description.d.ts

@@ -0,0 +1,21 @@
+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/description.d.ts
+/**
+ * Text announced as its owning dialog's description. The element takes the `id` that the popup's `aria-describedby`
+ * points to.
+ */
+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=description.d.ts.map

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

@@ -0,0 +1,29 @@
+import { dialogContext } from "./context.js";
+import { ContextPartElement } from "../context-part-element.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/dialog/description.ts
+/**
+* Text announced as its owning dialog's description. The element takes the `id` that the popup's `aria-describedby`
+* points to.
+*/
+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=description.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"description.js","names":[],"sources":["../../../../src/ui/dialog/description.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\n/**\n * Text announced as its owning dialog's description. The element takes the `id` that the popup's `aria-describedby`\n * points to.\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":";;;;;;;;AAWA,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/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/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=element.d.ts.map

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

@@ -0,0 +1,144 @@
+import { UIElement } from "../ui-element.js";
+import { PositionController } from "../position-controller.js";
+import { dialogContext } from "./context.js";
+import { DialogCore, DialogDataAttrs } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createDialog, createTransition } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { SnapshotController } from "@videojs/store/html";
+//#region src/ui/dialog/element.ts
+let idCounter = 0;
+var DialogElementBase = class extends UIElement {
+	static {
+		this.properties = {
+			open: { type: Boolean },
+			defaultOpen: {
+				type: Boolean,
+				attribute: "default-open"
+			},
+			closeOnEscape: {
+				type: Boolean,
+				attribute: "close-on-escape"
+			}
+		};
+	}
+	#core;
+	#stateAttrMap;
+	#provider;
+	#position;
+	#popupId;
+	#titleId;
+	#descriptionId;
+	#bindTrigger;
+	#dialog;
+	#snapshot;
+	#triggerAbort;
+	#triggerElement;
+	constructor({ core = new DialogCore(), stateAttrMap = DialogDataAttrs, idPrefix = "dialog", bindTrigger = true } = {}) {
+		super();
+		this.open = DialogCore.defaultProps.open;
+		this.defaultOpen = DialogCore.defaultProps.defaultOpen;
+		this.closeOnEscape = DialogCore.defaultProps.closeOnEscape;
+		this.#provider = new ContextProvider(this, { context: dialogContext });
+		this.#position = new PositionController(this);
+		this.#dialog = null;
+		this.#snapshot = null;
+		this.#triggerAbort = null;
+		this.#triggerElement = null;
+		this.#core = core;
+		this.#stateAttrMap = stateAttrMap;
+		this.#bindTrigger = bindTrigger;
+		this.#popupId = `vjs-${idPrefix}-popup-${idCounter++}`;
+		this.#titleId = `vjs-${idPrefix}-title-${idCounter++}`;
+		this.#descriptionId = `vjs-${idPrefix}-desc-${idCounter++}`;
+		this.#core.setTitleId(this.#titleId);
+		this.#core.setDescriptionId(this.#descriptionId);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.#dialog = createDialog({
+			transition: createTransition(),
+			closeOnEscape: () => this.closeOnEscape,
+			onOpenChange: (nextOpen) => {
+				this.open = nextOpen;
+				this.dispatchEvent(new CustomEvent("open-change", { detail: { open: nextOpen } }));
+			},
+			onOpenChangeComplete: (nextOpen) => {
+				this.dispatchEvent(new CustomEvent("open-change-complete", { detail: { open: nextOpen } }));
+			}
+		});
+		if (this.#snapshot) this.#snapshot.track(this.#dialog.input);
+		else this.#snapshot = new SnapshotController(this, this.#dialog.input);
+	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		if (this.defaultOpen && !this.open) this.#dialog?.open();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupTrigger();
+		this.#dialog?.destroy();
+		this.#dialog = null;
+	}
+	close() {
+		this.#dialog?.close();
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		this.#core.setProps(this);
+		if (this.#dialog && changed.has("open")) {
+			const { active: inputOpen } = this.#dialog.input.current;
+			if (this.open !== inputOpen) if (this.open) this.#dialog.open();
+			else this.#dialog.close();
+		}
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#dialog) return;
+		const triggerElement = this.#bindTrigger ? this.#position.findTrigger() : null;
+		this.#syncTrigger(triggerElement);
+		const input = this.#dialog.input.current;
+		this.#core.setInput(input);
+		const state = this.#core.getState();
+		applyStateDataAttrs(this, state, this.#stateAttrMap);
+		if (this.#triggerElement) applyElementProps(this.#triggerElement, this.#core.getTriggerAttrs(state, this.#popupId));
+		this.#provider.setValue({
+			state,
+			stateAttrMap: this.#stateAttrMap,
+			dialog: this.#dialog,
+			popupId: this.#popupId,
+			popupAttrs: this.#core.getPopupAttrs(state),
+			close: () => this.#dialog?.close()
+		});
+	}
+	#syncTrigger(triggerElement) {
+		if (triggerElement === this.#triggerElement) return;
+		this.#cleanupTrigger();
+		this.#triggerElement = triggerElement;
+		this.#dialog?.setTriggerElement(triggerElement);
+		if (triggerElement && this.#dialog) {
+			this.#triggerAbort = new AbortController();
+			applyElementProps(triggerElement, this.#dialog.triggerProps, { signal: this.#triggerAbort.signal });
+		}
+	}
+	#cleanupTrigger() {
+		if (this.#triggerElement) applyElementProps(this.#triggerElement, {
+			"aria-expanded": void 0,
+			"aria-haspopup": void 0,
+			"aria-controls": void 0
+		});
+		this.#triggerAbort?.abort();
+		this.#triggerAbort = null;
+		this.#triggerElement = null;
+		this.#dialog?.setTriggerElement(null);
+	}
+};
+var DialogElement = class extends DialogElementBase {
+	static {
+		this.tagName = "media-dialog";
+	}
+};
+//#endregion
+export { DialogElement, DialogElementBase };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#core","#stateAttrMap","#provider","#position","#popupId","#titleId","#descriptionId","#bindTrigger","#dialog","#snapshot","#cleanupTrigger","#syncTrigger","#triggerElement","#triggerAbort"],"sources":["../../../../src/ui/dialog/element.ts"],"sourcesContent":["import { DialogCore, DialogDataAttrs, type DialogInput, type DialogState, type StateAttrMap } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createDialog,\n  createTransition,\n  type DialogApi,\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 { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\nimport { dialogContext } from './context';\n\nlet idCounter = 0;\n\nexport interface DialogElementBaseOptions {\n  core?: DialogCore;\n  stateAttrMap?: StateAttrMap<DialogState>;\n  idPrefix?: string;\n  bindTrigger?: boolean;\n}\n\nexport class DialogElementBase extends UIElement {\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n  } satisfies PropertyDeclarationMap<keyof DialogCore.Props>;\n\n  open = DialogCore.defaultProps.open;\n  defaultOpen = DialogCore.defaultProps.defaultOpen;\n  closeOnEscape = DialogCore.defaultProps.closeOnEscape;\n\n  readonly #core: DialogCore;\n  readonly #stateAttrMap: StateAttrMap<DialogState>;\n  readonly #provider = new ContextProvider(this, { context: dialogContext });\n  readonly #position = new PositionController(this);\n  readonly #popupId: string;\n  readonly #titleId: string;\n  readonly #descriptionId: string;\n  readonly #bindTrigger: boolean;\n\n  #dialog: DialogApi | null = null;\n  #snapshot: SnapshotController<DialogInput> | null = null;\n  #triggerAbort: AbortController | null = null;\n  #triggerElement: HTMLElement | null = null;\n\n  constructor({\n    core = new DialogCore(),\n    stateAttrMap = DialogDataAttrs,\n    idPrefix = 'dialog',\n    bindTrigger = true,\n  }: DialogElementBaseOptions = {}) {\n    super();\n    this.#core = core;\n    this.#stateAttrMap = stateAttrMap;\n    this.#bindTrigger = bindTrigger;\n    this.#popupId = `vjs-${idPrefix}-popup-${idCounter++}`;\n    this.#titleId = `vjs-${idPrefix}-title-${idCounter++}`;\n    this.#descriptionId = `vjs-${idPrefix}-desc-${idCounter++}`;\n    this.#core.setTitleId(this.#titleId);\n    this.#core.setDescriptionId(this.#descriptionId);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#dialog = createDialog({\n      transition: createTransition(),\n      closeOnEscape: () => this.closeOnEscape,\n      onOpenChange: (nextOpen: boolean) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen } }));\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        this.dispatchEvent(new CustomEvent('open-change-complete', { detail: { open: nextOpen } }));\n      },\n    });\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  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    if (this.defaultOpen && !this.open) this.#dialog?.open();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#dialog?.destroy();\n    this.#dialog = null;\n  }\n\n  close(): void {\n    this.#dialog?.close();\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    if (this.#dialog && changed.has('open')) {\n      const { active: inputOpen } = this.#dialog.input.current;\n\n      if (this.open !== inputOpen) {\n        if (this.open) this.#dialog.open();\n        else this.#dialog.close();\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#dialog) return;\n\n    const triggerElement = this.#bindTrigger ? this.#position.findTrigger() : null;\n\n    this.#syncTrigger(triggerElement);\n\n    const input = this.#dialog.input.current;\n\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    applyStateDataAttrs(this, state, this.#stateAttrMap);\n\n    if (this.#triggerElement) {\n      applyElementProps(this.#triggerElement, this.#core.getTriggerAttrs(state, this.#popupId));\n    }\n\n    this.#provider.setValue({\n      state,\n      stateAttrMap: this.#stateAttrMap,\n      dialog: this.#dialog,\n      popupId: this.#popupId,\n      popupAttrs: this.#core.getPopupAttrs(state),\n      close: () => this.#dialog?.close(),\n    });\n  }\n\n  #syncTrigger(triggerElement: HTMLElement | null): void {\n    if (triggerElement === this.#triggerElement) return;\n\n    this.#cleanupTrigger();\n    this.#triggerElement = triggerElement;\n    this.#dialog?.setTriggerElement(triggerElement);\n\n    if (triggerElement && this.#dialog) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerElement, this.#dialog.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#triggerElement) {\n      applyElementProps(this.#triggerElement, {\n        'aria-expanded': undefined,\n        'aria-haspopup': undefined,\n        'aria-controls': undefined,\n      });\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#triggerElement = null;\n    this.#dialog?.setTriggerElement(null);\n  }\n}\n\nexport class DialogElement extends DialogElementBase {\n  static readonly tagName = 'media-dialog';\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+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/popup.d.ts
+/** Semantic popup that owns focus management and dialog transition completion. */
+declare class DialogPopupElement extends ContextPartElement<DialogState> {
+  #private;
+  static readonly tagName = "media-dialog-popup";
+  protected readonly consumer: ContextConsumer<{
+    __context__: DialogContextValue;
+  }, this>;
+  disconnectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+//#endregion
+export { DialogPopupElement };
+//# sourceMappingURL=popup.d.ts.map