@oscarpalmer/oui 0.31.0 → 0.32.0

package/dist/js/combobox.mjs

@@ -161,30 +161,8 @@ var OuiComboboxElement = class extends HTMLElement {
 		this.clear();
 	}
 };
-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);
+function createAnchor(type, id, label, select, autocomplete, multiple) {
+	const [anchor, selection] = type === "autocomplete" ? [createInput(id, select)] : createBox(id, select, multiple);
 	setAria(anchor, {
 		autocomplete: type === "autocomplete" ? autocomplete.value : void 0,
 		controls: `${id}_content`,
@@ -194,80 +172,186 @@ function getAnchor(type, id, label, select, autocomplete, multiple) {
 	});
 	setAttribute(anchor, ATTRIBUTE_ANCHOR, "");
 	setRole(anchor, "combobox");
-	return anchor;
-}
-function getAttributeValue(element, attribute, possible, defaultValue) {
-	const value = getAttribute(element, attribute);
-	return possible.has(value) ? value : defaultValue;
-}
-function getAutoComplete(element, select) {
-	let value;
-	if (select) value = "list";
-	else value = getAttributeValue(element, "autocomplete", AUTOCOMPLETES, "none");
-	return {
-		value,
-		both: value === "both",
-		inline: value === "inline",
-		list: value === "list",
-		none: value === "none"
-	};
+	return [anchor, selection];
 }
-function getBox(id, select, multiple) {
+function createBox(id, select, multiple) {
 	const box = createElement("div", {
 		id,
 		tabIndex: 0,
 		textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? ""
 	});
+	let selection;
 	if (multiple) {
-		const selection = createElement("ul", {}, { [ATTRIBUTE_SELECTION]: "" });
-		for (const option of select.selectedOptions) selection.append(getSelectionItem(option));
+		selection = createSelection(select);
 		box.append(selection);
 	}
-	return box;
+	return [box, selection];
 }
-function getContent(id, label, select, autocomplete, multiple) {
+function createContent(type, id, label, select, autocomplete, multiple) {
 	const content = createElement("div", { id: `${id}_content` }, {
 		[ATTRIBUTE_CONTENT]: "",
 		popover: "",
 		tabindex: -1,
 		"aria-labelledby": label.id
 	});
+	const [filter, input] = createFilter(type, id) ?? [];
+	const [list, headers, selected] = createList(label, select, autocomplete, multiple);
+	const empty = createEmpty();
+	if (filter != null) content.append(filter);
+	content.append(list, empty);
+	return [
+		content,
+		input,
+		headers,
+		selected,
+		empty
+	];
+}
+function createEmpty() {
+	return createElement("div", {
+		hidden: true,
+		role: "status",
+		textContent: "No results found"
+	}, {
+		[ATTRIBUTE_EMPTY]: "",
+		"aria-live": "polite"
+	});
+}
+function createFilter(type, id) {
+	if (type === "autocomplete") return;
+	const container = createElement("div", {}, { [ATTRIBUTE_FILTER]: "" });
+	const label = createElement("label", {
+		htmlFor: `${id}_filter`,
+		textContent: "Filter options"
+	}, { [ATTRIBUTE_FILTER_LABEL]: "" });
+	const filter = createElement("input", { id: `${id}_filter` }, { [ATTRIBUTE_FILTER_INPUT]: "" });
+	container.append(label, filter);
+	return [container, filter];
+}
+function createHeader(group) {
+	return createElement("li", {
+		id: group.id,
+		role: "presentation",
+		textContent: group.label
+	}, { [ATTRIBUTE_HEADER]: "" });
+}
+function createInput(id, select) {
+	return createElement("input", {
+		id,
+		value: select.selectedOptions[0]?.textContent ?? ""
+	}, {
+		[ATTRIBUTE_ANCHOR]: "",
+		autocomplete: "off",
+		type: "text"
+	});
+}
+function createList(label, select, autocomplete, multiple) {
 	const list = createElement("ul", { role: "listbox" }, {
 		[ATTRIBUTE_LIST]: "",
 		"aria-labelledby": label.id,
 		"aria-multiselectable": multiple
 	});
-	const options = [...select.options];
+	const groups = [...select.querySelectorAll("optgroup")];
+	const groupsLength = groups.length;
 	const selected = [];
+	let headers;
+	if (groupsLength > 0) {
+		headers = [];
+		let firstGroup;
+		for (let groupIndex = 0; groupIndex < groupsLength; groupIndex += 1) {
+			const group = groups[groupIndex];
+			const options = [...group.querySelectorAll("option")];
+			if (options.length === 0) continue;
+			firstGroup ??= groupIndex;
+			const header = createHeader(group);
+			headers.push(header);
+			list.append(header);
+			createOptions(options, autocomplete, list, selected, groupIndex === firstGroup, header.id);
+		}
+	} else createOptions([...select.options], autocomplete, list, selected, true);
+	return [
+		list,
+		headers,
+		selected
+	];
+}
+function createOption(index, option, autocomplete, active, group) {
+	return createElement("li", {
+		id: option.id,
+		role: "option",
+		textContent: option.textContent
+	}, {
+		group,
+		[ATTRIBUTE_OPTION]: "",
+		[ATTRIBUTE_OPTION_ACTIVE]: active && index === 0 ? "" : void 0,
+		value: option.value,
+		"aria-selected": !autocomplete.none && option.selected
+	});
+}
+function createOptions(options, autocomplete, list, selected, active, group) {
 	for (let index = 0; index < options.length; index += 1) {
 		const option = options[index];
-		const item = 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
-		});
+		const item = createOption(index, option, autocomplete, active, group);
 		if (option.selected) selected.push(item);
 		list.append(item);
 	}
-	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 createSelection(select) {
+	const selection = createElement("ul", {}, { [ATTRIBUTE_SELECTION]: "" });
+	for (const option of select.selectedOptions) selection.append(getSelectionItem(option));
+	return selection;
+}
+function filterOptions(state, options, clear) {
+	if (clear || state.autocomplete.none) state.filter.value = "";
+	const filter = state.filter.value.toLocaleLowerCase();
+	const groups = state.headers?.reduce((record, header) => {
+		record[header.id] = 0;
+		return record;
+	}, {}) ?? {};
+	const all = options ?? getOptions(state)[0];
+	let { length } = all;
+	const visible = [];
+	for (let index = 0; index < length; index += 1) {
+		const option = all[index];
+		option.hidden = option.textContent?.toLocaleLowerCase().includes(filter) === false;
+		if (!option.hidden) {
+			groups[getAttribute(option, "group") ?? ""] += 1;
+			visible.push(option);
+		}
+	}
+	if (state.headers != null) {
+		length = state.headers.length;
+		for (let index = 0; index < length; index += 1) {
+			const header = state.headers[index];
+			header.hidden = groups[header.id] === 0;
+		}
+	}
+	state.empty.hidden = visible.length > 0;
+	if (state.empty.hidden) return state.active != null && visible.includes(state.active) ? state.active : visible[0];
+}
+function generateIds(select, prefix) {
+	const elements = [...select.querySelectorAll("optgroup"), ...select.options];
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		if (element.id === "") element.id = `${prefix}${element instanceof HTMLOptGroupElement ? "_group_" : "_option_"}${index}`;
+	}
+}
+function getAttributeValue(element, attribute, possible, defaultValue) {
+	const value = getAttribute(element, attribute);
+	return possible.has(value) ? value : defaultValue;
+}
+function getAutoComplete(element, select) {
+	let value;
+	if (select) value = "list";
+	else value = getAttributeValue(element, "autocomplete", AUTOCOMPLETES, "none");
+	return {
+		value,
+		both: value === "both",
+		inline: value === "inline",
+		list: value === "list",
+		none: value === "none"
+	};
 }
 function getFormValue(state, values) {
 	if (values.length === 0 || !state.multiple) return values[0];
@@ -287,16 +371,6 @@ 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();
@@ -355,8 +429,8 @@ function getState(element, internals) {
 	label.htmlFor = id;
 	label.id = `${id}_label`;
 	generateIds(select, id);
-	const anchor = getAnchor(type, id, label, select, autocomplete, multiple);
-	const [content, selected, empty] = getContent(id, label, select, autocomplete, multiple);
+	const [anchor, selection] = createAnchor(type, id, label, select, autocomplete, multiple);
+	const [content, filter, headers, selected, empty] = createContent(type, id, label, select, autocomplete, multiple);
 	const values = selected.length === 0 ? [""] : selected.map((option) => getAttribute(option, "value") ?? "");
 	const floatable = createEmbeddedFloatable(anchor, content, {
 		position: "below-start",
@@ -373,6 +447,7 @@ function getState(element, internals) {
 		disabled,
 		empty,
 		floatable,
+		headers,
 		id,
 		internals,
 		label,
@@ -381,14 +456,19 @@ function getState(element, internals) {
 		required,
 		select,
 		selected,
+		selection,
 		type,
 		values,
-		filter: "",
+		active: selected[0],
+		filter: {
+			element: filter,
+			value: ""
+		},
 		listeners: [],
 		name: element.name,
 		touched: false
 	};
-	state.listeners.push(on(anchor, "blur", () => {
+	state.listeners.push(on(element, "focusout", () => {
 		state.touched = true;
 		updateValidity(state);
 	}), on(content, "click", (event) => {
@@ -398,84 +478,21 @@ function getState(element, internals) {
 			activedescendant: floatable.open ? state.active?.id : void 0,
 			expanded: floatable.open
 		});
-		if (floatable.open) updateWidth(state);
+		if (floatable.open) {
+			state.filter.element?.focus();
+			updateWidth(state);
+		}
 	}));
 	setDisabled(element, state, disabled);
+	setLimit("max", element, state, getAttribute(element, "max"));
+	setLimit("min", element, state, getAttribute(element, "min"));
+	setReadonly(element, state, readonly);
+	setRequired(element, state, required);
 	return state;
 }
 function hasTextSelection(element) {
 	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
 }
-function 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);
@@ -504,7 +521,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.anchor.focus();
+	(state.filter.element ?? state.anchor).focus();
 }
 function onEnter(combobox, state) {
 	if (hasTextSelection(state.anchor)) {
@@ -520,11 +537,58 @@ 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) {
-	onAnchor(event, onAnchorKeydown);
+	onInput(event, onInputKeydown);
 }
 function onKeyup(event) {
-	onAnchor(event, onAnchorKeyup);
+	onInput(event, onInputKeyup);
 }
 function onNavigation(event, combobox, state) {
 	let skip = false;
@@ -560,34 +624,22 @@ 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 = state.anchor instanceof HTMLInputElement ? state.anchor.value : "";
+	state.filter.value = state.anchor instanceof HTMLInputElement ? state.anchor.value : "";
 	filterOptions(state);
 	setNext("set", combobox, state, getOptions(state)[0], state.active);
 }
 function onTab(combobox, state) {
 	if (combobox !== document.activeElement || !combobox.contains(document.activeElement)) state.floatable.hide();
 }
-function onTyped(combobox, state) {
-	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 onTyped(combobox, state, options, next) {
+	const filter = state.filter.element ?? state.anchor;
+	if (!state.autocomplete.inline && filter instanceof HTMLInputElement && filter.value.length > 0) state.floatable.show();
+	const all = options ?? getOptions(state)[0];
+	setNext("typed", combobox, state, all, state.autocomplete.none ? state.active ?? all[0] : next ?? filterOptions(state, options));
 }
 function setDisabled(combobox, state, value) {
-	state.disabled = value;
-	setAria(state.anchor, "disabled", value);
-	setProperty(combobox, "disabled", value);
-	if (state.anchor instanceof HTMLInputElement) state.anchor.readOnly = value;
+	setProperties("disabled", "disabled", combobox, state, value);
 }
 function setLimit(type, combobox, state, value) {
 	if (typeof value === "number" && !Number.isNaN(value) ? value !== state[type] : value == null) {
@@ -603,16 +655,18 @@ 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) {
-	state.readonly = value;
-	setAria(state.anchor, "readonly", value);
-	setProperty(combobox, "readonly", value);
-	if (state.anchor instanceof HTMLInputElement) state.anchor.readOnly = value;
+	setProperties("readonly", "readOnly", combobox, state, value);
 }
 function setRequired(combobox, state, value) {
-	state.required = value;
-	setAria(state.anchor, "required", value);
-	setProperty(combobox, "required", value);
+	setProperties("required", "required", combobox, state, value);
 	updateValidity(state);
 }
 function setValue(update, combobox, state, next) {
@@ -665,11 +719,11 @@ function setValues(combobox, state, value) {
 	}
 	for (const option of state.selected) {
 		setAria(option, "selected", false);
-		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION_ITEM}][option="${option.id}"]`)?.remove();
+		state.selection?.querySelector(`[option="${option.id}"]`)?.remove();
 	}
 	for (const option of selected) {
 		setAria(option, "selected", true);
-		state.anchor.querySelector(`[${ATTRIBUTE_SELECTION}]`)?.append(getSelectionItem(option));
+		state.selection?.append(getSelectionItem(option));
 	}
 	state.selected = selected.slice();
 	setNext("navigation", combobox, state, all, next);
@@ -678,11 +732,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.toLocaleLowerCase())) return;
+	if (update === "typed" && !content.toLocaleLowerCase().startsWith(state.filter.value.toLocaleLowerCase())) return;
 	const { length } = content;
 	if (state.anchor instanceof HTMLInputElement) {
 		state.anchor.value = content;
-		state.anchor.setSelectionRange(update === "typed" ? state.filter.length : length, length);
+		state.anchor.setSelectionRange(update === "typed" ? state.filter.value.length : length, length);
 	} else state.anchor.textContent = content;
 }
 function updateForm(combobox, state, values) {
@@ -700,8 +754,8 @@ function updateSelect(update, state, next, added) {
 		state.anchor.textContent = next.textContent ?? "";
 		return;
 	}
-	if (added === true) state.anchor.querySelector(`[${ATTRIBUTE_SELECTION}]`)?.append(getSelectionItem(next));
-	else if (added === false) state.anchor.querySelector(`[${ATTRIBUTE_SELECTION_ITEM}][option="${next.id}"]`)?.remove();
+	if (added === true) state.selection?.append(getSelectionItem(next));
+	else if (added === false) state.selection?.querySelector(`[option="${next.id}"]`)?.remove();
 }
 function updateSelected(update, state, next) {
 	const [all] = getOptions(state);
@@ -750,6 +804,10 @@ 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`;
@@ -766,7 +824,6 @@ 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",
@@ -779,6 +836,7 @@ 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();

package/dist/js/menu.d.mts

@@ -1 +1 @@
-export { };
+export {}

package/dist/js/toolbar.d.mts

@@ -1 +1 @@
-export { };
+export {}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.31.0",
+	"version": "0.32.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -106,7 +106,7 @@
 		"postcss-cli": "^11",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
-		"sass": "^1.101",
+		"sass": "^1.102",
 		"stylelint": "^17.14",
 		"stylelint-config-standard-scss": "^17",
 		"tsdown": "^0.22",