solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/lib/server/{useFilteredItems-DvuctLt3.js → useFilteredItems-BmhL0nf1.js}

@@ -1,32 +1,34 @@
+import { t as useRender } from "./useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "./internals/getStateAttributesProps.js";
 import { E as pointer, S as listNavigation, b as keyboard, g as inputClear, h as inputChange, l as escapeKey, r as clearPress, t as cancelOpen, v as inputPress, w as none, y as itemPress } from "./internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "./resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails, createGenericEventDetails } from "./internals/createBaseUIEventDetails.js";
 import { transitionStatusMapping } from "./internals/stateAttributesMapping.js";
-import { composeEventHandlers } from "./internals/composeEventHandlers.js";
-import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-DCHzXWZU.js";
-import { a as isElement, c as isHTMLElement, l as isInteractiveElement, n as contains, o as isElementVisible, p as ownerDocument } from "./dom-Crg_2R-j.js";
-import { i as isListIndexDisabled, n as getMinListIndex, r as getNavigatedIndex, t as getMaxListIndex } from "./compositeNavigation-BRVT1C38.js";
-import { t as createAnchorPositioning } from "./createAnchorPositioning-C-cVOPwz.js";
-import { t as InternalBackdrop } from "./InternalBackdrop-C_iDPVR-.js";
-import { t as createAnchoredPopupScrollLock } from "./createAnchoredPopupScrollLock-DFuUrykR.js";
-import { t as createClickInteraction } from "./createClickInteraction-BYsMgvup.js";
+import { composeEventHandlers, liveEventHandler } from "./internals/composeEventHandlers.js";
+import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-CYq38H8J.js";
+import { l as isHTMLElement, m as ownerDocument, n as contains, o as isElement, s as isElementVisible, u as isInteractiveElement } from "./dom-D8_aB1yy.js";
+import { i as isListIndexDisabled, n as getMinListIndex, r as getNavigatedIndex, t as getMaxListIndex } from "./compositeNavigation-D5jKM4yk.js";
+import { t as createAnchorPositioning } from "./createAnchorPositioning-DrQYe7RS.js";
+import { t as InternalBackdrop } from "./InternalBackdrop-D_2zAWnl.js";
+import { t as createAnchoredPopupScrollLock } from "./createAnchoredPopupScrollLock-q6gnOSmv.js";
+import { t as createClickInteraction } from "./createClickInteraction-D7oc1Vco.js";
 import { c as useFloatingTree, i as createFloatingNode, n as FloatingTreeContext, r as FloatingTreeStore, s as useFloatingParentNodeId, t as FloatingParentNodeContext } from "./FloatingTree-z1JPD1dR.js";
