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

package/dist/default/ui/playback-rate-button/playback-rate-button-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"playback-rate-button-element.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button-element.ts"],"sourcesContent":["import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { applyElementProps, selectPlaybackRate, type UIEvent } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport type { MediaPlaybackRateState } from '@videojs/media';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { MediaButtonElement } from '../media-button-element';\n\nexport class PlaybackRateButtonElement extends MediaButtonElement<PlaybackRateButtonCore> {\n  static readonly tagName = 'media-playback-rate-button';\n\n  static override properties = {\n    label: { type: String },\n    disabled: { type: Boolean },\n    commandfor: { type: String },\n  } satisfies PropertyDeclarationMap<'label' | 'disabled' | 'commandfor'>;\n\n  commandfor: string | undefined = undefined;\n\n  protected readonly core = new PlaybackRateButtonCore();\n  protected readonly stateAttrMap = PlaybackRateButtonDataAttrs;\n  protected readonly mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n  protected override readonly hotkeyAction = 'speedUp';\n\n  protected activate(state: MediaPlaybackRateState, event?: UIEvent): void {\n    if (this.commandfor) {\n      if (event instanceof KeyboardEvent) {\n        // Custom elements do not synthesize a click from keyboard activation.\n        // Dispatch one so the linked menu follows its normal open lifecycle.\n        this.click();\n      }\n\n      return;\n    }\n\n    this.core.cycle(state);\n  }\n\n  protected override getIsButtonDisabled(): boolean {\n    const media = this.mediaState.value;\n\n    if (super.getIsButtonDisabled()) return true;\n\n    if (this.commandfor && media && media.playbackRates.length === 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')) {\n      if (this.commandfor) {\n        this.setAttribute('commandfor', this.commandfor);\n      } else {\n        this.removeAttribute('commandfor');\n      }\n    }\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const media = this.mediaState.value;\n    if (!media || !this.commandfor) return;\n\n    applyElementProps(this, {\n      'aria-disabled': this.getIsButtonDisabled() ? 'true' : undefined,\n    });\n  }\n}\n\nexport namespace PlaybackRateButtonElement {\n  export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;AASA,IAAa,4BAAb,cAA+C,mBAA2C;;;EASvD,KAAA,aAAA,KAAA;EAEP,KAAA,OAAA,IAAI,uBAAuB;EACnB,KAAA,eAAA;EACF,KAAA,aAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EACjD,KAAA,eAAA;;;EAbjB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,OAAO,EAAE,MAAM,OAAO;GACtB,UAAU,EAAE,MAAM,QAAQ;GAC1B,YAAY,EAAE,MAAM,OAAO;EAC7B;;CASA,SAAmB,OAA+B,OAAuB;EACvE,IAAI,KAAK,YAAY;GACnB,IAAI,iBAAiB,eAGnB,KAAK,MAAM;GAGb;EACF;EAEA,KAAK,KAAK,MAAM,KAAK;CACvB;CAEA,sBAAkD;EAChD,MAAM,QAAQ,KAAK,WAAW;EAE9B,IAAI,MAAM,oBAAoB,GAAG,OAAO;EAExC,IAAI,KAAK,cAAc,SAAS,MAAM,cAAc,WAAW,GAAG,OAAO;EAEzE,OAAO;CACT;CAEA,WAA8B,SAA+B;EAC3D,MAAM,WAAW,OAAO;EAExB,IAAI,QAAQ,IAAI,YAAY,GAC1B,IAAI,KAAK,YACP,KAAK,aAAa,cAAc,KAAK,UAAU;OAE/C,KAAK,gBAAgB,YAAY;CAGvC;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAGpB,IAAI,CADU,KAAK,WAAW,SAChB,CAAC,KAAK,YAAY;EAEhC,kBAAkB,MAAM,EACtB,iBAAiB,KAAK,oBAAoB,IAAI,SAAS,KAAA,EACzD,CAAC;CACH;AACF"}

package/dist/default/ui/playback-rate-radio-group/playback-rate-radio-group-element.js

@@ -1,65 +0,0 @@
-import { i18nContext } from "../../i18n/context.js";
-import { I18nController } from "../../i18n/controller.js";
-import { playerContext } from "../../player/context.js";
-import { PlayerController } from "../../player/player-controller.js";
-import { MenuRadioGroupElement } from "../menu/menu-radio-group-element.js";
-import { RadioOptionsController } from "../radio-options/radio-options-controller.js";
-import { PlaybackRateRadioGroupCore, PlaybackRateRadioGroupDataAttrs } from "@videojs/core";
-import { applyStateDataAttrs, selectPlaybackRate } from "@videojs/core/dom";
-import { translateText } from "@videojs/core/i18n";
-//#region src/ui/playback-rate-radio-group/playback-rate-radio-group-element.ts
-var PlaybackRateRadioGroupElement = class extends MenuRadioGroupElement {
-	constructor(..._args) {
-		super(..._args);
-		this.disabled = false;
-		this.formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;
-		this.#core = new PlaybackRateRadioGroupCore();
-		this.#i18n = new I18nController(this, i18nContext);
-		this.#mediaState = new PlayerController(this, playerContext, selectPlaybackRate);
-		this.#options = new RadioOptionsController(this, {
-			setItemAttributes: (item, option) => item.setAttribute("data-rate", option.value),
-			onValueChange: (value) => {
-				const media = this.#mediaState.value;
-				if (media) this.#core.selectValue(media, value);
-			}
-		});
-	}
-	static {
-		this.tagName = "media-playback-rate-radio-group";
-	}
-	static {
-		this.properties = {
-			...MenuRadioGroupElement.properties,
-			disabled: { type: Boolean }
-		};
-	}
-	#core;
-	#i18n;
-	#mediaState;
-	#options;
-	connectedCallback() {
-		super.connectedCallback();
-		if (this.destroyed) return;
-	}
-	update(changed) {
-		const media = this.#mediaState.value;
-		let state = null;
-		if (media) {
-			this.#core.setProps({
-				formatRate: this.formatRate,
-				disabled: this.disabled
-			});
-			this.#core.setMedia(media);
-			state = this.#core.getState();
-			this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value, this.#core.getLabelParams(state)));
-			this.#options.sync(state, this.#i18n.value, this.#i18n.locale);
-			this.publishMenuOptionState(state.disabled, state.hidden, state.availability);
-		} else this.publishMenuOptionState(true, true, "unsupported");
-		super.update(changed);
-		if (state) applyStateDataAttrs(this, state, PlaybackRateRadioGroupDataAttrs);
-	}
-};
-//#endregion
-export { PlaybackRateRadioGroupElement };
-
-//# sourceMappingURL=playback-rate-radio-group-element.js.map

