@oscarpalmer/oui 0.40.0 → 0.41.0

package/dist/js/internal/l10n/index.mjs

@@ -0,0 +1,147 @@
+import { L10N_MESSAGE_DEFAULT, L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL, L10N_TYPE_DEFAULT, L10N_TYPE_INSTANCE } from "./l10n.model.mjs";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+//#region src/js/internal/l10n/index.ts
+function OuiDefaultLocalizations(values) {
+	this[L10N_SYMBOL] = {
+		defaults: values,
+		keys: new Set(Object.keys(values)),
+		type: L10N_TYPE_DEFAULT,
+		values: {}
+	};
+}
+OuiDefaultLocalizations.prototype.localize = localizeDefault;
+OuiDefaultLocalizations.prototype.setDefaults = setDefaultLocalizations;
+OuiDefaultLocalizations.prototype.setLanguages = setLocalizations;
+Object.defineProperties(OuiDefaultLocalizations.prototype, {
+	keys: {
+		enumerable: true,
+		get: getKeys
+	},
+	values: {
+		enumerable: true,
+		get: getValues
+	}
+});
+function OuiLocalizations(defaults) {
+	this[L10N_SYMBOL] = {
+		defaults,
+		keys: new Set(defaults.keys),
+		values: {},
+		type: L10N_TYPE_INSTANCE
+	};
+}
+OuiLocalizations.prototype.localize = localizeWithLanguage;
+OuiLocalizations.prototype.set = setLocalizations;
+Object.defineProperties(OuiLocalizations.prototype, { defaults: {
+	enumerable: true,
+	get: getDefaults
+} });
+function createDefaultLocalizations(values) {
+	validateDefaultValues(values);
+	return new OuiDefaultLocalizations(values);
+}
+function createLocalizations(defaults) {
+	validateDefaultInstance(defaults);
+	return new OuiLocalizations(defaults);
+}
+function getDefaults() {
+	return this[L10N_SYMBOL].defaults;
+}
+function getKeys() {
+	return [...this[L10N_SYMBOL].keys];
+}
+function getLanguage(parameters) {
+	return (typeof parameters?.language === "string" ? parameters.language : parameters?.element?.closest("[lang]")?.getAttribute("lang") ?? document.documentElement.lang).toLowerCase();
+}
+function getLocalization(key, parameters, defaultLocalizations, instanceLocalizations) {
+	const defaultState = defaultLocalizations?.[L10N_SYMBOL];
+	const instanceState = instanceLocalizations?.[L10N_SYMBOL];
+	const language = getLanguage(parameters);
+	const values = defaultState == null ? instanceState == null ? [] : [instanceState.values, instanceState.defaults.values.languages] : [defaultState.values];
+	const { length } = values;
+	let localization;
+	let shortLanguage;
+	for (let index = 0; index < length; index += 1) {
+		const value = values[index];
+		localization = value?.[language]?.[key];
+		if (localization != null) break;
+		shortLanguage ??= language.split("-")[0];
+		if (shortLanguage === language) continue;
+		localization = value?.[shortLanguage]?.[key];
+		if (localization != null) break;
+	}
+	if (localization != null) return localization;
+	return defaultState?.defaults[key] ?? instanceState?.defaults.values.defaults[key] ?? "";
+}
+function getValues() {
+	const { defaults, values } = this[L10N_SYMBOL];
+	return {
+		defaults,
+		languages: values
+	};
+}
+function isValidLocalization(value) {
+	return typeof value === "string" || typeof value === "function";
+}
+function localizeDefault(key, parameters) {
+	return localizeValue(key, parameters, this, void 0);
+}
+function localizeWithLanguage(key, parameters) {
+	return localizeValue(key, parameters, void 0, this);
+}
+function localizeValue(key, parameters, defaultLocalizations, instanceLocalizations) {
+	const localization = getLocalization(key, parameters, defaultLocalizations, instanceLocalizations);
+	if (typeof localization === "function") return localization(...Array.isArray(parameters?.arguments) ? parameters.arguments : []);
+	return localization;
+}
+async function setDefaultLocalizations(values) {
+	if (typeof values !== "object" || values == null) throw new TypeError(L10N_MESSAGE_OBJECT_UPDATE);
+	const state = this[L10N_SYMBOL];
+	return updateLocalizationValues(state, state.defaults, values).then((count) => count > 0);
+}
+function setLocalizations(first, second) {
+	return updateLocalizations(this, typeof first === "string" ? { [first]: second } : first);
+}
+async function updateLocalizationValues(state, to, from) {
+	const keys = Object.keys(from);
+	const keysLength = keys.length;
+	const toAsPlainObject = to;
+	let count = 0;
+	for (let keysIndex = 0; keysIndex < keysLength; keysIndex += 1) {
+		const key = keys[keysIndex];
+		const keyValue = from[key];
+		const normalizedKey = key.toLowerCase();
+		if (!state.keys.has(normalizedKey)) throw new TypeError(L10N_MESSAGE_ITEM_UPDATE_KEY);
+		if (!isValidLocalization(keyValue)) throw new TypeError(L10N_MESSAGE_ITEM_UPDATE_VALUE);
+		if (state.keys.has(normalizedKey) && isValidLocalization(keyValue)) {
+			count += 1;
+			toAsPlainObject[normalizedKey] = keyValue;
+		}
+	}
+	return count;
+}
+async function updateLocalizations(localizations, values) {
+	if (typeof values !== "object" || values == null) throw new TypeError(L10N_MESSAGE_OBJECT_UPDATE);
+	const state = localizations[L10N_SYMBOL];
+	const languages = Object.keys(values);
+	const languagesLength = languages.length;
+	let count = 0;
+	for (let languagesIndex = 0; languagesIndex < languagesLength; languagesIndex += 1) {
+		const language = languages[languagesIndex];
+		const languageValue = values[language];
+		if (typeof languageValue !== "object" || languageValue == null) throw new TypeError(L10N_MESSAGE_OBJECT_UPDATE);
+		const normalizedLanguage = language.toLowerCase();
+		state.values[normalizedLanguage] ??= {};
+		count += await updateLocalizationValues(state, state.values[normalizedLanguage], languageValue);
+	}
+	return count > 0;
+}
+function validateDefaultInstance(value) {
+	if (typeof value !== "object" || value === null || !(L10N_SYMBOL in value)) throw new TypeError(L10N_MESSAGE_DEFAULT);
+}
+function validateDefaultValues(value) {
+	if (!isPlainObject(value) || Object.keys(value).length === 0) throw new TypeError(L10N_MESSAGE_OBJECT_CREATE);
+	if (!Object.values(value).every(isValidLocalization)) throw new TypeError(L10N_MESSAGE_ITEM_CREATE);
+}
+//#endregion
+export { createDefaultLocalizations, createLocalizations };

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

