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

package/dist/dev/player/element.js

@@ -0,0 +1,192 @@
+import { UIElement } from "../ui/ui-element.js";
+import { setPlayerConfigValue } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+import { camelCase, kebabCase } from "@videojs/utils/string";
+import { isNull } from "@videojs/utils/predicate";
+//#region src/player/element.ts
+function resolveInputs(config) {
+	return Object.entries(config).map(([key, entry]) => {
+		const declared = entry.html?.attribute;
+		const attribute = declared ?? kebabCase(key);
+		if (declared && declared !== kebabCase(declared)) console.warn(`[vjs-html] config html.attribute "${declared}" is not kebab-case and will never match`);
+		return {
+			property: camelCase(attribute),
+			attribute,
+			entry
+		};
+	});
+}
+function createPlayerElement(options) {
+	const inputs = resolveInputs(options.config);
+	class ConfiguredPlayerElement extends UIElement {
+		static {
+			this.properties = {
+				...UIElement.properties,
+				...Object.fromEntries(inputs.map(({ property, attribute }) => [property, {
+					type: String,
+					attribute
+				}]))
+			};
+		}
+		#store = options.factory();
+		#configuredStore = null;
+		#detach = null;
+		#connected = false;
+		#media = null;
+		#nativeMedia = null;
+		#container = null;
+		#mediaRegistrations = [];
+		#containerRegistrations = [];
+		#observer = new MutationObserver(() => this.#syncNativeMedia());
+		#registerMedia = (media) => {
+			const registration = { value: media };
+			this.#mediaRegistrations.push(registration);
+			this.#syncMedia();
+			return () => {
+				const index = this.#mediaRegistrations.indexOf(registration);
+				if (index < 0) return;
+				this.#mediaRegistrations.splice(index, 1);
+				this.#syncNativeMedia();
+				this.#syncMedia();
+			};
+		};
+		#registerContainer = (container) => {
+			const registration = { value: container };
+			this.#containerRegistrations.push(registration);
+			this.#syncContainer();
+			return () => {
+				const index = this.#containerRegistrations.indexOf(registration);
+				if (index < 0) return;
+				this.#containerRegistrations.splice(index, 1);
+				this.#syncContainer();
+			};
+		};
+		#playerProvider = new ContextProvider(this, {
+			context: options.playerContext,
+			initialValue: this.store
+		});
+		#mediaProvider = new ContextProvider(this, {
+			context: options.mediaContext,
+			initialValue: {
+				media: this.#media,
+				registerMedia: this.#registerMedia
+			}
+		});
+		#containerProvider = new ContextProvider(this, {
+			context: options.containerContext,
+			initialValue: {
+				container: this.#container,
+				registerContainer: this.#registerContainer
+			}
+		});
+		get store() {
+			if (isNull(this.#store)) this.#store = options.factory();
+			return this.#store;
+		}
+		connectedCallback() {
+			this.#connected = true;
+			super.connectedCallback();
+			this.#syncInitialConfig();
+			this.#playerProvider.setValue(this.store);
+			this.#publishMedia();
+			this.#publishContainer();
+			this.#observer.observe(this, {
+				childList: true,
+				subtree: true
+			});
+			queueMicrotask(() => {
+				if (this.#connected) this.#syncNativeMedia();
+			});
+			this.#tryAttach();
+		}
+		disconnectedCallback() {
+			this.#connected = false;
+			this.#observer.disconnect();
+			this.#detachStore();
+			super.disconnectedCallback();
+		}
+		destroyCallback() {
+			this.#observer.disconnect();
+			this.#detachStore();
+			this.#store?.destroy();
+			this.#store = null;
+			super.destroyCallback();
+		}
+		willUpdate(changed) {
+			super.willUpdate(changed);
+			for (const { property, entry } of inputs) {
+				if (!changed.has(property)) continue;
+				const configProperty = property;
+				setPlayerConfigValue(this.store, entry, this[configProperty]);
+			}
+		}
+		#syncMedia() {
+			const media = this.#mediaRegistrations.at(-1)?.value ?? null ?? this.#nativeMedia;
+			if (this.#media === media) return;
+			this.#media = media;
+			this.#publishMedia();
+			this.#tryAttach();
+		}
+		#syncContainer() {
+			const container = this.#containerRegistrations.at(-1)?.value ?? null;
+			if (this.#container === container) return;
+			this.#container = container;
+			this.#publishContainer();
+			this.#tryAttach();
+		}
+		#syncNativeMedia() {
+			const media = this.querySelector("video, audio");
+			if (this.#nativeMedia === media) return;
+			this.#nativeMedia = media;
+			this.#syncMedia();
+		}
+		#publishMedia() {
+			this.#mediaProvider.setValue({
+				media: this.#media,
+				registerMedia: this.#registerMedia
+			});
+		}
+		#publishContainer() {
+			this.#containerProvider.setValue({
+				container: this.#container,
+				registerContainer: this.#registerContainer
+			});
+		}
+		#tryAttach() {
+			const store = this.#store;
+			if (!this.#connected || !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;
+		}
+		#syncInitialConfig() {
+			const store = this.store;
+			if (this.#configuredStore === store) return;
+			for (const { property, entry } of inputs) {
+				const configProperty = property;
+				setPlayerConfigValue(store, entry, this[configProperty]);
+			}
+			this.#configuredStore = store;
+		}
+	}
+	return ConfiguredPlayerElement;
+}
+//#endregion
+export { createPlayerElement };
+
+//# sourceMappingURL=element.js.map

