@oscarpalmer/oui 0.40.0 → 0.41.0

package/dist/js/l10n.model-D1E1u35L.d.mts

@@ -0,0 +1,54 @@
+import { GenericCallback } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/l10n/l10n.model.d.ts
+type OuiDefaultLocalizations<Localizations extends OuiLocalizationsValues> = {
+  [L10N_SYMBOL]: OuiDefaultLocalizationsState<Localizations>;
+  get keys(): Array<keyof Localizations>;
+  get values(): OuiDefaultLocalizationsValues<Localizations>;
+  localize<Key extends keyof Localizations>(key: Key, parameters?: OuiLocalizationsParameters<Localizations[Key]>): string;
+  setDefaults(values: Partial<Localizations>): Promise<boolean>;
+  setLanguages(language: string, localizations: Partial<Localizations>): Promise<boolean>;
+  setLanguages(localizations: Record<string, Partial<Localizations>>): Promise<boolean>;
+};
+type OuiDefaultLocalizationsState<Localizations extends OuiLocalizationsValues> = {
+  defaults: Localizations;
+  keys: Set<keyof Localizations>;
+  type: typeof L10N_TYPE_DEFAULT;
+  values: Record<string, Partial<Localizations>>;
+};
+type OuiDefaultLocalizationsValues<Localizations extends OuiLocalizationsValues> = {
+  defaults: Localizations;
+  languages: Record<string, Partial<Localizations>>;
+};
+type OuiLocalizationsCallback<Localization> = Extract<Localization, GenericCallback>;
+type OuiLocalizationsParameters<Localization> = ([OuiLocalizationsCallback<Localization>] extends [never] ? {} : {
+  arguments: Parameters<OuiLocalizationsCallback<Localization>>;
+}) & {
+  element?: Element;
+  language?: string;
+};
+type OuiLocalizations<Localizations extends OuiLocalizationsValues> = {
+  [L10N_SYMBOL]: OuiLocalizationsState<Localizations>;
+  get defaults(): OuiDefaultLocalizations<Localizations>;
+  localize<Key extends keyof Localizations>(key: Key, parameters?: OuiLocalizationsParameters<Localizations[Key]>): string;
+  set(language: string, localizations: Partial<Localizations>): Promise<boolean>;
+  set(localizations: Record<string, Partial<Localizations>>): Promise<boolean>;
+};
+type OuiLocalizationsState<Localizations extends OuiLocalizationsValues> = {
+  defaults: OuiDefaultLocalizations<Localizations>;
+  keys: Set<keyof Localizations>;
+  type: typeof L10N_TYPE_INSTANCE;
+  values: Record<string, Partial<Localizations>>;
+};
+type OuiLocalizationsType = "default" | "instance";
+type OuiLocalizationsValues = Record<string, string | GenericCallback>;
+declare const L10N_MESSAGE_DEFAULT = "Default localizations must be an instance of OuiDefaultLocalizations.";
+declare const L10N_MESSAGE_ITEM_CREATE = "Localization item must be a string or a function.";
+declare const L10N_MESSAGE_ITEM_UPDATE_KEY = "Localization item key must be known.";
+declare const L10N_MESSAGE_ITEM_UPDATE_VALUE = "Localization item value must be a string or a function.";
+declare const L10N_MESSAGE_OBJECT_CREATE = "Default localizations must be a non-empty plain object.";
+declare const L10N_MESSAGE_OBJECT_UPDATE = "Localizations update object must be a plain object.";
+declare const L10N_TYPE_DEFAULT: OuiLocalizationsType;
+declare const L10N_TYPE_INSTANCE: OuiLocalizationsType;
+declare const L10N_SYMBOL: unique symbol;
+//#endregion
+export { OuiLocalizationsValues as _, L10N_MESSAGE_OBJECT_CREATE as a, L10N_TYPE_DEFAULT as c, OuiDefaultLocalizationsState as d, OuiDefaultLocalizationsValues as f, OuiLocalizationsType as g, OuiLocalizationsState as h, L10N_MESSAGE_ITEM_UPDATE_VALUE as i, L10N_TYPE_INSTANCE as l, OuiLocalizationsParameters as m, L10N_MESSAGE_ITEM_CREATE as n, L10N_MESSAGE_OBJECT_UPDATE as o, OuiLocalizations as p, L10N_MESSAGE_ITEM_UPDATE_KEY as r, L10N_SYMBOL as s, L10N_MESSAGE_DEFAULT as t, OuiDefaultLocalizations as u };

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