@@ -0,0 +1,2 @@
+import { _ as OuiLocalizationsValues, a as L10N_MESSAGE_OBJECT_CREATE, c as L10N_TYPE_DEFAULT, d as OuiDefaultLocalizationsState, f as OuiDefaultLocalizationsValues, g as OuiLocalizationsType, h as OuiLocalizationsState, i as L10N_MESSAGE_ITEM_UPDATE_VALUE, l as L10N_TYPE_INSTANCE, m as OuiLocalizationsParameters, n as L10N_MESSAGE_ITEM_CREATE, o as L10N_MESSAGE_OBJECT_UPDATE, p as OuiLocalizations, r as L10N_MESSAGE_ITEM_UPDATE_KEY, s as L10N_SYMBOL, t as L10N_MESSAGE_DEFAULT, u as OuiDefaultLocalizations } from "../../l10n.model-D1E1u35L.mjs";
+export { L10N_MESSAGE_DEFAULT, L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL, L10N_TYPE_DEFAULT, L10N_TYPE_INSTANCE, OuiDefaultLocalizations, OuiDefaultLocalizationsState, OuiDefaultLocalizationsValues, OuiLocalizations, OuiLocalizationsParameters, OuiLocalizationsState, OuiLocalizationsType, OuiLocalizationsValues };

package/dist/js/{l10n → internal/l10n}/l10n.model.mjs

@@ -1,9 +1,12 @@
-//#region src/js/l10n/l10n.model.ts
+//#region src/js/internal/l10n/l10n.model.ts
+const L10N_MESSAGE_DEFAULT = "Default localizations must be an instance of OuiDefaultLocalizations.";
 const L10N_MESSAGE_ITEM_CREATE = "Localization item must be a string or a function.";
 const L10N_MESSAGE_ITEM_UPDATE_KEY = "Localization item key must be known.";
 const L10N_MESSAGE_ITEM_UPDATE_VALUE = "Localization item value must be a string or a function.";
 const L10N_MESSAGE_OBJECT_CREATE = "Default localizations must be a non-empty plain object.";
 const L10N_MESSAGE_OBJECT_UPDATE = "Localizations update object must be a plain object.";
