@oscarpalmer/oui 0.35.0 → 0.37.0

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

@@ -0,0 +1,66 @@
+import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxType, l as OuiListboxState, n as OuiListboxAutoComplete, s as OuiListboxOptions, t as OuiListboxAttributes } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.dom.d.ts
+type CreateListboxContent = {
+  element: HTMLDivElement;
+  filter?: CreateListboxFilter;
+  list: CreateListboxList;
+  message: HTMLDivElement;
+  value: HTMLSpanElement;
+};
+type CreateListboxContentParameters = {
+  attributes: OuiListboxAttributes;
+  autocomplete: OuiListboxAutoComplete;
+  element: HTMLElement;
+  id: string;
+  label: HTMLLabelElement;
+  listbox: boolean;
+  multiple: boolean;
+  select: HTMLSelectElement;
+  type: OuiListboxType;
+};
+type CreateListboxFilter = {
+  container: HTMLElement;
+  element: HTMLInputElement;
+};
+type CreateListboxGroupParameters = {
+  group: HTMLOptGroupElement;
+  groupOptions: HTMLOptionElement[];
+  original: CreateListboxContentParameters;
+  selected: HTMLElement[];
+  type: OuiListboxType;
+};
+type CreateListboxList = {
+  element: HTMLUListElement;
+  groups?: OuiListboxGroup[];
+  options: OuiListboxOptions;
+};
+type CreateListboxOptionParameters = {
+  group?: string;
+  index: number;
+  option: HTMLOptionElement;
+  original: CreateListboxContentParameters;
+  type: OuiListboxType;
+};
+type CreateListboxOptionsParameters = {
+  group?: string;
+  list: HTMLElement;
+  options: HTMLOptionElement[];
+  original: CreateListboxContentParameters;
+  selected: HTMLElement[];
+  type: OuiListboxType;
+};
+declare function createListboxContent(parameters: CreateListboxContentParameters): CreateListboxContent;
+declare function createListboxFilter(parameters: CreateListboxContentParameters): CreateListboxFilter | undefined;
+declare function createListboxGroup(parameters: CreateListboxGroupParameters): OuiListboxGroup;
+declare function createListboxHeader(parameters: CreateListboxGroupParameters, group: HTMLOptGroupElement): HTMLElement;
+declare function createListboxInput(parameters: CreateListboxContentParameters, value: string): HTMLInputElement;
+declare function createListboxList(parameters: CreateListboxContentParameters): CreateListboxList;
+declare function createListboxMessage(attribute: string): HTMLDivElement;
+declare function createListboxOption(parameters: CreateListboxOptionParameters): HTMLElement;
+declare function createListboxOptions(parameters: CreateListboxOptionsParameters): HTMLElement[];
+declare function createListboxValueLabel(id: string): HTMLSpanElement;
+declare function updateListboxMessage(state: OuiListboxState): void;
+declare function updateListboxPreview<State extends OuiListboxState>(preview: OuiListboxPreview, state: State, active?: HTMLElement, scroll?: boolean): void;
+declare function updateListboxValueLabel<State extends OuiListboxState>(state: State): void;
+//#endregion
+export { CreateListboxContent, CreateListboxContentParameters, CreateListboxFilter, CreateListboxList, createListboxContent, createListboxFilter, createListboxGroup, createListboxHeader, createListboxInput, createListboxList, createListboxMessage, createListboxOption, createListboxOptions, createListboxValueLabel, updateListboxMessage, updateListboxPreview, updateListboxValueLabel };

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