package/dist/default/ui/playback-rate-radio-group/playback-rate-radio-group-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"playback-rate-radio-group-element.js","names":["#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/playback-rate-radio-group/playback-rate-radio-group-element.ts"],"sourcesContent":["import {\n  PlaybackRateRadioGroupCore,\n  PlaybackRateRadioGroupDataAttrs,\n  type PlaybackRateRadioGroupOption,\n} from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectPlaybackRate } from '@videojs/core/dom';\nimport { 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/player-controller';\nimport { MenuRadioGroupElement } from '../menu/menu-radio-group-element';\nimport { RadioOptionsController } from '../radio-options/radio-options-controller';\n\nexport class PlaybackRateRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-playback-rate-radio-group';\n\n  static override properties = {\n    ...MenuRadioGroupElement.properties,\n    disabled: { type: Boolean },\n  } satisfies PropertyDeclarationMap<'value' | 'disabled'>;\n\n  disabled = false;\n  formatRate = PlaybackRateRadioGroupCore.defaultProps.formatRate;\n\n  readonly #core = new PlaybackRateRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectPlaybackRate);\n  readonly #options = new RadioOptionsController<PlaybackRateRadioGroupOption>(this, {\n    setItemAttributes: (item, option) => item.setAttribute('data-rate', 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: PlaybackRateRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRate: this.formatRate, disabled: this.disabled });\n      this.#core.setMedia(media);\n      state = this.#core.getState();\n\n      this.applyDefaultAriaLabel(\n        translateText(this.#core.getLabel(state), this.#i18n.value, this.#core.getLabelParams(state))\n      );\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, PlaybackRateRadioGroupDataAttrs);\n  }\n}\n\nexport namespace PlaybackRateRadioGroupElement {\n  export type State = PlaybackRateRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,gCAAb,cAAmD,sBAAsB;;;EAQ5D,KAAA,WAAA;EACE,KAAA,aAAA,2BAA2B,aAAa;EAEpC,KAAA,QAAA,IAAI,2BAA2B;EAC/B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,kBAAkB;EAC/D,KAAA,WAAA,IAAI,uBAAqD,MAAM;GACjF,oBAAoB,MAAM,WAAW,KAAK,aAAa,aAAa,OAAO,KAAK;GAChF,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKA,YAAY;IAE/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EApBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;EAC5B;;CAKA;CACA;CACA;CACA;CASA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;CAKtB;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKD,YAAY;EAC/B,IAAI,QAAiD;EAErD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,YAAY,KAAK;IAAY,UAAU,KAAK;GAAS,CAAC;GAC5E,KAAKA,MAAM,SAAS,KAAK;GACzB,QAAQ,KAAKA,MAAM,SAAS;GAE5B,KAAK,sBACH,cAAc,KAAKA,MAAM,SAAS,KAAK,GAAG,KAAKC,MAAM,OAAO,KAAKD,MAAM,eAAe,KAAK,CAAC,CAC9F;GACA,KAAKE,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,+BAA+B;CAC7E;AACF"}

package/dist/default/ui/popover/popover-element.js

@@ -1,190 +0,0 @@
-import { containerContext } from "../../player/context.js";
-import { UIElement } from "../ui-element.js";
-import { PositionController } from "../position-controller.js";
-import { popupGroupContext } from "../../player/popup-group-context.js";
-import { POPUP_HOST_ATTR, PopoverCore, PopoverDataAttrs } from "@videojs/core";
-import { applyElementProps, applyStateDataAttrs, createPopover, createTransition } from "@videojs/core/dom";
-import { ContextConsumer } from "@videojs/element/context";
-import { tryHidePopover, tryShowPopover } from "@videojs/utils/dom";
-import { SnapshotController } from "@videojs/store/html";
-//#region src/ui/popover/popover-element.ts
-/** @fires open-change - Fired when the popover's open state changes. */
-var PopoverElement = class extends UIElement {
-	constructor(..._args) {
-		super(..._args);
-		this.open = PopoverCore.defaultProps.open;
-		this.defaultOpen = PopoverCore.defaultProps.defaultOpen;
-		this.side = PopoverCore.defaultProps.side;
-		this.align = PopoverCore.defaultProps.align;
-		this.modal = PopoverCore.defaultProps.modal;
-		this.closeOnEscape = PopoverCore.defaultProps.closeOnEscape;
-		this.closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;
-		this.openOnHover = PopoverCore.defaultProps.openOnHover;
-		this.delay = PopoverCore.defaultProps.delay;
-		this.closeDelay = PopoverCore.defaultProps.closeDelay;
-		this.boundary = "container";
-		this.#core = new PopoverCore();
-		this.#containerCtx = new ContextConsumer(this, {
-			context: containerContext,
-			subscribe: true
-		});
-		this.#popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });
-		this.#position = new PositionController(this);
-		this.#popover = null;
-		this.#snapshot = null;
-		this.#disconnect = null;
-		this.#triggerAbort = null;
-		this.#currentTrigger = null;
-	}
-	static {
-		this.tagName = "media-popover";
-	}
-	static {
-		this.properties = {
-			open: { type: Boolean },
-			defaultOpen: {
-				type: Boolean,
-				attribute: "default-open"
-			},
-			side: { type: String },
-			align: { type: String },
-			modal: { type: Boolean },
-			closeOnEscape: {
-				type: Boolean,
-				attribute: "close-on-escape"
-			},
-			closeOnOutsideClick: {
-				type: Boolean,
-				attribute: "close-on-outside-click"
-			},
-			openOnHover: {
-				type: Boolean,
-				attribute: "open-on-hover"
-			},
-			delay: { type: Number },
-			closeDelay: {
-				type: Number,
-				attribute: "close-delay"
-			},
-			boundary: { type: String }
-		};
-	}
-	#core;
-	#containerCtx;
-	#popupGroupCtx;
-	#position;
-	#popover;
-	#snapshot;
-	#disconnect;
-	#triggerAbort;
-	#currentTrigger;
-	connectedCallback() {
-		super.connectedCallback();
-		if (this.destroyed) return;
-		this.setAttribute(POPUP_HOST_ATTR, "");
-		this.#disconnect = new AbortController();
-		this.#popover = createPopover({
-			transition: createTransition(),
-			onOpenChange: (nextOpen, details) => {
-				this.open = nextOpen;
-				this.dispatchEvent(new CustomEvent("open-change", { detail: {
-					open: nextOpen,
-					...details
-				} }));
-			},
-			closeOnEscape: () => this.closeOnEscape,
-			closeOnOutsideClick: () => this.closeOnOutsideClick,
-			openOnHover: () => this.openOnHover,
-			delay: () => this.delay,
-			closeDelay: () => this.closeDelay,
-			group: () => this.#popupGroupCtx.value
-		});
-		this.#popover.setPopupElement(this);
-		applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });
-		if (this.#snapshot) this.#snapshot.track(this.#popover.input);
-		else this.#snapshot = new SnapshotController(this, this.#popover.input);
-	}
-	firstUpdated(changed) {
-		super.firstUpdated(changed);
-		if (this.defaultOpen && !this.open) this.#popover?.open();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#disconnect?.abort();
-		this.#disconnect = null;
-	}
-	destroyCallback() {
-		this.#cleanupTrigger();
-		this.#popover?.destroy();
-		super.destroyCallback();
-	}
-	close(reason = "imperative-action") {
-		this.#popover?.close(reason);
-	}
-	get triggerElement() {
-		return this.#currentTrigger;
-	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		this.#core.setProps(this);
-		if (this.#popover && changed.has("open")) {
-			const { active: interactionOpen } = this.#popover.input.current;
-			if (this.open !== interactionOpen) if (this.open) this.#popover.open();
-			else this.#popover.close();
-		}
-	}
-	update(_changed) {
-		super.update(_changed);
-		if (!this.#popover) return;
-		const triggerEl = this.#position.findTrigger();
-		this.#syncTrigger(triggerEl);
-		const input = this.#popover.input.current;
-		this.#core.setInput(input);
-		const state = this.#core.getState();
-		applyElementProps(this, this.#core.getPopupAttrs(state));
-		applyStateDataAttrs(this, state, PopoverDataAttrs);
-		if (state.open) tryShowPopover(this);
-		else tryHidePopover(this);
-		if (this.#currentTrigger) applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
-		if (!state.open) {
-			this.#position.cleanup();
-			return;
-		}
-		this.#position.sync({
-			anchorName: this.id,
-			position: {
-				side: state.side,
-				align: state.align
-			},
-			trigger: this.#currentTrigger,
-			boundary: this.boundary,
-			container: this.#containerCtx.value?.container ?? null,
-			onSideChange: (side) => this.setAttribute(PopoverDataAttrs.side, side)
-		});
-	}
-	#syncTrigger(triggerEl) {
-		if (triggerEl === this.#currentTrigger) return;
-		this.#position.cleanup();
-		this.#cleanupTrigger();
-		this.#currentTrigger = triggerEl;
-		this.#popover?.setTriggerElement(triggerEl);
-		if (triggerEl && this.#popover) {
-			this.#triggerAbort = new AbortController();
-			applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });
-		}
-	}
-	#cleanupTrigger() {
-		if (this.#currentTrigger) applyElementProps(this.#currentTrigger, {
-			"aria-expanded": void 0,
-			"aria-haspopup": void 0,
-			"aria-controls": void 0
-		});
-		this.#triggerAbort?.abort();
-		this.#triggerAbort = null;
-		this.#currentTrigger = null;
-	}
-};
-//#endregion
-export { PopoverElement };
-
-//# sourceMappingURL=popover-element.js.map