+const L10N_TYPE_DEFAULT = "default";
+const L10N_TYPE_INSTANCE = "instance";
 const L10N_SYMBOL = Symbol("l10n");
 //#endregion
-export { L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL };
+export { L10N_MESSAGE_DEFAULT, L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL, L10N_TYPE_DEFAULT, L10N_TYPE_INSTANCE };

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

@@ -1,7 +1,7 @@
 import { AnyAriaBooleanAttribute } from "@oscarpalmer/toretto/models";
 //#region src/js/internal/misc.d.ts
 export declare function copyValue(value: string, onSuccess?: () => void, onError?: () => void): void;
-export declare function getAttributeValue<Value>(element: HTMLElement, attribute: string, possible: Set<Value>, defaultValue: Value): Value;
-export declare function getBooleanAriaValue(element: HTMLElement, attribute: AnyAriaBooleanAttribute): boolean;
+export declare function getAttributeValue<Value>(element: Element, attribute: string, possible: Set<Value>, defaultValue: Value): Value;
+export declare function getBooleanAriaValue(element: Element, attribute: AnyAriaBooleanAttribute): boolean;
 export declare const EXPRESSION_WHITESPACE: RegExp;
 //#endregion

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

@@ -1,6 +1,6 @@
-import { d as OuiNavigable, h as OuiNavigableOrientation, m as OuiNavigableOptions } from "../../navigable.model-BPOM8DZk.mjs";
+import { d as OuiNavigable, h as OuiNavigableOrientation, m as OuiNavigableOptions } from "../../navigable.model-BqoR6iBv.mjs";
 //#region src/js/internal/navigable/index.d.ts
-export declare function getNavigable(element: HTMLElement, options: OuiNavigableOptions): OuiNavigable;
-export declare function getNavigableOrientation(element: HTMLElement, vertical: boolean, aria?: boolean): OuiNavigableOrientation;
+export declare function getNavigable(element: Element, options: OuiNavigableOptions): OuiNavigable;
+export declare function getNavigableOrientation(element: Element, vertical: boolean, aria?: boolean): OuiNavigableOrientation;
 export declare function updateNavigableFocus(navigable: OuiNavigable, focus: boolean, items?: HTMLElement[]): void;
 //#endregion

package/dist/js/internal/navigable/index.mjs

