@oscarpalmer/oui 0.39.0 → 0.41.0

package/dist/js/listbox/{constants.listbox.mjs → listbox.constants.mjs}

@@ -1,5 +1,6 @@
-//#region src/js/listbox/constants.listbox.ts
+//#region src/js/listbox/listbox.constants.ts
 const LISTBOX_TAGNAME = "oui-listbox";
+const LISTBOX_SYMBOL = Symbol(LISTBOX_TAGNAME);
 const attributeContent = `${LISTBOX_TAGNAME}-content`;
 const attributeFilter = `${LISTBOX_TAGNAME}-filter`;
 const attributeFilterInput = `${attributeFilter}-input`;
@@ -10,13 +11,8 @@ const attributeList = `${LISTBOX_TAGNAME}-list`;
 const attributeListEmpty = `${attributeList}-empty`;
 const attributeMessage = `${LISTBOX_TAGNAME}-message`;
 const attributeOption = `${LISTBOX_TAGNAME}-option`;
-const attributeOptionActive = `${LISTBOX_TAGNAME}-option-active`;
-const messageLabel = `<${LISTBOX_TAGNAME}> must contain a <label> element for the <select> element`;
-const messageSelect = `<${LISTBOX_TAGNAME}> must contain a valid <select> element`;
-const selectorFilter = `[${attributeFilterInput}]`;
-const selectorOption = `[${attributeOption}]`;
-const LISTBOX_ATTRIBUTES = {
-	active: attributeOptionActive,
+const listboxAttributes = {
+	active: `${LISTBOX_TAGNAME}-option-active`,
 	content: attributeContent,
 	empty: attributeListEmpty,
 	filter: attributeFilter,
@@ -28,13 +24,13 @@ const LISTBOX_ATTRIBUTES = {
 	message: attributeMessage,
 	option: attributeOption
 };
-const LISTBOX_MESSAGES = {
-	label: messageLabel,
-	select: messageSelect
+const listboxMessages = {
+	label: `<${LISTBOX_TAGNAME}> must contain a <label> element for the <select> element`,
+	select: `<${LISTBOX_TAGNAME}> must contain a valid <select> element`
 };
-const LISTBOX_SELECTORS = {
-	filter: selectorFilter,
-	option: selectorOption
+const listboxSelectors = {
+	filter: `[${attributeFilterInput}]`,
+	option: `[${attributeOption}]`
 };
 //#endregion
-export { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME };
+export { LISTBOX_SYMBOL, LISTBOX_TAGNAME, listboxAttributes, listboxMessages, listboxSelectors };

package/dist/js/listbox/listbox.dom.d.mts

@@ -0,0 +1,5 @@
+import { r as OuiListboxState, t as OuiListboxFooter } from "../listbox.model-C0MYWXZe.mjs";
+//#region src/js/listbox/listbox.dom.d.ts
+export declare function createListboxFooter(): OuiListboxFooter;
+export declare function updateListboxFooter(state: OuiListboxState): void;
+//#endregion

package/dist/js/listbox/listbox.dom.mjs

@@ -0,0 +1,2 @@
+import { m as updateListboxFooter, p as createListboxFooter } from "../listbox.state-BrN296BM.mjs";
+export { createListboxFooter, updateListboxFooter };

package/dist/js/listbox/listbox.event.d.mts

@@ -0,0 +1,9 @@
+import { h as OptionListPreview } from "../option-list.model-CCPUlPeX.mjs";
+import { r as OuiListboxState } from "../listbox.model-C0MYWXZe.mjs";
+//#region src/js/listbox/listbox.event.d.ts
+export declare function onListboxApply(state: OuiListboxState): void;
+export declare function onListboxEnter(state: OuiListboxState): void;
+export declare function onListboxFilter(preview: OptionListPreview, state: OuiListboxState, _: boolean, active?: Element): void;
+export declare function onListboxNavigation(preview: OptionListPreview, state: OuiListboxState, active?: HTMLElement): void;
+export declare function onListboxToggle(state: OuiListboxState): void;
+//#endregion

package/dist/js/listbox/listbox.event.mjs

@@ -0,0 +1,2 @@
+import { c as onListboxApply, d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../listbox.state-BrN296BM.mjs";
+export { onListboxApply, onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };

package/dist/js/listbox/listbox.misc.d.mts

@@ -0,0 +1,2 @@
+import { n as setListboxLocalizations, t as getListboxId } from "../listbox.misc-DwfB4Mu_.mjs";
+export { getListboxId, setListboxLocalizations };

package/dist/js/listbox/listbox.misc.mjs

@@ -0,0 +1,2 @@
+import { o as getListboxId, s as setListboxLocalizations } from "../listbox.state-BrN296BM.mjs";
+export { getListboxId, setListboxLocalizations };

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

@@ -0,0 +1,2 @@
+import { i as OuiListboxStateExtras, n as OuiListboxLocalizations, r as OuiListboxState, t as OuiListboxFooter } from "../listbox.model-C0MYWXZe.mjs";
+export { OuiListboxFooter, OuiListboxLocalizations, OuiListboxState, OuiListboxStateExtras };

package/dist/js/listbox/listbox.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/js/listbox/listbox.state.d.mts

@@ -0,0 +1,9 @@
+import { u as OuiDefaultLocalizations } from "../l10n.model-D1E1u35L.mjs";
+import { n as OuiListboxLocalizations, r as OuiListboxState } from "../listbox.model-C0MYWXZe.mjs";
+//#region src/js/listbox/listbox.state.d.ts
+export declare function initializeListbox(element: Element, state: OuiListboxState): void;
+export declare function onAttachListbox(state: OuiListboxState): void;
+export declare function onDetachListbox(state: OuiListboxState): void;
+export declare const listboxLocalizations: OuiDefaultLocalizations<OuiListboxLocalizations>;
+export declare const listboxes: Set<OuiListboxState>;
+//#endregion

package/dist/js/listbox/listbox.state.mjs

@@ -0,0 +1,2 @@
+import { a as onDetachListbox, i as onAttachListbox, n as listboxLocalizations, r as listboxes, t as initializeListbox } from "../listbox.state-BrN296BM.mjs";
+export { initializeListbox, listboxLocalizations, listboxes, onAttachListbox, onDetachListbox };

package/dist/js/listbox.constants-DOBMwKup.d.mts

@@ -0,0 +1,9 @@
+import { c as OptionListAttributes } from "./option-list.model-CCPUlPeX.mjs";
+//#region src/js/listbox/listbox.constants.d.ts
+declare const LISTBOX_TAGNAME = "oui-listbox";
+declare const LISTBOX_SYMBOL: unique symbol;
+declare const listboxAttributes: OptionListAttributes;
+declare const listboxMessages: Record<string, string>;
+declare const listboxSelectors: Record<string, string>;
+//#endregion
+export { listboxSelectors as a, listboxMessages as i, LISTBOX_TAGNAME as n, listboxAttributes as r, LISTBOX_SYMBOL as t };

package/dist/js/listbox.misc-DwfB4Mu_.d.mts

@@ -0,0 +1,24 @@
+import { p as OptionListLocalizationValues } from "./option-list.model-CCPUlPeX.mjs";
+//#region src/js/listbox/listbox.misc.d.ts
+declare function getListboxId(): string;
+/**
+ * Set listbox localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+declare function setListboxLocalizations(language: string, localizations: Partial<OptionListLocalizationValues>): void;
+/**
+ * Set default listbox localizations
+ *
+ * @param localizations Default localizations
+ */
+declare function setListboxLocalizations(localizations: Partial<OptionListLocalizationValues>, defaults: true): void;
+/**
+ * Set listbox localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+declare function setListboxLocalizations(localizations: Record<string, Partial<OptionListLocalizationValues>>): void;
+//#endregion
+export { setListboxLocalizations as n, getListboxId as t };

package/dist/js/listbox.model-C0MYWXZe.d.mts

@@ -0,0 +1,20 @@
+import { g as OptionListState, p as OptionListLocalizationValues } from "./option-list.model-CCPUlPeX.mjs";
+//#region src/js/listbox/listbox.model.d.ts
+type OuiListboxFooter = {
+  button: OuiListboxFooterButton;
+  container: Element;
+};
+type OuiListboxFooterButton = {
+  clear: HTMLButtonElement;
+  select: HTMLButtonElement;
+};
+type OuiListboxLocalizations = {
+  clearSelection: string | (() => string);
+  selectAll: string | (() => string);
+} & OptionListLocalizationValues;
+type OuiListboxState = OptionListState<OuiListboxStateExtras, OuiListboxLocalizations>;
+type OuiListboxStateExtras = {
+  footer: OuiListboxFooter;
+};
+//#endregion
+export { OuiListboxStateExtras as i, OuiListboxLocalizations as n, OuiListboxState as r, OuiListboxFooter as t };

package/dist/js/listbox.state-BrN296BM.mjs

@@ -0,0 +1,240 @@
+import { createDefaultLocalizations, createLocalizations } from "./internal/l10n/index.mjs";
+import { getBooleanAriaValue } from "./internal/misc.mjs";
+import { c as createOptionListContent, n as filterOptionList, o as setOptionListValues, s as toggleOptionListOption, t as applyOptionListSelection, x as generateOptionListIds, y as updateOptionListPreview } from "./option-list.data-CgMyUwPc.mjs";
+import { initializeOptionListState } from "./internal/option-list/option-list.state.mjs";
+import { processOptionListKeydown } from "./internal/option-list/option-list.event.mjs";
+import { LISTBOX_SYMBOL, LISTBOX_TAGNAME, listboxAttributes, listboxMessages, listboxSelectors } from "./listbox/listbox.constants.mjs";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
+import { setAttributes } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { noop } from "@oscarpalmer/atoms/function";
+import { createElement } from "@oscarpalmer/toretto/create";
+import { getData } from "@oscarpalmer/toretto/data";
+//#region src/js/listbox/listbox.dom.ts
+function createListboxFooter() {
+	const container = createElement("div", { attribute: { [`${LISTBOX_TAGNAME}-footer`]: "" } });
+	const clear = createElement("button", {
+		attribute: { [`${LISTBOX_TAGNAME}-footer-button`]: "" },
+		property: { textContent: listboxLocalizations.localize("clearSelection") }
+	});
+	const select = createElement("button", {
+		attribute: { [`${LISTBOX_TAGNAME}-footer-button`]: "" },
+		property: { textContent: listboxLocalizations.localize("selectAll") }
+	});
+	container.append(select, clear);
+	return {
+		container,
+		button: {
+			clear,
+			select
+		}
+	};
+}
+function updateListboxFooter(state) {
+	const { disabled, footer, options, readonly } = state.component;
+	setAria(footer.button.clear, "disabled", disabled || readonly || options.selected.length === 0);
+	setAria(footer.button.select, "disabled", disabled || readonly || options.selected.length === options.all.length);
+}
+//#endregion
+//#region src/js/listbox/listbox.event.ts
+function onListboxApply(state) {
+	updateListboxFooter(state);
+}
+function onListboxClick(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listbox?.[LISTBOX_SYMBOL];
+	if (listbox == null || state == null) return;
+	const button = findAncestor(event, `[${LISTBOX_TAGNAME}-footer-button]`);
+	if (button instanceof HTMLElement) {
+		onListboxSelection(state, button);
+		return;
+	}
+	const option = findAncestor(event, listboxSelectors.option);
+	if (!(option instanceof HTMLElement)) return;
+	const { disabled, filter, readonly } = state.component;
+	if (disabled) filter.element.focus();
+	else if (readonly) updateOptionListPreview("none", state, option, false);
+	else toggleOptionListOption(state, option);
+}
+function onListboxEnter(state) {
+	if (!state.component.disabled && !state.component.readonly) toggleOptionListOption(state, state.component.active);
+}
+function onListboxFilter(preview, state, _, active) {
+	updateOptionListPreview(preview, state, active);
+}
+function onListboxInput(event) {
+	const state = findAncestor(event, LISTBOX_TAGNAME)?.[LISTBOX_SYMBOL];
+	if (state?.component.filter.element === event.target) filterOptionList(event.inputType, state);
+}
+function onListboxKeydown(event) {
+	const state = findAncestor(event, LISTBOX_TAGNAME)?.[LISTBOX_SYMBOL];
+	if (state?.component.filter.element === event.target) processOptionListKeydown(event, state);
+}
+function onListboxNavigation(preview, state, active) {
+	if (state.component.multiple || state.component.readonly) updateOptionListPreview(preview, state, active);
+	else applyOptionListSelection({
+		state,
+		option: active,
+		added: true,
+		selected: active == null ? [] : [active]
+	});
+}
+function onListboxSelection(state, button) {
+	if (getAria(button, "disabled") || state.component.options.all.length === 0) return;
+	const clear = button === state.component.footer.button.clear;
+	const select = button === state.component.footer.button.select;
+	if (clear || select) applyOptionListSelection({
+		state,
+		option: state.component.options.all[0],
+		added: false,
+		selected: clear ? [] : state.component.options.all
+	});
+}
+function onListboxToggle(state) {
+	state.component.filter.element.focus();
+}
+on(document, "click", onListboxClick);
+on(document, "input", onListboxInput);
+on(document, "keydown", onListboxKeydown, { passive: false });
+//#endregion
+//#region src/js/listbox/listbox.misc.ts
+function getListboxId() {
+	index += 1;
+	return `oui_listbox_${index}`;
+}
+function setListboxLocalizations(first, second) {
+	if (second === true) listboxLocalizations.setDefaults(first);
+	else listboxLocalizations.setLanguages(first, second);
+}
+let index = 0;
+//#endregion
+//#region src/js/listbox/listbox.state.ts
+function createComponentState(element, state) {
+	const select = element.querySelector("select");
+	if (!(select instanceof HTMLSelectElement)) throw new Error(listboxMessages.select);
+	const label = element.querySelector(`label[for="${select.id}"]`);
+	if (!(label instanceof HTMLLabelElement)) throw new Error(listboxMessages.label);
+	element.id = select.id;
+	const disabled = getBooleanAriaValue(element, "disabled") || select.disabled;
+	const multiple = element.multiple || select.multiple;
+	const readonly = getBooleanAriaValue(element, "readonly");
+	const required = getBooleanAriaValue(element, "required") || select.required;
+	setAttributes(element, {
+		autocomplete: "none",
+		name: select.name === "" ? select.id : select.name
+	});
+	const id = getListboxId();
+	const labelId = label.id;
+	label.htmlFor = id;
+	label.id = `${id}_label`;
+	generateOptionListIds(id, select);
+	const type = "select";
+	const content = createOptionListContent({
+		element,
+		id,
+		label,
+		multiple,
+		select,
+		type,
+		attributes: listboxAttributes,
+		autocomplete: listboxAutoComplete,
+		listbox: true
+	});
+	const footer = createListboxFooter();
+	content.element.append(footer.container);
+	const { selected } = content.list.options;
+	const values = selected.length === 0 ? [""] : selected.map((option) => getData(option, "value", false) ?? "");
+	state.component = {
+		disabled,
+		footer,
+		id,
+		multiple,
+		readonly,
+		required,
+		select,
+		type,
+		active: selected[0],
+		attributes: listboxAttributes,
+		autocomplete: listboxAutoComplete,
+		callbacks: listboxCallbacks,
+		content: content.element,
+		elements: [element, content.filter.element],
+		filter: {
+			element: content.filter.element,
+			value: ""
+		},
+		host: element,
+		label: {
+			id: labelId,
+			element: label
+		},
+		list: content.list.element,
+		listeners: [],
+		listbox: true,
+		localizations: createLocalizations(listboxLocalizations),
+		message: content.message,
+		name: element.name,
+		options: content.list.options,
+		values: {
+			current: values.slice(),
+			initial: values.slice(),
+			label: content.value
+		}
+	};
+	return initializeOptionListState(state, listboxes, onAttachListbox);
+}
+function initializeListbox(element, state) {
+	createComponentState(element, state);
+	if (state.form.restored != null) {
+		setOptionListValues(state, state.form.restored);
+		state.form.restored = void 0;
+	}
+}
+function onAttachListbox(state) {
+	const { content, select } = state.component;
+	select.hidden = true;
+	select.insertAdjacentElement("afterend", content);
+	select.remove();
+}
+function onDetachListbox(state) {
+	const { content, select } = state.component;
+	content.insertAdjacentElement("beforebegin", select);
+	content.remove();
+	select.hidden = false;
+}
+const listboxAutoComplete = {
+	both: false,
+	inline: false,
+	list: false,
+	none: true
+};
+const listboxCallbacks = {
+	data: {
+		onApply: onListboxApply,
+		onFilter: onListboxFilter,
+		onForm: noop,
+		onPreview: noop,
+		onToggle: onListboxToggle
+	},
+	keydown: {
+		onEnter: onListboxEnter,
+		onNavigation: onListboxNavigation,
+		onToggle: onListboxToggle
+	}
+};
+const listboxLocalizations = createDefaultLocalizations({
+	clearSelection: "Clear",
+	empty: "No results found",
+	input: "",
+	invalid: "Please select an option from the list",
+	max: (max) => `Please select fewer options (maximum is ${max})`,
+	min: (min) => `Please select more options (minimum is ${min})`,
+	remove: "",
+	results: (amount) => `${amount} results available`,
+	selectAll: "Select all",
+	selected: (amount) => `${amount} selected`
+});
+const listboxes = /* @__PURE__ */ new Set();
+//#endregion
+export { onDetachListbox as a, onListboxApply as c, onListboxNavigation as d, onListboxToggle as f, onAttachListbox as i, onListboxEnter as l, updateListboxFooter as m, listboxLocalizations as n, getListboxId as o, createListboxFooter as p, listboxes as r, setListboxLocalizations as s, initializeListbox as t, onListboxFilter as u };

package/dist/js/menu/index.mjs

@@ -0,0 +1,171 @@
+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);
+		let firstElement;
+		for (const element of elements) {
+			firstElement ??= element;
+			menus.get(element)?.floatable.hide();
+		}
+		const menu = firstElement == null ? void 0 : menus.get(firstElement);
+		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 = menu.element.parentElement == null ? void 0 : 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-BqoR6iBv.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: Element;
+  element: Element;
+  floatable: OuiFloatable;
+  navigable: OuiNavigable;
+  toggle: Element;
+  get open(): boolean;
+  destroy(): void;
+};
+export type OuiMenubar = {
+  element: Element;
+  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<Element, OuiMenubar>;
+export declare const menus: WeakMap<Element, 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 };

package/dist/js/movable/movable.embedded.d.mts

@@ -1,2 +1,2 @@
-import { g as createMovable, h as OuiMovable, m as ATTRIBUTE_MOVABLE_HANDLE, p as ATTRIBUTE_MOVABLE } from "../draggable-B5-70SZm.mjs";
-export { ATTRIBUTE_MOVABLE, ATTRIBUTE_MOVABLE_HANDLE, OuiMovable, createMovable };
+import { t as createMovable } from "../movable.embedded-C1bDTLGs.mjs";
+export { createMovable };