@@ -1,6 +1,7 @@
-import { l as OuiListboxState, o as OuiListboxLocalizations } from "../listbox.model-CuBOj4qe.mjs";
-import { n as LISTBOX_TAGNAME, t as LISTBOX_SYMBOL } from "../constants.listbox-C5Ap6Ag_.mjs";
-import { n as setListboxLocalizations } from "../misc.listbox-CtoGvXQo.mjs";
+import { p as OuiLocalizations } from "../l10n.model-D1E1u35L.mjs";
+import { n as LISTBOX_TAGNAME, t as LISTBOX_SYMBOL } from "../listbox.constants-DOBMwKup.mjs";
+import { n as OuiListboxLocalizations, r as OuiListboxState } from "../listbox.model-C0MYWXZe.mjs";
+import { n as setListboxLocalizations } from "../listbox.misc-DwfB4Mu_.mjs";
 //#region src/js/listbox/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
@@ -37,6 +38,7 @@ export declare class OuiListboxElement extends HTMLElement {
    * Label elements associated with the listbox
    */
   get labels(): NodeList;
+  get localizations(): OuiLocalizations<OuiListboxLocalizations>;
   /**
    * Maximum number of selected options
    */
@@ -80,7 +82,7 @@ export declare class OuiListboxElement extends HTMLElement {
   /**
    * Selected options
    */
-  get selected(): HTMLElement[];
+  get selected(): Element[];
   /**
    * Validation message for the listbox
    */
@@ -138,19 +140,6 @@ export declare class OuiListboxElement extends HTMLElement {
    * @param message Validation message
    */
   setCustomValidity(message: string): void;
-  /**
-   * Set listbox localizations for a specific language
-   *
-   * @param language Language code
-   * @param localizations Localizations for language
-   */
-  setLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
-  /**
-   * Set listbox localizations for one or more languages
-   *
-   * @param localizations Localizations for one or more languages
-   */
-  setLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
 }
 //#endregion
 export { setListboxLocalizations };

package/dist/js/listbox/index.mjs

@@ -1,7 +1,7 @@
-import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-BQyZGKgr.mjs";
-import { attachListbox, detachListbox } from "../internal/listbox/listbox.state.mjs";
-import { LISTBOX_SYMBOL, LISTBOX_TAGNAME } from "./constants.listbox.mjs";
-import { c as onDetachListbox, i as initializeListbox, n as setListboxLocalizations, o as listboxes, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-CjfBUbHD.mjs";
+import { C as setOptionListDisabled, D as setOptionListReadonly, O as setOptionListRequired, T as setOptionListLimit, a as setOptionListValue, o as setOptionListValues, w as setOptionListFilter } from "../option-list.data-CgMyUwPc.mjs";
+import { attachOptionList, detachOptionList } from "../internal/option-list/option-list.state.mjs";
+import { LISTBOX_SYMBOL, LISTBOX_TAGNAME } from "./listbox.constants.mjs";
+import { a as onDetachListbox, i as onAttachListbox, r as listboxes, s as setListboxLocalizations, t as initializeListbox } from "../listbox.state-BrN296BM.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/listbox/index.ts
@@ -23,7 +23,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* Should the listbox be disabled?
 	*/
 	set disabled(value) {
-		if (typeof value === "boolean" && value !== this.disabled) setListboxDisabled(this[LISTBOX_SYMBOL], value);
+		if (typeof value === "boolean" && value !== this.disabled) setOptionListDisabled(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Current filter value
@@ -35,7 +35,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* Set the filter value
 	*/
 	set filter(value) {
-		setListboxFilter(this[LISTBOX_SYMBOL], value);
+		setOptionListFilter(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Form element associated with the listbox
@@ -49,6 +49,9 @@ var OuiListboxElement = class extends HTMLElement {
 	get labels() {
 		return this[LISTBOX_SYMBOL].form.internals.labels;
 	}
+	get localizations() {
+		return this[LISTBOX_SYMBOL].component?.localizations;
+	}
 	/**
 	* Maximum number of selected options
 	*/
@@ -59,7 +62,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* Set the maximum number of selected options
 	*/
 	set max(value) {
-		setListboxLimit("max", this[LISTBOX_SYMBOL], value);
+		setOptionListLimit("max", this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Minimum number of selected options
@@ -71,7 +74,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* Set the minimum number of selected options
 	*/
 	set min(value) {
-		setListboxLimit("min", this[LISTBOX_SYMBOL], value);
+		setOptionListLimit("min", this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Does the listbox allow multiple values?
@@ -95,7 +98,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* Should the listbox be readonly?
 	*/
 	set readonly(value) {
-		if (typeof value === "boolean" && value !== this.readonly) setListboxReadonly(this[LISTBOX_SYMBOL], value);
+		if (typeof value === "boolean" && value !== this.readonly) setOptionListReadonly(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Is the listbox required?
@@ -107,7 +110,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* Should the listbox be required?
 	*/
 	set required(value) {
-		if (typeof value === "boolean" && value !== this.required) setListboxRequired(this[LISTBOX_SYMBOL], value);
+		if (typeof value === "boolean" && value !== this.required) setOptionListRequired(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Selected options
@@ -137,7 +140,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* Set the value
 	*/
 	set value(value) {
-		setListboxValue(this[LISTBOX_SYMBOL], value);
+		setOptionListValue(this[LISTBOX_SYMBOL], value);
 	}
 	/**
 	* Current values
@@ -149,7 +152,7 @@ var OuiListboxElement = class extends HTMLElement {
 	* Set the values
 	*/
 	set values(values) {
-		setListboxValues(this[LISTBOX_SYMBOL], values);
+		setOptionListValues(this[LISTBOX_SYMBOL], values);
 	}
 	/**
 	* Can the listbox be validated?
@@ -160,7 +163,7 @@ var OuiListboxElement = class extends HTMLElement {
 	constructor() {
 		super();
 		this[LISTBOX_SYMBOL] = {
-			component: null,
+			component: void 0,
 			form: { internals: this.attachInternals() }
 		};
 	}
@@ -173,7 +176,7 @@ var OuiListboxElement = class extends HTMLElement {
 				break;
 			case "max":
 			case "min":
-				setListboxLimit(name, state, value);
+				setOptionListLimit(name, state, value);
 				break;
 			case "value": this.value = value ?? "";
 		}
@@ -190,30 +193,30 @@ var OuiListboxElement = class extends HTMLElement {
 	* Clear all selected options
 	*/
 	clear() {
-		setListboxValues(this[LISTBOX_SYMBOL], []);
+		setOptionListValues(this[LISTBOX_SYMBOL], []);
 	}
 	connectedCallback() {
 		const state = this[LISTBOX_SYMBOL];
 		if (state.component == null) initializeListbox(this, state);
-		else attachListbox(state, listboxes, onAttachListbox);
+		else attachOptionList(state, listboxes, onAttachListbox);
 	}
 	disconnectedCallback() {
 		const state = this[LISTBOX_SYMBOL];
-		if (state.component != null) detachListbox(state, listboxes, onDetachListbox);
+		if (state.component != null) detachOptionList(state, listboxes, onDetachListbox);
 	}
 	formDisabledCallback(disabled) {
 		this.disabled = disabled;
 	}
 	formResetCallback() {
 		const state = this[LISTBOX_SYMBOL];
-		setListboxValues(state, state.component.values.initial);
+		setOptionListValues(state, state.component.values.initial);
 	}
 	formStateRestoreCallback(state, reason) {
 		if (reason !== "restore") return;
 		const parsed = typeof state === "string" ? parse(state) : void 0;
 		if (!Array.isArray(parsed)) return;
 		if (this[LISTBOX_SYMBOL]?.component == null) this[LISTBOX_SYMBOL].form.restored = parsed;
-		else setListboxValues(this[LISTBOX_SYMBOL], parsed);
+		else setOptionListValues(this[LISTBOX_SYMBOL], parsed);
 	}
 	/**
 	* Check if the listbox is valid and report any validation errors
@@ -231,10 +234,6 @@ var OuiListboxElement = class extends HTMLElement {
 	setCustomValidity(message) {
 		this[LISTBOX_SYMBOL].form.internals.setValidity({ customError: message !== "" }, message, this);
 	}
-	setLocalizations(first, second) {
-		const { localizations } = this[LISTBOX_SYMBOL].component;
-		updateListboxLocalizations(localizations.global, localizations.component, first, second);
-	}
 };
 customElements.define(LISTBOX_TAGNAME, OuiListboxElement);
 //#endregion

package/dist/js/listbox/{constants.listbox.d.mts → listbox.constants.d.mts}

@@ -1,2 +1,2 @@
-import { a as listboxSelectors, i as listboxMessages, n as LISTBOX_TAGNAME, r as listboxAttributes, t as LISTBOX_SYMBOL } from "../constants.listbox-C5Ap6Ag_.mjs";
+import { a as listboxSelectors, i as listboxMessages, n as LISTBOX_TAGNAME, r as listboxAttributes, t as LISTBOX_SYMBOL } from "../listbox.constants-DOBMwKup.mjs";
 export { LISTBOX_SYMBOL, LISTBOX_TAGNAME, listboxAttributes, listboxMessages, listboxSelectors };

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

@@ -1,4 +1,4 @@
-//#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`;

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/{constants.listbox-C5Ap6Ag_.d.mts → listbox.constants-DOBMwKup.d.mts}

@@ -1,8 +1,8 @@
-import { t as OuiListboxAttributes } from "./listbox.model-CuBOj4qe.mjs";
-//#region src/js/listbox/constants.listbox.d.ts
+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: OuiListboxAttributes;
+declare const listboxAttributes: OptionListAttributes;
 declare const listboxMessages: Record<string, string>;
 declare const listboxSelectors: Record<string, string>;
 //#endregion

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

@@ -23,8 +23,12 @@ function OuiMenu(element, navigable) {
 		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]);
+		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";
@@ -116,7 +120,7 @@ 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);
+	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);