@@ -63,7 +63,7 @@ function onClick(navigable, event) {
 	if (index === -1) return;
 	if (index !== active.index) onNavigate(navigable, index, items, false);
 	options.onActivate?.(navigable);
-	item.focus();
+	item?.focus?.();
 }
 function onNavigate(navigable, index, items, focus) {
 	const { active, options } = navigable[NAVIGABLE_SYMBOL];

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

@@ -1,2 +1,2 @@
-import { a as NAVIGABLE_KEYS_NEXT, c as NAVIGABLE_ORIENTATION_HORIZONTAL, d as OuiNavigable, f as OuiNavigableActive, g as OuiNavigableState, h as OuiNavigableOrientation, i as NAVIGABLE_KEYS_HORIZONTAL, l as NAVIGABLE_ORIENTATION_VERTICAL, m as OuiNavigableOptions, n as NAVIGABLE_KEYS_ACTIVATE, o as NAVIGABLE_KEYS_VERTICAL, p as OuiNavigableCallback, r as NAVIGABLE_KEYS_ALL, s as NAVIGABLE_ORIENTATIONS, t as NAVIGABLE_KEYS_ABSOLUTE, u as NAVIGABLE_SYMBOL } from "../../navigable.model-BPOM8DZk.mjs";
+import { a as NAVIGABLE_KEYS_NEXT, c as NAVIGABLE_ORIENTATION_HORIZONTAL, d as OuiNavigable, f as OuiNavigableActive, g as OuiNavigableState, h as OuiNavigableOrientation, i as NAVIGABLE_KEYS_HORIZONTAL, l as NAVIGABLE_ORIENTATION_VERTICAL, m as OuiNavigableOptions, n as NAVIGABLE_KEYS_ACTIVATE, o as NAVIGABLE_KEYS_VERTICAL, p as OuiNavigableCallback, r as NAVIGABLE_KEYS_ALL, s as NAVIGABLE_ORIENTATIONS, t as NAVIGABLE_KEYS_ABSOLUTE, u as NAVIGABLE_SYMBOL } from "../../navigable.model-BqoR6iBv.mjs";
 export { NAVIGABLE_KEYS_ABSOLUTE, NAVIGABLE_KEYS_ACTIVATE, NAVIGABLE_KEYS_ALL, NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_NEXT, NAVIGABLE_KEYS_VERTICAL, NAVIGABLE_ORIENTATIONS, NAVIGABLE_ORIENTATION_HORIZONTAL, NAVIGABLE_ORIENTATION_VERTICAL, NAVIGABLE_SYMBOL, OuiNavigable, OuiNavigableActive, OuiNavigableCallback, OuiNavigableOptions, OuiNavigableOrientation, OuiNavigableState };

package/dist/js/internal/option-list/option-list.constants.d.mts

@@ -0,0 +1,8 @@
+import { _ as OptionListType } from "../../option-list.model-CCPUlPeX.mjs";
+//#region src/js/internal/option-list/option-list.constants.d.ts
+export declare const OPTION_LIST_KEYS_ACTIVATION: Set<string>;
+export declare const LISTBOX_KEYS_NAVIGATION: Set<string>;
+export declare const OPTION_LIST_KEYS_SELECTION: Set<string>;
+export declare const OPTION_LIST_TYPES: Set<OptionListType>;
+export declare const optionListScrollOptions: ScrollIntoViewOptions;
+//#endregion

package/dist/js/internal/option-list/option-list.constants.mjs

@@ -0,0 +1,22 @@
+//#region src/js/internal/option-list/option-list.constants.ts
+const OPTION_LIST_KEYS_ACTIVATION = /* @__PURE__ */ new Set([
+	" ",
+	"Backspace",
+	"Delete",
+	"Enter"
+]);
+const LISTBOX_KEYS_NAVIGATION = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"PageDown",
+	"PageUp"
+]);
+const OPTION_LIST_KEYS_SELECTION = /* @__PURE__ */ new Set(["ArrowRight", "End"]);
+const OPTION_LIST_TYPES = /* @__PURE__ */ new Set(["autocomplete", "select"]);
+const optionListScrollOptions = {
+	behavior: "auto",
+	block: "nearest",
+	inline: "nearest"
+};
+//#endregion
+export { LISTBOX_KEYS_NAVIGATION, OPTION_LIST_KEYS_ACTIVATION, OPTION_LIST_KEYS_SELECTION, OPTION_LIST_TYPES, optionListScrollOptions };

package/dist/js/internal/option-list/option-list.data.d.mts

@@ -0,0 +1,21 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { g as OptionListState } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.data.d.ts
+type ApplySelectionParameters<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  added: boolean;
+  emit?: boolean;
+  option?: HTMLElement;
+  scroll?: boolean;
+  selected?: HTMLElement[];
+  state: OptionListState<State, Localizations>;
+  values?: string[];
+};
+export declare function applyOptionListSelection<State extends PlainObject, Localizations extends OuiLocalizationsValues>(parameters: ApplySelectionParameters<State, Localizations>): void;
+export declare function filterOptionList<State extends PlainObject, Localizations extends OuiLocalizationsValues>(type: InputEvent["inputType"], state: OptionListState<State, Localizations>): void;
+export declare function filterOptionListOption<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: unknown, textContent?: boolean): HTMLElement | undefined;
+export declare function filterOptionListOptions<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>): HTMLElement | undefined;
+export declare function setOptionListValue<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: unknown, emit?: boolean): void;
+export declare function setOptionListValues<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: unknown[], emit?: boolean): void;
+export declare function toggleOptionListOption<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, option?: HTMLElement): void;
+//#endregion

package/dist/js/internal/option-list/option-list.data.mjs

@@ -0,0 +1,2 @@
+import { a as setOptionListValue, i as filterOptionListOptions, n as filterOptionList, o as setOptionListValues, r as filterOptionListOption, s as toggleOptionListOption, t as applyOptionListSelection } from "../../option-list.data-CgMyUwPc.mjs";
+export { applyOptionListSelection, filterOptionList, filterOptionListOption, filterOptionListOptions, setOptionListValue, setOptionListValues, toggleOptionListOption };

package/dist/js/internal/option-list/option-list.dom.d.mts

