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

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

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","names":["#menu","#optionStates","#optionState","#syncOptionState","#currentTrigger","#core","#provider","#position","#controlsState","#containerCtx","#popupGroupCtx","#popup","#disconnect","#handleFocusOut","#snapshot","#releaseControlsVisibilityLock","#cleanupTrigger","#releaseControlsLock","#syncTrigger","#setOptionState","#triggerWasDisabled","#triggerWasHidden","#triggerAbort"],"sources":["../../../../src/ui/menu/element.ts"],"sourcesContent":["import {\n  MenuCore,\n  type MenuInput,\n  type MenuOptionState,\n  MenuPopupDataAttrs,\n  POPUP_HOST_ATTR,\n  resolveMenuOptionState,\n} from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createMenu,\n  createMenuPopup,\n  createTransition,\n  getRootPositionOptions,\n  type MenuApi,\n  type MenuChangeDetails,\n  type MenuOpenChangeReason,\n  type MenuPopupApi,\n  MenuPositioningCSSVars,\n  type PositioningBoundary,\n  selectControls,\n  type UIFocusEvent,\n} from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer, ContextProvider } from '@videojs/element/context';\nimport { SnapshotController } from '@videojs/store/html';\nimport { tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\n\nimport { containerContext, playerContext } from '../../player/context';\nimport { PlayerController } from '../../player/controller';\nimport { popupGroupContext } from '../../player/popup-group-context';\nimport { PositionController } from '../position-controller';\nimport { UIElement } from '../ui-element';\nimport { menuContext } from './context';\n\n/**\n * Root menu state and positioned popup. Content pages are direct children.\n *\n * @fires open-change - Fired before the menu's open state changes. Cancel the event to prevent the change.\n */\nexport class MenuElement extends UIElement {\n  static readonly tagName: string = 'media-menu';\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    closeOnEscape: { type: Boolean, attribute: 'close-on-escape' },\n    closeOnOutsideClick: { type: Boolean, attribute: 'close-on-outside-click' },\n    boundary: { type: String },\n  } satisfies PropertyDeclarationMap<\n    'open' | 'defaultOpen' | 'side' | 'align' | 'closeOnEscape' | 'closeOnOutsideClick' | 'boundary'\n  >;\n\n  open = MenuCore.defaultProps.open;\n  defaultOpen = MenuCore.defaultProps.defaultOpen;\n  side = MenuCore.defaultProps.side;\n  align = MenuCore.defaultProps.align;\n  closeOnEscape = MenuCore.defaultProps.closeOnEscape;\n  closeOnOutsideClick = MenuCore.defaultProps.closeOnOutsideClick;\n  boundary: PositioningBoundary = 'container';\n\n  readonly #core = new MenuCore();\n  readonly #provider = new ContextProvider(this, { context: menuContext });\n  readonly #position = new PositionController(this);\n  readonly #controlsState = new PlayerController(this, playerContext, selectControls);\n  readonly #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  readonly #popupGroupCtx = new ContextConsumer(this, { context: popupGroupContext });\n  #menu: MenuApi | null = null;\n  #popup: MenuPopupApi | null = null;\n  #snapshot: SnapshotController<MenuInput> | null = null;\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n  #triggerWasDisabled = false;\n  #triggerWasHidden = false;\n  #releaseControlsLock: (() => void) | null = null;\n  readonly #optionStates = new Map<symbol, MenuOptionState>();\n  #optionState: MenuOptionState | null = null;\n\n  get menu(): MenuApi | null {\n    return this.#menu;\n  }\n\n  get popup(): MenuPopupApi | null {\n    return this.#popup;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (this.destroyed) return;\n\n    this.setAttribute(POPUP_HOST_ATTR, '');\n    this.#disconnect = new AbortController();\n    this.#popup = createMenuPopup();\n    this.#popup.setElement(this);\n    this.#menu = createMenu({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: MenuChangeDetails) => {\n        const accepted = this.dispatchEvent(\n          new CustomEvent('open-change', {\n            bubbles: true,\n            cancelable: true,\n            composed: true,\n            detail: { open: nextOpen, ...details },\n          })\n        );\n\n        if (accepted) this.open = nextOpen;\n      },\n      closeOnEscape: () => this.closeOnEscape,\n      closeOnOutsideClick: () => this.closeOnOutsideClick,\n      group: () => this.#popupGroupCtx.value,\n    });\n    this.#menu.setPopupElement(this);\n\n    applyElementProps(this, { onFocusOut: this.#handleFocusOut }, { signal: this.#disconnect.signal });\n\n    if (this.#snapshot) this.#snapshot.track(this.#menu.input);\n    else this.#snapshot = new SnapshotController(this, this.#menu.input);\n  }\n\n  override disconnectedCallback(): void {\n    this.#releaseControlsVisibilityLock();\n    super.disconnectedCallback();\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#popup?.destroy();\n    this.#popup = null;\n    this.#menu?.destroy();\n    this.#menu = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  close(reason: MenuOpenChangeReason = 'imperative-action'): void {\n    this.#menu?.close(reason);\n  }\n\n  openMenu(reason: MenuOpenChangeReason = 'imperative-action'): void {\n    this.#menu?.open(reason);\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    if (!this.hasUpdated && this.defaultOpen && !this.open) this.open = true;\n\n    this.#core.setProps({\n      open: this.open,\n      defaultOpen: this.defaultOpen,\n      side: this.side,\n      align: this.align,\n      closeOnEscape: this.closeOnEscape,\n      closeOnOutsideClick: this.closeOnOutsideClick,\n    });\n\n    if (this.#menu && changed.has('open')) this.#menu.syncOpen(this.open);\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    if (!this.#menu || !this.#popup) return;\n\n    const input = this.#menu.input.current;\n\n    this.#core.setInput({ ...input, isSubmenu: false });\n    const state = this.#core.getState();\n\n    if (state.open) this.#releaseControlsLock ??= this.#controlsState.value?.requestControlsLock() ?? null;\n    else this.#releaseControlsVisibilityLock();\n\n    const triggerElement = this.#position.findTrigger();\n\n    this.#syncTrigger(triggerElement);\n    applyElementProps(this, this.#core.getPopupAttrs());\n    applyStateDataAttrs(this, state, MenuPopupDataAttrs);\n\n    if (state.open) tryShowPopover(this);\n    else tryHidePopover(this);\n\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.#menu.contentElement?.id));\n      this.#syncOptionState(this.#currentTrigger);\n    }\n\n    if (!state.open) {\n      this.#position.cleanup();\n    } else {\n      this.#popup.sync();\n      const positionOptions = getRootPositionOptions(state.side, state.align);\n\n      if (positionOptions && this.#currentTrigger) {\n        this.#position.sync({\n          anchorName: this.id,\n          position: positionOptions,\n          trigger: this.#currentTrigger,\n          boundary: this.boundary,\n          container: this.#containerCtx.value?.container ?? null,\n          cssVars: MenuPositioningCSSVars,\n          trackResize: false,\n          onSideChange: (side) => this.setAttribute(MenuPopupDataAttrs.side, side),\n        });\n      }\n    }\n\n    this.#provider.setValue({\n      core: this.#core,\n      menu: this.#menu,\n      popup: this.#popup,\n      state,\n      setOptionState: this.#setOptionState,\n    });\n  }\n\n  #releaseControlsVisibilityLock(): void {\n    this.#releaseControlsLock?.();\n    this.#releaseControlsLock = null;\n  }\n\n  #handleFocusOut = (event: UIFocusEvent): void => {\n    this.#menu?.contentProps.onFocusOut(event);\n  };\n\n  #syncTrigger(triggerElement: HTMLElement | null): void {\n    if (triggerElement === this.#currentTrigger) return;\n\n    this.#position.cleanup();\n    this.#cleanupTrigger();\n    this.#currentTrigger = triggerElement;\n    this.#triggerWasDisabled = triggerElement ? isTriggerExplicitlyDisabled(triggerElement) : false;\n    this.#triggerWasHidden = triggerElement?.hidden === true;\n    this.#menu?.setTriggerElement(triggerElement);\n\n    if (triggerElement && this.#menu) {\n      this.#triggerAbort = new AbortController();\n      applyElementProps(triggerElement, this.#menu.triggerProps, { signal: this.#triggerAbort.signal });\n      this.#syncOptionState(triggerElement);\n    }\n  }\n\n  #setOptionState = (source: symbol, optionState: MenuOptionState | null): void => {\n    const previous = this.#optionStates.get(source);\n    if (optionState && isSameOptionState(previous, optionState)) return;\n\n    if (!optionState && !previous) return;\n\n    if (optionState) this.#optionStates.set(source, optionState);\n    else this.#optionStates.delete(source);\n\n    this.#optionState = resolveMenuOptionState(this.#optionStates.values());\n\n    if ((this.#optionState?.disabled || this.#optionState?.hidden) && this.open) this.close('imperative-action');\n\n    this.#syncOptionState(this.#currentTrigger);\n  };\n\n  #syncOptionState(trigger: HTMLElement | null): void {\n    if (!trigger) return;\n\n    applyElementProps(trigger, {\n      disabled: this.#triggerWasDisabled || this.#optionState?.disabled || undefined,\n      'aria-disabled': this.#triggerWasDisabled || this.#optionState?.disabled ? 'true' : undefined,\n      'data-availability': this.#optionState?.availability,\n      hidden: this.#triggerWasHidden || this.#optionState?.hidden || undefined,\n    });\n    const value = trigger.querySelector<HTMLElement>('[data-part~=\"value\"], [data-part~=\"hint\"]');\n\n    if (value && value.textContent !== this.#optionState?.value) value.textContent = this.#optionState?.value ?? '';\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        disabled: this.#triggerWasDisabled || undefined,\n        'aria-disabled': this.#triggerWasDisabled ? 'true' : undefined,\n        'data-availability': undefined,\n        hidden: this.#triggerWasHidden || undefined,\n      });\n      const value = this.#currentTrigger.querySelector<HTMLElement>('[data-part~=\"value\"], [data-part~=\"hint\"]');\n\n      if (value?.textContent) value.textContent = '';\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n    this.#triggerWasDisabled = false;\n    this.#triggerWasHidden = false;\n  }\n}\n\nfunction isSameOptionState(a: MenuOptionState | undefined, b: MenuOptionState): boolean {\n  return (\n    a?.value === b.value && a.disabled === b.disabled && a.hidden === b.hidden && a.availability === b.availability\n  );\n}\n\nfunction isTriggerExplicitlyDisabled(trigger: HTMLElement): boolean {\n  return (\n    trigger.hasAttribute('disabled') ||\n    ('disabled' in trigger && (trigger as HTMLElement & { disabled?: boolean }).disabled === true)\n  );\n}\n"],"mappings":"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"}

