@oscarpalmer/oui 0.31.0 → 0.32.0

package/src/js/combobox.ts

@@ -205,6 +205,11 @@ export class OuiComboboxElement extends HTMLElement {
 	}
 }
 
+type OuiComboboxFilter = {
+	element?: HTMLInputElement;
+	value: string;
+};
+
 type OuiComboboxAutoComplete = Record<OuiComboboxAutoCompleteType, boolean> & {
 	value: OuiComboboxAutoCompleteType;
 };
@@ -218,8 +223,9 @@ type OuiComboboxState = {
 	content: HTMLElement;
 	disabled: boolean;
 	empty: HTMLElement;
-	filter: string;
+	filter: OuiComboboxFilter;
 	floatable: OuiFloatable;
+	headers?: HTMLElement[];
 	id: string;
 	internals: ElementInternals;
 	label: HTMLLabelElement;
@@ -232,6 +238,7 @@ type OuiComboboxState = {
 	required: boolean;
 	select: HTMLSelectElement;
 	selected: HTMLElement[];
+	selection?: HTMLElement;
 	touched: boolean;
 	type: OuiComboboxType;
 	values: string[];
@@ -245,61 +252,16 @@ type OuiComboboxUpdate = 'navigation' | 'none' | 'remove' | 'set' | 'typed';
 
 // #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);
-		}
-	}
-
-	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 options = [...select.options];
-	const {length} = options;
-
-	for (let index = 0; index < length; index += 1) {
-		const option = options[index];
-
-		if (option.id === '') {
-			option.id = `${prefix}_option_${index}`;
-		}
-	}
-}
-
-function getAnchor(
+function createAnchor(
 	type: OuiComboboxType,
 	id: string,
 	label: HTMLLabelElement,
 	select: HTMLSelectElement,
 	autocomplete: OuiComboboxAutoComplete,
 	multiple: boolean,
-): HTMLElement {
-	const anchor = type === 'autocomplete' ? getInput(id, select) : getBox(id, select, multiple);
+): [HTMLElement, HTMLElement | undefined] {
+	const [anchor, selection] =
+		type === 'autocomplete' ? [createInput(id, select)] : createBox(id, select, multiple);
 
 	setAria(anchor, {
 		autocomplete: type === 'autocomplete' ? autocomplete.value : undefined,
@@ -310,76 +272,47 @@ function getAnchor(
 	});
 
 	setAttribute(anchor, ATTRIBUTE_ANCHOR, '');
-
 	setRole(anchor, 'combobox');
 
-	return anchor;
+	return [anchor, selection];
 }
 
-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 getBox(id: string, select: HTMLSelectElement, multiple: boolean): HTMLElement {
+function createBox(
+	id: string,
+	select: HTMLSelectElement,
+	multiple: boolean,
+): [HTMLElement, HTMLElement | undefined] {
 	const box = createElement('div', {
 		id,
 		tabIndex: 0,
 		textContent: multiple ? '' : (select.selectedOptions[0]?.textContent ?? ''),
 	});
 
-	if (multiple) {
-		const selection = createElement(
-			'ul',
-			{
-				// tabIndex: 0, TODO: handle navigation
-			},
-			{
-				[ATTRIBUTE_SELECTION]: '',
-			},
-		);
+	let selection: HTMLElement | undefined;
 
-		for (const option of select.selectedOptions) {
-			selection.append(getSelectionItem(option));
-		}
+	if (multiple) {
+		selection = createSelection(select);
 
 		box.append(selection);
 	}
 
-	return box;
+	return [box, selection];
 }
 
-function getContent(
+function createContent(
+	type: OuiComboboxType,
 	id: string,
 	label: HTMLLabelElement,
 	select: HTMLSelectElement,
 	autocomplete: OuiComboboxAutoComplete,
 	multiple: boolean,
-): [HTMLElement, HTMLElement[], HTMLElement] {
+): [
+	HTMLElement,
+	HTMLInputElement | undefined,
+	HTMLElement[] | undefined,
+	HTMLElement[],
+	HTMLElement,
+] {
 	const content = createElement(
 		'div',
 		{
@@ -393,6 +326,111 @@ function getContent(
 		},
 	);
 
+	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',
 		{
@@ -405,27 +443,79 @@ function getContent(
 		},
 	);
 
-	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: option.id,
-				textContent: option.textContent,
-			},
-			{
-				[ATTRIBUTE_OPTION]: '',
-				[ATTRIBUTE_OPTION_ACTIVE]: 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);
@@ -433,23 +523,118 @@ function getContent(
 
 		list.append(item);
 	}
+}
 
-	const empty = createElement(
-		'div',
-		{
-			hidden: true,
-			role: 'status',
-			textContent: 'No results found',
-		},
+function createSelection(select: HTMLSelectElement): HTMLElement {
+	const selection = createElement(
+		'ul',
+		{},
 		{
-			[ATTRIBUTE_EMPTY]: '',
-			'aria-live': 'polite',
+			[ATTRIBUTE_SELECTION]: '',
 		},
 	);
 
-	content.append(list, empty);
+	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];
 
-	return [content, selected, empty];
+		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 {
@@ -490,21 +675,6 @@ function getId(): string {
 	return `oui_combobox_${index}`;
 }
 
-function getInput(id: string, select: HTMLSelectElement): HTMLInputElement {
-	return createElement(
-		'input',
-		{
-			id,
-			value: select.selectedOptions[0]?.textContent ?? '',
-		},
-		{
-			[ATTRIBUTE_ANCHOR]: '',
-			autocomplete: 'off',
-			type: 'text',
-		},
-	);
-}
-
 function getOption(
 	state: OuiComboboxState,
 	value: unknown,
@@ -639,9 +809,16 @@ function getState(element: OuiComboboxElement, internals: ElementInternals): Oui
 
 	generateIds(select, id);
 
-	const anchor = getAnchor(type, id, label, select, autocomplete, multiple);
+	const [anchor, selection] = createAnchor(type, id, label, select, autocomplete, multiple);
 
-	const [content, selected, empty] = getContent(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') ?? '');
@@ -665,6 +842,7 @@ function getState(element: OuiComboboxElement, internals: ElementInternals): Oui
 		disabled,
 		empty,
 		floatable,
+		headers,
 		id,
 		internals,
 		label,
@@ -673,16 +851,21 @@ function getState(element: OuiComboboxElement, internals: ElementInternals): Oui
 		required,
 		select,
 		selected,
+		selection,
 		type,
 		values,
-		filter: '',
+		active: selected[0],
+		filter: {
+			element: filter,
+			value: '',
+		},
 		listeners: [],
 		name: element.name,
 		touched: false,
 	};
 
 	state.listeners.push(
-		on(anchor, 'blur', () => {
+		on(element, 'focusout', () => {
 			state.touched = true;
 
 			updateValidity(state);
@@ -697,12 +880,18 @@ function getState(element: OuiComboboxElement, internals: ElementInternals): Oui
 			});
 
 			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;
 }
@@ -711,11 +900,87 @@ function hasTextSelection(element: HTMLElement): element is HTMLInputElement {
 	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
 }
 
-function onAnchor(
+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 || event.shiftKey) {
+	if (event.ctrlKey || event.metaKey) {
 		return;
 	}
 
@@ -726,14 +991,14 @@ function onAnchor(
 		return;
 	}
 
-	const anchor = findAncestor(event, SELECTOR_ANCHOR);
+	const input = findAncestor(event, SELECTOR_ANCHOR) ?? findAncestor(event, SELECTOR_FILTER);
 
-	if (anchor != null) {
+	if (input != null) {
 		handler(event, combobox, state);
 	}
 }
 
-function onAnchorKeydown(
+function onInputKeydown(
 	event: KeyboardEvent,
 	combobox: OuiComboboxElement,
 	state: OuiComboboxState,
@@ -743,7 +1008,6 @@ function onAnchorKeydown(
 	let preventDefault = true;
 
 	switch (true) {
-		case event.key === ' ' && state.type === 'select':
 		case event.key === 'Enter':
 			onEnter(combobox, state);
 			break;
@@ -752,10 +1016,6 @@ function onAnchorKeydown(
 			onEscape(state);
 			break;
 
-		case isSelect && KEYS_ABSOLUTE.has(event.key):
-			onNavigation(event, combobox, state);
-			break;
-
 		case !isSelect && KEYS_SELECTION.has(event.key): {
 			preventDefault = false;
 
@@ -787,143 +1047,46 @@ function onAnchorKeydown(
 	}
 }
 
-function onAnchorKeyup(
+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 (state.type === 'select') {
-		if (typed) {
-			event.preventDefault();
-			event.stopPropagation();
-
-			onScrollTo(event, combobox, state);
-		}
-
-		return;
-	}
-
-	let preventDefault = true;
-
-	if (typed) {
-		state.filter += event.key;
-	}
-
 	if (
-		state.anchor instanceof HTMLInputElement &&
-		(KEYS_REMOVE.has(event.key) || state.anchor.value.length < state.filter.length)
+		!(filter instanceof HTMLInputElement) ||
+		!(typed || KEYS_REMOVE.has(event.key) || filter.value.length < state.filter.value.length)
 	) {
-		state.filter = state.anchor.value;
-
-		filterOptions(state);
-	}
-
-	switch (true) {
-		case typed:
-			onTyped(combobox, state);
-			break;
-
-		case KEYS_REMOVE.has(event.key):
-			onRemove(combobox, state);
-			break;
-
-		default: {
-			preventDefault = false;
-
-			break;
-		}
-	}
-
-	if (preventDefault) {
-		event.preventDefault();
-		event.stopPropagation();
-	}
-}
-
-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.anchor.focus();
-}
-
-function onEnter(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	if (hasTextSelection(state.anchor)) {
-		onSelection(combobox, state);
+	event.preventDefault();
+	event.stopPropagation();
 
-		return;
+	if (typed) {
+		state.filter.value += event.key;
+	} else {
+		state.filter.value = filter.value;
 	}
 
-	if (!state.floatable.open) {
-		state.floatable.show();
+	const [options] = getOptions(state);
+	const next = filterOptions(state, options);
 
-		return;
+	if (typed) {
+		onTyped(combobox, state, options, next);
+	} else {
+		setNext('remove', combobox, state, options, next);
 	}
-
-	setNext('set', combobox, state, getOptions(state)[0], state.active);
-}
-
-function onEscape(state: OuiComboboxState): void {
-	state.floatable.hide();
 }
 
 function onKeydown(event: KeyboardEvent): void {
-	onAnchor(event, onAnchorKeydown);
+	onInput(event, onInputKeydown);
 }
 
 function onKeyup(event: KeyboardEvent): void {
-	onAnchor(event, onAnchorKeyup);
+	onInput(event, onInputKeyup);
 }
 
 function onNavigation(
@@ -985,34 +1148,8 @@ function onNavigation(
 	setNext(state.autocomplete.none ? 'none' : 'navigation', combobox, state, all, next);
 }
 
-function onRemove(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	const [all] = getOptions(state);
-
-	const next = filterOptions(state, all);
-
-	setNext('remove', combobox, state, all, next);
-}
-
-function onScrollTo(
-	event: KeyboardEvent,
-	combobox: OuiComboboxElement,
-	state: OuiComboboxState,
-): void {
-	const [all] = getOptions(state);
-
-	const key = event.key.toLocaleLowerCase();
-
-	const next =
-		all.find(option => option.textContent?.toLocaleLowerCase().startsWith(key) === true) ??
-		all.find(option => option.textContent?.toLocaleLowerCase().includes(key) === true);
-
-	if (next != null) {
-		setNext('navigation', combobox, state, all, next);
-	}
-}
-
 function onSelection(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	state.filter = state.anchor instanceof HTMLInputElement ? state.anchor.value : '';
+	state.filter.value = state.anchor instanceof HTMLInputElement ? state.anchor.value : '';
 
 	filterOptions(state);
 
@@ -1025,44 +1162,42 @@ function onTab(combobox: OuiComboboxElement, state: OuiComboboxState): void {
 	}
 }
 
-function onTyped(combobox: OuiComboboxElement, state: OuiComboboxState): void {
-	if (
-		!state.autocomplete.inline &&
-		state.anchor instanceof HTMLInputElement &&
-		state.anchor.value.length > 0
-	) {
+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 options = getOptions(state)[0];
+	const all = options ?? getOptions(state)[0];
 
-	const next = state.autocomplete.none ? (state.active ?? options[0]) : filterOptions(state);
+	const option = state.autocomplete.none
+		? (state.active ?? all[0])
+		: (next ?? filterOptions(state, options));
 
-	setNext('typed', combobox, state, options, next);
+	setNext('typed', combobox, state, all, option);
 }
 
 function setDisabled(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
-	state.disabled = value;
-
-	setAria(state.anchor, 'disabled', value);
-	setProperty(combobox, 'disabled', value);
-
-	if (state.anchor instanceof HTMLInputElement) {
-		state.anchor.readOnly = value;
-	}
+	setProperties('disabled', 'disabled', combobox, state, value);
 }
 
 function setLimit(
 	type: 'max' | 'min',
 	combobox: OuiComboboxElement,
 	state: OuiComboboxState,
-	value?: number,
+	value?: unknown,
 ): void {
 	const updateLimit =
 		typeof value === 'number' && !Number.isNaN(value) ? value !== state[type] : value == null;
 
 	if (updateLimit) {
-		state[type] = value;
+		state[type] = value as number | undefined;
 
 		setAttribute(combobox, type, value);
 
@@ -1087,26 +1222,38 @@ function setNext(
 
 	next?.scrollIntoView(scrollOptions);
 
+	// TODO: offset scroll to prevent options under headers
+
 	setValue(update, combobox, state, next);
 }
 
-function setReadonly(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
-	state.readonly = 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);
 
-	setAria(state.anchor, 'readonly', value);
-	setProperty(combobox, 'readonly', value);
+	if (state.filter.element != null) {
+		state.filter.element[property] = value;
+	}
 
 	if (state.anchor instanceof HTMLInputElement) {
-		state.anchor.readOnly = value;
+		state.anchor[property] = value;
 	}
 }
 
-function setRequired(combobox: OuiComboboxElement, state: OuiComboboxState, value: boolean): void {
-	state.required = value;
-
-	setAria(state.anchor, 'required', value);
-	setProperty(combobox, 'required', 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);
 }
 
@@ -1214,13 +1361,13 @@ function setValues(combobox: OuiComboboxElement, state: OuiComboboxState, value:
 	for (const option of state.selected) {
 		setAria(option, 'selected', false);
 
-		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION_ITEM}][option="${option.id}"]`)?.remove();
+		state.selection?.querySelector(`[option="${option.id}"]`)?.remove();
 	}
 
 	for (const option of selected) {
 		setAria(option, 'selected', true);
 
-		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION}]`)?.append(getSelectionItem(option));
+		state.selection?.append(getSelectionItem(option));
 	}
 
 	state.selected = selected.slice();
@@ -1243,7 +1390,7 @@ function updateAutoComplete(
 
 	if (
 		update === 'typed' &&
-		!content.toLocaleLowerCase().startsWith(state.filter.toLocaleLowerCase())
+		!content.toLocaleLowerCase().startsWith(state.filter.value.toLocaleLowerCase())
 	) {
 		return;
 	}
@@ -1253,7 +1400,7 @@ function updateAutoComplete(
 	if (state.anchor instanceof HTMLInputElement) {
 		state.anchor.value = content;
 
-		state.anchor.setSelectionRange(update === 'typed' ? state.filter.length : length, length);
+		state.anchor.setSelectionRange(update === 'typed' ? state.filter.value.length : length, length);
 	} else {
 		state.anchor.textContent = content;
 	}
@@ -1294,9 +1441,9 @@ function updateSelect(
 	}
 
 	if (added === true) {
-		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION}]`)?.append(getSelectionItem(next));
+		state.selection?.append(getSelectionItem(next));
 	} else if (added === false) {
-		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION_ITEM}][option="${next.id}"]`)?.remove();
+		state.selection?.querySelector(`[option="${next.id}"]`)?.remove();
 	}
 }
 
@@ -1406,6 +1553,14 @@ 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`;
@@ -1428,8 +1583,6 @@ 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_NAVIGATION = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
 
 const KEYS_REMOVE = new Set(['Backspace', 'Delete']);
@@ -1444,6 +1597,8 @@ 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']);