@@ -0,0 +1,18 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { a as CreateOptionListList, f as OptionListGroup, g as OptionListState, h as OptionListPreview, i as CreateOptionListGroupParameters, n as CreateOptionListContentParameters, o as CreateOptionListOptionParameters, r as CreateOptionListFilter, s as CreateOptionListOptionsParameters, t as CreateOptionListContent } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.dom.d.ts
+export declare function createOptionListContent(parameters: CreateOptionListContentParameters): CreateOptionListContent;
+export declare function createOptionListFilter(parameters: CreateOptionListContentParameters): CreateOptionListFilter | undefined;
+export declare function createOptionListGroup(parameters: CreateOptionListGroupParameters): OptionListGroup;
+export declare function createOptionListHeader(parameters: CreateOptionListGroupParameters, group: HTMLOptGroupElement): HTMLElement;
+export declare function createOptionListInput(parameters: CreateOptionListContentParameters, value: string): HTMLInputElement;
+export declare function createOptionListList(parameters: CreateOptionListContentParameters): CreateOptionListList;
+export declare function createOptionListMessage(attribute: string): HTMLDivElement;
+export declare function createOptionListOption(parameters: CreateOptionListOptionParameters): HTMLElement;
+export declare function createOptionListOptions(parameters: CreateOptionListOptionsParameters): HTMLElement[];
+export declare function createOptionListValueLabel(id: string): HTMLSpanElement;
+export declare function updateOptionListMessage<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>): void;
+export declare function updateOptionListPreview<State extends PlainObject, Localizations extends OuiLocalizationsValues>(preview: OptionListPreview, state: OptionListState<State, Localizations>, active?: HTMLElement, scroll?: boolean): void;
+export declare function updateOptionListValueLabel<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>): void;
+//#endregion

package/dist/js/internal/option-list/option-list.dom.mjs

@@ -0,0 +1,2 @@
+import { _ as createOptionListValueLabel, b as updateOptionListValueLabel, c as createOptionListContent, d as createOptionListHeader, f as createOptionListInput, g as createOptionListOptions, h as createOptionListOption, l as createOptionListFilter, m as createOptionListMessage, p as createOptionListList, u as createOptionListGroup, v as updateOptionListMessage, y as updateOptionListPreview } from "../../option-list.data-CgMyUwPc.mjs";
+export { createOptionListContent, createOptionListFilter, createOptionListGroup, createOptionListHeader, createOptionListInput, createOptionListList, createOptionListMessage, createOptionListOption, createOptionListOptions, createOptionListValueLabel, updateOptionListMessage, updateOptionListPreview, updateOptionListValueLabel };

package/dist/js/internal/option-list/option-list.event.d.mts

@@ -0,0 +1,6 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { g as OptionListState } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.event.d.ts
+export declare function processOptionListKeydown<State extends PlainObject, Localizations extends OuiLocalizationsValues>(event: KeyboardEvent, state: OptionListState<State, Localizations>): void;
+//#endregion

package/dist/js/internal/{listbox/listbox.event.mjs → option-list/option-list.event.mjs}

@@ -1,8 +1,8 @@
-import { LISTBOX_KEYS_NAVIGATION, LISTBOX_KEYS_SELECTION } from "./listbox.constants.mjs";
-import { S as getListboxVisibleOptions } from "../../listbox.data-BQyZGKgr.mjs";
+import { LISTBOX_KEYS_NAVIGATION, OPTION_LIST_KEYS_SELECTION } from "./option-list.constants.mjs";
+import { S as getOptionListVisibleOptions } from "../../option-list.data-CgMyUwPc.mjs";
 import { clamp } from "@oscarpalmer/atoms/number";
