@videojs/html 10.0.0-beta.23 → 10.0.0-beta.24

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

@@ -0,0 +1,285 @@
+import { containerContext } from "../../player/context.js";
+import { MediaElement } from "../media-element.js";
+import { menuContext } from "./context.js";
+import { PositionController } from "../position-controller.js";
+import { applyElementProps, applyStateDataAttrs, createMenu, createMenuViewTransition, createTransition, getAnchorNameStyle, getAnchorPositionStyle, getMenuViewTransitionAttrs, getMenuViewportAttrs, getPopupPositionRect, getPositioningBoundaryRect, getRootPositionOptions, isMenuNavigationKey, resolveOffsets, resolvePositioningBoundary, syncMenuViewRoot, syncMenuViewTransition } from "@videojs/core/dom";
+import { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from "@videojs/utils/dom";
+import { ContextConsumer, ContextProvider } from "@videojs/element/context";
+import { SnapshotController } from "@videojs/store/html";
+import { MenuCore, MenuDataAttrs, POPUP_HOST_ATTR } from "@videojs/core";
+//#region src/ui/menu/menu-element.ts
+var MenuElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = MenuCore.defaultProps.open;
+		this.defaultOpen = MenuCore.defaultProps.defaultOpen;
+		this.side = MenuCore.defaultProps.side;
+		this.align = MenuCore.defaultProps.align;
+		this.closeOnEscape = MenuCore.defaultProps.closeOnEscape;
+		this.closeOnOutsideClick = MenuCore.defaultProps.closeOnOutsideClick;
+		this.boundary = "container";
+		this.#core = new MenuCore();
+		this.#provider = new ContextProvider(this, { context: menuContext });
+		this.#position = new PositionController(this);
+		this.#containerCtx = new ContextConsumer(this, {
+			context: containerContext,
+			subscribe: true
+		});
+		this.#parentCtx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#menuViewTransition = createMenuViewTransition({
+			focusFirstItem: () => {
+				this.#menu?.highlightFirstItem({ preventScroll: true });
+			},
+			restoreFocus: (triggerId) => {
+				const triggerElement = triggerId ? document.getElementById(triggerId) : null;
+				const fallbackTrigger = this.parentElement?.querySelector(`[data-has-submenu][commandfor="${this.id}"]`);
+				(triggerElement ?? fallbackTrigger)?.focus({ preventScroll: true });
+			}
+		});
+		this.#menu = null;
+		this.#snapshot = null;
+		this.#navSnapshot = null;
+		this.#menuViewSnapshot = null;
+		this.#navState = {
+			stack: [],
+			direction: "forward"
+		};
+		this.#disconnect = null;
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
+		this.#handleContentKeyDown = (event) => {
+			const isNavigationKey = isMenuNavigationKey(event);
+			const defaultPreventedBeforeMenu = event.defaultPrevented;
+			this.#menu?.contentProps.onKeyDown(event);
+			const parentCtx = this.#parentCtx.value ?? null;
+			if (!parentCtx) {
+				if (event.key === "Escape") return;
+				if (isNavigationKey) event.stopPropagation();
+				return;
+			}
+			const stack = parentCtx.menu.navigationInput.current.stack;
+			const ownsActiveSubmenu = stack[stack.length - 1]?.menuId === this.id;
+			const isBackNavigationKey = event.key === "ArrowLeft" || event.key === "Escape";
+			if (isBackNavigationKey && ownsActiveSubmenu && !defaultPreventedBeforeMenu) {
+				event.preventDefault();
+				parentCtx.menu.pop();
+			}
+			if (isNavigationKey && (!isBackNavigationKey || ownsActiveSubmenu)) event.stopPropagation();
+		};
+		this.#handleContentFocusOut = (event) => {
+			this.#menu?.contentProps.onFocusOut(event);
+		};
+	}
+	static {
+		this.tagName = "media-menu";
+	}
+	static {
+		this.properties = {
+			open: { type: Boolean },
+			defaultOpen: {
+				type: Boolean,
+				attribute: "default-open"
+			},
+			side: { type: String },
+			align: { type: String },
+			closeOnEscape: {
+				type: Boolean,
+				attribute: "close-on-escape"
+			},
+			closeOnOutsideClick: {
+				type: Boolean,
+				attribute: "close-on-outside-click"
+			},
+			boundary: { type: String }
+		};
+	}
+	#core;
+	#provider;
+	#position;
+	#containerCtx;
+	#parentCtx;
+	#menuViewTransition;
+	#menu;
+	#snapshot;
+	#navSnapshot;
+	#menuViewSnapshot;
+	#navState;
+	#disconnect;
+	#triggerAbort;
+	#currentTrigger;
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.destroyed) return;
+		this.setAttribute(POPUP_HOST_ATTR, "");
+		this.#disconnect = new AbortController();
+		this.#menu = createMenu({
+			transition: createTransition(),
+			onOpenChange: (nextOpen, details) => {
+				this.open = nextOpen;
+				this.dispatchEvent(new CustomEvent("open-change", { detail: {
+					open: nextOpen,
+					...details
+				} }));
+			},
+			closeOnEscape: () => this.closeOnEscape,
+			closeOnOutsideClick: () => this.closeOnOutsideClick,
+			group: () => this.#parentCtx.value ? void 0 : this.#containerCtx.value?.popupGroup
+		});
+		this.#menu.setContentElement(this);
+		applyElementProps(this, {
+			onKeyDown: this.#handleContentKeyDown,
+			onFocusOut: this.#handleContentFocusOut
+		}, { signal: this.#disconnect.signal });
+		if (this.#snapshot) this.#snapshot.track(this.#menu.input);
+		else this.#snapshot = new SnapshotController(this, this.#menu.input);
+		if (this.#navSnapshot) this.#navSnapshot.track(this.#menu.navigationInput);
+		else this.#navSnapshot = new SnapshotController(this, this.#menu.navigationInput);
+		if (this.#menuViewSnapshot) this.#menuViewSnapshot.track(this.#menuViewTransition.input);
+		else this.#menuViewSnapshot = new SnapshotController(this, this.#menuViewTransition.input);
+	}
+	firstUpdated(changed) {
+		super.firstUpdated(changed);
+		if (this.defaultOpen && !this.open) this.#menu?.open();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupTrigger();
+		this.#menu?.destroy();
+		this.#menu = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#menuViewTransition.destroy();
+	}
+	close(reason = "imperative-action") {
+		this.#menu?.close(reason);
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		const isSubmenu = (this.#parentCtx.value ?? null) !== null;
+		this.#core.setProps({
+			open: this.open,
+			defaultOpen: this.defaultOpen,
+			side: this.side,
+			align: this.align,
+			closeOnEscape: this.closeOnEscape,
+			closeOnOutsideClick: this.closeOnOutsideClick,
+			isSubmenu
+		});
+		if (this.#menu && changed.has("open") && !isSubmenu) {
+			const { active: interactionOpen } = this.#menu.input.current;
+			if (this.open !== interactionOpen) if (this.open) this.#menu.open();
+			else this.#menu.close();
+		}
+	}
+	update(_changed) {
+		super.update(_changed);
+		if (!this.#menu) return;
+		const parentCtx = this.#parentCtx.value ?? null;
+		const isSubmenu = parentCtx !== null;
+		this.#navState = this.#menu.navigationInput.current;
+		const input = this.#menu.input.current;
+		this.#core.setInput(input);
+		const state = this.#core.getState();
+		if (isSubmenu && parentCtx) this.#updateAsSubmenu(parentCtx);
+		else this.#updateAsRoot(state);
+		const parentMenu = parentCtx?.menu ?? null;
+		this.#provider.setValue({
+			menu: this.#menu,
+			state,
+			stateAttrMap: MenuDataAttrs,
+			navigation: this.#navState,
+			parentMenu
+		});
+	}
+	#updateAsRoot(state) {
+		if (!this.#menu) return;
+		const triggerElement = this.#position.findTrigger();
+		this.#syncTrigger(triggerElement);
+		applyElementProps(this, {
+			...this.#core.getContentAttrs(state),
+			...getMenuViewportAttrs()
+		});
+		applyStateDataAttrs(this, state, MenuDataAttrs);
+		if (state.open) tryShowPopover(this);
+		else tryHidePopover(this);
+		if (this.#currentTrigger) {
+			applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));
+			applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));
+		}
+		if (!state.open) {
+			this.#position.cleanup();
+			return;
+		}
+		syncMenuViewRoot(this, this.#navState.stack.length > 0);
+		const positionOptions = getRootPositionOptions(state.side, state.align);
+		if (!positionOptions) return;
+		const boundaryElement = this.#getBoundaryElement();
+		const triggerRect = this.#currentTrigger?.getBoundingClientRect();
+		const boundaryRect = getPositioningBoundaryRect(boundaryElement);
+		const offsets = resolveOffsets(this);
+		if (supportsAnchorPositioning()) applyStyles(this, getAnchorPositionStyle(this.id, positionOptions, triggerRect, void 0, boundaryRect, offsets));
+		else {
+			const selfRect = getPopupPositionRect(this);
+			applyStyles(this, getAnchorPositionStyle(this.id, positionOptions, triggerRect, selfRect, boundaryRect, offsets));
+		}
+		this.#position.sync(this.#currentTrigger, boundaryElement);
+	}
+	#updateAsSubmenu(parentCtx) {
+		const parentNavigation = parentCtx.navigation;
+		const topEntry = parentNavigation.stack[parentNavigation.stack.length - 1];
+		const isActive = (topEntry?.menuId ?? null) === this.id;
+		this.#menuViewTransition.setElement(this);
+		this.#menuViewTransition.sync({
+			active: isActive,
+			direction: parentNavigation.direction,
+			triggerId: topEntry?.triggerId ?? null
+		});
+		const transitionState = this.#menuViewTransition.input.current;
+		applyElementProps(this, {
+			...getMenuViewTransitionAttrs(transitionState),
+			role: "menu",
+			tabIndex: -1,
+			"data-submenu": ""
+		});
+		syncMenuViewTransition(parentCtx.menu.contentElement, this, transitionState);
+	}
+	#handleContentKeyDown;
+	#handleContentFocusOut;
+	#syncTrigger(triggerElement) {
+		if (triggerElement === this.#currentTrigger) return;
+		this.#position.cleanup();
+		this.#cleanupTrigger();
+		this.#currentTrigger = triggerElement;
+		this.#menu?.setTriggerElement(triggerElement);
+		if (triggerElement && this.#menu) {
+			this.#triggerAbort = new AbortController();
+			applyElementProps(triggerElement, this.#menu.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.#currentTrigger.style.removeProperty("anchor-name");
+		}
+		this.#triggerAbort?.abort();
+		this.#triggerAbort = null;
+		this.#currentTrigger = null;
+	}
+	#getBoundaryElement() {
+		return resolvePositioningBoundary(this.boundary, {
+			container: this.#containerCtx.value?.container ?? null,
+			root: this.getRootNode()
+		});
+	}
+};
+//#endregion
+export { MenuElement };
+
+//# sourceMappingURL=menu-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-element.js","names":["#menu","#parentCtx","#core","#provider","#position","#containerCtx","#menuViewTransition","#disconnect","#handleContentKeyDown","#handleContentFocusOut","#snapshot","#navSnapshot","#menuViewSnapshot","#cleanupTrigger","#navState","#updateAsSubmenu","#updateAsRoot","#syncTrigger","#currentTrigger","#getBoundaryElement","#triggerAbort"],"sources":["../../../../src/ui/menu/menu-element.ts"],"sourcesContent":["import { MenuCore, MenuDataAttrs, type MenuInput, POPUP_HOST_ATTR } from '@videojs/core';\nimport {\n  applyElementProps,\n  applyStateDataAttrs,\n  createMenu,\n  createMenuViewTransition,\n  createTransition,\n  getAnchorNameStyle,\n  getAnchorPositionStyle,\n  getMenuViewportAttrs,\n  getMenuViewTransitionAttrs,\n  getPopupPositionRect,\n  getPositioningBoundaryRect,\n  getRootPositionOptions,\n  isMenuNavigationKey,\n  type MenuApi,\n  type MenuChangeDetails,\n  type MenuOpenChangeReason,\n  type MenuViewTransitionState,\n  type NavigationState,\n  type PositioningBoundary,\n  resolveOffsets,\n  resolvePositioningBoundary,\n  syncMenuViewRoot,\n  syncMenuViewTransition,\n  type UIFocusEvent,\n  type UIKeyboardEvent,\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 { applyStyles, supportsAnchorPositioning, tryHidePopover, tryShowPopover } from '@videojs/utils/dom';\nimport { containerContext } from '../../player/context';\nimport { MediaElement } from '../media-element';\nimport { PositionController } from '../position-controller';\nimport { type MenuContextValue, menuContext } from './context';\n\nexport class MenuElement extends MediaElement {\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 #containerCtx = new ContextConsumer(this, { context: containerContext, subscribe: true });\n  // Consume parent menu context — present when this is a nested (submenu) element.\n  readonly #parentCtx = new ContextConsumer(this, { context: menuContext, subscribe: true });\n  readonly #menuViewTransition = createMenuViewTransition({\n    focusFirstItem: () => {\n      this.#menu?.highlightFirstItem({ preventScroll: true });\n    },\n    restoreFocus: (triggerId) => {\n      const triggerElement = triggerId ? document.getElementById(triggerId) : null;\n      const fallbackTrigger = this.parentElement?.querySelector<HTMLElement>(\n        `[data-has-submenu][commandfor=\"${this.id}\"]`\n      );\n\n      (triggerElement ?? fallbackTrigger)?.focus({ preventScroll: true });\n    },\n  });\n  #menu: MenuApi | null = null;\n  #snapshot: SnapshotController<MenuInput> | null = null;\n  #navSnapshot: SnapshotController<NavigationState> | null = null;\n  #menuViewSnapshot: SnapshotController<MenuViewTransitionState> | null = null;\n  #navState: NavigationState = { stack: [], direction: 'forward' };\n\n  #disconnect: AbortController | null = null;\n  #triggerAbort: AbortController | null = null;\n  #currentTrigger: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (this.destroyed) return;\n\n    this.setAttribute(POPUP_HOST_ATTR, '');\n\n    this.#disconnect = new AbortController();\n\n    this.#menu = createMenu({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: MenuChangeDetails) => {\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      group: () => (this.#parentCtx.value ? undefined : this.#containerCtx.value?.popupGroup),\n    });\n\n    // The element itself is the content (popup) for root menus.\n    // Submenu detection happens in update() once parent context is available.\n    this.#menu.setContentElement(this);\n\n    applyElementProps(\n      this,\n      { onKeyDown: this.#handleContentKeyDown, onFocusOut: this.#handleContentFocusOut },\n      { signal: this.#disconnect.signal }\n    );\n\n    if (this.#snapshot) {\n      this.#snapshot.track(this.#menu.input);\n    } else {\n      this.#snapshot = new SnapshotController(this, this.#menu.input);\n    }\n\n    if (this.#navSnapshot) {\n      this.#navSnapshot.track(this.#menu.navigationInput);\n    } else {\n      this.#navSnapshot = new SnapshotController(this, this.#menu.navigationInput);\n    }\n\n    if (this.#menuViewSnapshot) {\n      this.#menuViewSnapshot.track(this.#menuViewTransition.input);\n    } else {\n      this.#menuViewSnapshot = new SnapshotController(this, this.#menuViewTransition.input);\n    }\n  }\n\n  protected override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n\n    if (this.defaultOpen && !this.open) {\n      this.#menu?.open();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupTrigger();\n    this.#menu?.destroy();\n    this.#menu = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    this.#menuViewTransition.destroy();\n  }\n\n  close(reason: MenuOpenChangeReason = 'imperative-action'): void {\n    this.#menu?.close(reason);\n  }\n\n  protected override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n\n    const parentCtx = this.#parentCtx.value ?? null;\n    const isSubmenu = parentCtx !== null;\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      isSubmenu,\n    });\n\n    if (this.#menu && changed.has('open') && !isSubmenu) {\n      const { active: interactionOpen } = this.#menu.input.current;\n      if (this.open !== interactionOpen) {\n        if (this.open) {\n          this.#menu.open();\n        } else {\n          this.#menu.close();\n        }\n      }\n    }\n  }\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n    if (!this.#menu) return;\n\n    const parentCtx = this.#parentCtx.value ?? null;\n    const isSubmenu = parentCtx !== null;\n\n    this.#navState = this.#menu.navigationInput.current;\n    const input = this.#menu.input.current;\n    this.#core.setInput(input);\n    const state = this.#core.getState();\n\n    if (isSubmenu && parentCtx) {\n      this.#updateAsSubmenu(parentCtx);\n    } else {\n      this.#updateAsRoot(state);\n    }\n\n    // Provide context to child parts.\n    // When nested, expose the parent menu's API so items can pop on select.\n    const parentMenu = parentCtx?.menu ?? null;\n    this.#provider.setValue({\n      menu: this.#menu,\n      state,\n      stateAttrMap: MenuDataAttrs,\n      navigation: this.#navState,\n      parentMenu,\n    });\n  }\n\n  #updateAsRoot(state: ReturnType<MenuCore['getState']>): void {\n    if (!this.#menu) return;\n\n    const triggerElement = this.#position.findTrigger();\n    this.#syncTrigger(triggerElement);\n\n    applyElementProps(this, {\n      ...this.#core.getContentAttrs(state),\n      ...getMenuViewportAttrs(),\n    });\n    applyStateDataAttrs(this, state, MenuDataAttrs);\n\n    if (state.open) {\n      tryShowPopover(this);\n    } else {\n      tryHidePopover(this);\n    }\n\n    if (this.#currentTrigger) {\n      applyElementProps(this.#currentTrigger, this.#core.getTriggerAttrs(state, this.id));\n      applyStyles(this.#currentTrigger, getAnchorNameStyle(this.id));\n    }\n\n    if (!state.open) {\n      this.#position.cleanup();\n      return;\n    }\n\n    syncMenuViewRoot(this, this.#navState.stack.length > 0);\n\n    const positionOptions = getRootPositionOptions(state.side, state.align);\n    if (!positionOptions) return;\n\n    const boundaryElement = this.#getBoundaryElement();\n    const triggerRect = this.#currentTrigger?.getBoundingClientRect();\n    const boundaryRect = getPositioningBoundaryRect(boundaryElement);\n    const offsets = resolveOffsets(this);\n\n    if (supportsAnchorPositioning()) {\n      applyStyles(\n        this,\n        getAnchorPositionStyle(this.id, positionOptions, triggerRect, undefined, boundaryRect, offsets)\n      );\n    } else {\n      const selfRect = getPopupPositionRect(this);\n      applyStyles(this, getAnchorPositionStyle(this.id, positionOptions, triggerRect, selfRect, boundaryRect, offsets));\n    }\n\n    this.#position.sync(this.#currentTrigger, boundaryElement);\n  }\n\n  #updateAsSubmenu(parentCtx: MenuContextValue): void {\n    const parentNavigation = parentCtx.navigation;\n    const topEntry = parentNavigation.stack[parentNavigation.stack.length - 1];\n    const activeSubMenuId = topEntry?.menuId ?? null;\n    const isActive = activeSubMenuId === this.id;\n\n    this.#menuViewTransition.setElement(this);\n    this.#menuViewTransition.sync({\n      active: isActive,\n      direction: parentNavigation.direction,\n      triggerId: topEntry?.triggerId ?? null,\n    });\n\n    // Apply base submenu attributes regardless of phase.\n    const transitionState = this.#menuViewTransition.input.current;\n\n    applyElementProps(this, {\n      ...getMenuViewTransitionAttrs(transitionState),\n      role: 'menu',\n      tabIndex: -1,\n      'data-submenu': '',\n    });\n    syncMenuViewTransition(parentCtx.menu.contentElement, this, transitionState);\n  }\n\n  #handleContentKeyDown = (event: UIKeyboardEvent): void => {\n    const isNavigationKey = isMenuNavigationKey(event);\n    const defaultPreventedBeforeMenu = event.defaultPrevented;\n\n    this.#menu?.contentProps.onKeyDown(event);\n\n    const parentCtx = this.#parentCtx.value ?? null;\n\n    if (!parentCtx) {\n      if (event.key === 'Escape') return;\n      if (isNavigationKey) {\n        event.stopPropagation();\n      }\n      return;\n    }\n\n    const stack = parentCtx.menu.navigationInput.current.stack;\n    const topEntry = stack[stack.length - 1];\n    const ownsActiveSubmenu = topEntry?.menuId === this.id;\n    const isBackNavigationKey = event.key === 'ArrowLeft' || event.key === 'Escape';\n\n    if (isBackNavigationKey && ownsActiveSubmenu && !defaultPreventedBeforeMenu) {\n      event.preventDefault();\n      parentCtx.menu.pop();\n    }\n\n    if (isNavigationKey && (!isBackNavigationKey || ownsActiveSubmenu)) {\n      event.stopPropagation();\n    }\n  };\n\n  #handleContentFocusOut = (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.#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    }\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      this.#currentTrigger.style.removeProperty('anchor-name');\n    }\n\n    this.#triggerAbort?.abort();\n    this.#triggerAbort = null;\n    this.#currentTrigger = null;\n  }\n\n  #getBoundaryElement(): Element | null {\n    return resolvePositioningBoundary(this.boundary, {\n      container: this.#containerCtx.value?.container ?? null,\n      root: this.getRootNode() as Document | ShadowRoot,\n    });\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+
+//#region src/ui/menu/menu-group-element.d.ts
+declare class MenuGroupElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-menu-group";
+  static properties: {
+    label: {
+      type: StringConstructor;
+    };
+  };
+  label: string | undefined;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { MenuGroupElement };
+//# sourceMappingURL=menu-group-element.d.ts.map