@@ -0,0 +1,2 @@
+import { _ as createListboxValueLabel, b as updateListboxValueLabel, c as createListboxContent, d as createListboxHeader, f as createListboxInput, g as createListboxOptions, h as createListboxOption, l as createListboxFilter, m as createListboxMessage, p as createListboxList, u as createListboxGroup, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-BWd0PCy7.mjs";
+export { createListboxContent, createListboxFilter, createListboxGroup, createListboxHeader, createListboxInput, createListboxList, createListboxMessage, createListboxOption, createListboxOptions, createListboxValueLabel, updateListboxMessage, updateListboxPreview, updateListboxValueLabel };

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

@@ -0,0 +1,5 @@
+import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.event.d.ts
+declare function processListboxKeydown<State extends OuiListboxState>(event: KeyboardEvent, state: State): void;
+//#endregion
+export { processListboxKeydown };

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

@@ -0,0 +1,63 @@
+import { LISTBOX_KEYS } from "./listbox.constants.mjs";
+import { S as getListboxVisibleOptions } from "../../listbox.data-BWd0PCy7.mjs";
+import { clamp } from "@oscarpalmer/atoms/number";
+//#region src/js/internal/listbox/listbox.event.ts
+function processListboxKeydown(event, state) {
+	const ignore = state.disabled || state.readonly;
+	const isSelect = state.type === "select";
+	let preventDefault = ignore;
+	switch (true) {
+		case event.key === " ":
+			if (!state.disabled) state.callbacks.keydown.onActivation?.(state);
+			break;
+		case event.key === "Enter":
+			preventDefault = state.callbacks.keydown.preventActivation?.(state) ?? true;
+			if (preventDefault) state.callbacks.keydown.onEnter?.(state);
+			else if (!ignore && state.type === "select") state.callbacks.keydown.onActivation?.(state);
+			else if (!ignore) state.internals.form?.requestSubmit();
+			break;
+		case event.key === "Escape":
+			preventDefault = false;
+			state.callbacks.keydown.onEscape?.(state);
+			break;
+		case !isSelect && LISTBOX_KEYS.selection.has(event.key):
+			if (!ignore) state.callbacks.keydown.onSelection?.(state);
+			break;
+		case LISTBOX_KEYS.navigation.has(event.key):
+			if (!state.disabled) onNavigation(event, state);
+			break;
+		default:
+			preventDefault = false;
+			if (event.key === "Tab") state.callbacks.keydown.onTab?.(state);
+	}
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+function onNavigation(event, state) {
+	const skip = state.callbacks.keydown.skipNavigation?.(state) ?? false;
+	const visible = getListboxVisibleOptions(state);
+	if (visible.length === 0) return;
+	let next;
+	if (skip || state.active == null) next = state.active ?? visible.at(event.key === "ArrowDown" ? 0 : -1);
+	else {
+		const current = visible.findIndex((option) => option.id === state.active?.id);
+		let index;
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				index = clamp(current + (event.key === "ArrowDown" ? 1 : -1), 0, visible.length - 1, true);
+				break;
+			case "PageDown":
+			case "PageUp": index = clamp(current + (event.key === "PageDown" ? 10 : -10), 0, visible.length - 1);
+		}
+		if (index != null) next = visible[index];
+	}
+	let preview;
+	if (state.type === "autocomplete" && (state.autocomplete.both || state.autocomplete.inline)) preview = "set";
+	else preview = "none";
+	state.callbacks.keydown.onNavigation(preview, state, next ?? state.active ?? visible[0]);
+}
+//#endregion
+export { processListboxKeydown };

package/dist/js/internal/listbox/listbox.form.d.mts

@@ -0,0 +1,6 @@
+import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.form.d.ts
+declare function updateListboxForm<State extends OuiListboxState>(state: State, values: string[], emit?: boolean): void;
+declare function updateListboxValidity(state: OuiListboxState): void;
+//#endregion
+export { updateListboxForm, updateListboxValidity };

package/dist/js/internal/listbox/listbox.form.mjs

@@ -0,0 +1,52 @@
+import { getLocalization, localize } from "../../l10n.mjs";
+import { dispatch } from "@oscarpalmer/toretto/event";
+//#region src/js/internal/listbox/listbox.form.ts
+function updateListboxForm(state, values, emit) {
+	let value;
+	if (state.multiple) {
+		const { length } = values;
+		value = new FormData();
+		for (let index = 0; index < length; index += 1) value.append(state.name, values[index]);
+	} else value = values[0];
+	state.values.current = values;
+	state.internals.setFormValue(value, JSON.stringify(values));
+	state.callbacks.data.onForm(state);
+	updateListboxValidity(state);
+	if (emit ?? true) dispatch(state.host, "oui:change");
+}
+function updateListboxValidity(state) {
+	if (state.autocomplete.none && !state.listbox) {
+		const valueMissing = state.required && state.filter.element.value.length === 0;
+		const localization = getLocalization(state.localizations.global, state.host, "invalid", state.localizations.component);
+		state.internals.setValidity({ valueMissing }, localize(localization, {}, []));
+		state.internals.checkValidity();
+		return;
+	}
+	let data = {};
+	let error;
+	let key;
+	let parameters = [];
+	switch (true) {
+		case state.required && state.options.selected.length === 0:
+			error = "badInput";
+			key = "input";
+			break;
+		case state.multiple && typeof state.max === "number" && state.options.selected.length > state.max:
+			data = { amount: state.max };
+			error = "rangeOverflow";
+			key = "max";
+			parameters = [state.max];
+			break;
+		case state.multiple && typeof state.min === "number" && state.options.selected.length < state.min:
+			data = { amount: state.min };
+			error = "rangeUnderflow";
+			key = "min";
+			parameters = [state.min];
+	}
+	const localization = key == null ? void 0 : getLocalization(state.localizations.global, state.host, key, state.localizations.component);
+	const message = localization == null ? void 0 : localize(localization, data, parameters);
+	state.internals.setValidity(error == null ? {} : { [error]: true }, message);
+	state.internals.checkValidity();
+}
+//#endregion
+export { updateListboxForm, updateListboxValidity };

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

@@ -0,0 +1,12 @@
+import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.misc.d.ts
+declare function generateListboxIds(prefix: string, select: HTMLSelectElement): void;
+declare function getListboxVisibleOptions(state: OuiListboxState): HTMLElement[];
+declare function setListboxDisabled<State extends OuiListboxState>(state: State, value: boolean): void;
+declare function setListboxFilter<State extends OuiListboxState>(state: State, value: unknown): void;
+declare function setListboxLimit<State extends OuiListboxState>(type: 'max' | 'min', state: State, value?: unknown): void;
+declare function setListboxMultiple(element: HTMLElement, value: boolean): void;
+declare function setListboxReadonly<State extends OuiListboxState>(state: State, value: boolean): void;
+declare function setListboxRequired<State extends OuiListboxState>(state: State, value: boolean): void;
+//#endregion
+export { generateListboxIds, getListboxVisibleOptions, setListboxDisabled, setListboxFilter, setListboxLimit, setListboxMultiple, setListboxReadonly, setListboxRequired };

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

@@ -0,0 +1,2 @@
+import { C as setListboxDisabled, D as setListboxReadonly, E as setListboxMultiple, O as setListboxRequired, S as getListboxVisibleOptions, T as setListboxLimit, w as setListboxFilter, x as generateListboxIds } from "../../listbox.data-BWd0PCy7.mjs";
+export { generateListboxIds, getListboxVisibleOptions, setListboxDisabled, setListboxFilter, setListboxLimit, setListboxMultiple, setListboxReadonly, setListboxRequired };

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

@@ -0,0 +1,2 @@
+import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxType, i as OuiListboxCallbacks, l as OuiListboxState, n as OuiListboxAutoComplete, o as OuiListboxLocalizations, r as OuiListboxAutoCompleteType, s as OuiListboxOptions, t as OuiListboxAttributes, u as OuiListboxStates } from "../../listbox.model-CRReGOmu.mjs";
+export { OuiListboxAttributes, OuiListboxAutoComplete, OuiListboxAutoCompleteType, OuiListboxCallbacks, OuiListboxGroup, OuiListboxLocalizations, OuiListboxOptions, OuiListboxPreview, OuiListboxState, OuiListboxStates, OuiListboxType };

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

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

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