package/dist/dev/ui/menu/group-controller.js

@@ -0,0 +1,47 @@
+import { menuGroupContext } from "./context.js";
+import { applyElementProps } from "@videojs/core/dom";
+import { ContextProvider } from "@videojs/element/context";
+//#region src/ui/menu/group-controller.ts
+var MenuGroupController = class {
+	#host;
+	#provider;
+	#contextValue = { registerLabel: (id) => this.#registerLabel(id) };
+	#labelId;
+	#appliedLabelId;
+	constructor(host) {
+		this.#host = host;
+		this.#provider = new ContextProvider(host, {
+			context: menuGroupContext,
+			initialValue: this.#contextValue
+		});
+	}
+	applyProps() {
+		const currentLabelledBy = this.#host.getAttribute("aria-labelledby") ?? void 0;
+		const hasExplicitLabelledBy = currentLabelledBy !== void 0 && currentLabelledBy !== this.#appliedLabelId;
+		if (this.#host.hasAttribute("aria-label") || hasExplicitLabelledBy) {
+			if (this.#appliedLabelId && currentLabelledBy === this.#appliedLabelId) this.#host.removeAttribute("aria-labelledby");
+			this.#appliedLabelId = void 0;
+			applyElementProps(this.#host, { role: "group" });
+			return;
+		}
+		this.#appliedLabelId = this.#labelId;
+		applyElementProps(this.#host, {
+			role: "group",
+			"aria-labelledby": this.#labelId
+		});
+	}
+	#registerLabel(id) {
+		this.#labelId = id;
+		this.#provider.setValue(this.#contextValue);
+		this.#host.requestUpdate();
+		return () => {
+			if (this.#labelId !== id) return;
+			this.#labelId = void 0;
+			this.#host.requestUpdate();
+		};
+	}
+};
+//#endregion
+export { MenuGroupController };
+
+//# sourceMappingURL=group-controller.js.map

