@oscarpalmer/oui 0.30.0 → 0.32.0

package/dist/js/combobox.mjs

@@ -1,8 +1,8 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 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";
@@ -13,41 +13,122 @@ var OuiComboboxElement = class extends HTMLElement {
 	static formAssociated = true;
 	static observedAttributes = [
 		"disabled",
+		"max",
+		"min",
+		"readonly",
 		"required",
 		"value"
 	];
 	#internals;
 	#state;
+	/**
+	* Is the combobox disabled?
+	*/
 	get disabled() {
-		return this.#state?.disabled ?? false;
+		return this.hasAttribute("disabled");
 	}
+	/**
+	* Should the combobox be disabled?
+	*/
 	set disabled(value) {
 		if (typeof value === "boolean" && value !== this.#state.disabled) setDisabled(this, this.#state, value);
 	}
+	/**
+	* Maximum number of selected options
+	*/
+	get max() {
+		return this.#state.max;
+	}
+	/**
+	* Set the maximum number of selected options
+	*/
+	set max(value) {
+		setLimit("max", this, this.#state, value);
+	}
+	/**
+	* Minimum number of selected options
+	*/
+	get min() {
+		return this.#state.min;
+	}
+	/**
+	* Set the minimum number of selected options
+	*/
+	set min(value) {
+		setLimit("min", this, this.#state, value);
+	}
+	/**
+	* Does the combobox allow multiple values?
+	*/
 	get multiple() {
 		return this.hasAttribute("multiple");
 	}
+	/**
+	* Name of the combobox
+	*/
 	get name() {
-		return this.getAttribute("name") ?? "";
+		return getAttribute(this, "name") ?? "";
 	}
-	set name(value) {
-		if (typeof value === "string") this.setAttribute("name", value);
+	/**
+	* Is the combobox readonly?
+	*/
+	get readonly() {
+		return this.hasAttribute("readonly");
 	}
+	/**
+	* Should the combobox be readonly?
+	*/
+	set readonly(value) {
+		if (typeof value === "boolean" && value !== this.#state.readonly) setReadonly(this, this.#state, value);
+	}
+	/**
+	* Is the combobox required?
+	*/
 	get required() {
 		return this.hasAttribute("required");
 	}
+	/**
+	* Should the combobox be required?
+	*/
 	set required(value) {
 		if (typeof value === "boolean" && value !== this.#state.required) setRequired(this, this.#state, value);
 	}
+	/**
+	* Selected options
+	*/
+	get selected() {
+		return this.#state.selected.slice();
+	}
+	/**
+	* Type of combobox
+	*/
 	get type() {
 		return this.#state.type;
 	}
+	/**
+	* Current value
+	*/
 	get value() {
-		return this.#state.value;
+		return this.#state.values[0];
 	}
+	/**
+	* Set the value
+	*/
 	set value(value) {
 		const [option, all] = getOption(this.#state, value);
-		if (option != null) setNext(this, this.#state, all, "set", option);
+		if (option != null) setNext("set", this, this.#state, all, option);
+	}
+	/**
+	* Current values
+	*/
+	get values() {
+		return this.#state.values.slice();
+	}
+	/**
+	* Set the values
+	*/
+	set values(value) {
+		setValues(this, this.#state, value);
 	}
 	constructor() {
 		super();
@@ -60,50 +141,210 @@ var OuiComboboxElement = class extends HTMLElement {
 	attributeChangedCallback(name, _, value) {
 		switch (name) {
 			case "disabled":
-				this.disabled = this.hasAttribute("disabled");
-				break;
+			case "readonly":
 			case "required":
-				this.required = this.hasAttribute("required");
-				break;
 			case "value":
-				this.value = value;
+				this[name] = this.hasAttribute(name);
 				break;
+			case "max":
+			case "min":
+				setLimit(name, this, this.#state, value == null ? void 0 : Number.parseInt(value, 10));
+				break;
+			default: break;
 		}
 	}
+	clear() {
+		setValues(this, this.#state, []);
+	}
+	formResetCallback() {
+		this.#state.touched = false;
+		this.clear();
+	}
 };
+function createAnchor(type, id, label, select, autocomplete, multiple) {
+	const [anchor, selection] = type === "autocomplete" ? [createInput(id, select)] : createBox(id, select, multiple);
+	setAria(anchor, {
+		autocomplete: type === "autocomplete" ? autocomplete.value : void 0,
+		controls: `${id}_content`,
+		expanded: false,
+		haspopup: "listbox",
+		labelledby: label.id
+	});
+	setAttribute(anchor, ATTRIBUTE_ANCHOR, "");
+	setRole(anchor, "combobox");
+	return [anchor, selection];
+}
+function createBox(id, select, multiple) {
+	const box = createElement("div", {
+		id,
+		tabIndex: 0,
+		textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? ""
+	});
+	let selection;
+	if (multiple) {
+		selection = createSelection(select);
+		box.append(selection);
+	}
+	return [box, selection];
+}
+function createContent(type, id, label, select, autocomplete, multiple) {
+	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() {
+	return createElement("div", {
+		hidden: true,
+		role: "status",
+		textContent: "No results found"
+	}, {
+		[ATTRIBUTE_EMPTY]: "",
+		"aria-live": "polite"
+	});
+}
+function createFilter(type, id) {
+	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) {
+	return createElement("li", {
+		id: group.id,
+		role: "presentation",
+		textContent: group.label
+	}, { [ATTRIBUTE_HEADER]: "" });
+}
+function createInput(id, select) {
+	return createElement("input", {
+		id,
+		value: select.selectedOptions[0]?.textContent ?? ""
+	}, {
+		[ATTRIBUTE_ANCHOR]: "",
+		autocomplete: "off",
+		type: "text"
+	});
+}
+function createList(label, select, autocomplete, multiple) {
+	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 = [];
+	let headers;
+	if (groupsLength > 0) {
+		headers = [];
+		let firstGroup;
+		for (let groupIndex = 0; groupIndex < groupsLength; groupIndex += 1) {
+			const group = groups[groupIndex];
+			const options = [...group.querySelectorAll("option")];
+			if (options.length === 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, option, autocomplete, active, group) {
+	return createElement("li", {
+		id: option.id,
+		role: "option",
+		textContent: option.textContent
+	}, {
+		group,
+		[ATTRIBUTE_OPTION]: "",
+		[ATTRIBUTE_OPTION_ACTIVE]: active && index === 0 ? "" : void 0,
+		value: option.value,
+		"aria-selected": !autocomplete.none && option.selected
+	});
+}
+function createOptions(options, autocomplete, list, selected, active, group) {
+	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) {
+	const selection = createElement("ul", {}, { [ATTRIBUTE_SELECTION]: "" });
+	for (const option of select.selectedOptions) selection.append(getSelectionItem(option));
+	return selection;
+}
 function filterOptions(state, options, clear) {
-	if (clear || state.autocomplete.none) state.filter = "";
-	const filter = state.filter.toLocaleLowerCase();
+	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;
+	}, {}) ?? {};
 	const all = options ?? getOptions(state)[0];
-	const { length } = all;
+	let { length } = all;
 	const visible = [];
 	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 (!option.hidden) {
+			groups[getAttribute(option, "group") ?? ""] += 1;
+			visible.push(option);
+		}
 	}
-	if (visible.length > 0) return state.active != null && visible.includes(state.active) ? state.active : visible[0];
+	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 getAnchor(type, id, element, label, select, autocomplete) {
-	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"
-	});
-	return anchor;
+function generateIds(select, prefix) {
+	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(element, attribute, possible, defaultValue) {
+	const value = getAttribute(element, attribute);
+	return possible.has(value) ? value : defaultValue;
 }
 function getAutoComplete(element, select) {
 	let value;
 	if (select) value = "list";
-	else {
-		const attribute = getAttribute(element, "autocomplete");
-		value = AUTOCOMPLETES.has(attribute) ? attribute : "none";
-	}
+	else value = getAttributeValue(element, "autocomplete", AUTOCOMPLETES, "none");
 	return {
 		value,
 		both: value === "both",
@@ -112,62 +353,30 @@ function getAutoComplete(element, select) {
 		none: value === "none"
 	};
 }
-function getBox(id, element, label, select) {
-	return createElement("div", {
-		id,
-		innerHTML: select.selectedOptions[0]?.textContent ?? "",
-		tabIndex: 0
-	});
+function getFormValue(state, values) {
+	if (values.length === 0 || !state.multiple) return values[0];
+	let formValues = [];
+	for (const value of values) formValues.push(`${state.name}=${value}`);
+	return join(formValues, "&");
 }
-function getContent(type, id, element, anchor, label, select, autocomplete) {
-	const content = createElement("div", { id: `${id}_content` }, {
-		[ATTRIBUTE_CONTENT]: "",
-		popover: "",
-		role: "listbox",
-		tabindex: -1,
-		"aria-labelledby": label.id
-	});
-	const list = createElement("ul", {}, { [ATTRIBUTE_LIST]: "" });
-	const options = [...select.options];
-	const selected = [];
-	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 ? "" : void 0,
-			role: "option",
-			value: option.value,
-			"aria-selected": !autocomplete.none && option.selected
-		});
-		if (option.selected) selected.push(item);
-		list.append(item);
-	}
-	content.append(list);
-	return [content, selected];
+function getFormValues(state, added) {
+	let values;
+	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() {
 	index += 1;
 	return `oui_combobox_${index}`;
 }
-function getInput(id, element, label, select) {
-	return createElement("input", {
-		id,
-		value: select.selectedOptions[0]?.textContent ?? ""
-	}, {
-		[ATTRIBUTE_ANCHOR]: "",
-		autocomplete: "off",
-		type: "text"
-	});
-}
 function getOption(state, value) {
 	const [all] = getOptions(state);
-	const valueAsString = getString(value);
+	const valueAsString = getString(value).toLocaleLowerCase();
 	filterOptions(state, all, true);
 	let match;
-	for (const option of all) if (option.getAttribute("value")?.toLocaleLowerCase() === valueAsString) {
+	for (const option of all) if (getAttribute(option, "value")?.toLocaleLowerCase() === valueAsString) {
 		match = option;
 		break;
 	}
@@ -179,32 +388,50 @@ function getOptions(state) {
 }
 function getSelected(update, state, element, next) {
 	if (state.autocomplete.none) 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";
-	if (update === "set") return element === next;
-	return state.autocomplete.both && element === next;
+	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) {
+	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, internals) {
 	const select = element.querySelector("select");
-	if (select == null) throw new Error(MESSAGE_SELECT);
+	if (select == null || select.id === "") throw new Error(MESSAGE_SELECT);
 	const label = element.querySelector(`label[for="${select.id}"]`);
 	if (label == null) throw new Error(MESSAGE_LABEL);
 	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",
 		reusable: false
@@ -218,53 +445,118 @@ function getState(element, internals) {
 		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(content, "click", (event) => {
+	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 : void 0,
 			expanded: floatable.open
 		});
-		if (floatable.open) setStyle(content, "--oui-combobox-width", `${anchor.getBoundingClientRect().width}px`);
+		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 getType(element) {
-	const type = getAttribute(element, ATTRIBUTE_TYPE);
-	return TYPES.has(type) ? type : "select";
+function hasTextSelection(element) {
+	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
+}
+function onClick(event) {
+	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) {
+		setValue("set", combobox, state, state.selected.find((option) => option.id === getAttribute(selection, "option")));
+		return;
+	}
+	if (findAncestor(event, SELECTOR_ANCHOR) != null) {
+		state.floatable.show();
+		return;
+	}
+}
+function onContent(event, content) {
+	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, state) {
+	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) {
+	state.floatable.hide();
 }
-function onAnchor(event, handler) {
-	if (event.ctrlKey || event.metaKey || event.shiftKey) return;
+function onInput(event, handler) {
+	if (event.ctrlKey || event.metaKey) return;
 	const combobox = findAncestor(event, TAGNAME);
 	const state = states.get(combobox);
 	if (combobox == null || state == null) return;
-	if (findAncestor(event, SELECTOR_ANCHOR) != null) handler(event, combobox, state);
+	if ((findAncestor(event, SELECTOR_ANCHOR) ?? findAncestor(event, SELECTOR_FILTER)) != null) handler(event, combobox, state);
 }
-function onAnchorKeydown(event, combobox, state) {
+function onInputKeydown(event, combobox, state) {
+	const isSelect = state.type === "select";
 	let preventDefault = true;
 	switch (true) {
 		case event.key === "Enter":
 			onEnter(combobox, state);
 			break;
 		case event.key === "Escape":
-			onEscape(combobox, state);
+			onEscape(state);
 			break;
-		case state.type === "select" && KEYS_ABSOLUTE.has(event.key):
-			onNavigation(event, combobox, state);
+		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);
@@ -279,67 +571,24 @@ function onAnchorKeydown(event, combobox, state) {
 		event.stopPropagation();
 	}
 }
-function onAnchorKeyup(event, combobox, state) {
-	if (state.type === "select") return;
-	let preventDefault = true;
+function onInputKeyup(event, combobox, state) {
+	const filter = state.filter.element ?? state.anchor;
 	const typed = event.key.length === 1 && EXPRESSION_TYPED.test(event.key);
-	if (typed) state.filter += event.key;
-	if (state.anchor instanceof HTMLInputElement && (KEYS_REMOVE.has(event.key) || state.anchor.value.length < state.filter.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) {
-	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();
-		return;
-	}
-	if (findAncestor(event, SELECTOR_ANCHOR) != null) {
-		state.floatable.show();
-		return;
-	}
-}
-function onContent(event, content) {
-	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(combobox, state, getOptions(state)[0], "set", option);
-	state.anchor.focus();
-}
-function onEnter(combobox, state) {
-	if (state.floatable.open) setNext(combobox, state, getOptions(state)[0], "set", state.active);
-	else state.floatable.show();
-}
-function onEscape(combobox, state) {
-	if (!state.floatable.open) return;
-	if (state.type === "select") state.floatable.hide();
-	else setNext(combobox, state, getOptions(state)[0], "set", state.active);
+	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) {
-	onAnchor(event, onAnchorKeydown);
+	onInput(event, onInputKeydown);
 }
 function onKeyup(event) {
-	onAnchor(event, onAnchorKeyup);
+	onInput(event, onInputKeyup);
 }
 function onNavigation(event, combobox, state) {
 	let skip = false;
@@ -350,7 +599,7 @@ function onNavigation(event, combobox, state) {
 	const [all, visible] = getOptions(state);
 	if (visible.length === 0) return;
 	let next;
-	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);
 		let index;
@@ -373,71 +622,197 @@ function onNavigation(event, combobox, state) {
 		}
 		if (index != null) next = visible[index];
 	}
-	setNext(combobox, state, all, state.autocomplete.none ? "none" : "navigation", next);
+	setNext(state.autocomplete.none ? "none" : "navigation", combobox, state, all, next);
 }
-function onRemove(combobox, state) {
-	const [all] = getOptions(state);
-	setNext(combobox, state, all, "none", filterOptions(state, all));
+function onSelection(combobox, state) {
+	state.filter.value = state.anchor instanceof HTMLInputElement ? state.anchor.value : "";
+	filterOptions(state);
+	setNext("set", combobox, state, getOptions(state)[0], state.active);
 }
 function onTab(combobox, state) {
 	if (combobox !== document.activeElement || !combobox.contains(document.activeElement)) state.floatable.hide();
 }
-function onTyped(combobox, state) {
-	function open() {
-		if (state.anchor instanceof HTMLInputElement && state.anchor.value.length > 0 && (state.autocomplete.both || state.autocomplete.list)) state.floatable.show();
-	}
-	if (!state.autocomplete.none) {
-		const next = filterOptions(state);
-		state.active = next != null && next.textContent?.toLocaleLowerCase().indexOf(state.filter.toLocaleLowerCase()) === 0 ? next : void 0;
-		if (next != null) open();
-		setNext(combobox, state, getOptions(state)[0], "typed", next);
-	} else open();
+function onTyped(combobox, state, options, next) {
+	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];
+	setNext("typed", combobox, state, all, state.autocomplete.none ? state.active ?? all[0] : next ?? filterOptions(state, options));
 }
 function setDisabled(combobox, state, value) {
-	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 setNext(combobox, state, all, update, next) {
-	for (const option of all) setAttribute(option, ATTRIBUTE_OPTION_CURRENT, option === next ? "" : void 0);
+function setLimit(type, combobox, state, value) {
+	if (typeof value === "number" && !Number.isNaN(value) ? value !== state[type] : value == null) {
+		state[type] = value;
+		setAttribute(combobox, type, value);
+		updateValidity(state);
+	}
+}
+function setNext(update, combobox, state, all, next) {
+	for (const option of all) setAttribute(option, ATTRIBUTE_OPTION_ACTIVE, option === next ? "" : void 0);
 	state.active = next;
 	setAria(state.anchor, "activedescendant", next?.id);
 	next?.scrollIntoView(scrollOptions);
-	setValue(combobox, state, update, next);
+	setValue(update, combobox, state, next);
+}
+function setProperties(key, property, combobox, state, value) {
+	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, state, value) {
+	setProperties("readonly", "readOnly", combobox, state, value);
 }
 function setRequired(combobox, state, value) {
-	state.required = value;
-	setAria(state.anchor, "required", value);
-	setProperty(combobox, "required", value);
+	setProperties("required", "required", combobox, state, value);
+	updateValidity(state);
+}
+function setValue(update, combobox, state, next) {
+	if (state.disabled || state.readonly || state.type === "select" && update !== "set") return;
+	let added;
+	let shouldUpdate;
+	let values;
+	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;
+		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, state, value) {
+	if (!Array.isArray(value)) return;
+	const strings = (state.multiple ? value : [value]).map((value) => getString(value).toLocaleLowerCase());
+	const [all] = getOptions(state);
+	const selected = [];
+	const values = [];
+	let next;
+	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, state, next) {
+	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 setValue(combobox, state, update, next) {
-	if (state.disabled) return;
+function updateForm(combobox, state, values) {
+	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, state, next, added) {
+	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, state, next) {
 	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;
-		state.internals.setFormValue(state.value);
-		dispatch(combobox, "change");
-		dispatch(state.select, "change");
-	}
-	if (next == null || update === "none") return;
-	if (update === "set" || state.autocomplete.both || state.autocomplete.inline) {
-		const textContent = next.textContent ?? "";
-		if (state.anchor instanceof HTMLInputElement) state.anchor.value = textContent;
-		else state.anchor.innerHTML = textContent;
-		if (state.anchor instanceof HTMLInputElement) state.anchor.setSelectionRange(update === "typed" ? state.filter.length : textContent.length, textContent.length);
-	}
-	if (update === "set") state.floatable.hide();
+	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) {
+	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 : void 0,
+		rangeOverflow ? getString(INVALID_OVERFLOW).replace("{max}", state.max.toString()) : void 0,
+		rangeUnderflow ? getString(INVALID_UNDERFLOW).replace("{min}", state.min.toString()) : void 0
+	], "; "));
+	state.internals.checkValidity();
+}
+function updateWidth(state) {
+	setStyle(state.content, PROPERTY_STYLE, `${state.anchor.getBoundingClientRect().width}px`);
 }
 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_CURRENT = `${TAGNAME}-option-current`;
-const ATTRIBUTE_TYPE = "type";
+const ATTRIBUTE_OPTION_ACTIVE = `${TAGNAME}-option-active`;
+const ATTRIBUTE_SELECTION = `${TAGNAME}-selection`;
+const ATTRIBUTE_SELECTION_ITEM = `${TAGNAME}-selection-item`;
 const AUTOCOMPLETES = /* @__PURE__ */ new Set([
 	"both",
 	"inline",
@@ -445,7 +820,10 @@ const AUTOCOMPLETES = /* @__PURE__ */ new Set([
 	"none"
 ]);
 const EXPRESSION_TYPED = /\p{L}|\s/u;
-const KEYS_ABSOLUTE = /* @__PURE__ */ 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 = /* @__PURE__ */ new Set([
 	"ArrowDown",
 	"ArrowUp",
@@ -453,9 +831,12 @@ const KEYS_NAVIGATION = /* @__PURE__ */ new Set([
 	"PageUp"
 ]);
 const KEYS_REMOVE = /* @__PURE__ */ new Set(["Backspace", "Delete"]);
+const KEYS_SELECTION = /* @__PURE__ */ 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 = /* @__PURE__ */ new Set(["autocomplete", "select"]);
 const comboboxes = /* @__PURE__ */ new WeakMap();