package/dist/default/ui/popover/popover-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-element.js","names":["#core","#containerCtx","#popupGroupCtx","#position","#disconnect","#popover","#snapshot","#cleanupTrigger","#currentTrigger","#syncTrigger","#triggerAbort"],"sources":["../../../../src/ui/popover/popover-element.ts"],"sourcesContent":["import { POPUP_HOST_ATTR, PopoverCore, PopoverDataAttrs, type PopoverInput, type PopoverProps } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createPopover,\n  createTransition,\n  type PopoverApi,\n  type PopoverChangeDetails,\n  type PopoverOpenChangeReason,\n  type PositioningBoundary,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\nimport { tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { containerContext } from '../../player/context';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\n\n/** @fires open-change - Fired when the popover's open state changes. */\nexport class PopoverElement extends UIElement {\n  static readonly tagName: string = 'media-popover';\n\n  static override properties = {\n    open: { type: Boolean },\n    defaultOpen: { type: Boolean, attribute: 'default-open' },\n    side: { type: String },\n    align: { type: String },\n    modal: { type: Boolean },\n    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n    closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n    openOnHover: { type: Boolean, attribute: 'open-on-hover' },\n    delay: { type: Number },\n    closeDelay: { type: Number, attribute: 'close-delay' },\n    boundary: { type: String },\n  } satisfies PropertyDeclarationMap<keyof PopoverCore.Props | 'boundary'>;\n\n  open = PopoverCore.defaultProps.open;\n  defaultOpen = PopoverCore.defaultProps.defaultOpen;\n  side = PopoverCore.defaultProps.side;\n  align = PopoverCore.defaultProps.align;\n  modal: PopoverProps['modal'] = PopoverCore.defaultProps.modal;\n  closeOnEscape = PopoverCore.defaultProps.closeOnEscape;\n  closeOnOutsideClick = PopoverCore.defaultProps.closeOnOutsideClick;\n  openOnHover = PopoverCore.defaultProps.openOnHover;\n  delay = PopoverCore.defaultProps.delay;\n  closeDelay = PopoverCore.defaultProps.closeDelay;\n  boundary: PositioningBoundary = 'container';\n\n  readonly #core = new PopoverCore();\n  readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });\n  readonly #position = new PositionController(this);\n  #popover: PopoverApi | null = null;\n  #snapshot: SnapshotController<PopoverInput> | null = null;\n\n  // Cleanup controllers\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.setAttribute(POPUP_HOST_ATTR, '');\n\n    this.#disconnect = new AbortController();\n\n    this.#popover = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        this.open = nextOpen;\n        this.dispatchEvent(new CustomEvent('open-change', { detail: { open: nextOpen, ...details } }));\n      },\n      closeOnEscape: () => this.closeOnEscape,\n      closeOnOutsideClick: () => this.closeOnOutsideClick,\n      openOnHover: () => this.openOnHover,\n      delay: () => this.delay,\n      closeDelay: () => this.closeDelay,\n      group: () => this.#popupGroupCtx.value,\n    });\n\n    // Register self as the popup element — the element IS the popup.\n    this.#popover.setPopupElement(this);\n\n    // Apply popup event handlers (pointerenter/leave, focusout) to self.\n    applyElementProps(this, this.#popover.popupProps, { signal: this.#disconnect.signal });\n\n    // Subscribe to interaction state for reactive updates.\n    // Reuse the controller across connect/disconnect cycles to avoid\n    // leaking stale controllers in the host's controller set.\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#popover.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#popover.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    // Uncontrolled mode: open if `defaultOpen` is set. Controlled `open`\n    // is already synced by `willUpdate` on the first render cycle.\n    if (this.defaultOpen && !this.open) {\n      this.#popover?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  override destroyCallback(): void {\n    this.#cleanupTrigger();\n    this.#popover?.destroy();\n    super.destroyCallback();\n  }\n\n  close(reason: PopoverOpenChangeReason = 'imperative-action'): void {\n    this.#popover?.close(reason);\n  }\n\n  protected get triggerElement(): HTMLElement | null {\n    return this.#currentTrigger;\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this.#core.setProps(this);\n\n    // Sync controlled open state\n    if (this.#popover && changed.has('open')) {\n      const { active: interactionOpen } = this.#popover.input.current;\n\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#popover.open();\n        } else {\n          this.#popover.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.#popover) return;\n\n    // Discover trigger via commandfor linkage.\n    const triggerEl = this.#position.findTrigger();\n\n    this.#syncTrigger(triggerEl);\n\n    // Derive state from core + input.\n    const input = this.#popover.input.current;\n\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    // Apply popup ARIA and data attributes to self.\n    applyElementProps(this, this.#core.getPopupAttrs(state));\n    applyStateDataAttrs(this, state, PopoverDataAttrs);\n\n    // Show/hide via Popover API AFTER data attributes are applied so\n    // `data-starting-style` is present before the first visible frame.\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    // Apply trigger ARIA to the discovered trigger.\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n    }\n\n    // Skip positioning when closed — no rects to measure.\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    this.#position.sync({\n      anchorName: this.id,\n      position: { side: state.side, align: state.align },\n      trigger: this.#currentTrigger,\n      boundary: this.boundary,\n      container: this.#containerCtx.value?.container ?? null,\n      onSideChange: (side) => this.setAttribute(PopoverDataAttrs.side, side),\n    });\n  }\n\n  // --- Trigger management ---\n\n  #syncTrigger(triggerEl: HTMLElement | null): void {\n    if (triggerEl === this.#currentTrigger) return;\n\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerEl;\n    this.#popover?.setTriggerElement(triggerEl);\n\n    if (triggerEl && this.#popover) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerEl, this.#popover.triggerProps, { signal: this.#triggerAbort.signal });\n    }\n  }\n\n  #cleanupTrigger(): void {\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, {\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.#currentTrigger = null;\n  }\n}\n"],"mappings":"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"}

package/dist/default/ui/poster/poster-element.js