package/dist/dev/ui/menu/group-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-controller.js","names":["#host","#provider","#contextValue","#registerLabel","#appliedLabelId","#labelId"],"sources":["../../../../src/ui/menu/group-controller.ts"],"sourcesContent":["import { applyElementProps } from '@videojs/core/dom';\nimport { ContextProvider } from '@videojs/element/context';\n\nimport type { UIElement } from '../ui-element';\nimport { menuGroupContext } from './context';\n\ninterface MenuGroupHost extends UIElement {\n  requestUpdate(): void;\n}\n\nexport class MenuGroupController {\n  readonly #host: MenuGroupHost;\n  readonly #provider: ContextProvider<typeof menuGroupContext, MenuGroupHost>;\n  readonly #contextValue = {\n    registerLabel: (id: string) => this.#registerLabel(id),\n  };\n\n  #labelId: string | undefined;\n  #appliedLabelId: string | undefined;\n\n  constructor(host: MenuGroupHost) {\n    this.#host = host;\n    this.#provider = new ContextProvider(host, {\n      context: menuGroupContext,\n      initialValue: this.#contextValue,\n    });\n  }\n\n  applyProps(): void {\n    const currentLabelledBy = this.#host.getAttribute('aria-labelledby') ?? undefined;\n    const hasExplicitLabelledBy = currentLabelledBy !== undefined && currentLabelledBy !== this.#appliedLabelId;\n    const hasExplicitLabel = this.#host.hasAttribute('aria-label') || hasExplicitLabelledBy;\n\n    if (hasExplicitLabel) {\n      if (this.#appliedLabelId && currentLabelledBy === this.#appliedLabelId) {\n        this.#host.removeAttribute('aria-labelledby');\n      }\n\n      this.#appliedLabelId = undefined;\n      applyElementProps(this.#host, { role: 'group' });\n      return;\n    }\n\n    this.#appliedLabelId = this.#labelId;\n    applyElementProps(this.#host, {\n      role: 'group',\n      'aria-labelledby': this.#labelId,\n    });\n  }\n\n  #registerLabel(id: string): () => void {\n    this.#labelId = id;\n    this.#provider.setValue(this.#contextValue);\n    this.#host.requestUpdate();\n\n    return () => {\n      if (this.#labelId !== id) return;\n\n      this.#labelId = undefined;\n      this.#host.requestUpdate();\n    };\n  }\n}\n"],"mappings":";;;;AAUA,IAAa,sBAAb,MAAiC;CAC/B;CACA;CACA,gBAAyB,EACvB,gBAAgB,OAAe,KAAKG,eAAe,EAAE,EACvD;CAEA;CACA;CAEA,YAAY,MAAqB;EAC/B,KAAKH,QAAQ;EACb,KAAKC,YAAY,IAAI,gBAAgB,MAAM;GACzC,SAAS;GACT,cAAc,KAAKC;EACrB,CAAC;CACH;CAEA,aAAmB;EACjB,MAAM,oBAAoB,KAAKF,MAAM,aAAa,iBAAiB,KAAK,KAAA;EACxE,MAAM,wBAAwB,sBAAsB,KAAA,KAAa,sBAAsB,KAAKI;EAG5F,IAFyB,KAAKJ,MAAM,aAAa,YAAY,KAAK,uBAE5C;GACpB,IAAI,KAAKI,mBAAmB,sBAAsB,KAAKA,iBACrD,KAAKJ,MAAM,gBAAgB,iBAAiB;GAG9C,KAAKI,kBAAkB,KAAA;GACvB,kBAAkB,KAAKJ,OAAO,EAAE,MAAM,QAAQ,CAAC;GAC/C;EACF;EAEA,KAAKI,kBAAkB,KAAKC;EAC5B,kBAAkB,KAAKL,OAAO;GAC5B,MAAM;GACN,mBAAmB,KAAKK;EAC1B,CAAC;CACH;CAEA,eAAe,IAAwB;EACrC,KAAKA,WAAW;EAChB,KAAKJ,UAAU,SAAS,KAAKC,aAAa;EAC1C,KAAKF,MAAM,cAAc;EAEzB,aAAa;GACX,IAAI,KAAKK,aAAa,IAAI;GAE1B,KAAKA,WAAW,KAAA;GAChB,KAAKL,MAAM,cAAc;EAC3B;CACF;AACF"}

package/dist/dev/ui/menu/group-label.d.ts

@@ -0,0 +1,13 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/menu/group-label.d.ts
+/** Non-interactive label that names its enclosing `<media-menu-group>` or `<media-menu-radio-group>`. */
+declare class MenuGroupLabelElement extends UIElement {
+  #private;
+  static readonly tagName = "media-menu-group-label";
+  disconnectedCallback(): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { MenuGroupLabelElement };
+//# sourceMappingURL=group-label.d.ts.map

package/dist/dev/ui/menu/group-label.js

@@ -0,0 +1,46 @@
+import { UIElement } from "../ui-element.js";
+import { menuGroupContext } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/group-label.ts
+let idCounter = 0;
+/** Non-interactive label that names its enclosing `<media-menu-group>` or `<media-menu-radio-group>`. */
+var MenuGroupLabelElement = class extends UIElement {
+	static {
+		this.tagName = "media-menu-group-label";
+	}
+	#groupCtx = new ContextConsumer(this, {
+		context: menuGroupContext,
+		subscribe: true
+	});
+	#generatedId = `vjs-menu-group-label-${idCounter++}`;
+	#cleanupRegistration = null;
+	#registeredId = null;
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#registeredId = null;
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.id) this.id = this.#generatedId;
+		this.#registerLabel();
+	}
+	#registerLabel() {
+		const groupCtx = this.#groupCtx.value;
+		if (!groupCtx) {
+			this.#cleanupRegistration?.();
+			this.#cleanupRegistration = null;
+			this.#registeredId = null;
+			return;
+		}
+		if (this.#registeredId === this.id) return;
+		this.#cleanupRegistration?.();
+		this.#registeredId = this.id;
+		this.#cleanupRegistration = groupCtx.registerLabel(this.id);
+	}
+};
+//#endregion
+export { MenuGroupLabelElement };
+
+//# sourceMappingURL=group-label.js.map

