@oscarpalmer/oui 0.32.0 → 0.33.0

package/dist/js/combobox.mjs

@@ -161,8 +161,30 @@ var OuiComboboxElement = class extends HTMLElement {
 		this.clear();
 	}
 };
-function createAnchor(type, id, label, select, autocomplete, multiple) {
-	const [anchor, selection] = type === "autocomplete" ? [createInput(id, select)] : createBox(id, select, multiple);
+function filterOptions(state, options, clear) {
+	if (clear || state.autocomplete.none) state.filter = "";
+	const filter = state.filter.toLocaleLowerCase();
+	const all = options ?? getOptions(state)[0];
+	const { length } = all;
+	const visible = [];
+	for (let index = 0; index < length; index += 1) {
+		const option = all[index];
+		option.hidden = option.textContent?.toLocaleLowerCase().includes(filter) === false;
+		if (!option.hidden) visible.push(option);
+	}
+	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 options = [...select.options];
+	const { length } = options;
+	for (let index = 0; index < length; index += 1) {
+		const option = options[index];
+		if (option.id === "") option.id = `${prefix}_option_${index}`;
+	}
+}
+function getAnchor(type, id, label, select, autocomplete, multiple) {
+	const anchor = type === "autocomplete" ? getInput(id, select) : getBox(id, select, multiple);
 	setAria(anchor, {
 		autocomplete: type === "autocomplete" ? autocomplete.value : void 0,
 		controls: `${id}_content`,
@@ -172,186 +194,80 @@ function createAnchor(type, id, label, select, autocomplete, multiple) {
 	});
 	setAttribute(anchor, ATTRIBUTE_ANCHOR, "");
 	setRole(anchor, "combobox");
-	return [anchor, selection];
+	return anchor;
+}
+function getAttributeValue(element, attribute, possible, defaultValue) {
+	const value = getAttribute(element, attribute);
+	return possible.has(value) ? value : defaultValue;
+}
+function getAutoComplete(element, select) {
+	let value;
+	if (select) value = "list";
+	else value = getAttributeValue(element, "autocomplete", AUTOCOMPLETES, "none");
+	return {
+		value,
+		both: value === "both",
+		inline: value === "inline",
+		list: value === "list",
+		none: value === "none"
+	};
 }
-function createBox(id, select, multiple) {
+function getBox(id, select, multiple) {
 	const box = createElement("div", {
 		id,
 		tabIndex: 0,
 		textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? ""
 	});
-	let selection;
 	if (multiple) {
-		selection = createSelection(select);
+		const selection = createElement("ul", {}, { [ATTRIBUTE_SELECTION]: "" });
+		for (const option of select.selectedOptions) selection.append(getSelectionItem(option));
 		box.append(selection);
 	}
-	return [box, selection];
+	return box;
 }
-function createContent(type, id, label, select, autocomplete, multiple) {
+function getContent(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 options = [...select.options];
 	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);
+		const item = createElement("li", {
+			id: option.id,
+			textContent: option.textContent
+		}, {
+			[ATTRIBUTE_OPTION]: "",
+			[ATTRIBUTE_OPTION_ACTIVE]: index === 0 ? "" : void 0,
+			role: "option",
+			value: option.value,
+			"aria-selected": !autocomplete.none && option.selected
+		});
 		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"
-	};
+	const empty = createElement("div", {
+		hidden: true,
+		role: "status",
+		textContent: "No results found"
+	}, {
+		[ATTRIBUTE_EMPTY]: "",
+		"aria-live": "polite"
+	});
+	content.append(list, empty);
+	return [
+		content,
+		selected,
+		empty
+	];
 }
 function getFormValue(state, values) {
 	if (values.length === 0 || !state.multiple) return values[0];
@@ -371,6 +287,16 @@ function getId() {
 	index += 1;
 	return `oui_combobox_${index}`;
 }
+function getInput(id, select) {
+	return createElement("input", {
+		id,
+		value: select.selectedOptions[0]?.textContent ?? ""
+	}, {
+		[ATTRIBUTE_ANCHOR]: "",
+		autocomplete: "off",
+		type: "text"
+	});
+}
 function getOption(state, value) {
 	const [all] = getOptions(state);
 	const valueAsString = getString(value).toLocaleLowerCase();
@@ -429,8 +355,8 @@ function getState(element, internals) {
 	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 anchor = getAnchor(type, id, label, select, autocomplete, multiple);
+	const [content, selected, empty] = getContent(id, label, select, autocomplete, multiple);
 	const values = selected.length === 0 ? [""] : selected.map((option) => getAttribute(option, "value") ?? "");
 	const floatable = createEmbeddedFloatable(anchor, content, {
 		position: "below-start",
@@ -447,7 +373,6 @@ function getState(element, internals) {
 		disabled,
 		empty,
 		floatable,
-		headers,
 		id,
 		internals,
 		label,
@@ -456,19 +381,14 @@ function getState(element, internals) {
 		required,
 		select,
 		selected,
-		selection,
 		type,
 		values,
-		active: selected[0],
-		filter: {
-			element: filter,
-			value: ""
-		},
+		filter: "",
 		listeners: [],
 		name: element.name,
 		touched: false
 	};
-	state.listeners.push(on(element, "focusout", () => {
+	state.listeners.push(on(anchor, "blur", () => {
 		state.touched = true;
 		updateValidity(state);
 	}), on(content, "click", (event) => {
@@ -478,21 +398,84 @@ function getState(element, internals) {
 			activedescendant: floatable.open ? state.active?.id : void 0,
 			expanded: floatable.open
 		});
-		if (floatable.open) {
-			state.filter.element?.focus();
-			updateWidth(state);
-		}
+		if (floatable.open) 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 onAnchor(event, handler) {
+	if (event.ctrlKey || event.metaKey || event.shiftKey) return;
+	const combobox = findAncestor(event, TAGNAME);
+	const state = states.get(combobox);
+	if (combobox == null || state == null) return;
+	if (findAncestor(event, SELECTOR_ANCHOR) != null) handler(event, combobox, state);
+}
+function onAnchorKeydown(event, combobox, state) {
+	const isSelect = state.type === "select";
+	let preventDefault = true;
+	switch (true) {
+		case event.key === " " && state.type === "select":
+		case event.key === "Enter":
+			onEnter(combobox, state);
+			break;
+		case event.key === "Escape":
+			onEscape(state);
+			break;
+		case isSelect && KEYS_ABSOLUTE.has(event.key):
+			onNavigation(event, combobox, state);
+			break;
+		case !isSelect && KEYS_SELECTION.has(event.key):
+			preventDefault = false;
+			if (hasTextSelection(state.anchor)) onSelection(combobox, state);
+			break;
+		case KEYS_NAVIGATION.has(event.key):
+			onNavigation(event, combobox, state);
+			break;
+		default:
+			preventDefault = false;
+			if (event.key === "Tab") onTab(combobox, state);
+			break;
+	}
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+function onAnchorKeyup(event, combobox, state) {
+	const typed = event.key.length === 1 && EXPRESSION_TYPED.test(event.key);
+	if (state.type === "select") {
+		if (typed) {
+			event.preventDefault();
+			event.stopPropagation();
+			onScrollTo(event, combobox, state);
+		}
+		return;
+	}
+	let preventDefault = true;
+	if (typed) state.filter += event.key;
+	if (state.anchor instanceof HTMLInputElement && (KEYS_REMOVE.has(event.key) || state.anchor.value.length < state.filter.length)) {
+		state.filter = state.anchor.value;
+		filterOptions(state);
+	}
+	switch (true) {
+		case typed:
+			onTyped(combobox, state);
+			break;
+		case KEYS_REMOVE.has(event.key):
+			onRemove(combobox, state);
+			break;
+		default:
+			preventDefault = false;
+			break;
+	}
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
 function onClick(event) {
 	const combobox = findAncestor(event, TAGNAME);
 	const state = states.get(combobox);
@@ -521,7 +504,7 @@ function onContent(event, 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();
+	state.anchor.focus();
 }
 function onEnter(combobox, state) {
 	if (hasTextSelection(state.anchor)) {
@@ -537,58 +520,11 @@ function onEnter(combobox, state) {
 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);
+	onAnchor(event, onAnchorKeydown);
 }
 function onKeyup(event) {
-	onInput(event, onInputKeyup);
+	onAnchor(event, onAnchorKeyup);
 }
 function onNavigation(event, combobox, state) {
 	let skip = false;
@@ -624,22 +560,34 @@ function onNavigation(event, combobox, state) {
 	}
 	setNext(state.autocomplete.none ? "none" : "navigation", combobox, state, all, next);
 }
+function onRemove(combobox, state) {
+	const [all] = getOptions(state);
+	setNext("remove", combobox, state, all, filterOptions(state, all));
+}
+function onScrollTo(event, combobox, state) {
+	const [all] = getOptions(state);
+	const key = event.key.toLocaleLowerCase();
+	const next = all.find((option) => option.textContent?.toLocaleLowerCase().startsWith(key) === true) ?? all.find((option) => option.textContent?.toLocaleLowerCase().includes(key) === true);
+	if (next != null) setNext("navigation", combobox, state, all, next);
+}
 function onSelection(combobox, state) {
-	state.filter.value = state.anchor instanceof HTMLInputElement ? state.anchor.value : "";
+	state.filter = state.anchor instanceof HTMLInputElement ? state.anchor.value : "";
 	filterOptions(state);
 	setNext("set", combobox, state, getOptions(state)[0], state.active);
 }
 function onTab(combobox, state) {
 	if (combobox !== document.activeElement || !combobox.contains(document.activeElement)) state.floatable.hide();
 }
-function onTyped(combobox, state, 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 onTyped(combobox, state) {
+	if (!state.autocomplete.inline && state.anchor instanceof HTMLInputElement && state.anchor.value.length > 0) state.floatable.show();
+	const options = getOptions(state)[0];
+	setNext("typed", combobox, state, options, state.autocomplete.none ? state.active ?? options[0] : filterOptions(state));
 }
 function setDisabled(combobox, state, value) {
-	setProperties("disabled", "disabled", combobox, state, value);
+	state.disabled = value;
+	setAria(state.anchor, "disabled", value);
+	setProperty(combobox, "disabled", value);
+	if (state.anchor instanceof HTMLInputElement) state.anchor.readOnly = value;
 }
 function setLimit(type, combobox, state, value) {
 	if (typeof value === "number" && !Number.isNaN(value) ? value !== state[type] : value == null) {
@@ -655,18 +603,16 @@ function setNext(update, combobox, state, all, next) {
 	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);
+	state.readonly = value;
+	setAria(state.anchor, "readonly", value);
+	setProperty(combobox, "readonly", value);
+	if (state.anchor instanceof HTMLInputElement) state.anchor.readOnly = value;
 }
 function setRequired(combobox, state, value) {
-	setProperties("required", "required", combobox, state, value);
+	state.required = value;
+	setAria(state.anchor, "required", value);
+	setProperty(combobox, "required", value);
 	updateValidity(state);
 }
 function setValue(update, combobox, state, next) {
@@ -719,11 +665,11 @@ function setValues(combobox, state, value) {
 	}
 	for (const option of state.selected) {
 		setAria(option, "selected", false);
-		state.selection?.querySelector(`[option="${option.id}"]`)?.remove();
+		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION_ITEM}][option="${option.id}"]`)?.remove();
 	}
 	for (const option of selected) {
 		setAria(option, "selected", true);
-		state.selection?.append(getSelectionItem(option));
+		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION}]`)?.append(getSelectionItem(option));
 	}
 	state.selected = selected.slice();
 	setNext("navigation", combobox, state, all, next);
@@ -732,11 +678,11 @@ function setValues(combobox, state, value) {
 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;
+	if (update === "typed" && !content.toLocaleLowerCase().startsWith(state.filter.toLocaleLowerCase())) return;
 	const { length } = content;
 	if (state.anchor instanceof HTMLInputElement) {
 		state.anchor.value = content;
-		state.anchor.setSelectionRange(update === "typed" ? state.filter.value.length : length, length);
+		state.anchor.setSelectionRange(update === "typed" ? state.filter.length : length, length);
 	} else state.anchor.textContent = content;
 }
 function updateForm(combobox, state, values) {
@@ -754,8 +700,8 @@ function updateSelect(update, state, next, added) {
 		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();
+	if (added === true) state.anchor.querySelector(`[${ATTRIBUTE_SELECTION}]`)?.append(getSelectionItem(next));
+	else if (added === false) state.anchor.querySelector(`[${ATTRIBUTE_SELECTION_ITEM}][option="${next.id}"]`)?.remove();
 }
 function updateSelected(update, state, next) {
 	const [all] = getOptions(state);
@@ -804,10 +750,6 @@ 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`;
@@ -824,6 +766,7 @@ const INVALID_BAD = "Please select an option from the list";
 const INVALID_INPUT = "Please enter a value";
 const INVALID_OVERFLOW = "Please select fewer options (maximum is {max})";
 const INVALID_UNDERFLOW = "Please select more options (minimum is {min})";
+const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
 const KEYS_NAVIGATION = /* @__PURE__ */ new Set([
 	"ArrowDown",
 	"ArrowUp",
@@ -836,7 +779,6 @@ const MESSAGE_LABEL = `<${TAGNAME}> must contain a <label> element for the <sele
 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();