@oscarpalmer/oui 0.34.0 → 0.35.0

package/dist/js/{data.combobox-8RwBv5ey.mjs → data.combobox-B8HMkDOh.mjs}

@@ -1,4 +1,5 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
+import { getLocalization, getLocalizations, localize, updateLocalizations } from "./l10n.mjs";
 import { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_CONTENT, COMBOBOX_ATTRIBUTE_FILTER, COMBOBOX_ATTRIBUTE_FILTER_INPUT, COMBOBOX_ATTRIBUTE_HEADER, COMBOBOX_ATTRIBUTE_HIDDEN, COMBOBOX_ATTRIBUTE_LIST, COMBOBOX_ATTRIBUTE_MESSAGE, COMBOBOX_ATTRIBUTE_OPTION, COMBOBOX_ATTRIBUTE_OPTION_ACTIVE, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_KEYS_ACTIVATION, COMBOBOX_KEYS_NAVIGATION, COMBOBOX_KEYS_SELECTION, COMBOBOX_MESSAGE_LABEL, COMBOBOX_MESSAGE_SELECT, COMBOBOX_SELECTOR_ANCHOR, COMBOBOX_SELECTOR_OPTION, COMBOBOX_SELECTOR_SELECTION_ITEM, COMBOBOX_TAGNAME, COMBOBOX_TYPES, comboboxScrollOptions } from "./combobox/constants.combobox.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
 import { dispatch, on } from "@oscarpalmer/toretto/event";
@@ -8,145 +9,70 @@ import { getString } from "@oscarpalmer/atoms/string";
 import { getData } from "@oscarpalmer/toretto/data";
 import { createElement } from "@oscarpalmer/toretto/create";
 import { dispatch as dispatch$1, findAncestor, getData as getData$1 } from "@oscarpalmer/toretto";
-//#region src/js/combobox/state.combobox.ts
-function attachCombobox(state) {
-	const { anchor, content, filter, label, listeners, select } = state;
-	label.element.htmlFor = filter.element.id;
-	label.element.id = `${state.id}_label`;
-	select.hidden = true;
-	select.insertAdjacentElement("afterend", anchor.container ?? anchor.element);
-	(anchor.container ?? anchor.element).insertAdjacentElement("afterend", content);
-	select.remove();
-	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
-		position: "below-start",
-		reusable: false
-	});
-	state.floatable.update();
-	listeners.push(on(state.host, "focusout", () => {
-		setTimeout(() => {
-			onComboboxFocusout(state);
-		});
-	}), on(content, "click", (event) => {
-		onComboboxClickContent(event, content);
-	}), on(content, "toggle", () => {
-		setAria(anchor.element, "expanded", state.floatable.open);
-		setAria(filter.element, "activedescendant", state.floatable.open ? state.active?.id : void 0);
-		if (state.floatable.open) filter.element.focus();
-	}));
-	comboboxStates.map.set(state.host, state);
-	comboboxStates.map.set(state.content, state);
-	comboboxStates.set.add(state);
+//#region src/js/combobox/misc.combobox.ts
+function generateComboboxIds(prefix, select) {
+	const elements = [...select.children].flatMap((child) => child instanceof HTMLOptGroupElement ? [child, ...[...child.children].filter((groupChild) => groupChild instanceof HTMLOptionElement)] : child instanceof HTMLOptionElement ? [child] : []);
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		if (element.id === "") element.id = `${prefix}${element instanceof HTMLOptGroupElement ? "_group_" : "_option_"}${index}`;
+	}
 }
