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

package/dist/default/ui/menu/checkbox-item.js

@@ -0,0 +1,84 @@
+import { UIElement } from "../ui-element.js";
+import { menuContext } from "./context.js";
+import { applyElementProps } from "@videojs/core/dom";
+import { ContextConsumer } from "@videojs/element/context";
+//#region src/ui/menu/checkbox-item.ts
+/**
+* Menu item that toggles `checked` when activated and leaves the menu open. The element itself takes
+* `role="menuitemcheckbox"`.
+*
+* @fires checked-change - Fired when the checked state changes.
+*/
+var MenuCheckboxItemElement = class extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.disabled = false;
+		this.#ctx = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#disconnect = null;
+		this.#registered = false;
+		this.#cleanupRegistration = null;
+	}
+	static {
+		this.tagName = "media-menu-checkbox-item";
+	}
+	static {
+		this.properties = {
+			checked: { type: Boolean },
+			disabled: { type: Boolean }
+		};
+	}
+	#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: () => {
+					if (!this.#ctx.value || this.disabled) return;
+					this.checked = !this.checked;
+					this.dispatchEvent(new CustomEvent("checked-change", {
+						detail: { checked: this.checked },
+						bubbles: true
+					}));
+				},
+				onPointerenter: () => {
+					const currentCtx = this.#ctx.value;
+					if (!this.disabled) currentCtx?.menu.highlight(this, {
+						focus: false,
+						pointer: true
+					});
+				}
+			}, { signal: this.#disconnect.signal });
+		}
+		applyElementProps(this, {
+			role: "menuitemcheckbox",
+			"aria-checked": String(this.checked),
+			"aria-disabled": this.disabled ? "true" : void 0
+		});
+	}
+};
+//#endregion
+export { MenuCheckboxItemElement };

package/dist/default/ui/menu/content.js

