@oscarpalmer/oui 0.32.0 → 0.34.0

package/src/js/combobox.ts

@@ -1,1634 +0,0 @@
-import {clamp} from '@oscarpalmer/atoms/number';
-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';
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {setProperty} from '@oscarpalmer/toretto/property';
-import {setStyle} from '@oscarpalmer/toretto/style';
-import {createEmbeddedFloatable, type OuiFloatable} from './floatable/floatable.embedded';
-
-// #region Types
-
-declare global {
-	interface HTMLElementTagNameMap {
-		[TAGNAME]: OuiComboboxElement;
-	}
-}
-
-export class OuiComboboxElement extends HTMLElement {
-	static formAssociated = true;
-
-	static observedAttributes = ['disabled', 'max', 'min', 'readonly', 'required', 'value'];
-
-	readonly #internals: ElementInternals;
-
-	readonly #state: OuiComboboxState;
-
-	/**
-	 * Is the combobox disabled?
-	 */
-	get disabled(): boolean {
-		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 getAttribute(this, 'name') ?? '';
-	}
-
-	/**
-	 * Is the combobox readonly?
-	 */
-	get readonly(): boolean {
-		return this.hasAttribute('readonly');
-	}
-
-	/**
-	 * 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.values[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);
-		}
-	}
-
-	/**
-	 * Current values
-	 */
-	get values(): string[] {
-		return this.#state.values.slice();
-	}
-
-	/**
-	 * Set the values
-	 */
-	set values(value: unknown[]) {
-		setValues(this, 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 {
-		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));
-				break;
-
-			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;
-};
-
-type OuiComboboxAutoCompleteType = 'both' | 'inline' | 'list' | 'none';
-
-type OuiComboboxState = {
-	active?: HTMLElement;
-	anchor: HTMLElement;
-	autocomplete: OuiComboboxAutoComplete;
-	content: HTMLElement;
-	disabled: boolean;
-	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;
-	values: string[];
-};
-
-type OuiComboboxType = 'autocomplete' | 'select';
-
-type OuiComboboxUpdate = 'navigation' | 'none' | 'remove' | 'set' | 'typed';
-
-// #endregion
-
-// #region Functions
-
-function createAnchor(
-	type: OuiComboboxType,
-	id: string,
-	label: HTMLLabelElement,
-	select: HTMLSelectElement,
-	autocomplete: OuiComboboxAutoComplete,
-	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,
-	});
-
-	setAttribute(anchor, ATTRIBUTE_ANCHOR, '');
-	setRole(anchor, 'combobox');
-
-	return [anchor, selection];
-}
-
-function createBox(
-	id: string,
-	select: HTMLSelectElement,
-	multiple: boolean,
-): [HTMLElement, HTMLElement | undefined] {
-	const box = createElement('div', {
-		id,
-		tabIndex: 0,
-		textContent: multiple ? '' : (select.selectedOptions[0]?.textContent ?? ''),
-	});
-
-	let selection: HTMLElement | undefined;
-
-	if (multiple) {
-		selection = createSelection(select);
-
-		box.append(selection);
-	}
-
-	return [box, selection];
-}
-
-function createContent(
-	type: OuiComboboxType,
-	id: string,
-	label: HTMLLabelElement,
-	select: HTMLSelectElement,
-	autocomplete: OuiComboboxAutoComplete,
-	multiple: boolean,
-): [
-	HTMLElement,
-	HTMLInputElement | undefined,
-	HTMLElement[] | undefined,
-	HTMLElement[],
-	HTMLElement,
-] {
-	const content = createElement(
-		'div',
-		{
-			id: `${id}_content`,
-		},
-		{
-			[ATTRIBUTE_CONTENT]: '',
-			popover: '',
-			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 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 = createOption(index, option, autocomplete, active, group);
-
-		if (option.selected) {
-			selected.push(item);
-		}
-
-		list.append(item);
-	}
-}
-
-function createSelection(select: HTMLSelectElement): HTMLElement {
-	const selection = createElement(
-		'ul',
-		{},
-		{
-			[ATTRIBUTE_SELECTION]: '',
-		},
-	);
-
-	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 {
-	index += 1;
-
-	return `oui_combobox_${index}`;
-}
-
-function getOption(
-	state: OuiComboboxState,
-	value: unknown,
-): [HTMLElement | undefined, HTMLElement[]] {
-	const [all] = getOptions(state);
-	const valueAsString = getString(value).toLocaleLowerCase();
-
-	filterOptions(state, all, true);
-
-	let match: HTMLElement | undefined;
-
-	for (const option of all) {
-		if (getAttribute(option, 'value')?.toLocaleLowerCase() === valueAsString) {
-			match = option;
-
-			break;
-		}
-	}
-
-	return [match, all];
-}
-
-function getOptions(state: OuiComboboxState): HTMLElement[][] {
-	const all = [...state.content.querySelectorAll(`[${ATTRIBUTE_OPTION}]`)].filter(
-		option => option instanceof HTMLElement,
-	);
-
-	const visible = all.filter(option => !option.hidden);
-
-	return [all, visible];
-}
-
-function getSelected(
-	update: OuiComboboxUpdate,
-	state: OuiComboboxState,
-	element: HTMLElement,
-	next?: HTMLElement,
-): boolean {
-	if (state.autocomplete.none) {
-		return false;
-	}
-
-	const selected = getAria(element, 'selected') === 'true';
-
-	if (update === 'navigation') {
-		if (state.autocomplete.both) {
-			return element === next;
-		}
-
-		return selected;
-	}
-
-	if (update === 'none') {
-		return selected;
-	}
-
-	if (update === 'set') {
-		if (next == null) {
-			return selected;
-		}
-
-		if (state.multiple) {
-			return element === next ? !selected : selected;
-		}
-
-		return 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 || select.id === '') {
-		throw new Error(MESSAGE_SELECT);
-	}
-
-	const label = element.querySelector(`label[for="${select.id}"]`) as HTMLLabelElement;
-
-	if (label == null) {
-		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 multiple = element.multiple || select.multiple;
-	const readonly = element.readonly;
-	const required = element.required || select.required;
-
-	const id = getId();
-	const type = multiple ? 'select' : getAttributeValue(element, 'type', TYPES, 'select');
-
-	const autocomplete = getAutoComplete(element, type === 'select');
-
-	label.htmlFor = id;
-	label.id = `${id}_label`;
-
-	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',
-		reusable: false,
-	});
-
-	floatable.update();
-
-	select.insertAdjacentElement('afterend', anchor);
-	anchor.insertAdjacentElement('afterend', content);
-
-	select.remove();
-
-	const state: OuiComboboxState = {
-		anchor,
-		autocomplete,
-		content,
-		disabled,
-		empty,
-		floatable,
-		headers,
-		id,
-		internals,
-		label,
-		multiple,
-		readonly,
-		required,
-		select,
-		selected,
-		selection,
-		type,
-		values,
-		active: selected[0],
-		filter: {
-			element: filter,
-			value: '',
-		},
-		listeners: [],
-		name: element.name,
-		touched: false,
-	};
-
-	state.listeners.push(
-		on(element, 'focusout', () => {
-			state.touched = true;
-
-			updateValidity(state);
-		}),
-		on(content, 'click', event => {
-			onContent(event, content);
-		}),
-		on(content, 'toggle', () => {
-			setAria(anchor, {
-				activedescendant: floatable.open ? state.active?.id : undefined,
-				expanded: floatable.open,
-			});
-
-			if (floatable.open) {
-				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 hasTextSelection(element: HTMLElement): element is HTMLInputElement {
-	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
-}
-
-function onClick(event: PointerEvent): void {
-	const combobox = findAncestor(event, TAGNAME);
-	const state = states.get(combobox!);
-
-	if (combobox == null || state == null) {
-		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) {
-		state.floatable.show();
-
-		return;
-	}
-}
-
-function onContent(event: PointerEvent, content: HTMLElement): void {
-	const combobox = comboboxes.get(content);
-	const state = states.get(content);
-
-	if (combobox == null || state == null) {
-		return;
-	}
-
-	const option = findAncestor(event, SELECTOR_OPTION);
-
-	if (option instanceof HTMLElement) {
-		setNext('set', combobox, state, getOptions(state)[0], option);
-	}
-
-	(state.filter.element ?? state.anchor).focus();
-}
-
-function onEnter(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	if (hasTextSelection(state.anchor)) {
-		onSelection(combobox, state);
-
-		return;
-	}
-
-	if (!state.floatable.open) {
-		state.floatable.show();
-
-		return;
-	}
-
-	setNext('set', combobox, state, getOptions(state)[0], state.active);
-}
-
-function onEscape(state: OuiComboboxState): void {
-	state.floatable.hide();
-}
-
-function onInput(
-	event: KeyboardEvent,
-	handler: (event: KeyboardEvent, combobox: OuiComboboxElement, state: OuiComboboxState) => void,
-): void {
-	if (event.ctrlKey || event.metaKey) {
-		return;
-	}
-
-	const combobox = findAncestor(event, TAGNAME);
-	const state = states.get(combobox!);
-
-	if (combobox == null || state == null) {
-		return;
-	}
-
-	const input = findAncestor(event, SELECTOR_ANCHOR) ?? findAncestor(event, SELECTOR_FILTER);
-
-	if (input != null) {
-		handler(event, combobox, state);
-	}
-}
-
-function onInputKeydown(
-	event: KeyboardEvent,
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-): void {
-	const isSelect = state.type === 'select';
-
-	let preventDefault = true;
-
-	switch (true) {
-		case event.key === 'Enter':
-			onEnter(combobox, state);
-			break;
-
-		case event.key === 'Escape':
-			onEscape(state);
-			break;
-
-		case !isSelect && KEYS_SELECTION.has(event.key): {
-			preventDefault = false;
-
-			if (hasTextSelection(state.anchor)) {
-				onSelection(combobox, state);
-			}
-
-			break;
-		}
-
-		case KEYS_NAVIGATION.has(event.key):
-			onNavigation(event, combobox, state);
-			break;
-
-		default: {
-			preventDefault = false;
-
-			if (event.key === 'Tab') {
-				onTab(combobox, state);
-			}
-
-			break;
-		}
-	}
-
-	if (preventDefault) {
-		event.preventDefault();
-		event.stopPropagation();
-	}
-}
-
-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 (
-		!(filter instanceof HTMLInputElement) ||
-		!(typed || KEYS_REMOVE.has(event.key) || filter.value.length < state.filter.value.length)
-	) {
-		return;
-	}
-
-	event.preventDefault();
-	event.stopPropagation();
-
-	if (typed) {
-		state.filter.value += event.key;
-	} else {
-		state.filter.value = filter.value;
-	}
-
-	const [options] = getOptions(state);
-	const next = filterOptions(state, options);
-
-	if (typed) {
-		onTyped(combobox, state, options, next);
-	} else {
-		setNext('remove', combobox, state, options, next);
-	}
-}
-
-function onKeydown(event: KeyboardEvent): void {
-	onInput(event, onInputKeydown);
-}
-
-function onKeyup(event: KeyboardEvent): void {
-	onInput(event, onInputKeyup);
-}
-
-function onNavigation(
-	event: KeyboardEvent,
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-): void {
-	let skip = false;
-
-	if (!state.floatable.open) {
-		skip = true;
-
-		state.floatable.show();
-	}
-
-	const [all, visible] = getOptions(state);
-
-	if (visible.length === 0) {
-		return;
-	}
-
-	let next: HTMLElement | undefined;
-
-	if (skip || state.active == null) {
-		next = state.active ?? visible.at(event.key === 'ArrowDown' ? 0 : -1);
-	} else {
-		const current = visible.findIndex(option => option.id === state.active?.id);
-
-		let index: number | undefined;
-
-		switch (event.key) {
-			case 'ArrowDown':
-			case 'ArrowUp':
-				index = clamp(current + (event.key === 'ArrowDown' ? 1 : -1), 0, visible.length - 1, true);
-				break;
-
-			case 'End':
-				index = visible.length - 1;
-				break;
-
-			case 'Home':
-				index = 0;
-				break;
-
-			case 'PageDown':
-			case 'PageUp':
-				index = clamp(current + (event.key === 'PageDown' ? 10 : -10), 0, visible.length - 1);
-				break;
-
-			default:
-				break;
-		}
-
-		if (index != null) {
-			next = visible[index];
-		}
-	}
-
-	setNext(state.autocomplete.none ? 'none' : 'navigation', combobox, state, all, next);
-}
-
-function onSelection(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	state.filter.value = state.anchor instanceof HTMLInputElement ? state.anchor.value : '';
-
-	filterOptions(state);
-
-	setNext('set', combobox, state, getOptions(state)[0], state.active);
-}
-
-function onTab(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	if (combobox !== document.activeElement || !combobox.contains(document.activeElement)) {
-		state.floatable.hide();
-	}
-}
-
-function onTyped(
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-	options?: HTMLElement[],
-	next?: HTMLElement,
-): void {
-	const filter = state.filter.element ?? state.anchor;
-
-	if (!state.autocomplete.inline && filter instanceof HTMLInputElement && filter.value.length > 0) {
-		state.floatable.show();
-	}
-
-	const all = options ?? getOptions(state)[0];
-
-	const option = state.autocomplete.none
-		? (state.active ?? all[0])
-		: (next ?? filterOptions(state, options));
-
-	setNext('typed', combobox, state, all, option);
-}
-
-function setDisabled(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
-	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;
-
-	if (updateLimit) {
-		state[type] = value as number | undefined;
-
-		setAttribute(combobox, type, value);
-
-		updateValidity(state);
-	}
-}
-
-function setNext(
-	update: OuiComboboxUpdate,
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-	all: HTMLElement[],
-	next?: HTMLElement,
-): void {
-	for (const option of all) {
-		setAttribute(option, ATTRIBUTE_OPTION_ACTIVE, option === next ? '' : undefined);
-	}
-
-	state.active = next;
-
-	setAria(state.anchor, 'activedescendant', next?.id);
-
-	next?.scrollIntoView(scrollOptions);
-
-	// TODO: offset scroll to prevent options under headers
-
-	setValue(update, combobox, state, next);
-}
-
-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);
-}
-
-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,
-	next?: HTMLElement,
-): void {
-	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));
-	}
-
-	if (next == null) {
-		return;
-	}
-
-	if (state.type !== 'select') {
-		state.selected = [next];
-
-		return;
-	}
-
-	if (update !== 'set') {
-		return;
-	}
-
-	if (!state.multiple) {
-		state.selected = [next];
-
-		return;
-	}
-
-	const index = state.selected.indexOf(next);
-	const added = index === -1;
-
-	if (added) {
-		state.selected.push(next);
-	} else {
-		state.selected.splice(index, 1);
-	}
-
-	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
-
-// #region Variables
-
-const TAGNAME = 'oui-combobox';
-
-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_ACTIVE = `${TAGNAME}-option-active`;
-
-const ATTRIBUTE_SELECTION = `${TAGNAME}-selection`;
-
-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_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 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']);
-
-const comboboxes = new WeakMap<HTMLElement, OuiComboboxElement>();
-
-const scrollOptions: ScrollIntoViewOptions = {
-	behavior: 'smooth',
-	block: 'nearest',
-	inline: 'nearest',
-};
-
-const states = new WeakMap<HTMLElement, OuiComboboxState>();
-
-let index = 0;
-
-// #endregion
-
-// #region Initialization
-
-on(document, 'click', onClick);
-
-on(document, 'keydown', onKeydown, {
-	passive: false,
-});
-
-on(document, 'keyup', onKeyup, {
-	passive: false,
-});
-
-customElements.define(TAGNAME, OuiComboboxElement);
-
-// #endregion