package/dist/dev/ui/menu/group-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-label.js","names":["#groupCtx","#generatedId","#cleanupRegistration","#registeredId","#registerLabel"],"sources":["../../../../src/ui/menu/group-label.ts"],"sourcesContent":["import type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { menuGroupContext } from './context';\n\nlet idCounter = 0;\n\n/** Non-interactive label that names its enclosing `<media-menu-group>` or `<media-menu-radio-group>`. */\nexport class MenuGroupLabelElement extends UIElement {\n  static readonly tagName = 'media-menu-group-label';\n\n  readonly #groupCtx = new ContextConsumer(this, { context: menuGroupContext, subscribe: true });\n  readonly #generatedId = `vjs-menu-group-label-${idCounter++}`;\n\n  #cleanupRegistration: (() => void) | null = null;\n  #registeredId: string | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupRegistration?.();\n    this.#cleanupRegistration = null;\n    this.#registeredId = null;\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    if (!this.id) {\n      this.id = this.#generatedId;\n    }\n\n    this.#registerLabel();\n  }\n\n  #registerLabel(): void {\n    const groupCtx = this.#groupCtx.value;\n\n    if (!groupCtx) {\n      this.#cleanupRegistration?.();\n      this.#cleanupRegistration = null;\n      this.#registeredId = null;\n      return;\n    }\n\n    if (this.#registeredId === this.id) return;\n\n    this.#cleanupRegistration?.();\n    this.#registeredId = this.id;\n    this.#cleanupRegistration = groupCtx.registerLabel(this.id);\n  }\n}\n"],"mappings":";;;;AAMA,IAAI,YAAY;;AAGhB,IAAa,wBAAb,cAA2C,UAAU;;EACzB,KAAA,UAAA;;CAE1B,YAAqB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAkB,WAAW;CAAK,CAAC;CAC7F,eAAwB,wBAAwB;CAEhD,uBAA4C;CAC5C,gBAA+B;CAE/B,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKE,uBAAuB;EAC5B,KAAKA,uBAAuB;EAC5B,KAAKC,gBAAgB;CACvB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,IAAI,CAAC,KAAK,IACR,KAAK,KAAK,KAAKF;EAGjB,KAAKG,eAAe;CACtB;CAEA,iBAAuB;EACrB,MAAM,WAAW,KAAKJ,UAAU;EAEhC,IAAI,CAAC,UAAU;GACb,KAAKE,uBAAuB;GAC5B,KAAKA,uBAAuB;GAC5B,KAAKC,gBAAgB;GACrB;EACF;EAEA,IAAI,KAAKA,kBAAkB,KAAK,IAAI;EAEpC,KAAKD,uBAAuB;EAC5B,KAAKC,gBAAgB,KAAK;EAC1B,KAAKD,uBAAuB,SAAS,cAAc,KAAK,EAAE;CAC5D;AACF"}

package/dist/dev/ui/menu/group.d.ts

@@ -0,0 +1,15 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/menu/group.d.ts
+/**
+ * Groups related menu items; the element itself takes `role="group"`. A `<media-menu-group-label>` child names the
+ * group unless it already has an `aria-label` or `aria-labelledby`.
+ */
+declare class MenuGroupElement extends UIElement {
+  #private;
+  static readonly tagName = "media-menu-group";
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { MenuGroupElement };
+//# sourceMappingURL=group.d.ts.map

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

@@ -0,0 +1,21 @@
+import { UIElement } from "../ui-element.js";
+import { MenuGroupController } from "./group-controller.js";
+//#region src/ui/menu/group.ts
+/**
+* Groups related menu items; the element itself takes `role="group"`. A `<media-menu-group-label>` child names the
+* group unless it already has an `aria-label` or `aria-labelledby`.
+*/
+var MenuGroupElement = class extends UIElement {
+	static {
+		this.tagName = "media-menu-group";
+	}
+	#group = new MenuGroupController(this);
+	update(_changed) {
+		super.update(_changed);
+		this.#group.applyProps();
+	}
+};
+//#endregion
+export { MenuGroupElement };
+
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":["#group"],"sources":["../../../../src/ui/menu/group.ts"],"sourcesContent":["import type { PropertyValues } from '@videojs/element';\n\nimport { UIElement } from '../ui-element';\nimport { MenuGroupController } from './group-controller';\n\n/**\n * Groups related menu items; the element itself takes `role=\"group\"`. A `<media-menu-group-label>` child names the\n * group unless it already has an `aria-label` or `aria-labelledby`.\n */\nexport class MenuGroupElement extends UIElement {\n  static readonly tagName = 'media-menu-group';\n\n  readonly #group = new MenuGroupController(this);\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    this.#group.applyProps();\n  }\n}\n"],"mappings":";;;;;;;AASA,IAAa,mBAAb,cAAsC,UAAU;;EACpB,KAAA,UAAA;;CAE1B,SAAkB,IAAI,oBAAoB,IAAI;CAE9C,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,KAAKA,OAAO,WAAW;CACzB;AACF"}

package/dist/dev/ui/menu/item-indicator.d.ts

@@ -0,0 +1,25 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/menu/item-indicator.d.ts
+/**
+ * Decorative checked-state mark inside a menu item, hidden from assistive technology. It stays `hidden` unless
+ * `checked` or `force-mount` is set; option radio groups set `checked` on the indicators in the items they generate.
+ */
+declare class MenuItemIndicatorElement extends UIElement {
+  static readonly tagName = "media-menu-item-indicator";
+  static properties: {
+    checked: {
+      type: BooleanConstructor;
+    };
+    forceMount: {
+      type: BooleanConstructor;
+      attribute: string;
+    };
+  };
+  checked: boolean;
+  forceMount: boolean;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { MenuItemIndicatorElement };
+//# sourceMappingURL=item-indicator.d.ts.map

package/dist/dev/ui/menu/item-indicator.js

@@ -0,0 +1,38 @@
+import { UIElement } from "../ui-element.js";
+import { applyElementProps } from "@videojs/core/dom";
+//#region src/ui/menu/item-indicator.ts
+/**
+* Decorative checked-state mark inside a menu item, hidden from assistive technology. It stays `hidden` unless
+* `checked` or `force-mount` is set; option radio groups set `checked` on the indicators in the items they generate.
+*/
+var MenuItemIndicatorElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.forceMount = false;
+	}
+	static {
+		this.tagName = "media-menu-item-indicator";
+	}
+	static {
+		this.properties = {
+			checked: { type: Boolean },
+			forceMount: {
+				type: Boolean,
+				attribute: "force-mount"
+			}
+		};
+	}
+	update(_changed) {
+		super.update(_changed);
+		const hidden = !this.checked && !this.forceMount;
+		applyElementProps(this, {
+			"aria-hidden": "true",
+			hidden
+		});
+	}
+};
+//#endregion
+export { MenuItemIndicatorElement };
+
+//# sourceMappingURL=item-indicator.js.map