@@ -0,0 +1,295 @@
+import { UIElement } from "../ui-element.js";
+import { menuContext } from "./context.js";
+import { MenuContentDataAttrs, MenuCore, resolveMenuOptionState } from "@videojs/core";
+import { applyElementProps, applyStateDataAttrs, createMenu, createTransition, isMenuNavigationKey } from "@videojs/core/dom";
+import { ContextConsumer, ContextProvider } from "@videojs/element/context";
+//#region src/ui/menu/content.ts
+let idCounter = 0;
+/** One accessible menu page. Root and nested pages are sibling children of `<media-menu>`. */
+var MenuContentElement = class MenuContentElement extends UIElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.defaultOpen = false;
+		this.#root = new ContextConsumer(this, {
+			context: menuContext,
+			subscribe: true
+		});
+		this.#provider = new ContextProvider(this, { context: menuContext });
+		this.#core = new MenuCore();
+		this.#generatedId = `vjs-menu-content-${idCounter++}`;
+		this.#context = null;
+		this.#menu = null;
+		this.#parentMenu = null;
+		this.#rootMenu = null;
+		this.#ownsMenu = false;
+		this.#disconnect = null;
+		this.#cleanupRegistration = null;
+		this.#cleanupParentRegistration = null;
+		this.#optionStates = /* @__PURE__ */ new Map();
+		this.#optionSource = Symbol("menu");
+		this.#optionState = null;
+		this.#optionParent = null;
+		this.#stateTrigger = null;
+		this.#triggerWasDisabled = false;
+		this.#triggerWasHidden = false;
+		this.#wasActive = false;
+		this.#normalizing = false;
+		this.#handleKeyDown = (event) => {
+			const isNavigationKey = isMenuNavigationKey(event);
+			const defaultPrevented = event.defaultPrevented;
+			this.#menu?.contentProps.onKeyDown(event);
+			if (this.#parentMenu && (event.key === "ArrowLeft" || event.key === "Escape") && !defaultPrevented) {
+				event.preventDefault();
+				this.#menu?.close("escape");
+			}
+			if (event.key !== "Escape" && isNavigationKey) event.stopPropagation();
+		};
+		this.#handleFocusOut = (event) => {
+			this.#menu?.contentProps.onFocusOut(event);
+		};
+		this.#setOptionState = (source, optionState) => {
+			const previous = this.#optionStates.get(source);
+			if (optionState && isSameOptionState(previous, optionState)) return;
+			if (!optionState && !previous) return;
+			if (optionState) this.#optionStates.set(source, optionState);
+			else this.#optionStates.delete(source);
+			this.#optionState = resolveMenuOptionState(this.#optionStates.values());
+			if ((this.#optionState?.disabled || this.#optionState?.hidden) && this.open && this.#parentMenu) this.close("imperative-action");
+			this.#syncOptionState(this.#findTrigger());
+			this.#optionParent?.setOptionState(this.#optionSource, this.#optionState);
+		};
+	}
+	static {
+		this.tagName = "media-menu-content";
+	}
+	static {
+		this.properties = {
+			open: { type: Boolean },
+			defaultOpen: {
+				type: Boolean,
+				attribute: "default-open"
+			}
+		};
+	}
+	#root;
+	#provider;
+	#core;
+	#generatedId;
+	#context;
+	#menu;
+	#parentMenu;
+	#rootMenu;
+	#ownsMenu;
+	#disconnect;
+	#cleanupRegistration;
+	#cleanupParentRegistration;
+	#optionStates;
+	#optionSource;
+	#optionState;
+	#optionParent;
+	#stateTrigger;
+	#triggerWasDisabled;
+	#triggerWasHidden;
+	#wasActive;
+	#normalizing;
+	get context() {
+		return this.#context;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (this.#normalizing) return;
+		this.#disconnect = new AbortController();
+		applyElementProps(this, {
+			onKeyDown: this.#handleKeyDown,
+			onFocusOut: this.#handleFocusOut
+		}, { signal: this.#disconnect.signal });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#normalizing) return;
+		this.#cleanupMenu();
+		this.#disconnect?.abort();
+		this.#disconnect = null;
+	}
+	openMenu(reason = "imperative-action") {
+		this.#menu?.open(reason);
+	}
+	close(reason = "imperative-action") {
+		this.#menu?.close(reason);
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (!this.hasUpdated && this.defaultOpen && !this.open) this.open = true;
+		if (this.#ownsMenu && this.#menu && changed.has("open")) this.#menu.syncOpen(this.open);
+	}
+	update(changed) {
+		super.update(changed);
+		const root = this.#root.value ?? null;
+		if (!root) return;
+		if (!this.id) this.id = this.#generatedId;
+		const trigger = this.#findTrigger();
+		const parentContent = trigger?.closest(MenuContentElement.tagName) ?? null;
+		if (parentContent && !parentContent.context) {
+			this.hidden = true;
+			requestAnimationFrame(() => this.requestUpdate());
+			return;
+		}
+		const parentMenu = parentContent?.context?.menu ?? null;
+		const isSubmenu = parentMenu !== null;
+		if (root.menu !== this.#rootMenu || parentMenu !== this.#parentMenu) {
+			this.#cleanupMenu();
+			this.#rootMenu = root.menu;
+			this.#parentMenu = parentMenu;
+			this.#setupMenu(root, parentMenu);
+		}
+		this.#setOptionParent(parentContent?.context ?? root);
+		const menu = this.#menu;
+		if (!menu) return;
+		const input = menu.input.current;
+		this.#core.setInput({
+			...input,
+			isSubmenu
+		});
+		const state = this.#core.getState();
+		const active = !isSubmenu || state.open || state.status === "ending";
+		applyElementProps(this, {
+			...this.#core.getContentAttrs(),
+			hidden: !active
+		});
+		applyStateDataAttrs(this, state, MenuContentDataAttrs);
+		if (trigger) {
+			menu.setTriggerElement(trigger);
+			applyElementProps(trigger, this.#core.getTriggerAttrs(state, active ? this.id : void 0));
+			this.#syncOptionState(trigger);
+		}
+		if (isSubmenu && active && !this.#wasActive) menu.highlightInitialItem({ preventScroll: true });
+		this.#wasActive = active;
+		this.#context = {
+			core: this.#core,
+			menu,
+			popup: root.popup,
+			state,
+			setOptionState: this.#setOptionState
+		};
+		this.#provider.setValue(this.#context);
+		root.popup.sync();
+		this.#normalize();
+	}
+	#setupMenu(root, parentMenu) {
+		if (parentMenu !== null) {
+			this.#ownsMenu = true;
+			this.#menu = createMenu({
+				transition: createTransition(),
+				onOpenChange: (nextOpen, details) => {
+					if (this.dispatchEvent(new CustomEvent("open-change", {
+						bubbles: true,
+						cancelable: true,
+						composed: true,
+						detail: {
+							open: nextOpen,
+							...details
+						}
+					}))) this.open = nextOpen;
+				},
+				closeOnEscape: () => true,
+				closeOnOutsideClick: () => false
+			});
+			this.#menu.setPopupElement(this);
+			this.#cleanupParentRegistration = parentMenu.registerSubmenu(this.#menu);
+			const signal = this.#disconnect?.signal;
+			if (signal) this.#menu.input.subscribe(() => this.requestUpdate(), { signal });
+			this.#menu.syncOpen(this.open);
+		} else {
+			this.#ownsMenu = false;
+			this.#menu = root.menu;
+		}
+		this.#cleanupRegistration = root.popup.registerContent({
+			menu: this.#menu,
+			parent: parentMenu,
+			element: this
+		});
+	}
+	#cleanupMenu() {
+		this.#cleanupRegistration?.();
+		this.#cleanupRegistration = null;
+		this.#cleanupParentRegistration?.();
+		this.#cleanupParentRegistration = null;
+		this.#setOptionParent(null);
+		this.#clearOptionState();
+		this.#optionStates.clear();
+		this.#optionState = null;
+		if (this.#ownsMenu) this.#menu?.destroy();
+		this.#menu = null;
+		this.#context = null;
+		this.#rootMenu = null;
+		this.#parentMenu = null;
+		this.#ownsMenu = false;
+		this.#wasActive = false;
+	}
+	#findTrigger() {
+		if (!this.id) return null;
+		return [...this.getRootNode().querySelectorAll("[commandfor], media-menu-item")].find((element) => element.getAttribute("commandfor") === this.id || element.commandfor === this.id) ?? null;
+	}
+	/** Keep every page as a direct popup child, including authored nested pages. */
+	#normalize() {
+		const popup = this.closest("media-menu");
+		if (!popup || this.parentElement === popup) return;
+		this.#normalizing = true;
+		popup.append(this);
+		this.#normalizing = false;
+	}
+	#handleKeyDown;
+	#handleFocusOut;
+	#setOptionState;
+	#setOptionParent(parent) {
+		if (parent?.menu === this.#optionParent?.menu) {
+			this.#optionParent = parent;
+			return;
+		}
+		this.#optionParent?.setOptionState(this.#optionSource, null);
+		this.#optionParent = parent;
+		this.#optionParent?.setOptionState(this.#optionSource, this.#optionState);
+	}
+	#syncOptionState(trigger) {
+		if (trigger !== this.#stateTrigger) {
+			this.#clearOptionState();
+			this.#stateTrigger = trigger;
+			this.#triggerWasDisabled = trigger ? isTriggerExplicitlyDisabled(trigger) : false;
+			this.#triggerWasHidden = trigger?.hidden === true;
+		}
+		if (!trigger) return;
+		const disabled = this.#optionState?.disabled || this.#triggerWasDisabled;
+		applyElementProps(trigger, {
+			disabled: disabled || void 0,
+			"aria-disabled": disabled ? "true" : void 0,
+			"data-availability": this.#optionState?.availability,
+			hidden: this.#triggerWasHidden || this.#optionState?.hidden || void 0
+		});
+		const value = trigger.querySelector("[data-part~=\"value\"], [data-part~=\"hint\"]");
+		if (value && value.textContent !== this.#optionState?.value) value.textContent = this.#optionState?.value ?? "";
+	}
+	#clearOptionState() {
+		const trigger = this.#stateTrigger;
+		if (!trigger) return;
+		applyElementProps(trigger, {
+			disabled: this.#triggerWasDisabled || void 0,
+			"aria-disabled": this.#triggerWasDisabled ? "true" : void 0,
+			"data-availability": void 0,
+			hidden: this.#triggerWasHidden || void 0
+		});
+		const value = trigger.querySelector("[data-part~=\"value\"], [data-part~=\"hint\"]");
+		if (value?.textContent) value.textContent = "";
+		this.#stateTrigger = null;
+		this.#triggerWasDisabled = false;
+		this.#triggerWasHidden = false;
+	}
+};
+function isSameOptionState(a, b) {
+	return a?.value === b.value && a.disabled === b.disabled && a.hidden === b.hidden && a.availability === b.availability;
+}
+function isTriggerExplicitlyDisabled(trigger) {
+	return trigger.hasAttribute("disabled") || "disabled" in trigger && trigger.disabled === true;
+}
+//#endregion
+export { MenuContentElement };

package/dist/default/ui/menu/context.js

@@ -7,5 +7,3 @@ const menuContext = createContext(MENU_CONTEXT_KEY);
 const menuGroupContext = createContext(MENU_GROUP_CONTEXT_KEY);
 //#endregion
 export { menuContext, menuGroupContext, radioGroupContext as menuRadioGroupContext };
-
-//# sourceMappingURL=context.js.map

package/dist/default/ui/menu/element.js

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

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

@@ -0,0 +1,45 @@
+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 };