@oscarpalmer/oui 0.34.0 → 0.36.0

package/dist/js/data.combobox-8RwBv5ey.mjs

@@ -1,1077 +0,0 @@
-import { createEmbeddedFloatable } from "./floatable/floatable.embedded.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/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 comboboxStates = {
-	map: /* @__PURE__ */ new WeakMap(),
-	set: /* @__PURE__ */ new Set()
-};
-//#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/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);
-	}
-}
-let index = 0;
-//#endregion
-//#region src/js/combobox/i18n.combobox.ts
-function getComboboxLanguage(state) {
-	return (state.host.closest("[lang]")?.getAttribute("lang") ?? document.documentElement.lang).toLowerCase();
-}
-function getComboboxLocalization(key, state) {
-	const language = getComboboxLanguage(state);
-	const allLocalizations = [state.localizations, LOCALIZATIONS.globals];
-	const { length } = allLocalizations;
-	let localization;
-	let shortLanguage;
-	for (let index = 0; index < length; index += 1) {
-		const localizations = allLocalizations[index];
-		localization = localizations?.[language]?.[key];
-		if (localization != null) break;
-		shortLanguage ??= language.split("-")[0];
-		if (shortLanguage === language) continue;
-		localization = localizations?.[shortLanguage]?.[key];
-		if (localization != null) break;
-	}
-	return localization ?? LOCALIZATIONS.defaults[key];
-}
-function setComboboxLocalizations(first, second) {
-	updateComboboxLocalizations(typeof first === "string" ? { [first]: second } : first);
-}
-function updateComboboxLocalizations(values, destination) {
-	if (typeof values !== "object" || values == null) return;
-	const localizations = destination ?? LOCALIZATIONS.globals;
-	const languages = Object.keys(values);
-	const languagesLength = languages.length;
-	let updated = false;
-	for (let languagesIndex = 0; languagesIndex < languagesLength; languagesIndex += 1) {
-		const language = languages[languagesIndex];
-		const languageValue = values[language];
-		if (typeof languageValue !== "object" || languageValue == null) continue;
-		const normalizedLanguage = language.toLowerCase();
-		localizations[normalizedLanguage] ??= {};
-		const keys = Object.keys(languageValue);
-		const keysLength = keys.length;
-		for (let keysIndex = 0; keysIndex < keysLength; keysIndex += 1) {
-			const key = keys[keysIndex];
-			const keyValue = languageValue[key];
-			const normalizedKey = key.toLowerCase();
-			if (LOCALIZATIONS.keys.has(normalizedKey) && (typeof keyValue === "string" || typeof keyValue === "function")) {
-				updated = true;
-				localizations[normalizedLanguage][normalizedKey] = keyValue;
-			}
-		}
-	}
-	if (!updated) return;
-	for (const state of comboboxStates.set) {
-		updateComboboxAnchor(state);
-		updateComboboxMessage(state, getComboboxVisibleOptions(state).length);
-		updateComboboxSelectionItems(state);
-	}
-}
-const LOCALIZATIONS = {
-	defaults: {
-		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`
-	},
-	globals: {},
-	keys: /* @__PURE__ */ new Set([
-		"empty",
-		"input",
-		"invalid",
-		"max",
-		"min",
-		"remove",
-		"results",
-		"selected"
-	])
-};
-//#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 = getComboboxLocalization("invalid", state);
-		state.internals.setValidity({ valueMissing }, typeof localization === "function" ? localization() : localization);
-		state.internals.checkValidity();
-		return;
-	}
-	let error;
-	let message;
-	switch (true) {
-		case state.required && state.options.selected.length === 0: {
-			error = "badInput";
-			const localization = getComboboxLocalization("input", state);
-			message = typeof localization === "function" ? localization() : localization;
-			break;
-		}
-		case state.multiple && typeof state.max === "number" && state.options.selected.length > state.max: {
-			error = "rangeOverflow";
-			const localization = getComboboxLocalization("max", state);
-			message = typeof localization === "function" ? localization(state.max) : localization.replace("{max}", state.max.toString());
-			break;
-		}
-		case state.multiple && typeof state.min === "number" && state.options.selected.length < state.min: {
-			error = "rangeUnderflow";
-			const localization = getComboboxLocalization("min", state);
-			message = typeof localization === "function" ? localization(state.min) : localization.replace("{min}", state.min.toString());
-			break;
-		}
-	}
-	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 element = createElement("li");
-	const localization = state == null ? option.textContent : getComboboxLocalization("remove", state);
-	const button = createElement("button", {
-		aria: { label: typeof localization === "function" ? localization(option.textContent ?? "", getData(option, "value", false) ?? "") : localization },
-		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 = getComboboxLocalization("selected", state);
-	setAria(state.anchor.element, "label", typeof localization === "function" ? localization(state.options.selected.length) : localization.replace("{amount}", state.options.selected.length.toString()));
-}
-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 = getComboboxLocalization("empty", state);
-		state.message.textContent = typeof localization === "function" ? localization() : localization;
-	} else {
-		const localization = getComboboxLocalization("results", state);
-		state.message.textContent = typeof localization === "function" ? localization(visible) : localization.replace("{amount}", visible.toString());
-	}
-	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 (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 = getComboboxLocalization("remove", state);
-	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;
-		setAria(item.button, "label", typeof localization === "function" ? localization(option?.textContent ?? "", getData(option, "value", false) ?? "") : localization.replace("{label}", option?.textContent ?? ""));
-	}
-}
-//#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 { onComboboxKeydown as $, updateComboboxTabindices as A, getComboboxBooleanAria as B, setComboboxRequired as C, updateComboboxPreview as D, updateComboboxMessage as E, setComboboxLocalizations as F, setComboboxLimit as G, getComboboxVisibleOptions as H, updateComboboxLocalizations as I, onComboboxEnter as J, onComboboxClickContent as K, generateComboboxIds as L, updateComboboxValidity as M, getComboboxLanguage as N, updateComboboxSelection as O, getComboboxLocalization as P, onComboboxInput as Q, getComboboxAttributeValue as R, setComboboxReadonly as S, updateComboboxAutocomplete as T, hasTextSelection as U, getComboboxId as V, setComboboxFilter as W, onComboboxFilter as X, onComboboxEscape as Y, onComboboxFocusout as Z, createComboboxOptions as _, setComboboxValues as a, attachCombobox as at, createComboboxSelectionItems as b, createComboboxButton as c, detachCombobox as ct, createComboboxGroup as d, onComboboxKeydownSelection as et, createComboboxHeader as f, createComboboxOption as g, createComboboxMessage as h, setComboboxValue as i, onComboboxTab as it, updateComboboxForm as j, updateComboboxSelectionItems as k, createComboboxContent as l, createComboboxList as m, filterComboboxOption as n, onComboboxRemoveSelection as nt, toggleComboboxOption as o, comboboxStates as ot, createComboboxInput as p, onComboboxClickDocument as q, filterComboboxOptions as r, onComboboxSelection as rt, createComboboxAnchor as s, createComboboxState as st, applyComboboxSelection as t, onComboboxNavigation as tt, createComboboxFilter as u, createComboboxSelection as v, updateComboboxAnchor as w, setComboboxDisabled as x, createComboboxSelectionItem as y, getComboboxAutoComplete as z };