@@ -1,145 +0,0 @@
-import { playerContext } from "../../player/context.js";
-import { PlayerController } from "../../player/player-controller.js";
-import { UIElement } from "../ui-element.js";
-import { PosterCore, PosterDataAttrs } from "@videojs/core";
-import { applyStateDataAttrs, selectMetadata, selectPlayback } from "@videojs/core/dom";
-//#region src/ui/poster/poster-element.ts
-/** What an element composes: whatever fills a slot, or the element's own children. */
-function composedChildren(element) {
-	if (element instanceof HTMLSlotElement) {
-		const assigned = element.assignedElements();
-		if (assigned.length > 0) return assigned;
-	}
-	return [...element.children];
-}
-/**
-* The first image an element composes. A skin forwards its own `<slot name="poster">` in, so the image is a slot or two
-* down and may be wrapped in a `<picture>` or a framework image component.
-*/
-function findImage(element) {
-	for (const child of composedChildren(element)) {
-		if (child instanceof HTMLImageElement) return child;
-		const nested = findImage(child);
-		if (nested) return nested;
-	}
-	return null;
-}
-/**
-* Whether anything already points this image somewhere, which answers both whether the author owns the source and
-* whether there is a download to wait for. A `<source>` counts: inside a `<picture>` it can win over the `src`.
-*/
-function hasSource(img) {
-	if (img.hasAttribute("src") || img.hasAttribute("srcset")) return true;
-	const parent = img.parentElement;
-	return parent?.localName === "picture" && parent.querySelector("source") !== null;
-}
-/**
-* Whether `complete` on this image describes a request. It is also true for one that omits both `src` and `srcset`,
-* whatever a parent `<picture>` is fetching on its behalf, so only an image sourced from its own attributes can be
-* read.
-*/
-function hasOwnSource(img) {
-	return !!img.getAttribute("src") || img.hasAttribute("srcset");
-}
-/**
-* `<media-poster>` — sets `src` on a poster image it does not own.
-*
-* The image is a child, as in `<picture>`, but sourcing runs the other way around: `<picture>` treats the `src` on its
-* `<img>` as the fallback, while here an image with no source of its own is the one this element fills in. Give the
-* child a `src`, a `srcset`, or `<source>` candidates and it is yours, left alone.
-*
-* Renders no image of its own, so include one: `<media-poster><img alt=""></media-poster>`. Inside a skin, an `<img
-* slot="poster">` of yours replaces the one the skin carries.
-*/
-var PosterElement = class extends UIElement {
-	static {
-		this.tagName = "media-poster";
-	}
-	#core = new PosterCore();
-	#children = new MutationObserver(() => this.requestUpdate());
-	#playback = new PlayerController(this, playerContext, selectPlayback);
-	#metadata = new PlayerController(this, playerContext, selectMetadata);
-	#image = null;
-	/** Whether `#image` had no source of its own when it became active. */
-	#owned = false;
-	#imageLoadState = "pending";
-	#imageEvents = null;
-	#disconnect = null;
-	#warnedMissingImage = false;
-	connectedCallback() {
-		super.connectedCallback();
-		if (this.destroyed) return;
-		this.#disconnect = new AbortController();
-		const { signal } = this.#disconnect;
-		this.addEventListener("slotchange", () => this.requestUpdate(), { signal });
-		this.#children.observe(this, {
-			childList: true,
-			subtree: true
-		});
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.#adopt(null);
-		this.#children.disconnect();
-		this.#disconnect?.abort();
-		this.#disconnect = null;
-	}
-	get #loadState() {
-		if (!this.#image || !hasSource(this.#image)) return "none";
-		return this.#imageLoadState === "pending" ? "loading" : this.#imageLoadState;
-	}
-	update(changed) {
-		super.update(changed);
-		const playback = this.#playback.value;
-		if (!playback) return;
-		this.#core.setMedia({
-			started: playback.started,
-			poster: this.#metadata.value?.poster ?? ""
-		});
-		const { src } = this.#core.getState();
-		this.#adopt(findImage(this));
-		this.#applySource(src);
-		this.#core.setImageLoadState(this.#loadState);
-		applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);
-	}
-	/**
-	* Ownership is settled once, when an image becomes active: after the first fill the `src` we set would itself look
-	* authored. Re-slot an image with a source to hand it back, the way React decides a field is controlled at mount.
-	*/
-	#adopt(next) {
-		if (next === this.#image) return;
-		if (this.#owned) this.#image?.removeAttribute("src");
-		this.#imageEvents?.abort();
-		this.#imageEvents = null;
-		this.#image = next;
-		this.#owned = next !== null && !hasSource(next);
-		this.#imageLoadState = "pending";
-		if (!next) return;
-		if (next.naturalWidth > 0) this.#imageLoadState = "loaded";
-		else if (next.complete && hasOwnSource(next)) this.#imageLoadState = "error";
-		this.#imageEvents = new AbortController();
-		const { signal } = this.#imageEvents;
-		const settle = (loadState) => () => {
-			this.#imageLoadState = loadState;
-			this.requestUpdate();
-		};
-		next.addEventListener("load", settle("loaded"), { signal });
-		next.addEventListener("error", settle("error"), { signal });
-	}
-	#applySource(src) {
-		const img = this.#image;
-		if (!img) return;
-		if (!this.#owned) return;
-		if (!src) {
-			this.#imageLoadState = "pending";
-			img.removeAttribute("src");
-		} else if (img.getAttribute("src") !== src) {
-			this.#imageLoadState = "pending";
-			img.setAttribute("src", src);
-		}
-	}
-};
-//#endregion
-export { PosterElement };
-
-//# sourceMappingURL=poster-element.js.map

