@oscarpalmer/oui 0.39.0 → 0.40.0

package/dist/js/{listbox.data-DQ7-x2uY.mjs → listbox.data-BQyZGKgr.mjs}

@@ -1,15 +1,16 @@
-import { getLocalization, localize } from "./l10n.mjs";
+import { getLocalization, localize } from "./l10n/index.mjs";
 import { listboxScrollOptions } from "./internal/listbox/listbox.constants.mjs";
 import { updateListboxForm, updateListboxValidity } from "./internal/listbox/listbox.form.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { dispatch } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch } from "@oscarpalmer/toretto/event";
+import { filter } from "@oscarpalmer/atoms/array/filter";
+import { createElement } from "@oscarpalmer/toretto/create";
 import { getString } from "@oscarpalmer/atoms/string";
-import { createElement, setAria as setAria$1, setAttribute as setAttribute$1 } from "@oscarpalmer/toretto";
-import { getData as getData$1 } from "@oscarpalmer/toretto/data";
+import { getData } from "@oscarpalmer/toretto/data";
 //#region src/js/internal/listbox/listbox.misc.ts
 function generateListboxIds(prefix, select) {
-	const elements = [...select.children].flatMap((child) => child instanceof HTMLOptGroupElement ? [child, ...[...child.children].filter((groupChild) => groupChild instanceof HTMLOptionElement)] : child instanceof HTMLOptionElement ? [child] : []);
+	const elements = [...select.children].flatMap((child) => child instanceof HTMLOptGroupElement ? [child, ...filter([...child.children], (groupChild) => groupChild instanceof HTMLOptionElement)] : child instanceof HTMLOptionElement ? [child] : []);
 	const { length } = elements;
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];
@@ -17,24 +18,26 @@ function generateListboxIds(prefix, select) {
 	}
 }
 function getListboxVisibleOptions(state) {
-	return state.options.all.filter((option) => !option.hidden);
+	return state.component.options.all.filter((option) => !option.hidden);
 }
 function setListboxDisabled(state, value) {
-	state.filter.element.readOnly = state.readonly || value;
+	state.component.filter.element.readOnly = state.component.readonly || value;
 	setProperties("disabled", state, value);
 }
 function setListboxFilter(state, value) {
 	if (typeof value !== "string") return;
-	const type = value.length < state.filter.element.value.length ? "deleteContentBackward" : "insertText";
-	state.filter.element.value = value;
+	const { filter } = state.component;
+	const type = value.length < filter.element.value.length ? "deleteContentBackward" : "insertText";
+	filter.element.value = value;
 	filterListbox(type, state);
 }
 function setListboxLimit(type, state, value) {
+	const { component } = state;
 	let actual = value;
 	if (typeof actual === "string") actual = Number.parseInt(actual, 10);
-	if (typeof actual === "number" && !Number.isNaN(actual) && actual >= 0 ? actual !== state[type] : actual == null) {
-		state[type] = actual;
-		setAttribute(state.host, type, actual);
+	if (typeof actual === "number" && !Number.isNaN(actual) && actual >= 0 ? actual !== component[type] : actual == null) {
+		component[type] = actual;
+		setAttribute(component.host, type, actual);
 		updateListboxValidity(state);
 	}
 }
@@ -43,16 +46,19 @@ function setListboxMultiple(element, value) {
 	else element.removeAttribute("multiple");
 }
 function setProperties(key, state, value) {
-	state[key] = value;
-	const { length } = state.elements;
+	const { component } = state;
+	const { elements } = component;
+	component[key] = value;
+	const { length } = elements;
 	for (let index = 0; index < length; index += 1) {
-		const element = state.elements[index];
+		const element = elements[index];
 		if (element == null) continue;
 		setAria(element, key, key !== "readonly" || !(element instanceof HTMLButtonElement) ? value : void 0);
 	}
 }
 function setListboxReadonly(state, value) {
-	state.filter.element.readOnly = state.disabled || value;
+	const { disabled, filter } = state.component;
+	filter.element.readOnly = disabled || value;
 	setProperties("readonly", state, value);
 }
 function setListboxRequired(state, value) {
@@ -81,7 +87,7 @@ function createListboxFilter(parameters) {
 	if (parameters.type === "autocomplete") return;
 	const container = createElement("div", { attribute: { [parameters.attributes.filter]: "" } });
 	const element = createListboxInput(parameters, "");
-	setAttribute$1(element, parameters.attributes.input, "");
+	setAttribute(element, parameters.attributes.input, "");
 	container.append(element);
 	return {
 		container,
@@ -144,7 +150,7 @@ function createListboxInput(parameters, value) {
 			type: "text"
 		}
 	});
-	if (isAutocomplete || listbox) setAria$1(input, "expanded", listbox);
+	if (isAutocomplete || listbox) setAria(input, "expanded", listbox);
 	return input;
 }
 function createListboxList(parameters) {
@@ -255,9 +261,9 @@ function createListboxValueLabel(id) {
 	} });
 }
 function updateListboxMessage(state) {
-	const { attributes, host, localizations, message } = state;
+	const { attributes, host, localizations, message } = state.component;
 	const visible = getListboxVisibleOptions(state).length;
-	setAttribute$1(message, attributes.hidden, visible > 0 ? "" : void 0);
+	setAttribute(message, attributes.hidden, visible > 0 ? "" : void 0);
 	let data = {};
 	let parameters = [];
 	let key;
@@ -272,66 +278,72 @@ function updateListboxMessage(state) {
 	message.hidden = false;
 }
 function updateListboxPreview(preview, state, active, scroll) {
-	const { length } = state.options.all;
+	const { attributes, callbacks, content, filter, options } = state.component;
+	const { length } = options.all;
 	for (let index = 0; index < length; index += 1) {
-		const option = state.options.all[index];
-		setAttribute$1(option, state.attributes.active, option === active ? "" : void 0);
+		const option = options.all[index];
+		setAttribute(option, attributes.active, option === active ? "" : void 0);
 	}
-	state.active = active;
-	setAria$1(state.filter.element, "activedescendant", state.content.checkVisibility() ? active?.id : void 0);
+	state.component.active = active;
+	setAria(filter.element, "activedescendant", content.checkVisibility() ? active?.id : void 0);
 	if (scroll ?? true) active?.scrollIntoView(listboxScrollOptions);
-	if (preview !== "none") state.callbacks.data.onPreview(preview, state, active);
+	if (preview !== "none") callbacks.data.onPreview(preview, state, active);
 }
 function updateListboxValueLabel(state) {
+	const { autocomplete, filter, listbox, localizations, host, options, multiple, values } = state.component;
 	let label;
-	if (state.multiple) {
-		const localization = getLocalization(state.localizations.global, state.host, "selected", state.localizations.component);
-		const { length } = state.options.selected;
+	if (multiple) {
+		const localization = getLocalization(localizations.global, host, "selected", localizations.component);
+		const { length } = options.selected;
 		label = localize(localization, { amount: length }, [length]);
-	} else label = state.autocomplete.none && !state.listbox ? state.filter.element.value : state.options.selected[0]?.textContent ?? "";
-	state.values.label.textContent = label;
+	} else label = autocomplete.none && !listbox ? filter.element.value : options.selected[0]?.textContent ?? "";
+	values.label.textContent = label;
 }
 //#endregion
 //#region src/js/internal/listbox/listbox.data.ts
 function applyListboxSelection(parameters) {
 	const { added, emit, option, scroll, selected, state } = parameters;
-	const { length } = state.options.all;
+	const { component } = state;
+	const { autocomplete, callbacks, filter, listbox, options, type } = component;
+	const { length } = options.all;
 	for (let index = 0; index < length; index += 1) {
-		const option = state.options.all[index];
-		setAria(option, "selected", (state.type === "select" || !state.autocomplete.none) && (selected ?? state.options.selected).includes(option));
+		const option = options.all[index];
+		setAria(option, "selected", (type === "select" || !autocomplete.none) && (selected ?? options.selected).includes(option));
 	}
-	const values = parameters.values ?? (state.autocomplete.none && !state.listbox ? [state.filter.element.value] : (selected ?? state.options.selected).map((option) => getData$1(option, "value", false) ?? ""));
+	const values = parameters.values ?? (autocomplete.none && !listbox ? [filter.element.value] : (selected ?? options.selected).map((option) => getData(option, "value", false) ?? ""));
 	if (values.length === 0) values.push("");
-	if (selected != null) state.options.selected = selected;
-	if (!(values.length === state.values.current.length ? values.some((value) => !state.values.current.includes(value)) : true)) return;
+	if (selected != null) options.selected = selected;
+	if (!(values.length === component.values.current.length ? values.some((value) => !component.values.current.includes(value)) : true)) return;
 	updateListboxForm(state, values, emit);
 	updateListboxMessage(state);
 	updateListboxPreview("set", state, option, scroll);
 	updateListboxValueLabel(state);
-	state.callbacks.data.onApply(state, option, values, added, selected, emit);
+	callbacks.data.onApply(state, option, values, added, selected, emit);
 }
 function filterListbox(type, state) {
-	if (state.disabled || state.readonly) return;
-	const update = state.filter.element.value !== state.filter.value;
+	const { callbacks, disabled, filter, host, readonly } = state.component;
+	if (disabled || readonly) return;
+	const update = filter.element.value !== filter.value;
 	const option = filterListboxOptions(state);
 	let preview;
 	if (type.includes("delete")) preview = "none";
 	else if (type.includes("insert")) preview = "typed";
-	if (preview != null) state.callbacks.data.onFilter(preview, state, update, option);
+	if (preview != null) callbacks.data.onFilter(preview, state, update, option);
 	if (update) {
-		state.filter.value = state.filter.element.value;
-		dispatch(state.host, "input");
+		filter.value = filter.element.value;
+		dispatch(host, "input");
 	}
 }
 function filterListboxOption(state, value, textContent) {
+	const { options } = state.component;
 	const filterTextContent = textContent ?? false;
 	const filter = getString(value).toLocaleLowerCase();
 	filterListboxOptions(state);
-	const { length } = state.options.all;
+	const { length } = options.all;
 	let match;
 	for (let index = 0; index < length; index += 1) {
-		const option = state.options.all[index];
-		if ((filterTextContent ? option.textContent : getData$1(option, "value", false) ?? "").toLocaleLowerCase() === filter) {
+		const option = options.all[index];
+		if ((filterTextContent ? option.textContent : getData(option, "value", false) ?? "").toLocaleLowerCase() === filter) {
 			match = option;
 			break;
 		}
@@ -339,12 +351,12 @@ function filterListboxOption(state, value, textContent) {
 	return match;
 }
 function filterListboxOptions(state) {
-	function filter(options) {
+	function filterOptions(options) {
 		const { length } = options;
 		let count = 0;
 		for (let index = 0; index < length; index += 1) {
 			const option = options[index];
-			option.hidden = (state.type === "select" || !state.autocomplete.none) && !option.textContent.toLocaleLowerCase().includes(value);
+			option.hidden = (type === "select" || !autocomplete.none) && !option.textContent.toLocaleLowerCase().includes(value);
 			if (!option.hidden) {
 				count += 1;
 				visible.push(option);
@@ -352,22 +364,24 @@ function filterListboxOptions(state) {
 		}
 		return count === 0;
 	}
-	const value = state.filter.element.value.toLocaleLowerCase();
+	const { active, attributes, autocomplete, filter, groups, list, options, type } = state.component;
+	const value = filter.element.value.toLocaleLowerCase();
 	const visible = [];
-	if (state.groups == null) filter(state.options.all);
+	if (groups == null) filterOptions(options.all);
 	else {
-		const groupsLength = state.groups.length;
+		const groupsLength = groups.length;
 		for (let groupIndex = 0; groupIndex < groupsLength; groupIndex += 1) {
-			const { element, options } = state.groups[groupIndex];
-			element.hidden = filter(options);
+			const { element, options } = groups[groupIndex];
+			element.hidden = filterOptions(options);
 		}
 	}
-	setAttribute(state.list, state.attributes.empty, visible.length === 0 ? "" : void 0);
+	setAttribute(list, attributes.empty, visible.length === 0 ? "" : void 0);
 	updateListboxMessage(state);
-	return state.active != null && visible.includes(state.active) ? state.active : visible[0];
+	return active != null && visible.includes(active) ? active : visible[0];
 }
 function setListboxValue(state, value, emit) {
-	if (state.autocomplete.none && !state.listbox) {
+	const { autocomplete, listbox } = state.component;
+	if (autocomplete.none && !listbox) {
 		setListboxFilter(state, getString(value));
 		return;
 	}
@@ -375,35 +389,37 @@ function setListboxValue(state, value, emit) {
 }
 function setListboxValues(state, value, emit) {
 	if (!Array.isArray(value)) return;
-	const values = (state.multiple ? value : value.slice(0, 1)).map((value) => getString(value).toLocaleLowerCase());
+	const { autocomplete, listbox, multiple, options } = state.component;
+	const values = (multiple ? value : value.slice(0, 1)).map((value) => getString(value).toLocaleLowerCase());
 	if (values.length === 0) values.push("");
-	if (state.autocomplete.none && !state.listbox) {
+	if (autocomplete.none && !listbox) {
 		setListboxValue(state, values[0], emit);
 		return;
 	}
-	const { length } = state.options.all;
+	const { length } = options.all;
 	const selected = [];
 	for (let index = 0; index < length; index += 1) {
-		const option = state.options.all[index];
-		if (values.includes(getData$1(option, "value", false)?.toLocaleLowerCase() ?? "")) selected.push(option);
+		const option = options.all[index];
+		if (values.includes(getData(option, "value", false)?.toLocaleLowerCase() ?? "")) selected.push(option);
 	}
 	applyListboxSelection({
 		emit,
 		selected,
 		state,
 		added: true,
-		option: selected[0] ?? state.options.all[0],
-		values: state.autocomplete.none && !state.listbox ? values : void 0
+		option: selected[0] ?? options.all[0],
+		values: autocomplete.none && !listbox ? values : void 0
 	});
 }
 function toggleListboxOption(state, option) {
-	if (option == null || !state.multiple && state.options.selected.includes(option)) {
-		state.callbacks.data.onToggle(state);
+	const { autocomplete, callbacks, listbox, multiple, options } = state.component;
+	if (option == null || !multiple && options.selected.includes(option)) {
+		callbacks.data.onToggle(state);
 		return;
 	}
-	const selected = state.options.selected.slice();
+	const selected = options.selected.slice();
 	let added = true;
-	if (state.multiple) {
+	if (multiple) {
 		const index = selected.indexOf(option);
 		if (index === -1) selected.push(option);
 		else {
@@ -411,15 +427,16 @@ function toggleListboxOption(state, option) {
 			selected.splice(index, 1);
 		}
 	} else selected.splice(0, selected.length, option);
+	const values = autocomplete.none && !listbox && option != null ? [option.textContent] : void 0;
 	applyListboxSelection({
 		added,
 		option,
 		selected,
 		state,
-		scroll: false,
-		values: state.autocomplete.none && !state.listbox && option != null ? [option.textContent] : void 0
+		values,
+		scroll: false
 	});
-	state.callbacks.data.onToggle(state);
+	callbacks.data.onToggle(state);
 }
 //#endregion
 export { setListboxDisabled as C, setListboxReadonly as D, setListboxMultiple as E, setListboxRequired as O, getListboxVisibleOptions as S, setListboxLimit as T, createListboxValueLabel as _, setListboxValue as a, updateListboxValueLabel as b, createListboxContent as c, createListboxHeader as d, createListboxInput as f, createListboxOptions as g, createListboxOption as h, filterListboxOptions as i, createListboxFilter as l, createListboxMessage as m, filterListbox as n, setListboxValues as o, createListboxList as p, filterListboxOption as r, toggleListboxOption as s, applyListboxSelection as t, createListboxGroup as u, updateListboxMessage as v, setListboxFilter as w, generateListboxIds as x, updateListboxPreview as y };

package/dist/js/{listbox.model-BHPA7GM4.d.mts → listbox.model-CuBOj4qe.d.mts}

@@ -1,4 +1,5 @@
-import { n as OuiLocalizationsValues, t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
+import { c as OuiLocalizations, u as OuiLocalizationsValues } from "./l10n.model-D6a9frgl.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 //#region src/js/internal/listbox/listbox.model.d.ts
 type OuiListboxAttributes = {
@@ -80,7 +81,11 @@ type OuiListboxOptions = {
   selected: HTMLElement[];
 };
 type OuiListboxPreview = "none" | "set" | "typed";
-type OuiListboxState = {
+type OuiListboxState<State extends PlainObject = PlainObject> = {
+  component: OuiListboxStateComponent<State>;
+  form: OuiListboxStateForm;
+};
+type OuiListboxStateComponent<State extends PlainObject> = {
   active?: HTMLElement;
   attributes: OuiListboxAttributes;
   autocomplete: OuiListboxAutoComplete;
@@ -93,7 +98,6 @@ type OuiListboxState = {
   groups?: OuiListboxGroup[];
   host: HTMLElement;
   id: string;
-  internals: ElementInternals;
   label: OuiListboxLabel;
   list: HTMLUListElement;
   listbox: boolean;
@@ -110,10 +114,10 @@ type OuiListboxState = {
   select: HTMLSelectElement;
   type: OuiListboxType;
   values: OuiListboxValues;
-};
-type OuiListboxStates<State extends OuiListboxState = OuiListboxState> = {
-  map: WeakMap<HTMLElement, State>;
-  set: Set<State>;
+} & State;
+type OuiListboxStateForm = {
+  internals: ElementInternals;
+  restored?: unknown[];
 };
 type OuiListboxType = "autocomplete" | "select";
 type OuiListboxValues = {
@@ -122,4 +126,4 @@ type OuiListboxValues = {
   label: HTMLElement;
 };
 //#endregion
-export { OuiListboxGroup as a, OuiListboxPreview as c, OuiListboxType as d, OuiListboxCallbacks as i, OuiListboxState as l, OuiListboxAutoComplete as n, OuiListboxLocalizations as o, OuiListboxAutoCompleteType as r, OuiListboxOptions as s, OuiListboxAttributes as t, OuiListboxStates as u };
+export { OuiListboxGroup as a, OuiListboxPreview as c, OuiListboxStateForm as d, OuiListboxType as f, OuiListboxCallbacks as i, OuiListboxState as l, OuiListboxAutoComplete as n, OuiListboxLocalizations as o, OuiListboxAutoCompleteType as r, OuiListboxOptions as s, OuiListboxAttributes as t, OuiListboxStateComponent as u };

package/dist/js/menu/index.mjs

@@ -0,0 +1,167 @@
+import { createEmbeddedFloatable, getOnBeforeToggleListener } from "../floatable/floatable.embedded.mjs";
+import { attributable } from "../internal/attributable.mjs";
+import { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, NAVIGABLE_SYMBOL } from "../internal/navigable/navigable.model.mjs";
+import { getNavigable, updateNavigableFocus } from "../internal/navigable/index.mjs";
+import { MENUBAR_ATTRIBUTE, MENUBAR_SELECTOR_ITEM, MENU_ATTRIBUTE, MENU_ATTRIBUTE_POSITION, MENU_MENUBAR_SELECTORS, MENU_SELECTOR_CONTENT, MENU_SELECTOR_ITEM, MENU_SELECTOR_TOGGLE, menubars, menus } from "./menu.model.mjs";
+import { setAria, setRole } from "@oscarpalmer/toretto/aria";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/js/menu/index.ts
+function OuiMenu(element, navigable) {
+	const state = navigable[NAVIGABLE_SYMBOL];
+	this.content = state.element;
+	this.element = element;
+	this.navigable = navigable;
+	this.toggle = element.querySelector(MENU_SELECTOR_TOGGLE);
+	this.floatable = createEmbeddedFloatable(this.toggle, this.content, {
+		attribute: MENU_ATTRIBUTE_POSITION,
+		position: findAncestor(element.parentElement, MENU_SELECTOR_CONTENT) == null ? "below-start" : "end-top",
+		reusable: false
+	});
+	state.listeners.push(getOnBeforeToggleListener(this.content), on(this.content, "click", (event) => {
+		event.stopPropagation();
+		if (findAncestor(event, MENU_SELECTOR_TOGGLE) != null) return;
+		const elements = document.querySelectorAll(MENU_SELECTOR_CONTENT);
+		for (const element of elements) menus.get(element)?.floatable.hide();
+		const menu = menus.get(elements[0]);
+		if (menu != null && event.pointerId === -1) updateNavigableFocus(menu.navigable, true);
+	}), on(this.content, "toggle", (event) => {
+		const expanded = event.newState === "open";
+		if (expanded) {
+			this.floatable?.update();
+			updateNavigableFocus(this.navigable, true);
+		}
+		setAria(this.toggle, "expanded", expanded);
+	}));
+	this.floatable.update();
+	initializeMenu(this);
+	updateNavigableFocus(this.navigable, false);
+}
+OuiMenu.prototype.destroy = destroyMenu;
+Object.defineProperties(OuiMenu.prototype, { open: {
+	enumerable: true,
+	get: getMenuOpen
+} });
+function OuiMenubar(element, navigable) {
+	this.element = element;
+	this.navigable = navigable;
+	updateNavigableFocus(this.navigable, false);
+}
+OuiMenubar.prototype.destroy = destroyMenubar;
+function addInstance(instances, ctor, element, content, options) {
+	if (!instances.has(content)) instances.set(content, new ctor(element, getNavigable(content, {
+		...options,
+		onDeactivate,
+		onPreventNavigation,
+		onShouldActivate,
+		onShouldDeactivate
+	})));
+}
+function addMenu(element) {
+	const content = element.querySelector(MENU_SELECTOR_CONTENT);
+	const toggle = element.querySelector(MENU_SELECTOR_TOGGLE);
+	if (content != null && toggle != null) addInstance(menus, OuiMenu, element, content, {
+		selector: MENU_SELECTOR_ITEM,
+		vertical: true
+	});
+}
+function addMenubar(element) {
+	addInstance(menubars, OuiMenubar, element, element, {
+		role: "menubar",
+		selector: MENUBAR_SELECTOR_ITEM,
+		vertical: false
+	});
+}
+function destroyMenu() {
+	this.floatable.destroy();
+	this.navigable.destroy();
+	this.content = void 0;
+	this.element = void 0;
+	this.floatable = void 0;
+	this.navigable = void 0;
+	this.toggle = void 0;
+}
+function destroyMenubar() {
+	this.navigable.destroy();
+	this.element = void 0;
+	this.navigable = void 0;
+}
+function getId(element, value) {
+	let { id } = element;
+	if (id == null || id.trim().length === 0) {
+		id = value == null ? `oui_menu_${++index}` : `${value}_toggle`;
+		element.id = id;
+	}
+	return id;
+}
+function getMenuOpen() {
+	return this.floatable.open;
+}
+function initializeMenu(menu) {
+	const id = getId(menu.content);
+	setAttribute(menu.toggle, "popovertarget", id);
+	setAria(menu.toggle, {
+		controls: id,
+		expanded: "false",
+		haspopup: "menu"
+	});
+	setAttributes(menu.content, {
+		popover: "",
+		tabindex: "-1"
+	});
+	setRole(menu.content, "menu");
+}
+function onDeactivate(_, navigable) {
+	const menu = menus.get(navigable[NAVIGABLE_SYMBOL].element);
+	if (menu == null) return;
+	menu.floatable.hide();
+	const element = findAncestor(menu.element.parentElement, MENU_MENUBAR_SELECTORS);
+	if (element == null) return;
+	const instance = menubars.get(element) ?? menus.get(element);
+	if (instance != null) updateNavigableFocus(instance.navigable, true);
+}
+function onPreventNavigation(_, navigable) {
+	const { element } = navigable[NAVIGABLE_SYMBOL];
+	const instance = menubars.get(element) ?? menus.get(element);
+	return instance == null ? false : findAncestor(instance.element.parentElement, MENU_MENUBAR_SELECTORS) != null;
+}
+function onShouldActivate(event, navigable) {
+	const state = navigable[NAVIGABLE_SYMBOL];
+	const { element } = state;
+	let activate = false;
+	if (menubars.has(element)) activate = state.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : NAVIGABLE_KEYS_HORIZONTAL.has(event.key);
+	else if (menus.has(element)) activate = state.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : event.key === "ArrowRight";
+	if (activate) {
+		const target = event.target instanceof HTMLElement && event.target.matches(MENU_SELECTOR_TOGGLE) ? event.target : void 0;
+		if (target == null) activate = false;
+		else target.click();
+	}
+	return activate;
+}
+function onShouldDeactivate(event, navigable) {
+	const { element, orientation } = navigable[NAVIGABLE_SYMBOL];
+	if (menubars.has(element)) return;
+	const menu = menus.get(element);
+	if (menu == null) return;
+	const horizontal = orientation === "horizontal";
+	const altKey = horizontal ? "ArrowDown" : "ArrowRight";
+	const baseKey = horizontal ? "ArrowUp" : "ArrowLeft";
+	if (event.key === baseKey) return findAncestor(menu.element.parentElement, MENU_SELECTOR_CONTENT) != null;
+	if (event.key === altKey && event.target instanceof HTMLElement && !event.target.hasAttribute("popovertarget")) return false;
+}
+function removeInstance(instances, element) {
+	instances.get(element)?.destroy();
+	instances.delete(element);
+}
+function removeMenu(element) {
+	removeInstance(menus, element);
+}
+function removeMenubar(element) {
+	removeInstance(menubars, element);
+}
+let index = 0;
+attributable(MENU_ATTRIBUTE, addMenu, removeMenu);
+attributable(MENUBAR_ATTRIBUTE, addMenubar, removeMenubar);
+//#endregion
+export {};

package/dist/js/menu/menu.model.d.mts

@@ -0,0 +1,33 @@
+import { c as OuiFloatable } from "../floatable.model-DXsQgoU7.mjs";
+import { d as OuiNavigable, m as OuiNavigableOptions } from "../navigable.model-BPOM8DZk.mjs";
+//#region src/js/menu/menu.model.d.ts
+export type OuiBasicMenu = {
+  destroy(): void;
+};
+export type OuiBasicMenuOptions = Pick<OuiNavigableOptions, "role" | "selector" | "vertical">;
+export type OuiMenu = {
+  content: HTMLElement;
+  element: HTMLElement;
+  floatable: OuiFloatable;
+  navigable: OuiNavigable;
+  toggle: HTMLElement;
+  get open(): boolean;
+  destroy(): void;
+};
+export type OuiMenubar = {
+  element: HTMLElement;
+  navigable: OuiNavigable;
+  destroy(): void;
+};
+export declare const MENU_ATTRIBUTE = "oui-menu";
+export declare const MENU_ATTRIBUTE_POSITION: string;
+export declare const MENUBAR_ATTRIBUTE = "oui-menubar";
+export declare const MENU_SELECTOR_CONTENT: string;
+export declare const MENU_SELECTOR_ITEM: string;
+export declare const MENU_SELECTOR_TOGGLE: string;
+export declare const MENUBAR_SELECTOR: string;
+export declare const MENUBAR_SELECTOR_ITEM: string;
+export declare const MENU_MENUBAR_SELECTORS: string;
+export declare const menubars: WeakMap<HTMLElement, OuiMenubar>;
+export declare const menus: WeakMap<HTMLElement, OuiMenu>;
+//#endregion

package/dist/js/menu/menu.model.mjs

@@ -0,0 +1,15 @@
+import "../internal/navigable/navigable.model.mjs";
+//#region src/js/menu/menu.model.ts
+const MENU_ATTRIBUTE = "oui-menu";
+const MENU_ATTRIBUTE_POSITION = `${MENU_ATTRIBUTE}-position`;
+const MENUBAR_ATTRIBUTE = "oui-menubar";
+const MENU_SELECTOR_CONTENT = `[${MENU_ATTRIBUTE}-content]`;
+const MENU_SELECTOR_ITEM = `:scope > [${MENU_ATTRIBUTE}-item], :scope > * > [${MENU_ATTRIBUTE}-item]`;
+const MENU_SELECTOR_TOGGLE = `[${MENU_ATTRIBUTE}-toggle]`;
+const MENUBAR_SELECTOR = `[${MENUBAR_ATTRIBUTE}]`;
+const MENUBAR_SELECTOR_ITEM = `:scope > [${MENUBAR_ATTRIBUTE}-item], :scope > * > [${MENUBAR_ATTRIBUTE}-item]`;
+const MENU_MENUBAR_SELECTORS = `${MENUBAR_SELECTOR}, ${MENU_SELECTOR_CONTENT}`;
+const menubars = /* @__PURE__ */ new WeakMap();
+const menus = /* @__PURE__ */ new WeakMap();
+//#endregion
+export { MENUBAR_ATTRIBUTE, MENUBAR_SELECTOR, MENUBAR_SELECTOR_ITEM, MENU_ATTRIBUTE, MENU_ATTRIBUTE_POSITION, MENU_MENUBAR_SELECTORS, MENU_SELECTOR_CONTENT, MENU_SELECTOR_ITEM, MENU_SELECTOR_TOGGLE, menubars, menus };