package/dist/dev/ui/menu/menu-group-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-element.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-group-element.ts"],"mappings":";;;;cAOa,gBAAA,SAAyB,YAAA;EAAA;kBACpB,OAAA;EAAA,OAEA,UAAA;;MACL,IAAA,EAAI,iBAAA;IAAA;EAAA;EAGf,KAAA;EAAA,UAImB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

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

@@ -0,0 +1,35 @@
+import { MediaElement } from "../media-element.js";
+import { menuContext } from "./context.js";
+import { applyElementProps, applyStateDataAttrs } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/menu-group-element.ts
+var MenuGroupElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = void 0;
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-menu-group";
+	}
+	static {
+		this.properties = { label: { type: String } };
+	}
+	#ctx;
+	update(_changed) {
+		super.update(_changed);
+		applyElementProps(this, {
+			role: "group",
+			"aria-label": this.label
+		});
+		const ctx = this.#ctx.value;
+		if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+//#endregion
+export { MenuGroupElement };
+
+//# sourceMappingURL=menu-group-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-group-element.js","names":["#ctx"],"sources":["../../../../src/ui/menu/menu-group-element.ts"],"sourcesContent":["import { applyElementProps, applyStateDataAttrs } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { menuContext } from './context';\n\nexport class MenuGroupElement extends MediaElement {\n  static readonly tagName = 'media-menu-group';\n\n  static override properties = {\n    label: { type: String },\n  } satisfies PropertyDeclarationMap<'label'>;\n\n  label: string | undefined = undefined;\n\n  readonly #ctx = new ContextConsumer(this, { context: menuContext, subscribe: true });\n\n  protected override update(_changed: PropertyValues): void {\n    super.update(_changed);\n\n    applyElementProps(this, {\n      role: 'group',\n      'aria-label': this.label,\n    });\n\n    const ctx = this.#ctx.value;\n    if (ctx) applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,mBAAb,cAAsC,aAAa;;;eAOrB,KAAA;cAEZ,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAa,WAAW;GAAM,CAAC;;;iBAR1D;;;oBAEG,EAC3B,OAAO,EAAE,MAAM,QAAQ,EACxB;;CAID;CAEA,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;AAEtB,oBAAkB,MAAM;GACtB,MAAM;GACN,cAAc,KAAK;GACpB,CAAC;EAEF,MAAM,MAAM,MAAA,IAAU;AACtB,MAAI,IAAK,qBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}

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

@@ -0,0 +1,25 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+
+//#region src/ui/menu/menu-item-element.d.ts
+declare class MenuItemElement extends MediaElement {
+  #private;
+  static readonly tagName = "media-menu-item";
+  static properties: {
+    disabled: {
+      type: BooleanConstructor;
+    };
+    commandfor: {
+      type: StringConstructor;
+    };
+  };
+  disabled: boolean;
+  /** ID of a nested `<media-menu>` to open when this item is activated. */
+  commandfor: string | undefined;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected update(_changed: PropertyValues): void;
+}
+//#endregion
+export { MenuItemElement };
+//# sourceMappingURL=menu-item-element.d.ts.map

package/dist/dev/ui/menu/menu-item-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-element.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item-element.ts"],"mappings":";;;;cAOa,eAAA,SAAwB,YAAA;EAAA;kBACnB,OAAA;EAAA,OAEA,UAAA;;MACF,IAAA,EAAI,kBAAA;IAAA;;MACF,IAAA,EAAI,iBAAA;IAAA;EAAA;EAGpB,QAAA;;EAEA,UAAA;EAQS,iBAAA,CAAA;EAMA,oBAAA,CAAA;EAAA,UASU,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

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

@@ -0,0 +1,96 @@
+import { MediaElement } from "../media-element.js";
+import { menuContext } from "./context.js";
+import { applyElementProps, applyStateDataAttrs, completeMenuItemSelection } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/menu-item-element.ts
+var MenuItemElement = class extends MediaElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.commandfor = void 0;
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#registered = false;
+		this.#cleanupRegistration = null;
+	}
+	static {
+		this.tagName = "media-menu-item";
+	}
+	static {
+		this.properties = {
+			disabled: { type: Boolean },
+			commandfor: { type: String }
+		};
+	}
+	#ctx;
+	#disconnect;
+	#registered;
+	#cleanupRegistration;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#disconnect = new AbortController();
+		this.#registered = false;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+		this.#registered = false;
+	}
+	update(_changed) {
+		super.update(_changed);
+		const ctx = this.#ctx.value;
+		if (!ctx || !this.#disconnect) return;
+		if (!this.#registered) {
+			this.#registered = true;
+			this.#cleanupRegistration = ctx.menu.registerItem(this);
+			applyElementProps(this, {
+				onClick: (event) => {
+					const currentCtx = this.#ctx.value;
+					if (!currentCtx || this.disabled) return;
+					const target = this.commandfor;
+					if (target) currentCtx.menu.push(target, this.id);
+					else {
+						this.dispatchEvent(new CustomEvent("select", { bubbles: true }));
+						completeMenuItemSelection(currentCtx.menu, currentCtx.parentMenu);
+					}
+					event.preventDefault();
+				},
+				onKeyDown: (event) => {
+					const currentCtx = this.#ctx.value;
+					if (!currentCtx || this.disabled || event.key !== "ArrowRight") return;
+					const target = this.commandfor;
+					if (!target) return;
+					currentCtx.menu.push(target, this.id);
+					event.preventDefault();
+				},
+				onPointerenter: () => {
+					const currentCtx = this.#ctx.value;
+					if (!this.disabled) currentCtx?.menu.highlight(this, { focus: false });
+				}
+			}, { signal: this.#disconnect.signal });
+		}
+		const hasSubmenu = Boolean(this.commandfor);
+		const activeSubMenuId = ctx.navigation.stack[ctx.navigation.stack.length - 1]?.menuId ?? null;
+		const isExpanded = hasSubmenu ? activeSubMenuId === this.commandfor : void 0;
+		applyElementProps(this, {
+			role: "menuitem",
+			"aria-disabled": this.disabled ? "true" : void 0,
+			...hasSubmenu && {
+				"aria-haspopup": "menu",
+				"aria-expanded": isExpanded ? "true" : "false",
+				"data-has-submenu": ""
+			}
+		});
+		applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);
+	}
+};
+//#endregion
+export { MenuItemElement };
+
+//# sourceMappingURL=menu-item-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-element.js","names":["#ctx","#disconnect","#registered","#cleanupRegistration"],"sources":["../../../../src/ui/menu/menu-item-element.ts"],"sourcesContent":["import { applyElementProps, applyStateDataAttrs, completeMenuItemSelection } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { MediaElement } from '../media-element';\nimport { menuContext } from './context';\n\nexport class MenuItemElement extends MediaElement {\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>` to open when this item is activated. */\n  commandfor: string | undefined = undefined;\n\n  readonly #ctx = new ContextConsumer(this, { context: menuContext, subscribe: true });\n\n  #disconnect: AbortController | null = null;\n  #registered = false;\n  #cleanupRegistration: (() => void) | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#disconnect = new AbortController();\n    this.#registered = false;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#cleanupRegistration?.();\n    this.#cleanupRegistration = null;\n    this.#disconnect?.abort();\n    this.#disconnect = null;\n    this.#registered = false;\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.#registered) {\n      this.#registered = true;\n\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.disabled) return;\n\n            const target = this.commandfor;\n            if (target) {\n              // Push the linked submenu — use this element's id as triggerId\n              // (ensure the element has an id for focus restoration).\n              currentCtx.menu.push(target, this.id);\n            } else {\n              this.dispatchEvent(new CustomEvent('select', { bubbles: true }));\n              completeMenuItemSelection(currentCtx.menu, currentCtx.parentMenu);\n            }\n            event.preventDefault();\n          },\n          onKeyDown: (event: KeyboardEvent) => {\n            const currentCtx = this.#ctx.value;\n            if (!currentCtx || this.disabled || event.key !== 'ArrowRight') return;\n\n            const target = this.commandfor;\n            if (!target) return;\n\n            currentCtx.menu.push(target, this.id);\n            event.preventDefault();\n          },\n          onPointerenter: () => {\n            const currentCtx = this.#ctx.value;\n            if (!this.disabled) currentCtx?.menu.highlight(this, { focus: false });\n          },\n        },\n        { signal: this.#disconnect.signal }\n      );\n    }\n\n    const hasSubmenu = Boolean(this.commandfor);\n    const topEntry = ctx.navigation.stack[ctx.navigation.stack.length - 1];\n    const activeSubMenuId = topEntry?.menuId ?? null;\n    const isExpanded = hasSubmenu ? activeSubMenuId === this.commandfor : undefined;\n\n    applyElementProps(this, {\n      role: 'menuitem',\n      'aria-disabled': this.disabled ? 'true' : undefined,\n      ...(hasSubmenu && {\n        'aria-haspopup': 'menu',\n        'aria-expanded': isExpanded ? 'true' : 'false',\n        'data-has-submenu': '',\n      }),\n    });\n\n    applyStateDataAttrs(this, ctx.state, ctx.stateAttrMap);\n  }\n}\n"],"mappings":";;;;;AAOA,IAAa,kBAAb,cAAqC,aAAa;;;kBAQrC;oBAEsB,KAAA;cAEjB,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAa,WAAW;GAAM,CAAC;qBAE9C;qBACxB;8BAC8B;;;iBAflB;;;oBAEG;GAC3B,UAAU,EAAE,MAAM,SAAS;GAC3B,YAAY,EAAE,MAAM,QAAQ;GAC7B;;CAMD;CAEA;CACA;CACA;CAEA,oBAAmC;AACjC,QAAM,mBAAmB;AACzB,QAAA,aAAmB,IAAI,iBAAiB;AACxC,QAAA,aAAmB;;CAGrB,uBAAsC;AACpC,QAAM,sBAAsB;AAC5B,QAAA,uBAA6B;AAC7B,QAAA,sBAA4B;AAC5B,QAAA,YAAkB,OAAO;AACzB,QAAA,aAAmB;AACnB,QAAA,aAAmB;;CAGrB,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,MAAM,MAAA,IAAU;AACtB,MAAI,CAAC,OAAO,CAAC,MAAA,WAAkB;AAE/B,MAAI,CAAC,MAAA,YAAkB;AACrB,SAAA,aAAmB;AAEnB,SAAA,sBAA4B,IAAI,KAAK,aAAa,KAAK;AAEvD,qBACE,MACA;IACE,UAAU,UAAsB;KAC9B,MAAM,aAAa,MAAA,IAAU;AAC7B,SAAI,CAAC,cAAc,KAAK,SAAU;KAElC,MAAM,SAAS,KAAK;AACpB,SAAI,OAGF,YAAW,KAAK,KAAK,QAAQ,KAAK,GAAG;UAChC;AACL,WAAK,cAAc,IAAI,YAAY,UAAU,EAAE,SAAS,MAAM,CAAC,CAAC;AAChE,gCAA0B,WAAW,MAAM,WAAW,WAAW;;AAEnE,WAAM,gBAAgB;;IAExB,YAAY,UAAyB;KACnC,MAAM,aAAa,MAAA,IAAU;AAC7B,SAAI,CAAC,cAAc,KAAK,YAAY,MAAM,QAAQ,aAAc;KAEhE,MAAM,SAAS,KAAK;AACpB,SAAI,CAAC,OAAQ;AAEb,gBAAW,KAAK,KAAK,QAAQ,KAAK,GAAG;AACrC,WAAM,gBAAgB;;IAExB,sBAAsB;KACpB,MAAM,aAAa,MAAA,IAAU;AAC7B,SAAI,CAAC,KAAK,SAAU,aAAY,KAAK,UAAU,MAAM,EAAE,OAAO,OAAO,CAAC;;IAEzE,EACD,EAAE,QAAQ,MAAA,WAAiB,QAAQ,CACpC;;EAGH,MAAM,aAAa,QAAQ,KAAK,WAAW;EAE3C,MAAM,kBADW,IAAI,WAAW,MAAM,IAAI,WAAW,MAAM,SAAS,IAClC,UAAU;EAC5C,MAAM,aAAa,aAAa,oBAAoB,KAAK,aAAa,KAAA;AAEtE,oBAAkB,MAAM;GACtB,MAAM;GACN,iBAAiB,KAAK,WAAW,SAAS,KAAA;GAC1C,GAAI,cAAc;IAChB,iBAAiB;IACjB,iBAAiB,aAAa,SAAS;IACvC,oBAAoB;IACrB;GACF,CAAC;AAEF,sBAAoB,MAAM,IAAI,OAAO,IAAI,aAAa"}

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

@@ -0,0 +1,22 @@
+import { MediaElement } from "../media-element.js";
+import { PropertyValues } from "@videojs/element";
+
+//#region src/ui/menu/menu-item-indicator-element.d.ts
+declare class MenuItemIndicatorElement extends MediaElement {
+  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=menu-item-indicator-element.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-indicator-element.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator-element.ts"],"mappings":";;;;cAKa,wBAAA,SAAiC,YAAA;EAAA,gBAC5B,OAAA;EAAA,OAEA,UAAA;;MACH,IAAA,EAAI,kBAAA;IAAA;;MACD,IAAA,EAAI,kBAAA;MAAW,SAAA;IAAA;EAAA;EAG/B,OAAA;EACA,UAAA;EAAA,UAEmB,MAAA,CAAO,QAAA,EAAU,cAAA;AAAA"}

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

@@ -0,0 +1,34 @@
+import { MediaElement } from "../media-element.js";
+import { applyElementProps } from "@videojs/core/dom";
+//#region src/ui/menu/menu-item-indicator-element.ts
+var MenuItemIndicatorElement = class extends MediaElement {
+	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=menu-item-indicator-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-item-indicator-element.js","names":[],"sources":["../../../../src/ui/menu/menu-item-indicator-element.ts"],"sourcesContent":["import { applyElementProps } from '@videojs/core/dom';\nimport type { PropertyDeclarationMap, PropertyValues } from '@videojs/element';\n\nimport { MediaElement } from '../media-element';\n\nexport class MenuItemIndicatorElement extends MediaElement {\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":";;;AAKA,IAAa,2BAAb,cAA8C,aAAa;;;iBAQ/C;oBACG;;;iBARa;;;oBAEG;GAC3B,SAAS,EAAE,MAAM,SAAS;GAC1B,YAAY;IAAE,MAAM;IAAS,WAAW;IAAe;GACxD;;CAKD,OAA0B,UAAgC;AACxD,QAAM,OAAO,SAAS;EAEtB,MAAM,SAAS,CAAC,KAAK,WAAW,CAAC,KAAK;AAEtC,oBAAkB,MAAM;GACtB,eAAe;GACP;GACT,CAAC"}

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

@@ -0,0 +1,15 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { MenuContextValue } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+import { MenuState } from "@videojs/core";
+
+//#region src/ui/menu/menu-label-element.d.ts
+declare class MenuLabelElement extends ContextPartElement<MenuState> {
+  static readonly tagName = "media-menu-label";
+  protected readonly consumer: ContextConsumer<{
+    __context__: MenuContextValue;
+  }, this>;
+}
+//#endregion
+export { MenuLabelElement };
+//# sourceMappingURL=menu-label-element.d.ts.map

package/dist/dev/ui/menu/menu-label-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-label-element.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-label-element.ts"],"mappings":";;;;;;cAMa,gBAAA,SAAyB,kBAAA,CAAmB,SAAA;EAAA,gBACvC,OAAA;EAAA,mBAEG,QAAA,EAAQ,eAAA;iBAHqC,gBAAA;EAAA;AAAA"}

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

@@ -0,0 +1,20 @@
+import { ContextPartElement } from "../context-part-element.js";
+import { menuContext } from "./context.js";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/menu-label-element.ts
+var MenuLabelElement = class extends ContextPartElement {
+	constructor(..._args) {
+		super(..._args);
+		this.consumer = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+	}
+	static {
+		this.tagName = "media-menu-label";
+	}
+};
+//#endregion
+export { MenuLabelElement };
+
+//# sourceMappingURL=menu-label-element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu-label-element.js","names":[],"sources":["../../../../src/ui/menu/menu-label-element.ts"],"sourcesContent":["import type { MenuState } from '@videojs/core';\nimport { ContextConsumer } from '@videojs/element/context';\n\nimport { ContextPartElement } from '../context-part-element';\nimport { menuContext } from './context';\n\nexport class MenuLabelElement extends ContextPartElement<MenuState> {\n  static readonly tagName = 'media-menu-label';\n\n  protected readonly consumer = new ContextConsumer(this, { context: menuContext, subscribe: true });\n}\n"],"mappings":";;;;AAMA,IAAa,mBAAb,cAAsC,mBAA8B;;;kBAGpC,IAAI,gBAAgB,MAAM;GAAE,SAAS;GAAa,WAAW;GAAM,CAAC;;;iBAFxE"}