package/dist/default/ui/poster/poster-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"poster-element.js","names":["#core","#children","#playback","#metadata","#disconnect","#adopt","#loadState","#image","#imageLoadState","#applySource","#owned","#imageEvents"],"sources":["../../../../src/ui/poster/poster-element.ts"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { PropertyValues } from '@videojs/element';\n\nimport { playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/player-controller';\nimport { UIElement } from '../ui-element';\n\n/** What an element composes: whatever fills a slot, or the element's own children. */\nfunction composedChildren(element: Element): Element[] {\n  if (element instanceof HTMLSlotElement) {\n    const assigned = element.assignedElements();\n    if (assigned.length > 0) return assigned;\n  }\n\n  return [...element.children];\n}\n\n/**\n * The first image an element composes. A skin forwards its own `<slot name=\"poster\">` in, so the image is a slot or two\n * down and may be wrapped in a `<picture>` or a framework image component.\n */\nfunction findImage(element: Element): HTMLImageElement | null {\n  for (const child of composedChildren(element)) {\n    if (child instanceof HTMLImageElement) return child;\n\n    const nested = findImage(child);\n    if (nested) return nested;\n  }\n\n  return null;\n}\n\n/**\n * Whether anything already points this image somewhere, which answers both whether the author owns the source and\n * whether there is a download to wait for. A `<source>` counts: inside a `<picture>` it can win over the `src`.\n */\nfunction hasSource(img: HTMLImageElement): boolean {\n  if (img.hasAttribute('src') || img.hasAttribute('srcset')) return true;\n\n  const parent = img.parentElement;\n\n  return parent?.localName === 'picture' && parent.querySelector('source') !== null;\n}\n\n/**\n * Whether `complete` on this image describes a request. It is also true for one that omits both `src` and `srcset`,\n * whatever a parent `<picture>` is fetching on its behalf, so only an image sourced from its own attributes can be\n * read.\n */\nfunction hasOwnSource(img: HTMLImageElement): boolean {\n  return !!img.getAttribute('src') || img.hasAttribute('srcset');\n}\n\n/** How the current source is faring. */\ntype ImageLoadState = 'pending' | 'loaded' | 'error';\n\n/**\n * `<media-poster>` — sets `src` on a poster image it does not own.\n *\n * The image is a child, as in `<picture>`, but sourcing runs the other way around: `<picture>` treats the `src` on its\n * `<img>` as the fallback, while here an image with no source of its own is the one this element fills in. Give the\n * child a `src`, a `srcset`, or `<source>` candidates and it is yours, left alone.\n *\n * Renders no image of its own, so include one: `<media-poster><img alt=\"\"></media-poster>`. Inside a skin, an `<img\n * slot=\"poster\">` of yours replaces the one the skin carries.\n */\nexport class PosterElement extends UIElement {\n  static readonly tagName = 'media-poster';\n\n  readonly #core = new PosterCore();\n  readonly #children = new MutationObserver(() => this.requestUpdate());\n\n  readonly #playback = new PlayerController(this, playerContext, selectPlayback);\n  readonly #metadata = new PlayerController(this, playerContext, selectMetadata);\n\n  #image: HTMLImageElement | null = null;\n  /** Whether `#image` had no source of its own when it became active. */\n  #owned = false;\n  #imageLoadState: ImageLoadState = 'pending';\n\n  #imageEvents: AbortController | null = null;\n  #disconnect: AbortController | null = null;\n  #warnedMissingImage = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.#disconnect = new AbortController();\n    const { signal } = this.#disconnect;\n\n    // Two ways the image can change: a skin's forwarding slot fills or empties,\n    // which bubbles here, or a child is added or removed, which announces nothing.\n    this.addEventListener('slotchange', () => this.requestUpdate(), { signal });\n    this.#children.observe(this, { childList: true, subtree: true });\n\n    if (__DEV__ && !this.#playback.value) {\n      logMissingFeature(this.localName, this.#playback.displayName ?? 'playback');\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.#adopt(null);\n    this.#children.disconnect();\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  get #loadState(): PosterImageLoadState {\n    if (!this.#image || !hasSource(this.#image)) return 'none';\n\n    return this.#imageLoadState === 'pending' ? 'loading' : this.#imageLoadState;\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    const playback = this.#playback.value;\n    if (!playback) return;\n\n    // `metadata` is optional: without it nothing resolves a URL, and this stays\n    // a visibility wrapper around whatever the author supplied.\n    this.#core.setMedia({\n      started: playback.started,\n      poster: this.#metadata.value?.poster ?? '',\n    });\n\n    const { src } = this.#core.getState();\n\n    this.#adopt(findImage(this));\n    this.#applySource(src);\n\n    this.#core.setImageLoadState(this.#loadState);\n    applyStateDataAttrs(this, this.#core.getState(), PosterDataAttrs);\n  }\n\n  /**\n   * Ownership is settled once, when an image becomes active: after the first fill the `src` we set would itself look\n   * authored. Re-slot an image with a source to hand it back, the way React decides a field is controlled at mount.\n   */\n  #adopt(next: HTMLImageElement | null): void {\n    if (next === this.#image) return;\n\n    // An image that steps aside keeps downloading whatever we pointed it at.\n    if (this.#owned) this.#image?.removeAttribute('src');\n\n    this.#imageEvents?.abort();\n    this.#imageEvents = null;\n\n    this.#image = next;\n    this.#owned = next !== null && !hasSource(next);\n    this.#imageLoadState = 'pending';\n\n    if (!next) return;\n\n    // An image that finished before we started listening never fires again, so\n    // its load state has to be read off it. Decoded pixels stand on their own;\n    // the absence of them only means failure once `complete` can be trusted.\n    if (next.naturalWidth > 0) this.#imageLoadState = 'loaded';\n    else if (next.complete && hasOwnSource(next)) this.#imageLoadState = 'error';\n\n    this.#imageEvents = new AbortController();\n    const { signal } = this.#imageEvents;\n    const settle = (loadState: ImageLoadState) => () => {\n      this.#imageLoadState = loadState;\n      this.requestUpdate();\n    };\n\n    next.addEventListener('load', settle('loaded'), { signal });\n    next.addEventListener('error', settle('error'), { signal });\n  }\n\n  #applySource(src: string): void {\n    const img = this.#image;\n\n    if (!img) {\n      if (__DEV__ && src && !this.#warnedMissingImage) {\n        this.#warnedMissingImage = true;\n        console.warn(\n          `<${this.localName}> resolved a poster but has no image to put it in. ` +\n            `Add one as a child: <${this.localName}><img alt=\"\"></${this.localName}>`\n        );\n      }\n\n      return;\n    }\n\n    if (!this.#owned) return;\n\n    if (!src) {\n      this.#imageLoadState = 'pending';\n      img.removeAttribute('src');\n    } else if (img.getAttribute('src') !== src) {\n      // Reset before the write, not after: how the last source fared says\n      // nothing about this one, and the write itself can settle it.\n      this.#imageLoadState = 'pending';\n      img.setAttribute('src', src);\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/default/ui/quality-radio-group/quality-radio-group-element.js

@@ -1,89 +0,0 @@
-import { i18nContext } from "../../i18n/context.js";
-import { I18nController } from "../../i18n/controller.js";
-import { playerContext } from "../../player/context.js";
-import { PlayerController } from "../../player/player-controller.js";
-import { MenuRadioGroupElement } from "../menu/menu-radio-group-element.js";
-import { RadioOptionsController } from "../radio-options/radio-options-controller.js";
-import { QualityRadioGroupCore, QualityRadioGroupDataAttrs } from "@videojs/core";
-import { applyStateDataAttrs, selectQuality } from "@videojs/core/dom";
-import { translateText } from "@videojs/core/i18n";
-//#region src/ui/quality-radio-group/quality-radio-group-element.ts
-var QualityRadioGroupElement = class extends MenuRadioGroupElement {
-	constructor(..._args) {
-		super(..._args);
-		this.disabled = false;
-		this.label = "";
-		this.formatRendition = QualityRadioGroupCore.defaultProps.formatRendition;
-		this.#core = new QualityRadioGroupCore();
-		this.#i18n = new I18nController(this, i18nContext);
-		this.#mediaState = new PlayerController(this, playerContext, selectQuality);
-		this.#options = new RadioOptionsController(this, {
-			renderItem: (item, label, option) => this.#setContent(item, label, option.tier, option.badge),
-			setItemAttributes: (item, option) => item.setAttribute("data-rendition", option.value),
-			getOptionCacheKey: (option) => `${option.tier ?? ""}:${option.badge ?? ""}`,
-			onValueChange: (value) => {
-				const media = this.#mediaState.value;
-				if (media) this.#core.selectValue(media, value);
-			}
-		});
-	}
-	static {
-		this.tagName = "media-quality-radio-group";
-	}
-	static {
-		this.properties = {
-			...MenuRadioGroupElement.properties,
-			disabled: { type: Boolean },
-			label: { type: String }
-		};
-	}
-	#core;
-	#i18n;
-	#mediaState;
-	#options;
-	connectedCallback() {
-		super.connectedCallback();
-		if (this.destroyed) return;
-	}
-	update(changed) {
-		const media = this.#mediaState.value;
-		let state = null;
-		if (media) {
-			this.#core.setProps({
-				formatRendition: this.formatRendition,
-				disabled: this.disabled,
-				label: this.label
-			});
-			this.#core.setMedia(media);
-			state = this.#core.getState();
-			this.applyDefaultAriaLabel(translateText(this.#core.getLabel(state), this.#i18n.value));
-			this.#options.sync(state, this.#i18n.value, this.#i18n.locale);
-			this.publishMenuOptionState(state.disabled, state.hidden, state.availability);
-		} else this.publishMenuOptionState(true, true, "unsupported");
-		super.update(changed);
-		if (state) applyStateDataAttrs(this, state, QualityRadioGroupDataAttrs);
-	}
-	#setContent(item, label, tier, badge) {
-		const labelPart = item.querySelector("[data-part~=\"label\"]");
-		const tierPart = item.querySelector("[data-part~=\"tier\"]");
-		const badgePart = item.querySelector("[data-part~=\"badge\"]");
-		if (labelPart) labelPart.textContent = label;
-		if (tierPart) {
-			tierPart.textContent = tier ?? "";
-			tierPart.hidden = !tier;
-		}
-		if (badgePart) {
-			badgePart.textContent = badge ?? "";
-			badgePart.hidden = !badge;
-		}
-		if (!labelPart && !tierPart && !badgePart) item.textContent = [
-			label,
-			tier,
-			badge
-		].filter(Boolean).join(" ");
-	}
-};
-//#endregion
-export { QualityRadioGroupElement };
-
-//# sourceMappingURL=quality-radio-group-element.js.map