@@ -0,0 +1,7 @@
+import { l as OuiListboxState, u as OuiListboxStates } from "../../listbox.model-CRReGOmu.mjs";
+//#region src/js/internal/listbox/listbox.state.d.ts
+declare function attachListbox<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onAttach: (state: State) => void): void;
+declare function detachListbox<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onDetach: (state: State) => void): void;
+declare function initializeListboxState<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onAttach: (state: State) => void): State;
+//#endregion
+export { attachListbox, detachListbox, initializeListboxState };

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

@@ -0,0 +1,40 @@
+import { updateListboxForm } from "./listbox.form.mjs";
+import { C as setListboxDisabled, D as setListboxReadonly, E as setListboxMultiple, O as setListboxRequired, T as setListboxLimit, b as updateListboxValueLabel, i as filterListboxOptions, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-BWd0PCy7.mjs";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+//#region src/js/internal/listbox/listbox.state.ts
+function attachListbox(state, states, onAttach) {
+	const { filter, host, label } = state;
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${state.id}_label`;
+	onAttach(state);
+	states.map.set(host, state);
+	states.set.add(state);
+}
+function detachListbox(state, states, onDetach) {
+	const { host, label, select } = state;
+	const listeners = state.listeners.splice(0);
+	const { length } = listeners;
+	for (let index = 0; index < length; index += 1) listeners[index]();
+	label.element.htmlFor = select.id;
+	label.element.id = label.id;
+	onDetach(state);
+	states.map.delete(host);
+	states.set.delete(state);
+}
+function initializeListboxState(state, states, onAttach) {
+	attachListbox(state, states, onAttach);
+	setListboxDisabled(state, state.disabled);
+	setListboxLimit("max", state, getAttribute(state.host, "max"));
+	setListboxLimit("min", state, getAttribute(state.host, "min"));
+	setListboxMultiple(state.host, state.multiple);
+	setListboxReadonly(state, state.readonly);
+	setListboxRequired(state, state.required);
+	filterListboxOptions(state);
+	updateListboxForm(state, state.values.current, false);
+	updateListboxMessage(state);
+	updateListboxValueLabel(state);
+	if (state.options.selected.length > 0) updateListboxPreview("none", state, state.options.selected[0], false);
+	return state;
+}
+//#endregion
+export { attachListbox, detachListbox, initializeListboxState };

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

@@ -0,0 +1,6 @@
+import { AnyAriaBooleanAttribute } from "@oscarpalmer/toretto/models";
+//#region src/js/internal/misc.d.ts
+declare function getAttributeValue<Value>(element: HTMLElement, attribute: string, possible: Set<Value>, defaultValue: Value): Value;
+declare function getBooleanAriaValue(element: HTMLElement, attribute: AnyAriaBooleanAttribute): boolean;
+//#endregion
+export { getAttributeValue, getBooleanAriaValue };

package/dist/js/internal/misc.mjs

@@ -0,0 +1,13 @@
+import { getAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+//#region src/js/internal/misc.ts
+function getAttributeValue(element, attribute, possible, defaultValue) {
+	const value = getAttribute(element, attribute);
+	return possible.has(value) ? value : defaultValue;
+}
+function getBooleanAriaValue(element, attribute) {
+	const value = getAria(element, attribute);
+	return value === true || value === "true";
+}
+//#endregion
+export { getAttributeValue, getBooleanAriaValue };

package/dist/js/internal/navigable.d.mts

@@ -8,24 +8,30 @@ declare class OuiNavigable {
   orientation: OuiNavigableOrientation;
   constructor(element: HTMLElement, options: OuiNavigableOptions);
   destroy(): void;
+  navigate(index: number, focus?: boolean): void;
 }
 type OuiNavigableActive = {
   element?: HTMLElement;
   index: number;
 };
+type OuiNavigableCallback<ReturnType> = (event: KeyboardEvent, navigable: OuiNavigable) => ReturnType;
 type OuiNavigableOptions = {
+  orientation?: OuiNavigableOrientation;
   role?: AriaRole;
   selector: string;
   vertical: boolean;
-  onDeactivate?: (event: KeyboardEvent, navigable: OuiNavigable) => void;
-  onPreventNavigation?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean;
-  onShouldActivate?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean;
-  onShouldDeactivate?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean | undefined;
+  onActivate?: (navigable: OuiNavigable) => void;
+  onDeactivate?: OuiNavigableCallback<void>;
+  onNavigation?: (navigable: OuiNavigable) => void;
+  onPreventNavigation?: OuiNavigableCallback<boolean>;
+  onShouldActivate?: OuiNavigableCallback<boolean>;
+  onShouldDeactivate?: OuiNavigableCallback<boolean | undefined>;
 };
 type OuiNavigableOrientation = 'horizontal' | 'vertical';
 declare function getNavigable(element: HTMLElement, options: OuiNavigableOptions): OuiNavigable;
+declare function getNavigableOrientation(element: HTMLElement, vertical: boolean, aria?: boolean): OuiNavigableOrientation;
 declare function updateNavigableFocus(navigable: OuiNavigable, focus: boolean, items?: HTMLElement[]): void;
 declare const NAVIGABLE_KEYS_HORIZONTAL: Set<string>;
 declare const NAVIGABLE_KEYS_VERTICAL: Set<string>;
 //#endregion
-export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, OuiNavigableOptions, getNavigable, updateNavigableFocus };
+export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, OuiNavigableOptions, OuiNavigableOrientation, getNavigable, getNavigableOrientation, updateNavigableFocus };

package/dist/js/internal/navigable.mjs

@@ -1,5 +1,6 @@
-import { getAria, setRole } from "@oscarpalmer/toretto/aria";
-import { dispatch, on } from "@oscarpalmer/toretto/event";
+import { getAria, setAria, setRole } from "@oscarpalmer/toretto/aria";
+import { on } from "@oscarpalmer/toretto/event";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
@@ -13,12 +14,19 @@ var OuiNavigable = class {
 	constructor(element, options) {
 		this.element = element;
 		this.options = options;
-		this.listeners = [on(element, "focusin", (event) => {
-			onFocusin(this, event);
-		}), on(element, "keydown", (event) => {
-			onKeydown(this, event);
-		}, { passive: false })];
-		this.orientation = getOrientation(element, options);
+		this.listeners = [
+			on(element, "click", (event) => {
+				onClick(this, event);
+			}, { passive: false }),
+			on(element, "focusin", (event) => {
+				onFocusin(this, event);
+			}),
+			on(element, "keydown", (event) => {
+				onKeydown(this, event);
+			}, { passive: false })
+		];
+		this.orientation = options?.orientation ?? getNavigableOrientation(element, options.vertical);
+		setAria(element, "orientation", this.orientation);
 		if (options.role != null) setRole(element, options.role);
 	}
 	destroy() {
@@ -27,6 +35,10 @@ var OuiNavigable = class {
 		this.active.element = void 0;
 		this.element = void 0;
 	}
+	navigate(index, focus) {
+		const items = getItems(this.element, this.options.selector);
+		if (index >= 0 && index < items.length) onNavigate(this, index, items, focus ?? false);
+	}
 };
 function getItems(container, selector) {
 	return [...container.querySelectorAll(selector)].filter(isValidItem);
@@ -34,13 +46,28 @@ function getItems(container, selector) {
 function getNavigable(element, options) {
 	return new OuiNavigable(element, options);
 }
-function getOrientation(element, options) {
-	const attribute = getAria(element, "orientation");
-	return ORIENTATIONS.has(attribute) ? attribute : options.vertical ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
+function getNavigableOrientation(element, vertical, aria) {
+	const attribute = aria ?? true ? getAria(element, "orientation") : getAttribute(element, "orientation");
+	return ORIENTATIONS.has(attribute) ? attribute : vertical ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
 }
 function isValidItem(element) {
 	return "disabled" in element ? element.disabled !== true : true;
 }
+function onClick(navigable, event) {
+	const item = findAncestor(event, navigable.options.selector);
+	const items = getItems(navigable.element, navigable.options.selector);
+	const index = items.indexOf(item);
+	if (index === -1) return;
+	if (index !== navigable.active.index) onNavigate(navigable, index, items, false);
+	navigable.options.onActivate?.(navigable);
+	item.focus();
+}
+function onNavigate(navigable, index, items, focus) {
+	navigable.active.element = items[index];
+	navigable.active.index = index;
+	updateNavigableFocus(navigable, focus, items);
+	navigable.options.onNavigation?.(navigable);
+}
 function onFocusin(navigable, event) {
 	const item = findAncestor(event, navigable.options.selector);
 	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
@@ -63,7 +90,10 @@ function onKeydown(navigable, event) {
 	const mustActivate = KEYS_ACTIVATE.has(event.key);
 	const shouldActivate = navigable.options.onShouldActivate?.(event, navigable) === true;
 	if (mustActivate || shouldActivate || navigable.options.onPreventNavigation?.(event, navigable) === true) event.stopPropagation();
-	if (mustActivate || shouldActivate) return;
+	if (mustActivate || shouldActivate) {
+		navigable.options.onActivate?.(navigable);
+		return;
+	}
 	const items = getItems(navigable.element, navigable.options.selector);
 	const { length } = items;
 	if (length === 0) return;
@@ -76,10 +106,7 @@ function onKeydown(navigable, event) {
 			index = clamp(navigable.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1), 0, length - 1, true);
 		}
 	}
-	if (index == null || index === navigable.active.index) return;
-	navigable.active.element = items[index];
-	navigable.active.index = index;
-	updateNavigableFocus(navigable, true, items);
+	if (index != null && index !== navigable.active.index) onNavigate(navigable, index, items, true);
 }
 function updateNavigableFocus(navigable, focus, items) {
 	const updated = items ?? getItems(navigable.element, navigable.options.selector);
@@ -88,7 +115,6 @@ function updateNavigableFocus(navigable, focus, items) {
 	for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === navigable.active.index ? 0 : -1;
 	navigable.active.element ??= updated[navigable.active.index];
 	if (focus) navigable.active.element?.focus();
-	dispatch(navigable.active.element, "navigable:change", { detail: { ...navigable.active } });
 }
 const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
 const KEYS_ACTIVATE = /* @__PURE__ */ new Set(["Enter", " "]);
@@ -105,4 +131,4 @@ const ORIENTATION_HORIZONTAL = "horizontal";
 const ORIENTATION_VERTICAL = "vertical";
 const ORIENTATIONS = /* @__PURE__ */ new Set([ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL]);
 //#endregion
-export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, getNavigable, updateNavigableFocus };
+export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, getNavigable, getNavigableOrientation, updateNavigableFocus };

package/dist/js/l10n-Bn-7RcwR.d.mts

@@ -0,0 +1,20 @@
+import { GenericCallback } from "@oscarpalmer/atoms/models";
+//#region src/js/l10n.d.ts
+type LocalizationParameters<Localization> = Localization extends GenericCallback ? Parameters<Localization> : never;
+declare class OuiLocalizations<Localizations extends OuiLocalizationsValues> {
+  readonly defaults: Localizations;
+  readonly keys: Set<keyof Localizations>;
+  readonly values: Record<string, Partial<Localizations>>;
+  constructor(defaults: Localizations);
+  get<Key extends keyof Localizations>(element: Element, key: Key, localizations: Record<string, Partial<Localizations>>): string | GenericCallback;
+  set(language: string, localizations: Partial<Localizations>): void;
+  set(localizations: Record<string, Partial<Localizations>>): void;
+}
+type OuiLocalizationsValues = Record<string, string | GenericCallback>;
+declare function getLanguage(element: Element): string;
+declare function getLocalization<Localizations extends OuiLocalizationsValues, Key extends keyof Localizations>(localizations: OuiLocalizations<Localizations>, element: Element, key: Key, value: Record<string, Partial<Localizations>>): Localizations[Key] | GenericCallback;
+declare function getLocalizations<Localizations extends OuiLocalizationsValues>(defaults: Localizations): OuiLocalizations<Localizations>;
+declare function localize<Localizations extends OuiLocalizationsValues, Key extends keyof Localizations, Localization extends Localizations[Key]>(localization: Localization, data: Record<string, unknown>, parameters: LocalizationParameters<Localization>): string;
+declare function updateLocalizations<Localizations extends OuiLocalizationsValues>(instance: OuiLocalizations<Localizations>, values: Record<string, Partial<Localizations>>, destination: Record<string, Partial<Localizations>>, onAfter?: () => void): void;
+//#endregion
+export { getLocalizations as a, getLocalization as i, OuiLocalizationsValues as n, localize as o, getLanguage as r, updateLocalizations as s, OuiLocalizations as t };

package/dist/js/l10n.d.mts

@@ -1,20 +1,2 @@
-import { GenericCallback } from "@oscarpalmer/atoms/models";
-//#region src/js/l10n.d.ts
-type LocalizationParameters<Localization> = Localization extends GenericCallback ? Parameters<Localization> : never;
-type OuiLocalizationValues = Record<string, string | GenericCallback>;
-declare class OuiLocalizations<Localizations extends OuiLocalizationValues> {
-  readonly defaults: Localizations;
-  readonly keys: Set<keyof Localizations>;
-  readonly values: Record<string, Partial<Localizations>>;
-  constructor(defaults: Localizations);
-  get<Key extends keyof Localizations>(element: Element, key: Key, localizations: Record<string, Partial<Localizations>>): string | GenericCallback;
-  set(language: string, localizations: Partial<Localizations>): void;
-  set(localizations: Record<string, Partial<Localizations>>): void;
-}
-declare function getLanguage(element: Element): string;
-declare function getLocalization<Localizations extends OuiLocalizationValues, Key extends keyof Localizations>(localizations: OuiLocalizations<Localizations>, element: Element, key: Key, value: Record<string, Partial<Localizations>>): Localizations[Key] | GenericCallback;
-declare function getLocalizations<Localizations extends OuiLocalizationValues>(defaults: Localizations): OuiLocalizations<Localizations>;
-declare function localize<Localizations extends OuiLocalizationValues, Key extends keyof Localizations, Localization extends Localizations[Key]>(localization: Localization, data: Record<string, unknown>, parameters: LocalizationParameters<Localization>): string;
-declare function updateLocalizations<Localizations extends OuiLocalizationValues>(instance: OuiLocalizations<Localizations>, values: Record<string, Partial<Localizations>>, destination?: Record<string, Partial<Localizations>>, onAfter?: () => void): void;
-//#endregion
-export { OuiLocalizations, getLanguage, getLocalization, getLocalizations, localize, updateLocalizations };
+import { a as getLocalizations, i as getLocalization, n as OuiLocalizationsValues, o as localize, r as getLanguage, s as updateLocalizations, t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
+export { OuiLocalizations, OuiLocalizationsValues, getLanguage, getLocalization, getLocalizations, localize, updateLocalizations };

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

@@ -0,0 +1,2 @@
+import { i as LISTBOX_TAGNAME, n as LISTBOX_MESSAGES, r as LISTBOX_SELECTORS, t as LISTBOX_ATTRIBUTES } from "../constants.listbox-DRsXUxd3.mjs";
+export { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME };

package/dist/js/listbox/constants.listbox.mjs

@@ -0,0 +1,40 @@
+//#region src/js/listbox/constants.listbox.ts
+const LISTBOX_TAGNAME = "oui-listbox";
+const attributeContent = `${LISTBOX_TAGNAME}-content`;
+const attributeFilter = `${LISTBOX_TAGNAME}-filter`;
+const attributeFilterInput = `${attributeFilter}-input`;
+const attributeGroup = `${LISTBOX_TAGNAME}-group`;
+const attributeHeader = `${LISTBOX_TAGNAME}-header`;
+const attributeHidden = `${LISTBOX_TAGNAME}-hidden`;
+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,
+	content: attributeContent,
+	empty: attributeListEmpty,
+	filter: attributeFilter,
+	group: attributeGroup,
+	header: attributeHeader,
+	hidden: attributeHidden,
+	input: attributeFilterInput,
+	list: attributeList,
+	message: attributeMessage,
+	option: attributeOption
+};
+const LISTBOX_MESSAGES = {
+	label: messageLabel,
+	select: messageSelect
+};
+const LISTBOX_SELECTORS = {
+	filter: selectorFilter,
+	option: selectorOption
+};
+//#endregion
+export { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME };

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

@@ -0,0 +1,8 @@
+import { c as OuiListboxPreview, l as OuiListboxState } from "../listbox.model-CRReGOmu.mjs";
+//#region src/js/listbox/event.listbox.d.ts
+declare function onListboxEnter(state: OuiListboxState): void;
+declare function onListboxFilter(preview: OuiListboxPreview, state: OuiListboxState, _: boolean, active?: HTMLElement): void;
+declare function onListboxNavigation(preview: OuiListboxPreview, state: OuiListboxState, active?: HTMLElement): void;
+declare function onListboxToggle(state: OuiListboxState): void;
+//#endregion
+export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };

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

@@ -0,0 +1,2 @@
+import { d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../misc.listbox-BI-XsTOf.mjs";
+export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };