@oscarpalmer/oui 0.30.0 → 0.31.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") ?? "";
+	}
+	/**
+	* Is the combobox readonly?
+	*/
+	get readonly() {
+		return this.hasAttribute("readonly");
 	}
-	set name(value) {
-		if (typeof value === "string") this.setAttribute("name", value);
+	/**
+	* 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,16 +141,25 @@ 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 filterOptions(state, options, clear) {
 	if (clear || state.autocomplete.none) state.filter = "";
@@ -82,28 +172,38 @@ function filterOptions(state, options, clear) {
 		option.hidden = option.textContent?.toLocaleLowerCase().includes(filter) === false;
 		if (!option.hidden) visible.push(option);
 	}
-	if (visible.length > 0) return state.active != null && visible.includes(state.active) ? state.active : visible[0];
+	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"
+function generateIds(select, prefix) {
+	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(type, id, label, select, autocomplete, multiple) {
+	const anchor = type === "autocomplete" ? getInput(id, select) : getBox(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;
 }
+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,32 +212,41 @@ function getAutoComplete(element, select) {
 		none: value === "none"
 	};
 }
-function getBox(id, element, label, select) {
-	return createElement("div", {
+function getBox(id, select, multiple) {
+	const box = createElement("div", {
 		id,
-		innerHTML: select.selectedOptions[0]?.textContent ?? "",
-		tabIndex: 0
+		tabIndex: 0,
+		textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? ""
 	});
+	if (multiple) {
+		const selection = createElement("ul", {}, { [ATTRIBUTE_SELECTION]: "" });
+		for (const option of select.selectedOptions) selection.append(getSelectionItem(option));
+		box.append(selection);
+	}
+	return box;
 }
-function getContent(type, id, element, anchor, label, select, autocomplete) {
+function getContent(id, label, select, autocomplete, multiple) {
 	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 list = createElement("ul", { role: "listbox" }, {
+		[ATTRIBUTE_LIST]: "",
+		"aria-labelledby": label.id,
+		"aria-multiselectable": multiple
+	});
 	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}`,
+			id: option.id,
 			textContent: option.textContent
 		}, {
 			[ATTRIBUTE_OPTION]: "",
-			[ATTRIBUTE_OPTION_CURRENT]: index === 0 ? "" : void 0,
+			[ATTRIBUTE_OPTION_ACTIVE]: index === 0 ? "" : void 0,
 			role: "option",
 			value: option.value,
 			"aria-selected": !autocomplete.none && option.selected
@@ -145,14 +254,40 @@ function getContent(type, id, element, anchor, label, select, autocomplete) {
 		if (option.selected) selected.push(item);
 		list.append(item);
 	}
-	content.append(list);
-	return [content, selected];
+	const empty = createElement("div", {
+		hidden: true,
+		role: "status",
+		textContent: "No results found"
+	}, {
+		[ATTRIBUTE_EMPTY]: "",
+		"aria-live": "polite"
+	});
+	content.append(list, empty);
+	return [
+		content,
+		selected,
+		empty
+	];
+}
+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 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) {
+function getInput(id, select) {
 	return createElement("input", {
 		id,
 		value: select.selectedOptions[0]?.textContent ?? ""
@@ -164,10 +299,10 @@ function getInput(id, element, label, select) {
 }
 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 +314,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 selected;
+	if (update === "set") {
+		if (next == null) return selected;
+		if (state.multiple) return element === next ? !selected : selected;
+		return element === next;
 	}
-	if (update === "none") return getAria(element, "selected") === "true";
-	if (update === "set") return element === next;
-	return state.autocomplete.both && 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 = getAnchor(type, id, label, select, autocomplete, multiple);
+	const [content, selected, empty] = getContent(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,34 +371,40 @@ function getState(element, internals) {
 		autocomplete,
 		content,
 		disabled,
+		empty,
 		floatable,
 		id,
 		internals,
 		label,
 		multiple,
+		readonly,
 		required,
 		select,
 		selected,
 		type,
+		values,
 		filter: "",
 		listeners: [],
-		value: ""
+		name: element.name,
+		touched: false
 	};
-	state.listeners.push(on(content, "click", (event) => {
+	state.listeners.push(on(anchor, "blur", () => {
+		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) updateWidth(state);
 	}));
 	setDisabled(element, state, disabled);
 	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 onAnchor(event, handler) {
 	if (event.ctrlKey || event.metaKey || event.shiftKey) return;
@@ -255,17 +414,23 @@ function onAnchor(event, handler) {
 	if (findAncestor(event, SELECTOR_ANCHOR) != null) handler(event, combobox, state);
 }
 function onAnchorKeydown(event, combobox, state) {
+	const isSelect = state.type === "select";
 	let preventDefault = true;
 	switch (true) {
+		case event.key === " " && state.type === "select":
 		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):
+		case isSelect && KEYS_ABSOLUTE.has(event.key):
 			onNavigation(event, combobox, 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;
@@ -280,9 +445,16 @@ function onAnchorKeydown(event, combobox, state) {
 	}
 }
 function onAnchorKeyup(event, combobox, state) {
-	if (state.type === "select") return;
-	let preventDefault = true;
 	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)) {
 		state.filter = state.anchor.value;
@@ -310,7 +482,15 @@ function onClick(event) {
 	if (combobox == null || state == null) return;
 	const label = findAncestor(event, "label");
 	if (label != null) {
-		if (label === state.label && combobox.type === "select") state.anchor.focus();
+		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) {
@@ -323,17 +503,22 @@ function onContent(event, 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);
+	if (option instanceof HTMLElement) setNext("set", combobox, state, getOptions(state)[0], 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();
+	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(combobox, state) {
-	if (!state.floatable.open) return;
-	if (state.type === "select") state.floatable.hide();
-	else setNext(combobox, state, getOptions(state)[0], "set", state.active);
+function onEscape(state) {
+	state.floatable.hide();
 }
 function onKeydown(event) {
 	onAnchor(event, onAnchorKeydown);
@@ -350,7 +535,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,25 +558,30 @@ 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));
+	setNext("remove", combobox, state, all, filterOptions(state, all));
+}
+function onScrollTo(event, combobox, state) {
+	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, state) {
+	state.filter = 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();
+	if (!state.autocomplete.inline && state.anchor instanceof HTMLInputElement && state.anchor.value.length > 0) state.floatable.show();
+	const options = getOptions(state)[0];
+	setNext("typed", combobox, state, options, state.autocomplete.none ? state.active ?? options[0] : filterOptions(state));
 }
 function setDisabled(combobox, state, value) {
 	state.disabled = value;
@@ -399,45 +589,172 @@ function setDisabled(combobox, state, value) {
 	setProperty(combobox, "disabled", value);
 	if (state.anchor instanceof HTMLInputElement) state.anchor.readOnly = 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 setReadonly(combobox, state, value) {
+	state.readonly = value;
+	setAria(state.anchor, "readonly", value);
+	setProperty(combobox, "readonly", value);
+	if (state.anchor instanceof HTMLInputElement) state.anchor.readOnly = value;
 }
 function setRequired(combobox, state, value) {
 	state.required = value;
 	setAria(state.anchor, "required", value);
 	setProperty(combobox, "required", 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 setValue(combobox, state, update, next) {
-	if (state.disabled) return;
+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.anchor.querySelector(`[${ATTRIBUTE_SELECTION_ITEM}][option="${option.id}"]`)?.remove();
+	}
+	for (const option of selected) {
+		setAria(option, "selected", true);
+		state.anchor.querySelector(`[${ATTRIBUTE_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.toLocaleLowerCase())) return;
+	const { length } = content;
+	if (state.anchor instanceof HTMLInputElement) {
+		state.anchor.value = content;
+		state.anchor.setSelectionRange(update === "typed" ? state.filter.length : length, length);
+	} else state.anchor.textContent = content;
+}
+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.anchor.querySelector(`[${ATTRIBUTE_SELECTION}]`)?.append(getSelectionItem(next));
+	else if (added === false) state.anchor.querySelector(`[${ATTRIBUTE_SELECTION_ITEM}][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_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,6 +762,10 @@ const AUTOCOMPLETES = /* @__PURE__ */ new Set([
 	"none"
 ]);
 const EXPRESSION_TYPED = /\p{L}|\s/u;
+const INVALID_BAD = "Please select an option from the list";
+const INVALID_INPUT = "Please enter a value";
+const INVALID_OVERFLOW = "Please select fewer options (maximum is {max})";
+const INVALID_UNDERFLOW = "Please select more options (minimum is {min})";
 const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
 const KEYS_NAVIGATION = /* @__PURE__ */ new Set([
 	"ArrowDown",
@@ -453,8 +774,10 @@ 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_OPTION = `[${ATTRIBUTE_OPTION}]`;
 const TYPES = /* @__PURE__ */ new Set(["autocomplete", "select"]);