@oscarpalmer/oui 0.30.0 → 0.32.0

package/src/js/combobox.ts

@@ -1,7 +1,7 @@
 import {clamp} from '@oscarpalmer/atoms/number';
-import {getString} from '@oscarpalmer/atoms/string';
-import {getAria, setAria} from '@oscarpalmer/toretto/aria';
-import {getAttribute, setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
+import {getString, join} from '@oscarpalmer/atoms/string';
+import {getAria, setAria, setRole} from '@oscarpalmer/toretto/aria';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {createElement} from '@oscarpalmer/toretto/create';
 import {dispatch, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
@@ -21,62 +21,148 @@ declare global {
 export class OuiComboboxElement extends HTMLElement {
 	static formAssociated = true;
 
-	static observedAttributes = ['disabled', 'required', 'value'];
+	static observedAttributes = ['disabled', 'max', 'min', 'readonly', 'required', 'value'];
 
 	readonly #internals: ElementInternals;
 
 	readonly #state: OuiComboboxState;
 
+	/**
+	 * Is the combobox disabled?
+	 */
 	get disabled(): boolean {
-		return this.#state?.disabled ?? false;
+		return this.hasAttribute('disabled');
 	}
 
+	/**
+	 * Should the combobox be disabled?
+	 */
 	set disabled(value: boolean) {
 		if (typeof value === 'boolean' && value !== this.#state.disabled) {
 			setDisabled(this, this.#state, value);
 		}
 	}
 
+	/**
+	 * Maximum number of selected options
+	 */
+	get max(): number | undefined {
+		return this.#state.max;
+	}
+
+	/**
+	 * Set the maximum number of selected options
+	 */
+	set max(value: number) {
+		setLimit('max', this, this.#state, value);
+	}
+
+	/**
+	 * Minimum number of selected options
+	 */
+	get min(): number | undefined {
+		return this.#state.min;
+	}
+
+	/**
+	 * Set the minimum number of selected options
+	 */
+	set min(value: number) {
+		setLimit('min', this, this.#state, value);
+	}
+
+	/**
+	 * Does the combobox allow multiple values?
+	 */
 	get multiple(): boolean {
 		return this.hasAttribute('multiple');
 	}
 
+	/**
+	 * Name of the combobox
+	 */
 	get name(): string {
-		return this.getAttribute('name') ?? '';
+		return getAttribute(this, 'name') ?? '';
+	}
+
+	/**
+	 * Is the combobox readonly?
+	 */
+	get readonly(): boolean {
+		return this.hasAttribute('readonly');
 	}
 
-	set name(value: string) {
-		if (typeof value === 'string') {
-			this.setAttribute('name', value);
+	/**
+	 * Should the combobox be readonly?
+	 */
+	set readonly(value: boolean) {
+		if (typeof value === 'boolean' && value !== this.#state.readonly) {
+			setReadonly(this, this.#state, value);
 		}
 	}
 
+	/**
+	 * Is the combobox required?
+	 */
 	get required(): boolean {
 		return this.hasAttribute('required');
 	}
 
+	/**
+	 * Should the combobox be required?
+	 */
 	set required(value: boolean) {
 		if (typeof value === 'boolean' && value !== this.#state.required) {
 			setRequired(this, this.#state, value);
 		}
 	}
 
+	/**
+	 * Selected options
+	 */
+	get selected(): HTMLElement[] {
+		return this.#state.selected.slice();
+	}
+
+	/**
+	 * Type of combobox
+	 */
 	get type(): OuiComboboxType {
 		return this.#state.type;
 	}
 
+	/**
+	 * Current value
+	 */
 	get value(): string {
-		return this.#state.value;
+		return this.#state.values[0];
 	}
 
+	/**
+	 * Set the value
+	 */
 	set value(value: unknown) {
 		const [option, all] = getOption(this.#state, value);
 
 		if (option != null) {
-			setNext(this, this.#state, all, 'set', option);
+			setNext('set', this, this.#state, all, option);
 		}
 	}
 
+	/**
+	 * Current values
+	 */
+	get values(): string[] {
+		return this.#state.values.slice();
+	}
+
+	/**
+	 * Set the values
+	 */
+	set values(value: unknown[]) {
+		setValues(this, this.#state, value);
+	}
+
 	constructor() {
 		super();
 
@@ -92,20 +178,38 @@ export class OuiComboboxElement extends HTMLElement {
 	attributeChangedCallback(name: string, _: string | null, value: string | null): void {
 		switch (name) {
 			case 'disabled':
-				this.disabled = this.hasAttribute('disabled');
+			case 'readonly':
+			case 'required':
+			case 'value':
+				this[name] = this.hasAttribute(name);
 				break;
 
-			case 'required':
-				this.required = this.hasAttribute('required');
+			case 'max':
+			case 'min':
+				setLimit(name, this, this.#state, value == null ? undefined : Number.parseInt(value, 10));
 				break;
 
-			case 'value':
-				this.value = value;
+			default:
 				break;
 		}
 	}
+
+	clear(): void {
+		setValues(this, this.#state, []);
+	}
+
+	formResetCallback(): void {
+		this.#state.touched = false;
+
+		this.clear();
+	}
 }
 
+type OuiComboboxFilter = {
+	element?: HTMLInputElement;
+	value: string;
+};
+
 type OuiComboboxAutoComplete = Record<OuiComboboxAutoCompleteType, boolean> & {
 	value: OuiComboboxAutoCompleteType;
 };
@@ -118,126 +222,97 @@ type OuiComboboxState = {
 	autocomplete: OuiComboboxAutoComplete;
 	content: HTMLElement;
 	disabled: boolean;
-	filter: string;
+	empty: HTMLElement;
+	filter: OuiComboboxFilter;
 	floatable: OuiFloatable;
+	headers?: HTMLElement[];
 	id: string;
 	internals: ElementInternals;
 	label: HTMLLabelElement;
 	listeners: RemovableEventListener[];
+	max?: number;
+	min?: number;
+	name: string;
 	multiple: boolean;
+	readonly: boolean;
 	required: boolean;
 	select: HTMLSelectElement;
 	selected: HTMLElement[];
+	selection?: HTMLElement;
+	touched: boolean;
 	type: OuiComboboxType;
-	value: string;
+	values: string[];
 };
 
 type OuiComboboxType = 'autocomplete' | 'select';
 
+type OuiComboboxUpdate = 'navigation' | 'none' | 'remove' | 'set' | 'typed';
+
 // #endregion
 
 // #region Functions
 
-function filterOptions(
-	state: OuiComboboxState,
-	options?: HTMLElement[],
-	clear?: boolean,
-): HTMLElement | undefined {
-	if (clear || state.autocomplete.none) {
-		state.filter = '';
-	}
-
-	const filter = state.filter.toLocaleLowerCase();
-
-	const all = options ?? getOptions(state)[0];
-	const {length} = all;
-
-	const visible: HTMLElement[] = [];
-
-	for (let index = 0; index < length; index += 1) {
-		const option = all[index];
-
-		option.hidden = option.textContent?.toLocaleLowerCase().includes(filter) === false;
-
-		if (!option.hidden) {
-			visible.push(option);
-		}
-	}
-
-	if (visible.length > 0) {
-		return state.active != null && visible.includes(state.active) ? state.active : visible[0];
-	}
-}
-
-function getAnchor(
+function createAnchor(
 	type: OuiComboboxType,
 	id: string,
-	element: OuiComboboxElement,
 	label: HTMLLabelElement,
 	select: HTMLSelectElement,
 	autocomplete: OuiComboboxAutoComplete,
-): HTMLElement {
-	const anchor =
-		type === 'autocomplete'
-			? getInput(id, element, label, select)
-			: getBox(id, element, label, select);
-
-	setAria(anchor, 'autocomplete', autocomplete.value);
-
-	setAttributes(anchor, {
-		[ATTRIBUTE_ANCHOR]: '',
-		'aria-controls': `${id}_content`,
-		'aria-expanded': false,
-		'aria-haspopup': 'listbox',
-		'aria-labelledby': label.id,
-		role: 'combobox',
+	multiple: boolean,
+): [HTMLElement, HTMLElement | undefined] {
+	const [anchor, selection] =
+		type === 'autocomplete' ? [createInput(id, select)] : createBox(id, select, multiple);
+
+	setAria(anchor, {
+		autocomplete: type === 'autocomplete' ? autocomplete.value : undefined,
+		controls: `${id}_content`,
+		expanded: false,
+		haspopup: 'listbox',
+		labelledby: label.id,
 	});
 
-	return anchor;
-}
-
-function getAutoComplete(element: OuiComboboxElement, select: boolean): OuiComboboxAutoComplete {
-	let value: OuiComboboxAutoCompleteType;
+	setAttribute(anchor, ATTRIBUTE_ANCHOR, '');
+	setRole(anchor, 'combobox');
 
-	if (select) {
-		value = 'list';
-	} else {
-		const attribute = getAttribute(element, 'autocomplete') as OuiComboboxAutoCompleteType;
-
-		value = AUTOCOMPLETES.has(attribute) ? attribute : 'none';
-	}
-
-	return {
-		value,
-		both: value === 'both',
-		inline: value === 'inline',
-		list: value === 'list',
-		none: value === 'none',
-	};
+	return [anchor, selection];
 }
 
-function getBox(
+function createBox(
 	id: string,
-	element: OuiComboboxElement,
-	label: HTMLLabelElement,
 	select: HTMLSelectElement,
-): HTMLElement {
-	return createElement('div', {
+	multiple: boolean,
+): [HTMLElement, HTMLElement | undefined] {
+	const box = createElement('div', {
 		id,
-		innerHTML: select.selectedOptions[0]?.textContent ?? '',
 		tabIndex: 0,
+		textContent: multiple ? '' : (select.selectedOptions[0]?.textContent ?? ''),
 	});
+
+	let selection: HTMLElement | undefined;
+
+	if (multiple) {
+		selection = createSelection(select);
+
+		box.append(selection);
+	}
+
+	return [box, selection];
 }
 
-function getContent(
+function createContent(
 	type: OuiComboboxType,
 	id: string,
-	element: OuiComboboxElement,
-	anchor: HTMLElement,
 	label: HTMLLabelElement,
 	select: HTMLSelectElement,
 	autocomplete: OuiComboboxAutoComplete,
-): [HTMLElement, HTMLElement[]] {
+	multiple: boolean,
+): [
+	HTMLElement,
+	HTMLInputElement | undefined,
+	HTMLElement[] | undefined,
+	HTMLElement[],
+	HTMLElement,
+] {
 	const content = createElement(
 		'div',
 		{
@@ -246,41 +321,201 @@ function getContent(
 		{
 			[ATTRIBUTE_CONTENT]: '',
 			popover: '',
-			role: 'listbox',
 			tabindex: -1,
 			'aria-labelledby': label.id,
 		},
 	);
 
+	const [filter, input] = createFilter(type, id) ?? [];
+	const [list, headers, selected] = createList(label, select, autocomplete, multiple);
+	const empty = createEmpty();
+
+	if (filter != null) {
+		content.append(filter);
+	}
+
+	content.append(list, empty);
+
+	return [content, input, headers, selected, empty];
+}
+
+function createEmpty(): HTMLElement {
+	return createElement(
+		'div',
+		{
+			hidden: true,
+			role: 'status',
+			textContent: 'No results found',
+		},
+		{
+			[ATTRIBUTE_EMPTY]: '',
+			'aria-live': 'polite',
+		},
+	);
+}
+
+function createFilter(
+	type: OuiComboboxType,
+	id: string,
+): [HTMLElement, HTMLInputElement] | undefined {
+	if (type === 'autocomplete') {
+		return;
+	}
+
+	const container = createElement(
+		'div',
+		{},
+		{
+			[ATTRIBUTE_FILTER]: '',
+		},
+	);
+
+	const label = createElement(
+		'label',
+		{
+			htmlFor: `${id}_filter`,
+			textContent: 'Filter options',
+		},
+		{
+			[ATTRIBUTE_FILTER_LABEL]: '',
+		},
+	);
+
+	const filter = createElement(
+		'input',
+		{
+			id: `${id}_filter`,
+		},
+		{
+			[ATTRIBUTE_FILTER_INPUT]: '',
+		},
+	);
+
+	container.append(label, filter);
+
+	return [container, filter];
+}
+
+function createHeader(group: HTMLOptGroupElement): HTMLElement {
+	return createElement(
+		'li',
+		{
+			id: group.id,
+			role: 'presentation',
+			textContent: group.label,
+		},
+		{
+			[ATTRIBUTE_HEADER]: '',
+		},
+	);
+}
+
+function createInput(id: string, select: HTMLSelectElement): HTMLInputElement {
+	return createElement(
+		'input',
+		{
+			id,
+			value: select.selectedOptions[0]?.textContent ?? '',
+		},
+		{
+			[ATTRIBUTE_ANCHOR]: '',
+			autocomplete: 'off',
+			type: 'text',
+		},
+	);
+}
+
+function createList(
+	label: HTMLLabelElement,
+	select: HTMLSelectElement,
+	autocomplete: OuiComboboxAutoComplete,
+	multiple: boolean,
+): [HTMLElement, HTMLElement[] | undefined, HTMLElement[]] {
 	const list = createElement(
 		'ul',
-		{},
+		{
+			role: 'listbox',
+		},
 		{
 			[ATTRIBUTE_LIST]: '',
+			'aria-labelledby': label.id,
+			'aria-multiselectable': multiple,
 		},
 	);
 
-	const options = [...select.options];
+	const groups = [...select.querySelectorAll('optgroup')];
+	const groupsLength = groups.length;
 
 	const selected: HTMLElement[] = [];
 
+	let headers: HTMLElement[] | undefined;
+
+	if (groupsLength > 0) {
+		headers = [];
+
+		let firstGroup: number | undefined;
+
+		for (let groupIndex = 0; groupIndex < groupsLength; groupIndex += 1) {
+			const group = groups[groupIndex];
+			const options = [...group.querySelectorAll('option')];
+			const optionsLength = options.length;
+
+			if (optionsLength === 0) {
+				continue;
+			}
+
+			firstGroup ??= groupIndex;
+
+			const header = createHeader(group);
+
+			headers.push(header);
+			list.append(header);
+
+			createOptions(options, autocomplete, list, selected, groupIndex === firstGroup, header.id);
+		}
+	} else {
+		createOptions([...select.options], autocomplete, list, selected, true);
+	}
+
+	return [list, headers, selected];
+}
+
+function createOption(
+	index: number,
+	option: HTMLOptionElement,
+	autocomplete: OuiComboboxAutoComplete,
+	active: boolean,
+	group?: string,
+): HTMLElement {
+	return createElement(
+		'li',
+		{
+			id: option.id,
+			role: 'option',
+			textContent: option.textContent,
+		},
+		{
+			group,
+			[ATTRIBUTE_OPTION]: '',
+			[ATTRIBUTE_OPTION_ACTIVE]: active && index === 0 ? '' : undefined,
+			value: option.value,
+			'aria-selected': !autocomplete.none && option.selected,
+		},
+	);
+}
+
+function createOptions(
+	options: HTMLOptionElement[],
+	autocomplete: OuiComboboxAutoComplete,
+	list: HTMLElement,
+	selected: HTMLElement[],
+	active: boolean,
+	group?: string,
+): void {
 	for (let index = 0; index < options.length; index += 1) {
 		const option = options[index];
 
-		const item = createElement(
-			'li',
-			{
-				id: `${id}_option_${index}`,
-				textContent: option.textContent,
-			},
-			{
-				[ATTRIBUTE_OPTION]: '',
-				[ATTRIBUTE_OPTION_CURRENT]: index === 0 ? '' : undefined,
-				role: 'option',
-				value: option.value,
-				'aria-selected': !autocomplete.none && option.selected,
-			},
-		);
+		const item = createOption(index, option, autocomplete, active, group);
 
 		if (option.selected) {
 			selected.push(item);
@@ -288,10 +523,150 @@ function getContent(
 
 		list.append(item);
 	}
+}
 
-	content.append(list);
+function createSelection(select: HTMLSelectElement): HTMLElement {
+	const selection = createElement(
+		'ul',
+		{},
+		{
+			[ATTRIBUTE_SELECTION]: '',
+		},
+	);
 
-	return [content, selected];
+	for (const option of select.selectedOptions) {
+		selection.append(getSelectionItem(option));
+	}
+
+	return selection;
+}
+
+function filterOptions(
+	state: OuiComboboxState,
+	options?: HTMLElement[],
+	clear?: boolean,
+): HTMLElement | undefined {
+	if (clear || state.autocomplete.none) {
+		state.filter.value = '';
+	}
+
+	const filter = state.filter.value.toLocaleLowerCase();
+
+	const groups = (state.headers?.reduce(
+		(record, header) => {
+			record[header.id] = 0;
+
+			return record;
+		},
+		{} as Record<string, number>,
+	) ?? {}) as Record<string, number>;
+
+	const all = options ?? getOptions(state)[0];
+	let {length} = all;
+
+	const visible: HTMLElement[] = [];
+
+	for (let index = 0; index < length; index += 1) {
+		const option = all[index];
+
+		option.hidden = option.textContent?.toLocaleLowerCase().includes(filter) === false;
+
+		if (!option.hidden) {
+			groups[getAttribute(option, 'group') ?? ''] += 1;
+
+			visible.push(option);
+		}
+	}
+
+	if (state.headers != null) {
+		length = state.headers.length;
+
+		for (let index = 0; index < length; index += 1) {
+			const header = state.headers[index];
+
+			header.hidden = groups[header.id] === 0;
+		}
+	}
+
+	state.empty.hidden = visible.length > 0;
+
+	if (state.empty.hidden) {
+		return state.active != null && visible.includes(state.active) ? state.active : visible[0];
+	}
+}
+
+function generateIds(select: HTMLSelectElement, prefix: string): void {
+	const elements = [...select.querySelectorAll('optgroup'), ...select.options];
+	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 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 getFormValue(state: OuiComboboxState, values: string[]): string {
+	if (values.length === 0 || !state.multiple) {
+		return values[0];
+	}
+
+	let formValues: string[] = [];
+
+	for (const value of values) {
+		formValues.push(`${state.name}=${value}`);
+	}
+
+	return join(formValues, '&');
+}
+
+function getFormValues(state: OuiComboboxState, added?: boolean): [string[], boolean] {
+	let values: string[];
+
+	if (state.multiple) {
+		values =
+			typeof added === 'boolean'
+				? state.selected.map(option => getAttribute(option, 'value') ?? '')
+				: state.values;
+	} else {
+		values = [getAttribute(state.selected[0], 'value') ?? ''];
+	}
+
+	const previous = getFormValue(state, state.values);
+	const next = getFormValue(state, values);
+
+	return [values, next !== previous];
 }
 
 function getId(): string {
@@ -300,40 +675,21 @@ function getId(): string {
 	return `oui_combobox_${index}`;
 }
 
-function getInput(
-	id: string,
-	element: OuiComboboxElement,
-	label: HTMLLabelElement,
-	select: HTMLSelectElement,
-): HTMLInputElement {
-	return createElement(
-		'input',
-		{
-			id,
-			value: select.selectedOptions[0]?.textContent ?? '',
-		},
-		{
-			[ATTRIBUTE_ANCHOR]: '',
-			autocomplete: 'off',
-			type: 'text',
-		},
-	);
-}
-
 function getOption(
 	state: OuiComboboxState,
 	value: unknown,
 ): [HTMLElement | undefined, HTMLElement[]] {
 	const [all] = getOptions(state);
-	const valueAsString = getString(value);
+	const valueAsString = getString(value).toLocaleLowerCase();
 
 	filterOptions(state, all, true);
 
 	let match: HTMLElement | undefined;
 
 	for (const option of all) {
-		if (option.getAttribute('value')?.toLocaleLowerCase() === valueAsString) {
+		if (getAttribute(option, 'value')?.toLocaleLowerCase() === valueAsString) {
 			match = option;
+
 			break;
 		}
 	}
@@ -352,7 +708,7 @@ function getOptions(state: OuiComboboxState): HTMLElement[][] {
 }
 
 function getSelected(
-	update: 'navigation' | 'none' | 'set' | 'typed',
+	update: OuiComboboxUpdate,
 	state: OuiComboboxState,
 	element: HTMLElement,
 	next?: HTMLElement,
@@ -361,29 +717,68 @@ function getSelected(
 		return false;
 	}
 
+	const selected = getAria(element, 'selected') === 'true';
+
 	if (update === 'navigation') {
 		if (state.autocomplete.both) {
 			return element === next;
 		}
 
-		return getAria(element, 'selected') === 'true';
+		return selected;
 	}
 
 	if (update === 'none') {
-		return getAria(element, 'selected') === 'true';
+		return selected;
 	}
 
 	if (update === 'set') {
+		if (next == null) {
+			return selected;
+		}
+
+		if (state.multiple) {
+			return element === next ? !selected : selected;
+		}
+
 		return element === next;
 	}
 
-	return state.autocomplete.both && element === next;
+	return selected;
+}
+
+function getSelectionItem(option: HTMLElement): HTMLElement {
+	const icon = createElement(
+		'span',
+		{
+			innerHTML: '&times;',
+		},
+		{
+			'aria-hidden': true,
+		},
+	);
+
+	const label = createElement('span', {
+		textContent: option.textContent,
+	});
+
+	const item = createElement(
+		'li',
+		{},
+		{
+			[ATTRIBUTE_SELECTION_ITEM]: '',
+			option: option.id,
+		},
+	);
+
+	item.append(icon, label);
+
+	return item;
 }
 
 function getState(element: OuiComboboxElement, internals: ElementInternals): OuiComboboxState {
 	const select = element.querySelector('select');
 
-	if (select == null) {
+	if (select == null || select.id === '') {
 		throw new Error(MESSAGE_SELECT);
 	}
 
@@ -396,22 +791,37 @@ function getState(element: OuiComboboxElement, internals: ElementInternals): Oui
 	select.hidden = true;
 
 	element.id = select.id;
-	element.name = select.name === '' ? select.id : select.name;
+
+	setAttribute(element, 'name', select.name === '' ? select.id : select.name);
 
 	const disabled = element.disabled || select.disabled;
 	const multiple = element.multiple || select.multiple;
+	const readonly = element.readonly;
 	const required = element.required || select.required;
 
 	const id = getId();
-	const type = multiple ? 'select' : getType(element);
+	const type = multiple ? 'select' : getAttributeValue(element, 'type', TYPES, 'select');
 
 	const autocomplete = getAutoComplete(element, type === 'select');
 
 	label.htmlFor = id;
 	label.id = `${id}_label`;
 
-	const anchor = getAnchor(type, id, element, label, select, autocomplete);
-	const [content, selected] = getContent(type, id, element, anchor, label, select, autocomplete);
+	generateIds(select, id);
+
+	const [anchor, selection] = createAnchor(type, id, label, select, autocomplete, multiple);
+
+	const [content, filter, headers, selected, empty] = createContent(
+		type,
+		id,
+		label,
+		select,
+		autocomplete,
+		multiple,
+	);
+
+	const values =
+		selected.length === 0 ? [''] : selected.map(option => getAttribute(option, 'value') ?? '');
 
 	const floatable = createEmbeddedFloatable(anchor, content, {
 		position: 'below-start',
@@ -430,21 +840,36 @@ function getState(element: OuiComboboxElement, internals: ElementInternals): Oui
 		autocomplete,
 		content,
 		disabled,
+		empty,
 		floatable,
+		headers,
 		id,
 		internals,
 		label,
 		multiple,
+		readonly,
 		required,
 		select,
 		selected,
+		selection,
 		type,
-		filter: '',
+		values,
+		active: selected[0],
+		filter: {
+			element: filter,
+			value: '',
+		},
 		listeners: [],
-		value: '',
+		name: element.name,
+		touched: false,
 	};
 
 	state.listeners.push(
+		on(element, 'focusout', () => {
+			state.touched = true;
+
+			updateValidity(state);
+		}),
 		on(content, 'click', event => {
 			onContent(event, content);
 		}),
@@ -455,30 +880,27 @@ function getState(element: OuiComboboxElement, internals: ElementInternals): Oui
 			});
 
 			if (floatable.open) {
-				setStyle(content, '--oui-combobox-width', `${anchor.getBoundingClientRect().width}px`);
+				state.filter.element?.focus();
+
+				updateWidth(state);
 			}
 		}),
 	);
 
 	setDisabled(element, state, disabled);
+	setLimit('max', element, state, getAttribute(element, 'max'));
+	setLimit('min', element, state, getAttribute(element, 'min'));
+	setReadonly(element, state, readonly);
+	setRequired(element, state, required);
 
 	return state;
 }
 
-function getType(element: OuiComboboxElement): OuiComboboxType {
-	const type = getAttribute(element, ATTRIBUTE_TYPE) as OuiComboboxType;
-
-	return TYPES.has(type) ? type : 'select';
+function hasTextSelection(element: HTMLElement): element is HTMLInputElement {
+	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
 }
 
-function onAnchor(
-	event: KeyboardEvent,
-	handler: (event: KeyboardEvent, combobox: OuiComboboxElement, state: OuiComboboxState) => void,
-): void {
-	if (event.ctrlKey || event.metaKey || event.shiftKey) {
-		return;
-	}
-
+function onClick(event: PointerEvent): void {
 	const combobox = findAncestor(event, TAGNAME);
 	const state = states.get(combobox!);
 
@@ -486,172 +908,185 @@ function onAnchor(
 		return;
 	}
 
+	const label = findAncestor(event, 'label');
+
+	if (label != null) {
+		if (label === state.label && combobox.type === 'select') {
+			state.anchor.focus();
+
+			state.floatable.show();
+		}
+
+		return;
+	}
+
+	const selection = findAncestor(event, `[${ATTRIBUTE_SELECTION_ITEM}]`);
+
+	if (selection != null) {
+		const option = state.selected.find(option => option.id === getAttribute(selection, 'option'));
+
+		setValue('set', combobox, state, option);
+
+		return;
+	}
+
 	const anchor = findAncestor(event, SELECTOR_ANCHOR);
 
 	if (anchor != null) {
-		handler(event, combobox, state);
+		state.floatable.show();
+
+		return;
 	}
 }
 
-function onAnchorKeydown(
-	event: KeyboardEvent,
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-): void {
-	let preventDefault = true;
-
-	switch (true) {
-		case event.key === 'Enter':
-			onEnter(combobox, state);
-			break;
+function onContent(event: PointerEvent, content: HTMLElement): void {
+	const combobox = comboboxes.get(content);
+	const state = states.get(content);
 
-		case event.key === 'Escape':
-			onEscape(combobox, state);
-			break;
+	if (combobox == null || state == null) {
+		return;
+	}
 
-		case state.type === 'select' && KEYS_ABSOLUTE.has(event.key):
-			onNavigation(event, combobox, state);
-			break;
+	const option = findAncestor(event, SELECTOR_OPTION);
 
-		case KEYS_NAVIGATION.has(event.key):
-			onNavigation(event, combobox, state);
-			break;
+	if (option instanceof HTMLElement) {
+		setNext('set', combobox, state, getOptions(state)[0], option);
+	}
 
-		default: {
-			preventDefault = false;
+	(state.filter.element ?? state.anchor).focus();
+}
 
-			if (event.key === 'Tab') {
-				onTab(combobox, state);
-			}
+function onEnter(combobox: OuiComboboxElement, state: OuiComboboxState): void {
+	if (hasTextSelection(state.anchor)) {
+		onSelection(combobox, state);
 
-			break;
-		}
+		return;
 	}
 
-	if (preventDefault) {
-		event.preventDefault();
-		event.stopPropagation();
+	if (!state.floatable.open) {
+		state.floatable.show();
+
+		return;
 	}
+
+	setNext('set', combobox, state, getOptions(state)[0], state.active);
 }
 
-function onAnchorKeyup(
+function onEscape(state: OuiComboboxState): void {
+	state.floatable.hide();
+}
+
+function onInput(
 	event: KeyboardEvent,
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
+	handler: (event: KeyboardEvent, combobox: OuiComboboxElement, state: OuiComboboxState) => void,
 ): void {
-	if (state.type === 'select') {
+	if (event.ctrlKey || event.metaKey) {
 		return;
 	}
 
-	let preventDefault = true;
+	const combobox = findAncestor(event, TAGNAME);
+	const state = states.get(combobox!);
 
-	const typed = event.key.length === 1 && EXPRESSION_TYPED.test(event.key);
+	if (combobox == null || state == null) {
+		return;
+	}
 
-	if (typed) {
-		state.filter += event.key;
+	const input = findAncestor(event, SELECTOR_ANCHOR) ?? findAncestor(event, SELECTOR_FILTER);
+
+	if (input != null) {
+		handler(event, combobox, state);
 	}
+}
 
-	if (
-		state.anchor instanceof HTMLInputElement &&
-		(KEYS_REMOVE.has(event.key) || state.anchor.value.length < state.filter.length)
-	) {
-		state.filter = state.anchor.value;
+function onInputKeydown(
+	event: KeyboardEvent,
+	combobox: OuiComboboxElement,
+	state: OuiComboboxState,
+): void {
+	const isSelect = state.type === 'select';
 
-		filterOptions(state);
-	}
+	let preventDefault = true;
 
 	switch (true) {
-		case typed:
-			onTyped(combobox, state);
+		case event.key === 'Enter':
+			onEnter(combobox, state);
 			break;
 
-		case KEYS_REMOVE.has(event.key):
-			onRemove(combobox, state);
+		case event.key === 'Escape':
+			onEscape(state);
 			break;
 
-		default: {
+		case !isSelect && KEYS_SELECTION.has(event.key): {
 			preventDefault = false;
 
+			if (hasTextSelection(state.anchor)) {
+				onSelection(combobox, state);
+			}
+
 			break;
 		}
-	}
-
-	if (preventDefault) {
-		event.preventDefault();
-		event.stopPropagation();
-	}
-}
 
-function onClick(event: PointerEvent): void {
-	const combobox = findAncestor(event, TAGNAME);
-	const state = states.get(combobox!);
+		case KEYS_NAVIGATION.has(event.key):
+			onNavigation(event, combobox, state);
+			break;
 
-	if (combobox == null || state == null) {
-		return;
-	}
+		default: {
+			preventDefault = false;
 
-	const label = findAncestor(event, 'label');
+			if (event.key === 'Tab') {
+				onTab(combobox, state);
+			}
 
-	if (label != null) {
-		if (label === state.label && combobox.type === 'select') {
-			state.anchor.focus();
+			break;
 		}
-
-		return;
 	}
 
-	const anchor = findAncestor(event, SELECTOR_ANCHOR);
-
-	if (anchor != null) {
-		state.floatable.show();
-
-		return;
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
 	}
 }
 
-function onContent(event: PointerEvent, content: HTMLElement): void {
-	const combobox = comboboxes.get(content);
-	const state = states.get(content);
+function onInputKeyup(
+	event: KeyboardEvent,
+	combobox: OuiComboboxElement,
+	state: OuiComboboxState,
+): void {
+	const filter = state.filter.element ?? state.anchor;
+	const typed = event.key.length === 1 && EXPRESSION_TYPED.test(event.key);
 
-	if (combobox == null || state == null) {
+	if (
+		!(filter instanceof HTMLInputElement) ||
+		!(typed || KEYS_REMOVE.has(event.key) || filter.value.length < state.filter.value.length)
+	) {
 		return;
 	}
 
-	const option = findAncestor(event, SELECTOR_OPTION);
-
-	if (option instanceof HTMLElement) {
-		setNext(combobox, state, getOptions(state)[0], 'set', option);
-	}
-
-	state.anchor.focus();
-}
+	event.preventDefault();
+	event.stopPropagation();
 
-function onEnter(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	if (state.floatable.open) {
-		setNext(combobox, state, getOptions(state)[0], 'set', state.active);
+	if (typed) {
+		state.filter.value += event.key;
 	} else {
-		state.floatable.show();
+		state.filter.value = filter.value;
 	}
-}
 
-function onEscape(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	if (!state.floatable.open) {
-		return;
-	}
+	const [options] = getOptions(state);
+	const next = filterOptions(state, options);
 
-	if (state.type === 'select') {
-		state.floatable.hide();
+	if (typed) {
+		onTyped(combobox, state, options, next);
 	} else {
-		setNext(combobox, state, getOptions(state)[0], 'set', state.active);
+		setNext('remove', combobox, state, options, next);
 	}
 }
 
 function onKeydown(event: KeyboardEvent): void {
-	onAnchor(event, onAnchorKeydown);
+	onInput(event, onInputKeydown);
 }
 
 function onKeyup(event: KeyboardEvent): void {
-	onAnchor(event, onAnchorKeyup);
+	onInput(event, onInputKeyup);
 }
 
 function onNavigation(
@@ -675,8 +1110,8 @@ function onNavigation(
 
 	let next: HTMLElement | undefined;
 
-	if (skip ?? state.active == null) {
-		next = state.active ?? visible[0];
+	if (skip || state.active == null) {
+		next = state.active ?? visible.at(event.key === 'ArrowDown' ? 0 : -1);
 	} else {
 		const current = visible.findIndex(option => option.id === state.active?.id);
 
@@ -710,15 +1145,15 @@ function onNavigation(
 		}
 	}
 
-	setNext(combobox, state, all, state.autocomplete.none ? 'none' : 'navigation', next);
+	setNext(state.autocomplete.none ? 'none' : 'navigation', combobox, state, all, next);
 }
 
-function onRemove(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	const [all] = getOptions(state);
+function onSelection(combobox: OuiComboboxElement, state: OuiComboboxState): void {
+	state.filter.value = state.anchor instanceof HTMLInputElement ? state.anchor.value : '';
 
-	const next = filterOptions(state, all);
+	filterOptions(state);
 
-	setNext(combobox, state, all, 'none', next);
+	setNext('set', combobox, state, getOptions(state)[0], state.active);
 }
 
 function onTab(combobox: OuiComboboxElement, state: OuiComboboxState): void {
@@ -727,56 +1162,58 @@ function onTab(combobox: OuiComboboxElement, state: OuiComboboxState): void {
 	}
 }
 
-function onTyped(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	function open(): void {
-		if (
-			state.anchor instanceof HTMLInputElement &&
-			state.anchor.value.length > 0 &&
-			(state.autocomplete.both || state.autocomplete.list)
-		) {
-			state.floatable.show();
-		}
-	}
+function onTyped(
+	combobox: OuiComboboxElement,
+	state: OuiComboboxState,
+	options?: HTMLElement[],
+	next?: HTMLElement,
+): void {
+	const filter = state.filter.element ?? state.anchor;
 
-	if (!state.autocomplete.none) {
-		const next = filterOptions(state);
+	if (!state.autocomplete.inline && filter instanceof HTMLInputElement && filter.value.length > 0) {
+		state.floatable.show();
+	}
 
-		state.active =
-			next != null &&
-			next.textContent?.toLocaleLowerCase().indexOf(state.filter.toLocaleLowerCase()) === 0
-				? next
-				: undefined;
+	const all = options ?? getOptions(state)[0];
 
-		if (next != null) {
-			open();
-		}
+	const option = state.autocomplete.none
+		? (state.active ?? all[0])
+		: (next ?? filterOptions(state, options));
 
-		setNext(combobox, state, getOptions(state)[0], 'typed', next);
-	} else {
-		open();
-	}
+	setNext('typed', combobox, state, all, option);
 }
 
 function setDisabled(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
-	state.disabled = value;
+	setProperties('disabled', 'disabled', combobox, state, value);
+}
+
+function setLimit(
+	type: 'max' | 'min',
+	combobox: OuiComboboxElement,
+	state: OuiComboboxState,
+	value?: unknown,
+): void {
+	const updateLimit =
+		typeof value === 'number' && !Number.isNaN(value) ? value !== state[type] : value == null;
 
-	setAria(state.anchor, 'disabled', value);
-	setProperty(combobox, 'disabled', value);
+	if (updateLimit) {
+		state[type] = value as number | undefined;
 
-	if (state.anchor instanceof HTMLInputElement) {
-		state.anchor.readOnly = value;
+		setAttribute(combobox, type, value);
+
+		updateValidity(state);
 	}
 }
 
 function setNext(
+	update: OuiComboboxUpdate,
 	combobox: OuiComboboxElement,
 	state: OuiComboboxState,
 	all: HTMLElement[],
-	update: 'navigation' | 'none' | 'set' | 'typed',
 	next?: HTMLElement,
 ): void {
 	for (const option of all) {
-		setAttribute(option, ATTRIBUTE_OPTION_CURRENT, option === next ? '' : undefined);
+		setAttribute(option, ATTRIBUTE_OPTION_ACTIVE, option === next ? '' : undefined);
 	}
 
 	state.active = next;
@@ -785,67 +1222,323 @@ function setNext(
 
 	next?.scrollIntoView(scrollOptions);
 
-	setValue(combobox, state, update, next);
+	// TODO: offset scroll to prevent options under headers
+
+	setValue(update, combobox, state, next);
 }
 
-function setRequired(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
-	state.required = value;
+function setProperties(
+	key: 'disabled' | 'readonly' | 'required',
+	property: 'disabled' | 'readOnly' | 'required',
+	combobox: OuiComboboxElement,
+	state: OuiComboboxState,
+	value: boolean,
+): void {
+	state[key] = value;
+
+	setAria(state.anchor, key, value);
+	setProperty(combobox, key, value);
+
+	if (state.filter.element != null) {
+		state.filter.element[property] = value;
+	}
+
+	if (state.anchor instanceof HTMLInputElement) {
+		state.anchor[property] = value;
+	}
+}
+
+function setReadonly(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
+	setProperties('readonly', 'readOnly', combobox, state, value);
+}
 
-	setAria(state.anchor, 'required', value);
-	setProperty(combobox, 'required', value);
+function setRequired(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
+	setProperties('required', 'required', combobox, state, value);
+	updateValidity(state);
 }
 
 function setValue(
+	update: OuiComboboxUpdate,
 	combobox: OuiComboboxElement,
 	state: OuiComboboxState,
-	update: 'navigation' | 'none' | 'set' | 'typed',
 	next?: HTMLElement,
 ): void {
-	if (state.disabled) {
+	if (state.disabled || state.readonly || (state.type === 'select' && update !== 'set')) {
+		return;
+	}
+
+	let added: boolean | undefined;
+	let shouldUpdate: boolean;
+	let values: string[];
+
+	if (update === 'set' || !(state.anchor instanceof HTMLInputElement)) {
+		added = updateSelected(update, state, next);
+
+		[values, shouldUpdate] = getFormValues(state, added);
+	} else {
+		const [all] = getOptions(state);
+
+		for (const option of all) {
+			setAria(option, 'selected', false);
+		}
+
+		const input = state.anchor.value;
+
+		const content = next?.textContent ?? '';
+		const value = next == null ? '' : (getAttribute(next, 'value') ?? '');
+
+		let selected: HTMLElement | undefined;
+
+		if (content.toLocaleLowerCase() === input.toLocaleLowerCase()) {
+			values = [value];
+
+			if (next != null) {
+				selected = next;
+
+				setAria(next, 'selected', true);
+			}
+		} else {
+			values = [state.autocomplete.none ? input : ''];
+		}
+
+		state.selected = selected == null ? [] : [selected];
+
+		shouldUpdate = state.values[0] !== values[0];
+	}
+
+	if (shouldUpdate) {
+		updateForm(combobox, state, values);
+	}
+
+	if (next == null) {
+		return;
+	}
+
+	if (state.type === 'select') {
+		updateSelect(update, state, next, added);
+	} else if (update !== 'remove') {
+		updateAutoComplete(update, state, next);
+	}
+
+	if (update === 'set' && !state.multiple) {
+		state.floatable.hide();
+	}
+
+	setTimeout(() => {
+		updateWidth(state);
+	});
+}
+
+function setValues(combobox: OuiComboboxElement, state: OuiComboboxState, value: unknown): void {
+	if (!Array.isArray(value)) {
+		return;
+	}
+
+	const strings = (state.multiple ? value : [value]).map(value =>
+		getString(value).toLocaleLowerCase(),
+	);
+
+	const [all] = getOptions(state);
+
+	const selected: HTMLElement[] = [];
+	const values: string[] = [];
+
+	let next: HTMLElement | undefined;
+
+	for (const option of all) {
+		const value = getAttribute(option, 'value');
+
+		if (value == null || !strings.includes(value.toLocaleLowerCase())) {
+			continue;
+		}
+
+		selected.push(option);
+		values.push(value);
+
+		next ??= option;
+	}
+
+	for (const option of state.selected) {
+		setAria(option, 'selected', false);
+
+		state.selection?.querySelector(`[option="${option.id}"]`)?.remove();
+	}
+
+	for (const option of selected) {
+		setAria(option, 'selected', true);
+
+		state.selection?.append(getSelectionItem(option));
+	}
+
+	state.selected = selected.slice();
+
+	setNext('navigation', combobox, state, all, next);
+
+	updateForm(combobox, state, values);
+}
+
+function updateAutoComplete(
+	update: OuiComboboxUpdate,
+	state: OuiComboboxState,
+	next: HTMLElement,
+): void {
+	if (!(update === 'set' || state.autocomplete.both || state.autocomplete.inline)) {
+		return;
+	}
+
+	const content = next.textContent ?? '';
+
+	if (
+		update === 'typed' &&
+		!content.toLocaleLowerCase().startsWith(state.filter.value.toLocaleLowerCase())
+	) {
+		return;
+	}
+
+	const {length} = content;
+
+	if (state.anchor instanceof HTMLInputElement) {
+		state.anchor.value = content;
+
+		state.anchor.setSelectionRange(update === 'typed' ? state.filter.value.length : length, length);
+	} else {
+		state.anchor.textContent = content;
+	}
+}
+
+function updateForm(combobox: OuiComboboxElement, state: OuiComboboxState, values: string[]): void {
+	const formValues = values.length === 0 ? [''] : values;
+
+	const formData = new FormData();
+
+	for (const value of formValues) {
+		formData.append(state.name, value);
+	}
+
+	state.values = formValues;
+
+	state.internals.setFormValue(formData);
+
+	updateValidity(state);
+
+	dispatch(combobox, 'change');
+}
+
+function updateSelect(
+	update: OuiComboboxUpdate,
+	state: OuiComboboxState,
+	next: HTMLElement,
+	added?: boolean,
+): void {
+	if (update !== 'set') {
+		return;
+	}
+
+	if (!state.multiple) {
+		state.anchor.textContent = next.textContent ?? '';
+
 		return;
 	}
 
+	if (added === true) {
+		state.selection?.append(getSelectionItem(next));
+	} else if (added === false) {
+		state.selection?.querySelector(`[option="${next.id}"]`)?.remove();
+	}
+}
+
+function updateSelected(
+	update: OuiComboboxUpdate,
+	state: OuiComboboxState,
+	next?: HTMLElement,
+): boolean | undefined {
 	const [all] = getOptions(state);
 
 	for (const option of all) {
 		setAria(option, 'selected', getSelected(update, state, option, next));
 	}
 
-	state.select.value = next?.getAttribute('value') ?? '';
-
-	if (state.value !== state.select.value) {
-		state.value = state.select.value;
+	if (next == null) {
+		return;
+	}
 
-		state.internals.setFormValue(state.value);
+	if (state.type !== 'select') {
+		state.selected = [next];
 
-		dispatch(combobox, 'change');
-		dispatch(state.select, 'change');
+		return;
 	}
 
-	if (next == null || update === 'none') {
+	if (update !== 'set') {
 		return;
 	}
 
-	if (update === 'set' || state.autocomplete.both || state.autocomplete.inline) {
-		const textContent = next.textContent ?? '';
+	if (!state.multiple) {
+		state.selected = [next];
 
-		if (state.anchor instanceof HTMLInputElement) {
-			state.anchor.value = textContent;
-		} else {
-			state.anchor.innerHTML = textContent;
-		}
+		return;
+	}
 
-		if (state.anchor instanceof HTMLInputElement) {
-			state.anchor.setSelectionRange(
-				update === 'typed' ? state.filter.length : textContent.length,
-				textContent.length,
-			);
-		}
+	const index = state.selected.indexOf(next);
+	const added = index === -1;
+
+	if (added) {
+		state.selected.push(next);
+	} else {
+		state.selected.splice(index, 1);
 	}
 
-	if (update === 'set') {
-		state.floatable.hide();
+	return added;
+}
+
+function updateValidity(state: OuiComboboxState): void {
+	if (state.autocomplete.none) {
+		const valueMissing = state.required && state.values[0].length === 0;
+
+		state.internals.setValidity(
+			{
+				valueMissing,
+			},
+			INVALID_INPUT,
+		);
+
+		state.internals.checkValidity();
+
+		return;
 	}
+
+	const rangeOverflow =
+		state.multiple && typeof state.max === 'number' && state.selected.length > state.max;
+
+	const rangeUnderflow =
+		state.multiple && typeof state.min === 'number' && state.selected.length < state.min;
+
+	const badInput = state.required && state.selected.length === 0;
+
+	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,
+			],
+			'; ',
+		),
+	);
+
+	state.internals.checkValidity();
+}
+
+function updateWidth(state: OuiComboboxState): void {
+	setStyle(state.content, PROPERTY_STYLE, `${state.anchor.getBoundingClientRect().width}px`);
 }
 
 // #endregion
@@ -858,30 +1551,54 @@ 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_FILTER_LABEL = `${ATTRIBUTE_FILTER}-label`;
+
+const ATTRIBUTE_HEADER = `${TAGNAME}-header`;
+
 const ATTRIBUTE_LIST = `${TAGNAME}-list`;
 
 const ATTRIBUTE_OPTION = `${TAGNAME}-option`;
 
-const ATTRIBUTE_OPTION_CURRENT = `${TAGNAME}-option-current`;
+const ATTRIBUTE_OPTION_ACTIVE = `${TAGNAME}-option-active`;
+
+const ATTRIBUTE_SELECTION = `${TAGNAME}-selection`;
 
-const ATTRIBUTE_TYPE = 'type';
+const ATTRIBUTE_SELECTION_ITEM = `${TAGNAME}-selection-item`;
 
-const AUTOCOMPLETES = new Set<keyof OuiComboboxAutoComplete>(['both', 'inline', 'list', 'none']);
+const AUTOCOMPLETES = new Set<OuiComboboxAutoCompleteType>(['both', 'inline', 'list', 'none']);
 
 const EXPRESSION_TYPED = /\p{L}|\s/u;
 
-const KEYS_ABSOLUTE = new Set(['End', 'Home']);
+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_NAVIGATION = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
 
 const KEYS_REMOVE = new Set(['Backspace', 'Delete']);
 
+const KEYS_SELECTION = new Set(['ArrowRight', 'End']);
+
 const MESSAGE_LABEL = `<${TAGNAME}> must contain a <label> element for the <select> element`;
 
-const MESSAGE_SELECT = `<${TAGNAME}> must contain a <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_FILTER = `[${ATTRIBUTE_FILTER_INPUT}]`;
+
 const SELECTOR_OPTION = `[${ATTRIBUTE_OPTION}]`;
 
 const TYPES = new Set<OuiComboboxType>(['autocomplete', 'select']);