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

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

@@ -1,12 +1,12 @@
 import { PlayerController } from "../../player/controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
 import { index_d_exports } from "../../index.js";
-import { CaptionsButtonCore } from "@videojs/core";
+import { CaptionsButtonCore, CaptionsButtonState } from "@videojs/core";
 import { UIEvent } from "@videojs/core/dom";
 import { PropertyValues } from "@videojs/element";
 import { MediaTextTrackState } from "@videojs/media";
 //#region src/ui/captions-button/element.d.ts
-declare class CaptionsButtonElement extends MediaButtonElement<CaptionsButtonCore> {
+export declare class CaptionsButtonElement extends MediaButtonElement<CaptionsButtonState, MediaTextTrackState> {
   #private;
   static readonly tagName = "media-captions-button";
   static properties: {
@@ -34,14 +34,12 @@ declare class CaptionsButtonElement extends MediaButtonElement<CaptionsButtonCor
     readonly hidden: 'data-hidden';
   };
   protected readonly mediaState: PlayerController<index_d_exports.AnyPlayerStore, {
-    chaptersCues: import("@videojs/media").MediaTextCue[];
-    thumbnailCues: import("@videojs/media").MediaTextCue[];
-    thumbnailTrackSrc: string | null;
-    thumbnailTrackCrossOrigin: 'anonymous' | 'use-credentials' | null;
     textTrackList: import("@videojs/media").MediaTextTrack[];
     subtitlesShowing: boolean;
     toggleSubtitles: (forceShow?: boolean) => boolean;
-    selectSubtitlesTrack: (value: string) => void;
+    selectSubtitlesTrack: (id: string | null) => void;
+    chaptersCues: import("@videojs/media").MediaTextCue[];
+    thumbnailsTrack: import("@videojs/media").MediaThumbnailsTrack | null;
   } | undefined>;
   protected readonly hotkeyAction = "toggleSubtitles";
   connectedCallback(): void;
@@ -50,9 +48,8 @@ declare class CaptionsButtonElement extends MediaButtonElement<CaptionsButtonCor
   protected willUpdate(changed: PropertyValues): void;
   protected update(changed: PropertyValues): void;
 }
-declare namespace CaptionsButtonElement {
-  type State = CaptionsButtonCore.State;
+export declare namespace CaptionsButtonElement {
+  type State = CaptionsButtonState;
 }
 //#endregion
-export { CaptionsButtonElement };
 //# sourceMappingURL=element.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#defaultCommandfor","#syncCommandFor"],"sources":["../../../../src/ui/captions-button/element.ts"],"sourcesContent":["import { CaptionsButtonCore, CaptionsButtonDataAttrs } from '@videojs/core';\nimport { applyElementProps, selectTextTrack, type UIEvent } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaTextTrackState } from '@videojs/media';\nimport { isCaptionOrSubtitleTrack } from '@videojs/utils/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { toggleCommandTarget } from '../command-for';\nimport { MediaButtonElement } from '../media-button-element';\n\nfunction getCaptionTrackCount(state: MediaTextTrackState): number {\n  return state.textTrackList.filter(isCaptionOrSubtitleTrack).length;\n}\n\nexport class CaptionsButtonElement extends MediaButtonElement<CaptionsButtonCore> {\n  static readonly tagName = 'media-captions-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n    commandfor: { type: String },\n    menuFor: { type: String, attribute: 'menu-for' },\n  } satisfies PropertyDeclarationMap<'label' | 'disabled' | 'commandfor' | 'menuFor'>;\n\n  commandfor: string | undefined = undefined;\n  menuFor: string | undefined = undefined;\n  #defaultCommandfor: string | undefined = undefined;\n\n  protected readonly core = new CaptionsButtonCore();\n  protected readonly stateAttrMap = CaptionsButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectTextTrack);\n  protected override readonly hotkeyAction = 'toggleSubtitles';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.commandfor && this.commandfor !== this.menuFor) {\n      this.#defaultCommandfor = this.commandfor;\n    }\n  }\n\n  protected activate(state: MediaTextTrackState, event?: UIEvent): void {\n    if (this.menuFor && getCaptionTrackCount(state) > 1) {\n      if (event instanceof KeyboardEvent) {\n        toggleCommandTarget(this, this.menuFor);\n      }\n\n      return;\n    }\n\n    this.core.toggle(state);\n  }\n\n  protected override getIsButtonDisabled(): boolean {\n    const media = this.mediaState.value;\n\n    if (super.getIsButtonDisabled()) return true;\n\n    if (media && getCaptionTrackCount(media) === 0) return true;\n\n    return false;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    if (changed.has('commandfor') && this.commandfor !== this.menuFor) {\n      this.#defaultCommandfor = this.commandfor;\n    }\n\n    if (changed.has('commandfor') || changed.has('menuFor')) {\n      this.#syncCommandFor();\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n    if (!media) return;\n\n    this.#syncCommandFor(media);\n\n    if (this.menuFor && getCaptionTrackCount(media) > 1) {\n      applyElementProps(this, {\n        'aria-disabled': this.getIsButtonDisabled() ? 'true' : undefined,\n      });\n    }\n  }\n\n  #syncCommandFor(media?: MediaTextTrackState): void {\n    const state = media ?? this.mediaState.value;\n    const target = state && this.menuFor && getCaptionTrackCount(state) > 1 ? this.menuFor : this.#defaultCommandfor;\n\n    if (target) {\n      this.setAttribute('commandfor', target);\n    } else {\n      this.removeAttribute('commandfor');\n    }\n  }\n}\n\nexport namespace CaptionsButtonElement {\n  export type State = CaptionsButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAWA,SAAS,qBAAqB,OAAoC;CAChE,OAAO,MAAM,cAAc,OAAO,wBAAwB,CAAC,CAAC;AAC9D;AAEA,IAAa,wBAAb,cAA2C,mBAAuC;;;EAU/C,KAAA,aAAA,KAAA;EACH,KAAA,UAAA,KAAA;EACW,KAAA,qBAAA,KAAA;EAEf,KAAA,OAAA,IAAI,mBAAmB;EACf,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,eAAe;EAC9C,KAAA,eAAA;;;EAhBjB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;GAC1B,YAAY,EAAE,MAAM,OAAO;GAC3B,SAAS;IAAE,MAAM;IAAQ,WAAW;GAAW;EACjD;;CAIA;CAOA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,cAAc,KAAK,eAAe,KAAK,SAC9C,KAAKA,qBAAqB,KAAK;CAEnC;CAEA,SAAmB,OAA4B,OAAuB;EACpE,IAAI,KAAK,WAAW,qBAAqB,KAAK,IAAI,GAAG;GACnD,IAAI,iBAAiB,eACnB,oBAAoB,MAAM,KAAK,OAAO;GAGxC;EACF;EAEA,KAAK,KAAK,OAAO,KAAK;CACxB;CAEA,sBAAkD;EAChD,MAAM,QAAQ,KAAK,WAAW;EAE9B,IAAI,MAAM,oBAAoB,GAAG,OAAO;EAExC,IAAI,SAAS,qBAAqB,KAAK,MAAM,GAAG,OAAO;EAEvD,OAAO;CACT;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EAExB,IAAI,QAAQ,IAAI,YAAY,KAAK,KAAK,eAAe,KAAK,SACxD,KAAKA,qBAAqB,KAAK;EAGjC,IAAI,QAAQ,IAAI,YAAY,KAAK,QAAQ,IAAI,SAAS,GACpD,KAAKC,gBAAgB;CAEzB;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,QAAQ,KAAK,WAAW;EAC9B,IAAI,CAAC,OAAO;EAEZ,KAAKA,gBAAgB,KAAK;EAE1B,IAAI,KAAK,WAAW,qBAAqB,KAAK,IAAI,GAChD,kBAAkB,MAAM,EACtB,iBAAiB,KAAK,oBAAoB,IAAI,SAAS,KAAA,EACzD,CAAC;CAEL;CAEA,gBAAgB,OAAmC;EACjD,MAAM,QAAQ,SAAS,KAAK,WAAW;EACvC,MAAM,SAAS,SAAS,KAAK,WAAW,qBAAqB,KAAK,IAAI,IAAI,KAAK,UAAU,KAAKD;EAE9F,IAAI,QACF,KAAK,aAAa,cAAc,MAAM;OAEtC,KAAK,gBAAgB,YAAY;CAErC;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/captions-button/element.ts"],"sourcesContent":["import { CaptionsButtonCore, CaptionsButtonDataAttrs, type CaptionsButtonState } from '@videojs/core';\nimport { applyElementProps, selectTextTrack, type UIEvent } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaTextTrackState } from '@videojs/media';\nimport { isCaptionOrSubtitleTrack } from '@videojs/utils/dom';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { toggleCommandTarget } from '../command-for';\nimport { MediaButtonElement } from '../media-button-element';\n\nfunction getCaptionTrackCount(state: MediaTextTrackState): number {\n  return state.textTrackList.filter(isCaptionOrSubtitleTrack).length;\n}\n\nexport class CaptionsButtonElement extends MediaButtonElement<CaptionsButtonState, MediaTextTrackState> {\n  static readonly tagName = 'media-captions-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n    commandfor: { type: String },\n    menuFor: { type: String, attribute: 'menu-for' },\n  } satisfies PropertyDeclarationMap<'label' | 'disabled' | 'commandfor' | 'menuFor'>;\n\n  commandfor: string | undefined = undefined;\n  menuFor: string | undefined = undefined;\n  #defaultCommandfor: string | undefined = undefined;\n\n  protected readonly core = new CaptionsButtonCore();\n  protected readonly stateAttrMap = CaptionsButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectTextTrack);\n  protected override readonly hotkeyAction = 'toggleSubtitles';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.commandfor && this.commandfor !== this.menuFor) {\n      this.#defaultCommandfor = this.commandfor;\n    }\n  }\n\n  protected activate(state: MediaTextTrackState, event?: UIEvent): void {\n    if (this.menuFor && getCaptionTrackCount(state) > 1) {\n      if (event instanceof KeyboardEvent) {\n        toggleCommandTarget(this, this.menuFor);\n      }\n\n      return;\n    }\n\n    this.core.toggle(state);\n  }\n\n  protected override getIsButtonDisabled(): boolean {\n    const media = this.mediaState.value;\n\n    if (super.getIsButtonDisabled()) return true;\n\n    if (media && getCaptionTrackCount(media) === 0) return true;\n\n    return false;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    if (changed.has('commandfor') && this.commandfor !== this.menuFor) {\n      this.#defaultCommandfor = this.commandfor;\n    }\n\n    if (changed.has('commandfor') || changed.has('menuFor')) {\n      this.#syncCommandFor();\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n    if (!media) return;\n\n    this.#syncCommandFor(media);\n\n    if (this.menuFor && getCaptionTrackCount(media) > 1) {\n      applyElementProps(this, {\n        'aria-disabled': this.getIsButtonDisabled() ? 'true' : undefined,\n      });\n    }\n  }\n\n  #syncCommandFor(media?: MediaTextTrackState): void {\n    const state = media ?? this.mediaState.value;\n    const target = state && this.menuFor && getCaptionTrackCount(state) > 1 ? this.menuFor : this.#defaultCommandfor;\n\n    if (target) {\n      this.setAttribute('commandfor', target);\n    } else {\n      this.removeAttribute('commandfor');\n    }\n  }\n}\n\nexport namespace CaptionsButtonElement {\n  export type State = CaptionsButtonState;\n}\n"],"mappings":";;;;;;;;AAWA,SAAS,qBAAqB,OAAoC;CAChE,OAAO,MAAM,cAAc,OAAO,wBAAwB,CAAC,CAAC;AAC9D;AAEA,IAAa,wBAAb,cAA2C,mBAA6D;;;EAUrE,KAAA,aAAA,KAAA;EACH,KAAA,UAAA,KAAA;EACW,KAAA,qBAAA,KAAA;EAEf,KAAA,OAAA,IAAI,mBAAmB;EACf,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,eAAe;EAC9C,KAAA,eAAA;;;EAhBjB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;GAC1B,YAAY,EAAE,MAAM,OAAO;GAC3B,SAAS;IAAE,MAAM;IAAQ,WAAW;GAAW;EACjD;;CAIA;CAOA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,cAAc,KAAK,eAAe,KAAK,SAC9C,KAAK,qBAAqB,KAAK;CAEnC;CAEA,SAAmB,OAA4B,OAAuB;EACpE,IAAI,KAAK,WAAW,qBAAqB,KAAK,IAAI,GAAG;GACnD,IAAI,iBAAiB,eACnB,oBAAoB,MAAM,KAAK,OAAO;GAGxC;EACF;EAEA,KAAK,KAAK,OAAO,KAAK;CACxB;CAEA,sBAAkD;EAChD,MAAM,QAAQ,KAAK,WAAW;EAE9B,IAAI,MAAM,oBAAoB,GAAG,OAAO;EAExC,IAAI,SAAS,qBAAqB,KAAK,MAAM,GAAG,OAAO;EAEvD,OAAO;CACT;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EAExB,IAAI,QAAQ,IAAI,YAAY,KAAK,KAAK,eAAe,KAAK,SACxD,KAAK,qBAAqB,KAAK;EAGjC,IAAI,QAAQ,IAAI,YAAY,KAAK,QAAQ,IAAI,SAAS,GACpD,KAAK,gBAAgB;CAEzB;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,QAAQ,KAAK,WAAW;EAC9B,IAAI,CAAC,OAAO;EAEZ,KAAK,gBAAgB,KAAK;EAE1B,IAAI,KAAK,WAAW,qBAAqB,KAAK,IAAI,GAChD,kBAAkB,MAAM,EACtB,iBAAiB,KAAK,oBAAoB,IAAI,SAAS,KAAA,EACzD,CAAC;CAEL;CAEA,gBAAgB,OAAmC;EACjD,MAAM,QAAQ,SAAS,KAAK,WAAW;EACvC,MAAM,SAAS,SAAS,KAAK,WAAW,qBAAqB,KAAK,IAAI,IAAI,KAAK,UAAU,KAAK;EAE9F,IAAI,QACF,KAAK,aAAa,cAAc,MAAM;OAEtC,KAAK,gBAAgB,YAAY;CAErC;AACF"}

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

@@ -1,5 +1,5 @@
 import { MenuRadioGroupElement } from "../menu/radio-group.js";
-import { CaptionsRadioGroupCore } from "@videojs/core";
+import { CaptionsRadioGroupState } from "@videojs/core";
 import { PropertyValues } from "@videojs/element";
 import { Text } from "@videojs/core/i18n";
 //#region src/ui/captions-radio-group/element.d.ts
@@ -8,7 +8,7 @@ import { Text } from "@videojs/core/i18n";
  * 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 CaptionsRadioGroupElement extends MenuRadioGroupElement {
+export declare class CaptionsRadioGroupElement extends MenuRadioGroupElement {
   #private;
   static readonly tagName = "media-captions-radio-group";
   static properties: {
@@ -28,9 +28,8 @@ declare class CaptionsRadioGroupElement extends MenuRadioGroupElement {
   connectedCallback(): void;
   protected update(changed: PropertyValues): void;
 }
-declare namespace CaptionsRadioGroupElement {
-  type State = CaptionsRadioGroupCore.State;
+export declare namespace CaptionsRadioGroupElement {
+  type State = CaptionsRadioGroupState;
 }
 //#endregion
-export { CaptionsRadioGroupElement };
 //# sourceMappingURL=element.d.ts.map

package/dist/dev/ui/captions-radio-group/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/captions-radio-group/element.ts"],"sourcesContent":["import { CaptionsRadioGroupCore, CaptionsRadioGroupDataAttrs, type CaptionsRadioGroupOption } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectTextTrack } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/**\n * Menu radio group that generates an Off `<media-menu-radio-item>` plus one per captions and subtitles track, and\n * shares the selected label and availability with an enclosing menu. An optional `<template>` holding one\n * `<media-menu-radio-item>` customizes each generated item.\n */\nexport class CaptionsRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-captions-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  label: Text | string = '';\n  formatTrack = CaptionsRadioGroupCore.defaultProps.formatTrack;\n\n  readonly #core = new CaptionsRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectTextTrack);\n  readonly #options = new RadioOptionsController<CaptionsRadioGroupOption>(this, {\n    setItemAttributes: (item, option) => item.setAttribute('data-track', option.value),\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: CaptionsRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatTrack: this.formatTrack, disabled: this.disabled, label: this.label });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, CaptionsRadioGroupDataAttrs);\n  }\n}\n\nexport namespace CaptionsRadioGroupElement {\n  export type State = CaptionsRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,IAAa,4BAAb,cAA+C,sBAAsB;;;EASxD,KAAA,WAAA;EACY,KAAA,QAAA;EACT,KAAA,cAAA,uBAAuB,aAAa;EAEjC,KAAA,QAAA,IAAI,uBAAuB;EAC3B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,eAAe;EAC5D,KAAA,WAAA,IAAI,uBAAiD,MAAM;GAC7E,oBAAoB,MAAM,WAAW,KAAK,aAAa,cAAc,OAAO,KAAK;GACjF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKA,YAAY;IAE/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAtBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CASA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAKD,YAAY,SAAS,KAAKA,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAKA,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKA,YAAY;EAC/B,IAAI,QAA6C;EAEjD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,aAAa,KAAK;IAAa,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACjG,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,KAAK,CAAC;GACtF,KAAKC,SAAS,KAAK,OAAO,KAAKD,MAAM,OAAO,KAAKA,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,2BAA2B;CACzE;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/captions-radio-group/element.ts"],"sourcesContent":["import {\n  CaptionsRadioGroupCore,\n  CaptionsRadioGroupDataAttrs,\n  type CaptionsRadioGroupOption,\n  type CaptionsRadioGroupState,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectTextTrack } from '@videojs/core/dom';\nimport { type Text, translateText } from '@videojs/core/i18n';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { MenuRadioGroupElement } from '../menu/radio-group';\nimport { RadioOptionsController } from '../radio-options/controller';\n\n/**\n * Menu radio group that generates an Off `<media-menu-radio-item>` plus one per captions and subtitles track, and\n * shares the selected label and availability with an enclosing menu. An optional `<template>` holding one\n * `<media-menu-radio-item>` customizes each generated item.\n */\nexport class CaptionsRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-captions-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'value' | 'label' | 'disabled'>;\n\n  disabled = false;\n  label: Text | string = '';\n  formatTrack = CaptionsRadioGroupCore.defaultProps.formatTrack;\n\n  readonly #core = new CaptionsRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectTextTrack);\n  readonly #options = new RadioOptionsController<CaptionsRadioGroupOption>(this, {\n    setItemAttributes: (item, option) => item.setAttribute('data-track', option.value),\n    onValueChange: (value) => {\n      const media = this.#mediaState.value;\n\n      if (media) this.#core.selectValue(media, value);\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    if (__DEV__ && !this.#mediaState.value && this.#mediaState.displayName) {\n      logMissingFeature(this.localName, this.#mediaState.displayName);\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    const media = this.#mediaState.value;\n    let state: CaptionsRadioGroupState | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatTrack: this.formatTrack, disabled: this.disabled, label: this.label });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));\n      this.#options.sync(state, this.#i18n.value, this.#i18n.locale);\n      this.publishMenuOptionState(state.disabled, state.hidden, state.availability);\n    } else {\n      this.publishMenuOptionState(true, true, 'unsupported');\n    }\n\n    super.update(changed);\n\n    if (state) applyStateDataAttrs(this, state, CaptionsRadioGroupDataAttrs);\n  }\n}\n\nexport namespace CaptionsRadioGroupElement {\n  export type State = CaptionsRadioGroupState;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,IAAa,4BAAb,cAA+C,sBAAsB;;;EASxD,KAAA,WAAA;EACY,KAAA,QAAA;EACT,KAAA,cAAA,uBAAuB,aAAa;EAEjC,KAAA,QAAA,IAAI,uBAAuB;EAC3B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,eAAe;EAC5D,KAAA,WAAA,IAAI,uBAAiD,MAAM;GAC7E,oBAAoB,MAAM,WAAW,KAAK,aAAa,cAAc,OAAO,KAAK;GACjF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAK,YAAY;IAE/B,IAAI,OAAO,KAAK,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAtBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CASA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;EAEpB,IAAe,CAAC,KAAK,YAAY,SAAS,KAAK,YAAY,aACzD,kBAAkB,KAAK,WAAW,KAAK,YAAY,WAAW;CAElE;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAK,YAAY;EAC/B,IAAI,QAAwC;EAE5C,IAAI,OAAO;GACT,KAAK,MAAM,SAAS;IAAE,aAAa,KAAK;IAAa,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACjG,KAAK,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAK,MAAM,SAAS;GAE5B,KAAK,sBAAsB,cAAc,KAAK,MAAM,SAAS,KAAK,GAAG,KAAK,MAAM,KAAK,CAAC;GACtF,KAAK,SAAS,KAAK,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,MAAM;GAC7D,KAAK,uBAAuB,MAAM,UAAU,MAAM,QAAQ,MAAM,YAAY;EAC9E,OACE,KAAK,uBAAuB,MAAM,MAAM,aAAa;EAGvD,MAAM,OAAO,OAAO;EAEpB,IAAI,OAAO,oBAAoB,MAAM,OAAO,2BAA2B;CACzE;AACF"}

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

@@ -1,10 +1,10 @@
 import { PlayerController } from "../../player/controller.js";
 import { MediaButtonElement } from "../media-button-element.js";
 import { index_d_exports } from "../../index.js";
-import { CastButtonCore } from "@videojs/core";
+import { CastButtonCore, CastButtonState } from "@videojs/core";
 import { MediaRemotePlaybackState } from "@videojs/media";
 //#region src/ui/cast-button/element.d.ts
-declare class CastButtonElement extends MediaButtonElement<CastButtonCore> {
+export declare class CastButtonElement extends MediaButtonElement<CastButtonState, MediaRemotePlaybackState> {
   static readonly tagName = "media-cast-button";
   protected readonly core: CastButtonCore;
   protected readonly stateAttrMap: {
@@ -16,10 +16,9 @@ declare class CastButtonElement extends MediaButtonElement<CastButtonCore> {
   protected readonly mediaState: PlayerController<index_d_exports.AnyPlayerStore, {
     remotePlaybackState: import("@videojs/media").RemotePlaybackConnectionState;
     remotePlaybackAvailability: import("@videojs/media").MediaFeatureAvailability;
-    toggleRemotePlayback: () => Promise<void>;
+    promptRemotePlayback: () => Promise<void>;
   } | undefined>;
   protected activate(state: MediaRemotePlaybackState): Promise<void>;
 }
 //#endregion
-export { CastButtonElement };
 //# sourceMappingURL=element.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/cast-button/element.ts"],"sourcesContent":["import { CastButtonCore, CastButtonDataAttrs } 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 CastButtonElement extends MediaButtonElement<CastButtonCore> {\n  static readonly tagName = 'media-cast-button';\n\n  protected readonly core = new CastButtonCore();\n  protected readonly stateAttrMap = CastButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectRemotePlayback);\n\n  protected activate(state: MediaRemotePlaybackState): Promise<void> {\n    return this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,oBAAb,cAAuC,mBAAmC;;;EAG9C,KAAA,OAAA,IAAI,eAAe;EACX,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,oBAAoB;;;EAJpE,KAAA,UAAA;;CAM1B,SAAmB,OAAgD;EACjE,OAAO,KAAK,KAAK,OAAO,KAAK;CAC/B;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/cast-button/element.ts"],"sourcesContent":["import { CastButtonCore, CastButtonDataAttrs, type CastButtonState } 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 CastButtonElement extends MediaButtonElement<CastButtonState, MediaRemotePlaybackState> {\n  static readonly tagName = 'media-cast-button';\n\n  protected readonly core = new CastButtonCore();\n  protected readonly stateAttrMap = CastButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectRemotePlayback);\n\n  protected activate(state: MediaRemotePlaybackState): Promise<void> {\n    return this.core.toggle(state);\n  }\n}\n"],"mappings":";;;;;;AAQA,IAAa,oBAAb,cAAuC,mBAA8D;;;EAGzE,KAAA,OAAA,IAAI,eAAe;EACX,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,oBAAoB;;;EAJpE,KAAA,UAAA;;CAM1B,SAAmB,OAAgD;EACjE,OAAO,KAAK,KAAK,OAAO,KAAK;CAC/B;AACF"}

package/dist/dev/ui/container/element.d.ts

@@ -7,7 +7,7 @@ import { PropertyValues } from "@videojs/element";
  *
  * A container registers itself with its closest player and provides popup coordination to the controls it contains.
  */
-declare class ContainerElement extends UIElement implements MediaContainer {
+export declare class ContainerElement extends UIElement implements MediaContainer {
   #private;
   static readonly tagName = "media-container";
   connectedCallback(): void;
@@ -15,5 +15,4 @@ declare class ContainerElement extends UIElement implements MediaContainer {
   protected update(changed: PropertyValues): void;
 }
 //#endregion
-export { ContainerElement };
 //# sourceMappingURL=element.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"element.js","names":["#core","#controls","#i18n","#popupGroup","#popupGroupProvider","#container","#register","#applyLabel","#disconnect","#onPointerUp","#releaseContainer","#label"],"sources":["../../../../src/ui/container/element.ts"],"sourcesContent":["import { ContainerCore, ContainerDataAttrs } from '@videojs/core';\nimport {\n  applyContainerAttrs,\n  applyStateDataAttrs,\n  createPopupGroup,\n  focusContainer,\n  type MediaContainer,\n  selectControls,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer, ContextProvider } from '@videojs/element/context';\nimport { listen } from '@videojs/utils/dom';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { type ContainerContextValue, containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { UIElement } from '../ui-element';\n\n/**\n * The visual, interactive player boundary.\n *\n * A container registers itself with its closest player and provides popup coordination to the controls it contains.\n */\nexport class ContainerElement extends UIElement implements MediaContainer {\n  static readonly tagName = 'media-container';\n\n  #releaseContainer: (() => void) | null = null;\n  #disconnect: AbortController | null = null;\n  #label: string | null = null;\n\n  readonly #core = new ContainerCore();\n  readonly #controls = new PlayerController(this, playerContext, selectControls);\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #popupGroup = createPopupGroup();\n  readonly #popupGroupProvider = new ContextProvider(this, {\n    context: popupGroupContext,\n    initialValue: this.#popupGroup,\n  });\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: (value) => this.#register(value),\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#popupGroupProvider.setValue(this.#popupGroup);\n    this.#register(this.#container.value);\n    applyContainerAttrs(this);\n    this.#applyLabel();\n\n    this.#disconnect = new AbortController();\n    listen(this, 'pointerup', this.#onPointerUp, { signal: this.#disconnect.signal });\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseContainer?.();\n    this.#releaseContainer = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    super.disconnectedCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n    this.#applyLabel();\n\n    const controls = this.#controls.value;\n\n    if (controls) {\n      this.#core.setMedia(controls);\n      applyStateDataAttrs(this, this.#core.getState(), ContainerDataAttrs);\n    } else {\n      this.removeAttribute(ContainerDataAttrs.controlsVisible);\n    }\n  }\n\n  #register(value: ContainerContextValue | undefined): void {\n    this.#releaseContainer?.();\n    this.#releaseContainer = null;\n\n    if (this.isConnected && value) {\n      this.#releaseContainer = value.registerContainer(this);\n    }\n  }\n\n  #applyLabel(): void {\n    const current = this.getAttribute('aria-label');\n    if (current && current !== this.#label) return;\n\n    if (this.hasAttribute('aria-labelledby')) {\n      if (current === this.#label) {\n        this.removeAttribute('aria-label');\n        this.#label = null;\n      }\n\n      return;\n    }\n\n    const label = this.#i18n.value(labelText);\n\n    this.setAttribute('aria-label', label);\n    this.#label = label;\n  }\n\n  #onPointerUp = (): void => {\n    focusContainer(this);\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA0BA,IAAa,mBAAb,cAAsC,UAAoC;;EAC9C,KAAA,UAAA;;CAE1B,oBAAyC;CACzC,cAAsC;CACtC,SAAwB;CAExB,QAAiB,IAAI,cAAc;CACnC,YAAqB,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAC7E,QAAiB,IAAI,eAAe,MAAM,WAAW;CACrD,cAAuB,iBAAiB;CACxC,sBAA+B,IAAI,gBAAgB,MAAM;EACvD,SAAS;EACT,cAAc,KAAKG;CACrB,CAAC;CACD,aAAsB,IAAI,gBAAgB,MAAM;EAC9C,SAAS;EACT,WAAW,UAAU,KAAKG,UAAU,KAAK;CAC3C,CAAC;CAED,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,KAAKF,oBAAoB,SAAS,KAAKD,WAAW;EAClD,KAAKG,UAAU,KAAKD,WAAW,KAAK;EACpC,oBAAoB,IAAI;EACxB,KAAKE,YAAY;EAEjB,KAAKC,cAAc,IAAI,gBAAgB;EACvC,OAAO,MAAM,aAAa,KAAKC,cAAc,EAAE,QAAQ,KAAKD,YAAY,OAAO,CAAC;CAClF;CAEA,uBAAsC;EACpC,KAAKE,oBAAoB;EACzB,KAAKA,oBAAoB;EACzB,KAAKF,aAAa,MAAM;EACxB,KAAKA,cAAc;EACnB,MAAM,qBAAqB;CAC7B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EACpB,KAAKD,YAAY;EAEjB,MAAM,WAAW,KAAKN,UAAU;EAEhC,IAAI,UAAU;GACZ,KAAKD,MAAM,SAAS,QAAQ;GAC5B,oBAAoB,MAAM,KAAKA,MAAM,SAAS,GAAG,kBAAkB;EACrE,OACE,KAAK,gBAAgB,mBAAmB,eAAe;CAE3D;CAEA,UAAU,OAAgD;EACxD,KAAKU,oBAAoB;EACzB,KAAKA,oBAAoB;EAEzB,IAAI,KAAK,eAAe,OACtB,KAAKA,oBAAoB,MAAM,kBAAkB,IAAI;CAEzD;CAEA,cAAoB;EAClB,MAAM,UAAU,KAAK,aAAa,YAAY;EAC9C,IAAI,WAAW,YAAY,KAAKC,QAAQ;EAExC,IAAI,KAAK,aAAa,iBAAiB,GAAG;GACxC,IAAI,YAAY,KAAKA,QAAQ;IAC3B,KAAK,gBAAgB,YAAY;IACjC,KAAKA,SAAS;GAChB;GAEA;EACF;EAEA,MAAM,QAAQ,KAAKT,MAAM,MAAM,SAAS;EAExC,KAAK,aAAa,cAAc,KAAK;EACrC,KAAKS,SAAS;CAChB;CAEA,qBAA2B;EACzB,eAAe,IAAI;CACrB;AACF"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/container/element.ts"],"sourcesContent":["import { ContainerCore, ContainerDataAttrs } from '@videojs/core';\nimport {\n  applyContainerAttrs,\n  applyStateDataAttrs,\n  createPopupGroup,\n  focusContainer,\n  type MediaContainer,\n  selectControls,\n} from '@videojs/core/dom';\nimport { labelText } from '@videojs/core/i18n/text/container';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer, ContextProvider } from '@videojs/element/context';\nimport { listen } from '@videojs/utils/dom';\n\nimport { i18nContext } from '../../i18n/context';\nimport { I18nController } from '../../i18n/controller';\nimport { type ContainerContextValue, containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { UIElement } from '../ui-element';\n\n/**\n * The visual, interactive player boundary.\n *\n * A container registers itself with its closest player and provides popup coordination to the controls it contains.\n */\nexport class ContainerElement extends UIElement implements MediaContainer {\n  static readonly tagName = 'media-container';\n\n  #releaseContainer: (() => void) | null = null;\n  #disconnect: AbortController | null = null;\n  #label: string | null = null;\n\n  readonly #core = new ContainerCore();\n  readonly #controls = new PlayerController(this, playerContext, selectControls);\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #popupGroup = createPopupGroup();\n  readonly #popupGroupProvider = new ContextProvider(this, {\n    context: popupGroupContext,\n    initialValue: this.#popupGroup,\n  });\n  readonly #container = new ContextConsumer(this, {\n    context: containerContext,\n    callback: (value) => this.#register(value),\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.#popupGroupProvider.setValue(this.#popupGroup);\n    this.#register(this.#container.value);\n    applyContainerAttrs(this);\n    this.#applyLabel();\n\n    this.#disconnect = new AbortController();\n    listen(this, 'pointerup', this.#onPointerUp, { signal: this.#disconnect.signal });\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseContainer?.();\n    this.#releaseContainer = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    super.disconnectedCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n    this.#applyLabel();\n\n    const controls = this.#controls.value;\n\n    if (controls) {\n      this.#core.setMedia(controls);\n      applyStateDataAttrs(this, this.#core.getState(), ContainerDataAttrs);\n    } else {\n      this.removeAttribute(ContainerDataAttrs.controlsVisible);\n    }\n  }\n\n  #register(value: ContainerContextValue | undefined): void {\n    this.#releaseContainer?.();\n    this.#releaseContainer = null;\n\n    if (this.isConnected && value) {\n      this.#releaseContainer = value.registerContainer(this);\n    }\n  }\n\n  #applyLabel(): void {\n    const current = this.getAttribute('aria-label');\n    if (current && current !== this.#label) return;\n\n    if (this.hasAttribute('aria-labelledby')) {\n      if (current === this.#label) {\n        this.removeAttribute('aria-label');\n        this.#label = null;\n      }\n\n      return;\n    }\n\n    const label = this.#i18n.value(labelText);\n\n    this.setAttribute('aria-label', label);\n    this.#label = label;\n  }\n\n  #onPointerUp = (): void => {\n    focusContainer(this);\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA0BA,IAAa,mBAAb,cAAsC,UAAoC;;EAC9C,KAAA,UAAA;;CAE1B,oBAAyC;CACzC,cAAsC;CACtC,SAAwB;CAExB,QAAiB,IAAI,cAAc;CACnC,YAAqB,IAAI,iBAAiB,MAAM,eAAe,cAAc;CAC7E,QAAiB,IAAI,eAAe,MAAM,WAAW;CACrD,cAAuB,iBAAiB;CACxC,sBAA+B,IAAI,gBAAgB,MAAM;EACvD,SAAS;EACT,cAAc,KAAK;CACrB,CAAC;CACD,aAAsB,IAAI,gBAAgB,MAAM;EAC9C,SAAS;EACT,WAAW,UAAU,KAAK,UAAU,KAAK;CAC3C,CAAC;CAED,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,KAAK,oBAAoB,SAAS,KAAK,WAAW;EAClD,KAAK,UAAU,KAAK,WAAW,KAAK;EACpC,oBAAoB,IAAI;EACxB,KAAK,YAAY;EAEjB,KAAK,cAAc,IAAI,gBAAgB;EACvC,OAAO,MAAM,aAAa,KAAK,cAAc,EAAE,QAAQ,KAAK,YAAY,OAAO,CAAC;CAClF;CAEA,uBAAsC;EACpC,KAAK,oBAAoB;EACzB,KAAK,oBAAoB;EACzB,KAAK,aAAa,MAAM;EACxB,KAAK,cAAc;EACnB,MAAM,qBAAqB;CAC7B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EACpB,KAAK,YAAY;EAEjB,MAAM,WAAW,KAAK,UAAU;EAEhC,IAAI,UAAU;GACZ,KAAK,MAAM,SAAS,QAAQ;GAC5B,oBAAoB,MAAM,KAAK,MAAM,SAAS,GAAG,kBAAkB;EACrE,OACE,KAAK,gBAAgB,mBAAmB,eAAe;CAE3D;CAEA,UAAU,OAAgD;EACxD,KAAK,oBAAoB;EACzB,KAAK,oBAAoB;EAEzB,IAAI,KAAK,eAAe,OACtB,KAAK,oBAAoB,MAAM,kBAAkB,IAAI;CAEzD;CAEA,cAAoB;EAClB,MAAM,UAAU,KAAK,aAAa,YAAY;EAC9C,IAAI,WAAW,YAAY,KAAK,QAAQ;EAExC,IAAI,KAAK,aAAa,iBAAiB,GAAG;GACxC,IAAI,YAAY,KAAK,QAAQ;IAC3B,KAAK,gBAAgB,YAAY;IACjC,KAAK,SAAS;GAChB;GAEA;EACF;EAEA,MAAM,QAAQ,KAAK,MAAM,MAAM,SAAS;EAExC,KAAK,aAAa,cAAc,KAAK;EACrC,KAAK,SAAS;CAChB;CAEA,qBAA2B;EACzB,eAAe,IAAI;CACrB;AACF"}

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

@@ -3,7 +3,7 @@ import { StateAttrMap } from "@videojs/core";
 import { PropertyValues } from "@videojs/element";
 //#region src/ui/context-part-element.d.ts
 /** Shape that compound context values must satisfy for parts to consume. */
-interface PartContextValue<State extends object> {
+export interface PartContextValue<State extends object> {
   state: State;
   stateAttrMap: StateAttrMap<State>;
 }
@@ -20,7 +20,7 @@ interface PartContextValue<State extends object> {
  * }
  * ```
  */
-declare abstract class ContextPartElement<State extends object> extends UIElement {
+export declare abstract class ContextPartElement<State extends object> extends UIElement {
   #private;
   protected abstract readonly consumer: {
     value?: PartContextValue<State> | undefined;
@@ -29,5 +29,4 @@ declare abstract class ContextPartElement<State extends object> extends UIElemen
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { ContextPartElement, PartContextValue };
 //# sourceMappingURL=context-part-element.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"context-part-element.js","names":["#applyState"],"sources":["../../../src/ui/context-part-element.ts"],"sourcesContent":["import type { StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { UIElement } from './ui-element';\n\n/** Shape that compound context values must satisfy for parts to consume. */\nexport interface PartContextValue<State extends object> {\n  state: State;\n  stateAttrMap: StateAttrMap<State>;\n}\n\n/**\n * Abstract base for compound-component part elements that consume a parent context and apply data attributes from\n * `ctx.state` + `ctx.stateAttrMap`.\n *\n * Subclasses only need to declare the `consumer` property:\n *\n * ```ts\n * export class SliderTrackElement extends ContextPartElement<SliderState> {\n *   static readonly tagName = 'media-slider-track';\n *   protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n * }\n * ```\n */\nexport abstract class ContextPartElement<State extends object> extends UIElement {\n  protected abstract readonly consumer: { value?: PartContextValue<State> | undefined };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#applyState();\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    this.#applyState();\n  }\n\n  #applyState(): void {\n    const ctx = this.consumer.value;\n\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAsB,qBAAtB,cAAuE,UAAU;CAG/E,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAKA,YAAY;CACnB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EACrB,KAAKA,YAAY;CACnB;CAEA,cAAoB;EAClB,MAAM,MAAM,KAAK,SAAS;EAE1B,IAAI,KAAK,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;CAChE;AACF"}
+{"version":3,"file":"context-part-element.js","names":[],"sources":["../../../src/ui/context-part-element.ts"],"sourcesContent":["import type { StateAttrMap } from '@videojs/core';\nimport { applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { UIElement } from './ui-element';\n\n/** Shape that compound context values must satisfy for parts to consume. */\nexport interface PartContextValue<State extends object> {\n  state: State;\n  stateAttrMap: StateAttrMap<State>;\n}\n\n/**\n * Abstract base for compound-component part elements that consume a parent context and apply data attributes from\n * `ctx.state` + `ctx.stateAttrMap`.\n *\n * Subclasses only need to declare the `consumer` property:\n *\n * ```ts\n * export class SliderTrackElement extends ContextPartElement<SliderState> {\n *   static readonly tagName = 'media-slider-track';\n *   protected readonly consumer = new ContextConsumer(this, { context: sliderContext, subscribe: true });\n * }\n * ```\n */\nexport abstract class ContextPartElement<State extends object> extends UIElement {\n  protected abstract readonly consumer: { value?: PartContextValue<State> | undefined };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#applyState();\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    this.#applyState();\n  }\n\n  #applyState(): void {\n    const ctx = this.consumer.value;\n\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAsB,qBAAtB,cAAuE,UAAU;CAG/E,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAK,YAAY;CACnB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EACrB,KAAK,YAAY;CACnB;CAEA,cAAoB;EAClB,MAAM,MAAM,KAAK,SAAS;EAE1B,IAAI,KAAK,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;CAChE;AACF"}

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

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

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

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

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

@@ -1,9 +1,8 @@
 import { ControlsState, StateAttrMap } from "@videojs/core";
 //#region src/ui/controls/context.d.ts
-interface ControlsContextValue {
+export interface ControlsContextValue {
   state: ControlsState;
   stateAttrMap: StateAttrMap<ControlsState>;
 }
 //#endregion
-export { ControlsContextValue };
 //# sourceMappingURL=context.d.ts.map

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

@@ -6,7 +6,7 @@ import { PropertyValues } from "@videojs/element";
  * 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 {
+export declare class ControlsElement extends UIElement {
   #private;
   static readonly tagName = "media-controls";
   static properties: {
@@ -19,5 +19,4 @@ declare class ControlsElement extends UIElement {
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { ControlsElement };
 //# sourceMappingURL=element.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"element.js","names":[],"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,KAAK,YAAY,SAAS,KAAK,YAAY,aACvF,kBAAkB,KAAK,WAAW,KAAK,YAAY,WAAW;CAElE;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,KAAK,MAAM,SAAS,EAAE,YAAY,KAAK,WAAW,CAAC;EACnD,KAAK,MAAM,SAAS,KAAK,YAAY,SAAS,IAAI;EAElD,MAAM,QAAQ,KAAK,MAAM,SAAS;EAClC,IAAI,CAAC,OAAO;EAEZ,oBAAoB,MAAM,OAAO,iBAAiB;EAElD,KAAK,UAAU,SAAS;GACtB;GACA,cAAc;EAChB,CAAC;EAED,MAAM,aAAa,KAAK;EAExB,KAAK,WAAW,MAAM;EAEtB,IAAI,cAAc,CAAC,MAAM,SACvB,KAAK,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

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

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

@@ -5,7 +5,7 @@ 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> {
+export declare class DialogBackdropElement extends ContextPartElement<DialogState> {
   static readonly tagName = "media-dialog-backdrop";
   protected readonly consumer: ContextConsumer<{
     __context__: DialogContextValue;
@@ -13,5 +13,4 @@ declare class DialogBackdropElement extends ContextPartElement<DialogState> {
   connectedCallback(): void;
 }
 //#endregion
-export { DialogBackdropElement };
 //# sourceMappingURL=backdrop.d.ts.map

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

@@ -2,7 +2,7 @@ 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 {
+export declare class DialogCloseElement extends UIElement {
   #private;
   static readonly tagName: string;
   static properties: {
@@ -16,5 +16,4 @@ declare class DialogCloseElement extends UIElement {
   protected update(_changed: PropertyValues): void;
 }
 //#endregion
-export { DialogCloseElement };
 //# sourceMappingURL=close.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"close.js","names":[],"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,KAAK,cAAc,IAAI,gBAAgB;EAEvC,MAAM,cAAc,aAAa;GAC/B,kBAAkB,KAAK,KAAK,OAAO,MAAM;GACzC,kBAAkB,KAAK;EACzB,CAAC;EAED,kBAAkB,MAAM,aAAa,EAAE,QAAQ,KAAK,YAAY,OAAO,CAAC;CAC1E;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAK,aAAa,MAAM;EACxB,KAAK,cAAc;CACrB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EACrB,MAAM,MAAM,KAAK,KAAK;EAEtB,IAAI,KAAK,oBAAoB,MAAM,IAAI,OAAO,IAAI,YAAY;CAChE;AACF"}

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

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

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

@@ -1,4 +1,5 @@
 import { createContext } from "@videojs/element/context";
+/** @internal */
 const dialogContext = createContext(Symbol("@videojs/dialog"));
 //#endregion
 export { dialogContext };

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

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

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

@@ -9,7 +9,7 @@ import { ContextConsumer } from "@videojs/element/context";
  * 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> {
+export declare class DialogDescriptionElement extends ContextPartElement<DialogState> {
   static readonly tagName: string;
   protected readonly consumer: ContextConsumer<{
     __context__: DialogContextValue;
@@ -17,5 +17,4 @@ declare class DialogDescriptionElement extends ContextPartElement<DialogState> {
   protected update(changed: PropertyValues): void;
 }
 //#endregion
-export { DialogDescriptionElement };
 //# sourceMappingURL=description.d.ts.map

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

@@ -2,13 +2,15 @@ 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 {
+export interface DialogElementBaseOptions {
+  /** @internal */
   core?: DialogCore;
+  /** @internal */
   stateAttrMap?: StateAttrMap<DialogState>;
   idPrefix?: string;
   bindTrigger?: boolean;
 }
-declare class DialogElementBase extends UIElement {
+export declare class DialogElementBase extends UIElement {
   #private;
   static properties: {
     open: {
@@ -34,9 +36,8 @@ declare class DialogElementBase extends UIElement {
   protected willUpdate(changed: PropertyValues): void;
   protected update(_changed: PropertyValues): void;
 }
-declare class DialogElement extends DialogElementBase {
+export 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

@@ -88,8 +88,10 @@ var DialogElementBase = class extends UIElement {
 		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();
+			if (this.open !== inputOpen) {
+				if (this.open) this.#dialog.open();
+				else this.#dialog.close();
+			}
 		}
 	}
 	update(_changed) {

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

@@ -1 +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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"}
+{"version":3,"file":"element.js","names":[],"sources":["../../../../src/ui/dialog/element.ts"],"sourcesContent":["import {\n  DialogCore,\n  DialogDataAttrs,\n  type DialogInput,\n  type DialogState,\n  type StateAttrMap,\n  type DialogProps,\n} 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  /** @internal */\n  core?: DialogCore;\n  /** @internal */\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 DialogProps>;\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

@@ -6,7 +6,7 @@ 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> {
+export declare class DialogPopupElement extends ContextPartElement<DialogState> {
   #private;
   static readonly tagName = "media-dialog-popup";
   protected readonly consumer: ContextConsumer<{
@@ -16,5 +16,4 @@ declare class DialogPopupElement extends ContextPartElement<DialogState> {
   protected update(changed: PropertyValues): void;
 }
 //#endregion
-export { DialogPopupElement };
 //# sourceMappingURL=popup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"popup.js","names":["#dialog"],"sources":["../../../../src/ui/dialog/popup.ts"],"sourcesContent":["import type { DialogState } from '@videojs/core';\nimport { applyElementProps, type DialogApi } from '@videojs/core/dom';\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/** Semantic popup that owns focus management and dialog transition completion. */\nexport class DialogPopupElement extends ContextPartElement<DialogState> {\n  static readonly tagName = 'media-dialog-popup';\n\n  protected readonly consumer = new ContextConsumer(this, { context: dialogContext, subscribe: true });\n\n  #dialog: DialogApi | null = null;\n\n  override disconnectedCallback(): void {\n    this.#dialog?.setPopupElement(null);\n    this.#dialog = null;\n    super.disconnectedCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const ctx = this.consumer.value;\n    if (!ctx) return;\n\n    if (this.#dialog !== ctx.dialog) {\n      this.#dialog?.setPopupElement(null);\n      this.#dialog = ctx.dialog;\n      this.#dialog.setPopupElement(this);\n    }\n\n    applyElementProps(this, {\n      id: ctx.popupId,\n      tabIndex: -1,\n      ...ctx.popupAttrs,\n    });\n  }\n}\n"],"mappings":";;;;;;AASA,IAAa,qBAAb,cAAwC,mBAAgC;;;EAGxC,KAAA,WAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAe,WAAW;EAAK,CAAC;EAEvE,KAAA,UAAA;;;EAJF,KAAA,UAAA;;CAI1B;CAEA,uBAAsC;EACpC,KAAKA,SAAS,gBAAgB,IAAI;EAClC,KAAKA,UAAU;EACf,MAAM,qBAAqB;CAC7B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,MAAM,KAAK,SAAS;EAC1B,IAAI,CAAC,KAAK;EAEV,IAAI,KAAKA,YAAY,IAAI,QAAQ;GAC/B,KAAKA,SAAS,gBAAgB,IAAI;GAClC,KAAKA,UAAU,IAAI;GACnB,KAAKA,QAAQ,gBAAgB,IAAI;EACnC;EAEA,kBAAkB,MAAM;GACtB,IAAI,IAAI;GACR,UAAU;GACV,GAAG,IAAI;EACT,CAAC;CACH;AACF"}
+{"version":3,"file":"popup.js","names":[],"sources":["../../../../src/ui/dialog/popup.ts"],"sourcesContent":["import type { DialogState } from '@videojs/core';\nimport { applyElementProps, type DialogApi } from '@videojs/core/dom';\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/** Semantic popup that owns focus management and dialog transition completion. */\nexport class DialogPopupElement extends ContextPartElement<DialogState> {\n  static readonly tagName = 'media-dialog-popup';\n\n  protected readonly consumer = new ContextConsumer(this, { context: dialogContext, subscribe: true });\n\n  #dialog: DialogApi | null = null;\n\n  override disconnectedCallback(): void {\n    this.#dialog?.setPopupElement(null);\n    this.#dialog = null;\n    super.disconnectedCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const ctx = this.consumer.value;\n    if (!ctx) return;\n\n    if (this.#dialog !== ctx.dialog) {\n      this.#dialog?.setPopupElement(null);\n      this.#dialog = ctx.dialog;\n      this.#dialog.setPopupElement(this);\n    }\n\n    applyElementProps(this, {\n      id: ctx.popupId,\n      tabIndex: -1,\n      ...ctx.popupAttrs,\n    });\n  }\n}\n"],"mappings":";;;;;;AASA,IAAa,qBAAb,cAAwC,mBAAgC;;;EAGxC,KAAA,WAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAe,WAAW;EAAK,CAAC;EAEvE,KAAA,UAAA;;;EAJF,KAAA,UAAA;;CAI1B;CAEA,uBAAsC;EACpC,KAAK,SAAS,gBAAgB,IAAI;EAClC,KAAK,UAAU;EACf,MAAM,qBAAqB;CAC7B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,MAAM,MAAM,KAAK,SAAS;EAC1B,IAAI,CAAC,KAAK;EAEV,IAAI,KAAK,YAAY,IAAI,QAAQ;GAC/B,KAAK,SAAS,gBAAgB,IAAI;GAClC,KAAK,UAAU,IAAI;GACnB,KAAK,QAAQ,gBAAgB,IAAI;EACnC;EAEA,kBAAkB,MAAM;GACtB,IAAI,IAAI;GACR,UAAU;GACV,GAAG,IAAI;EACT,CAAC;CACH;AACF"}

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

@@ -6,7 +6,7 @@ import { PropertyValues } from "@videojs/element";
 import { ContextConsumer } from "@videojs/element/context";
 //#region src/ui/dialog/title.d.ts
 /** Text that labels its owning dialog. The element takes the `id` that the popup's `aria-labelledby` points to. */
-declare class DialogTitleElement extends ContextPartElement<DialogState> {
+export declare class DialogTitleElement extends ContextPartElement<DialogState> {
   static readonly tagName: string;
   protected readonly consumer: ContextConsumer<{
     __context__: DialogContextValue;
@@ -14,5 +14,4 @@ declare class DialogTitleElement extends ContextPartElement<DialogState> {
   protected update(changed: PropertyValues): void;
 }
 //#endregion
-export { DialogTitleElement };
 //# sourceMappingURL=title.d.ts.map

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

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