package/dist/dev/ui/menu/item-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-indicator.js","names":[],"sources":["../../../../src/ui/menu/item-indicator.ts"],"sourcesContent":["import { applyElementProps } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { UIElement } from '../ui-element';\n\n/**\n * Decorative checked-state mark inside a menu item, hidden from assistive technology. It stays `hidden` unless\n * `checked` or `force-mount` is set; option radio groups set `checked` on the indicators in the items they generate.\n */\nexport class MenuItemIndicatorElement extends UIElement {\n  static readonly tagName = 'media-menu-item-indicator';\n\n  static override properties = {\n    checked: { type: Boolean },\n    forceMount: { type: Boolean, attribute: 'force-mount' },\n  } satisfies PropertyDeclarationMap<'checked' | 'forceMount'>;\n\n  checked = false;\n  forceMount = false;\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const hidden = !this.checked && !this.forceMount;\n\n    applyElementProps(this, {\n      'aria-hidden': 'true',\n      hidden: hidden,\n    });\n  }\n}\n"],"mappings":";;;;;;;AASA,IAAa,2BAAb,cAA8C,UAAU;;;EAQ5C,KAAA,UAAA;EACG,KAAA,aAAA;;;EARa,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,SAAS,EAAE,MAAM,QAAQ;GACzB,YAAY;IAAE,MAAM;IAAS,WAAW;GAAc;EACxD;;CAKA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,SAAS,CAAC,KAAK,WAAW,CAAC,KAAK;EAEtC,kBAAkB,MAAM;GACtB,eAAe;GACP;EACV,CAAC;CACH;AACF"}

package/dist/dev/ui/menu/item.d.ts

@@ -0,0 +1,28 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/menu/item.d.ts
+/**
+ * Menu action; the element itself takes `role="menuitem"`. Activation fires a cancelable `select` event and then closes
+ * the menu, unless `commandfor` names a nested `<media-menu-content>` page to open instead.
+ */
+declare class MenuItemElement extends UIElement {
+  #private;
+  static readonly tagName = "media-menu-item";
+  static properties: {
+    disabled: {
+      type: BooleanConstructor;
+    };
+    commandfor: {
+      type: StringConstructor;
+    };
+  };
+  disabled: boolean;
+  /** ID of a nested `<media-menu-content>` page to open when activated. */
+  commandfor: string | undefined;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { MenuItemElement };
+//# sourceMappingURL=item.d.ts.map

package/dist/dev/ui/menu/item.js

@@ -0,0 +1,112 @@
+import { UIElement } from "../ui-element.js";
+import { menuContext } from "./context.js";
+import { applyElementProps, completeMenuItemSelection } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/item.ts
+/**
+* Menu action; the element itself takes `role="menuitem"`. Activation fires a cancelable `select` event and then closes
+* the menu, unless `commandfor` names a nested `<media-menu-content>` page to open instead.
+*/
+var MenuItemElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.commandfor = void 0;
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#registeredMenu = null;
+		this.#cleanupRegistration = null;
+	}
+	static {
+		this.tagName = "media-menu-item";
+	}
+	static {
+		this.properties = {
+			disabled: { type: Boolean },
+			commandfor: { type: String }
+		};
+	}
+	#ctx;
+	#disconnect;
+	#registeredMenu;
+	#cleanupRegistration;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#registeredMenu = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx || !this.#disconnect) return;
+		if (this.#registeredMenu !== ctx.menu) {
+			this.#cleanupRegistration?.();
+			this.#registeredMenu = ctx.menu;
+			this.#cleanupRegistration = ctx.menu.registerItem(this);
+			applyElementProps(this, {
+				onClick: (event) => {
+					const currentCtx = this.#ctx.value;
+					if (!currentCtx || this.#isDisabled()) return;
+					const target = this.commandfor;
+					if (target) this.#openSubmenu(target);
+					else {
+						const select = new CustomEvent("select", {
+							bubbles: true,
+							cancelable: true
+						});
+						if (!this.dispatchEvent(select)) {
+							event.preventDefault();
+							return;
+						}
+						completeMenuItemSelection(currentCtx.menu);
+					}
+					event.preventDefault();
+				},
+				onKeyDown: (event) => {
+					if (!this.#ctx.value || this.#isDisabled() || event.key !== "ArrowRight") return;
+					const target = this.commandfor;
+					if (!target) return;
+					this.#openSubmenu(target);
+					event.preventDefault();
+				},
+				onPointerenter: () => {
+					const currentCtx = this.#ctx.value;
+					if (!this.#isDisabled()) currentCtx?.menu.highlight(this, {
+						focus: false,
+						pointer: true
+					});
+				}
+			}, { signal: this.#disconnect.signal });
+		}
+		const hasSubmenu = Boolean(this.commandfor);
+		applyElementProps(this, {
+			role: "menuitem",
+			"aria-disabled": this.#isDisabled() ? "true" : void 0,
+			...hasSubmenu && {
+				"aria-haspopup": "menu",
+				"aria-expanded": "false",
+				"data-has-submenu": ""
+			}
+		});
+	}
+	#openSubmenu(id) {
+		this.getRootNode().querySelector(`#${CSS.escape(id)}`)?.openMenu?.("click");
+	}
+	#isDisabled() {
+		return this.disabled || this.getAttribute("aria-disabled") === "true";
+	}
+};
+//#endregion
+export { MenuItemElement };
+
+//# sourceMappingURL=item.js.map