package/dist/default/ui/quality-radio-group/quality-radio-group-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"quality-radio-group-element.js","names":["#setContent","#mediaState","#core","#i18n","#options"],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group-element.ts"],"sourcesContent":["import { QualityRadioGroupCore, QualityRadioGroupDataAttrs, type QualityRadioGroupOption } from '@videojs/core';\nimport { applyStateDataAttrs, logMissingFeature, selectQuality } 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/player-controller';\nimport { MenuRadioGroupElement } from '../menu/menu-radio-group-element';\nimport type { MenuRadioItemElement } from '../menu/menu-radio-item-element';\nimport { RadioOptionsController } from '../radio-options/radio-options-controller';\n\nexport class QualityRadioGroupElement extends MenuRadioGroupElement {\n  static override readonly tagName = 'media-quality-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  formatRendition = QualityRadioGroupCore.defaultProps.formatRendition;\n\n  readonly #core = new QualityRadioGroupCore();\n  readonly #i18n = new I18nController(this, i18nContext);\n  readonly #mediaState = new PlayerController(this, playerContext, selectQuality);\n  readonly #options = new RadioOptionsController<QualityRadioGroupOption>(this, {\n    renderItem: (item, label, option) => this.#setContent(item, label, option.tier, option.badge),\n    setItemAttributes: (item, option) => item.setAttribute('data-rendition', option.value),\n    getOptionCacheKey: (option) => `${option.tier ?? ''}:${option.badge ?? ''}`,\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: QualityRadioGroupCore.State | null = null;\n\n    if (media) {\n      this.#core.setProps({ formatRendition: this.formatRendition, 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, QualityRadioGroupDataAttrs);\n  }\n\n  #setContent(item: MenuRadioItemElement, label: string, tier: string | undefined, badge: string | undefined): void {\n    const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n    const tierPart = item.querySelector<HTMLElement>('[data-part~=\"tier\"]');\n    const badgePart = item.querySelector<HTMLElement>('[data-part~=\"badge\"]');\n\n    if (labelPart) {\n      labelPart.textContent = label;\n    }\n\n    if (tierPart) {\n      tierPart.textContent = tier ?? '';\n      tierPart.hidden = !tier;\n    }\n\n    if (badgePart) {\n      badgePart.textContent = badge ?? '';\n      badgePart.hidden = !badge;\n    }\n\n    if (!labelPart && !tierPart && !badgePart) {\n      item.textContent = [label, tier, badge].filter(Boolean).join(' ');\n    }\n  }\n}\n\nexport namespace QualityRadioGroupElement {\n  export type State = QualityRadioGroupCore.State;\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAa,2BAAb,cAA8C,sBAAsB;;;EASvD,KAAA,WAAA;EACY,KAAA,QAAA;EACL,KAAA,kBAAA,sBAAsB,aAAa;EAEpC,KAAA,QAAA,IAAI,sBAAsB;EAC1B,KAAA,QAAA,IAAI,eAAe,MAAM,WAAW;EAC9B,KAAA,cAAA,IAAI,iBAAiB,MAAM,eAAe,aAAa;EAC1D,KAAA,WAAA,IAAI,uBAAgD,MAAM;GAC5E,aAAa,MAAM,OAAO,WAAW,KAAKA,YAAY,MAAM,OAAO,OAAO,MAAM,OAAO,KAAK;GAC5F,oBAAoB,MAAM,WAAW,KAAK,aAAa,kBAAkB,OAAO,KAAK;GACrF,oBAAoB,WAAW,GAAG,OAAO,QAAQ,GAAG,GAAG,OAAO,SAAS;GACvE,gBAAgB,UAAU;IACxB,MAAM,QAAQ,KAAKC,YAAY;IAE/B,IAAI,OAAO,KAAKC,MAAM,YAAY,OAAO,KAAK;GAChD;EACF,CAAC;;;EAxBkC,KAAA,UAAA;;;EAEN,KAAA,aAAA;GAC3B,GAAG,sBAAsB;GACzB,UAAU,EAAE,MAAM,QAAQ;GAC1B,OAAO,EAAE,MAAM,OAAO;EACxB;;CAMA;CACA;CACA;CACA;CAWA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,IAAI,KAAK,WAAW;CAKtB;CAEA,OAA0B,SAA+B;EACvD,MAAM,QAAQ,KAAKD,YAAY;EAC/B,IAAI,QAA4C;EAEhD,IAAI,OAAO;GACT,KAAKC,MAAM,SAAS;IAAE,iBAAiB,KAAK;IAAiB,UAAU,KAAK;IAAU,OAAO,KAAK;GAAM,CAAC;GACzG,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,0BAA0B;CACxE;CAEA,YAAY,MAA4B,OAAe,MAA0B,OAAiC;EAChH,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EACxE,MAAM,WAAW,KAAK,cAA2B,uBAAqB;EACtE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;EAG1B,IAAI,UAAU;GACZ,SAAS,cAAc,QAAQ;GAC/B,SAAS,SAAS,CAAC;EACrB;EAEA,IAAI,WAAW;GACb,UAAU,cAAc,SAAS;GACjC,UAAU,SAAS,CAAC;EACtB;EAEA,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,WAC9B,KAAK,cAAc;GAAC;GAAO;GAAM;EAAK,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEpE;AACF"}

