@oscarpalmer/oui 0.31.0 → 0.33.0

package/src/js/combobox.ts

@@ -1,13 +1,13 @@
+import type {GenericCallback} from '@oscarpalmer/atoms/models';
 import {clamp} from '@oscarpalmer/atoms/number';
-import {getString, join} from '@oscarpalmer/atoms/string';
-import {getAria, setAria, setRole} from '@oscarpalmer/toretto/aria';
+import {getString, parse} from '@oscarpalmer/atoms/string';
+import {getAria, setAria} from '@oscarpalmer/toretto/aria';
 import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {createElement} from '@oscarpalmer/toretto/create';
+import {getData, setData} from '@oscarpalmer/toretto/data';
 import {dispatch, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {setProperty} from '@oscarpalmer/toretto/property';
-import {setStyle} from '@oscarpalmer/toretto/style';
+import type {AnyAriaBooleanAttribute, RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {createEmbeddedFloatable, type OuiFloatable} from './floatable/floatable.embedded';
 
 // #region Types
@@ -18,57 +18,188 @@ declare global {
 	}
 }
 
+type ApplySelectionParameters = {
+	added: boolean;
+	emit?: boolean;
+	option?: HTMLElement;
+	selected?: HTMLElement[];
+	state: OuiComboboxState;
+	values?: string[];
+};
+
+type CreateAnchor = {
+	container?: HTMLElement;
+	element: HTMLElement;
+	selection?: OuiComboboxSelection;
+};
+
+type CreatAnchorParameters = {
+	autocomplete: OuiComboboxAutoComplete;
+	id: string;
+	label: HTMLLabelElement;
+	multiple: boolean;
+	select: HTMLSelectElement;
+	type: OuiComboboxType;
+};
+
+type CreateContent = {
+	element: HTMLElement;
+	filter?: CreateFilter;
+	list: CreateList;
+	message: HTMLElement;
+};
+
+type CreateContentParameters = {
+	autocomplete: OuiComboboxAutoComplete;
+	id: string;
+	label: HTMLLabelElement;
+	multiple: boolean;
+	select: HTMLSelectElement;
+	type: OuiComboboxType;
+};
+
+type CreateFilter = {
+	container: HTMLElement;
+	element: HTMLInputElement;
+};
+
+type CreateFilterParameters = {
+	autocomplete: OuiComboboxAutoCompleteType;
+	id: string;
+	label: HTMLLabelElement;
+	type: OuiComboboxType;
+};
+
+type CreateGroupParameters = {
+	autocomplete: OuiComboboxAutoComplete;
+	group: HTMLOptGroupElement;
+	groupOptions: HTMLOptionElement[];
+	selected: HTMLElement[];
+};
+
+type CreateInputParameters = {
+	autocomplete: OuiComboboxAutoCompleteType;
+	id: string;
+	label: HTMLLabelElement;
+	type: OuiComboboxType;
+	value: string;
+};
+
+type CreateList = {
+	element: HTMLElement;
+	groups?: OuiComboboxGroup[];
+	options: HTMLElement[];
+	selected: HTMLElement[];
+};
+
+type CreateListParameters = {
+	autocomplete: OuiComboboxAutoComplete;
+	id: string;
+	label: HTMLLabelElement;
+	multiple: boolean;
+	select: HTMLSelectElement;
+};
+
+type CreateOptionParameters = {
+	autocomplete: OuiComboboxAutoComplete;
+	group?: string;
+	index: number;
+	option: HTMLOptionElement;
+};
+
+type CreateOptionsParameters = {
+	autocomplete: OuiComboboxAutoComplete;
+	group?: string;
+	list: HTMLElement;
+	options: HTMLOptionElement[];
+	selected: HTMLElement[];
+};
+
+type CreateSelectionItemsParameters = {
+	container: HTMLElement;
+	items: OuiComboboxSelectionItem[];
+	options: HTMLElement[];
+	state?: OuiComboboxState;
+};
+
+type OuiComboboxAnchor = {
+	container?: HTMLElement;
+	element: HTMLElement;
+};
+
+type OuiComboboxAutoComplete = Record<OuiComboboxAutoCompleteType, boolean> & {
+	value: OuiComboboxAutoCompleteType;
+};
+
+type OuiComboboxAutoCompleteType = 'both' | 'inline' | 'list' | 'none';
+
 export class OuiComboboxElement extends HTMLElement {
 	static formAssociated = true;
 
-	static observedAttributes = ['disabled', 'max', 'min', 'readonly', 'required', 'value'];
+	static observedAttributes = ['max', 'min', 'required', 'value'];
 
 	readonly #internals: ElementInternals;
 
-	readonly #state: OuiComboboxState;
+	#restored?: string[];
+
+	#state!: OuiComboboxState;
 
 	/**
 	 * Is the combobox disabled?
 	 */
 	get disabled(): boolean {
-		return this.hasAttribute('disabled');
+		return this.#state?.disabled ?? false;
 	}
 
 	/**
 	 * Should the combobox be disabled?
 	 */
 	set disabled(value: boolean) {
-		if (typeof value === 'boolean' && value !== this.#state.disabled) {
-			setDisabled(this, this.#state, value);
+		if (typeof value === 'boolean' && value !== this.disabled) {
+			setDisabled(this.#state, value);
 		}
 	}
 
+	/**
+	 * Current filter value
+	 */
+	get filter(): string {
+		return this.#state.filter.element.value;
+	}
+
+	/**
+	 * Set the filter value
+	 */
+	set filter(value: string) {
+		setFilter(this.#state, value);
+	}
+
 	/**
 	 * Maximum number of selected options
 	 */
 	get max(): number | undefined {
-		return this.#state.max;
+		return this.#state?.max;
 	}
 
 	/**
 	 * Set the maximum number of selected options
 	 */
 	set max(value: number) {
-		setLimit('max', this, this.#state, value);
+		setLimit('max', this.#state, value);
 	}
 
 	/**
 	 * Minimum number of selected options
 	 */
 	get min(): number | undefined {
-		return this.#state.min;
+		return this.#state?.min;
 	}
 
 	/**
 	 * Set the minimum number of selected options
 	 */
 	set min(value: number) {
-		setLimit('min', this, this.#state, value);
+		setLimit('min', this.#state, value);
 	}
 
 	/**
@@ -89,15 +220,15 @@ export class OuiComboboxElement extends HTMLElement {
 	 * Is the combobox readonly?
 	 */
 	get readonly(): boolean {
-		return this.hasAttribute('readonly');
+		return this.#state?.readonly ?? false;
 	}
 
 	/**
 	 * Should the combobox be readonly?
 	 */
 	set readonly(value: boolean) {
-		if (typeof value === 'boolean' && value !== this.#state.readonly) {
-			setReadonly(this, this.#state, value);
+		if (typeof value === 'boolean' && value !== this.readonly) {
+			setReadonly(this.#state, value);
 		}
 	}
 
@@ -105,15 +236,15 @@ export class OuiComboboxElement extends HTMLElement {
 	 * Is the combobox required?
 	 */
 	get required(): boolean {
-		return this.hasAttribute('required');
+		return this.#state?.required ?? false;
 	}
 
 	/**
 	 * Should the combobox be required?
 	 */
 	set required(value: boolean) {
-		if (typeof value === 'boolean' && value !== this.#state.required) {
-			setRequired(this, this.#state, value);
+		if (typeof value === 'boolean' && value !== this.required) {
+			setRequired(this.#state, value);
 		}
 	}
 
@@ -121,7 +252,7 @@ export class OuiComboboxElement extends HTMLElement {
 	 * Selected options
 	 */
 	get selected(): HTMLElement[] {
-		return this.#state.selected.slice();
+		return this.#state.options.selected.slice();
 	}
 
 	/**
@@ -135,58 +266,53 @@ export class OuiComboboxElement extends HTMLElement {
 	 * Current value
 	 */
 	get value(): string {
-		return this.#state.values[0];
+		return this.#state.values.current[0];
 	}
 
 	/**
 	 * Set the value
 	 */
 	set value(value: unknown) {
-		const [option, all] = getOption(this.#state, value);
-
-		if (option != null) {
-			setNext('set', this, this.#state, all, option);
-		}
+		setValue(this.#state, value);
 	}
 
 	/**
 	 * Current values
 	 */
 	get values(): string[] {
-		return this.#state.values.slice();
+		return this.#state.values.current.slice();
 	}
 
 	/**
 	 * Set the values
 	 */
 	set values(value: unknown[]) {
-		setValues(this, this.#state, value);
+		setValues(this.#state, value);
 	}
 
 	constructor() {
 		super();
 
 		this.#internals = this.attachInternals();
-		this.#state = getState(this, this.#internals);
-
-		comboboxes.set(this.#state.content, this);
-
-		states.set(this, this.#state);
-		states.set(this.#state.content, this.#state);
 	}
 
 	attributeChangedCallback(name: string, _: string | null, value: string | null): void {
+		if (this.#state == null) {
+			return;
+		}
+
 		switch (name) {
-			case 'disabled':
-			case 'readonly':
 			case 'required':
-			case 'value':
 				this[name] = this.hasAttribute(name);
 				break;
 
 			case 'max':
 			case 'min':
-				setLimit(name, this, this.#state, value == null ? undefined : Number.parseInt(value, 10));
+				setLimit(name, this.#state, value);
+				break;
+
+			case 'value':
+				this.value = value ?? '';
 				break;
 
 			default:
@@ -194,418 +320,668 @@ export class OuiComboboxElement extends HTMLElement {
 		}
 	}
 
+	/**
+	 * Clear all selected options
+	 */
 	clear(): void {
-		setValues(this, this.#state, []);
+		setValues(this.#state, []);
+	}
+
+	connectedCallback(): void {
+		if (this.#state == null) {
+			this.#initialize();
+		} else {
+			attachCombobox(this.#state);
+		}
+	}
+
+	disconnectedCallback(): void {
+		if (this.#state != null) {
+			detachCombobox(this.#state);
+		}
+	}
+
+	formDisabledCallback(disabled: boolean): void {
+		this.disabled = disabled;
 	}
 
 	formResetCallback(): void {
-		this.#state.touched = false;
+		setValues(this.#state, this.#state.values.initial, false);
+	}
 
-		this.clear();
+	formStateRestoreCallback(state: string | File | FormData, reason: unknown): void {
+		if (reason !== 'restore') {
+			return;
+		}
+
+		const parsed = typeof state === 'string' ? parse(state) : undefined;
+
+		if (!Array.isArray(parsed)) {
+			return;
+		}
+
+		if (this.#state == null) {
+			this.#restored = parsed;
+		} else {
+			setValues(this.#state, parsed);
+		}
+	}
+
+	/**
+	 * Set combobox localizations for a specific language
+	 *
+	 * @param language Language code
+	 * @param localizations Localizations for language
+	 */
+	setLocalizations(language: string, localizations: Partial<OuiComboboxLocalizations>): void;
+
+	/**
+	 * Set combobox localizations for one or more languages
+	 *
+	 * @param localizations Localizations for one or more languages
+	 */
+	setLocalizations(localizations: Record<string, Partial<OuiComboboxLocalizations>>): void;
+
+	setLocalizations(
+		first: string | Record<string, Partial<OuiComboboxLocalizations>>,
+		second?: Partial<OuiComboboxLocalizations>,
+	): void {
+		updateLocalizations(
+			typeof first === 'string'
+				? {
+						[first]: second!,
+					}
+				: first,
+			this.#state.localizations,
+		);
+	}
+
+	#initialize(): void {
+		this.tabIndex = -1;
+
+		this.#state = createState(this, this.#internals);
+
+		if (this.#restored != null) {
+			setValues(this.#state, this.#restored, false);
+
+			this.#restored = undefined;
+		}
 	}
 }
 
-type OuiComboboxAutoComplete = Record<OuiComboboxAutoCompleteType, boolean> & {
-	value: OuiComboboxAutoCompleteType;
+type OuiComboboxFilter = {
+	element: HTMLInputElement;
+	value: string;
 };
 
-type OuiComboboxAutoCompleteType = 'both' | 'inline' | 'list' | 'none';
+type OuiComboboxGroup = {
+	element: HTMLElement;
+	header: HTMLElement;
+	options: HTMLElement[];
+};
+
+type OuiComboboxLabel = {
+	element: HTMLLabelElement;
+	id: string;
+};
+
+type OuiComboboxLocalizations = {
+	empty: string | (() => string);
+	input: string | (() => string);
+	invalid: string | (() => string);
+	max: string | ((max: number) => string);
+	min: string | ((min: number) => string);
+	remove: string | ((label: string, value: string) => string);
+	results: string | ((amount: number) => string);
+	selected: string | ((amount: number) => string);
+};
+
+type OuiComboboxOptions = {
+	all: HTMLElement[];
+	selected: HTMLElement[];
+};
+
+type OuiComboboxPreview = 'none' | 'set' | 'typed';
+
+type OuiComboboxSelection = {
+	container: HTMLElement;
+	items: OuiComboboxSelectionItem[];
+};
+
+type OuiComboboxSelectionItem = {
+	button: HTMLButtonElement;
+	element: HTMLElement;
+};
 
 type OuiComboboxState = {
 	active?: HTMLElement;
-	anchor: HTMLElement;
+	anchor: OuiComboboxAnchor;
 	autocomplete: OuiComboboxAutoComplete;
 	content: HTMLElement;
 	disabled: boolean;
-	empty: HTMLElement;
-	filter: string;
+	filter: OuiComboboxFilter;
 	floatable: OuiFloatable;
+	groups?: OuiComboboxGroup[];
+	host: OuiComboboxElement;
 	id: string;
 	internals: ElementInternals;
-	label: HTMLLabelElement;
+	label: OuiComboboxLabel;
 	listeners: RemovableEventListener[];
+	localizations: Record<string, Partial<OuiComboboxLocalizations>>;
 	max?: number;
 	min?: number;
+	message: HTMLElement;
 	name: string;
 	multiple: boolean;
+	options: OuiComboboxOptions;
 	readonly: boolean;
 	required: boolean;
 	select: HTMLSelectElement;
-	selected: HTMLElement[];
-	touched: boolean;
+	selection?: OuiComboboxSelection;
 	type: OuiComboboxType;
-	values: string[];
+	values: OuiComboboxValues;
 };
 
 type OuiComboboxType = 'autocomplete' | 'select';
 
-type OuiComboboxUpdate = 'navigation' | 'none' | 'remove' | 'set' | 'typed';
+type OuiComboboxValues = {
+	current: string[];
+	initial: string[];
+};
 
 // #endregion
 
 // #region Functions
 
-function filterOptions(
-	state: OuiComboboxState,
-	options?: HTMLElement[],
-	clear?: boolean,
-): HTMLElement | undefined {
-	if (clear || state.autocomplete.none) {
-		state.filter = '';
-	}
+function applySelection(parameters: ApplySelectionParameters): void {
+	const {added, emit, option, selected, state} = parameters;
 
-	const filter = state.filter.toLocaleLowerCase();
+	const {length} = state.options.all;
 
-	const all = options ?? getOptions(state)[0];
-	const {length} = all;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
 
-	const visible: HTMLElement[] = [];
+		setAria(option, 'selected', (selected ?? state.options.selected).includes(option));
+	}
 
-	for (let index = 0; index < length; index += 1) {
-		const option = all[index];
+	const values =
+		parameters.values ??
+		(state.autocomplete.none
+			? [state.filter.element.value]
+			: (selected ?? state.options.selected).map(option => getData(option, 'value', false) ?? ''));
 
-		option.hidden = option.textContent?.toLocaleLowerCase().includes(filter) === false;
+	if (values.length === 0) {
+		values.push('');
+	}
 
-		if (!option.hidden) {
-			visible.push(option);
-		}
+	if (selected != null) {
+		state.options.selected = selected;
 	}
 
-	state.empty.hidden = visible.length > 0;
+	const update =
+		values.length === state.values.current.length
+			? values.some(value => !state.values.current.includes(value))
+			: true;
 
-	if (state.empty.hidden) {
-		return state.active != null && visible.includes(state.active) ? state.active : visible[0];
+	if (!update) {
+		return;
 	}
+
+	updateForm(state, values, emit);
+	updatePreview('set', state, option);
+	updateSelection(state, option, added, selected);
 }
 
-function generateIds(select: HTMLSelectElement, prefix: string): void {
-	const options = [...select.options];
-	const {length} = options;
+function attachCombobox(state: OuiComboboxState): void {
+	const {anchor, content, filter, label, listeners, select} = state;
 
-	for (let index = 0; index < length; index += 1) {
-		const option = options[index];
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${state.id}_label`;
 
-		if (option.id === '') {
-			option.id = `${prefix}_option_${index}`;
-		}
-	}
-}
+	select.hidden = true;
 
-function getAnchor(
-	type: OuiComboboxType,
-	id: string,
-	label: HTMLLabelElement,
-	select: HTMLSelectElement,
-	autocomplete: OuiComboboxAutoComplete,
-	multiple: boolean,
-): HTMLElement {
-	const anchor = type === 'autocomplete' ? getInput(id, select) : getBox(id, select, multiple);
+	select.insertAdjacentElement('afterend', anchor.container ?? anchor.element);
+	(anchor.container ?? anchor.element).insertAdjacentElement('afterend', content);
 
-	setAria(anchor, {
-		autocomplete: type === 'autocomplete' ? autocomplete.value : undefined,
-		controls: `${id}_content`,
-		expanded: false,
-		haspopup: 'listbox',
-		labelledby: label.id,
+	select.remove();
+
+	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
+		position: 'below-start',
+		reusable: false,
 	});
 
-	setAttribute(anchor, ATTRIBUTE_ANCHOR, '');
+	state.floatable.update();
 
-	setRole(anchor, 'combobox');
+	listeners.push(
+		on(state.host, 'focusout', () => {
+			setTimeout(() => {
+				onFocusout(state);
+			});
+		}),
+		on(content, 'click', event => {
+			onClickContent(event, content);
+		}),
+		on(content, 'toggle', () => {
+			setAria(anchor.element, 'expanded', state.floatable.open);
 
-	return anchor;
-}
+			setAria(
+				filter.element,
+				'activedescendant',
+				state.floatable.open ? state.active?.id : undefined,
+			);
 
-function getAttributeValue<Value>(
-	element: HTMLElement,
-	attribute: string,
-	possible: Set<Value>,
-	defaultValue: Value,
-): Value {
-	const value = getAttribute(element, attribute);
+			if (state.floatable.open) {
+				filter.element.focus();
+			}
+		}),
+	);
 
-	return possible.has(value as Value) ? (value as Value) : defaultValue;
+	states.map.set(state.host, state);
+	states.map.set(state.content, state);
+	states.set.add(state);
 }
 
-function getAutoComplete(element: OuiComboboxElement, select: boolean): OuiComboboxAutoComplete {
-	let value: OuiComboboxAutoCompleteType;
+function createAnchor(parameters: CreatAnchorParameters): CreateAnchor {
+	const {autocomplete, id, label, select, type} = parameters;
 
-	if (select) {
-		value = 'list';
+	let container: HTMLElement | undefined;
+	let element: HTMLElement;
+	let selection: OuiComboboxSelection | undefined;
+
+	if (parameters.type === 'autocomplete') {
+		element = createInput({
+			id,
+			label,
+			type,
+			autocomplete: autocomplete.value,
+			value: select.selectedOptions[0]?.textContent ?? '',
+		});
 	} else {
-		value = getAttributeValue(element, 'autocomplete', AUTOCOMPLETES, 'none');
+		({container, element, selection} = createButton(parameters));
 	}
 
-	return {
-		value,
-		both: value === 'both',
-		inline: value === 'inline',
-		list: value === 'list',
-		none: value === 'none',
-	};
+	setAttribute(container ?? element, ATTRIBUTE_ANCHOR, '');
+
+	return {container, element, selection};
 }
 
-function getBox(id: string, select: HTMLSelectElement, multiple: boolean): HTMLElement {
-	const box = createElement('div', {
-		id,
-		tabIndex: 0,
-		textContent: multiple ? '' : (select.selectedOptions[0]?.textContent ?? ''),
+function createButton(parameters: CreatAnchorParameters): CreateAnchor {
+	const {id, label, multiple, select} = parameters;
+
+	const element = createElement('button', {
+		aria: {
+			controls: `${id}_content`,
+			expanded: false,
+			haspopup: 'listbox',
+			labelledby: `${label.id} ${id}`,
+		},
+		property: {
+			id,
+			textContent: multiple ? '' : (select.selectedOptions[0]?.textContent ?? ''),
+		},
 	});
 
-	if (multiple) {
-		const selection = createElement(
-			'ul',
-			{
-				// tabIndex: 0, TODO: handle navigation
-			},
-			{
-				[ATTRIBUTE_SELECTION]: '',
-			},
-		);
+	if (!multiple) {
+		return {element};
+	}
 
-		for (const option of select.selectedOptions) {
-			selection.append(getSelectionItem(option));
-		}
+	const container = createElement('div');
+	const selection = createSelection(id, select);
 
-		box.append(selection);
-	}
+	container.append(selection.container, element);
 
-	return box;
+	return {container, element, selection};
 }
 
-function getContent(
-	id: string,
-	label: HTMLLabelElement,
-	select: HTMLSelectElement,
-	autocomplete: OuiComboboxAutoComplete,
-	multiple: boolean,
-): [HTMLElement, HTMLElement[], HTMLElement] {
-	const content = createElement(
-		'div',
-		{
-			id: `${id}_content`,
+function createContent(parameters: CreateContentParameters): CreateContent {
+	const {autocomplete, id, label, multiple, select, type} = parameters;
+
+	const element = createElement('div', {
+		aria: {
+			labelledby: label.id,
 		},
-		{
+		attribute: {
 			[ATTRIBUTE_CONTENT]: '',
 			popover: '',
-			tabindex: -1,
-			'aria-labelledby': label.id,
-		},
-	);
-
-	const list = createElement(
-		'ul',
-		{
-			role: 'listbox',
 		},
-		{
-			[ATTRIBUTE_LIST]: '',
-			'aria-labelledby': label.id,
-			'aria-multiselectable': multiple,
+		property: {
+			id: `${id}_content`,
+			tabIndex: -1,
 		},
-	);
+	});
 
-	const options = [...select.options];
+	const filter = createFilter({id, label, type, autocomplete: autocomplete.value});
+	const list = createList({autocomplete, id, label, multiple, select});
+	const message = createMessage();
 
-	const selected: HTMLElement[] = [];
+	if (filter != null) {
+		element.append(filter.container);
+	}
 
-	for (let index = 0; index < options.length; index += 1) {
-		const option = options[index];
+	element.append(list.element, message);
 
-		const item = createElement(
-			'li',
-			{
-				id: option.id,
-				textContent: option.textContent,
-			},
-			{
-				[ATTRIBUTE_OPTION]: '',
-				[ATTRIBUTE_OPTION_ACTIVE]: index === 0 ? '' : undefined,
-				role: 'option',
-				value: option.value,
-				'aria-selected': !autocomplete.none && option.selected,
-			},
-		);
+	return {element, filter, list, message};
+}
 
-		if (option.selected) {
-			selected.push(item);
-		}
+function createFilter(parameters: CreateFilterParameters): CreateFilter | undefined {
+	const {autocomplete, id, label, type} = parameters;
 
-		list.append(item);
+	if (type === 'autocomplete') {
+		return;
 	}
 
-	const empty = createElement(
-		'div',
-		{
-			hidden: true,
-			role: 'status',
-			textContent: 'No results found',
+	const container = createElement('div', {
+		attribute: {
+			[ATTRIBUTE_FILTER]: '',
 		},
-		{
-			[ATTRIBUTE_EMPTY]: '',
-			'aria-live': 'polite',
-		},
-	);
-
-	content.append(list, empty);
-
-	return [content, selected, empty];
-}
+	});
 
-function getFormValue(state: OuiComboboxState, values: string[]): string {
-	if (values.length === 0 || !state.multiple) {
-		return values[0];
-	}
+	const element = createInput({autocomplete, id, label, type, value: ''});
 
-	let formValues: string[] = [];
+	setAttribute(element, ATTRIBUTE_FILTER_INPUT, '');
 
-	for (const value of values) {
-		formValues.push(`${state.name}=${value}`);
-	}
+	container.append(element);
 
-	return join(formValues, '&');
+	return {container, element};
 }
 
-function getFormValues(state: OuiComboboxState, added?: boolean): [string[], boolean] {
-	let values: string[];
+function createGroup(parameters: CreateGroupParameters): OuiComboboxGroup {
+	const {autocomplete, group, groupOptions, selected} = parameters;
 
-	if (state.multiple) {
-		values =
-			typeof added === 'boolean'
-				? state.selected.map(option => getAttribute(option, 'value') ?? '')
-				: state.values;
-	} else {
-		values = [getAttribute(state.selected[0], 'value') ?? ''];
-	}
+	const element = createElement('li', {
+		aria: {
+			label: group.label,
+		},
+		property: {
+			role: 'group',
+		},
+	});
 
-	const previous = getFormValue(state, state.values);
-	const next = getFormValue(state, values);
+	const list = createElement('ul', {
+		property: {
+			role: 'none',
+		},
+	});
 
-	return [values, next !== previous];
-}
+	const header = createHeader(group);
 
-function getId(): string {
-	index += 1;
+	element.append(header, list);
 
-	return `oui_combobox_${index}`;
+	return {
+		element,
+		header,
+		options: createOptions({
+			autocomplete,
+			list,
+			selected,
+			group: header.id,
+			options: groupOptions,
+		}),
+	};
 }
 
-function getInput(id: string, select: HTMLSelectElement): HTMLInputElement {
-	return createElement(
-		'input',
-		{
-			id,
-			value: select.selectedOptions[0]?.textContent ?? '',
+function createHeader(group: HTMLOptGroupElement): HTMLElement {
+	return createElement('div', {
+		aria: {
+			hidden: true,
 		},
-		{
-			[ATTRIBUTE_ANCHOR]: '',
-			autocomplete: 'off',
-			type: 'text',
+		attribute: {
+			[ATTRIBUTE_HEADER]: '',
 		},
-	);
+		property: {
+			id: group.id,
+			textContent: group.label,
+		},
+	});
 }
 
-function getOption(
-	state: OuiComboboxState,
-	value: unknown,
-): [HTMLElement | undefined, HTMLElement[]] {
-	const [all] = getOptions(state);
-	const valueAsString = getString(value).toLocaleLowerCase();
+function createInput(parameters: CreateInputParameters): HTMLInputElement {
+	const {autocomplete, id, label, type, value} = parameters;
 
-	filterOptions(state, all, true);
+	return createElement('input', {
+		aria: {
+			autocomplete: autocomplete,
+			controls: `${id}_list`,
+			expanded: type === 'select',
+			haspopup: 'listbox',
+			labelledby: label.id,
+		},
+		attribute: {
+			autocorrect: 'off',
+			autocomplete: 'off',
+			form: '',
+			spellcheck: 'false',
+			type: 'text',
+		},
+		property: {
+			id,
+			value,
+			role: 'combobox',
+		},
+	});
+}
 
-	let match: HTMLElement | undefined;
+function createList(parameters: CreateListParameters): CreateList {
+	const {autocomplete, id, label, multiple, select} = parameters;
 
-	for (const option of all) {
-		if (getAttribute(option, 'value')?.toLocaleLowerCase() === valueAsString) {
-			match = option;
+	const element = createElement('ul', {
+		aria: {
+			labelledby: label.id,
+			multiselectable: multiple,
+		},
+		attribute: {
+			[ATTRIBUTE_LIST]: '',
+			tabindex: -1,
+		},
+		property: {
+			id: `${id}_list`,
+			role: 'listbox',
+		},
+	});
 
-			break;
+	const children = [...select.children];
+	const childrenLength = children.length;
+
+	const options: HTMLElement[] = [];
+	const selected: HTMLElement[] = [];
+
+	let groups: OuiComboboxGroup[] | undefined;
+
+	for (let childIndex = 0; childIndex < childrenLength; childIndex += 1) {
+		const child = children[childIndex];
+
+		if (child instanceof HTMLOptionElement) {
+			const option = createOption({
+				autocomplete,
+				index: childIndex,
+				option: child,
+			});
+
+			element.append(option);
+			options.push(option);
+
+			if (child.selected) {
+				selected.push(option);
+			}
+
+			continue;
 		}
+
+		if (!(child instanceof HTMLOptGroupElement)) {
+			continue;
+		}
+
+		const group = createGroup({
+			autocomplete,
+			selected,
+			group: child,
+			groupOptions: [...child.children] as HTMLOptionElement[],
+		});
+
+		groups ??= [];
+
+		element.append(group.element, ...group.options);
+		groups.push(group);
+		options.push(...group.options);
 	}
 
-	return [match, all];
+	return {element, groups, options, selected};
 }
 
-function getOptions(state: OuiComboboxState): HTMLElement[][] {
-	const all = [...state.content.querySelectorAll(`[${ATTRIBUTE_OPTION}]`)].filter(
-		option => option instanceof HTMLElement,
-	);
+function createMessage(): HTMLElement {
+	return createElement('div', {
+		aria: {
+			live: 'polite',
+		},
+		attribute: {
+			[ATTRIBUTE_MESSAGE]: '',
+		},
+		property: {
+			hidden: true,
+			role: 'status',
+		},
+	});
+}
+
+function createOption(parameters: CreateOptionParameters): HTMLElement {
+	const {autocomplete, group, option} = parameters;
+
+	const item = createElement('li', {
+		aria: {
+			selected: !autocomplete.none && option.selected,
+		},
+		attribute: {
+			[ATTRIBUTE_OPTION]: '',
+		},
+		property: {
+			id: option.id,
+			role: 'option',
+			textContent: option.textContent,
+		},
+	});
 
-	const visible = all.filter(option => !option.hidden);
+	setData(item, {
+		group,
+		value: option.value,
+	});
 
-	return [all, visible];
+	return item;
 }
 
-function getSelected(
-	update: OuiComboboxUpdate,
-	state: OuiComboboxState,
-	element: HTMLElement,
-	next?: HTMLElement,
-): boolean {
-	if (state.autocomplete.none) {
-		return false;
-	}
+function createOptions(parameters: CreateOptionsParameters): HTMLElement[] {
+	const {autocomplete, group, list, options, selected} = parameters;
+
+	const items: HTMLElement[] = [];
+
+	for (let index = 0; index < options.length; index += 1) {
+		const option = options[index];
+
+		const item = createOption({autocomplete, group, index, option});
 
-	const selected = getAria(element, 'selected') === 'true';
+		items.push(item);
 
-	if (update === 'navigation') {
-		if (state.autocomplete.both) {
-			return element === next;
+		if (option.selected) {
+			selected.push(item);
 		}
 
-		return selected;
+		list.append(item);
 	}
 
-	if (update === 'none') {
-		return selected;
-	}
+	return items;
+}
 
-	if (update === 'set') {
-		if (next == null) {
-			return selected;
-		}
+function createSelection(id: string, select: HTMLSelectElement): OuiComboboxSelection {
+	const container = createElement('ul', {
+		attribute: {
+			[ATTRIBUTE_SELECTION]: '',
+		},
+		property: {
+			id: `${id}_selection`,
+		},
+	});
 
-		if (state.multiple) {
-			return element === next ? !selected : selected;
-		}
+	const options = [...select.selectedOptions];
+
+	const items: OuiComboboxSelectionItem[] = [];
+
+	createSelectionItems({container, items, options});
+
+	const {button} = items[0] ?? {};
 
-		return element === next;
+	if (button != null) {
+		button.tabIndex = 0;
 	}
 
-	return selected;
+	return {
+		items,
+		container: container,
+	};
 }
 
-function getSelectionItem(option: HTMLElement): HTMLElement {
-	const icon = createElement(
-		'span',
-		{
-			innerHTML: '&times;',
+function createSelectionItem(
+	option: HTMLElement,
+	state?: OuiComboboxState,
+): OuiComboboxSelectionItem {
+	const element = createElement('li');
+
+	const localization = state == null ? option.textContent : getLocalization('remove', state);
+
+	const button = createElement('button', {
+		aria: {
+			label:
+				typeof localization === 'function'
+					? localization(option.textContent ?? '', getData(option, 'value', false) ?? '')
+					: localization,
 		},
-		{
-			'aria-hidden': true,
+		attribute: {
+			[ATTRIBUTE_SELECTION_ITEM]: '',
+			tabindex: -1,
 		},
-	);
+		data: {
+			option: option.id,
+		},
+	});
 
-	const label = createElement('span', {
-		textContent: option.textContent,
+	const icon = createElement('span', {
+		aria: {
+			hidden: true,
+		},
+		property: {
+			innerHTML: '&times;',
+		},
 	});
 
-	const item = createElement(
-		'li',
-		{},
-		{
-			[ATTRIBUTE_SELECTION_ITEM]: '',
-			option: option.id,
+	const label = createElement('span', {
+		property: {
+			textContent: option.textContent,
 		},
-	);
+	});
 
-	item.append(icon, label);
+	button.append(icon, label);
+	element.append(button);
 
-	return item;
+	return {
+		button,
+		element,
+	};
 }
 
-function getState(element: OuiComboboxElement, internals: ElementInternals): OuiComboboxState {
+function createSelectionItems(parameters: CreateSelectionItemsParameters): void {
+	const {container, items, options, state} = parameters;
+
+	const {length} = options;
+
+	for (let index = 0; index < length; index += 1) {
+		const option = options[index];
+
+		const item = createSelectionItem(option, state);
+
+		container.append(item.element);
+		items.push(item);
+	}
+}
+
+function createState(element: OuiComboboxElement, internals: ElementInternals): OuiComboboxState {
 	const select = element.querySelector('select');
 
 	if (select == null || select.id === '') {
@@ -618,233 +994,340 @@ function getState(element: OuiComboboxElement, internals: ElementInternals): Oui
 		throw new Error(MESSAGE_LABEL);
 	}
 
-	select.hidden = true;
-
 	element.id = select.id;
 
 	setAttribute(element, 'name', select.name === '' ? select.id : select.name);
 
-	const disabled = element.disabled || select.disabled;
+	const disabled = getBooleanAria(element, 'disabled') || select.disabled;
 	const multiple = element.multiple || select.multiple;
-	const readonly = element.readonly;
-	const required = element.required || select.required;
+	const readonly = getBooleanAria(element, 'readonly');
+	const required = getBooleanAria(element, 'required') || select.required;
 
 	const id = getId();
 	const type = multiple ? 'select' : getAttributeValue(element, 'type', TYPES, 'select');
 
 	const autocomplete = getAutoComplete(element, type === 'select');
 
+	const labelId = label.id;
+
 	label.htmlFor = id;
 	label.id = `${id}_label`;
 
-	generateIds(select, id);
-
-	const anchor = getAnchor(type, id, label, select, autocomplete, multiple);
+	generateIds(id, select);
 
-	const [content, selected, empty] = getContent(id, label, select, autocomplete, multiple);
+	const anchor = createAnchor({autocomplete, id, label, multiple, select, type});
+	const content = createContent({autocomplete, id, label, multiple, select, type});
 
 	const values =
-		selected.length === 0 ? [''] : selected.map(option => getAttribute(option, 'value') ?? '');
-
-	const floatable = createEmbeddedFloatable(anchor, content, {
-		position: 'below-start',
-		reusable: false,
-	});
-
-	floatable.update();
-
-	select.insertAdjacentElement('afterend', anchor);
-	anchor.insertAdjacentElement('afterend', content);
-
-	select.remove();
+		content.list.selected.length === 0
+			? ['']
+			: content.list.selected.map(option => getData(option, 'value', false) ?? '');
 
 	const state: OuiComboboxState = {
-		anchor,
 		autocomplete,
-		content,
 		disabled,
-		empty,
-		floatable,
 		id,
 		internals,
-		label,
 		multiple,
 		readonly,
 		required,
 		select,
-		selected,
 		type,
-		values,
-		filter: '',
+		anchor: {
+			container: anchor.container,
+			element: anchor.element,
+		},
+		active: content.list.selected[0],
+		content: content.element,
+		filter: {
+			element: content.filter?.element ?? (anchor.element as HTMLInputElement),
+			value: '',
+		},
+		floatable: undefined as never,
+		groups: content.list.groups,
+		host: element,
+		label: {
+			element: label,
+			id: labelId,
+		},
 		listeners: [],
+		localizations: {},
+		message: content.message,
 		name: element.name,
-		touched: false,
+		options: {
+			all: content.list.options,
+			selected: content.list.selected,
+		},
+		selection: anchor.selection,
+		values: {
+			current: values.slice(),
+			initial: values.slice(),
+		},
 	};
 
-	state.listeners.push(
-		on(anchor, 'blur', () => {
-			state.touched = true;
+	attachCombobox(state);
 
-			updateValidity(state);
-		}),
-		on(content, 'click', event => {
-			onContent(event, content);
-		}),
-		on(content, 'toggle', () => {
-			setAria(anchor, {
-				activedescendant: floatable.open ? state.active?.id : undefined,
-				expanded: floatable.open,
-			});
+	setDisabled(state, disabled);
+	setLimit('max', state, getAttribute(element, 'max'));
+	setLimit('min', state, getAttribute(element, 'min'));
+	setReadonly(state, readonly);
+	setRequired(state, required);
 
-			if (floatable.open) {
-				updateWidth(state);
-			}
-		}),
-	);
+	filterOptions(state);
 
-	setDisabled(element, state, disabled);
+	if (content.list.selected.length > 0) {
+		updatePreview('set', state, content.list.selected[0]);
+	}
+
+	updateForm(state, state.values.current, false);
+	updateMessage(state, getVisible(state).length);
 
 	return state;
 }
 
-function hasTextSelection(element: HTMLElement): element is HTMLInputElement {
-	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
-}
+function detachCombobox(state: OuiComboboxState): void {
+	const {content, floatable, host, label, select} = state;
 
-function onAnchor(
-	event: KeyboardEvent,
-	handler: (event: KeyboardEvent, combobox: OuiComboboxElement, state: OuiComboboxState) => void,
-): void {
-	if (event.ctrlKey || event.metaKey || event.shiftKey) {
-		return;
+	const listeners = state.listeners.splice(0);
+	const {length} = listeners;
+
+	for (let index = 0; index < length; index += 1) {
+		listeners[index]();
 	}
 
-	const combobox = findAncestor(event, TAGNAME);
-	const state = states.get(combobox!);
+	floatable.destroy();
 
-	if (combobox == null || state == null) {
-		return;
+	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;
+
+	states.map.delete(host);
+	states.map.delete(content);
+	states.set.delete(state);
+}
+
+function filterOptions(state: OuiComboboxState): HTMLElement | undefined {
+	function filter(options: HTMLElement[]): boolean {
+		const {length} = options;
+
+		let count = 0;
+
+		for (let index = 0; index < length; index += 1) {
+			const option = options[index];
+
+			option.hidden =
+				!state.autocomplete.none && !option.textContent.toLocaleLowerCase().includes(value);
+
+			if (!option.hidden) {
+				count += 1;
+
+				visible.push(option);
+			}
+		}
+
+		return count === 0;
 	}
 
-	const anchor = findAncestor(event, SELECTOR_ANCHOR);
+	const value = state.filter.element.value.toLocaleLowerCase();
+
+	const visible: HTMLElement[] = [];
+
+	if (state.groups == null) {
+		filter(state.options.all);
+	} else {
+		const groupsLength = state.groups.length;
+
+		for (let groupIndex = 0; groupIndex < groupsLength; groupIndex += 1) {
+			const {element, options} = state.groups[groupIndex];
 
-	if (anchor != null) {
-		handler(event, combobox, state);
+			element.hidden = filter(options);
+		}
 	}
+
+	updateMessage(state, visible.length);
+
+	return state.active != null && visible.includes(state.active) ? state.active : visible[0];
 }
 
-function onAnchorKeydown(
-	event: KeyboardEvent,
-	combobox: OuiComboboxElement,
+function filterOption(
 	state: OuiComboboxState,
-): void {
-	const isSelect = state.type === 'select';
+	value: unknown,
+	textContent?: boolean,
+): HTMLElement | undefined {
+	const filterTextContent = textContent ?? false;
 
-	let preventDefault = true;
+	const filter = getString(value).toLocaleLowerCase();
 
-	switch (true) {
-		case event.key === ' ' && state.type === 'select':
-		case event.key === 'Enter':
-			onEnter(combobox, state);
-			break;
+	filterOptions(state);
 
-		case event.key === 'Escape':
-			onEscape(state);
-			break;
+	const {length} = state.options.all;
+	let match: HTMLElement | undefined;
 
-		case isSelect && KEYS_ABSOLUTE.has(event.key):
-			onNavigation(event, combobox, state);
-			break;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
 
-		case !isSelect && KEYS_SELECTION.has(event.key): {
-			preventDefault = false;
+		const value = (
+			filterTextContent ? option.textContent : (getData(option, 'value', false) ?? '')
+		).toLocaleLowerCase();
 
-			if (hasTextSelection(state.anchor)) {
-				onSelection(combobox, state);
-			}
+		if (value === filter) {
+			match = option;
 
 			break;
 		}
+	}
 
-		case KEYS_NAVIGATION.has(event.key):
-			onNavigation(event, combobox, state);
-			break;
+	return match;
+}
 
-		default: {
-			preventDefault = false;
+function generateIds(prefix: string, select: HTMLSelectElement): void {
+	const elements = [...select.children].flatMap(child =>
+		child instanceof HTMLOptGroupElement
+			? [
+					child,
+					...[...child.children].filter(groupChild => groupChild instanceof HTMLOptionElement),
+				]
+			: child instanceof HTMLOptionElement
+				? [child]
+				: [],
+	);
 
-			if (event.key === 'Tab') {
-				onTab(combobox, state);
-			}
+	const {length} = elements;
 
-			break;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+
+		if (element.id === '') {
+			element.id = `${prefix}${element instanceof HTMLOptGroupElement ? '_group_' : '_option_'}${index}`;
 		}
 	}
+}
 
-	if (preventDefault) {
-		event.preventDefault();
-		event.stopPropagation();
+function getAttributeValue<Value>(
+	element: HTMLElement,
+	attribute: string,
+	possible: Set<Value>,
+	defaultValue: Value,
+): Value {
+	const value = getAttribute(element, attribute);
+
+	return possible.has(value as Value) ? (value as Value) : defaultValue;
+}
+
+function getAutoComplete(element: OuiComboboxElement, select: boolean): OuiComboboxAutoComplete {
+	let value: OuiComboboxAutoCompleteType;
+
+	if (select) {
+		value = 'list';
+	} else {
+		value = getAttributeValue(element, 'autocomplete', AUTOCOMPLETES, 'none');
 	}
+
+	return {
+		value,
+		both: value === 'both',
+		inline: value === 'inline',
+		list: value === 'list',
+		none: value === 'none',
+	};
 }
 
-function onAnchorKeyup(
-	event: KeyboardEvent,
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-): void {
-	const typed = event.key.length === 1 && EXPRESSION_TYPED.test(event.key);
+function getBooleanAria(element: HTMLElement, attribute: AnyAriaBooleanAttribute): boolean {
+	const value = getAria(element, attribute);
 
-	if (state.type === 'select') {
-		if (typed) {
-			event.preventDefault();
-			event.stopPropagation();
+	return value === true || value === 'true';
+}
 
-			onScrollTo(event, combobox, state);
-		}
+function getId(): string {
+	index += 1;
 
-		return;
-	}
+	return `oui_combobox_${index}`;
+}
 
-	let preventDefault = true;
+function getLanguage(state: OuiComboboxState): string {
+	return (
+		state.host.closest('[lang]')?.getAttribute('lang') ?? document.documentElement.lang
+	).toLowerCase();
+}
 
-	if (typed) {
-		state.filter += event.key;
-	}
+function getLocalization<Key extends keyof OuiComboboxLocalizations>(
+	key: Key,
+	state: OuiComboboxState,
+): OuiComboboxLocalizations[Key] {
+	const language = getLanguage(state);
 
-	if (
-		state.anchor instanceof HTMLInputElement &&
-		(KEYS_REMOVE.has(event.key) || state.anchor.value.length < state.filter.length)
-	) {
-		state.filter = state.anchor.value;
+	const allLocalizations = [state.localizations, LOCALIZATIONS.globals];
+	const {length} = allLocalizations;
 
-		filterOptions(state);
-	}
+	let localization: OuiComboboxLocalizations[Key] | undefined;
+	let shortLanguage: string | undefined;
 
-	switch (true) {
-		case typed:
-			onTyped(combobox, state);
-			break;
+	for (let index = 0; index < length; index += 1) {
+		const localizations = allLocalizations[index];
+
+		localization = localizations?.[language]?.[key];
 
-		case KEYS_REMOVE.has(event.key):
-			onRemove(combobox, state);
+		if (localization != null) {
 			break;
+		}
 
-		default: {
-			preventDefault = false;
+		shortLanguage ??= language.split('-')[0];
+
+		if (shortLanguage === language) {
+			continue;
+		}
+
+		localization = localizations?.[shortLanguage]?.[key];
 
+		if (localization != null) {
 			break;
 		}
 	}
 
-	if (preventDefault) {
-		event.preventDefault();
-		event.stopPropagation();
+	return localization ?? LOCALIZATIONS.defaults[key];
+}
+
+function getVisible(state: OuiComboboxState): HTMLElement[] {
+	return state.options.all.filter(option => !option.hidden);
+}
+
+function hasTextSelection(element: HTMLElement): element is HTMLInputElement {
+	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
+}
+
+function onClickContent(event: PointerEvent, content: HTMLElement): void {
+	const state = states.map.get(content);
+
+	if (state == null) {
+		return;
+	}
+
+	if (state.disabled) {
+		return;
+	}
+
+	const option = findAncestor(event, SELECTOR_OPTION);
+
+	if (!(option instanceof HTMLElement)) {
+		state.filter.element.focus();
+	} else if (state.readonly) {
+		updatePreview('set', state, option);
+	} else {
+		toggleOption(state, option);
 	}
 }
 
-function onClick(event: PointerEvent): void {
+function onClickDocument(event: PointerEvent): void {
 	const combobox = findAncestor(event, TAGNAME);
-	const state = states.get(combobox!);
+	const state = states.map.get(combobox!);
 
 	if (combobox == null || state == null) {
 		return;
@@ -853,10 +1336,12 @@ function onClick(event: PointerEvent): void {
 	const label = findAncestor(event, 'label');
 
 	if (label != null) {
-		if (label === state.label && combobox.type === 'select') {
-			state.anchor.focus();
+		if (label === state.label.element && combobox.type === 'select') {
+			state.anchor.element.focus();
 
-			state.floatable.show();
+			if (!state.disabled) {
+				state.floatable.show();
+			}
 		}
 
 		return;
@@ -865,72 +1350,273 @@ function onClick(event: PointerEvent): void {
 	const selection = findAncestor(event, `[${ATTRIBUTE_SELECTION_ITEM}]`);
 
 	if (selection != null) {
-		const option = state.selected.find(option => option.id === getAttribute(selection, 'option'));
+		const option = state.options.selected.find(
+			option => option.id === getData(selection, 'option', false),
+		);
 
-		setValue('set', combobox, state, option);
+		if (state.disabled) {
+			state.anchor.element.focus();
+		} else if (state.readonly) {
+			updateTabindices(state, option);
+		} else {
+			toggleOption(state, option);
+		}
 
 		return;
 	}
 
 	const anchor = findAncestor(event, SELECTOR_ANCHOR);
 
-	if (anchor != null) {
+	if (anchor != null && !state.disabled) {
 		state.floatable.show();
 
 		return;
 	}
 }
 
-function onContent(event: PointerEvent, content: HTMLElement): void {
-	const combobox = comboboxes.get(content);
-	const state = states.get(content);
+function onEnter(state: OuiComboboxState): void {
+	if (state.disabled || state.readonly) {
+		return;
+	}
+
+	if (hasTextSelection(state.anchor.element)) {
+		onSelection(state);
+	} else {
+		toggleOption(state, state.active);
+	}
+}
+
+function onEscape(state: OuiComboboxState): void {
+	state.floatable.hide();
+}
+
+function onFilter(
+	type: InputEvent['inputType'],
+	state: OuiComboboxState,
+	manual?: boolean,
+	emit?: boolean,
+): void {
+	if (state.disabled || state.readonly) {
+		return;
+	}
+
+	const diff = state.filter.value !== state.filter.element.value;
+
+	if (!state.autocomplete.inline && state.filter.element.value.length > 0 && !(manual ?? false)) {
+		state.floatable.show();
+	}
+
+	const option = state.autocomplete.none
+		? (state.active ?? state.options.all[0])
+		: filterOptions(state);
+
+	let update: OuiComboboxPreview | undefined;
+
+	if (type.includes('delete')) {
+		update = 'none';
+	} else if (type.includes('insert')) {
+		update = 'typed';
+	}
+
+	if (update != null) {
+		if (state.autocomplete.none) {
+			applySelection({state, added: false, emit: (emit ?? true) && diff});
+		} else {
+			updatePreview(update, state, option);
+		}
+	}
+
+	if (diff) {
+		state.filter.value = state.filter.element.value;
+
+		dispatch(state.host, 'input');
+	}
+}
+
+function onFocusout(state: OuiComboboxState): void {
+	if (
+		state.disabled ||
+		state.readonly ||
+		state.type === 'select' ||
+		state.host === document.activeElement ||
+		state.host.contains(document.activeElement)
+	) {
+		return;
+	}
+
+	const option = filterOption(state, state.filter.element.value, true);
+
+	applySelection({
+		option,
+		state,
+		added: false,
+		selected: option == null ? [] : [option],
+	});
+}
+
+function onInput(event: InputEvent): void {
+	const combobox = findAncestor(event, TAGNAME);
+	const state = states.map.get(combobox!);
+
+	if (combobox != null && state != null && event.target === state.filter.element) {
+		onFilter(event.inputType, state);
+	}
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	const combobox = findAncestor(event, TAGNAME);
+	const state = states.map.get(combobox!);
 
 	if (combobox == null || state == null) {
 		return;
 	}
 
-	const option = findAncestor(event, SELECTOR_OPTION);
+	const item = findAncestor(event, SELECTOR_SELECTION_ITEM);
+
+	if (item instanceof HTMLElement) {
+		onKeydownSelection(event, state, item);
+
+		return;
+	}
+
+	onKeydownFilter(event, state);
+}
+
+function onKeydownFilter(event: KeyboardEvent, state: OuiComboboxState): void {
+	const ignore = state.disabled || state.readonly;
+	const isSelect = state.type === 'select';
+
+	let preventDefault = ignore;
+
+	switch (true) {
+		case event.key === ' ': {
+			if (!state.disabled) {
+				state.floatable.show();
+			}
+
+			break;
+		}
+
+		case event.key === 'Enter': {
+			preventDefault = state.floatable.open;
+
+			if (preventDefault) {
+				onEnter(state);
+			} else if (!ignore && state.type === 'select') {
+				state.floatable.show();
+			} else if (!ignore) {
+				state.internals.form?.requestSubmit();
+			}
+
+			break;
+		}
+
+		case event.key === 'Escape': {
+			preventDefault = false;
+
+			onEscape(state);
+
+			break;
+		}
+
+		case !isSelect && KEYS_SELECTION.has(event.key): {
+			if (!ignore && hasTextSelection(state.anchor.element)) {
+				onSelection(state);
+			}
+
+			break;
+		}
+
+		case KEYS_NAVIGATION.has(event.key): {
+			if (!state.disabled) {
+				onNavigation(event, state);
+			}
+
+			break;
+		}
+
+		default: {
+			preventDefault = false;
+
+			if (event.key === 'Tab') {
+				onTab(state);
+			}
+
+			break;
+		}
+	}
+
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+
+function onKeydownSelection(
+	event: KeyboardEvent,
+	state: OuiComboboxState,
+	item: HTMLElement,
+): void {
+	if (KEYS_ACTIVATION.has(event.key)) {
+		event.preventDefault();
+
+		onRemoveSelection(state, item);
+
+		return;
+	}
+
+	if (state.disabled || state.selection == null) {
+		return;
+	}
+
+	const {length} = state.selection.items;
+
+	const index = state.selection.items.findIndex(selection => selection.button === item);
+
+	let next: number | undefined;
+
+	switch (event.key) {
+		case 'ArrowDown':
+			state.anchor.element.focus();
+			state.anchor.element.click();
+			return;
 
-	if (option instanceof HTMLElement) {
-		setNext('set', combobox, state, getOptions(state)[0], option);
-	}
+		case 'ArrowRight':
+		case 'ArrowLeft':
+			next = clamp(index + (event.key === 'ArrowRight' ? 1 : -1), 0, length - 1, true);
+			break;
 
-	state.anchor.focus();
-}
+		case 'End':
+			next = length - 1;
+			break;
 
-function onEnter(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	if (hasTextSelection(state.anchor)) {
-		onSelection(combobox, state);
+		case 'Home':
+			next = 0;
+			break;
 
-		return;
+		default:
+			break;
 	}
 
-	if (!state.floatable.open) {
-		state.floatable.show();
-
+	if (next == null) {
 		return;
 	}
 
-	setNext('set', combobox, state, getOptions(state)[0], state.active);
-}
+	event.preventDefault();
 
-function onEscape(state: OuiComboboxState): void {
-	state.floatable.hide();
-}
+	for (let index = 0; index < length; index += 1) {
+		const {button} = state.selection.items[index];
+		const selected = index === next;
 
-function onKeydown(event: KeyboardEvent): void {
-	onAnchor(event, onAnchorKeydown);
-}
+		button.tabIndex = selected ? 0 : -1;
 
-function onKeyup(event: KeyboardEvent): void {
-	onAnchor(event, onAnchorKeyup);
+		if (selected) {
+			button.focus();
+		}
+	}
 }
 
-function onNavigation(
-	event: KeyboardEvent,
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-): void {
+function onNavigation(event: KeyboardEvent, state: OuiComboboxState): void {
 	let skip = false;
 
 	if (!state.floatable.open) {
@@ -939,7 +1625,7 @@ function onNavigation(
 		state.floatable.show();
 	}
 
-	const [all, visible] = getOptions(state);
+	const visible = getVisible(state);
 
 	if (visible.length === 0) {
 		return;
@@ -982,376 +1668,571 @@ function onNavigation(
 		}
 	}
 
-	setNext(state.autocomplete.none ? 'none' : 'navigation', combobox, state, all, next);
-}
-
-function onRemove(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	const [all] = getOptions(state);
+	let preview: OuiComboboxPreview;
 
-	const next = filterOptions(state, all);
+	if (state.type === 'autocomplete' && (state.autocomplete.both || state.autocomplete.inline)) {
+		preview = 'set';
+	} else {
+		preview = 'none';
+	}
 
-	setNext('remove', combobox, state, all, next);
+	updatePreview(preview, state, next ?? state.active ?? visible[0]);
 }
 
-function onScrollTo(
-	event: KeyboardEvent,
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-): void {
-	const [all] = getOptions(state);
-
-	const key = event.key.toLocaleLowerCase();
+function onRemoveSelection(state: OuiComboboxState, item: HTMLElement): void {
+	if (state.disabled || state.readonly) {
+		return;
+	}
 
-	const next =
-		all.find(option => option.textContent?.toLocaleLowerCase().startsWith(key) === true) ??
-		all.find(option => option.textContent?.toLocaleLowerCase().includes(key) === true);
+	const option = state.options.selected.find(
+		option => option.id === getData(item, 'option', false),
+	);
 
-	if (next != null) {
-		setNext('navigation', combobox, state, all, next);
+	if (option != null) {
+		toggleOption(state, option);
 	}
 }
 
-function onSelection(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	state.filter = state.anchor instanceof HTMLInputElement ? state.anchor.value : '';
+function onSelection(state: OuiComboboxState): void {
+	state.filter.value =
+		state.anchor.element === state.filter.element ? state.filter.element.value : '';
 
 	filterOptions(state);
 
-	setNext('set', combobox, state, getOptions(state)[0], state.active);
+	toggleOption(state, state.active);
 }
 
-function onTab(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	if (combobox !== document.activeElement || !combobox.contains(document.activeElement)) {
-		state.floatable.hide();
-	}
+function onTab(state: OuiComboboxState): void {
+	setTimeout(() => {
+		if (state.host === document.activeElement) {
+			return;
+		}
+
+		if (
+			state.selection?.container.contains(document.activeElement) ||
+			!state.host.contains(document.activeElement)
+		) {
+			state.floatable.hide();
+		}
+	});
 }
 
-function onTyped(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	if (
-		!state.autocomplete.inline &&
-		state.anchor instanceof HTMLInputElement &&
-		state.anchor.value.length > 0
-	) {
-		state.floatable.show();
+function setDisabled(state: OuiComboboxState, value: boolean): void {
+	state.filter.element.readOnly = state.readonly || value;
+
+	setProperties('disabled', state, value);
+}
+
+function setFilter(state: OuiComboboxState, value: unknown): void {
+	if (typeof value !== 'string') {
+		return;
 	}
 
-	const options = getOptions(state)[0];
+	const type: InputEvent['inputType'] =
+		value.length < state.filter.element.value.length ? 'deleteContentBackward' : 'insertText';
 
-	const next = state.autocomplete.none ? (state.active ?? options[0]) : filterOptions(state);
+	state.filter.element.value = value;
 
-	setNext('typed', combobox, state, options, next);
+	onFilter(type, state);
 }
 
-function setDisabled(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
-	state.disabled = value;
+function setLimit(type: 'max' | 'min', state: OuiComboboxState, value?: unknown): void {
+	let actual = value;
 
-	setAria(state.anchor, 'disabled', value);
-	setProperty(combobox, 'disabled', value);
-
-	if (state.anchor instanceof HTMLInputElement) {
-		state.anchor.readOnly = value;
+	if (typeof actual === 'string') {
+		actual = Number.parseInt(actual, 10);
 	}
-}
 
-function setLimit(
-	type: 'max' | 'min',
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-	value?: number,
-): void {
 	const updateLimit =
-		typeof value === 'number' && !Number.isNaN(value) ? value !== state[type] : value == null;
+		typeof actual === 'number' && !Number.isNaN(actual) && actual >= 0
+			? actual !== state[type]
+			: actual == null;
 
 	if (updateLimit) {
-		state[type] = value;
+		state[type] = actual as number | undefined;
 
-		setAttribute(combobox, type, value);
+		setAttribute(state.host, type, actual);
 
 		updateValidity(state);
 	}
 }
 
-function setNext(
-	update: OuiComboboxUpdate,
-	combobox: OuiComboboxElement,
+/**
+ * Set combobox localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+export function setLocalizations(
+	language: string,
+	localizations: Partial<OuiComboboxLocalizations>,
+): void;
+
+/**
+ * Set combobox localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+export function setLocalizations(
+	localizations: Record<string, Partial<OuiComboboxLocalizations>>,
+): void;
+
+export function setLocalizations(
+	first: string | Record<string, Partial<OuiComboboxLocalizations>>,
+	second?: Partial<OuiComboboxLocalizations>,
+): void {
+	updateLocalizations(
+		typeof first === 'string'
+			? {
+					[first]: second!,
+				}
+			: first,
+	);
+}
+
+function setProperties(
+	key: 'disabled' | 'readonly' | 'required',
 	state: OuiComboboxState,
-	all: HTMLElement[],
-	next?: HTMLElement,
+	value: boolean,
 ): void {
-	for (const option of all) {
-		setAttribute(option, ATTRIBUTE_OPTION_ACTIVE, option === next ? '' : undefined);
-	}
+	state[key] = value;
+
+	const elements = [state.host, state.anchor.element, state.filter.element];
+	const {length} = elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
 
-	state.active = next;
+		setAria(
+			element,
+			key,
+			key !== 'readonly' || !(element instanceof HTMLButtonElement) ? value : undefined,
+		);
+	}
+}
 
-	setAria(state.anchor, 'activedescendant', next?.id);
+function setReadonly(state: OuiComboboxState, value: boolean): void {
+	state.filter.element.readOnly = state.disabled || value;
 
-	next?.scrollIntoView(scrollOptions);
+	setProperties('readonly', state, value);
+}
 
-	setValue(update, combobox, state, next);
+function setRequired(state: OuiComboboxState, value: boolean): void {
+	setProperties('required', state, value);
+	updateValidity(state);
 }
 
-function setReadonly(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
-	state.readonly = value;
+function setValue(state: OuiComboboxState, value: unknown, emit?: boolean): void {
+	if (state.autocomplete.none) {
+		state.filter.element.value = getString(value);
+
+		onFilter('insertText', state, true, emit);
+
+		return;
+	}
 
-	setAria(state.anchor, 'readonly', value);
-	setProperty(combobox, 'readonly', value);
+	const option = filterOption(state, value);
 
-	if (state.anchor instanceof HTMLInputElement) {
-		state.anchor.readOnly = value;
+	if (option != null) {
+		setValues(state, [value], emit);
 	}
 }
 
-function setRequired(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
-	state.required = value;
+function setValues(state: OuiComboboxState, value: unknown, emit?: boolean): void {
+	if (!Array.isArray(value)) {
+		return;
+	}
 
-	setAria(state.anchor, 'required', value);
-	setProperty(combobox, 'required', value);
+	const values = (state.multiple ? value : value.slice(0, 1)).map(value =>
+		getString(value).toLocaleLowerCase(),
+	);
 
-	updateValidity(state);
-}
+	if (values.length === 0) {
+		values.push('');
+	}
+
+	if (state.autocomplete.none) {
+		setValue(state, values[0], emit);
 
-function setValue(
-	update: OuiComboboxUpdate,
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-	next?: HTMLElement,
-): void {
-	if (state.disabled || state.readonly || (state.type === 'select' && update !== 'set')) {
 		return;
 	}
 
-	let added: boolean | undefined;
-	let shouldUpdate: boolean;
-	let values: string[];
+	const {length} = state.options.all;
 
-	if (update === 'set' || !(state.anchor instanceof HTMLInputElement)) {
-		added = updateSelected(update, state, next);
+	const selected: HTMLElement[] = [];
 
-		[values, shouldUpdate] = getFormValues(state, added);
-	} else {
-		const [all] = getOptions(state);
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
 
-		for (const option of all) {
-			setAria(option, 'selected', false);
+		if (values.includes(getData(option, 'value', false)?.toLocaleLowerCase() ?? '')) {
+			selected.push(option);
 		}
+	}
+
+	applySelection({
+		emit,
+		selected,
+		state,
+		added: true,
+		option: selected[0] ?? state.options.all[0],
+		values: state.autocomplete.none ? values : undefined,
+	});
+}
 
-		const input = state.anchor.value;
+function toggleOption(state: OuiComboboxState, option?: HTMLElement): void {
+	if (option == null || (!state.multiple && state.options.selected.includes(option))) {
+		state.floatable.hide();
 
-		const content = next?.textContent ?? '';
-		const value = next == null ? '' : (getAttribute(next, 'value') ?? '');
+		return;
+	}
 
-		let selected: HTMLElement | undefined;
+	const selected = state.options.selected.slice();
 
-		if (content.toLocaleLowerCase() === input.toLocaleLowerCase()) {
-			values = [value];
+	let added = true;
 
-			if (next != null) {
-				selected = next;
+	if (state.multiple) {
+		const index = selected.indexOf(option);
 
-				setAria(next, 'selected', true);
-			}
+		if (index === -1) {
+			selected.push(option);
 		} else {
-			values = [state.autocomplete.none ? input : ''];
+			added = false;
+
+			selected.splice(index, 1);
 		}
+	} else {
+		selected.splice(0, selected.length, option);
+	}
 
-		state.selected = selected == null ? [] : [selected];
+	applySelection({
+		added,
+		option,
+		selected,
+		state,
+		values: state.autocomplete.none && option != null ? [option.textContent] : undefined,
+	});
 
-		shouldUpdate = state.values[0] !== values[0];
+	if (!state.multiple) {
+		state.floatable.hide();
 	}
+}
 
-	if (shouldUpdate) {
-		updateForm(combobox, state, values);
+function updateAnchor(state: OuiComboboxState): void {
+	if (!state.multiple) {
+		return;
 	}
 
-	if (next == null) {
+	const localization = getLocalization('selected', state);
+
+	setAria(
+		state.anchor.element,
+		'label',
+		typeof localization === 'function'
+			? localization(state.options.selected.length)
+			: localization.replace('{amount}', state.options.selected.length.toString()),
+	);
+}
+
+function updateAutocomplete(
+	preview: OuiComboboxPreview,
+	state: OuiComboboxState,
+	active?: HTMLElement,
+): void {
+	if (state.multiple) {
 		return;
 	}
 
-	if (state.type === 'select') {
-		updateSelect(update, state, next, added);
-	} else if (update !== 'remove') {
-		updateAutoComplete(update, state, next);
+	const content = active?.textContent ?? state.filter.element.value;
+
+	if (
+		preview === 'typed' &&
+		!content.toLocaleLowerCase().startsWith(state.filter.element.value.toLocaleLowerCase())
+	) {
+		return;
 	}
 
-	if (update === 'set' && !state.multiple) {
-		state.floatable.hide();
+	if (state.anchor.element instanceof HTMLInputElement) {
+		const contentLength = content.length;
+		const filterLength = state.filter.element.value.length;
+
+		if (preview === 'set' || preview === 'typed') {
+			state.anchor.element.value = content;
+
+			state.anchor.element.setSelectionRange(
+				preview === 'typed' ? filterLength : contentLength,
+				contentLength,
+			);
+		}
+	} else {
+		state.anchor.element.textContent = content;
 	}
+}
 
-	setTimeout(() => {
-		updateWidth(state);
-	});
+function updateForm(state: OuiComboboxState, values: string[], emit?: boolean): void {
+	let value: string | FormData;
+
+	if (state.multiple) {
+		const {length} = values;
+
+		value = new FormData();
+
+		for (let index = 0; index < length; index += 1) {
+			(value as FormData).append(state.name, values[index]);
+		}
+	} else {
+		value = values[0];
+	}
+
+	state.values.current = values;
+
+	state.internals.setFormValue(value, JSON.stringify(values));
+
+	updateAnchor(state);
+	updateValidity(state);
+
+	if (emit ?? true) {
+		dispatch(state.host, 'change');
+	}
 }
 
-function setValues(combobox: OuiComboboxElement, state: OuiComboboxState, value: unknown): void {
-	if (!Array.isArray(value)) {
+function updateLocalizations(
+	values: Record<string, Partial<Record<string, string | GenericCallback>>>,
+	destination?: Record<string, Partial<OuiComboboxLocalizations>>,
+): void {
+	if (typeof values !== 'object' || values == null) {
 		return;
 	}
 
-	const strings = (state.multiple ? value : [value]).map(value =>
-		getString(value).toLocaleLowerCase(),
-	);
+	const localizations = destination ?? LOCALIZATIONS.globals;
 
-	const [all] = getOptions(state);
-
-	const selected: HTMLElement[] = [];
-	const values: string[] = [];
+	const languages = Object.keys(values);
+	const languagesLength = languages.length;
 
-	let next: HTMLElement | undefined;
+	let updated = false;
 
-	for (const option of all) {
-		const value = getAttribute(option, 'value');
+	for (let languagesIndex = 0; languagesIndex < languagesLength; languagesIndex += 1) {
+		const language = languages[languagesIndex];
+		const languageValue = values[language];
 
-		if (value == null || !strings.includes(value.toLocaleLowerCase())) {
+		if (typeof languageValue !== 'object' || languageValue == null) {
 			continue;
 		}
 
-		selected.push(option);
-		values.push(value);
+		const normalizedLanguage = language.toLowerCase();
 
-		next ??= option;
-	}
+		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];
 
-	for (const option of state.selected) {
-		setAria(option, 'selected', false);
+			const normalizedKey = key.toLowerCase() as keyof OuiComboboxLocalizations;
 
-		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION_ITEM}][option="${option.id}"]`)?.remove();
+			if (
+				LOCALIZATIONS.keys.has(normalizedKey) &&
+				(typeof keyValue === 'string' || typeof keyValue === 'function')
+			) {
+				updated = true;
+
+				localizations[normalizedLanguage][normalizedKey] = keyValue as never;
+			}
+		}
 	}
 
-	for (const option of selected) {
-		setAria(option, 'selected', true);
+	if (!updated) {
+		return;
+	}
 
-		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION}]`)?.append(getSelectionItem(option));
+	for (const state of states.set) {
+		updateAnchor(state);
+		updateMessage(state, getVisible(state).length);
+		updateSelectionItems(state);
 	}
+}
+
+function updateMessage(state: OuiComboboxState, visible: number): void {
+	setAttribute(state.message, ATTRIBUTE_HIDDEN, visible > 0 ? '' : undefined);
+
+	if (visible === 0) {
+		const localization = getLocalization('empty', state);
 
-	state.selected = selected.slice();
+		state.message.textContent = typeof localization === 'function' ? localization() : localization;
+	} else {
+		const localization = getLocalization('results', state);
 
-	setNext('navigation', combobox, state, all, next);
+		state.message.textContent =
+			typeof localization === 'function'
+				? localization(visible)
+				: localization.replace('{amount}', visible.toString());
+	}
 
-	updateForm(combobox, state, values);
+	state.message.hidden = false;
 }
 
-function updateAutoComplete(
-	update: OuiComboboxUpdate,
+function updatePreview(
+	preview: OuiComboboxPreview,
 	state: OuiComboboxState,
-	next: HTMLElement,
+	active?: HTMLElement,
 ): void {
-	if (!(update === 'set' || state.autocomplete.both || state.autocomplete.inline)) {
-		return;
-	}
+	const {length} = state.options.all;
 
-	const content = next.textContent ?? '';
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
 
-	if (
-		update === 'typed' &&
-		!content.toLocaleLowerCase().startsWith(state.filter.toLocaleLowerCase())
-	) {
-		return;
+		setAttribute(option, ATTRIBUTE_OPTION_ACTIVE, option === active ? '' : undefined);
 	}
 
-	const {length} = content;
+	state.active = active;
 
-	if (state.anchor instanceof HTMLInputElement) {
-		state.anchor.value = content;
+	setAria(state.filter.element, 'activedescendant', state.floatable.open ? active?.id : undefined);
 
-		state.anchor.setSelectionRange(update === 'typed' ? state.filter.length : length, length);
-	} else {
-		state.anchor.textContent = content;
+	if (state.floatable.open) {
+		active?.scrollIntoView(scrollOptions);
+	}
+
+	if (preview !== 'none') {
+		updateAutocomplete(preview, state, active);
 	}
 }
 
-function updateForm(combobox: OuiComboboxElement, state: OuiComboboxState, values: string[]): void {
-	const formValues = values.length === 0 ? [''] : values;
+function updateSelection(
+	state: OuiComboboxState,
+	active: HTMLElement | undefined,
+	added: boolean,
+	selected?: HTMLElement[],
+): void {
+	if (state.selection == null) {
+		return;
+	}
 
-	const formData = new FormData();
+	let options = active == null ? [] : [active];
 
-	for (const value of formValues) {
-		formData.append(state.name, value);
-	}
+	if (selected != null) {
+		options = selected;
 
-	state.values = formValues;
+		const {length} = state.selection.items;
 
-	state.internals.setFormValue(formData);
+		for (let index = 0; index < length; index += 1) {
+			state.selection.items[index].element.remove();
+		}
 
-	updateValidity(state);
+		state.selection.items.splice(0);
+	}
 
-	dispatch(combobox, 'change');
-}
+	if (added) {
+		createSelectionItems({
+			options,
+			state,
+			container: state.selection.container,
+			items: state.selection.items,
+		});
 
-function updateSelect(
-	update: OuiComboboxUpdate,
-	state: OuiComboboxState,
-	next: HTMLElement,
-	added?: boolean,
-): void {
-	if (update !== 'set') {
 		return;
 	}
 
-	if (!state.multiple) {
-		state.anchor.textContent = next.textContent ?? '';
+	let current = state.selection.items.findIndex(
+		item => getData(item.button, 'option', false) === active?.id,
+	);
 
+	if (current === -1) {
 		return;
 	}
 
-	if (added === true) {
-		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION}]`)?.append(getSelectionItem(next));
-	} else if (added === false) {
-		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION_ITEM}][option="${next.id}"]`)?.remove();
+	const item = state.selection.items[current];
+
+	item.element.remove();
+
+	state.selection.items.splice(current, 1);
+
+	if (state.selection.items.length === 0) {
+		state.anchor.element.focus();
+
+		return;
 	}
-}
 
-function updateSelected(
-	update: OuiComboboxUpdate,
-	state: OuiComboboxState,
-	next?: HTMLElement,
-): boolean | undefined {
-	const [all] = getOptions(state);
+	const {length} = state.selection.items;
 
-	for (const option of all) {
-		setAria(option, 'selected', getSelected(update, state, option, next));
+	if (current < 0) {
+		current = 0;
+	} else if (current >= length) {
+		current = length - 1;
 	}
 
-	if (next == null) {
-		return;
+	for (let index = 0; index < length; index += 1) {
+		const {button} = state.selection.items[index];
+
+		button.tabIndex = index === current ? 0 : -1;
 	}
 
-	if (state.type !== 'select') {
-		state.selected = [next];
+	state.selection.items[current].button.focus();
+}
 
+function updateSelectionItems(state: OuiComboboxState): void {
+	if (state.selection == null) {
 		return;
 	}
 
-	if (update !== 'set') {
+	const localization = getLocalization('remove', state);
+
+	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 ?? ''),
+		);
+	}
+}
+
+function updateTabindices(state: OuiComboboxState, active?: HTMLElement): void {
+	if (active == null || state.selection == null) {
 		return;
 	}
 
-	if (!state.multiple) {
-		state.selected = [next];
+	const next = state.selection.items.find(
+		item => getData(item.button, 'option', false) === active.id,
+	);
 
+	if (next == null) {
 		return;
 	}
 
-	const index = state.selected.indexOf(next);
-	const added = index === -1;
+	const {length} = state.selection.items;
 
-	if (added) {
-		state.selected.push(next);
-	} else {
-		state.selected.splice(index, 1);
+	for (let index = 0; index < length; index += 1) {
+		const item = state.selection.items[index];
+
+		item.button.tabIndex = item === next ? 0 : -1;
 	}
 
-	return added;
+	next.button.focus();
 }
 
 function updateValidity(state: OuiComboboxState): void {
 	if (state.autocomplete.none) {
-		const valueMissing = state.required && state.values[0].length === 0;
+		const valueMissing = state.required && state.filter.element.value.length === 0;
+
+		const localization = getLocalization('input', state);
 
 		state.internals.setValidity(
-			{
-				valueMissing,
-			},
-			INVALID_INPUT,
+			{valueMissing},
+			typeof localization === 'function' ? localization() : localization,
 		);
 
 		state.internals.checkValidity();
@@ -1359,41 +2240,66 @@ function updateValidity(state: OuiComboboxState): void {
 		return;
 	}
 
-	const rangeOverflow =
-		state.multiple && typeof state.max === 'number' && state.selected.length > state.max;
+	let error: 'badInput' | 'rangeOverflow' | 'rangeUnderflow' | undefined;
+	let message: string | undefined;
+
+	switch (true) {
+		case state.required && state.options.selected.length === 0: {
+			error = 'badInput';
+
+			const localization = getLocalization('input', state);
+
+			message = typeof localization === 'function' ? localization() : localization;
+
+			break;
+		}
+
+		case state.multiple &&
+			typeof state.max === 'number' &&
+			state.options.selected.length > state.max: {
+			error = 'rangeOverflow';
+
+			const localization = getLocalization('max', state);
+
+			message =
+				typeof localization === 'function'
+					? localization(state.max)
+					: localization.replace('{max}', state.max.toString());
 
-	const rangeUnderflow =
-		state.multiple && typeof state.min === 'number' && state.selected.length < state.min;
+			break;
+		}
+
+		case state.multiple &&
+			typeof state.min === 'number' &&
+			state.options.selected.length < state.min: {
+			error = 'rangeUnderflow';
+
+			const localization = getLocalization('min', state);
+
+			message =
+				typeof localization === 'function'
+					? localization(state.min)
+					: localization.replace('{min}', state.min.toString());
+
+			break;
+		}
 
-	const badInput = state.required && state.selected.length === 0;
+		default:
+			break;
+	}
 
 	state.internals.setValidity(
-		{
-			badInput,
-			rangeOverflow,
-			rangeUnderflow,
-		},
-		join(
-			[
-				badInput ? INVALID_BAD : undefined,
-				rangeOverflow
-					? getString(INVALID_OVERFLOW).replace('{max}', state.max!.toString())
-					: undefined,
-				rangeUnderflow
-					? getString(INVALID_UNDERFLOW).replace('{min}', state.min!.toString())
-					: undefined,
-			],
-			'; ',
-		),
+		error == null
+			? {}
+			: {
+					[error]: true,
+				},
+		message,
 	);
 
 	state.internals.checkValidity();
 }
 
-function updateWidth(state: OuiComboboxState): void {
-	setStyle(state.content, PROPERTY_STYLE, `${state.anchor.getBoundingClientRect().width}px`);
-}
-
 // #endregion
 
 // #region Variables
@@ -1404,10 +2310,18 @@ const ATTRIBUTE_ANCHOR = `${TAGNAME}-anchor`;
 
 const ATTRIBUTE_CONTENT = `${TAGNAME}-content`;
 
-const ATTRIBUTE_EMPTY = `${TAGNAME}-empty`;
+const ATTRIBUTE_FILTER = `${TAGNAME}-filter`;
+
+const ATTRIBUTE_FILTER_INPUT = `${ATTRIBUTE_FILTER}-input`;
+
+const ATTRIBUTE_HEADER = `${TAGNAME}-header`;
+
+const ATTRIBUTE_HIDDEN = `${TAGNAME}-hidden`;
 
 const ATTRIBUTE_LIST = `${TAGNAME}-list`;
 
+const ATTRIBUTE_MESSAGE = `${TAGNAME}-message`;
+
 const ATTRIBUTE_OPTION = `${TAGNAME}-option`;
 
 const ATTRIBUTE_OPTION_ACTIVE = `${TAGNAME}-option-active`;
@@ -1418,45 +2332,62 @@ const ATTRIBUTE_SELECTION_ITEM = `${TAGNAME}-selection-item`;
 
 const AUTOCOMPLETES = new Set<OuiComboboxAutoCompleteType>(['both', 'inline', 'list', 'none']);
 
-const EXPRESSION_TYPED = /\p{L}|\s/u;
-
-const INVALID_BAD = 'Please select an option from the list';
-
-const INVALID_INPUT = 'Please enter a value';
-
-const INVALID_OVERFLOW = 'Please select fewer options (maximum is {max})';
-
-const INVALID_UNDERFLOW = 'Please select more options (minimum is {min})';
-
-const KEYS_ABSOLUTE = new Set(['End', 'Home']);
+const KEYS_ACTIVATION = new Set([' ', 'Backspace', 'Delete', 'Enter']);
 
 const KEYS_NAVIGATION = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
 
-const KEYS_REMOVE = new Set(['Backspace', 'Delete']);
-
 const KEYS_SELECTION = new Set(['ArrowRight', 'End']);
 
+const LOCALIZATIONS: {
+	defaults: OuiComboboxLocalizations;
+	globals: Record<string, Partial<OuiComboboxLocalizations>>;
+	keys: Set<keyof OuiComboboxLocalizations>;
+} = {
+	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: new Set<keyof OuiComboboxLocalizations>([
+		'empty',
+		'input',
+		'invalid',
+		'max',
+		'min',
+		'remove',
+		'results',
+		'selected',
+	]),
+};
+
 const MESSAGE_LABEL = `<${TAGNAME}> must contain a <label> element for the <select> element`;
 
 const MESSAGE_SELECT = `<${TAGNAME}> must contain a valid <select> element`;
 
-const PROPERTY_STYLE = '--oui-combobox-width';
-
 const SELECTOR_ANCHOR = `[${ATTRIBUTE_ANCHOR}]`;
 
+const SELECTOR_SELECTION_ITEM = `[${ATTRIBUTE_SELECTION_ITEM}]`;
+
 const SELECTOR_OPTION = `[${ATTRIBUTE_OPTION}]`;
 
 const TYPES = new Set<OuiComboboxType>(['autocomplete', 'select']);
 
-const comboboxes = new WeakMap<HTMLElement, OuiComboboxElement>();
-
 const scrollOptions: ScrollIntoViewOptions = {
-	behavior: 'smooth',
+	behavior: 'auto',
 	block: 'nearest',
 	inline: 'nearest',
 };
 
-const states = new WeakMap<HTMLElement, OuiComboboxState>();
+const states = {
+	map: new WeakMap<HTMLElement, OuiComboboxState>(),
+	set: new Set<OuiComboboxState>(),
+};
 
 let index = 0;
 
@@ -1464,13 +2395,13 @@ let index = 0;
 
 // #region Initialization
 
-on(document, 'click', onClick);
+on(document, 'click', onClickDocument);
 
-on(document, 'keydown', onKeydown, {
+on(document, 'input', onInput, {
 	passive: false,
 });
 
-on(document, 'keyup', onKeyup, {
+on(document, 'keydown', onKeydown, {
 	passive: false,
 });