package/dist/dev/ui/menu/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","names":["#ctx","#disconnect","#cleanupRegistration","#registeredMenu","#isDisabled","#openSubmenu"],"sources":["../../../../src/ui/menu/item.ts"],"sourcesContent":["import { applyElementProps, completeMenuItemSelection } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { UIElement } from '../ui-element';\nimport { type MenuContextValue, menuContext } from './context';\n\n/**\n * Menu action; the element itself takes `role=\"menuitem\"`. Activation fires a cancelable `select` event and then closes\n * the menu, unless `commandfor` names a nested `<media-menu-content>` page to open instead.\n */\nexport class MenuItemElement extends UIElement {\n  static readonly tagName = 'media-menu-item';\n\n  static override properties = {\n    disabled: { type: Boolean },\n    commandfor: { type: String },\n  } satisfies PropertyDeclarationMap<'disabled' | 'commandfor'>;\n\n  disabled = false;\n  /** ID of a nested `<media-menu-content>` page to open when activated. */\n  commandfor: string | undefined = undefined;\n  readonly #ctx = new ContextConsumer(this, { context: menuContext, subscribe: true });\n\n  #disconnect: AbortController | null = null;\n  #registeredMenu: MenuContextValue['menu'] | null = null;\n  #cleanupRegistration: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupRegistration?.();\n    this.#cleanupRegistration = null;\n    this.#registeredMenu = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    const ctx = this.#ctx.value;\n    if (!ctx || !this.#disconnect) return;\n\n    if (this.#registeredMenu !== ctx.menu) {\n      this.#cleanupRegistration?.();\n      this.#registeredMenu = ctx.menu;\n      this.#cleanupRegistration = ctx.menu.registerItem(this);\n\n      applyElementProps(\n        this,\n        {\n          onClick: (event: MouseEvent) => {\n            const currentCtx = this.#ctx.value;\n            if (!currentCtx || this.#isDisabled()) return;\n\n            const target = this.commandfor;\n\n            if (target) {\n              this.#openSubmenu(target);\n            } else {\n              const select = new CustomEvent('select', { bubbles: true, cancelable: true });\n\n              if (!this.dispatchEvent(select)) {\n                event.preventDefault();\n                return;\n              }\n\n              completeMenuItemSelection(currentCtx.menu);\n            }\n\n            event.preventDefault();\n          },\n          onKeyDown: (event: KeyboardEvent) => {\n            const currentCtx = this.#ctx.value;\n            if (!currentCtx || this.#isDisabled() || event.key !== 'ArrowRight') return;\n\n            const target = this.commandfor;\n            if (!target) return;\n\n            this.#openSubmenu(target);\n            event.preventDefault();\n          },\n          onPointerenter: () => {\n            const currentCtx = this.#ctx.value;\n\n            if (!this.#isDisabled()) currentCtx?.menu.highlight(this, { focus: false, pointer: true });\n          },\n        },\n        { signal: this.#disconnect.signal }\n      );\n    }\n\n    const hasSubmenu = Boolean(this.commandfor);\n\n    applyElementProps(this, {\n      role: 'menuitem',\n      'aria-disabled': this.#isDisabled() ? 'true' : undefined,\n      ...(hasSubmenu && {\n        'aria-haspopup': 'menu',\n        'aria-expanded': 'false',\n        'data-has-submenu': '',\n      }),\n    });\n  }\n\n  #openSubmenu(id: string): void {\n    const root = this.getRootNode() as Document | ShadowRoot;\n    const submenu = root.querySelector<HTMLElement>(`#${CSS.escape(id)}`) as HTMLElement & {\n      openMenu?: (reason?: 'click') => void;\n    };\n\n    submenu?.openMenu?.('click');\n  }\n\n  #isDisabled(): boolean {\n    return this.disabled || this.getAttribute('aria-disabled') === 'true';\n  }\n}\n"],"mappings":";;;;;;;;;AAWA,IAAa,kBAAb,cAAqC,UAAU;;;EAQlC,KAAA,WAAA;EAEsB,KAAA,aAAA,KAAA;EACjB,KAAA,OAAA,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAa,WAAW;EAAK,CAAC;EAE7C,KAAA,cAAA;EACa,KAAA,kBAAA;EACP,KAAA,uBAAA;;;EAdlB,KAAA,UAAA;;;EAEG,KAAA,aAAA;GAC3B,UAAU,EAAE,MAAM,QAAQ;GAC1B,YAAY,EAAE,MAAM,OAAO;EAC7B;;CAKA;CAEA;CACA;CACA;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAKC,cAAc,IAAI,gBAAgB;CACzC;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,KAAKC,uBAAuB;EAC5B,KAAKA,uBAAuB;EAC5B,KAAKC,kBAAkB;EACvB,KAAKF,aAAa,MAAM;EACxB,KAAKA,cAAc;CACrB;CAEA,OAA0B,UAAgC;EACxD,MAAM,OAAO,QAAQ;EAErB,MAAM,MAAM,KAAKD,KAAK;EACtB,IAAI,CAAC,OAAO,CAAC,KAAKC,aAAa;EAE/B,IAAI,KAAKE,oBAAoB,IAAI,MAAM;GACrC,KAAKD,uBAAuB;GAC5B,KAAKC,kBAAkB,IAAI;GAC3B,KAAKD,uBAAuB,IAAI,KAAK,aAAa,IAAI;GAEtD,kBACE,MACA;IACE,UAAU,UAAsB;KAC9B,MAAM,aAAa,KAAKF,KAAK;KAC7B,IAAI,CAAC,cAAc,KAAKI,YAAY,GAAG;KAEvC,MAAM,SAAS,KAAK;KAEpB,IAAI,QACF,KAAKC,aAAa,MAAM;UACnB;MACL,MAAM,SAAS,IAAI,YAAY,UAAU;OAAE,SAAS;OAAM,YAAY;MAAK,CAAC;MAE5E,IAAI,CAAC,KAAK,cAAc,MAAM,GAAG;OAC/B,MAAM,eAAe;OACrB;MACF;MAEA,0BAA0B,WAAW,IAAI;KAC3C;KAEA,MAAM,eAAe;IACvB;IACA,YAAY,UAAyB;KAEnC,IAAI,CADe,KAAKL,KAAK,SACV,KAAKI,YAAY,KAAK,MAAM,QAAQ,cAAc;KAErE,MAAM,SAAS,KAAK;KACpB,IAAI,CAAC,QAAQ;KAEb,KAAKC,aAAa,MAAM;KACxB,MAAM,eAAe;IACvB;IACA,sBAAsB;KACpB,MAAM,aAAa,KAAKL,KAAK;KAE7B,IAAI,CAAC,KAAKI,YAAY,GAAG,YAAY,KAAK,UAAU,MAAM;MAAE,OAAO;MAAO,SAAS;KAAK,CAAC;IAC3F;GACF,GACA,EAAE,QAAQ,KAAKH,YAAY,OAAO,CACpC;EACF;EAEA,MAAM,aAAa,QAAQ,KAAK,UAAU;EAE1C,kBAAkB,MAAM;GACtB,MAAM;GACN,iBAAiB,KAAKG,YAAY,IAAI,SAAS,KAAA;GAC/C,GAAI,cAAc;IAChB,iBAAiB;IACjB,iBAAiB;IACjB,oBAAoB;GACtB;EACF,CAAC;CACH;CAEA,aAAa,IAAkB;EAM7B,KALkB,YACC,CAAC,CAAC,cAA2B,IAAI,IAAI,OAAO,EAAE,GAI3D,CAAC,EAAE,WAAW,OAAO;CAC7B;CAEA,cAAuB;EACrB,OAAO,KAAK,YAAY,KAAK,aAAa,eAAe,MAAM;CACjE;AACF"}