package/dist/dev/player/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#syncNativeMedia","#mediaRegistrations","#syncMedia","#containerRegistrations","#syncContainer","#media","#registerMedia","#container","#registerContainer","#store","#connected","#syncInitialConfig","#playerProvider","#publishMedia","#publishContainer","#observer","#tryAttach","#detachStore","#nativeMedia","#mediaProvider","#containerProvider","#detach","#configuredStore"],"sources":["../../../src/player/element.ts"],"sourcesContent":["import {\n  type MediaContainer,\n  type PlayerFeatureConfig,\n  type PlayerStore,\n  type PlayerTarget,\n  setPlayerConfigValue,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\nimport type { Media } from '@videojs/media/dom';\nimport { isNull } from '@videojs/utils/predicate';\nimport { camelCase, kebabCase } from '@videojs/utils/string';\n\nimport type { PlayerElementConstructor } from '../store/types';\nimport { UIElement } from '../ui/ui-element';\nimport type { ContainerContext, MediaContext, PlayerContext } from './context';\n\nexport interface CreatePlayerElementOptions<Store extends PlayerStore> {\n  playerContext: PlayerContext<Store>;\n  mediaContext: MediaContext;\n  containerContext: ContainerContext;\n  factory: () => Store;\n  config: PlayerFeatureConfig;\n}\n\ninterface Registration<Value> {\n  value: Value;\n}\n\ninterface ConfigInput {\n  property: string;\n  attribute: string;\n  entry: PlayerFeatureConfig[string];\n}\n\nfunction resolveInputs(config: PlayerFeatureConfig): ConfigInput[] {\n  return Object.entries(config).map(([key, entry]) => {\n    const declared = entry.html?.attribute;\n    const attribute = declared ?? kebabCase(key);\n\n    if (__DEV__ && declared && declared !== kebabCase(declared)) {\n      console.warn(`[vjs-html] config html.attribute \"${declared}\" is not kebab-case and will never match`);\n    }\n\n    return { property: camelCase(attribute), attribute, entry };\n  });\n}\n\n/** Creates a configured player element class that owns the store and attach lifecycle. */\nexport function createPlayerElement<Store extends PlayerStore>(\n  options: CreatePlayerElementOptions<Store>\n): PlayerElementConstructor<Store>;\nexport function createPlayerElement<Store extends PlayerStore>(\n  options: CreatePlayerElementOptions<Store>\n): typeof UIElement {\n  const inputs = resolveInputs(options.config);\n\n  class ConfiguredPlayerElement extends UIElement {\n    static properties = {\n      ...UIElement.properties,\n      ...Object.fromEntries(inputs.map(({ property, attribute }) => [property, { type: String, attribute }])),\n    } satisfies PropertyDeclarationMap;\n\n    #store: Store | null = options.factory();\n    #configuredStore: Store | null = null;\n    #detach: (() => void) | null = null;\n    #connected = false;\n    #media: Media | null = null;\n    #nativeMedia: HTMLMediaElement | null = null;\n    #container: MediaContainer | null = null;\n    #mediaRegistrations: Registration<Media>[] = [];\n    #containerRegistrations: Registration<MediaContainer>[] = [];\n    #observer = new MutationObserver(() => this.#syncNativeMedia());\n\n    #registerMedia = (media: Media): (() => void) => {\n      const registration = { value: media };\n\n      this.#mediaRegistrations.push(registration);\n      this.#syncMedia();\n\n      return () => {\n        const index = this.#mediaRegistrations.indexOf(registration);\n        if (index < 0) return;\n\n        this.#mediaRegistrations.splice(index, 1);\n        this.#syncNativeMedia();\n        this.#syncMedia();\n      };\n    };\n\n    #registerContainer = (container: MediaContainer): (() => void) => {\n      const registration = { value: container };\n\n      this.#containerRegistrations.push(registration);\n      this.#syncContainer();\n\n      return () => {\n        const index = this.#containerRegistrations.indexOf(registration);\n        if (index < 0) return;\n\n        this.#containerRegistrations.splice(index, 1);\n        this.#syncContainer();\n      };\n    };\n\n    #playerProvider = new ContextProvider(this, {\n      context: options.playerContext,\n      initialValue: this.store,\n    });\n\n    #mediaProvider = new ContextProvider(this, {\n      context: options.mediaContext,\n      initialValue: { media: this.#media, registerMedia: this.#registerMedia },\n    });\n\n    #containerProvider = new ContextProvider(this, {\n      context: options.containerContext,\n      initialValue: {\n        container: this.#container,\n        registerContainer: this.#registerContainer,\n      },\n    });\n\n    get store(): Store {\n      if (isNull(this.#store)) {\n        this.#store = options.factory();\n      }\n\n      return this.#store;\n    }\n\n    override connectedCallback(): void {\n      this.#connected = true;\n      super.connectedCallback();\n      this.#syncInitialConfig();\n      this.#playerProvider.setValue(this.store);\n      this.#publishMedia();\n      this.#publishContainer();\n      this.#observer.observe(this, { childList: true, subtree: true });\n      queueMicrotask(() => {\n        if (this.#connected) this.#syncNativeMedia();\n      });\n      this.#tryAttach();\n    }\n\n    override disconnectedCallback(): void {\n      this.#connected = false;\n      this.#observer.disconnect();\n      this.#detachStore();\n      super.disconnectedCallback();\n    }\n\n    override destroyCallback(): void {\n      this.#observer.disconnect();\n      this.#detachStore();\n      this.#store?.destroy();\n      this.#store = null;\n      super.destroyCallback();\n    }\n\n    protected override willUpdate(changed: PropertyValues): void {\n      super.willUpdate(changed);\n\n      for (const { property, entry } of inputs) {\n        if (!changed.has(property)) continue;\n\n        // SAFETY: `resolveInputs` derives properties installed by this class's static property map.\n        const configProperty = property as keyof this;\n\n        setPlayerConfigValue(this.store, entry, this[configProperty]);\n      }\n    }\n\n    #syncMedia(): void {\n      const registered = this.#mediaRegistrations.at(-1)?.value ?? null;\n      const media = registered ?? this.#nativeMedia;\n      if (this.#media === media) return;\n\n      this.#media = media;\n      this.#publishMedia();\n      this.#tryAttach();\n    }\n\n    #syncContainer(): void {\n      const container = this.#containerRegistrations.at(-1)?.value ?? null;\n      if (this.#container === container) return;\n\n      this.#container = container;\n      this.#publishContainer();\n      this.#tryAttach();\n    }\n\n    #syncNativeMedia(): void {\n      const media = this.querySelector<HTMLMediaElement>('video, audio');\n      if (this.#nativeMedia === media) return;\n\n      this.#nativeMedia = media;\n      this.#syncMedia();\n    }\n\n    #publishMedia(): void {\n      this.#mediaProvider.setValue({ media: this.#media, registerMedia: this.#registerMedia });\n    }\n\n    #publishContainer(): void {\n      this.#containerProvider.setValue({\n        container: this.#container,\n        registerContainer: this.#registerContainer,\n      });\n    }\n\n    #tryAttach(): void {\n      const store = this.#store;\n      if (!this.#connected || !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    #syncInitialConfig(): void {\n      const store = this.store;\n      if (this.#configuredStore === store) return;\n\n      for (const { property, entry } of inputs) {\n        // SAFETY: `resolveInputs` derives properties installed by this class's static property map.\n        const configProperty = property as keyof this;\n\n        setPlayerConfigValue(store, entry, this[configProperty]);\n      }\n\n      this.#configuredStore = store;\n    }\n  }\n\n  return ConfiguredPlayerElement;\n}\n"],"mappings":"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"}

package/dist/dev/presets/audio/player.d.ts

@@ -1,5 +1,5 @@
 import { PlayerElementConstructor } from "../../store/types.js";
-import { PlayerController as PlayerController$1 } from "../../player/player-controller.js";
+import { PlayerController as PlayerController$1 } from "../../player/controller.js";
 import { index_d_exports } from "../../index.js";
 //#region src/presets/audio/player.d.ts
 declare const PlayerElement: PlayerElementConstructor<index_d_exports.AudioPlayerStore>;

package/dist/dev/presets/background/player.d.ts

@@ -1,5 +1,5 @@
 import { PlayerElementConstructor } from "../../store/types.js";
-import { PlayerController as PlayerController$1 } from "../../player/player-controller.js";
+import { PlayerController as PlayerController$1 } from "../../player/controller.js";
 import { index_d_exports } from "../../index.js";
 //#region src/presets/background/player.d.ts
 declare const PlayerElement: PlayerElementConstructor<index_d_exports.PlayerStore<[]>>;

package/dist/dev/presets/background/skin.js

@@ -1,4 +1,5 @@
 import skin_default from "../../define/background/skin2.js";
+import { SKIN_HELP_TEXT, SKIN_HELP_URL } from "@videojs/core";
 import { ReactiveElement } from "@videojs/element";
 import { ensureGlobalStyle } from "@videojs/utils/dom";
 //#region src/presets/background/skin.ts