package/dist/default/ui/radio-group/radio-group-element.js

@@ -1,33 +0,0 @@
-import { UIElement } from "../ui-element.js";
-import { radioGroupContext } from "./context.js";
-import { ContextProvider } from "@videojs/element/context";
-//#region src/ui/radio-group/radio-group-element.ts
-/** @fires value-change - Fired when the selected value changes. */
-var RadioGroupElement = class extends UIElement {
-	constructor(..._args) {
-		super(..._args);
-		this.value = "";
-		this.#provider = new ContextProvider(this, { context: radioGroupContext });
-	}
-	static {
-		this.properties = { value: { type: String } };
-	}
-	#provider;
-	update(changed) {
-		super.update(changed);
-		this.#provider.setValue({
-			value: this.value,
-			onValueChange: (next) => {
-				this.value = next;
-				this.dispatchEvent(new CustomEvent("value-change", {
-					detail: { value: next },
-					bubbles: true
-				}));
-			}
-		});
-	}
-};
-//#endregion
-export { RadioGroupElement };
-
-//# sourceMappingURL=radio-group-element.js.map

package/dist/default/ui/radio-group/radio-group-element.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"radio-group-element.js","names":["#provider"],"sources":["../../../../src/ui/radio-group/radio-group-element.ts"],"sourcesContent":["import type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { radioGroupContext } from './context';\n\n/** @fires value-change - Fired when the selected value changes. */\nexport class RadioGroupElement extends UIElement {\n  static override properties = {\n    value: { type: String },\n  } satisfies PropertyDeclarationMap<'value'>;\n\n  value = '';\n\n  readonly #provider = new ContextProvider(this, { context: radioGroupContext });\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    this.#provider.setValue({\n      value: this.value,\n      onValueChange: (next: string) => {\n        this.value = next;\n        this.dispatchEvent(new CustomEvent('value-change', { detail: { value: next }, bubbles: true }));\n      },\n    });\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,oBAAb,cAAuC,UAAU;;;EAKvC,KAAA,QAAA;EAEa,KAAA,YAAA,IAAI,gBAAgB,MAAM,EAAE,SAAS,kBAAkB,CAAC;;;EANhD,KAAA,aAAA,EAC3B,OAAO,EAAE,MAAM,OAAO,EACxB;;CAIA;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,KAAKA,UAAU,SAAS;GACtB,OAAO,KAAK;GACZ,gBAAgB,SAAiB;IAC/B,KAAK,QAAQ;IACb,KAAK,cAAc,IAAI,YAAY,gBAAgB;KAAE,QAAQ,EAAE,OAAO,KAAK;KAAG,SAAS;IAAK,CAAC,CAAC;GAChG;EACF,CAAC;CACH;AACF"}