@oscarpalmer/oui 0.33.0 → 0.35.0

package/dist/js/data.combobox-B8HMkDOh.mjs

@@ -0,0 +1,1030 @@
+import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
+import { getLocalization, getLocalizations, localize, updateLocalizations } from "./l10n.mjs";
+import { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_CONTENT, COMBOBOX_ATTRIBUTE_FILTER, COMBOBOX_ATTRIBUTE_FILTER_INPUT, COMBOBOX_ATTRIBUTE_HEADER, COMBOBOX_ATTRIBUTE_HIDDEN, COMBOBOX_ATTRIBUTE_LIST, COMBOBOX_ATTRIBUTE_MESSAGE, COMBOBOX_ATTRIBUTE_OPTION, COMBOBOX_ATTRIBUTE_OPTION_ACTIVE, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_KEYS_ACTIVATION, COMBOBOX_KEYS_NAVIGATION, COMBOBOX_KEYS_SELECTION, COMBOBOX_MESSAGE_LABEL, COMBOBOX_MESSAGE_SELECT, COMBOBOX_SELECTOR_ANCHOR, COMBOBOX_SELECTOR_OPTION, COMBOBOX_SELECTOR_SELECTION_ITEM, COMBOBOX_TAGNAME, COMBOBOX_TYPES, comboboxScrollOptions } from "./combobox/constants.combobox.mjs";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
+import { dispatch, on } from "@oscarpalmer/toretto/event";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { getString } from "@oscarpalmer/atoms/string";
+import { getData } from "@oscarpalmer/toretto/data";
+import { createElement } from "@oscarpalmer/toretto/create";
+import { dispatch as dispatch$1, findAncestor, getData as getData$1 } from "@oscarpalmer/toretto";
+//#region src/js/combobox/misc.combobox.ts
+function generateComboboxIds(prefix, select) {
+	const elements = [...select.children].flatMap((child) => child instanceof HTMLOptGroupElement ? [child, ...[...child.children].filter((groupChild) => groupChild instanceof HTMLOptionElement)] : child instanceof HTMLOptionElement ? [child] : []);
+	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 getComboboxAttributeValue(element, attribute, possible, defaultValue) {
+	const value = getAttribute(element, attribute);
+	return possible.has(value) ? value : defaultValue;
+}
+function getComboboxAutoComplete(element, select) {
+	let value;
+	if (select) value = "list";
+	else value = getComboboxAttributeValue(element, "autocomplete", COMBOBOX_AUTOCOMPLETES, "none");
+	return {
+		value,
+		both: value === "both",
+		inline: value === "inline",
+		list: value === "list",
+		none: value === "none"
+	};
+}
+function getComboboxBooleanAria(element, attribute) {
+	const value = getAria(element, attribute);
+	return value === true || value === "true";
+}
+function getComboboxId() {
+	index += 1;
+	return `oui_combobox_${index}`;
+}
+function getComboboxVisibleOptions(state) {
+	return state.options.all.filter((option) => !option.hidden);
+}
+function hasTextSelection(element) {
+	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
+}
+function setComboboxFilter(state, value) {
+	if (typeof value !== "string") return;
+	const type = value.length < state.filter.element.value.length ? "deleteContentBackward" : "insertText";
+	state.filter.element.value = value;
+	onComboboxFilter(type, state);
+}
+function setComboboxLimit(type, state, value) {
+	let actual = value;
+	if (typeof actual === "string") actual = Number.parseInt(actual, 10);
+	if (typeof actual === "number" && !Number.isNaN(actual) && actual >= 0 ? actual !== state[type] : actual == null) {
+		state[type] = actual;
+		setAttribute(state.host, type, actual);
+		updateComboboxValidity(state);
+	}
+}
+function setComboboxLocalizations(first, second) {
+	updateLocalizations(comboboxLocalizations, typeof first === "string" ? { [first]: second } : first, comboboxLocalizations.values, () => {
+		for (const state of comboboxStates.set) {
+			updateComboboxAnchor(state);
+			updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
+			updateComboboxSelectionItems(state);
+		}
+	});
+}
+let index = 0;
+//#endregion
+//#region src/js/combobox/event.combobox.ts
+function onComboboxClickContent(event, content) {
+	const state = comboboxStates.map.get(content);
+	if (state == null) return;
+	if (state.disabled) return;
+	const option = findAncestor(event, COMBOBOX_SELECTOR_OPTION);
+	if (!(option instanceof HTMLElement)) state.filter.element.focus();
+	else if (state.readonly) updateComboboxPreview("set", state, option);
+	else toggleComboboxOption(state, option);
+}
+function onComboboxClickDocument(event) {
+	const combobox = findAncestor(event, COMBOBOX_TAGNAME);
+	const state = comboboxStates.map.get(combobox);
+	if (combobox == null || state == null) return;
+	const label = findAncestor(event, "label");
+	if (label != null) {
+		if (label === state.label.element && combobox.type === "select") {
+			state.anchor.element.focus();
+			if (!state.disabled) state.floatable.show();
+		}
+		return;
+	}
+	const selection = findAncestor(event, `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`);
+	if (selection != null) {
+		const option = state.options.selected.find((option) => option.id === getData$1(selection, "option", false));
+		if (state.disabled) state.anchor.element.focus();
+		else if (state.readonly) updateComboboxTabindices(state, option);
+		else toggleComboboxOption(state, option);
+		return;
+	}
+	if (findAncestor(event, COMBOBOX_SELECTOR_ANCHOR) != null && !state.disabled) {
+		state.floatable.show();
+		return;
+	}
+}
+function onComboboxEnter(state) {
+	if (state.disabled || state.readonly) return;
+	if (hasTextSelection(state.anchor.element)) onComboboxSelection(state);
+	else toggleComboboxOption(state, state.active);
+}
+function onComboboxEscape(state) {
+	state.floatable.hide();
+}
+function onComboboxFilter(type, state, manual, emit) {
+	if (state.disabled || state.readonly) return;
+	const diff = state.filter.value !== state.filter.element.value;
+	if (!state.autocomplete.inline && state.filter.element.value.length > 0 && !(manual ?? false)) state.floatable.show();
+	const option = state.autocomplete.none ? state.active ?? state.options.all[0] : filterComboboxOptions(state);
+	let update;
+	if (type.includes("delete")) update = "none";
+	else if (type.includes("insert")) update = "typed";
+	if (update != null) if (state.autocomplete.none) applyComboboxSelection({
+		state,
+		added: false,
+		emit: (emit ?? true) && diff
+	});
+	else updateComboboxPreview(update, state, option);
+	if (diff) {
+		state.filter.value = state.filter.element.value;
+		dispatch$1(state.host, "input");
+	}
+}
+function onComboboxFocusout(state) {
+	if (state.disabled || state.readonly || state.type === "select" || state.host === document.activeElement || state.host.contains(document.activeElement)) return;
+	const option = filterComboboxOption(state, state.filter.element.value, true);
+	applyComboboxSelection({
+		option,
+		state,
+		added: false,
+		selected: option == null ? [] : [option]
+	});
+}
+function onComboboxInput(event) {
+	const combobox = findAncestor(event, COMBOBOX_TAGNAME);
+	const state = comboboxStates.map.get(combobox);
+	if (combobox != null && state != null && event.target === state.filter.element) onComboboxFilter(event.inputType, state);
+}
+function onComboboxKeydown(event) {
+	const combobox = findAncestor(event, COMBOBOX_TAGNAME);
+	const state = comboboxStates.map.get(combobox);
+	if (combobox == null || state == null) return;
+	const item = findAncestor(event, COMBOBOX_SELECTOR_SELECTION_ITEM);
+	if (item instanceof HTMLElement) {
+		onComboboxKeydownSelection(event, state, item);
+		return;
+	}
+	onComboboxKeydownFilter(event, state);
+}
+function onComboboxKeydownFilter(event, state) {
+	const ignore = state.disabled || state.readonly;
+	const isSelect = state.type === "select";
+	let preventDefault = ignore;
+	switch (true) {
+		case event.key === " ":
+			if (!state.disabled) state.floatable.show();
+			break;
+		case event.key === "Enter":
+			preventDefault = state.floatable.open;
+			if (preventDefault) onComboboxEnter(state);
+			else if (!ignore && state.type === "select") state.floatable.show();
+			else if (!ignore) state.internals.form?.requestSubmit();
+			break;
+		case event.key === "Escape":
+			preventDefault = false;
+			onComboboxEscape(state);
+			break;
+		case !isSelect && COMBOBOX_KEYS_SELECTION.has(event.key):
+			if (!ignore && hasTextSelection(state.anchor.element)) onComboboxSelection(state);
+			break;
+		case COMBOBOX_KEYS_NAVIGATION.has(event.key):
+			if (!state.disabled) onComboboxNavigation(event, state);
+			break;
+		default:
+			preventDefault = false;
+			if (event.key === "Tab") onComboboxTab(state);
+	}
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+function onComboboxKeydownSelection(event, state, item) {
+	if (COMBOBOX_KEYS_ACTIVATION.has(event.key)) {
+		event.preventDefault();
+		onComboboxRemoveSelection(state, item);
+		return;
+	}
+	if (state.disabled || state.selection == null) return;
+	const { length } = state.selection.items;
+	const index = state.selection.items.findIndex((selection) => selection.button === item);
+	let next;
+	switch (event.key) {
+		case "ArrowDown":
+			state.anchor.element.focus();
+			state.anchor.element.click();
+			return;
+		case "ArrowRight":
+		case "ArrowLeft":
+			next = clamp(index + (event.key === "ArrowRight" ? 1 : -1), 0, length - 1, true);
+			break;
+		case "End":
+			next = length - 1;
+			break;
+		case "Home": next = 0;
+	}
+	if (next == null) return;
+	event.preventDefault();
+	for (let index = 0; index < length; index += 1) {
+		const { button } = state.selection.items[index];
+		const selected = index === next;
+		button.tabIndex = selected ? 0 : -1;
+		if (selected) button.focus();
+	}
+}
+function onComboboxNavigation(event, state) {
+	let skip = false;
+	if (!state.floatable.open) {
+		skip = true;
+		state.floatable.show();
+	}
+	const visible = getComboboxVisibleOptions(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);
+		}
+		if (index != null) next = visible[index];
+	}
+	let preview;
+	if (state.type === "autocomplete" && (state.autocomplete.both || state.autocomplete.inline)) preview = "set";
+	else preview = "none";
+	updateComboboxPreview(preview, state, next ?? state.active ?? visible[0]);
+}
+function onComboboxRemoveSelection(state, item) {
+	if (state.disabled || state.readonly) return;
+	const option = state.options.selected.find((option) => option.id === getData$1(item, "option", false));
+	if (option != null) toggleComboboxOption(state, option);
+}
+function onComboboxSelection(state) {
+	state.filter.value = state.anchor.element === state.filter.element ? state.filter.element.value : "";
+	toggleComboboxOption(state, filterComboboxOptions(state) ?? state.active);
+}
+function onComboboxTab(state) {
+	setTimeout(() => {
+		if (state.host === document.activeElement) return;
+		if (state.selection?.container.contains(document.activeElement) || !state.host.contains(document.activeElement)) state.floatable.hide();
+	});
+}
+on(document, "click", onComboboxClickDocument);
+on(document, "input", onComboboxInput, { passive: false });
+on(document, "keydown", onComboboxKeydown, { passive: false });
+//#endregion
+//#region src/js/combobox/state.combobox.ts
+function attachCombobox(state) {
+	const { anchor, content, filter, label, listeners, select } = state;
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${state.id}_label`;
+	select.hidden = true;
+	select.insertAdjacentElement("afterend", anchor.container ?? anchor.element);
+	(anchor.container ?? anchor.element).insertAdjacentElement("afterend", content);
+	select.remove();
+	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
+		position: "below-start",
+		reusable: false
+	});
+	state.floatable.update();
+	listeners.push(on(state.host, "focusout", () => {
+		setTimeout(() => {
+			onComboboxFocusout(state);
+		});
+	}), on(content, "click", (event) => {
+		onComboboxClickContent(event, content);
+	}), on(content, "toggle", () => {
+		setAria(anchor.element, "expanded", state.floatable.open);
+		setAria(filter.element, "activedescendant", state.floatable.open ? state.active?.id : void 0);
+		if (state.floatable.open) filter.element.focus();
+	}));
+	comboboxStates.map.set(state.host, state);
+	comboboxStates.map.set(state.content, state);
+	comboboxStates.set.add(state);
+}
+function createComboboxState(element, internals) {
+	const select = element.querySelector("select");
+	if (select == null || select.id === "") throw new Error(COMBOBOX_MESSAGE_SELECT);
+	const label = element.querySelector(`label[for="${select.id}"]`);
+	if (label == null) throw new Error(COMBOBOX_MESSAGE_LABEL);
+	element.id = select.id;
+	setAttribute(element, "name", select.name === "" ? select.id : select.name);
+	const disabled = getComboboxBooleanAria(element, "disabled") || select.disabled;
+	const multiple = element.multiple || select.multiple;
+	const readonly = getComboboxBooleanAria(element, "readonly");
+	const required = getComboboxBooleanAria(element, "required") || select.required;
+	const id = getComboboxId();
+	const type = multiple ? "select" : getComboboxAttributeValue(element, "type", COMBOBOX_TYPES, "select");
+	const autocomplete = getComboboxAutoComplete(element, type === "select");
+	const labelId = label.id;
+	label.htmlFor = id;
+	label.id = `${id}_label`;
+	generateComboboxIds(id, select);
+	const anchor = createComboboxAnchor({
+		autocomplete,
+		id,
+		label,
+		multiple,
+		select,
+		type
+	});
+	const content = createComboboxContent({
+		autocomplete,
+		id,
+		label,
+		multiple,
+		select,
+		type
+	});
+	const values = content.list.selected.length === 0 ? [""] : content.list.selected.map((option) => getData(option, "value", false) ?? "");
+	const state = {
+		autocomplete,
+		disabled,
+		id,
+		internals,
+		multiple,
+		readonly,
+		required,
+		select,
+		type,
+		anchor: {
+			container: anchor.container,
+			element: anchor.element
+		},
+		active: content.list.selected[0],
+		content: content.element,
+		filter: {
+			element: content.filter?.element ?? anchor.element,
+			value: ""
+		},
+		floatable: void 0,
+		groups: content.list.groups,
+		host: element,
+		label: {
+			element: label,
+			id: labelId
+		},
+		listeners: [],
+		localizations: {},
+		message: content.message,
+		name: element.name,
+		options: {
+			all: content.list.options,
+			selected: content.list.selected
+		},
+		selection: anchor.selection,
+		values: {
+			current: values.slice(),
+			initial: values.slice()
+		}
+	};
+	attachCombobox(state);
+	setComboboxDisabled(state, disabled);
+	setComboboxLimit("max", state, getAttribute(element, "max"));
+	setComboboxLimit("min", state, getAttribute(element, "min"));
+	setComboboxReadonly(state, readonly);
+	setComboboxRequired(state, required);
+	filterComboboxOptions(state);
+	if (content.list.selected.length > 0) updateComboboxPreview("set", state, content.list.selected[0]);
+	updateComboboxForm(state, state.values.current, false);
+	updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
+	updateComboboxSelectionItems(state);
+	return state;
+}
+function detachCombobox(state) {
+	const { content, floatable, host, label, select } = state;
+	const listeners = state.listeners.splice(0);
+	const { length } = listeners;
+	for (let index = 0; index < length; index += 1) listeners[index]();
+	floatable.destroy();
+	const anchor = state.anchor.container ?? state.anchor.element;
+	anchor.insertAdjacentElement("beforebegin", select);
+	anchor.remove();
+	content.remove();
+	label.element.htmlFor = select.id;
+	label.element.id = state.label.id;
+	select.hidden = false;
+	comboboxStates.map.delete(host);
+	comboboxStates.map.delete(content);
+	comboboxStates.set.delete(state);
+}
+const comboboxLocalizations = getLocalizations({
+	empty: "No results found",
+	input: "Please enter a value",
+	invalid: "Please select an option from the list",
+	max: (max) => `Please select fewer options (maximum is ${max})`,
+	min: (min) => `Please select more options (minimum is ${min})`,
+	remove: (label) => `Remove ${label}`,
+	results: (amount) => `${amount} results available`,
+	selected: (amount) => `${amount} selected`
+});
+const comboboxStates = {
+	map: /* @__PURE__ */ new WeakMap(),
+	set: /* @__PURE__ */ new Set()
+};
+//#endregion
+//#region src/js/combobox/form.combobox.ts
+function updateComboboxForm(state, values, emit) {
+	let value;
+	if (state.multiple) {
+		const { length } = values;
+		value = new FormData();
+		for (let index = 0; index < length; index += 1) value.append(state.name, values[index]);
+	} else value = values[0];
+	state.values.current = values;
+	state.internals.setFormValue(value, JSON.stringify(values));
+	updateComboboxAnchor(state);
+	updateComboboxValidity(state);
+	if (emit ?? true) dispatch(state.host, "change");
+}
+function updateComboboxValidity(state) {
+	if (state.autocomplete.none) {
+		const valueMissing = state.required && state.filter.element.value.length === 0;
+		const localization = getLocalization(comboboxLocalizations, state.host, "invalid", state.localizations);
+		state.internals.setValidity({ valueMissing }, localize(localization, {}, []));
+		state.internals.checkValidity();
+		return;
+	}
+	let data = {};
+	let error;
+	let key;
+	let parameters = [];
+	switch (true) {
+		case state.required && state.options.selected.length === 0:
+			error = "badInput";
+			key = "input";
+			break;
+		case state.multiple && typeof state.max === "number" && state.options.selected.length > state.max:
+			data = { amount: state.max };
+			error = "rangeOverflow";
+			key = "max";
+			parameters = [state.max];
+			break;
+		case state.multiple && typeof state.min === "number" && state.options.selected.length < state.min:
+			data = { amount: state.min };
+			error = "rangeUnderflow";
+			key = "min";
+			parameters = [state.min];
+	}
+	const localization = key == null ? void 0 : getLocalization(comboboxLocalizations, state.host, key, state.localizations);
+	const message = localization == null ? void 0 : localize(localization, data, parameters);
+	state.internals.setValidity(error == null ? {} : { [error]: true }, message);
+	state.internals.checkValidity();
+}
+//#endregion
+//#region src/js/combobox/dom.combobox.ts
+function createComboboxAnchor(parameters) {
+	const { autocomplete, id, label, select, type } = parameters;
+	let container;
+	let element;
+	let selection;
+	if (parameters.type === "autocomplete") element = createComboboxInput({
+		id,
+		label,
+		type,
+		autocomplete: autocomplete.value,
+		value: select.selectedOptions[0]?.textContent ?? ""
+	});
+	else ({container, element, selection} = createComboboxButton(parameters));
+	setAttribute(container ?? element, COMBOBOX_ATTRIBUTE_ANCHOR, "");
+	return {
+		container,
+		element,
+		selection
+	};
+}
+function createComboboxButton(parameters) {
+	const { id, label, multiple, select } = parameters;
+	const element = createElement("button", {
+		aria: {
+			controls: `${id}_content`,
+			expanded: false,
+			haspopup: "listbox",
+			labelledby: `${label.id} ${id}`
+		},
+		property: { textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? "" }
+	});
+	if (!multiple) return { element };
+	const container = createElement("div");
+	const selection = createComboboxSelection(id, select);
+	container.append(selection.container, element);
+	return {
+		container,
+		element,
+		selection
+	};
+}
+function createComboboxContent(parameters) {
+	const { autocomplete, id, label, multiple, select, type } = parameters;
+	const element = createElement("div", {
+		aria: { labelledby: label.id },
+		attribute: {
+			[COMBOBOX_ATTRIBUTE_CONTENT]: "",
+			popover: ""
+		},
+		property: {
+			id: `${id}_content`,
+			tabIndex: -1
+		}
+	});
+	const filter = createComboboxFilter({
+		id,
+		label,
+		type,
+		autocomplete: autocomplete.value
+	});
+	const list = createComboboxList({
+		autocomplete,
+		id,
+		label,
+		multiple,
+		select
+	});
+	const message = createComboboxMessage();
+	if (filter != null) element.append(filter.container);
+	element.append(list.element, message);
+	return {
+		element,
+		filter,
+		list,
+		message
+	};
+}
+function createComboboxFilter(parameters) {
+	const { autocomplete, id, label, type } = parameters;
+	if (type === "autocomplete") return;
+	const container = createElement("div", { attribute: { [COMBOBOX_ATTRIBUTE_FILTER]: "" } });
+	const element = createComboboxInput({
+		autocomplete,
+		id,
+		label,
+		type,
+		value: ""
+	});
+	setAttribute(element, COMBOBOX_ATTRIBUTE_FILTER_INPUT, "");
+	container.append(element);
+	return {
+		container,
+		element
+	};
+}
+function createComboboxGroup(parameters) {
+	const { autocomplete, group, groupOptions, selected } = parameters;
+	const element = createElement("li", {
+		aria: { label: group.label },
+		property: { role: "group" }
+	});
+	const list = createElement("ul", { property: { role: "none" } });
+	const header = createComboboxHeader(group);
+	element.append(header, list);
+	return {
+		element,
+		header,
+		options: createComboboxOptions({
+			autocomplete,
+			list,
+			selected,
+			group: header.id,
+			options: groupOptions
+		})
+	};
+}
+function createComboboxHeader(group) {
+	return createElement("div", {
+		aria: { hidden: true },
+		attribute: { [COMBOBOX_ATTRIBUTE_HEADER]: "" },
+		property: {
+			id: group.id,
+			textContent: group.label
+		}
+	});
+}
+function createComboboxInput(parameters) {
+	const { autocomplete, id, label, type, value } = parameters;
+	return createElement("input", {
+		aria: {
+			autocomplete,
+			controls: `${id}_list`,
+			expanded: type === "select",
+			haspopup: "listbox",
+			labelledby: label.id
+		},
+		attribute: {
+			autocorrect: "off",
+			autocomplete: "off",
+			form: "",
+			spellcheck: "false",
+			type: "text"
+		},
+		property: {
+			id,
+			value,
+			role: "combobox"
+		}
+	});
+}
+function createComboboxList(parameters) {
+	const { autocomplete, id, label, multiple, select } = parameters;
+	const element = createElement("ul", {
+		aria: {
+			labelledby: label.id,
+			multiselectable: multiple
+		},
+		attribute: {
+			[COMBOBOX_ATTRIBUTE_LIST]: "",
+			tabindex: -1
+		},
+		property: {
+			id: `${id}_list`,
+			role: "listbox"
+		}
+	});
+	const children = [...select.children];
+	const childrenLength = children.length;
+	const options = [];
+	const selected = [];
+	let groups;
+	for (let childIndex = 0; childIndex < childrenLength; childIndex += 1) {
+		const child = children[childIndex];
+		if (child instanceof HTMLOptionElement) {
+			const option = createComboboxOption({
+				autocomplete,
+				index: childIndex,
+				option: child
+			});
+			element.append(option);
+			options.push(option);
+			if (child.selected) selected.push(option);
+			continue;
+		}
+		if (!(child instanceof HTMLOptGroupElement)) continue;
+		const group = createComboboxGroup({
+			autocomplete,
+			selected,
+			group: child,
+			groupOptions: [...child.children]
+		});
+		groups ??= [];
+		element.append(group.element, ...group.options);
+		groups.push(group);
+		options.push(...group.options);
+	}
+	return {
+		element,
+		groups,
+		options,
+		selected
+	};
+}
+function createComboboxMessage() {
+	return createElement("div", {
+		aria: { live: "polite" },
+		attribute: { [COMBOBOX_ATTRIBUTE_MESSAGE]: "" },
+		property: {
+			hidden: true,
+			role: "status"
+		}
+	});
+}
+function createComboboxOption(parameters) {
+	const { autocomplete, group, option } = parameters;
+	return createElement("li", {
+		aria: { selected: !autocomplete.none && option.selected },
+		attribute: { [COMBOBOX_ATTRIBUTE_OPTION]: "" },
+		data: {
+			group,
+			value: option.value
+		},
+		property: {
+			id: option.id,
+			role: "option",
+			textContent: option.textContent
+		}
+	});
+}
+function createComboboxOptions(parameters) {
+	const { autocomplete, group, list, options, selected } = parameters;
+	const items = [];
+	for (let index = 0; index < options.length; index += 1) {
+		const option = options[index];
+		const item = createComboboxOption({
+			autocomplete,
+			group,
+			index,
+			option
+		});
+		items.push(item);
+		if (option.selected) selected.push(item);
+		list.append(item);
+	}
+	return items;
+}
+function createComboboxSelection(id, select) {
+	const container = createElement("ul", {
+		attribute: { [COMBOBOX_ATTRIBUTE_SELECTION]: "" },
+		property: { id: `${id}_selection` }
+	});
+	const options = [...select.selectedOptions];
+	const items = [];
+	createComboboxSelectionItems({
+		container,
+		items,
+		options
+	});
+	const { button } = items[0] ?? {};
+	if (button != null) button.tabIndex = 0;
+	return {
+		items,
+		container
+	};
+}
+function createComboboxSelectionItem(option, state) {
+	const optionLabel = option.textContent;
+	const optionValue = getData(option, "value", false) ?? "";
+	const element = createElement("li");
+	const localization = state == null ? option.textContent : getLocalization(comboboxLocalizations, state.host, "remove", state.localizations);
+	const button = createElement("button", {
+		aria: { label: localize(localization, {
+			label: optionLabel,
+			value: optionValue
+		}, [optionLabel, optionValue]) },
+		attribute: {
+			[COMBOBOX_ATTRIBUTE_SELECTION_ITEM]: "",
+			tabindex: -1
+		},
+		data: { option: option.id }
+	});
+	const icon = createElement("span", {
+		aria: { hidden: true },
+		property: { innerHTML: "&times;" }
+	});
+	const label = createElement("span", { property: { textContent: option.textContent } });
+	button.append(icon, label);
+	element.append(button);
+	return {
+		button,
+		element
+	};
+}
+function createComboboxSelectionItems(parameters) {
+	const { container, items, options, state } = parameters;
+	const { length } = options;
+	for (let index = 0; index < length; index += 1) {
+		const option = options[index];
+		const item = createComboboxSelectionItem(option, state);
+		container.append(item.element);
+		items.push(item);
+	}
+}
+function setComboboxDisabled(state, value) {
+	state.filter.element.readOnly = state.readonly || value;
+	setProperties("disabled", state, value);
+}
+function setProperties(key, state, value) {
+	state[key] = value;
+	const elements = [
+		state.host,
+		state.anchor.element,
+		state.filter.element
+	];
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		setAria(element, key, key !== "readonly" || !(element instanceof HTMLButtonElement) ? value : void 0);
+	}
+}
+function setComboboxReadonly(state, value) {
+	state.filter.element.readOnly = state.disabled || value;
+	setProperties("readonly", state, value);
+}
+function setComboboxRequired(state, value) {
+	setProperties("required", state, value);
+	updateComboboxValidity(state);
+}
+function updateComboboxTabindices(state, active) {
+	if (active == null || state.selection == null) return;
+	const next = state.selection.items.find((item) => getData(item.button, "option", false) === active.id);
+	if (next == null) return;
+	const { length } = state.selection.items;
+	for (let index = 0; index < length; index += 1) {
+		const item = state.selection.items[index];
+		item.button.tabIndex = item === next ? 0 : -1;
+	}
+	next.button.focus();
+}
+function updateComboboxAnchor(state) {
+	if (!state.multiple) return;
+	const localization = getLocalization(comboboxLocalizations, state.host, "selected", state.localizations);
+	const { length } = state.options.selected;
+	setAria(state.anchor.element, "label", localize(localization, { amount: length }, [length]));
+}
+function updateComboboxAutocomplete(preview, state, active) {
+	if (state.multiple) return;
+	const content = active?.textContent ?? state.filter.element.value;
+	if (preview === "typed" && !content.toLocaleLowerCase().startsWith(state.filter.element.value.toLocaleLowerCase())) return;
+	if (state.anchor.element instanceof HTMLInputElement) {
+		const contentLength = content.length;
+		const filterLength = state.filter.element.value.length;
+		if (preview === "set" || preview === "typed") {
+			state.anchor.element.value = content;
+			state.anchor.element.setSelectionRange(preview === "typed" ? filterLength : contentLength, contentLength);
+		}
+	} else state.anchor.element.textContent = content;
+}
+function updateComboboxMessage(state, visible) {
+	setAttribute(state.message, COMBOBOX_ATTRIBUTE_HIDDEN, visible > 0 ? "" : void 0);
+	if (visible === 0) {
+		const localization = getLocalization(comboboxLocalizations, state.host, "empty", state.localizations);
+		state.message.textContent = localize(localization, {}, []);
+	} else {
+		const localization = getLocalization(comboboxLocalizations, state.host, "results", state.localizations);
+		state.message.textContent = localize(localization, { amount: visible }, [visible]);
+	}
+	state.message.hidden = false;
+}
+function updateComboboxPreview(preview, state, active) {
+	const { length } = state.options.all;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		setAttribute(option, COMBOBOX_ATTRIBUTE_OPTION_ACTIVE, option === active ? "" : void 0);
+	}
+	state.active = active;
+	setAria(state.filter.element, "activedescendant", state.floatable.open ? active?.id : void 0);
+	if (state.floatable.open) active?.scrollIntoView(comboboxScrollOptions);
+	if (preview !== "none") updateComboboxAutocomplete(preview, state, active);
+}
+function updateComboboxSelection(state, active, added, selected) {
+	if (state.selection == null) return;
+	let options = active == null ? [] : [active];
+	if (added && selected != null) {
+		options = selected;
+		const { length } = state.selection.items;
+		for (let index = 0; index < length; index += 1) state.selection.items[index].element.remove();
+		state.selection.items.splice(0);
+	}
+	if (added) {
+		createComboboxSelectionItems({
+			options,
+			state,
+			container: state.selection.container,
+			items: state.selection.items
+		});
+		return;
+	}
+	let current = state.selection.items.findIndex((item) => getData(item.button, "option", false) === active?.id);
+	if (current === -1) return;
+	state.selection.items[current].element.remove();
+	state.selection.items.splice(current, 1);
+	if (state.selection.items.length === 0) {
+		state.anchor.element.focus();
+		return;
+	}
+	const { length } = state.selection.items;
+	if (current < 0) current = 0;
+	else if (current >= length) current = length - 1;
+	for (let index = 0; index < length; index += 1) {
+		const { button } = state.selection.items[index];
+		button.tabIndex = index === current ? 0 : -1;
+	}
+	state.selection.items[current].button.focus();
+}
+function updateComboboxSelectionItems(state) {
+	if (state.selection == null) return;
+	const localization = getLocalization(comboboxLocalizations, state.host, "remove", state.localizations);
+	const { length } = state.selection.items;
+	for (let index = 0; index < length; index += 1) {
+		const item = state.selection.items[index];
+		const option = state.options.selected.find((option) => option.id === getData(item.button, "option", false));
+		if (option == null) continue;
+		const optionLabel = option.textContent;
+		const optionValue = getData(option, "value", false) ?? "";
+		setAria(item.button, "label", localize(localization, {
+			label: optionLabel,
+			value: optionValue
+		}, [optionLabel, optionValue]));
+	}
+}
+//#endregion
+//#region src/js/combobox/data.combobox.ts
+function applyComboboxSelection(parameters) {
+	const { added, emit, option, selected, state } = parameters;
+	const { length } = state.options.all;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		setAria(option, "selected", (selected ?? state.options.selected).includes(option));
+	}
+	const values = parameters.values ?? (state.autocomplete.none ? [state.filter.element.value] : (selected ?? state.options.selected).map((option) => getData(option, "value", false) ?? ""));
+	if (values.length === 0) values.push("");
+	if (selected != null) state.options.selected = selected;
+	if (!(values.length === state.values.current.length ? values.some((value) => !state.values.current.includes(value)) : true)) return;
+	updateComboboxForm(state, values, emit);
+	updateComboboxPreview("set", state, option);
+	updateComboboxSelection(state, option, added, selected);
+}
+function filterComboboxOption(state, value, textContent) {
+	const filterTextContent = textContent ?? false;
+	const filter = getString(value).toLocaleLowerCase();
+	filterComboboxOptions(state);
+	const { length } = state.options.all;
+	let match;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		if ((filterTextContent ? option.textContent : getData(option, "value", false) ?? "").toLocaleLowerCase() === filter) {
+			match = option;
+			break;
+		}
+	}
+	return match;
+}
+function filterComboboxOptions(state) {
+	function filter(options) {
+		const { length } = options;
+		let count = 0;
+		for (let index = 0; index < length; index += 1) {
+			const option = options[index];
+			option.hidden = !state.autocomplete.none && !option.textContent.toLocaleLowerCase().includes(value);
+			if (!option.hidden) {
+				count += 1;
+				visible.push(option);
+			}
+		}
+		return count === 0;
+	}
+	const value = state.filter.element.value.toLocaleLowerCase();
+	const visible = [];
+	if (state.groups == null) filter(state.options.all);
+	else {
+		const groupsLength = state.groups.length;
+		for (let groupIndex = 0; groupIndex < groupsLength; groupIndex += 1) {
+			const { element, options } = state.groups[groupIndex];
+			element.hidden = filter(options);
+		}
+	}
+	updateComboboxMessage(state, visible.length);
+	return state.active != null && visible.includes(state.active) ? state.active : visible[0];
+}
+function setComboboxValue(state, value, emit) {
+	if (state.autocomplete.none) {
+		state.filter.element.value = getString(value);
+		onComboboxFilter("insertText", state, true, emit);
+		return;
+	}
+	if (filterComboboxOption(state, value) != null) setComboboxValues(state, [value], emit);
+}
+function setComboboxValues(state, value, emit) {
+	if (!Array.isArray(value)) return;
+	const values = (state.multiple ? value : value.slice(0, 1)).map((value) => getString(value).toLocaleLowerCase());
+	if (values.length === 0) values.push("");
+	if (state.autocomplete.none) {
+		setComboboxValue(state, values[0], emit);
+		return;
+	}
+	const { length } = state.options.all;
+	const selected = [];
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		if (values.includes(getData(option, "value", false)?.toLocaleLowerCase() ?? "")) selected.push(option);
+	}
+	applyComboboxSelection({
+		emit,
+		selected,
+		state,
+		added: true,
+		option: selected[0] ?? state.options.all[0],
+		values: state.autocomplete.none ? values : void 0
+	});
+}
+function toggleComboboxOption(state, option) {
+	if (option == null || !state.multiple && state.options.selected.includes(option)) {
+		state.floatable.hide();
+		return;
+	}
+	const selected = state.options.selected.slice();
+	let added = true;
+	if (state.multiple) {
+		const index = selected.indexOf(option);
+		if (index === -1) selected.push(option);
+		else {
+			added = false;
+			selected.splice(index, 1);
+		}
+	} else selected.splice(0, selected.length, option);
+	applyComboboxSelection({
+		added,
+		option,
+		selected,
+		state,
+		values: state.autocomplete.none && option != null ? [option.textContent] : void 0
+	});
+	if (!state.multiple) state.floatable.hide();
+}
+//#endregion
+export { getComboboxAutoComplete as $, updateComboboxTabindices as A, onComboboxEnter as B, setComboboxRequired as C, updateComboboxPreview as D, updateComboboxMessage as E, comboboxStates as F, onComboboxKeydown as G, onComboboxFilter as H, createComboboxState as I, onComboboxRemoveSelection as J, onComboboxKeydownSelection as K, detachCombobox as L, updateComboboxValidity as M, attachCombobox as N, updateComboboxSelection as O, comboboxLocalizations as P, getComboboxAttributeValue as Q, onComboboxClickContent as R, setComboboxReadonly as S, updateComboboxAutocomplete as T, onComboboxFocusout as U, onComboboxEscape as V, onComboboxInput as W, onComboboxTab as X, onComboboxSelection as Y, generateComboboxIds as Z, createComboboxOptions as _, setComboboxValues as a, setComboboxLimit as at, createComboboxSelectionItems as b, createComboboxButton as c, createComboboxGroup as d, getComboboxBooleanAria as et, createComboboxHeader as f, createComboboxOption as g, createComboboxMessage as h, setComboboxValue as i, setComboboxFilter as it, updateComboboxForm as j, updateComboboxSelectionItems as k, createComboboxContent as l, createComboboxList as m, filterComboboxOption as n, getComboboxVisibleOptions as nt, toggleComboboxOption as o, setComboboxLocalizations as ot, createComboboxInput as p, onComboboxNavigation as q, filterComboboxOptions as r, hasTextSelection as rt, createComboboxAnchor as s, applyComboboxSelection as t, getComboboxId as tt, createComboboxFilter as u, createComboboxSelection as v, updateComboboxAnchor as w, setComboboxDisabled as x, createComboboxSelectionItem as y, onComboboxClickDocument as z };