-function createComboboxState(element, internals) {
-	const select = element.querySelector("select");
-	if (select == null || select.id === "") throw new Error(COMBOBOX_MESSAGE_SELECT);
-	const label = element.querySelector(`label[for="${select.id}"]`);
-	if (label == null) throw new Error(COMBOBOX_MESSAGE_LABEL);
-	element.id = select.id;
-	setAttribute(element, "name", select.name === "" ? select.id : select.name);
-	const disabled = getComboboxBooleanAria(element, "disabled") || select.disabled;
-	const multiple = element.multiple || select.multiple;
-	const readonly = getComboboxBooleanAria(element, "readonly");
-	const required = getComboboxBooleanAria(element, "required") || select.required;
-	const id = getComboboxId();
-	const type = multiple ? "select" : getComboboxAttributeValue(element, "type", COMBOBOX_TYPES, "select");
-	const autocomplete = getComboboxAutoComplete(element, type === "select");
-	const labelId = label.id;
-	label.htmlFor = id;
-	label.id = `${id}_label`;
-	generateComboboxIds(id, select);
-	const anchor = createComboboxAnchor({
-		autocomplete,
-		id,
-		label,
-		multiple,
-		select,
-		type
-	});
-	const content = createComboboxContent({
-		autocomplete,
-		id,
-		label,
-		multiple,
-		select,
-		type
-	});
-	const values = content.list.selected.length === 0 ? [""] : content.list.selected.map((option) => getData(option, "value", false) ?? "");
-	const state = {
-		autocomplete,
-		disabled,
-		id,
-		internals,
-		multiple,
-		readonly,
-		required,
-		select,
-		type,
-		anchor: {
-			container: anchor.container,
-			element: anchor.element
-		},
-		active: content.list.selected[0],
-		content: content.element,
-		filter: {
-			element: content.filter?.element ?? anchor.element,
-			value: ""
-		},
-		floatable: void 0,
-		groups: content.list.groups,
-		host: element,
-		label: {
-			element: label,
-			id: labelId
-		},
-		listeners: [],
-		localizations: {},
-		message: content.message,
-		name: element.name,
-		options: {
-			all: content.list.options,
-			selected: content.list.selected
-		},
-		selection: anchor.selection,
-		values: {
-			current: values.slice(),
-			initial: values.slice()
-		}
+function getComboboxAttributeValue(element, attribute, possible, defaultValue) {
+	const value = getAttribute(element, attribute);
+	return possible.has(value) ? value : defaultValue;
+}
+function getComboboxAutoComplete(element, select) {
+	let value;
+	if (select) value = "list";
+	else value = getComboboxAttributeValue(element, "autocomplete", COMBOBOX_AUTOCOMPLETES, "none");
+	return {
+		value,
+		both: value === "both",
+		inline: value === "inline",
+		list: value === "list",
+		none: value === "none"
 	};
-	attachCombobox(state);
-	setComboboxDisabled(state, disabled);
-	setComboboxLimit("max", state, getAttribute(element, "max"));
-	setComboboxLimit("min", state, getAttribute(element, "min"));
-	setComboboxReadonly(state, readonly);
-	setComboboxRequired(state, required);
-	filterComboboxOptions(state);
-	if (content.list.selected.length > 0) updateComboboxPreview("set", state, content.list.selected[0]);
-	updateComboboxForm(state, state.values.current, false);
-	updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
-	updateComboboxSelectionItems(state);
-	return state;
 }
-function detachCombobox(state) {
-	const { content, floatable, host, label, select } = state;
-	const listeners = state.listeners.splice(0);
-	const { length } = listeners;
-	for (let index = 0; index < length; index += 1) listeners[index]();
-	floatable.destroy();
-	const anchor = state.anchor.container ?? state.anchor.element;
-	anchor.insertAdjacentElement("beforebegin", select);
-	anchor.remove();
-	content.remove();
-	label.element.htmlFor = select.id;
-	label.element.id = state.label.id;
-	select.hidden = false;
-	comboboxStates.map.delete(host);
-	comboboxStates.map.delete(content);
-	comboboxStates.set.delete(state);
+function getComboboxBooleanAria(element, attribute) {
+	const value = getAria(element, attribute);
+	return value === true || value === "true";
 }
-const comboboxStates = {
-	map: /* @__PURE__ */ new WeakMap(),
-	set: /* @__PURE__ */ new Set()
-};
+function getComboboxId() {
+	index += 1;
+	return `oui_combobox_${index}`;
+}
+function getComboboxVisibleOptions(state) {
+	return state.options.all.filter((option) => !option.hidden);
+}
+function hasTextSelection(element) {
+	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
+}
+function setComboboxFilter(state, value) {
+	if (typeof value !== "string") return;
+	const type = value.length < state.filter.element.value.length ? "deleteContentBackward" : "insertText";
+	state.filter.element.value = value;
+	onComboboxFilter(type, state);
+}
+function setComboboxLimit(type, state, value) {
+	let actual = value;
+	if (typeof actual === "string") actual = Number.parseInt(actual, 10);
+	if (typeof actual === "number" && !Number.isNaN(actual) && actual >= 0 ? actual !== state[type] : actual == null) {
+		state[type] = actual;
+		setAttribute(state.host, type, actual);
+		updateComboboxValidity(state);
+	}
+}
+function setComboboxLocalizations(first, second) {
+	updateLocalizations(comboboxLocalizations, typeof first === "string" ? { [first]: second } : first, comboboxLocalizations.values, () => {
+		for (const state of comboboxStates.set) {
+			updateComboboxAnchor(state);
+			updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
+			updateComboboxSelectionItems(state);
+		}
+	});
+}
+let index = 0;
 //#endregion
 //#region src/js/combobox/event.combobox.ts
 function onComboboxClickContent(event, content) {
@@ -355,139 +281,154 @@ on(document, "click", onComboboxClickDocument);
 on(document, "input", onComboboxInput, { passive: false });
 on(document, "keydown", onComboboxKeydown, { passive: false });
 //#endregion
-//#region src/js/combobox/misc.combobox.ts
-function generateComboboxIds(prefix, select) {
-	const elements = [...select.children].flatMap((child) => child instanceof HTMLOptGroupElement ? [child, ...[...child.children].filter((groupChild) => groupChild instanceof HTMLOptionElement)] : child instanceof HTMLOptionElement ? [child] : []);
-	const { length } = elements;
-	for (let index = 0; index < length; index += 1) {
-		const element = elements[index];
-		if (element.id === "") element.id = `${prefix}${element instanceof HTMLOptGroupElement ? "_group_" : "_option_"}${index}`;
-	}
-}
-function getComboboxAttributeValue(element, attribute, possible, defaultValue) {
-	const value = getAttribute(element, attribute);
-	return possible.has(value) ? value : defaultValue;
+//#region src/js/combobox/state.combobox.ts
+function attachCombobox(state) {
+	const { anchor, content, filter, label, listeners, select } = state;
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${state.id}_label`;
+	select.hidden = true;
+	select.insertAdjacentElement("afterend", anchor.container ?? anchor.element);
+	(anchor.container ?? anchor.element).insertAdjacentElement("afterend", content);
+	select.remove();
+	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
+		position: "below-start",
+		reusable: false
+	});
+	state.floatable.update();
+	listeners.push(on(state.host, "focusout", () => {
+		setTimeout(() => {
+			onComboboxFocusout(state);
+		});
+	}), on(content, "click", (event) => {
+		onComboboxClickContent(event, content);
+	}), on(content, "toggle", () => {
+		setAria(anchor.element, "expanded", state.floatable.open);
+		setAria(filter.element, "activedescendant", state.floatable.open ? state.active?.id : void 0);
+		if (state.floatable.open) filter.element.focus();
+	}));
+	comboboxStates.map.set(state.host, state);
+	comboboxStates.map.set(state.content, state);
+	comboboxStates.set.add(state);
 }
-function getComboboxAutoComplete(element, select) {
-	let value;
-	if (select) value = "list";
-	else value = getComboboxAttributeValue(element, "autocomplete", COMBOBOX_AUTOCOMPLETES, "none");
-	return {
-		value,
-		both: value === "both",
-		inline: value === "inline",
-		list: value === "list",
-		none: value === "none"
+function createComboboxState(element, internals) {
+	const select = element.querySelector("select");
+	if (select == null || select.id === "") throw new Error(COMBOBOX_MESSAGE_SELECT);
+	const label = element.querySelector(`label[for="${select.id}"]`);
+	if (label == null) throw new Error(COMBOBOX_MESSAGE_LABEL);
+	element.id = select.id;
+	setAttribute(element, "name", select.name === "" ? select.id : select.name);
+	const disabled = getComboboxBooleanAria(element, "disabled") || select.disabled;
+	const multiple = element.multiple || select.multiple;
+	const readonly = getComboboxBooleanAria(element, "readonly");
+	const required = getComboboxBooleanAria(element, "required") || select.required;
+	const id = getComboboxId();
+	const type = multiple ? "select" : getComboboxAttributeValue(element, "type", COMBOBOX_TYPES, "select");
+	const autocomplete = getComboboxAutoComplete(element, type === "select");
+	const labelId = label.id;
+	label.htmlFor = id;
+	label.id = `${id}_label`;
+	generateComboboxIds(id, select);
+	const anchor = createComboboxAnchor({
+		autocomplete,
+		id,
+		label,
+		multiple,
+		select,
+		type
+	});
+	const content = createComboboxContent({
+		autocomplete,
+		id,
+		label,
+		multiple,
+		select,
+		type
+	});
+	const values = content.list.selected.length === 0 ? [""] : content.list.selected.map((option) => getData(option, "value", false) ?? "");
+	const state = {
+		autocomplete,
+		disabled,
+		id,
+		internals,
+		multiple,
+		readonly,
+		required,
+		select,
+		type,
+		anchor: {
+			container: anchor.container,
+			element: anchor.element
+		},
+		active: content.list.selected[0],
+		content: content.element,
+		filter: {
+			element: content.filter?.element ?? anchor.element,
+			value: ""
+		},
+		floatable: void 0,
+		groups: content.list.groups,
+		host: element,
+		label: {
+			element: label,
+			id: labelId
+		},
+		listeners: [],
+		localizations: {},
+		message: content.message,
+		name: element.name,
+		options: {
+			all: content.list.options,
+			selected: content.list.selected
+		},
+		selection: anchor.selection,
+		values: {
+			current: values.slice(),
+			initial: values.slice()
+		}
 	};
+	attachCombobox(state);
+	setComboboxDisabled(state, disabled);
+	setComboboxLimit("max", state, getAttribute(element, "max"));
+	setComboboxLimit("min", state, getAttribute(element, "min"));
+	setComboboxReadonly(state, readonly);
+	setComboboxRequired(state, required);
+	filterComboboxOptions(state);
+	if (content.list.selected.length > 0) updateComboboxPreview("set", state, content.list.selected[0]);
+	updateComboboxForm(state, state.values.current, false);
+	updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
+	updateComboboxSelectionItems(state);
+	return state;
 }
-function getComboboxBooleanAria(element, attribute) {
-	const value = getAria(element, attribute);
-	return value === true || value === "true";
-}
-function getComboboxId() {
-	index += 1;
-	return `oui_combobox_${index}`;
-}
-function getComboboxVisibleOptions(state) {
-	return state.options.all.filter((option) => !option.hidden);
-}
-function hasTextSelection(element) {
-	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
-}
-function setComboboxFilter(state, value) {
-	if (typeof value !== "string") return;
-	const type = value.length < state.filter.element.value.length ? "deleteContentBackward" : "insertText";
-	state.filter.element.value = value;
-	onComboboxFilter(type, state);
-}
-function setComboboxLimit(type, state, value) {
-	let actual = value;
-	if (typeof actual === "string") actual = Number.parseInt(actual, 10);
-	if (typeof actual === "number" && !Number.isNaN(actual) && actual >= 0 ? actual !== state[type] : actual == null) {
-		state[type] = actual;
-		setAttribute(state.host, type, actual);
-		updateComboboxValidity(state);
-	}
-}
-let index = 0;
-//#endregion
-//#region src/js/combobox/i18n.combobox.ts
-function getComboboxLanguage(state) {
-	return (state.host.closest("[lang]")?.getAttribute("lang") ?? document.documentElement.lang).toLowerCase();
-}
-function getComboboxLocalization(key, state) {
-	const language = getComboboxLanguage(state);
-	const allLocalizations = [state.localizations, LOCALIZATIONS.globals];
-	const { length } = allLocalizations;
-	let localization;
-	let shortLanguage;
-	for (let index = 0; index < length; index += 1) {
-		const localizations = allLocalizations[index];
-		localization = localizations?.[language]?.[key];
-		if (localization != null) break;
-		shortLanguage ??= language.split("-")[0];
-		if (shortLanguage === language) continue;
-		localization = localizations?.[shortLanguage]?.[key];
-		if (localization != null) break;
-	}
-	return localization ?? LOCALIZATIONS.defaults[key];
-}
-function setComboboxLocalizations(first, second) {
-	updateComboboxLocalizations(typeof first === "string" ? { [first]: second } : first);
-}
-function updateComboboxLocalizations(values, destination) {
-	if (typeof values !== "object" || values == null) return;
-	const localizations = destination ?? LOCALIZATIONS.globals;
-	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 (LOCALIZATIONS.keys.has(normalizedKey) && (typeof keyValue === "string" || typeof keyValue === "function")) {
-				updated = true;
-				localizations[normalizedLanguage][normalizedKey] = keyValue;
-			}
-		}
-	}
-	if (!updated) return;
-	for (const state of comboboxStates.set) {
-		updateComboboxAnchor(state);
-		updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
-		updateComboboxSelectionItems(state);
-	}
+function detachCombobox(state) {
+	const { content, floatable, host, label, select } = state;
+	const listeners = state.listeners.splice(0);
+	const { length } = listeners;
+	for (let index = 0; index < length; index += 1) listeners[index]();
+	floatable.destroy();
+	const anchor = state.anchor.container ?? state.anchor.element;
+	anchor.insertAdjacentElement("beforebegin", select);
+	anchor.remove();
+	content.remove();
+	label.element.htmlFor = select.id;
+	label.element.id = state.label.id;
+	select.hidden = false;
+	comboboxStates.map.delete(host);
+	comboboxStates.map.delete(content);
+	comboboxStates.set.delete(state);
 }
-const LOCALIZATIONS = {
-	defaults: {
-		empty: "No results found",
-		input: "Please enter a value",
-		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: (label) => `Remove ${label}`,
-		results: (amount) => `${amount} results available`,
-		selected: (amount) => `${amount} selected`
-	},
-	globals: {},
-	keys: /* @__PURE__ */ new Set([
-		"empty",
-		"input",
-		"invalid",
-		"max",
-		"min",
-		"remove",
-		"results",
-		"selected"
-	])
+const comboboxLocalizations = getLocalizations({
+	empty: "No results found",
+	input: "Please enter a value",
+	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: (label) => `Remove ${label}`,
+	results: (amount) => `${amount} results available`,
+	selected: (amount) => `${amount} selected`
+});
+const comboboxStates = {
+	map: /* @__PURE__ */ new WeakMap(),
+	set: /* @__PURE__ */ new Set()
 };
 //#endregion
 //#region src/js/combobox/form.combobox.ts
@@ -507,33 +448,34 @@ function updateComboboxForm(state, values, emit) {
 function updateComboboxValidity(state) {
 	if (state.autocomplete.none) {
 		const valueMissing = state.required && state.filter.element.value.length === 0;
-		const localization = getComboboxLocalization("invalid", state);
-		state.internals.setValidity({ valueMissing }, typeof localization === "function" ? localization() : localization);
+		const localization = getLocalization(comboboxLocalizations, state.host, "invalid", state.localizations);
+		state.internals.setValidity({ valueMissing }, localize(localization, {}, []));
 		state.internals.checkValidity();
 		return;
 	}
+	let data = {};
 	let error;
-	let message;
+	let key;
+	let parameters = [];
 	switch (true) {
-		case state.required && state.options.selected.length === 0: {
+		case state.required && state.options.selected.length === 0:
 			error = "badInput";
-			const localization = getComboboxLocalization("input", state);
-			message = typeof localization === "function" ? localization() : localization;
+			key = "input";
 			break;
-		}
-		case state.multiple && typeof state.max === "number" && state.options.selected.length > state.max: {
+		case state.multiple && typeof state.max === "number" && state.options.selected.length > state.max:
+			data = { amount: state.max };
 			error = "rangeOverflow";
-			const localization = getComboboxLocalization("max", state);
-			message = typeof localization === "function" ? localization(state.max) : localization.replace("{max}", state.max.toString());
+			key = "max";
+			parameters = [state.max];
 			break;
-		}
-		case state.multiple && typeof state.min === "number" && state.options.selected.length < state.min: {
+		case state.multiple && typeof state.min === "number" && state.options.selected.length < state.min:
+			data = { amount: state.min };
 			error = "rangeUnderflow";
-			const localization = getComboboxLocalization("min", state);
-			message = typeof localization === "function" ? localization(state.min) : localization.replace("{min}", state.min.toString());
-			break;
-		}
+			key = "min";
+			parameters = [state.min];
 	}
+	const localization = key == null ? void 0 : getLocalization(comboboxLocalizations, state.host, key, state.localizations);
+	const message = localization == null ? void 0 : localize(localization, data, parameters);
 	state.internals.setValidity(error == null ? {} : { [error]: true }, message);
 	state.internals.checkValidity();
 }
@@ -805,10 +747,15 @@ function createComboboxSelection(id, select) {
 	};
 }
 function createComboboxSelectionItem(option, state) {
+	const optionLabel = option.textContent;
+	const optionValue = getData(option, "value", false) ?? "";
 	const element = createElement("li");
-	const localization = state == null ? option.textContent : getComboboxLocalization("remove", state);
+	const localization = state == null ? option.textContent : getLocalization(comboboxLocalizations, state.host, "remove", state.localizations);
 	const button = createElement("button", {
-		aria: { label: typeof localization === "function" ? localization(option.textContent ?? "", getData(option, "value", false) ?? "") : localization },
+		aria: { label: localize(localization, {
+			label: optionLabel,
+			value: optionValue
+		}, [optionLabel, optionValue]) },
 		attribute: {
 			[COMBOBOX_ATTRIBUTE_SELECTION_ITEM]: "",
 			tabindex: -1
@@ -875,8 +822,9 @@ function updateComboboxTabindices(state, active) {
 }
 function updateComboboxAnchor(state) {
 	if (!state.multiple) return;
-	const localization = getComboboxLocalization("selected", state);
-	setAria(state.anchor.element, "label", typeof localization === "function" ? localization(state.options.selected.length) : localization.replace("{amount}", state.options.selected.length.toString()));
+	const localization = getLocalization(comboboxLocalizations, state.host, "selected", state.localizations);
+	const { length } = state.options.selected;
+	setAria(state.anchor.element, "label", localize(localization, { amount: length }, [length]));
 }
 function updateComboboxAutocomplete(preview, state, active) {
 	if (state.multiple) return;
@@ -894,11 +842,11 @@ function updateComboboxAutocomplete(preview, state, active) {
 function updateComboboxMessage(state, visible) {
 	setAttribute(state.message, COMBOBOX_ATTRIBUTE_HIDDEN, visible > 0 ? "" : void 0);
 	if (visible === 0) {
-		const localization = getComboboxLocalization("empty", state);
-		state.message.textContent = typeof localization === "function" ? localization() : localization;
+		const localization = getLocalization(comboboxLocalizations, state.host, "empty", state.localizations);
+		state.message.textContent = localize(localization, {}, []);
 	} else {
-		const localization = getComboboxLocalization("results", state);
-		state.message.textContent = typeof localization === "function" ? localization(visible) : localization.replace("{amount}", visible.toString());
+		const localization = getLocalization(comboboxLocalizations, state.host, "results", state.localizations);
+		state.message.textContent = localize(localization, { amount: visible }, [visible]);
 	}
 	state.message.hidden = false;
 }
@@ -916,7 +864,7 @@ function updateComboboxPreview(preview, state, active) {
 function updateComboboxSelection(state, active, added, selected) {
 	if (state.selection == null) return;
 	let options = active == null ? [] : [active];
-	if (selected != null) {
+	if (added && selected != null) {
 		options = selected;
 		const { length } = state.selection.items;
 		for (let index = 0; index < length; index += 1) state.selection.items[index].element.remove();
@@ -950,13 +898,18 @@ function updateComboboxSelection(state, active, added, selected) {
 }
 function updateComboboxSelectionItems(state) {
 	if (state.selection == null) return;
-	const localization = getComboboxLocalization("remove", state);
+	const localization = getLocalization(comboboxLocalizations, state.host, "remove", state.localizations);
 	const { length } = state.selection.items;
 	for (let index = 0; index < length; index += 1) {
 		const item = state.selection.items[index];
 		const option = state.options.selected.find((option) => option.id === getData(item.button, "option", false));
 		if (option == null) continue;
-		setAria(item.button, "label", typeof localization === "function" ? localization(option?.textContent ?? "", getData(option, "value", false) ?? "") : localization.replace("{label}", option?.textContent ?? ""));
+		const optionLabel = option.textContent;
+		const optionValue = getData(option, "value", false) ?? "";
+		setAria(item.button, "label", localize(localization, {
+			label: optionLabel,
+			value: optionValue
+		}, [optionLabel, optionValue]));
 	}
 }
 //#endregion
@@ -1074,4 +1027,4 @@ function toggleComboboxOption(state, option) {
 	if (!state.multiple) state.floatable.hide();
 }
 //#endregion
-export { onComboboxKeydown as $, updateComboboxTabindices as A, getComboboxBooleanAria as B, setComboboxRequired as C, updateComboboxPreview as D, updateComboboxMessage as E, setComboboxLocalizations as F, setComboboxLimit as G, getComboboxVisibleOptions as H, updateComboboxLocalizations as I, onComboboxEnter as J, onComboboxClickContent as K, generateComboboxIds as L, updateComboboxValidity as M, getComboboxLanguage as N, updateComboboxSelection as O, getComboboxLocalization as P, onComboboxInput as Q, getComboboxAttributeValue as R, setComboboxReadonly as S, updateComboboxAutocomplete as T, hasTextSelection as U, getComboboxId as V, setComboboxFilter as W, onComboboxFilter as X, onComboboxEscape as Y, onComboboxFocusout as Z, createComboboxOptions as _, setComboboxValues as a, attachCombobox as at, createComboboxSelectionItems as b, createComboboxButton as c, detachCombobox as ct, createComboboxGroup as d, onComboboxKeydownSelection as et, createComboboxHeader as f, createComboboxOption as g, createComboboxMessage as h, setComboboxValue as i, onComboboxTab as it, updateComboboxForm as j, updateComboboxSelectionItems as k, createComboboxContent as l, createComboboxList as m, filterComboboxOption as n, onComboboxRemoveSelection as nt, toggleComboboxOption as o, comboboxStates as ot, createComboboxInput as p, onComboboxClickDocument as q, filterComboboxOptions as r, onComboboxSelection as rt, createComboboxAnchor as s, createComboboxState as st, applyComboboxSelection as t, onComboboxNavigation as tt, createComboboxFilter as u, createComboboxSelection as v, updateComboboxAnchor as w, setComboboxDisabled as x, createComboboxSelectionItem as y, getComboboxAutoComplete as z };
+export { getComboboxAutoComplete as $, updateComboboxTabindices as A, onComboboxEnter as B, setComboboxRequired as C, updateComboboxPreview as D, updateComboboxMessage as E, comboboxStates as F, onComboboxKeydown as G, onComboboxFilter as H, createComboboxState as I, onComboboxRemoveSelection as J, onComboboxKeydownSelection as K, detachCombobox as L, updateComboboxValidity as M, attachCombobox as N, updateComboboxSelection as O, comboboxLocalizations as P, getComboboxAttributeValue as Q, onComboboxClickContent as R, setComboboxReadonly as S, updateComboboxAutocomplete as T, onComboboxFocusout as U, onComboboxEscape as V, onComboboxInput as W, onComboboxTab as X, onComboboxSelection as Y, generateComboboxIds as Z, createComboboxOptions as _, setComboboxValues as a, setComboboxLimit as at, createComboboxSelectionItems as b, createComboboxButton as c, createComboboxGroup as d, getComboboxBooleanAria as et, createComboboxHeader as f, createComboboxOption as g, createComboboxMessage as h, setComboboxValue as i, setComboboxFilter as it, updateComboboxForm as j, updateComboboxSelectionItems as k, createComboboxContent as l, createComboboxList as m, filterComboboxOption as n, getComboboxVisibleOptions as nt, toggleComboboxOption as o, setComboboxLocalizations as ot, createComboboxInput as p, onComboboxNavigation as q, filterComboboxOptions as r, hasTextSelection as rt, createComboboxAnchor as s, applyComboboxSelection as t, getComboboxId as tt, createComboboxFilter as u, createComboboxSelection as v, updateComboboxAnchor as w, setComboboxDisabled as x, createComboboxSelectionItem as y, onComboboxClickDocument as z };

package/dist/js/index.d.mts

@@ -1,5 +1,5 @@
 import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
-import { H as setComboboxLocalizations, z as OuiComboboxElement } from "./constants.combobox-DqNUGBLS.mjs";
+import { Y as setComboboxLocalizations, z as OuiComboboxElement } from "./constants.combobox-h_kyDegw.mjs";
 import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-a6w0J1OD.mjs";
 import "./movable/movable.standalone.mjs";
 import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-3qoR0Bjm.mjs";

package/dist/js/index.mjs

@@ -5,7 +5,7 @@ import { createResizable } from "./resizable/resizable.embedded.mjs";
 import { getDialog } from "./dialog.mjs";
 import "./menu.mjs";
 import "./toolbar.mjs";
-import { F as setComboboxLocalizations } from "./data.combobox-8RwBv5ey.mjs";
+import { ot as setComboboxLocalizations } from "./data.combobox-B8HMkDOh.mjs";
 import { OuiComboboxElement } from "./combobox/index.mjs";
 import "./floatable/floatable.standalone.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";