@@ -10,6 +11,7 @@ function getTemplateHTML() {
       <slot name="media"></slot>
       <slot></slot>
     </media-container>
+    <a rel="help" href="${SKIN_HELP_URL}" hidden>${SKIN_HELP_TEXT}</a>
   `;
 }
 var BackgroundVideoSkinElement = class BackgroundVideoSkinElement extends ReactiveElement {

package/dist/dev/presets/background/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/presets/background/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle } from '@videojs/utils/dom';\n\nimport styles from '../../define/background/skin.css?inline';\n\nconst STYLES_ID = '__media-background-styles';\n\nfunction getTemplateHTML() {\n  return /* html */ `\n    <media-container>\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n    </media-container>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, styles);\n\n    if (!this.shadowRoot) {\n      this.attachShadow(BackgroundVideoSkinElement.shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;AAKA,MAAM,YAAY;AAElB,SAAS,kBAAkB;CACzB,OAAkB;;;;;;;AAOpB;AAEA,IAAa,6BAAb,MAAa,mCAAmC,gBAAgB;;EACpC,KAAA,UAAA;;;EACiB,KAAA,oBAAA,EAAE,MAAM,OAAO;;;EACjC,KAAA,kBAAA;;CAEzB,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWA,YAAM;EAEnC,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAa,2BAA2B,iBAAiB;GAC9D,KAAK,WAAY,YAAY,gBAAgB;EAC/C;CACF;AACF"}
+{"version":3,"file":"skin.js","names":["styles"],"sources":["../../../../src/presets/background/skin.ts"],"sourcesContent":["import { SKIN_HELP_TEXT, SKIN_HELP_URL } from '@videojs/core';\nimport { ReactiveElement } from '@videojs/element';\nimport { ensureGlobalStyle } from '@videojs/utils/dom';\n\nimport styles from '../../define/background/skin.css?inline';\n\nconst STYLES_ID = '__media-background-styles';\n\nfunction getTemplateHTML() {\n  return /* html */ `\n    <media-container>\n      <!-- @deprecated slot=\"media\" is no longer required, use the default slot instead -->\n      <slot name=\"media\"></slot>\n      <slot></slot>\n    </media-container>\n    <a rel=\"help\" href=\"${SKIN_HELP_URL}\" hidden>${SKIN_HELP_TEXT}</a>\n  `;\n}\n\nexport class BackgroundVideoSkinElement extends ReactiveElement {\n  static readonly tagName = 'background-video-skin';\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static getTemplateHTML = getTemplateHTML;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, styles);\n\n    if (!this.shadowRoot) {\n      this.attachShadow(BackgroundVideoSkinElement.shadowRootOptions);\n      this.shadowRoot!.innerHTML = getTemplateHTML();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [BackgroundVideoSkinElement.tagName]: BackgroundVideoSkinElement;\n  }\n}\n"],"mappings":";;;;;AAMA,MAAM,YAAY;AAElB,SAAS,kBAAkB;CACzB,OAAkB;;;;;;0BAMM,cAAc,WAAW,eAAe;;AAElE;AAEA,IAAa,6BAAb,MAAa,mCAAmC,gBAAgB;;EACpC,KAAA,UAAA;;;EACiB,KAAA,oBAAA,EAAE,MAAM,OAAO;;;EACjC,KAAA,kBAAA;;CAEzB,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWA,YAAM;EAEnC,IAAI,CAAC,KAAK,YAAY;GACpB,KAAK,aAAa,2BAA2B,iBAAiB;GAC9D,KAAK,WAAY,YAAY,gBAAgB;EAC/C;CACF;AACF"}

package/dist/dev/presets/live-audio/player.d.ts

@@ -1,5 +1,5 @@
 import { PlayerElementConstructor } from "../../store/types.js";
-import { PlayerController as PlayerController$1 } from "../../player/player-controller.js";
+import { PlayerController as PlayerController$1 } from "../../player/controller.js";
 import { index_d_exports } from "../../index.js";
 //#region src/presets/live-audio/player.d.ts
 declare const PlayerElement: PlayerElementConstructor<index_d_exports.PlayerStore<index_d_exports.LiveAudioFeatures>>;

package/dist/dev/presets/live-video/player.d.ts

@@ -1,5 +1,5 @@
 import { PlayerElementConstructor } from "../../store/types.js";
-import { PlayerController as PlayerController$1 } from "../../player/player-controller.js";
+import { PlayerController as PlayerController$1 } from "../../player/controller.js";
 import { index_d_exports } from "../../index.js";
 //#region src/presets/live-video/player.d.ts
 declare const PlayerElement: PlayerElementConstructor<index_d_exports.PlayerStore<index_d_exports.LiveVideoFeatures>>;

package/dist/dev/presets/skin.js

@@ -1,10 +1,11 @@
 import global_default from "../define/global.js";
-import shared_default from "../define/shared.js";
+import shadow_default from "../define/shadow.js";
+import { SKIN_HELP_TEXT, SKIN_HELP_URL } from "@videojs/core";
 import { ReactiveElement } from "@videojs/element";
 import { applyShadowStyles, createShadowStyle, ensureGlobalStyle, renderTemplate } from "@videojs/utils/dom";
 //#region src/presets/skin.ts
 const STYLES_ID = "__media-styles";
-const sharedSheet = createShadowStyle(shared_default);
+const shadowSheet = createShadowStyle(shadow_default);
 /**
 * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +
 * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).
@@ -20,12 +21,22 @@ var SkinElement = class extends ReactiveElement {
 			const ctor = this.constructor;
 			this.attachShadow(ctor.shadowRootOptions);
 			if (ctor.template) renderTemplate(this.shadowRoot, ctor.template);
-			const sheets = [sharedSheet];
+			this.shadowRoot.append(createHelpLink(this.ownerDocument));
+			const sheets = [shadowSheet];
 			if (ctor.styles) sheets.push(ctor.styles);
 			applyShadowStyles(this.shadowRoot, sheets);
 		}
 	}
 };
+/** Every packaged skin links to the page that explains what the player is. See `SKIN_HELP_URL`. */
+function createHelpLink(doc) {
+	const link = doc.createElement("a");
+	link.rel = "help";
+	link.href = SKIN_HELP_URL;
+	link.hidden = true;
+	link.textContent = SKIN_HELP_TEXT;
+	return link;
+}
 //#endregion
 export { SkinElement };
 

package/dist/dev/presets/skin.js.map

@@ -1 +1 @@
-{"version":3,"file":"skin.js","names":["sharedStyles","globalStyles"],"sources":["../../../src/presets/skin.ts"],"sourcesContent":["import { ReactiveElement } from '@videojs/element';\nimport {\n  applyShadowStyles,\n  createShadowStyle,\n  ensureGlobalStyle,\n  renderTemplate,\n  type ShadowStyle,\n} from '@videojs/utils/dom';\n\nimport globalStyles from '../define/global.css?inline';\nimport sharedStyles from '../define/shared.css?inline';\n\nconst STYLES_ID = '__media-styles';\nconst sharedSheet = createShadowStyle(sharedStyles);\n\n/**\n * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +\n * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).\n */\nexport class SkinElement extends ReactiveElement {\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static styles?: ShadowStyle;\n  static template?: HTMLTemplateElement | null;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, globalStyles);\n\n    if (!this.shadowRoot) {\n      const ctor = this.constructor as typeof SkinElement;\n\n      this.attachShadow(ctor.shadowRootOptions);\n\n      if (ctor.template) {\n        renderTemplate(this.shadowRoot!, ctor.template);\n      }\n\n      const sheets: ShadowStyle[] = [sharedSheet];\n\n      if (ctor.styles) {\n        sheets.push(ctor.styles);\n      }\n\n      applyShadowStyles(this.shadowRoot!, sheets);\n    }\n  }\n}\n"],"mappings":";;;;;AAYA,MAAM,YAAY;AAClB,MAAM,cAAc,kBAAkBA,cAAY;;;;;AAMlD,IAAa,cAAb,cAAiC,gBAAgB;;EACJ,KAAA,oBAAA,EAAE,MAAM,OAAO;;CAI1D,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWC,cAAY;EAEzC,IAAI,CAAC,KAAK,YAAY;GACpB,MAAM,OAAO,KAAK;GAElB,KAAK,aAAa,KAAK,iBAAiB;GAExC,IAAI,KAAK,UACP,eAAe,KAAK,YAAa,KAAK,QAAQ;GAGhD,MAAM,SAAwB,CAAC,WAAW;GAE1C,IAAI,KAAK,QACP,OAAO,KAAK,KAAK,MAAM;GAGzB,kBAAkB,KAAK,YAAa,MAAM;EAC5C;CACF;AACF"}
+{"version":3,"file":"skin.js","names":["shadowStyles","globalStyles"],"sources":["../../../src/presets/skin.ts"],"sourcesContent":["import { SKIN_HELP_TEXT, SKIN_HELP_URL } from '@videojs/core';\nimport { ReactiveElement } from '@videojs/element';\nimport {\n  applyShadowStyles,\n  createShadowStyle,\n  ensureGlobalStyle,\n  renderTemplate,\n  type ShadowStyle,\n} from '@videojs/utils/dom';\n\nimport globalStyles from '../define/global.css?inline';\nimport shadowStyles from '../define/shadow.css?inline';\n\nconst STYLES_ID = '__media-styles';\nconst shadowSheet = createShadowStyle(shadowStyles);\n\n/**\n * Base element for skin definitions. Attaches a shadow root, clones `static template` into it, and applies shared +\n * per-skin styles via `adoptedStyleSheets` (or `<style>` fallback).\n */\nexport class SkinElement extends ReactiveElement {\n  static shadowRootOptions: ShadowRootInit = { mode: 'open' };\n  static styles?: ShadowStyle;\n  static template?: HTMLTemplateElement | null;\n\n  constructor() {\n    super();\n\n    ensureGlobalStyle(STYLES_ID, globalStyles);\n\n    if (!this.shadowRoot) {\n      const ctor = this.constructor as typeof SkinElement;\n\n      this.attachShadow(ctor.shadowRootOptions);\n\n      if (ctor.template) {\n        renderTemplate(this.shadowRoot!, ctor.template);\n      }\n\n      this.shadowRoot!.append(createHelpLink(this.ownerDocument));\n\n      const sheets: ShadowStyle[] = [shadowSheet];\n\n      if (ctor.styles) {\n        sheets.push(ctor.styles);\n      }\n\n      applyShadowStyles(this.shadowRoot!, sheets);\n    }\n  }\n}\n\n/** Every packaged skin links to the page that explains what the player is. See `SKIN_HELP_URL`. */\nfunction createHelpLink(doc: Document): HTMLAnchorElement {\n  const link = doc.createElement('a');\n\n  link.rel = 'help';\n  link.href = SKIN_HELP_URL;\n  link.hidden = true;\n  link.textContent = SKIN_HELP_TEXT;\n\n  return link;\n}\n"],"mappings":";;;;;;AAaA,MAAM,YAAY;AAClB,MAAM,cAAc,kBAAkBA,cAAY;;;;;AAMlD,IAAa,cAAb,cAAiC,gBAAgB;;EACJ,KAAA,oBAAA,EAAE,MAAM,OAAO;;CAI1D,cAAc;EACZ,MAAM;EAEN,kBAAkB,WAAWC,cAAY;EAEzC,IAAI,CAAC,KAAK,YAAY;GACpB,MAAM,OAAO,KAAK;GAElB,KAAK,aAAa,KAAK,iBAAiB;GAExC,IAAI,KAAK,UACP,eAAe,KAAK,YAAa,KAAK,QAAQ;GAGhD,KAAK,WAAY,OAAO,eAAe,KAAK,aAAa,CAAC;GAE1D,MAAM,SAAwB,CAAC,WAAW;GAE1C,IAAI,KAAK,QACP,OAAO,KAAK,KAAK,MAAM;GAGzB,kBAAkB,KAAK,YAAa,MAAM;EAC5C;CACF;AACF;;AAGA,SAAS,eAAe,KAAkC;CACxD,MAAM,OAAO,IAAI,cAAc,GAAG;CAElC,KAAK,MAAM;CACX,KAAK,OAAO;CACZ,KAAK,SAAS;CACd,KAAK,cAAc;CAEnB,OAAO;AACT"}

package/dist/dev/presets/video/player.d.ts

@@ -1,5 +1,5 @@
 import { PlayerElementConstructor } from "../../store/types.js";
-import { PlayerController as PlayerController$1 } from "../../player/player-controller.js";
+import { PlayerController as PlayerController$1 } from "../../player/controller.js";
 import { index_d_exports } from "../../index.js";
 //#region src/presets/video/player.d.ts
 declare const PlayerElement: PlayerElementConstructor<index_d_exports.VideoPlayerStore>;

package/dist/dev/registration/ui-compounds.js

@@ -1,48 +1,48 @@
 import { safeDefine } from "./safe-define.js";
-import { MenuRadioItemElement } from "../ui/menu/menu-radio-item-element.js";
-import { MenuRadioGroupElement } from "../ui/menu/menu-radio-group-element.js";
-import { MenuItemIndicatorElement } from "../ui/menu/menu-item-indicator-element.js";
-import { ControlsBackdropElement } from "../ui/controls/controls-backdrop-element.js";
-import { ControlsContentElement } from "../ui/controls/controls-content-element.js";
-import { ControlsElement } from "../ui/controls/controls-element.js";
-import { ControlsGroupElement } from "../ui/controls/controls-group-element.js";
-import { DialogBackdropElement } from "../ui/dialog/dialog-backdrop-element.js";
-import { DialogCloseElement } from "../ui/dialog/dialog-close-element.js";
-import { DialogDescriptionElement } from "../ui/dialog/dialog-description-element.js";
-import { DialogPopupElement } from "../ui/dialog/dialog-popup-element.js";
-import { DialogTitleElement } from "../ui/dialog/dialog-title-element.js";
-import { ErrorDialogElement } from "../ui/error-dialog/error-dialog-element.js";
-import { MenuCheckboxItemElement } from "../ui/menu/menu-checkbox-item-element.js";
-import { MenuContentElement } from "../ui/menu/menu-content-element.js";
-import { MenuElement } from "../ui/menu/menu-element.js";
-import { MenuGroupElement } from "../ui/menu/menu-group-element.js";
-import { MenuGroupLabelElement } from "../ui/menu/menu-group-label-element.js";
-import { MenuItemElement } from "../ui/menu/menu-item-element.js";
-import { MenuSeparatorElement } from "../ui/menu/menu-separator-element.js";
-import { SeekIndicatorElement } from "../ui/seek-indicator/seek-indicator-element.js";
-import { SeekIndicatorValueElement } from "../ui/seek-indicator/seek-indicator-value-element.js";
-import { SliderBufferElement } from "../ui/slider/slider-buffer-element.js";
-import { SliderFillElement } from "../ui/slider/slider-fill-element.js";
-import { SliderPreviewElement } from "../ui/slider/slider-preview-element.js";
-import { SliderThumbElement } from "../ui/slider/slider-thumb-element.js";
-import { SliderThumbnailElement } from "../ui/slider/slider-thumbnail-element.js";
-import { SliderTrackElement } from "../ui/slider/slider-track-element.js";
-import { SliderValueElement } from "../ui/slider/slider-value-element.js";
-import { StatusAnnouncerElement } from "../ui/status-announcer/status-announcer-element.js";
-import { StatusIndicatorElement } from "../ui/status-indicator/status-indicator-element.js";
-import { StatusIndicatorValueElement } from "../ui/status-indicator/status-indicator-value-element.js";
-import { TimeElement } from "../ui/time/time-element.js";
-import { TimeGroupElement } from "../ui/time/time-group-element.js";
-import { TimeSeparatorElement } from "../ui/time/time-separator-element.js";
-import { TimeSliderElement } from "../ui/time-slider/time-slider-element.js";
-import { TooltipLabelElement } from "../ui/tooltip/tooltip-label-element.js";
-import { TooltipShortcutElement } from "../ui/tooltip/tooltip-shortcut-element.js";
-import { TooltipElement } from "../ui/tooltip/tooltip-element.js";
-import { TooltipGroupElement } from "../ui/tooltip/tooltip-group-element.js";
-import { VolumeIndicatorElement } from "../ui/volume-indicator/volume-indicator-element.js";
-import { VolumeIndicatorFillElement } from "../ui/volume-indicator/volume-indicator-fill-element.js";
-import { VolumeIndicatorValueElement } from "../ui/volume-indicator/volume-indicator-value-element.js";
-import { VolumeSliderElement } from "../ui/volume-slider/volume-slider-element.js";
+import { MenuRadioItemElement } from "../ui/menu/radio-item.js";
+import { MenuRadioGroupElement } from "../ui/menu/radio-group.js";
+import { MenuItemIndicatorElement } from "../ui/menu/item-indicator.js";
+import { ControlsBackdropElement } from "../ui/controls/backdrop.js";
+import { ControlsContentElement } from "../ui/controls/content.js";
+import { ControlsElement } from "../ui/controls/element.js";
+import { ControlsGroupElement } from "../ui/controls/group.js";
+import { DialogBackdropElement } from "../ui/dialog/backdrop.js";
+import { DialogCloseElement } from "../ui/dialog/close.js";
+import { DialogDescriptionElement } from "../ui/dialog/description.js";
+import { DialogPopupElement } from "../ui/dialog/popup.js";
+import { DialogTitleElement } from "../ui/dialog/title.js";
+import { ErrorDialogElement } from "../ui/error-dialog/element.js";
+import { MenuCheckboxItemElement } from "../ui/menu/checkbox-item.js";
+import { MenuContentElement } from "../ui/menu/content.js";
+import { MenuElement } from "../ui/menu/element.js";
+import { MenuGroupElement } from "../ui/menu/group.js";
+import { MenuGroupLabelElement } from "../ui/menu/group-label.js";
+import { MenuItemElement } from "../ui/menu/item.js";
+import { MenuSeparatorElement } from "../ui/menu/separator.js";
+import { SeekIndicatorElement } from "../ui/seek-indicator/element.js";
+import { SeekIndicatorValueElement } from "../ui/seek-indicator/value.js";
+import { SliderBufferElement } from "../ui/slider/buffer.js";
+import { SliderFillElement } from "../ui/slider/fill.js";
+import { SliderPreviewElement } from "../ui/slider/preview.js";
+import { SliderThumbElement } from "../ui/slider/thumb.js";
+import { SliderThumbnailElement } from "../ui/slider/thumbnail.js";
+import { SliderTrackElement } from "../ui/slider/track.js";
+import { SliderValueElement } from "../ui/slider/value.js";
+import { StatusAnnouncerElement } from "../ui/status-announcer/element.js";
+import { StatusIndicatorElement } from "../ui/status-indicator/element.js";
+import { StatusIndicatorValueElement } from "../ui/status-indicator/value.js";
+import { TimeElement } from "../ui/time/element.js";
+import { TimeGroupElement } from "../ui/time/group.js";
+import { TimeSeparatorElement } from "../ui/time/separator.js";
+import { TimeSliderElement } from "../ui/time-slider/element.js";
+import { TooltipLabelElement } from "../ui/tooltip/label.js";
+import { TooltipShortcutElement } from "../ui/tooltip/shortcut.js";
+import { TooltipElement } from "../ui/tooltip/element.js";
+import { TooltipGroupElement } from "../ui/tooltip/group.js";
+import { VolumeIndicatorElement } from "../ui/volume-indicator/element.js";
+import { VolumeIndicatorFillElement } from "../ui/volume-indicator/fill.js";
+import { VolumeIndicatorValueElement } from "../ui/volume-indicator/value.js";
+import { VolumeSliderElement } from "../ui/volume-slider/element.js";
 //#region src/registration/ui-compounds.ts
 function defineMenu() {
 	safeDefine(MenuElement);

package/dist/dev/registration/ui-compounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-compounds.js","names":[],"sources":["../../../src/registration/ui-compounds.ts"],"sourcesContent":["import { AlertDialogElement } from '../ui/alert-dialog/alert-dialog-element';\nimport { ControlsBackdropElement } from '../ui/controls/controls-backdrop-element';\nimport { ControlsContentElement } from '../ui/controls/controls-content-element';\nimport { ControlsElement } from '../ui/controls/controls-element';\nimport { ControlsGroupElement } from '../ui/controls/controls-group-element';\nimport { DialogBackdropElement } from '../ui/dialog/dialog-backdrop-element';\nimport { DialogCloseElement } from '../ui/dialog/dialog-close-element';\nimport { DialogDescriptionElement } from '../ui/dialog/dialog-description-element';\nimport { DialogPopupElement } from '../ui/dialog/dialog-popup-element';\nimport { DialogTitleElement } from '../ui/dialog/dialog-title-element';\nimport { ErrorDialogElement } from '../ui/error-dialog/error-dialog-element';\nimport { MenuCheckboxItemElement } from '../ui/menu/menu-checkbox-item-element';\nimport { MenuContentElement } from '../ui/menu/menu-content-element';\nimport { MenuElement } from '../ui/menu/menu-element';\nimport { MenuGroupElement } from '../ui/menu/menu-group-element';\nimport { MenuGroupLabelElement } from '../ui/menu/menu-group-label-element';\nimport { MenuItemElement } from '../ui/menu/menu-item-element';\nimport { MenuItemIndicatorElement } from '../ui/menu/menu-item-indicator-element';\nimport { MenuRadioGroupElement } from '../ui/menu/menu-radio-group-element';\nimport { MenuRadioItemElement } from '../ui/menu/menu-radio-item-element';\nimport { MenuSeparatorElement } from '../ui/menu/menu-separator-element';\nimport { SeekIndicatorElement } from '../ui/seek-indicator/seek-indicator-element';\nimport { SeekIndicatorValueElement } from '../ui/seek-indicator/seek-indicator-value-element';\nimport { SliderBufferElement } from '../ui/slider/slider-buffer-element';\nimport { SliderElement } from '../ui/slider/slider-element';\nimport { SliderFillElement } from '../ui/slider/slider-fill-element';\nimport { SliderPreviewElement } from '../ui/slider/slider-preview-element';\nimport { SliderThumbElement } from '../ui/slider/slider-thumb-element';\nimport { SliderThumbnailElement } from '../ui/slider/slider-thumbnail-element';\nimport { SliderTrackElement } from '../ui/slider/slider-track-element';\nimport { SliderValueElement } from '../ui/slider/slider-value-element';\nimport { StatusAnnouncerElement } from '../ui/status-announcer/status-announcer-element';\nimport { StatusIndicatorElement } from '../ui/status-indicator/status-indicator-element';\nimport { StatusIndicatorValueElement } from '../ui/status-indicator/status-indicator-value-element';\nimport { TimeSliderElement } from '../ui/time-slider/time-slider-element';\nimport { TimeElement } from '../ui/time/time-element';\nimport { TimeGroupElement } from '../ui/time/time-group-element';\nimport { TimeSeparatorElement } from '../ui/time/time-separator-element';\nimport { TooltipElement } from '../ui/tooltip/tooltip-element';\nimport { TooltipGroupElement } from '../ui/tooltip/tooltip-group-element';\nimport { TooltipLabelElement } from '../ui/tooltip/tooltip-label-element';\nimport { TooltipShortcutElement } from '../ui/tooltip/tooltip-shortcut-element';\nimport { VolumeIndicatorElement } from '../ui/volume-indicator/volume-indicator-element';\nimport { VolumeIndicatorFillElement } from '../ui/volume-indicator/volume-indicator-fill-element';\nimport { VolumeIndicatorValueElement } from '../ui/volume-indicator/volume-indicator-value-element';\nimport { VolumeSliderElement } from '../ui/volume-slider/volume-slider-element';\nimport { safeDefine } from './safe-define';\n\n// ── Define functions ────────────────────────────────────────────────────\n\nexport function defineMenu(): void {\n  // Root first — part elements consume its context.\n  safeDefine(MenuElement);\n  safeDefine(MenuContentElement);\n  safeDefine(MenuItemElement);\n  safeDefine(MenuGroupLabelElement);\n  safeDefine(MenuSeparatorElement);\n  safeDefine(MenuGroupElement);\n  safeDefine(MenuRadioGroupElement);\n  safeDefine(MenuRadioItemElement);\n  safeDefine(MenuCheckboxItemElement);\n  safeDefine(MenuItemIndicatorElement);\n}\n\nexport function defineControls(): void {\n  safeDefine(ControlsElement);\n  safeDefine(ControlsBackdropElement);\n  safeDefine(ControlsContentElement);\n  safeDefine(ControlsGroupElement);\n}\n\nfunction defineDialogParts(): void {\n  safeDefine(DialogBackdropElement);\n  safeDefine(DialogPopupElement);\n  safeDefine(DialogCloseElement);\n  safeDefine(DialogDescriptionElement);\n  safeDefine(DialogTitleElement);\n}\n\nexport function defineAlertDialog(): void {\n  // Parent first — child elements consume its context.\n  safeDefine(AlertDialogElement);\n  defineDialogParts();\n}\n\nexport function defineErrorDialog(): void {\n  // Parent first — child elements consume its context.\n  safeDefine(ErrorDialogElement);\n  defineDialogParts();\n}\n\nexport function defineInputIndicators(): void {\n  safeDefine(StatusAnnouncerElement);\n  safeDefine(StatusIndicatorElement);\n  safeDefine(StatusIndicatorValueElement);\n  safeDefine(VolumeIndicatorElement);\n  safeDefine(VolumeIndicatorFillElement);\n  safeDefine(VolumeIndicatorValueElement);\n  safeDefine(SeekIndicatorElement);\n  safeDefine(SeekIndicatorValueElement);\n}\n\n/** Shared slider sub-elements used by all slider types. */\nexport function defineSliderParts(): void {\n  safeDefine(SliderFillElement);\n  safeDefine(SliderPreviewElement);\n  safeDefine(SliderThumbElement);\n  safeDefine(SliderTrackElement);\n  safeDefine(SliderValueElement);\n}\n\nexport function defineSlider(): void {\n  safeDefine(SliderElement);\n  defineSliderParts();\n}\n\nexport function defineTime(): void {\n  safeDefine(TimeElement);\n  safeDefine(TimeGroupElement);\n  safeDefine(TimeSeparatorElement);\n}\n\nexport function defineTimeSlider(): void {\n  safeDefine(TimeSliderElement);\n  defineSliderParts();\n  safeDefine(SliderBufferElement);\n  safeDefine(SliderThumbnailElement);\n}\n\nexport function defineTooltip(): void {\n  safeDefine(TooltipGroupElement);\n  safeDefine(TooltipLabelElement);\n  safeDefine(TooltipShortcutElement);\n  safeDefine(TooltipElement);\n}\n\nexport function defineVolumeSlider(): void {\n  safeDefine(VolumeSliderElement);\n  defineSliderParts();\n}\n\nexport function defineSliders(): void {\n  safeDefine(TimeSliderElement);\n  safeDefine(VolumeSliderElement);\n  defineSliderParts();\n  safeDefine(SliderBufferElement);\n  safeDefine(SliderThumbnailElement);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,aAAmB;CAEjC,WAAW,WAAW;CACtB,WAAW,kBAAkB;CAC7B,WAAW,eAAe;CAC1B,WAAW,qBAAqB;CAChC,WAAW,oBAAoB;CAC/B,WAAW,gBAAgB;CAC3B,WAAW,qBAAqB;CAChC,WAAW,oBAAoB;CAC/B,WAAW,uBAAuB;CAClC,WAAW,wBAAwB;AACrC;AAEA,SAAgB,iBAAuB;CACrC,WAAW,eAAe;CAC1B,WAAW,uBAAuB;CAClC,WAAW,sBAAsB;CACjC,WAAW,oBAAoB;AACjC;AAEA,SAAS,oBAA0B;CACjC,WAAW,qBAAqB;CAChC,WAAW,kBAAkB;CAC7B,WAAW,kBAAkB;CAC7B,WAAW,wBAAwB;CACnC,WAAW,kBAAkB;AAC/B;AAQA,SAAgB,oBAA0B;CAExC,WAAW,kBAAkB;CAC7B,kBAAkB;AACpB;AAEA,SAAgB,wBAA8B;CAC5C,WAAW,sBAAsB;CACjC,WAAW,sBAAsB;CACjC,WAAW,2BAA2B;CACtC,WAAW,sBAAsB;CACjC,WAAW,0BAA0B;CACrC,WAAW,2BAA2B;CACtC,WAAW,oBAAoB;CAC/B,WAAW,yBAAyB;AACtC;;AAGA,SAAgB,oBAA0B;CACxC,WAAW,iBAAiB;CAC5B,WAAW,oBAAoB;CAC/B,WAAW,kBAAkB;CAC7B,WAAW,kBAAkB;CAC7B,WAAW,kBAAkB;AAC/B;AAOA,SAAgB,aAAmB;CACjC,WAAW,WAAW;CACtB,WAAW,gBAAgB;CAC3B,WAAW,oBAAoB;AACjC;AAEA,SAAgB,mBAAyB;CACvC,WAAW,iBAAiB;CAC5B,kBAAkB;CAClB,WAAW,mBAAmB;CAC9B,WAAW,sBAAsB;AACnC;AAEA,SAAgB,gBAAsB;CACpC,WAAW,mBAAmB;CAC9B,WAAW,mBAAmB;CAC9B,WAAW,sBAAsB;CACjC,WAAW,cAAc;AAC3B;AAEA,SAAgB,qBAA2B;CACzC,WAAW,mBAAmB;CAC9B,kBAAkB;AACpB;AAEA,SAAgB,gBAAsB;CACpC,WAAW,iBAAiB;CAC5B,WAAW,mBAAmB;CAC9B,kBAAkB;CAClB,WAAW,mBAAmB;CAC9B,WAAW,sBAAsB;AACnC"}
+{"version":3,"file":"ui-compounds.js","names":[],"sources":["../../../src/registration/ui-compounds.ts"],"sourcesContent":["import { AlertDialogElement } from '../ui/alert-dialog/element';\nimport { ControlsBackdropElement } from '../ui/controls/backdrop';\nimport { ControlsContentElement } from '../ui/controls/content';\nimport { ControlsElement } from '../ui/controls/element';\nimport { ControlsGroupElement } from '../ui/controls/group';\nimport { DialogBackdropElement } from '../ui/dialog/backdrop';\nimport { DialogCloseElement } from '../ui/dialog/close';\nimport { DialogDescriptionElement } from '../ui/dialog/description';\nimport { DialogPopupElement } from '../ui/dialog/popup';\nimport { DialogTitleElement } from '../ui/dialog/title';\nimport { ErrorDialogElement } from '../ui/error-dialog/element';\nimport { MenuCheckboxItemElement } from '../ui/menu/checkbox-item';\nimport { MenuContentElement } from '../ui/menu/content';\nimport { MenuElement } from '../ui/menu/element';\nimport { MenuGroupElement } from '../ui/menu/group';\nimport { MenuGroupLabelElement } from '../ui/menu/group-label';\nimport { MenuItemElement } from '../ui/menu/item';\nimport { MenuItemIndicatorElement } from '../ui/menu/item-indicator';\nimport { MenuRadioGroupElement } from '../ui/menu/radio-group';\nimport { MenuRadioItemElement } from '../ui/menu/radio-item';\nimport { MenuSeparatorElement } from '../ui/menu/separator';\nimport { SeekIndicatorElement } from '../ui/seek-indicator/element';\nimport { SeekIndicatorValueElement } from '../ui/seek-indicator/value';\nimport { SliderBufferElement } from '../ui/slider/buffer';\nimport { SliderElement } from '../ui/slider/element';\nimport { SliderFillElement } from '../ui/slider/fill';\nimport { SliderPreviewElement } from '../ui/slider/preview';\nimport { SliderThumbElement } from '../ui/slider/thumb';\nimport { SliderThumbnailElement } from '../ui/slider/thumbnail';\nimport { SliderTrackElement } from '../ui/slider/track';\nimport { SliderValueElement } from '../ui/slider/value';\nimport { StatusAnnouncerElement } from '../ui/status-announcer/element';\nimport { StatusIndicatorElement } from '../ui/status-indicator/element';\nimport { StatusIndicatorValueElement } from '../ui/status-indicator/value';\nimport { TimeSliderElement } from '../ui/time-slider/element';\nimport { TimeElement } from '../ui/time/element';\nimport { TimeGroupElement } from '../ui/time/group';\nimport { TimeSeparatorElement } from '../ui/time/separator';\nimport { TooltipElement } from '../ui/tooltip/element';\nimport { TooltipGroupElement } from '../ui/tooltip/group';\nimport { TooltipLabelElement } from '../ui/tooltip/label';\nimport { TooltipShortcutElement } from '../ui/tooltip/shortcut';\nimport { VolumeIndicatorElement } from '../ui/volume-indicator/element';\nimport { VolumeIndicatorFillElement } from '../ui/volume-indicator/fill';\nimport { VolumeIndicatorValueElement } from '../ui/volume-indicator/value';\nimport { VolumeSliderElement } from '../ui/volume-slider/element';\nimport { safeDefine } from './safe-define';\n\n// ── Define functions ────────────────────────────────────────────────────\n\nexport function defineMenu(): void {\n  // Root first — part elements consume its context.\n  safeDefine(MenuElement);\n  safeDefine(MenuContentElement);\n  safeDefine(MenuItemElement);\n  safeDefine(MenuGroupLabelElement);\n  safeDefine(MenuSeparatorElement);\n  safeDefine(MenuGroupElement);\n  safeDefine(MenuRadioGroupElement);\n  safeDefine(MenuRadioItemElement);\n  safeDefine(MenuCheckboxItemElement);\n  safeDefine(MenuItemIndicatorElement);\n}\n\nexport function defineControls(): void {\n  safeDefine(ControlsElement);\n  safeDefine(ControlsBackdropElement);\n  safeDefine(ControlsContentElement);\n  safeDefine(ControlsGroupElement);\n}\n\nfunction defineDialogParts(): void {\n  safeDefine(DialogBackdropElement);\n  safeDefine(DialogPopupElement);\n  safeDefine(DialogCloseElement);\n  safeDefine(DialogDescriptionElement);\n  safeDefine(DialogTitleElement);\n}\n\nexport function defineAlertDialog(): void {\n  // Parent first — child elements consume its context.\n  safeDefine(AlertDialogElement);\n  defineDialogParts();\n}\n\nexport function defineErrorDialog(): void {\n  // Parent first — child elements consume its context.\n  safeDefine(ErrorDialogElement);\n  defineDialogParts();\n}\n\nexport function defineInputIndicators(): void {\n  safeDefine(StatusAnnouncerElement);\n  safeDefine(StatusIndicatorElement);\n  safeDefine(StatusIndicatorValueElement);\n  safeDefine(VolumeIndicatorElement);\n  safeDefine(VolumeIndicatorFillElement);\n  safeDefine(VolumeIndicatorValueElement);\n  safeDefine(SeekIndicatorElement);\n  safeDefine(SeekIndicatorValueElement);\n}\n\n/** Shared slider sub-elements used by all slider types. */\nexport function defineSliderParts(): void {\n  safeDefine(SliderFillElement);\n  safeDefine(SliderPreviewElement);\n  safeDefine(SliderThumbElement);\n  safeDefine(SliderTrackElement);\n  safeDefine(SliderValueElement);\n}\n\nexport function defineSlider(): void {\n  safeDefine(SliderElement);\n  defineSliderParts();\n}\n\nexport function defineTime(): void {\n  safeDefine(TimeElement);\n  safeDefine(TimeGroupElement);\n  safeDefine(TimeSeparatorElement);\n}\n\nexport function defineTimeSlider(): void {\n  safeDefine(TimeSliderElement);\n  defineSliderParts();\n  safeDefine(SliderBufferElement);\n  safeDefine(SliderThumbnailElement);\n}\n\nexport function defineTooltip(): void {\n  safeDefine(TooltipGroupElement);\n  safeDefine(TooltipLabelElement);\n  safeDefine(TooltipShortcutElement);\n  safeDefine(TooltipElement);\n}\n\nexport function defineVolumeSlider(): void {\n  safeDefine(VolumeSliderElement);\n  defineSliderParts();\n}\n\nexport function defineSliders(): void {\n  safeDefine(TimeSliderElement);\n  safeDefine(VolumeSliderElement);\n  defineSliderParts();\n  safeDefine(SliderBufferElement);\n  safeDefine(SliderThumbnailElement);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,aAAmB;CAEjC,WAAW,WAAW;CACtB,WAAW,kBAAkB;CAC7B,WAAW,eAAe;CAC1B,WAAW,qBAAqB;CAChC,WAAW,oBAAoB;CAC/B,WAAW,gBAAgB;CAC3B,WAAW,qBAAqB;CAChC,WAAW,oBAAoB;CAC/B,WAAW,uBAAuB;CAClC,WAAW,wBAAwB;AACrC;AAEA,SAAgB,iBAAuB;CACrC,WAAW,eAAe;CAC1B,WAAW,uBAAuB;CAClC,WAAW,sBAAsB;CACjC,WAAW,oBAAoB;AACjC;AAEA,SAAS,oBAA0B;CACjC,WAAW,qBAAqB;CAChC,WAAW,kBAAkB;CAC7B,WAAW,kBAAkB;CAC7B,WAAW,wBAAwB;CACnC,WAAW,kBAAkB;AAC/B;AAQA,SAAgB,oBAA0B;CAExC,WAAW,kBAAkB;CAC7B,kBAAkB;AACpB;AAEA,SAAgB,wBAA8B;CAC5C,WAAW,sBAAsB;CACjC,WAAW,sBAAsB;CACjC,WAAW,2BAA2B;CACtC,WAAW,sBAAsB;CACjC,WAAW,0BAA0B;CACrC,WAAW,2BAA2B;CACtC,WAAW,oBAAoB;CAC/B,WAAW,yBAAyB;AACtC;;AAGA,SAAgB,oBAA0B;CACxC,WAAW,iBAAiB;CAC5B,WAAW,oBAAoB;CAC/B,WAAW,kBAAkB;CAC7B,WAAW,kBAAkB;CAC7B,WAAW,kBAAkB;AAC/B;AAOA,SAAgB,aAAmB;CACjC,WAAW,WAAW;CACtB,WAAW,gBAAgB;CAC3B,WAAW,oBAAoB;AACjC;AAEA,SAAgB,mBAAyB;CACvC,WAAW,iBAAiB;CAC5B,kBAAkB;CAClB,WAAW,mBAAmB;CAC9B,WAAW,sBAAsB;AACnC;AAEA,SAAgB,gBAAsB;CACpC,WAAW,mBAAmB;CAC9B,WAAW,mBAAmB;CAC9B,WAAW,sBAAsB;CACjC,WAAW,cAAc;AAC3B;AAEA,SAAgB,qBAA2B;CACzC,WAAW,mBAAmB;CAC9B,kBAAkB;AACpB;AAEA,SAAgB,gBAAsB;CACpC,WAAW,iBAAiB;CAC5B,WAAW,mBAAmB;CAC9B,kBAAkB;CAClB,WAAW,mBAAmB;CAC9B,WAAW,sBAAsB;AACnC"}

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

@@ -0,0 +1,25 @@
+import { PlayerController } from "../../player/controller.js";
+import { MediaButtonElement } from "../media-button-element.js";
+import { index_d_exports } from "../../index.js";
+import { AirPlayButtonCore } from "@videojs/core";
+import { MediaRemotePlaybackState } from "@videojs/media";
+//#region src/ui/airplay-button/element.d.ts
+declare class AirPlayButtonElement extends MediaButtonElement<AirPlayButtonCore> {
+  static readonly tagName = "media-airplay-button";
+  protected readonly core: AirPlayButtonCore;
+  protected readonly stateAttrMap: {
+    readonly state: 'data-airplay-state';
+    readonly availability: 'data-availability';
+    readonly disabled: 'data-disabled';
+    readonly hidden: 'data-hidden';
+  };
+  protected readonly mediaState: PlayerController<index_d_exports.AnyPlayerStore, {
+    remotePlaybackState: import("@videojs/media").RemotePlaybackConnectionState;
+    remotePlaybackAvailability: import("@videojs/media").MediaFeatureAvailability;
+    toggleRemotePlayback: () => Promise<void>;
+  } | undefined>;
+  protected activate(state: MediaRemotePlaybackState): void;
+}
+//#endregion
+export { AirPlayButtonElement };
+//# sourceMappingURL=element.d.ts.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/airplay-button/element.ts"],"sourcesContent":["import { AirPlayButtonCore, AirPlayButtonDataAttrs } from '@videojs/core';\nimport { selectRemotePlayback } from '@videojs/core/dom';\nimport type { MediaRemotePlaybackState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class AirPlayButtonElement extends MediaButtonElement<AirPlayButtonCore> {\n  static readonly tagName = 'media-airplay-button';\n\n  protected readonly core = new AirPlayButtonCore();\n  protected readonly stateAttrMap = AirPlayButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectRemotePlayback);\n\n  protected activate(state: MediaRemotePlaybackState): void {\n    this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,uBAAb,cAA0C,mBAAsC;;;EAGpD,KAAA,OAAA,IAAI,kBAAkB;EACd,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,oBAAoB;;;EAJpE,KAAA,UAAA;;CAM1B,SAAmB,OAAuC;EACxD,KAAK,KAAK,OAAO,KAAK;CACxB;AACF"}

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

@@ -0,0 +1,14 @@
+import { DialogElementBase } from "../dialog/element.js";
+//#region src/ui/alert-dialog/element.d.ts
+/**
+ * A modal dialog with alert semantics.
+ *
+ * @fires open-change - Fired when the dialog's open state changes.
+ */
+declare class AlertDialogElement extends DialogElementBase {
+  static readonly tagName = "media-alert-dialog";
+  constructor();
+}
+//#endregion
+export { AlertDialogElement };
+//# sourceMappingURL=element.d.ts.map

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

@@ -0,0 +1,25 @@
+import { DialogElementBase } from "../dialog/element.js";
+import { AlertDialogCore, AlertDialogDataAttrs } from "@videojs/core";
+//#region src/ui/alert-dialog/element.ts
+/**
+* A modal dialog with alert semantics.
+*
+* @fires open-change - Fired when the dialog's open state changes.
+*/
+var AlertDialogElement = class extends DialogElementBase {
+	static {
+		this.tagName = "media-alert-dialog";
+	}
+	constructor() {
+		super({
+			core: new AlertDialogCore(),
+			stateAttrMap: AlertDialogDataAttrs,
+			idPrefix: "alert-dialog",
+			bindTrigger: false
+		});
+	}
+};
+//#endregion
+export { AlertDialogElement };
+
+//# sourceMappingURL=element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/alert-dialog/element.ts"],"sourcesContent":["import { AlertDialogCore, AlertDialogDataAttrs } from '@videojs/core';\n\nimport { DialogElementBase } from '../dialog/element';\n\n/**\n * A modal dialog with alert semantics.\n *\n * @fires open-change - Fired when the dialog's open state changes.\n */\nexport class AlertDialogElement extends DialogElementBase {\n  static readonly tagName = 'media-alert-dialog';\n\n  constructor() {\n    super({\n      core: new AlertDialogCore(),\n      stateAttrMap: AlertDialogDataAttrs,\n      idPrefix: 'alert-dialog',\n      bindTrigger: false,\n    });\n  }\n}\n"],"mappings":";;;;;;;;AASA,IAAa,qBAAb,cAAwC,kBAAkB;;EAC9B,KAAA,UAAA;;CAE1B,cAAc;EACZ,MAAM;GACJ,MAAM,IAAI,gBAAgB;GAC1B,cAAc;GACd,UAAU;GACV,aAAa;EACf,CAAC;CACH;AACF"}

package/dist/dev/ui/audio-track-radio-group/element.d.ts

@@ -0,0 +1,36 @@
+import { MenuRadioGroupElement } from "../menu/radio-group.js";
+import { AudioTrackRadioGroupCore } from "@videojs/core";
+import { PropertyValues } from "@videojs/element";
+import { Text } from "@videojs/core/i18n";
+//#region src/ui/audio-track-radio-group/element.d.ts
+/**
+ * Menu radio group that generates a `<media-menu-radio-item>` per available audio track and shares the selected label
+ * and availability with an enclosing menu. An optional `<template>` holding one `<media-menu-radio-item>` customizes
+ * each generated item.
+ */
+declare class AudioTrackRadioGroupElement extends MenuRadioGroupElement {
+  #private;
+  static readonly tagName = "media-audio-track-radio-group";
+  static properties: {
+    value: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+    label: {
+      type: StringConstructor;
+    };
+  };
+  disabled: boolean;
+  label: Text | string;
+  formatTrack: (track: import("@videojs/media").MediaAudioTrack) => Text | string;
+  connectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+}
+declare namespace AudioTrackRadioGroupElement {
+  type State = AudioTrackRadioGroupCore.State;
+}
+//#endregion
+export { AudioTrackRadioGroupElement };
+//# sourceMappingURL=element.d.ts.map