@oscarpalmer/oui 0.32.0 → 0.34.0

package/dist/js/combobox.mjs

@@ -1,855 +0,0 @@
-import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
-import { clamp } from "@oscarpalmer/atoms/number";
-import { getString, join } from "@oscarpalmer/atoms/string";
-import { getAria, setAria, setRole } from "@oscarpalmer/toretto/aria";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { createElement } from "@oscarpalmer/toretto/create";
-import { dispatch, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-import { setProperty } from "@oscarpalmer/toretto/property";
-import { setStyle } from "@oscarpalmer/toretto/style";
-//#region src/js/combobox.ts
-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.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 getAttribute(this, "name") ?? "";
-	}
-	/**
-	* 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.values[0];
-	}
-	/**
-	* Set the value
-	*/
-	set value(value) {
-		const [option, all] = getOption(this.#state, value);
-		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();
-		this.#internals = this.attachInternals();
-		this.#state = getState(this, this.#internals);
-		comboboxes.set(this.#state.content, this);
-		states.set(this, this.#state);
-		states.set(this.#state.content, this.#state);
-	}
-	attributeChangedCallback(name, _, value) {
-		switch (name) {
-			case "disabled":
-			case "readonly":
-			case "required":
-			case "value":
-				this[name] = this.hasAttribute(name);
-				break;
-			case "max":
-			case "min":
-				setLimit(name, this, this.#state, value == null ? 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.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];
-	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) {
-			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, 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 value = getAttributeValue(element, "autocomplete", AUTOCOMPLETES, "none");
-	return {
-		value,
-		both: value === "both",
-		inline: value === "inline",
-		list: value === "list",
-		none: value === "none"
-	};
-}
-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 getOption(state, value) {
-	const [all] = getOptions(state);
-	const valueAsString = getString(value).toLocaleLowerCase();
-	filterOptions(state, all, true);
-	let match;
-	for (const option of all) if (getAttribute(option, "value")?.toLocaleLowerCase() === valueAsString) {
-		match = option;
-		break;
-	}
-	return [match, all];
-}
-function getOptions(state) {
-	const all = [...state.content.querySelectorAll(`[${ATTRIBUTE_OPTION}]`)].filter((option) => option instanceof HTMLElement);
-	return [all, all.filter((option) => !option.hidden)];
-}
-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 selected;
-	}
-	if (update === "none") return selected;
-	if (update === "set") {
-		if (next == null) return selected;
-		if (state.multiple) return element === next ? !selected : selected;
-		return element === next;
-	}
-	return selected;
-}
-function getSelectionItem(option) {
-	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 || 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;
-	setAttribute(element, "name", select.name === "" ? select.id : select.name);
-	const disabled = element.disabled || select.disabled;
-	const multiple = element.multiple || select.multiple;
-	const readonly = element.readonly;
-	const required = element.required || select.required;
-	const id = getId();
-	const type = multiple ? "select" : getAttributeValue(element, "type", TYPES, "select");
-	const autocomplete = getAutoComplete(element, type === "select");
-	label.htmlFor = id;
-	label.id = `${id}_label`;
-	generateIds(select, id);
-	const [anchor, selection] = createAnchor(type, id, label, select, autocomplete, multiple);
-	const [content, filter, headers, selected, empty] = createContent(type, id, label, select, autocomplete, multiple);
-	const values = selected.length === 0 ? [""] : selected.map((option) => getAttribute(option, "value") ?? "");
-	const floatable = createEmbeddedFloatable(anchor, content, {
-		position: "below-start",
-		reusable: false
-	});
-	floatable.update();
-	select.insertAdjacentElement("afterend", anchor);
-	anchor.insertAdjacentElement("afterend", content);
-	select.remove();
-	const state = {
-		anchor,
-		autocomplete,
-		content,
-		disabled,
-		empty,
-		floatable,
-		headers,
-		id,
-		internals,
-		label,
-		multiple,
-		readonly,
-		required,
-		select,
-		selected,
-		selection,
-		type,
-		values,
-		active: selected[0],
-		filter: {
-			element: filter,
-			value: ""
-		},
-		listeners: [],
-		name: element.name,
-		touched: false
-	};
-	state.listeners.push(on(element, "focusout", () => {
-		state.touched = true;
-		updateValidity(state);
-	}), on(content, "click", (event) => {
-		onContent(event, content);
-	}), on(content, "toggle", () => {
-		setAria(anchor, {
-			activedescendant: floatable.open ? state.active?.id : void 0,
-			expanded: floatable.open
-		});
-		if (floatable.open) {
-			state.filter.element?.focus();
-			updateWidth(state);
-		}
-	}));
-	setDisabled(element, state, disabled);
-	setLimit("max", element, state, getAttribute(element, "max"));
-	setLimit("min", element, state, getAttribute(element, "min"));
-	setReadonly(element, state, readonly);
-	setRequired(element, state, required);
-	return state;
-}
-function hasTextSelection(element) {
-	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 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) ?? findAncestor(event, SELECTOR_FILTER)) != null) handler(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(state);
-			break;
-		case !isSelect && KEYS_SELECTION.has(event.key):
-			preventDefault = false;
-			if (hasTextSelection(state.anchor)) onSelection(combobox, state);
-			break;
-		case KEYS_NAVIGATION.has(event.key):
-			onNavigation(event, combobox, state);
-			break;
-		default:
-			preventDefault = false;
-			if (event.key === "Tab") onTab(combobox, state);
-			break;
-	}
-	if (preventDefault) {
-		event.preventDefault();
-		event.stopPropagation();
-	}
-}
-function onInputKeyup(event, combobox, state) {
-	const filter = state.filter.element ?? state.anchor;
-	const typed = event.key.length === 1 && EXPRESSION_TYPED.test(event.key);
-	if (!(filter instanceof HTMLInputElement) || !(typed || KEYS_REMOVE.has(event.key) || filter.value.length < state.filter.value.length)) return;
-	event.preventDefault();
-	event.stopPropagation();
-	if (typed) state.filter.value += event.key;
-	else state.filter.value = filter.value;
-	const [options] = getOptions(state);
-	const next = filterOptions(state, options);
-	if (typed) onTyped(combobox, state, options, next);
-	else setNext("remove", combobox, state, options, next);
-}
-function onKeydown(event) {
-	onInput(event, onInputKeydown);
-}
-function onKeyup(event) {
-	onInput(event, onInputKeyup);
-}
-function onNavigation(event, combobox, state) {
-	let skip = false;
-	if (!state.floatable.open) {
-		skip = true;
-		state.floatable.show();
-	}
-	const [all, visible] = getOptions(state);
-	if (visible.length === 0) return;
-	let next;
-	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;
-		switch (event.key) {
-			case "ArrowDown":
-			case "ArrowUp":
-				index = clamp(current + (event.key === "ArrowDown" ? 1 : -1), 0, visible.length - 1, true);
-				break;
-			case "End":
-				index = visible.length - 1;
-				break;
-			case "Home":
-				index = 0;
-				break;
-			case "PageDown":
-			case "PageUp":
-				index = clamp(current + (event.key === "PageDown" ? 10 : -10), 0, visible.length - 1);
-				break;
-			default: break;
-		}
-		if (index != null) next = visible[index];
-	}
-	setNext(state.autocomplete.none ? "none" : "navigation", combobox, state, all, next);
-}
-function onSelection(combobox, 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, 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) {
-	setProperties("disabled", "disabled", combobox, state, value);
-}
-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(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) {
-	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 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));
-	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_ACTIVE = `${TAGNAME}-option-active`;
-const ATTRIBUTE_SELECTION = `${TAGNAME}-selection`;
-const ATTRIBUTE_SELECTION_ITEM = `${TAGNAME}-selection-item`;
-const AUTOCOMPLETES = /* @__PURE__ */ new Set([
-	"both",
-	"inline",
-	"list",
-	"none"
-]);
-const EXPRESSION_TYPED = /\p{L}|\s/u;
-const INVALID_BAD = "Please select an option from the list";
-const INVALID_INPUT = "Please enter a value";
-const INVALID_OVERFLOW = "Please select fewer options (maximum is {max})";
-const INVALID_UNDERFLOW = "Please select more options (minimum is {min})";
-const KEYS_NAVIGATION = /* @__PURE__ */ new Set([
-	"ArrowDown",
-	"ArrowUp",
-	"PageDown",
-	"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 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();
-const scrollOptions = {
-	behavior: "smooth",
-	block: "nearest",
-	inline: "nearest"
-};
-const states = /* @__PURE__ */ new WeakMap();
-let index = 0;
-on(document, "click", onClick);
-on(document, "keydown", onKeydown, { passive: false });
-on(document, "keyup", onKeyup, { passive: false });
-customElements.define(TAGNAME, OuiComboboxElement);
-//#endregion
-export { OuiComboboxElement };