package/dist/dev/ui/menu/radio-group.d.ts

@@ -0,0 +1,19 @@
+import { RadioGroupElement } from "../radio-group/element.js";
+import { MenuRadioItemElement } from "./radio-item.js";
+import { MenuOptionState } from "@videojs/core";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/menu/radio-group.d.ts
+/** Group of mutually exclusive `<media-menu-radio-item>` children; the element itself takes `role="group"`. */
+declare class MenuRadioGroupElement extends RadioGroupElement {
+  #private;
+  static readonly tagName: string;
+  disconnectedCallback(): void;
+  protected update(changed: PropertyValues): void;
+  protected setItemLabel(item: MenuRadioItemElement, label: string): void;
+  /** Applies a generated fallback without replacing an author-provided accessible name. */
+  protected applyDefaultAriaLabel(label: string): void;
+  protected publishMenuOptionState(disabled: boolean, hidden: boolean, availability: MenuOptionState['availability']): void;
+}
+//#endregion
+export { MenuRadioGroupElement };
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/dev/ui/menu/radio-group.js

@@ -0,0 +1,69 @@
+import { RadioGroupElement } from "../radio-group/element.js";
+import { menuContext } from "./context.js";
+import { MenuGroupController } from "./group-controller.js";
+import { MenuRadioItemElement } from "./radio-item.js";
+import { ContextConsumer } from "@videojs/element/context";
+import { findElementChild } from "@videojs/utils/dom";
+//#region src/ui/menu/radio-group.ts
+/** Group of mutually exclusive `<media-menu-radio-item>` children; the element itself takes `role="group"`. */
+var MenuRadioGroupElement = class extends RadioGroupElement {
+	static {
+		this.tagName = "media-menu-radio-group";
+	}
+	#group = new MenuGroupController(this);
+	#menu = new ContextConsumer(this, {
+		context: menuContext,
+		subscribe: true
+	});
+	#optionSource = Symbol("menu-option");
+	#ariaLabel = null;
+	#optionMenu = null;
+	#setOptionState = null;
+	disconnectedCallback() {
+		this.#clearMenuOptionState();
+		super.disconnectedCallback();
+	}
+	update(changed) {
+		super.update(changed);
+		this.#group.applyProps();
+	}
+	setItemLabel(item, label) {
+		const labelPart = item.querySelector("[data-part~=\"label\"]");
+		if (labelPart) labelPart.textContent = label;
+		else item.textContent = label;
+	}
+	/** Applies a generated fallback without replacing an author-provided accessible name. */
+	applyDefaultAriaLabel(label) {
+		if (this.hasAttribute("aria-labelledby")) return;
+		const current = this.getAttribute("aria-label");
+		if (current !== null && current !== this.#ariaLabel) return;
+		this.#ariaLabel = label;
+		this.setAttribute("aria-label", label);
+	}
+	publishMenuOptionState(disabled, hidden, availability) {
+		const context = this.#menu.value ?? null;
+		if (context?.menu !== this.#optionMenu) {
+			this.#clearMenuOptionState();
+			this.#optionMenu = context?.menu ?? null;
+			this.#setOptionState = context?.setOptionState ?? null;
+		}
+		if (!this.#setOptionState) return;
+		const selectedItem = findElementChild(this, (item) => item instanceof MenuRadioItemElement && item.value === this.value);
+		const value = selectedItem?.querySelector("[data-part~=\"label\"]")?.textContent ?? selectedItem?.textContent?.trim() ?? "";
+		this.#setOptionState(this.#optionSource, {
+			value,
+			disabled,
+			hidden,
+			availability
+		});
+	}
+	#clearMenuOptionState() {
+		this.#setOptionState?.(this.#optionSource, null);
+		this.#optionMenu = null;
+		this.#setOptionState = null;
+	}
+};
+//#endregion
+export { MenuRadioGroupElement };
+
+//# sourceMappingURL=radio-group.js.map