-import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "./PopupStore-DEs3FAEe.js";
-import { t as createTransitionStatus } from "./createTransitionStatus-BTlrerSS.js";
-import { a as triggerOpenStateMapping, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "./popupStateMapping-nKoUwoke.js";
-import { t as FocusManager } from "./FocusManager-BrbZVWME.js";
-import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "./buttonSemantics-BSwDxJhh.js";
+import { a as createPopupPresence, n as createTriggerRegistration, o as createDismiss, t as PopupStore } from "./PopupStore-evylvVnN.js";
+import { t as createTransitionStatus } from "./createTransitionStatus-184v7j3-.js";
+import { a as triggerOpenStateMapping, i as pressableTriggerOpenStateMapping, n as popupStateMapping, o as PopupPortal, r as popupTransitionStateMapping } from "./popupStateMapping-VHqr6M4H.js";
+import { t as FocusManager } from "./FocusManager-D-xgblGs.js";
 import { t as setRef } from "./setRef-Bt70sW7c.js";
+import { a as stopButtonInteraction, i as preventDisabledButtonKeyDown, n as handleNonNativeButtonKeyUp, r as preventButtonInteraction, t as handleNonNativeButtonKeyDown } from "./buttonSemantics-BSwDxJhh.js";
 import { n as useDirection } from "./DirectionContext-YORWLF08.js";
 import { DEFAULT_FIELD_STATE_ATTRIBUTES, fieldStateAttributesMapping } from "./internals/field-constants.js";
-import { n as useFieldRootContext } from "./FieldRootContext-IC-LWzVp.js";
-import { n as useFormContext } from "./FormContext-pvESt85v.js";
-import { a as defaultItemEquality, c as removeItem, i as compareItemEquality, l as selectedValueIncludes, n as isSolidAccessor, o as findItemIndex, r as areItemArraysEqual, s as findSelectionIndex, t as mergeStyleValue } from "./mergeStyleValue-Db8bRCM4.js";
-import { r as useLabelableContext } from "./LabelableContext-DZP3rgAY.js";
-import { i as isScrollableY } from "./scrollable-CjsSxbGr.js";
+import { n as FieldRootContext, r as useFieldRootContext, t as DEFAULT_FIELD_ROOT_CONTEXT } from "./FieldRootContext-Bfpna6gA.js";
+import { n as useFormContext } from "./FormContext-CYwo_ZnB.js";
+import { a as findItemIndex, c as selectedValueIncludes, i as defaultItemEquality, n as areItemArraysEqual, o as findSelectionIndex, r as compareItemEquality, s as removeItem, t as isSolidAccessor } from "./isSolidAccessor-CZpzAH5l.js";
+import { r as useLabelableContext } from "./LabelableContext-BTeF0IWb.js";
+import { i as isScrollableY } from "./scrollable-C9Pgq8T5.js";
 import { t as isAndroid } from "./platform-DYukKUir.js";
-import { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { t as mergeStyleValue } from "./mergeStyleValue-DecVaoac.js";
+import { escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, untrack, useContext } from "solid-js";
 //#region src/internals/overlay/createListNavigation.ts
 function createListNavigation(options) {
@@ -195,7 +197,7 @@ function serializeValue(value) {
 	}
 }
 function isGroupedItems(items) {
-	return Array.isArray(items) && items.length > 0 && typeof items[0] === "object" && items[0] != null && "items" in items[0];
+	return Array.isArray(items) && items.length > 0 && typeof items[0] === "object" && items[0] != null && Array.isArray(items[0].items);
 }
 function flattenItems(items) {
 	if (!Array.isArray(items)) return [];
@@ -205,7 +207,7 @@ function flattenItems(items) {
 /** Whether an explicit `null` item carries a label that should win over a placeholder. */
 function hasNullItemLabel(items) {
 	if (items == null) return false;
-	if (!Array.isArray(items)) return "null" in items;
+	if (!Array.isArray(items)) return Object.hasOwn(items, "null");
 	for (const item of flattenItems(items)) {
 		const labeled = item;
 		if (labeled && typeof labeled === "object" && labeled.value == null && labeled.label != null) return true;
@@ -232,7 +234,7 @@ function resolveSelectedLabel(value, items, itemToStringLabel) {
 	const fallback = () => stringifyAsLabel(value, itemToStringLabel);
 	if (itemToStringLabel && value != null) return itemToStringLabel(value);
 	if (value && typeof value === "object" && "label" in value && value.label != null) return value.label;
-	if (items && !Array.isArray(items)) return items[String(value)] ?? fallback();
+	if (items && !Array.isArray(items)) return Object.hasOwn(items, String(value)) ? items[String(value)] ?? fallback() : fallback();
 	if (Array.isArray(items)) {
 		const flatItems = flattenItems(items);
 		if (value == null || typeof value !== "object") {
@@ -455,7 +457,7 @@ var ComboboxStore = class extends PopupStore {
 		[this.popupSide, this.setPopupSide] = signal(null);
 		[this.openMethod, this.setOpenMethod] = signal(null);
 		[this.inputInsidePopup, this.setInputInsidePopup] = signal(true);
-		[this.inputOwnsFormValue, this.setInputOwnsFormValue] = signal(false);
+		[this.inputOwnsFormValue, this.setInputOwnsFormValue] = signal(options.inputOwnsFormValue ?? false);
 	}
 	/** The item elements addressed by index, as list navigation and typeahead see them. */
 	elements() {
@@ -563,18 +565,29 @@ function AriaCombobox(props) {
 	const multiple = createMemo(() => props.selectionMode === "multiple");
 	const single = createMemo(() => props.selectionMode === "single");
 	const comparator = createMemo(() => props.isItemEqualToValue ?? defaultItemEquality);
-	const itemToStringLabel = () => props.itemToStringLabel;
+	const itemToStringLabel = () => props.itemCollection ? resolveLabel : props.itemToStringLabel;
+	function resolveLabel(value) {
+		const collection = props.itemCollection;
+		if (!collection) return stringifyAsLabel(value, props.itemToStringLabel);
+		if (!collection.hasValue(value, comparator())) {
+			const external = flattenItems(props.filteredItems).find((item) => compareItemEquality(collection.value(item), value, comparator()));
+			if (external !== void 0) return collection.itemLabel(external);
+		}
+		return collection.label(value, comparator(), props.itemToStringLabel);
+	}
+	const projectValue = (item) => props.itemCollection ? props.itemCollection.value(item) : item;
+	const sourceLabel = () => props.itemCollection?.itemLabel ?? props.itemToStringLabel;
 	const itemToStringValue = () => props.itemToStringValue;
 	const initialSelectedValue = untrack(() => {
 		const defaultValue = props.defaultSelectedValue;
-		if (defaultValue !== void 0 && defaultValue !== null) return Array.isArray(defaultValue) ? defaultValue.slice() : defaultValue;
+		if (defaultValue !== void 0 && defaultValue !== null) return props.selectionMode === "multiple" && Array.isArray(defaultValue) ? defaultValue.slice() : defaultValue;
 		return props.selectionMode === "multiple" ? [] : defaultValue ?? null;
 	});
 	const [uncontrolledSelected, setUncontrolledSelected] = createSignal(() => initialSelectedValue);
 	const selectedValue = createMemo(() => controlledSelected ? props.selectedValue ?? null : uncontrolledSelected());
 	const initialDefaultInputValue = untrack(() => {
 		if (hasInputValueProp) return props.defaultInputValue ?? props.inputValue ?? "";
-		if (props.selectionMode === "single") return stringifyAsLabel(selectedValue(), props.itemToStringLabel);
+		if (props.selectionMode === "single") return resolveLabel(selectedValue());
 		return "";
 	});
 	const [uncontrolledInput, setUncontrolledInput] = createSignal(initialDefaultInputValue);
@@ -614,18 +627,18 @@ function AriaCombobox(props) {
 		if (props.filter === null) return () => true;
 		if (props.filter !== void 0) return props.filter;
 		const collator = collatorFilter();
-		const toLabel = props.itemToStringLabel;
+		const toLabel = sourceLabel();
 		return (item, query) => item == null ? false : collator.contains(item, query, toLabel);
 	});
 	const query = createMemo(() => closeQuery() ?? String(inputValue()).trim());
-	const selectedLabelString = createMemo(() => single() ? stringifyAsLabel(selectedValue(), props.itemToStringLabel) : "");
+	const selectedLabelString = createMemo(() => single() ? resolveLabel(selectedValue()) : "");
 	const shouldBypassFiltering = createMemo(() => {
 		const label = selectedLabelString();
 		const currentQuery = query();
 		return single() && !queryChangedAfterOpen() && currentQuery !== "" && label.length === currentQuery.length && collatorFilter().contains(label, currentQuery);
 	});
-	const filterQuery = createMemo(() => shouldBypassFiltering() ? "" : query());
-	const shouldIgnoreExternalFiltering = createMemo(() => hasItems() && hasFilteredItemsProp() && shouldBypassFiltering());
+	const filterQuery = createMemo(() => props.filterQuery ?? (shouldBypassFiltering() ? "" : query()));
+	const shouldIgnoreExternalFiltering = createMemo(() => hasItems() && hasFilteredItemsProp() && shouldBypassFiltering() && (!props.itemCollection || props.itemCollection.hasValue(selectedValue(), comparator())));
 	const flatItems = createMemo(() => flattenItems(props.items));
 	const filteredItems = createMemo(() => {
 		if (props.filteredItems !== void 0 && !shouldIgnoreExternalFiltering()) return props.filteredItems;
@@ -634,7 +647,7 @@ function AriaCombobox(props) {
 		const currentQuery = filterQuery();
 		const currentLimit = limit();
 		const match = filter();
-		const toLabel = props.itemToStringLabel;
+		const toLabel = sourceLabel();
 		if (isGroupedItems(items)) {
 			const resultingGroups = [];
 			let currentCount = 0;
@@ -672,14 +685,15 @@ function AriaCombobox(props) {
 	const listEmpty = createMemo(() => filteredItems().length === 0);
 	let hadInputClear = false;
 	let lastHighlight = INITIAL_LAST_HIGHLIGHT;
+	let lastHighlightType = none;
 	let pendingQueryHighlight = null;
 	let pendingInitialHighlight = null;
-	let initializedOpen = false;
+	let initializedOpen = untrack(() => Boolean(props.open ?? props.defaultOpen) && props.autoHighlight === true);
 	let previousSelectedValue = cloneValue(untrack(selectedValue));
 	let previousInputValue = untrack(inputValue);
-	let previousItems = untrack(() => props.items);
 	let previousQuery = untrack(query);
 	const store = new ComboboxStore({
+		inputOwnsFormValue: untrack(() => props.selectionMode === "none"),
 		controlledOpen: () => controlledOpen ? props.open : void 0,
 		floatingId,
 		nodeId,
@@ -695,7 +709,7 @@ function AriaCombobox(props) {
 	});
 	store.update({ open: untrack(() => props.open ?? props.defaultOpen ?? false) });
 	store.configureTriggerUnmount({ closeOnActiveTriggerUnmount: false });
-	store.setInputOwnsFormValue(untrack(() => props.selectionMode === "none"));
+	createEffect(() => selectionMode() === "none" && (props.inline || !store.inputInsidePopup()), (owns) => store.setInputOwnsFormValue(Boolean(owns)));
 	const node = createFloatingNode({
 		tree,
 		id: nodeId,
@@ -713,14 +727,14 @@ function AriaCombobox(props) {
 		return store.track().popupElement;
 	}
 	/** Item values addressed by index, from `items` when provided and rendered items otherwise. */
-	const itemValues = createMemo(() => hasItems() || hasFilteredItemsProp() ? flatFilteredItems() : store.collection.values());
-	createMemo(() => {
+	const itemValues = createMemo(() => hasItems() || hasFilteredItemsProp() ? flatFilteredItems().map(projectValue) : store.collection.values());
+	function itemLabels() {
 		const rendered = store.collection.labels();
 		if (!hasItems()) return rendered;
-		const derived = flatFilteredItems().map((item) => stringifyAsLabel(item, props.itemToStringLabel));
+		const derived = flatFilteredItems().map((item) => stringifyAsLabel(item, sourceLabel()));
 		if (!store.forceMounted()) return derived;
 		return derived.map((label, index) => rendered[index] ?? label);
-	});
+	}
 	const listElements = createMemo(() => {
 		const elements = store.collection.elements();
 		const length = itemValues().length;
@@ -748,14 +762,15 @@ function AriaCombobox(props) {
 	const fieldStringValue = createMemo(() => {
 		if (selectionMode() === "none") return inputValue();
 		const current = selectedValue();
-		return Array.isArray(current) ? current.map((value) => stringifyAsValue(value, props.itemToStringValue)) : stringifyAsValue(current, props.itemToStringValue);
+		return multiple() && Array.isArray(current) ? current.map((value) => stringifyAsValue(value, props.itemToStringValue)) : stringifyAsValue(current, props.itemToStringValue);
 	});
 	const serializedValue = createMemo(() => {
 		const raw = fieldRawValue();
-		return Array.isArray(raw) ? "" : stringifyAsValue(raw, props.itemToStringValue);
+		return multiple() && Array.isArray(raw) ? "" : stringifyAsValue(raw, props.itemToStringValue);
 	});
 	const hiddenInputName = createMemo(() => multiple() || selectionMode() === "none" && store.inputOwnsFormValue() ? void 0 : name());
 	function emitHighlight(value, index, type) {
+		lastHighlightType = type;
 		if (index === -1) {
 			if (lastHighlight === INITIAL_LAST_HIGHLIGHT) return;
 			lastHighlight = INITIAL_LAST_HIGHLIGHT;
@@ -789,9 +804,9 @@ function AriaCombobox(props) {
 		}
 	}
 	function setInputValue(next, details) {
-		hadInputClear = details.reason === inputClear;
 		props.onInputValueChange?.(next, details);
 		if (details.isCanceled) return;
+		hadInputClear = details.reason === inputClear;
 		if (details.reason === "input-change") {
 			if (store.open() && closeQuery() !== null) setCloseQuery(null);
 			const event = details.event;
@@ -830,7 +845,7 @@ function AriaCombobox(props) {
 			} else if (multiple()) {
 				if (!inline()) setCloseQuery(currentQuery);
 				if (store.inputInsidePopup()) setIndices({ activeIndex: null });
-				if (!store.inputInsidePopup() || inline()) setInputValue("", createChangeEventDetails(inputClear, details.event));
+				if (!store.inputInsidePopup() || inline()) setInputValue("", createChangeEventDetails(inputClear, details.event, void 0, { isItemPress: details.reason === itemPress }));
 			}
 		}
 		if (!nextOpen && store.inputInsidePopup() && (details.reason === "focus-out" || details.reason === "outside-press")) {
@@ -843,7 +858,7 @@ function AriaCombobox(props) {
 		props.onSelectedValueChange?.(next, details);
 		if (details.isCanceled) return;
 		if (!controlledSelected) setUncontrolledSelected(() => next);
-		if (selectionMode() === "none" && store.track().popupElement != null && (props.fillInputOnItemPress ?? true) || single() && !store.inputInsidePopup()) setInputValue(stringifyAsLabel(next, props.itemToStringLabel), createChangeEventDetails(details.reason, details.event));
+		if (selectionMode() === "none" && store.track().popupElement != null && (props.fillInputOnItemPress ?? true) || single() && !store.inputInsidePopup()) setInputValue(resolveLabel(next), createChangeEventDetails(details.reason, details.event));
 	}
 	function handleSelection(event, itemValue) {
 		const target = event.target;
@@ -857,11 +872,14 @@ function AriaCombobox(props) {
 		}
 		if (multiple()) {
 			const current = Array.isArray(selectedValue()) ? selectedValue() : [];
-			setSelectedValue(selectedValueIncludes(current, itemValue, comparator()) ? removeItem(current, itemValue, comparator()) : [...current, itemValue], details);
+			const alreadySelected = selectedValueIncludes(current, itemValue, comparator());
+			setSelectedValue(alreadySelected ? removeItem(current, itemValue, comparator()) : [...current, itemValue], details);
 			if (details.isCanceled) return;
 			if (!((inputElement()?.value.trim() ?? "") !== "")) return;
-			if (store.inputInsidePopup()) setInputValue("", createChangeEventDetails(inputClear, details.event));
-			else setOpen(false, details);
+			if (store.inputInsidePopup()) {
+				setInputValue("", createChangeEventDetails(inputClear, details.event, void 0, { isItemPress: true }));
+				if (pendingQueryHighlight && !alreadySelected) pendingQueryHighlight.toggledValue = itemValue;
+			} else setOpen(false, details);
 			return;
 		}
 		setSelectedValue(itemValue, details);
@@ -891,7 +909,7 @@ function AriaCombobox(props) {
 		setCloseQuery(null);
 		store.resetAfterClose();
 		if (selectionMode() === "none") setIndices({
-			activeIndex: null,
+			activeIndex: autoHighlight() === "always" && store.listElement() && !store.track().popupElement && itemValues().length > 0 ? 0 : null,
 			selectedIndex: null
 		});
 		else setIndices({ activeIndex: null });
@@ -901,7 +919,7 @@ function AriaCombobox(props) {
 			if (store.inputInsidePopup()) {
 				if (currentInput && currentInput.value !== "") setInputValue("", createChangeEventDetails(inputClear));
 			} else {
-				const label = stringifyAsLabel(selectedValue(), props.itemToStringLabel);
+				const label = resolveLabel(selectedValue());
 				if (currentInput && currentInput.value !== label) setInputValue(label, createChangeEventDetails(label === "" ? inputClear : none));
 			}
 		}
@@ -926,13 +944,13 @@ function AriaCombobox(props) {
 			reference["aria-expanded"] = expanded() ? "true" : "false";
 			reference["aria-haspopup"] = grid() ? "grid" : "listbox";
 			reference["aria-controls"] = expanded() ? store.listElement()?.id : void 0;
-			reference["aria-autocomplete"] = autoCompleteMode();
+			reference["aria-autocomplete"] = readOnly() ? "none" : autoCompleteMode();
 		}
 		return reference;
 	});
 	const click = createClickInteraction({
 		context: store.context.floatingRoot,
-		enabled: () => !readOnly() && !disabled() && openOnInputClick(),
+		enabled: () => !disabled() && openOnInputClick(),
 		event: () => "mousedown-only",
 		toggle: () => false,
 		reason: () => inputPress,
@@ -941,7 +959,7 @@ function AriaCombobox(props) {
 	const dismiss = createDismiss({
 		context: store.context.floatingRoot,
 		tree: () => tree,
-		enabled: () => !readOnly() && !disabled() && !inline(),
+		enabled: () => !disabled() && !inline(),
 		outsidePressEvent: () => ({
 			mouse: "sloppy",
 			touch: "intentional"
@@ -954,7 +972,7 @@ function AriaCombobox(props) {
 	});
 	const listNavigation$1 = createListNavigation({
 		context: store.context.floatingRoot,
-		enabled: () => !readOnly() && !disabled(),
+		enabled: () => !disabled(),
 		list: listElements,
 		activeIndex: store.activeIndex,
 		selectedIndex: store.selectedIndex,
@@ -992,6 +1010,8 @@ function AriaCombobox(props) {
 		flatFilteredItems,
 		listEmpty,
 		itemValues,
+		itemLabels,
+		hasItemCollection: () => props.itemCollection !== void 0,
 		selectedValue,
 		inputValue,
 		hasSelectedValue,
@@ -1078,12 +1098,15 @@ function AriaCombobox(props) {
 		mode: selectionMode(),
 		values: itemValues(),
 		compare: comparator(),
-		isMultiple: multiple()
-	}), (state) => {
+		isMultiple: multiple(),
+		mounted: presence.mounted(),
+		hasItems: hasItems() || hasFilteredItemsProp()
+	}), (state, previous) => {
 		if (state.open) return;
 		store.pointerDownItem = null;
 		if (state.mode === "none") return;
-		untrack(() => setIndices({ selectedIndex: findSelectionIndex(hasItems() ? flatItems() : state.values, state.selected, state.compare, state.isMultiple) }));
+		if (!state.hasItems && !state.mounted && state.values.length === 0 && previous && sameValue(state.selected, previous.selected, state.compare)) return;
+		untrack(() => setIndices({ selectedIndex: findSelectionIndex(state.values, state.selected, state.compare, state.isMultiple) }));
 	});
 	createEffect(() => ({
 		activeIndex: store.activeIndex(),
@@ -1094,31 +1117,40 @@ function AriaCombobox(props) {
 		highlight: autoHighlight()
 	}), (state) => untrack(() => resolveHighlight(state)));
 	function resolveHighlight(state) {
+		let activeIndex = state.activeIndex;
 		const pending = pendingQueryHighlight;
 		if (pending) {
 			const listIsNavigable = state.open || state.inline || store.track().positionerElement?.hidden === false;
 			if (pending.hasQuery) {
-				if (state.highlight && listIsNavigable) store.setActiveIndex(0);
+				if (state.values.length === 0 && !hasItems() && !hasFilteredItemsProp()) return;
+				if (state.highlight && listIsNavigable) {
+					store.setActiveIndex(0);
+					activeIndex = 0;
+				}
 				pendingQueryHighlight = null;
 			} else if (String(state.input).trim() === "") {
 				pendingQueryHighlight = null;
 				if (listIsNavigable) {
 					const clearedBySelection = pending.selection;
-					if (state.highlight === "always" && !clearedBySelection && selectionMode() === "none") store.setActiveIndex(0);
+					if (state.highlight === "always" && !clearedBySelection && selectionMode() === "none") {
+						store.setActiveIndex(0);
+						activeIndex = 0;
+					}
 					queueMicrotask(() => untrack(() => {
 						if (!store.open() && !inline() || (inputElement()?.value.trim() ?? "") !== "") return;
 						const current = selectedValue();
 						const isMultiple = multiple();
-						const lastSelected = isMultiple && Array.isArray(current) ? current[current.length - 1] : current;
-						const hasSelection = selectionMode() !== "none" && lastSelected != null;
-						if (hasSelection || clearedBySelection) store.setActiveIndex(hasSelection ? findSelectionIndex(itemValues(), current, comparator(), isMultiple) : null);
-						else if (autoHighlight() === "always") store.setActiveIndex(0);
+						const hasSelection = isMultiple && Array.isArray(current) ? current.length > 0 : selectionMode() !== "none" && current != null;
+						if (hasSelection || clearedBySelection) {
+							const toggledIndex = findItemIndex(itemValues(), pending.toggledValue, comparator());
+							store.setActiveIndex(hasSelection ? toggledIndex !== -1 ? toggledIndex : findSelectionIndex(itemValues(), current, comparator(), isMultiple) : null);
+						} else if (autoHighlight() === "always") store.setActiveIndex(0);
 					}));
 				}
 			}
 		}
 		if (!state.open && !state.inline) return;
-		if (state.activeIndex == null) {
+		if (activeIndex == null) {
 			if (state.highlight === "always" && state.values.length > 0) {
 				store.setActiveIndex(0);
 				return;
@@ -1126,21 +1158,21 @@ function AriaCombobox(props) {
 			emitHighlight(void 0, -1, none);
 			return;
 		}
-		if (state.activeIndex >= state.values.length) {
+		if (activeIndex >= state.values.length) {
 			emitHighlight(void 0, -1, none);
 			store.setActiveIndex(null);
 			return;
 		}
-		const itemValue = state.values[state.activeIndex];
+		const itemValue = state.values[activeIndex];
 		const previousValue = lastHighlight.value;
 		const sameItem = previousValue !== NO_ACTIVE_VALUE && compareItemEquality(itemValue, previousValue, comparator());
-		if (lastHighlight.index !== state.activeIndex || !sameItem) emitHighlight(itemValue, state.activeIndex, none);
+		if (lastHighlight.index !== activeIndex || !sameItem) emitHighlight(itemValue, activeIndex, none);
 	}
 	createEffect(() => ({
 		index: store.activeIndex(),
 		elements: listElements()
 	}), (state) => {
-		if (state.index == null || !store.keyboardActive) return;
+		if (state.index == null || lastHighlightType === "pointer") return;
 		state.elements[state.index]?.scrollIntoView?.({
 			block: "nearest",
 			inline: "nearest"
@@ -1162,9 +1194,12 @@ function AriaCombobox(props) {
 			const pending = pendingInitialHighlight;
 			pendingInitialHighlight = null;
 			if (store.activeIndex() != null || queryChangedAfterOpen()) return;
-			const selected = selectionMode() === "none" ? null : store.selectedIndex();
+			const selected = selectionMode() === "none" ? null : findSelectionIndex(itemValues(), selectedValue(), comparator(), multiple());
 			if (selected != null) {
-				setIndices({ activeIndex: selected });
+				setIndices({
+					activeIndex: selected,
+					selectedIndex: selected
+				});
 				return;
 			}
 			if (pending && (selectionMode() !== "none" || autoHighlight() !== false)) {
@@ -1204,7 +1239,7 @@ function AriaCombobox(props) {
 		setQueryChangedAfterOpen(true);
 	});
 	function syncInputToSelectedLabel() {
-		const label = stringifyAsLabel(selectedValue(), props.itemToStringLabel);
+		const label = resolveLabel(selectedValue());
 		if (inputValue() !== label) setInputValue(label, createChangeEventDetails(none));
 	}
 	createEffect(() => ({
@@ -1236,10 +1271,11 @@ function AriaCombobox(props) {
 			field.validation.change(state.input);
 		});
 	});
-	createEffect(() => props.items, (items) => {
-		const previous = previousItems;
-		previousItems = items;
-		if (previous === items) return;
+	createEffect(() => ({
+		items: props.items,
+		label: selectedLabelString()
+	}), (current, previous) => {
+		if (!previous || current.items === previous.items && current.label === previous.label) return;
 		untrack(() => {
 			if (!single() || hasInputValueProp || store.inputInsidePopup() || queryChangedAfterOpen()) return;
 			syncInputToSelectedLabel();
@@ -1269,7 +1305,7 @@ function AriaCombobox(props) {
 		if (!setOpen(true, createChangeEventDetails("list-navigation", event, triggerElement() ?? void 0))) pendingInitialHighlight = null;
 	}
 	function handleNavigationKeyDown(event) {
-		if (readOnly() || disabled()) return;
+		if (disabled()) return;
 		if (!store.open() && !inline()) {
 			if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
 			event.preventDefault();
@@ -1411,8 +1447,13 @@ function ComboboxTrigger(props) {
 		return context.store.listElement()?.id;
 	});
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? context.store.labelId());
+	const ariaDescribedBy = createMemo(() => {
+		const external = internalProps["aria-describedby"];
+		return external === false ? false : labelable.getAriaDescribedBy(external);
+	});
 	const state = createMemo(() => ({
 		...context.field.state(),
+		readOnly: context.readOnly(),
 		open: context.store.open(),
 		disabled: disabled(),
 		popupSide: context.store.resolvedPopupSide(),
@@ -1422,17 +1463,17 @@ function ComboboxTrigger(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxControlStateMapping));
-	const others = omit(allProps, "aria-labelledby", "as", "class", "disabled", "id", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "onPointerEnter", "ref", "style");
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "render", "class", "disabled", "id", "nativeButton", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onMouseDown", "onPointerDown", "onPointerEnter", "ref", "style");
 	const click = createClickInteraction({
 		context: context.store.context.floatingRoot,
-		enabled: () => !context.readOnly() && !context.disabled(),
+		enabled: () => !context.disabled(),
 		event: () => "mousedown"
 	});
 	const typeahead = createTypeahead({
 		context: context.store.context.floatingRoot,
 		enabled: () => !context.store.open() && !context.readOnly() && !context.disabled() && context.selectionMode() === "single",
-		list: () => context.store.collection.labels(),
-		elements: () => context.store.collection.elements(),
+		list: context.itemLabels,
+		disabledIndices: () => context.store.collection.disabledIndices(),
 		activeIndex: context.store.activeIndex,
 		selectedIndex: context.store.selectedIndex,
 		onMatch(index) {
@@ -1450,7 +1491,7 @@ function ComboboxTrigger(props) {
 	}
 	function handleFocus() {
 		context.field.setFocused(true);
-		if (disabled() || context.readOnly()) return;
+		if (disabled()) return;
 		clearTimeout(focusTimer);
 		focusTimer = setTimeout(() => context.forceMount(), 0);
 	}
@@ -1478,7 +1519,7 @@ function ComboboxTrigger(props) {
 		removeMouseUp = () => documentNode.removeEventListener("mouseup", onMouseUp);
 	}
 	function handleMouseDown(event) {
-		if (disabled() || context.readOnly()) return;
+		if (disabled()) return;
 		const trigger = event.currentTarget;
 		if (!insidePopup()) context.store.context.floatingRoot.update({ domReferenceElement: trigger });
 		context.forceMount();
@@ -1497,7 +1538,7 @@ function ComboboxTrigger(props) {
 		click.onClick(event);
 	}
 	function handleKeyDown(event) {
-		if (context.readOnly()) return;
+		if (disabled()) return;
 		typeahead.onKeyDown(event);
 		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
 			event.preventDefault();
@@ -1507,14 +1548,14 @@ function ComboboxTrigger(props) {
 			context.focusInput();
 		}
 	}
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onKeyDown = composeEventHandlers(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0), () => internalProps.onKeyDown, () => handleKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
-	const onMouseDown = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onMouseDown, () => handleMouseDown);
-	const onPointerDown = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onPointerDown, () => handlePointerDown);
-	const onPointerEnter = composeEventHandlers(() => internalProps.onPointerEnter, () => (event) => {
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventDisabledButtonKeyDown : void 0)), liveEventHandler(() => internalProps.onKeyDown), handleKeyDown, liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp)));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onMouseDown), handleMouseDown);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onPointerEnter = composeEventHandlers(liveEventHandler(() => internalProps.onPointerEnter), (event) => {
 		pointerType = event.pointerType || "";
 	});
 	createEffect(() => ({
@@ -1533,10 +1574,7 @@ function ComboboxTrigger(props) {
 		removeMouseUp?.();
 		labelable.registerControlId(labelSource, void 0);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true))(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		get id() {
 			return id();
@@ -1568,9 +1606,15 @@ function ComboboxTrigger(props) {
 		get ["aria-required"]() {
 			return insidePopup() && context.required() ? "true" : void 0;
 		},
+		get ["aria-readonly"]() {
+			return insidePopup() && context.readOnly() ? "true" : void 0;
+		},
 		get ["aria-labelledby"]() {
 			return ariaLabelledBy();
 		},
+		get ["aria-describedby"]() {
+			return ariaDescribedBy();
+		},
 		get ["aria-invalid"]() {
 			return state().valid === false && !disabled() ? "true" : void 0;
 		},
@@ -1748,7 +1792,11 @@ function ComboboxInput(props) {
 		const activeIndex = context.store.activeIndex();
 		return activeIndex == null ? void 0 : `${context.id()}-${activeIndex}`;
 	});
-	const others = omit(allProps, "as", "class", "disabled", "id", "onBlur", "onCompositionEnd", "onCompositionStart", "onFocus", "onInput", "onKeyDown", "onMouseDown", "onPointerDown", "onPointerMove", "ref", "style");
+	const ariaDescribedBy = createMemo(() => {
+		const external = internalProps["aria-describedby"];
+		return hasPositionerParent || external === false ? external : labelable.getAriaDescribedBy(external);
+	});
+	const others = omit(allProps, "aria-describedby", "render", "class", "disabled", "id", "onBlur", "onCompositionEnd", "onCompositionStart", "onFocus", "onInput", "onKeyDown", "onMouseDown", "onPointerDown", "onPointerMove", "ref", "style");
 	function clearHighlight() {
 		context.setIndices({
 			activeIndex: null,
@@ -1785,6 +1833,14 @@ function ComboboxInput(props) {
 		const next = event.currentTarget.value;
 		setComposingValue(null);
 		context.setInputValue(next, createChangeEventDetails(inputChange, event));
+		restoreAcceptedInputValue(event.currentTarget);
+	}
+	function restoreAcceptedInputValue(input) {
+		queueMicrotask(() => untrack(() => {
+			if (composing || context.inputElement() !== input) return;
+			const accepted = context.inputValue();
+			if (input.value !== accepted) input.value = accepted;
+		}));
 	}
 	function maybeOpenOnInput(trimmed, event, shouldOpen) {
 		if (context.readOnly() || disabled() || !trimmed || !shouldOpen) return;
@@ -1807,7 +1863,10 @@ function ComboboxInput(props) {
 		}
 		const changeDetails = createChangeEventDetails(inputChange, event);
 		context.setInputValue(input.value, changeDetails);
-		if (changeDetails.isCanceled) return;
+		if (changeDetails.isCanceled) {
+			input.value = context.inputValue();
+			return;
+		}
 		const empty = input.value === "";
 		const clearDetails = createChangeEventDetails(inputClear, event);
 		if (empty && !context.store.inputInsidePopup()) {
@@ -1816,6 +1875,7 @@ function ComboboxInput(props) {
 		}
 		maybeOpenOnInput(input.value.trim(), event, shouldOpenOnInput);
 		if (context.store.open() && context.store.activeIndex() !== null && !context.autoHighlight()) clearHighlight();
+		restoreAcceptedInputValue(input);
 	}
 	/** Chip highlight movement driven from the input, which owns real focus. */
 	function resolveChipIndex(event) {
@@ -1859,10 +1919,16 @@ function ComboboxInput(props) {
 	function handleKeyDown(event) {
 		const editable = !disabled() && !context.readOnly();
 		const modified = event.ctrlKey || event.shiftKey || event.altKey || event.metaKey;
-		if (editable && !modified) context.store.keyboardActive = true;
+		if (!disabled() && !modified) context.store.keyboardActive = true;
 		if (!(context.grid() && context.store.activeIndex() == null && (event.key === "ArrowLeft" || event.key === "ArrowRight"))) context.listNavigation.onKeyDown(event);
 		context.dismiss.onKeyDown(event);
-		if (!editable || modified) return;
+		if (!editable || modified) {
+			if (context.readOnly() && event.key === "Enter" && context.store.open() && context.store.activeIndex() !== null) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			return;
+		}
 		const input = event.currentTarget;
 		const isRTL = direction() === "rtl";
 		if (event.key === "Home" || event.key === "End") {
@@ -1870,7 +1936,7 @@ function ComboboxInput(props) {
 			event.stopPropagation();
 			const scrollAmount = input.scrollWidth - input.clientWidth;
 			const atStart = event.key === "Home";
-			const cursor = isGecko() && isRTL === atStart ? input.value.length : atStart ? 0 : input.value.length;
+			const cursor = (isGecko() && isRTL ? !atStart : atStart) ? 0 : input.value.length;
 			input.setSelectionRange(cursor, cursor);
 			input.scrollLeft = atStart ? 0 : isRTL ? -scrollAmount : scrollAmount;
 			return;
@@ -1910,18 +1976,18 @@ function ComboboxInput(props) {
 	function markPointerActive() {
 		context.store.keyboardActive = false;
 	}
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onCompositionEnd = composeEventHandlers(() => internalProps.onCompositionEnd, () => handleCompositionEnd);
-	const onCompositionStart = composeEventHandlers(() => internalProps.onCompositionStart, () => handleCompositionStart);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onInput = composeEventHandlers(() => internalProps.onInput, () => handleInput);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
-	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => context.click.onMouseDown(event));
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => (event) => {
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onCompositionEnd = composeEventHandlers(liveEventHandler(() => internalProps.onCompositionEnd), handleCompositionEnd);
+	const onCompositionStart = composeEventHandlers(liveEventHandler(() => internalProps.onCompositionStart), handleCompositionStart);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onInput = composeEventHandlers(liveEventHandler(() => internalProps.onInput), handleInput);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => internalProps.onMouseDown), (event) => context.click.onMouseDown(event));
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), (event) => {
 		markPointerActive();
 		context.click.onPointerDown(event);
 	});
-	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => markPointerActive);
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), markPointerActive);
 	createEffect(() => ({
 		insidePopup: insidePopup(),
 		owns: inputOwnsFormValue()
@@ -1934,6 +2000,15 @@ function ComboboxInput(props) {
 		if (untrack(context.inputElement) === element) context.setInputElement(null);
 	});
 	let element = null;
+	const Render = useRender(props, () => state(), (props) => ssrElement("input", props, void 0, true));
+	const InputScope = (props) => hasPositionerParent ? FieldRootContext({
+		value: DEFAULT_FIELD_ROOT_CONTEXT,
+		get children() {
+			return props.children;
+		}
+	}) : memo(() => {
+		return escape(props.children);
+	});
 	return [Show({
 		get when() {
 			return memo(() => {
@@ -1945,76 +2020,75 @@ function ComboboxInput(props) {
 				context.store.startDismissElement = node;
 			} });
 		}
-	}), Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "input";
-		},
-		ref: [((value) => {
-			element = value;
-			context.setInputElement(value);
-		}), internalProps.ref],
-		get id() {
-			return id();
-		},
-		get value() {
-			return composingValue() ?? context.inputValue();
-		},
-		get disabled() {
-			return disabled();
-		},
-		get readonly() {
-			return context.readOnly();
-		},
-		get required() {
-			return memo(() => {
-				return context.selectionMode() === "none";
-			})() ? context.required() : void 0;
-		},
-		get form() {
-			return context.form();
-		},
-		get name() {
-			return memo(() => {
-				return !!inputOwnsFormValue();
-			})() ? context.name() : void 0;
-		},
-		get ["aria-readonly"]() {
-			return context.readOnly() ? "true" : void 0;
-		},
-		get ["aria-required"]() {
-			return context.required() ? "true" : void 0;
-		},
-		get ["aria-labelledby"]() {
-			return labelable.labelId();
-		},
-		get ["aria-describedby"]() {
-			return labelable.getAriaDescribedBy(void 0);
-		},
-		get ["aria-activedescendant"]() {
-			return activeDescendant();
-		},
-		get ["aria-invalid"]() {
-			return state().valid === false && !disabled() ? "true" : void 0;
-		},
-		"data-base-ui-click-trigger": "",
-		get ["class"]() {
-			return classValue();
-		},
-		get style() {
-			return styleValue();
-		},
-		onBlur,
-		onCompositionEnd,
-		onCompositionStart,
-		onFocus,
-		onInput,
-		onKeyDown,
-		onMouseDown,
-		onPointerDown,
-		onPointerMove
-	}, () => {
-		return context.referenceAria();
-	}, stateAttributes, others))];
+	}), InputScope({ get children() {
+		return Render(mergeProps({
+			ref: [((value) => {
+				element = value;
+				context.setInputElement(value);
+			}), internalProps.ref],
+			get id() {
+				return id();
+			},
+			get value() {
+				return composingValue() ?? context.inputValue();
+			},
+			get disabled() {
+				return disabled();
+			},
+			get readonly() {
+				return context.readOnly();
+			},
+			get required() {
+				return memo(() => {
+					return context.selectionMode() === "none";
+				})() ? context.required() : void 0;
+			},
+			get form() {
+				return context.form();
+			},
+			get name() {
+				return memo(() => {
+					return !!inputOwnsFormValue();
+				})() ? context.name() : void 0;
+			},
+			get ["aria-readonly"]() {
+				return context.readOnly() ? "true" : void 0;
+			},
+			get ["aria-required"]() {
+				return context.required() ? "true" : void 0;
+			},
+			get ["aria-labelledby"]() {
+				return labelable.labelId();
+			},
+			get ["aria-describedby"]() {
+				return ariaDescribedBy();
+			},
+			get ["aria-activedescendant"]() {
+				return activeDescendant();
+			},
+			get ["aria-invalid"]() {
+				return state().valid === false && !disabled() ? "true" : void 0;
+			},
+			"data-base-ui-click-trigger": "",
+			get ["class"]() {
+				return classValue();
+			},
+			get style() {
+				return styleValue();
+			},
+			onBlur,
+			onCompositionEnd,
+			onCompositionStart,
+			onFocus,
+			onInput,
+			onKeyDown,
+			onMouseDown,
+			onPointerDown,
+			onPointerMove
+		}, () => {
+			return context.referenceAria();
+		}, stateAttributes, others));
+	} })];
 }
 function isGecko() {
 	return typeof navigator !== "undefined" && navigator.userAgent.includes("Firefox");
@@ -2025,8 +2099,8 @@ function isGecko() {
 * Routes a press anywhere in the input's surroundings back to the input, so clicking the padding
 * of an input group or the empty space beside the chips focuses and opens the combobox.
 */
-function handleInputPress(event, context, disabled, readOnly, shouldIgnoreTarget) {
-	if (event.baseUIHandlerPrevented || readOnly) return;
+function handleInputPress(event, context, disabled, shouldIgnoreTarget) {
+	if (event.baseUIHandlerPrevented) return;
 	const target = event.target;
 	const targetElement = isElement(target) ? target : null;
 	if (targetElement !== event.currentTarget && (shouldIgnoreTarget?.(targetElement) || isInteractiveElement(targetElement))) return;
@@ -2054,16 +2128,13 @@ function ComboboxInputGroup(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxControlStateMapping));
-	const others = omit(allProps, "as", "class", "onMouseDown", "ref", "style");
-	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => handleInputPress(event, context, context.disabled(), context.readOnly(), (target) => contains(context.store.chipsContainerElement, target)));
+	const others = omit(allProps, "render", "class", "onMouseDown", "ref", "style");
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => internalProps.onMouseDown), (event) => handleInputPress(event, context, context.disabled(), (target) => contains(context.store.chipsContainerElement, target)));
 	onCleanup(() => {
 		if (untrack(context.inputGroupElement) === element) context.setInputGroupElement(null);
 	});
 	let element = null;
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((value) => {
 			element = value;
 			context.setInputGroupElement(value);
@@ -2089,44 +2160,19 @@ function ComboboxIcon(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), triggerOpenStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
-	return Show({
-		get when() {
-			return props.as;
-		},
-		get fallback() {
-			return ssrElement("span", () => {
-				return mergeProps({
-					"aria-hidden": "true",
-					get ["class"]() {
-						return classValue();
-					},
-					get style() {
-						return styleValue();
-					}
-				}, stateAttributes, others);
-			}, () => {
-				return () => {
-					return escape(props.children ?? "▼");
-				};
-			}, true);
+	const others = omit(allProps, "render", "class", "ref", "style");
+	return useRender(props, () => state(), (props) => ssrElement("span", props, void 0, true))(mergeProps({
+		ref: [internalProps.ref],
+		"aria-hidden": "true",
+		get ["class"]() {
+			return classValue();
 		},
-		children: (component) => Dynamic(mergeProps({
-			get component() {
-				return component();
-			},
-			ref: [internalProps.ref],
-			"aria-hidden": "true",
-			get ["class"]() {
-				return classValue();
-			},
-			get style() {
-				return styleValue();
-			}
-		}, stateAttributes, others, { get children() {
-			return props.children ?? "▼";
-		} }))
-	});
+		get style() {
+			return styleValue();
+		}
+	}, stateAttributes, others, { get children() {
+		return props.children ?? "▼";
+	} }));
 }
 //#endregion
 //#region src/combobox/clear/ComboboxClear.tsx
@@ -2154,7 +2200,7 @@ function ComboboxClear(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxClearStateMapping));
-	const others = omit(allProps, "as", "class", "disabled", "keepMounted", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "keepMounted", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "ref", "style");
 	let element = null;
 	createEffect(() => ({
 		visible: visible(),
@@ -2173,7 +2219,7 @@ function ComboboxClear(props) {
 		const type = context.store.keyboardActive ? keyboard : pointer;
 		context.setInputValue("", createChangeEventDetails(clearPress, event));
 		if (context.selectionMode() !== "none") {
-			context.setSelectedValue(Array.isArray(context.selectedValue()) ? [] : null, createChangeEventDetails(clearPress, event));
+			context.setSelectedValue(context.multiple() ? [] : null, createChangeEventDetails(clearPress, event));
 			context.setIndices({
 				activeIndex: null,
 				selectedIndex: null,
@@ -2185,19 +2231,17 @@ function ComboboxClear(props) {
 		});
 		context.focusInput();
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown));
-	const onKeyUp = composeEventHandlers(() => untrack(() => disabled() ? stopButtonInteraction : void 0), () => internalProps.onKeyUp, () => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp));
-	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => event.preventDefault());
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyDown)));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? stopButtonInteraction : void 0)), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(() => nativeButton() ? void 0 : handleNonNativeButtonKeyUp)));
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => internalProps.onMouseDown), (event) => event.preventDefault());
+	const Render = useRender(props, () => state(), (props) => ssrElement("button", props, void 0, true));
 	return Show({
 		get when() {
 			return shouldRender();
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "button";
-				},
+			return Render(mergeProps({
 				ref: [((value) => {
 					element = value;
 					context.store.clearElement = value;
@@ -2266,7 +2310,7 @@ function ComboboxList(props) {
 	const state = createMemo(() => ({ empty: context.listEmpty() }));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
-	const others = omit(allProps, "as", "children", "class", "id", "onKeyDown", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "id", "onKeyDown", "ref", "style");
 	function handleKeyDown(event) {
 		if (context.disabled() || context.readOnly()) return;
 		context.store.keyboardActive = true;
@@ -2277,7 +2321,7 @@ function ComboboxList(props) {
 		event.stopPropagation();
 		context.clickHighlightedItem(activeIndex, event);
 	}
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
 	const [listElement, setListElement] = createSignal(null, { ownedWrite: true });
 	createEffect(listElement, (element) => {
 		if (!element) return;
@@ -2301,13 +2345,10 @@ function ComboboxList(props) {
 	});
 	const children = createMemo(() => {
 		const child = props.children;
-		if (typeof child === "function" && !isSolidAccessor(child)) return ComboboxCollection({ children: child });
+		if (typeof child === "function" && !isSolidAccessor(child) && !("$ll" in child)) return ComboboxCollection({ children: child });
 		return child;
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => {
 			setListElement(element);
 			context.store.setListElement(element);
@@ -2323,6 +2364,9 @@ function ComboboxList(props) {
 		get ["aria-multiselectable"]() {
 			return context.multiple() ? "true" : void 0;
 		},
+		get ["aria-readonly"]() {
+			return !context.grid() && context.readOnly() ? "true" : void 0;
+		},
 		get ["class"]() {
 			return classValue();
 		},
@@ -2388,13 +2432,10 @@ function ComboboxStatus(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	const [element, setElement] = createSignal(null, { ownedWrite: true });
 	createInitialLiveRegionTextMutation(element);
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((value) => setElement(value)), internalProps.ref],
 		role: "status",
 		"aria-live": "polite",
@@ -2432,7 +2473,7 @@ function ComboboxPortal(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "container", "keepMounted", "ref", "style");
+	const others = omit(allProps, "render", "class", "container", "keepMounted", "ref", "style");
 	return Show({
 		get when() {
 			return shouldRender();
@@ -2440,12 +2481,12 @@ function ComboboxPortal(props) {
 		get children() {
 			return ComboboxPortalContext({
 				get value() {
-					return keepMounted();
+					return untrack(keepMounted);
 				},
 				get children() {
 					return PopupPortal(mergeProps({
-						get as() {
-							return props.as;
+						get render() {
+							return props.render;
 						},
 						get container() {
 							return internalProps.container;
@@ -2482,11 +2523,8 @@ function ComboboxBackdrop(props) {
 		"-webkit-user-select": "none"
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxBackdropStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const others = omit(allProps, "render", "class", "ref", "style");
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		role: "presentation",
 		get hidden() {
@@ -2551,7 +2589,7 @@ function ComboboxPositioner(props) {
 		transition: context.store.track().transitionStatus === "starting" ? "none" : void 0
 	}, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxPositionerStateMapping));
-	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "as", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
+	const others = omit(allProps, "align", "alignOffset", "anchor", "arrowPadding", "render", "class", "collisionAvoidance", "collisionBoundary", "collisionPadding", "disableAnchorTracking", "positionMethod", "ref", "side", "sideOffset", "sticky", "style");
 	createAnchoredPopupScrollLock({
 		enabled: () => context.store.open() && context.modal(),
 		touchOpen: () => context.store.openMethod() === "touch",
@@ -2585,6 +2623,7 @@ function ComboboxPositioner(props) {
 			}
 		});
 	}
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ComboboxPositionerContext({
 		value: positionerContext,
 		get children() {
@@ -2597,10 +2636,7 @@ function ComboboxPositioner(props) {
 				get children() {
 					return ModalBackdrop({});
 				}
-			}), Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			}), Render(mergeProps({
 				ref: [((value) => {
 					setElement(value);
 					context.store.setPositionerElement(value);
@@ -2648,7 +2684,7 @@ function ComboboxPopup(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeStyleValue({ transition: state().transitionStatus === "starting" ? "none" : void 0 }, resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxPopupStateMapping));
-	const others = omit(allProps, "as", "class", "finalFocus", "id", "initialFocus", "onFocus", "ref", "style");
+	const others = omit(allProps, "render", "class", "finalFocus", "id", "initialFocus", "onFocus", "ref", "style");
 	const focusManagerModal = createMemo(() => !context.store.inputInsidePopup() || context.modal());
 	const resolvedInitialFocus = createMemo(() => {
 		if (internalProps.initialFocus !== void 0) return internalProps.initialFocus;
@@ -2676,6 +2712,7 @@ function ComboboxPopup(props) {
 	onCleanup(() => {
 		if (context.store.state.popupElement === popupElement) context.store.setPopupElement(null);
 	});
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return FocusManager({
 		get context() {
 			return context.store.context.floatingRoot;
@@ -2704,10 +2741,7 @@ function ComboboxPopup(props) {
 		referenceElement: () => context.store.inputInsidePopup() ? context.triggerElement() : context.inputElement(),
 		getInsideElements: () => [context.store.startDismissElement, context.store.endDismissElement],
 		get children() {
-			return [Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return [Render(mergeProps({
 				ref: [((element) => {
 					popupElement = element;
 					context.store.setPopupElement(element);
@@ -2764,15 +2798,12 @@ function ComboboxArrow(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => mergeStyleValue(positioner.arrowStyles(), resolveStyle(props.style, state())));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), popupStateMapping));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
 	let arrow = null;
 	onCleanup(() => {
 		if (arrow) positioner.setArrowElement(null);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((element) => {
 			arrow = element;
 			positioner.setArrowElement(element);
@@ -2799,13 +2830,15 @@ function useComboboxGroupContext() {
 //#region src/combobox/group/ComboboxGroup.tsx
 /** Groups related items with the corresponding label. */
 function ComboboxGroup(props) {
+	const context = useComboboxRootContext();
 	const internalProps = props;
 	const allProps = props;
 	const [labelId, setLabelId] = createSignal(void 0, { ownedWrite: true });
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "items", "ref", "style");
+	const others = omit(allProps, "render", "class", "items", "ref", "style");
+	const Render = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true));
 	return ComboboxGroupCollectionContext({
 		value: { items: () => internalProps.items },
 		get children() {
@@ -2815,12 +2848,11 @@ function ComboboxGroup(props) {
 					setLabelId
 				},
 				get children() {
-					return Dynamic(mergeProps({
-						get component() {
-							return props.as ?? "div";
-						},
+					return Render(mergeProps({
 						ref: [internalProps.ref],
-						role: "group",
+						get role() {
+							return context.grid() ? "rowgroup" : "group";
+						},
 						get ["aria-labelledby"]() {
 							return labelId();
 						},
@@ -2848,21 +2880,19 @@ function ComboboxGroupLabel(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "id", "ref", "style");
+	const others = omit(allProps, "render", "class", "id", "ref", "style");
 	createEffect(id, (currentId) => {
 		context.setLabelId(currentId);
 		return () => {
 			if (context.labelId() === currentId) context.setLabelId(void 0);
 		};
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		get id() {
 			return id();
 		},
+		"aria-hidden": "true",
 		get ["class"]() {
 			return classValue();
 		},
@@ -2908,8 +2938,7 @@ function ComboboxItem(props) {
 	const declaredIndex = createMemo(() => {
 		if (internalProps.index != null) return internalProps.index;
 		if (!context.virtualized()) return;
-		const derived = findItemIndex(context.flatFilteredItems(), itemValue(), context.comparator());
-		return derived === -1 ? void 0 : derived;
+		return findItemIndex(context.itemValues(), itemValue(), context.comparator());
 	});
 	const unregister = context.store.collection.register({
 		token,
@@ -2924,7 +2953,7 @@ function ComboboxItem(props) {
 	const selected = createMemo(() => {
 		if (!selectable()) return false;
 		const current = context.selectedValue();
-		if (Array.isArray(current)) return selectedValueIncludes(current, itemValue(), context.comparator());
+		if (context.multiple() && Array.isArray(current)) return selectedValueIncludes(current, itemValue(), context.comparator());
 		return compareItemEquality(itemValue(), current, context.comparator());
 	});
 	const highlighted = createMemo(() => context.store.activeIndex() === index());
@@ -2936,7 +2965,7 @@ function ComboboxItem(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "as", "class", "disabled", "id", "index", "nativeButton", "onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerLeave", "onPointerMove", "ref", "style", "value");
+	const others = omit(allProps, "render", "class", "disabled", "id", "index", "nativeButton", "onClick", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerLeave", "onPointerMove", "ref", "style", "value");
 	function commitSelection(event) {
 		if (context.submitOnItemClick()) {
 			context.handleSelection(event, itemValue());
@@ -2966,19 +2995,19 @@ function ComboboxItem(props) {
 	function handlePointerMove(event) {
 		if (event.pointerType === "touch") return;
 		context.store.keyboardActive = false;
-		if (disabled()) return;
+		if (disabled() || !hasRegistered()) return;
 		context.listNavigation.onItemPointerMove(event, index());
 	}
 	function handlePointerLeave(event) {
 		if (context.keepHighlight()) return;
 		context.listNavigation.onItemPointerLeave(event);
 	}
-	const onClick = composeEventHandlers(() => untrack(() => disabled() ? preventButtonInteraction : void 0), () => internalProps.onClick, () => handleClick);
-	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => handleMouseDown);
-	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => handleMouseUp);
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
-	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => handlePointerMove);
-	const onPointerLeave = composeEventHandlers(() => internalProps.onPointerLeave, () => handlePointerLeave);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(() => disabled() ? preventButtonInteraction : void 0)), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => internalProps.onMouseDown), handleMouseDown);
+	const onMouseUp = composeEventHandlers(liveEventHandler(() => internalProps.onMouseUp), handleMouseUp);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), handlePointerMove);
+	const onPointerLeave = composeEventHandlers(liveEventHandler(() => internalProps.onPointerLeave), handlePointerLeave);
 	createEffect(() => ({
 		registered: hasRegistered(),
 		hasItems: context.hasItems(),
@@ -2988,21 +3017,19 @@ function ComboboxItem(props) {
 		compare: context.comparator()
 	}), (current) => {
 		if (!current.registered || current.hasItems) return;
-		const lastSelected = Array.isArray(current.selected) ? current.selected[current.selected.length - 1] : current.selected;
-		if (compareItemEquality(current.value, lastSelected, current.compare)) untrack(() => context.store.setSelectedIndex(current.index));
+		untrack(() => context.store.setSelectedIndex(findSelectionIndex(context.store.collection.values(), current.selected, current.compare, context.multiple())));
 	});
 	createEffect(element, () => context.store.collection.touch());
 	onCleanup(unregister);
+	const itemContext = {
+		selected,
+		index
+	};
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	return ComboboxItemContext({
-		value: {
-			selected,
-			index
-		},
+		value: itemContext,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [((value) => {
 					setElement(value);
 					context.store.collection.touch();
@@ -3050,14 +3077,12 @@ function ComboboxRow(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "class", "ref", "style");
+	const others = omit(allProps, "render", "class", "ref", "style");
+	const Render = useRender(props, () => state, (props) => ssrElement("div", props, void 0, true));
 	return ComboboxRowContext({
 		value: true,
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return Render(mergeProps({
 				ref: [internalProps.ref],
 				role: "row",
 				get ["class"]() {
@@ -3085,16 +3110,13 @@ function ComboboxEmpty(props) {
 	const state = {};
 	const classValue = createMemo(() => resolveClass(props.class, state));
 	const styleValue = createMemo(() => resolveStyle(props.style, state));
-	const others = omit(allProps, "as", "children", "class", "ref", "style");
+	const others = omit(allProps, "render", "children", "class", "ref", "style");
 	const [element, setElement] = createSignal(null, { ownedWrite: true });
 	createInitialLiveRegionTextMutation(element);
 	onCleanup(() => {
 		if (context.store.emptyElement === element()) context.store.emptyElement = null;
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return useRender(props, () => state, (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [((value) => {
 			setElement(value);
 			context.store.emptyElement = value;
@@ -3130,11 +3152,8 @@ function ComboboxSeparator(props) {
 	const classValue = createMemo(() => resolveClass(props.class, state()));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state()));
-	const others = omit(allProps, "as", "class", "orientation", "ref", "style");
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	const others = omit(allProps, "render", "class", "orientation", "ref", "style");
+	return useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
 		ref: [internalProps.ref],
 		role: "presentation",
 		get ["class"]() {
@@ -3154,4 +3173,4 @@ function useFilteredItems() {
 	return useComboboxRootContext().filteredItems;
 }
 //#endregion
-export { getFilter as A, getIndexAfterChipRemoval as C, ComboboxTrigger as D, useRequiredComboboxChipsContext as E, resolveMultipleLabels as M, resolveSelectedLabel as N, AriaCombobox as O, stringifyAsLabel as P, getChipNavigationKeys as S, ComboboxChipsContext as T, ComboboxClear as _, ComboboxItem as a, handleInputPress as b, ComboboxGroup as c, ComboboxPositioner as d, ComboboxBackdrop as f, ComboboxCollection as g, ComboboxList as h, ComboboxRow as i, hasNullItemLabel as j, useComboboxRootContext as k, ComboboxArrow as l, ComboboxStatus as m, ComboboxSeparator as n, useComboboxItemContext as o, ComboboxPortal as p, ComboboxEmpty as r, ComboboxGroupLabel as s, useFilteredItems as t, ComboboxPopup as u, ComboboxIcon as v, ComboboxChipRegistry as w, ComboboxInput as x, ComboboxInputGroup as y };
+export { getFilter as A, getIndexAfterChipRemoval as C, ComboboxTrigger as D, useRequiredComboboxChipsContext as E, stringifyAsLabel as F, hasNullItemLabel as M, resolveMultipleLabels as N, AriaCombobox as O, resolveSelectedLabel as P, getChipNavigationKeys as S, ComboboxChipsContext as T, ComboboxClear as _, ComboboxItem as a, handleInputPress as b, ComboboxGroup as c, ComboboxPositioner as d, ComboboxBackdrop as f, ComboboxCollection as g, ComboboxList as h, ComboboxRow as i, flattenItems as j, useComboboxRootContext as k, ComboboxArrow as l, ComboboxStatus as m, ComboboxSeparator as n, useComboboxItemContext as o, ComboboxPortal as p, ComboboxEmpty as r, ComboboxGroupLabel as s, useFilteredItems as t, ComboboxPopup as u, ComboboxIcon as v, ComboboxChipRegistry as w, ComboboxInput as x, ComboboxInputGroup as y };