-//#region src/js/internal/listbox/listbox.event.ts
-function processListboxKeydown(event, state) {
+//#region src/js/internal/option-list/option-list.event.ts
+function processOptionListKeydown(event, state) {
 	const { component, form } = state;
 	const { callbacks, disabled, readonly, type } = component;
 	const ignore = disabled || readonly;
@@ -22,7 +22,7 @@ function processListboxKeydown(event, state) {
 			preventDefault = false;
 			callbacks.keydown.onEscape?.(state);
 			break;
-		case !isSelect && LISTBOX_KEYS_SELECTION.has(event.key):
+		case !isSelect && OPTION_LIST_KEYS_SELECTION.has(event.key):
 			if (!ignore) callbacks.keydown.onSelection?.(state);
 			break;
 		case LISTBOX_KEYS_NAVIGATION.has(event.key):
@@ -40,7 +40,7 @@ function processListboxKeydown(event, state) {
 function onNavigation(event, state) {
 	const { active, autocomplete, callbacks, type } = state.component;
 	const skip = callbacks.keydown.skipNavigation?.(state) ?? false;
-	const visible = getListboxVisibleOptions(state);
+	const visible = getOptionListVisibleOptions(state);
 	if (visible.length === 0) return;
 	let next;
 	if (skip || active == null) next = active ?? visible.at(event.key === "ArrowDown" ? 0 : -1);
@@ -63,4 +63,4 @@ function onNavigation(event, state) {
 	callbacks.keydown.onNavigation(preview, state, next ?? active ?? visible[0]);
 }
 //#endregion
-export { processListboxKeydown };
+export { processOptionListKeydown };

package/dist/js/internal/option-list/option-list.form.d.mts

@@ -0,0 +1,7 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { g as OptionListState } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.form.d.ts
+export declare function updateOptionListForm<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, values: string[], emit?: boolean): void;
+export declare function updateOptionListValidity<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>): void;
+//#endregion

package/dist/js/internal/{listbox/listbox.form.mjs → option-list/option-list.form.mjs}

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

package/dist/js/internal/option-list/option-list.misc.d.mts

@@ -0,0 +1,13 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { g as OptionListState } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.misc.d.ts
+export declare function generateOptionListIds(prefix: string, select: HTMLSelectElement): void;
+export declare function getOptionListVisibleOptions<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>): Element[];
+export declare function setOptionListDisabled<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: boolean): void;
+export declare function setOptionListFilter<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: unknown): void;
+export declare function setOptionListLimit<State extends PlainObject, Localizations extends OuiLocalizationsValues>(type: "max" | "min", state: OptionListState<State, Localizations>, value?: unknown): void;
+export declare function setOptionListMultiple(element: Element, value: boolean): void;
+export declare function setOptionListReadonly<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: boolean): void;
+export declare function setOptionListRequired<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, value: boolean): void;
+//#endregion

package/dist/js/internal/option-list/option-list.misc.mjs

@@ -0,0 +1,2 @@
+import { C as setOptionListDisabled, D as setOptionListReadonly, E as setOptionListMultiple, O as setOptionListRequired, S as getOptionListVisibleOptions, T as setOptionListLimit, w as setOptionListFilter, x as generateOptionListIds } from "../../option-list.data-CgMyUwPc.mjs";
+export { generateOptionListIds, getOptionListVisibleOptions, setOptionListDisabled, setOptionListFilter, setOptionListLimit, setOptionListMultiple, setOptionListReadonly, setOptionListRequired };

package/dist/js/internal/option-list/option-list.model.d.mts

@@ -0,0 +1,2 @@
+import { _ as OptionListType, a as CreateOptionListList, c as OptionListAttributes, d as OptionListCallbacks, f as OptionListGroup, g as OptionListState, h as OptionListPreview, i as CreateOptionListGroupParameters, l as OptionListAutoComplete, m as OptionListOptions, n as CreateOptionListContentParameters, o as CreateOptionListOptionParameters, p as OptionListLocalizationValues, r as CreateOptionListFilter, s as CreateOptionListOptionsParameters, t as CreateOptionListContent, u as OptionListAutoCompleteType } from "../../option-list.model-CCPUlPeX.mjs";
+export { CreateOptionListContent, CreateOptionListContentParameters, CreateOptionListFilter, CreateOptionListGroupParameters, CreateOptionListList, CreateOptionListOptionParameters, CreateOptionListOptionsParameters, OptionListAttributes, OptionListAutoComplete, OptionListAutoCompleteType, OptionListCallbacks, OptionListGroup, OptionListLocalizationValues, OptionListOptions, OptionListPreview, OptionListState, OptionListType };

package/dist/js/internal/option-list/option-list.state.d.mts