package/dist/dev/ui/menu/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","names":["#group","#menu","#optionSource","#clearMenuOptionState","#ariaLabel","#optionMenu","#setOptionState"],"sources":["../../../../src/ui/menu/radio-group.ts"],"sourcesContent":["import type { MenuOptionState } from '@videojs/core';\nimport type { PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\nimport { findElementChild } from '@videojs/utils/dom';\n\nimport { RadioGroupElement } from '../radio-group/element';\nimport { type MenuContextValue, menuContext } from './context';\nimport { MenuGroupController } from './group-controller';\nimport { MenuRadioItemElement } from './radio-item';\n\n/** Group of mutually exclusive `<media-menu-radio-item>` children; the element itself takes `role=\"group\"`. */\nexport class MenuRadioGroupElement extends RadioGroupElement {\n  static readonly tagName: string = 'media-menu-radio-group';\n\n  readonly #group = new MenuGroupController(this);\n  readonly #menu = new ContextConsumer(this, { context: menuContext, subscribe: true });\n  readonly #optionSource = Symbol('menu-option');\n  #ariaLabel: string | null = null;\n  #optionMenu: MenuContextValue['menu'] | null = null;\n  #setOptionState: MenuContextValue['setOptionState'] | null = null;\n\n  override disconnectedCallback(): void {\n    this.#clearMenuOptionState();\n    super.disconnectedCallback();\n  }\n\n  protected override update(changed: PropertyValues): void {\n    super.update(changed);\n\n    this.#group.applyProps();\n  }\n\n  protected setItemLabel(item: MenuRadioItemElement, label: string): void {\n    const labelPart = item.querySelector<HTMLElement>('[data-part~=\"label\"]');\n\n    if (labelPart) {\n      labelPart.textContent = label;\n    } else {\n      item.textContent = label;\n    }\n  }\n\n  /** Applies a generated fallback without replacing an author-provided accessible name. */\n  protected applyDefaultAriaLabel(label: string): void {\n    if (this.hasAttribute('aria-labelledby')) return;\n\n    const current = this.getAttribute('aria-label');\n    if (current !== null && current !== this.#ariaLabel) return;\n\n    this.#ariaLabel = label;\n    this.setAttribute('aria-label', label);\n  }\n\n  protected publishMenuOptionState(\n    disabled: boolean,\n    hidden: boolean,\n    availability: MenuOptionState['availability']\n  ): void {\n    const context = this.#menu.value ?? null;\n\n    if (context?.menu !== this.#optionMenu) {\n      this.#clearMenuOptionState();\n      this.#optionMenu = context?.menu ?? null;\n      this.#setOptionState = context?.setOptionState ?? null;\n    }\n\n    if (!this.#setOptionState) return;\n\n    const selectedItem = findElementChild(\n      this,\n      (item): item is MenuRadioItemElement => item instanceof MenuRadioItemElement && item.value === this.value\n    );\n    const label = selectedItem?.querySelector<HTMLElement>('[data-part~=\"label\"]')?.textContent;\n    const value = label ?? selectedItem?.textContent?.trim() ?? '';\n\n    this.#setOptionState(this.#optionSource, { value, disabled, hidden, availability });\n  }\n\n  #clearMenuOptionState(): void {\n    this.#setOptionState?.(this.#optionSource, null);\n    this.#optionMenu = null;\n    this.#setOptionState = null;\n  }\n}\n"],"mappings":";;;;;;;;AAWA,IAAa,wBAAb,cAA2C,kBAAkB;;EACzB,KAAA,UAAA;;CAElC,SAAkB,IAAI,oBAAoB,IAAI;CAC9C,QAAiB,IAAI,gBAAgB,MAAM;EAAE,SAAS;EAAa,WAAW;CAAK,CAAC;CACpF,gBAAyB,OAAO,aAAa;CAC7C,aAA4B;CAC5B,cAA+C;CAC/C,kBAA6D;CAE7D,uBAAsC;EACpC,KAAKG,sBAAsB;EAC3B,MAAM,qBAAqB;CAC7B;CAEA,OAA0B,SAA+B;EACvD,MAAM,OAAO,OAAO;EAEpB,KAAKH,OAAO,WAAW;CACzB;CAEA,aAAuB,MAA4B,OAAqB;EACtE,MAAM,YAAY,KAAK,cAA2B,wBAAsB;EAExE,IAAI,WACF,UAAU,cAAc;OAExB,KAAK,cAAc;CAEvB;;CAGA,sBAAgC,OAAqB;EACnD,IAAI,KAAK,aAAa,iBAAiB,GAAG;EAE1C,MAAM,UAAU,KAAK,aAAa,YAAY;EAC9C,IAAI,YAAY,QAAQ,YAAY,KAAKI,YAAY;EAErD,KAAKA,aAAa;EAClB,KAAK,aAAa,cAAc,KAAK;CACvC;CAEA,uBACE,UACA,QACA,cACM;EACN,MAAM,UAAU,KAAKH,MAAM,SAAS;EAEpC,IAAI,SAAS,SAAS,KAAKI,aAAa;GACtC,KAAKF,sBAAsB;GAC3B,KAAKE,cAAc,SAAS,QAAQ;GACpC,KAAKC,kBAAkB,SAAS,kBAAkB;EACpD;EAEA,IAAI,CAAC,KAAKA,iBAAiB;EAE3B,MAAM,eAAe,iBACnB,OACC,SAAuC,gBAAgB,wBAAwB,KAAK,UAAU,KAAK,KACtG;EAEA,MAAM,QADQ,cAAc,cAA2B,wBAAsB,CAAC,EAAE,eACzD,cAAc,aAAa,KAAK,KAAK;EAE5D,KAAKA,gBAAgB,KAAKJ,eAAe;GAAE;GAAO;GAAU;GAAQ;EAAa,CAAC;CACpF;CAEA,wBAA8B;EAC5B,KAAKI,kBAAkB,KAAKJ,eAAe,IAAI;EAC/C,KAAKG,cAAc;EACnB,KAAKC,kBAAkB;CACzB;AACF"}

package/dist/dev/ui/menu/radio-item.d.ts

@@ -0,0 +1,27 @@
+import { UIElement } from "../ui-element.js";
+import { PropertyValues } from "@videojs/element";
+//#region src/ui/menu/radio-item.d.ts
+/**
+ * Menu item that selects its `value` in the enclosing `<media-menu-radio-group>` and closes the menu. The element
+ * itself takes `role="menuitemradio"`, checked while its value matches the group's.
+ */
+declare class MenuRadioItemElement extends UIElement {
+  #private;
+  static readonly tagName = "media-menu-radio-item";
+  static properties: {
+    value: {
+      type: StringConstructor;
+    };
+    disabled: {
+      type: BooleanConstructor;
+    };
+  };
+  value: string;
+  disabled: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { MenuRadioItemElement };
+//# sourceMappingURL=radio-item.d.ts.map