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

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

@@ -4,29 +4,30 @@ import { E as pointer, S as listNavigation, b as keyboard, g as inputClear, h as
 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 { composeEventHandlers, liveEventHandler } from "./internals/composeEventHandlers.js";
 import { t as runOnceAnimationsFinish } from "./runOnceAnimationsFinish-CYq38H8J.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-B5Y0WEev.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 { 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-kHjFPiQ5.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-B2KsiiLb.js";
-import { t as FocusManager } from "./FocusManager-1LfoCsya.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 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 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-BwJ10_X2.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-CjsSxbGr.js";
+import { i as isScrollableY } from "./scrollable-C9Pgq8T5.js";
 import { t as isAndroid } from "./platform-DYukKUir.js";
+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
@@ -456,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() {
@@ -579,7 +580,7 @@ function AriaCombobox(props) {
 	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);
@@ -684,13 +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 previousQuery = untrack(query);
 	const store = new ComboboxStore({
+		inputOwnsFormValue: untrack(() => props.selectionMode === "none"),
 		controlledOpen: () => controlledOpen ? props.open : void 0,
 		floatingId,
 		nodeId,
@@ -706,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,
@@ -759,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;
@@ -905,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 });
@@ -1094,11 +1098,14 @@ 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;
+		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(() => ({
@@ -1110,17 +1117,25 @@ 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();
@@ -1135,7 +1150,7 @@ function AriaCombobox(props) {
 			}
 		}
 		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;
@@ -1143,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"
@@ -1432,6 +1447,10 @@ 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(),
@@ -1444,7 +1463,7 @@ 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", "render", "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.disabled(),
@@ -1454,7 +1473,7 @@ function ComboboxTrigger(props) {
 		context: context.store.context.floatingRoot,
 		enabled: () => !context.store.open() && !context.readOnly() && !context.disabled() && context.selectionMode() === "single",
 		list: context.itemLabels,
-		elements: () => context.store.collection.elements(),
+		disabledIndices: () => context.store.collection.disabledIndices(),
 		activeIndex: context.store.activeIndex,
 		selectedIndex: context.store.selectedIndex,
 		onMatch(index) {
@@ -1529,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(() => ({
@@ -1593,6 +1612,9 @@ function ComboboxTrigger(props) {
 		get ["aria-labelledby"]() {
 			return ariaLabelledBy();
 		},
+		get ["aria-describedby"]() {
+			return ariaDescribedBy();
+		},
 		get ["aria-invalid"]() {
 			return state().valid === false && !disabled() ? "true" : void 0;
 		},
@@ -1770,7 +1792,11 @@ function ComboboxInput(props) {
 		const activeIndex = context.store.activeIndex();
 		return activeIndex == null ? void 0 : `${context.id()}-${activeIndex}`;
 	});
-	const others = omit(allProps, "render", "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,
@@ -1807,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;
@@ -1841,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) {
@@ -1901,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;
@@ -1941,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()
@@ -1966,6 +2001,14 @@ function ComboboxInput(props) {
 	});
 	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(() => {
@@ -1977,73 +2020,75 @@ function ComboboxInput(props) {
 				context.store.startDismissElement = node;
 			} });
 		}
-	}), 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 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");
@@ -2054,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;
@@ -2084,7 +2129,7 @@ function ComboboxInputGroup(props) {
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), comboboxControlStateMapping));
 	const others = omit(allProps, "render", "class", "onMouseDown", "ref", "style");
-	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => (event) => handleInputPress(event, context, context.disabled(), context.readOnly(), (target) => contains(context.store.chipsContainerElement, target)));
+	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);
 	});
@@ -2174,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,
@@ -2186,10 +2231,10 @@ 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() {
@@ -2276,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;
@@ -2300,7 +2345,7 @@ 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 useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true))(mergeProps({
@@ -2893,8 +2938,7 @@ function ComboboxItem(props) {
 	const declaredIndex = createMemo(() => {
 		if (internalProps.index != null) return internalProps.index;
 		if (!context.virtualized()) return;
-		const derived = findItemIndex(context.itemValues(), itemValue(), context.comparator());
-		return derived === -1 ? void 0 : derived;
+		return findItemIndex(context.itemValues(), itemValue(), context.comparator());
 	});
 	const unregister = context.store.collection.register({
 		token,
@@ -2909,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());
@@ -2951,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(),

package/dist/lib/types/accordion/trigger/AccordionTrigger.d.ts

@@ -1,7 +1,7 @@
-import type { ComponentProps, JSX, ValidComponent } from '@solidjs/web';
-import { type BaseUIEventHandlerUnion } from '../../internals/composeEventHandlers.js';
-import type { BaseUIComponentProps } from '../../types/index.js';
-import type { AccordionItemState } from '../item/AccordionItem.js';
+import type { ComponentProps, JSX, ValidComponent } from "@solidjs/web";
+import { type BaseUIEventHandlerUnion } from "../../internals/composeEventHandlers.js";
+import type { BaseUIComponentProps } from "../../types/index.js";
+import type { AccordionItemState } from "../item/AccordionItem.js";
 export interface AccordionTriggerState extends AccordionItemState {
 }
 type TriggerEventTarget<Component extends ValidComponent> = ComponentProps<Component> extends {
@@ -17,11 +17,11 @@ interface AccordionTriggerOwnProps<Component extends ValidComponent> {
     onMouseUp?: BaseUIEventHandlerUnion<TriggerEventTarget<Component>, MouseEvent> | undefined;
     onPointerDown?: BaseUIEventHandlerUnion<TriggerEventTarget<Component>, PointerEvent> | undefined;
 }
-export type AccordionTriggerProps<Component extends ValidComponent = 'button'> = BaseUIComponentProps<Component, AccordionTriggerState, AccordionTriggerOwnProps<Component>>;
+export type AccordionTriggerProps<Component extends ValidComponent = "button"> = BaseUIComponentProps<Component, AccordionTriggerState, AccordionTriggerOwnProps<Component>>;
 /** A button that opens and closes the corresponding panel. */
-export declare function AccordionTrigger<Component extends ValidComponent = 'button'>(props: AccordionTrigger.Props<Component>): JSX.Element;
+export declare function AccordionTrigger<Component extends ValidComponent = "button">(props: AccordionTrigger.Props<Component>): JSX.Element;
 export declare namespace AccordionTrigger {
     type State = AccordionTriggerState;
-    type Props<Component extends ValidComponent = 'button'> = AccordionTriggerProps<Component>;
+    type Props<Component extends ValidComponent = "button"> = AccordionTriggerProps<Component>;
 }
 export {};

package/dist/lib/types/combobox/chip/ComboboxChip.d.ts

@@ -5,7 +5,9 @@ export interface ComboboxChipState {
     disabled: boolean;
 }
 interface ComboboxChipOwnProps {
+    onContextMenu?: BaseUIEventHandlerUnion<HTMLElement, MouseEvent> | undefined;
     onKeyDown?: BaseUIEventHandlerUnion<HTMLElement, KeyboardEvent> | undefined;
+    onMouseDown?: BaseUIEventHandlerUnion<HTMLElement, MouseEvent> | undefined;
 }
 export type ComboboxChipProps<Component extends ValidComponent = 'div'> = BaseUIComponentProps<Component, ComboboxChipState, ComboboxChipOwnProps>;
 /** An individual chip representing one value in a multiselectable input. */