@@ -0,0 +1,8 @@
+import { _ as OuiLocalizationsValues } from "../../l10n.model-D1E1u35L.mjs";
+import { g as OptionListState } from "../../option-list.model-CCPUlPeX.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+//#region src/js/internal/option-list/option-list.state.d.ts
+export declare function attachOptionList<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, set: Set<OptionListState<State, Localizations>>, onAttach: (state: OptionListState<State, Localizations>) => void): void;
+export declare function detachOptionList<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, set: Set<OptionListState<State, Localizations>>, onDetach: (state: OptionListState<State, Localizations>) => void): void;
+export declare function initializeOptionListState<State extends PlainObject, Localizations extends OuiLocalizationsValues>(state: OptionListState<State, Localizations>, set: Set<OptionListState<State, Localizations>>, onAttach: (state: OptionListState<State, Localizations>) => void): OptionListState<State, Localizations>;
+//#endregion

package/dist/js/internal/option-list/option-list.state.mjs

@@ -0,0 +1,39 @@
+import { updateOptionListForm } from "./option-list.form.mjs";
+import { C as setOptionListDisabled, D as setOptionListReadonly, E as setOptionListMultiple, O as setOptionListRequired, T as setOptionListLimit, b as updateOptionListValueLabel, i as filterOptionListOptions, v as updateOptionListMessage, y as updateOptionListPreview } from "../../option-list.data-CgMyUwPc.mjs";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+//#region src/js/internal/option-list/option-list.state.ts
+function attachOptionList(state, set, onAttach) {
+	const { filter, id, label } = state.component;
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${id}_label`;
+	onAttach(state);
+	set.add(state);
+}
+function detachOptionList(state, set, onDetach) {
+	const { label, select } = state.component;
+	const listeners = state.component.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);
+	set.delete(state);
+}
+function initializeOptionListState(state, set, onAttach) {
+	const { component } = state;
+	attachOptionList(state, set, onAttach);
+	setOptionListDisabled(state, component.disabled);
+	setOptionListLimit("max", state, getAttribute(component.host, "max"));
+	setOptionListLimit("min", state, getAttribute(component.host, "min"));
+	setOptionListMultiple(component.host, component.multiple);
+	setOptionListReadonly(state, component.readonly);
+	setOptionListRequired(state, component.required);
+	filterOptionListOptions(state);
+	updateOptionListForm(state, component.values.current, false);
+	updateOptionListMessage(state);
+	updateOptionListValueLabel(state);
+	if (component.options.selected.length > 0) updateOptionListPreview("none", state, component.options.selected[0], false);
+	return state;
+}
+//#endregion
+export { attachOptionList, detachOptionList, initializeOptionListState };

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

@@ -1,9 +1,3 @@
-import { c as OuiLocalizations, s as OuiLocalizationParameters, u as OuiLocalizationsValues } from "../l10n.model-D6a9frgl.mjs";
-import { GenericCallback } from "@oscarpalmer/atoms/models";
-//#region src/js/l10n/index.d.ts
-export declare function createLocalizations<Localizations extends OuiLocalizationsValues>(defaults: Localizations): OuiLocalizations<Localizations>;
-export declare function getLanguage(element: Element): string;
-export 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;
-export declare function localize<Localizations extends OuiLocalizationsValues, Key extends keyof Localizations, Localization extends Localizations[Key]>(localization: Localization, data: Record<string, unknown>, parameters: OuiLocalizationParameters<Localization>): string;
-export declare function updateLocalizations<Localizations extends OuiLocalizationsValues>(instance: OuiLocalizations<Localizations>, values: Record<string, Partial<Localizations>>, destination: Record<string, Partial<Localizations>>, onAfter?: () => void): void;
-//#endregion
+import { p as OuiLocalizations, u as OuiDefaultLocalizations } from "../l10n.model-D1E1u35L.mjs";
+import { createDefaultLocalizations, createLocalizations } from "../internal/l10n/index.mjs";
+export { type OuiDefaultLocalizations, type OuiLocalizations, createDefaultLocalizations, createLocalizations };

package/dist/js/l10n/index.mjs

@@ -1,107 +1,2 @@
-import { L10N_MESSAGE_ITEM_CREATE, L10N_MESSAGE_ITEM_UPDATE_KEY, L10N_MESSAGE_ITEM_UPDATE_VALUE, L10N_MESSAGE_OBJECT_CREATE, L10N_MESSAGE_OBJECT_UPDATE, L10N_SYMBOL } from "./l10n.model.mjs";
-import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { getString } from "@oscarpalmer/atoms/string";
-//#region src/js/l10n/index.ts
-function OuiLocalizations(defaults) {
-	this[L10N_SYMBOL] = {
-		defaults,
-		keys: new Set(Object.keys(defaults)),
-		values: {}
-	};
-}
-OuiLocalizations.prototype.get = getLocalizationValue;
-OuiLocalizations.prototype.set = setLocalizationValues;
-Object.defineProperties(OuiLocalizations.prototype, {
-	defaults: {
-		enumerable: true,
-		get: getDefaults
-	},
-	keys: {
-		enumerable: true,
-		get: getKeys
-	}
-});
-function createLocalizations(defaults) {
-	if (!isPlainObject(defaults) || Object.keys(defaults).length === 0) throw new Error(L10N_MESSAGE_OBJECT_CREATE);
-	if (!Object.values(defaults).every(isValidLocalization)) throw new Error(L10N_MESSAGE_ITEM_CREATE);
-	return new OuiLocalizations(defaults);
-}
-function getDefaults() {
-	return { ...this[L10N_SYMBOL].defaults };
-}
-function getKeys() {
-	return [...this[L10N_SYMBOL].keys];
-}
-function getLanguage(element) {
-	return (element.closest("[lang]")?.getAttribute("lang") ?? document.documentElement.lang).toLowerCase();
-}
-function getLocalization(localizations, element, key, value) {
-	const language = getLanguage(element);
-	const state = localizations[L10N_SYMBOL];
-	const values = [value, state.values];
-	const { length } = values;
-	let localization;
-	let shortLanguage;
-	for (let index = 0; index < length; index += 1) {
-		const value = values[index];
-		localization = value?.[language]?.[key];
-		if (localization != null) break;
-		shortLanguage ??= language.split("-")[0];
-		if (shortLanguage === language) continue;
-		localization = value?.[shortLanguage]?.[key];
-		if (localization != null) break;
-	}
-	return localization ?? state.defaults[key];
-}
-function getLocalizationValue(element, key, localizations) {
-	return getLocalization(this, element, key, localizations);
-}
-function isValidLocalization(value) {
-	return typeof value === "string" || typeof value === "function";
-}
-function localize(localization, data, parameters) {
-	if (typeof localization === "function") return localization(...parameters);
-	const keys = Object.keys(data);
-	const { length } = keys;
-	let localized = localization;
-	for (let index = 0; index < length; index += 1) {
-		const key = keys[index];
-		const value = data[key];
-		localized = localized.replaceAll(`{${key}}`, getString(value));
-	}
-	return localized;
-}
-function setLocalizationValues(first, second) {
-	updateLocalizations(this, typeof first === "string" ? { [first]: second } : first, this[L10N_SYMBOL].values);
-}
-function updateLocalizations(instance, values, destination, onAfter) {
-	if (typeof values !== "object" || values == null) throw new Error(L10N_MESSAGE_OBJECT_UPDATE);
-	const state = instance[L10N_SYMBOL];
-	const localizations = destination ?? state.values;
-	const languages = Object.keys(values);
-	const languagesLength = languages.length;
-	let updated = false;
-	for (let languagesIndex = 0; languagesIndex < languagesLength; languagesIndex += 1) {
-		const language = languages[languagesIndex];
-		const languageValue = values[language];
-		if (typeof languageValue !== "object" || languageValue == null) continue;
-		const normalizedLanguage = language.toLowerCase();
-		localizations[normalizedLanguage] ??= {};
-		const keys = Object.keys(languageValue);
-		const keysLength = keys.length;
-		for (let keysIndex = 0; keysIndex < keysLength; keysIndex += 1) {
-			const key = keys[keysIndex];
-			const keyValue = languageValue[key];
-			const normalizedKey = key.toLowerCase();
-			if (!state.keys.has(normalizedKey)) throw new Error(L10N_MESSAGE_ITEM_UPDATE_KEY);
-			if (!isValidLocalization(keyValue)) throw new Error(L10N_MESSAGE_ITEM_UPDATE_VALUE);
-			if (state.keys.has(normalizedKey) && isValidLocalization(keyValue)) {
-				updated = true;
-				localizations[normalizedLanguage][normalizedKey] = keyValue;
-			}
-		}
-	}
-	if (updated && typeof onAfter === "function") onAfter();
-}
-//#endregion
-export { createLocalizations, getLanguage, getLocalization, localize, updateLocalizations };
+import { createDefaultLocalizations, createLocalizations } from "../internal/l10n/index.mjs";
+export { createDefaultLocalizations, createLocalizations };