@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/ComboBox.js

@@ -1,9 +1,26 @@
-import { Provider, filterDOMProps, useRenderProps } from "./utils.js";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/ComboBox.tsx
+import { DEFAULT_SLOT, OptionContent, Provider, dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
 import { TextContext } from "./Text.js";
+import { FieldErrorContext } from "./FieldError.js";
 import { SelectionIndicatorContext } from "./SelectionIndicator.js";
-import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, setProperty, spread, style, template, use } from "solid-js/web";
-import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
-import { createComboBox, createHover, createInteractOutside, createListBox, createOption, createScrollIntoViewOnFocus, getComboBoxData, isFocusVisible, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { useCollectionRenderer, useCollectionRoot } from "./Collection.js";
+import { i as VirtualizerItem } from "./Virtualizer2.js";
+import { ListBoxLoadMoreItem } from "./ListBox.js";
+import { className, createComponent, delegateEvents, effect, getNextElement, getNextMarker, insert, memo, readShallow, ref, runHydrationEvents, scope, setAttribute, setProperty, spread, style, template } from "@solidjs/web";
+import { For, Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, createTrackedEffect, onCleanup, useContext } from "solid-js";
+import { createComboBox, createFilter, createFocusRing, createHover, createInteractOutside, createListBox, createOption, createPress, createScrollIntoViewOnFocus, getComboBoxData, isFocusVisible, mergeProps as mergeProps$1 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createComboBoxState, defaultContainsFilter } from "@proyecto-viviana/solid-stately";
 //#region src/ComboBox.tsx
 /**
@@ -12,8 +29,18 @@ import { createComboBoxState, defaultContainsFilter } from "@proyecto-viviana/so
 * A pre-wired headless combobox that combines state + aria hooks.
 * Port of react-aria-components/src/ComboBox.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<input type=hidden>`), _tmpl$2 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<label>`), _tmpl$4 = /*#__PURE__*/ template(`<span>`), _tmpl$5 = /*#__PURE__*/ template(`<input>`), _tmpl$6 = /*#__PURE__*/ template(`<button>`), _tmpl$7 = /*#__PURE__*/ template(`<div>`), _tmpl$8 = /*#__PURE__*/ template(`<div role=group aria-label="Selected items">`), _tmpl$9 = /*#__PURE__*/ template(`<span><!$><!/><button type=button class=solidaria-ComboBox-tag-remove tabindex=-1>&#215;`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<input type=hidden>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<label>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/><!$><!/>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div role=option data-empty-state style=display:contents>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div role=group aria-label="Selected items">`);
+var _tmpl$11 = /* @__PURE__ */ template(`<span><!$><!/><button type=button class=solidaria-ComboBox-tag-remove tabindex=-1>&#215;`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -29,8 +56,9 @@ function callInputKeyDown(handler, event) {
 * A combobox combines a text input with a listbox, allowing users to filter a list of options.
 */
 function ComboBox(props) {
-	const contextSlotProps = useContext(ComboBoxContext)?.slots?.[props.slot ?? "default"];
-	const [local, stateProps, ariaProps] = splitProps(contextSlotProps ? mergeProps$2(contextSlotProps, props) : props, [
+	const contextSlotProps = useContext(ComboBoxContext)?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
+	const mergedComboBoxProps = contextSlotProps ? mergeProps$1(contextSlotProps, props) : props;
+	const [local, stateProps, ariaProps] = splitProps(mergedComboBoxProps, [
 		"class",
 		"style",
 		"slot",
@@ -65,14 +93,16 @@ function ComboBox(props) {
 		"name",
 		"formValue"
 	]);
-	let inputRef = null;
+	const [inputEl, setInputEl] = createSignal(null, { ownedWrite: true });
 	let buttonRef = null;
 	let triggerRef = null;
 	let listBoxRef = null;
+	const [popoverRef, setPopoverRef] = createSignal(null);
 	const optionActions = /* @__PURE__ */ new Map();
 	const runOptionAction = (key) => {
 		optionActions.get(key)?.();
 	};
+	const intlFilter = createFilter({ sensitivity: "base" });
 	const state = createComboBoxState({
 		get items() {
 			return stateProps.items;
@@ -132,7 +162,7 @@ function ComboBox(props) {
 			return stateProps.onOpenChange;
 		},
 		get defaultFilter() {
-			return stateProps.defaultFilter;
+			return stateProps.defaultFilter ?? intlFilter().contains;
 		},
 		get allowsCustomValue() {
 			return stateProps.allowsCustomValue;
@@ -167,8 +197,11 @@ function ComboBox(props) {
 		...comboBoxAriaProps(),
 		get name() {
 			return effectiveFormValue() === "text" ? stateProps.name : void 0;
+		},
+		get allowsCustomValue() {
+			return stateProps.allowsCustomValue;
 		}
-	}), state, () => inputRef, () => buttonRef, () => listBoxRef);
+	}), state, () => inputEl(), () => buttonRef, () => listBoxRef, () => popoverRef());
 	const getInputProps = () => {
 		const inputProps = comboBoxAria.inputProps;
 		const originalOnKeyDown = inputProps.onKeyDown;
@@ -182,16 +215,13 @@ function ComboBox(props) {
 			}
 		};
 	};
-	const { isHovered, hoverProps } = createHover({ get isDisabled() {
-		return ariaProps.isDisabled;
-	} });
 	const renderValues = createMemo(() => ({
 		isOpen: comboBoxAria.isOpen(),
 		isFocused: comboBoxAria.isFocused(),
 		isFocusVisible: comboBoxAria.isFocusVisible(),
 		isDisabled: !!ariaProps.isDisabled,
 		isRequired: !!ariaProps.isRequired,
-		isInvalid: !!ariaProps.isInvalid,
+		isInvalid: comboBoxAria.isInvalid,
 		isReadOnly: !!ariaProps.isReadOnly,
 		isSelected: state.selectedKey() != null,
 		inputValue: state.inputValue()
@@ -204,10 +234,6 @@ function ComboBox(props) {
 	const domProps = createMemo(() => {
 		return filterDOMProps(ariaProps, { global: true });
 	});
-	const cleanHoverProps = () => {
-		const { ref: _ref, ...rest } = hoverProps;
-		return rest;
-	};
 	const ComboBoxChildren = () => typeof local.children === "function" ? local.children(renderValues()) : local.children;
 	const textSlots = { slots: {
 		get description() {
@@ -217,7 +243,19 @@ function ComboBox(props) {
 			return comboBoxAria.errorMessageProps;
 		}
 	} };
-	return createComponent(ComboBoxContext.Provider, {
+	const fieldErrorContext = {
+		get validation() {
+			return {
+				isInvalid: comboBoxAria.isInvalid,
+				validationErrors: comboBoxAria.validationErrors,
+				validationDetails: comboBoxAria.validationDetails
+			};
+		},
+		get errorMessageProps() {
+			return comboBoxAria.errorMessageProps;
+		}
+	};
+	return createComponent(ComboBoxContext, {
 		get value() {
 			return {
 				state,
@@ -240,9 +278,9 @@ function ComboBox(props) {
 				isFocused: comboBoxAria.isFocused,
 				isFocusVisible: comboBoxAria.isFocusVisible,
 				items: stateProps.items ?? stateProps.defaultItems ?? [],
-				inputRef: () => inputRef,
+				inputRef: () => inputEl(),
 				setInputRef: (el) => {
-					inputRef = el;
+					setInputEl(el);
 				},
 				buttonRef: () => buttonRef,
 				setButtonRef: (el) => {
@@ -256,6 +294,8 @@ function ComboBox(props) {
 				setListBoxRef: (el) => {
 					listBoxRef = el;
 				},
+				popoverRef,
+				setPopoverRef,
 				registerOptionAction: (key, action) => {
 					if (action) optionActions.set(key, action);
 					else optionActions.delete(key);
@@ -265,74 +305,77 @@ function ComboBox(props) {
 			};
 		},
 		get children() {
-			return createComponent(ComboBoxStateContext.Provider, {
+			return createComponent(ComboBoxStateContext, {
 				value: state,
 				get children() {
-					var _el$ = getNextElement(_tmpl$2), _el$3 = _el$.firstChild, [_el$4, _co$] = getNextMarker(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = getNextMarker(_el$5.nextSibling);
-					use((el) => {
-						assignRef(local.ref, el);
-						assignRef(local.rootRef, el);
+					var _el$ = getNextElement(_tmpl$2);
+					var _el$2 = _el$.firstChild;
+					var [_el$3, _el$4] = getNextMarker(_el$2.nextSibling);
+					var _el$6 = _el$3.nextSibling;
+					var [_el$7, _el$8] = getNextMarker(_el$6.nextSibling);
+					ref(() => {
+						return (el) => {
+							assignRef$1(local.ref, el);
+							assignRef$1(local.rootRef, el);
+						};
 					}, _el$);
-					spread(_el$, mergeProps(domProps, cleanHoverProps, {
-						get ["class"]() {
+					spread(_el$, [domProps, {
+						get "class"() {
 							return renderProps.class();
 						},
 						get style() {
 							return renderProps.style();
 						},
-						get ["data-open"]() {
-							return comboBoxAria.isOpen() || void 0;
+						get "data-open"() {
+							return dataAttr(comboBoxAria.isOpen());
 						},
-						get ["data-focused"]() {
-							return comboBoxAria.isFocused() || void 0;
+						get "data-focused"() {
+							return dataAttr(comboBoxAria.isFocused());
 						},
-						get ["data-focus-visible"]() {
-							return comboBoxAria.isFocusVisible() || void 0;
+						get "data-disabled"() {
+							return dataAttr(ariaProps.isDisabled);
 						},
-						get ["data-disabled"]() {
-							return ariaProps.isDisabled || void 0;
+						get "data-required"() {
+							return dataAttr(ariaProps.isRequired);
 						},
-						get ["data-required"]() {
-							return ariaProps.isRequired || void 0;
+						get "data-invalid"() {
+							return dataAttr(comboBoxAria.isInvalid);
 						},
-						get ["data-invalid"]() {
-							return ariaProps.isInvalid || void 0;
-						},
-						get ["data-readonly"]() {
-							return ariaProps.isReadOnly || void 0;
-						},
-						get ["data-hovered"]() {
-							return isHovered() || void 0;
+						get "data-readonly"() {
+							return dataAttr(ariaProps.isReadOnly);
 						},
 						get slot() {
 							return local.slot;
 						}
-					}), false, true);
+					}], true);
+					insert(_el$, createComponent(Provider, {
+						values: [[TextContext, textSlots], [FieldErrorContext, fieldErrorContext]],
+						get children() {
+							return createComponent(ComboBoxChildren, {});
+						}
+					}), _el$3, _el$4);
 					insert(_el$, createComponent(Show, {
 						get when() {
-							return memo(() => !!stateProps.name)() && effectiveFormValue() === "key";
+							return memo(() => {
+								return !!stateProps.name;
+							})() ? effectiveFormValue() === "key" : stateProps.name;
 						},
 						get children() {
-							var _el$2 = getNextElement(_tmpl$);
-							effect((_p$) => {
-								var _v$ = stateProps.name, _v$2 = ariaProps.form;
-								_v$ !== _p$.e && setAttribute(_el$2, "name", _p$.e = _v$);
-								_v$2 !== _p$.t && setAttribute(_el$2, "form", _p$.t = _v$2);
-								return _p$;
-							}, {
-								e: void 0,
-								t: void 0
+							var _el$5 = getNextElement(_tmpl$);
+							effect(() => {
+								return {
+									e: stateProps.name,
+									t: ariaProps.form,
+									a: state.selectedKey()?.toString() ?? ""
+								};
+							}, ({ e, t, a }, _p$) => {
+								e !== _p$?.e && setAttribute(_el$5, "name", e);
+								t !== _p$?.t && setAttribute(_el$5, "form", t);
+								setProperty(_el$5, "value", a);
 							});
-							effect(() => setProperty(_el$2, "value", state.selectedKey()?.toString() ?? ""));
-							return _el$2;
+							return _el$5;
 						}
-					}), _el$4, _co$);
-					insert(_el$, createComponent(Provider, {
-						values: [[TextContext, textSlots]],
-						get children() {
-							return createComponent(ComboBoxChildren, {});
-						}
-					}), _el$6, _co$2);
+					}), _el$7, _el$8);
 					runHydrationEvents();
 					return _el$;
 				}
@@ -356,20 +399,24 @@ function ComboBoxLabel(props) {
 		const { ref: _ref, ...rest } = context.labelProps();
 		return rest;
 	};
-	return (() => {
-		var _el$7 = getNextElement(_tmpl$3);
-		spread(_el$7, mergeProps(domProps, cleanLabelProps, {
-			get ["class"]() {
+	var _el$9 = getNextElement(_tmpl$3);
+	spread(_el$9, [
+		domProps,
+		cleanLabelProps,
+		{
+			get "class"() {
 				return local.class;
 			},
 			get style() {
 				return local.style;
 			}
-		}), false, true);
-		insert(_el$7, () => local.children);
-		runHydrationEvents();
-		return _el$7;
-	})();
+		}
+	], true);
+	insert(_el$9, scope(() => {
+		return local.children;
+	}));
+	runHydrationEvents();
+	return _el$9;
 }
 /**
 * Description element for a combobox.
@@ -387,20 +434,27 @@ function ComboBoxDescription(props) {
 		const { ref: _ref, ...rest } = context.descriptionProps();
 		return rest;
 	};
-	return (() => {
-		var _el$8 = getNextElement(_tmpl$4);
-		spread(_el$8, mergeProps(domProps, cleanDescriptionProps, {
-			get ["class"]() {
+	var _el$10 = getNextElement(_tmpl$4);
+	spread(_el$10, [
+		domProps,
+		cleanDescriptionProps,
+		{
+			get slot() {
+				return local.slot ?? "description";
+			},
+			get "class"() {
 				return local.class;
 			},
 			get style() {
 				return local.style;
 			}
-		}), false, true);
-		insert(_el$8, () => local.children);
-		runHydrationEvents();
-		return _el$8;
-	})();
+		}
+	], true);
+	insert(_el$10, scope(() => {
+		return local.children;
+	}));
+	runHydrationEvents();
+	return _el$10;
 }
 /**
 * Error message element for a combobox.
@@ -418,20 +472,27 @@ function ComboBoxErrorMessage(props) {
 		const { ref: _ref, ...rest } = context.errorMessageProps();
 		return rest;
 	};
-	return (() => {
-		var _el$9 = getNextElement(_tmpl$4);
-		spread(_el$9, mergeProps(domProps, cleanErrorMessageProps, {
-			get ["class"]() {
+	var _el$11 = getNextElement(_tmpl$4);
+	spread(_el$11, [
+		domProps,
+		cleanErrorMessageProps,
+		{
+			get slot() {
+				return local.slot ?? "errorMessage";
+			},
+			get "class"() {
 				return local.class;
 			},
 			get style() {
 				return local.style;
 			}
-		}), false, true);
-		insert(_el$9, () => local.children);
-		runHydrationEvents();
-		return _el$9;
-	})();
+		}
+	], true);
+	insert(_el$11, scope(() => {
+		return local.children;
+	}));
+	runHydrationEvents();
+	return _el$11;
 }
 /**
 * The text input for a combobox.
@@ -466,45 +527,47 @@ function ComboBoxInput(props) {
 		defaultClassName: "solidaria-ComboBox-input"
 	}, renderValues);
 	const cleanInputProps = () => {
-		const { ref: _ref1, value: _value, ...rest } = context.inputProps();
+		const { ref: _ref1, value: _value, "data-open": _dataOpen, ...rest } = context.inputProps();
 		return rest;
 	};
 	const cleanHoverProps = () => {
 		const { ref: _ref2, ...rest } = hoverProps;
 		return rest;
 	};
-	return (() => {
-		var _el$0 = getNextElement(_tmpl$5);
-		use((el) => setInputRef(el), _el$0);
-		spread(_el$0, mergeProps(domProps, cleanInputProps, cleanHoverProps, {
+	var _el$12 = getNextElement(_tmpl$5);
+	ref(() => {
+		return (el) => setInputRef(el);
+	}, _el$12);
+	spread(_el$12, [
+		domProps,
+		cleanInputProps,
+		cleanHoverProps,
+		{
 			get value() {
 				return state.inputValue();
 			},
-			get ["class"]() {
+			get "class"() {
 				return renderProps.class();
 			},
 			get style() {
 				return renderProps.style();
 			},
-			get ["data-open"]() {
-				return isOpen() || void 0;
-			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
+			get "data-focused"() {
+				return dataAttr(isFocused());
 			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() || void 0;
+			get "data-focus-visible"() {
+				return dataAttr(isFocusVisible());
 			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
+			get "data-hovered"() {
+				return dataAttr(isHovered());
 			},
-			get ["data-disabled"]() {
-				return state.isDisabled || void 0;
+			get "data-disabled"() {
+				return dataAttr(state.isDisabled);
 			}
-		}), false, false);
-		runHydrationEvents();
-		return _el$0;
-	})();
+		}
+	], false);
+	runHydrationEvents();
+	return _el$12;
 }
 function ComboBoxValue(props) {
 	const context = useContext(ComboBoxContext);
@@ -537,25 +600,29 @@ function ComboBoxValue(props) {
 		selectedText: selectedText(),
 		state
 	}));
-	return (() => {
-		var _el$1 = getNextElement(_tmpl$4);
-		insert(_el$1, (() => {
-			var _c$ = memo(() => !!props.children);
-			return () => _c$() ? renderProps.renderChildren() : memo(() => !!isPlaceholder())() ? props.placeholder : textValue();
-		})());
-		effect((_p$) => {
-			var _v$3 = renderProps.class(), _v$4 = renderProps.style(), _v$5 = isPlaceholder() || void 0;
-			_v$3 !== _p$.e && className(_el$1, _p$.e = _v$3);
-			_p$.t = style(_el$1, _v$4, _p$.t);
-			_v$5 !== _p$.a && setAttribute(_el$1, "data-placeholder", _p$.a = _v$5);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
+	var _el$13 = getNextElement(_tmpl$4);
+	insert(_el$13, scope((() => {
+		var _c$ = memo(() => {
+			return !!props.children;
 		});
-		return _el$1;
-	})();
+		return () => {
+			return _c$() ? renderProps.renderChildren() : memo(() => {
+				return !!isPlaceholder();
+			})() ? props.placeholder : textValue();
+		};
+	})()));
+	effect(() => {
+		return {
+			e: readShallow(renderProps.class()),
+			t: readShallow(renderProps.style()),
+			a: dataAttr(isPlaceholder())
+		};
+	}, ({ e, t, a }, _p$) => {
+		className(_el$13, e, _p$?.e);
+		style(_el$13, t, _p$?.t);
+		a !== _p$?.a && setAttribute(_el$13, "data-placeholder", a);
+	});
+	return _el$13;
 }
 /**
 * The trigger button for a combobox.
@@ -570,15 +637,22 @@ function ComboBoxButton(props) {
 	]);
 	const context = useContext(ComboBoxContext);
 	if (!context) throw new Error("ComboBoxButton must be used within a ComboBox");
-	const { isOpen, isFocused, state, setButtonRef } = context;
+	const { isOpen, state, setButtonRef } = context;
 	const { isHovered, hoverProps } = createHover({ get isDisabled() {
 		return state.isDisabled;
 	} });
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const { isPressed, pressProps } = createPress({
+		get isDisabled() {
+			return state.isDisabled || state.isReadOnly;
+		},
+		preventFocusOnPress: true
+	});
 	const renderValues = createMemo(() => ({
 		isOpen: isOpen(),
 		isFocused: isFocused(),
 		isHovered: isHovered(),
-		isPressed: isOpen(),
+		isPressed: isPressed(),
 		isDisabled: state.isDisabled
 	}));
 	const renderProps = useRenderProps({
@@ -590,46 +664,57 @@ function ComboBoxButton(props) {
 		defaultClassName: "solidaria-ComboBox-button"
 	}, renderValues);
 	const cleanButtonProps = () => {
-		const { ref: _ref1, ...rest } = context.buttonProps();
+		const { ref: _ref1, "data-open": _dataOpen, ...rest } = context.buttonProps();
 		return rest;
 	};
 	const cleanHoverProps = () => {
 		const { ref: _ref2, ...rest } = hoverProps;
 		return rest;
 	};
-	return (() => {
-		var _el$10 = getNextElement(_tmpl$6);
-		use((el) => {
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
+	const cleanPressProps = () => {
+		const { ref: _ref4, ...rest } = pressProps;
+		return rest;
+	};
+	const mergedButtonProps = () => mergeProps$1(domProps, cleanButtonProps(), cleanHoverProps(), cleanFocusProps(), cleanPressProps());
+	var _el$14 = getNextElement(_tmpl$6);
+	ref(() => {
+		return (el) => {
 			setButtonRef(el);
-			assignRef(local.ref, el);
-		}, _el$10);
-		spread(_el$10, mergeProps(domProps, cleanButtonProps, cleanHoverProps, {
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get ["data-open"]() {
-				return isOpen() || void 0;
-			},
-			get ["data-pressed"]() {
-				return isOpen() || void 0;
-			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
-			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
-			},
-			get ["data-disabled"]() {
-				return state.isDisabled || void 0;
-			}
-		}), false, true);
-		insert(_el$10, () => renderProps.renderChildren());
-		runHydrationEvents();
-		return _el$10;
-	})();
+			assignRef$1(local.ref, el);
+		};
+	}, _el$14);
+	spread(_el$14, [mergedButtonProps, {
+		get "class"() {
+			return renderProps.class();
+		},
+		get style() {
+			return renderProps.style();
+		},
+		get "data-pressed"() {
+			return dataAttr(isPressed());
+		},
+		get "data-focused"() {
+			return dataAttr(isFocused());
+		},
+		get "data-focus-visible"() {
+			return dataAttr(isFocusVisible());
+		},
+		get "data-hovered"() {
+			return dataAttr(isHovered());
+		},
+		get "data-disabled"() {
+			return dataAttr(state.isDisabled);
+		}
+	}], true);
+	insert(_el$14, scope(() => {
+		return renderProps.renderChildren();
+	}));
+	runHydrationEvents();
+	return _el$14;
 }
 /**
 * The listbox popup for a combobox.
@@ -639,12 +724,17 @@ function ComboBoxListBox(props) {
 		"class",
 		"style",
 		"slot",
-		"children"
+		"children",
+		"renderEmptyState",
+		"onLoadMore",
+		"isLoading",
+		"renderLoadMore",
+		"loadMoreClass"
 	]);
 	const rawContext = useContext(ComboBoxContext);
 	if (!rawContext) throw new Error("ComboBoxListBox must be used within a ComboBox");
 	const context = rawContext;
-	const { state: comboBoxState, listState, isOpen, inputRef, buttonRef, setListBoxRef } = context;
+	const { state: comboBoxState, listState, isOpen, inputRef, buttonRef, setListBoxRef, setPopoverRef } = context;
 	const state = comboBoxState;
 	let listBoxRef;
 	createScrollIntoViewOnFocus({
@@ -660,14 +750,22 @@ function ComboBoxListBox(props) {
 			const button = buttonRef();
 			if (input?.contains(target)) return;
 			if (button?.contains(target)) return;
+			if (target.closest("[role=\"listbox\"]") || target.closest("[role=\"option\"]")) return;
 			if (isOpen()) state.close();
 		},
 		get isDisabled() {
 			return !isOpen();
 		}
 	});
-	const { listBoxProps } = createListBox(context.listBoxProps, listState);
-	const renderValues = createMemo(() => ({ isFocused: state.isFocused() }));
+	const parentCollectionRenderer = useCollectionRenderer();
+	const CollectionRoot = useCollectionRoot();
+	const isVirtualized = () => parentCollectionRenderer?.isVirtualized === true;
+	const { listBoxProps } = createListBox(() => ({
+		...context.listBoxProps(),
+		isVirtualized: parentCollectionRenderer?.isVirtualized
+	}), listState);
+	const { isFocused: isListBoxFocused, isFocusVisible: isListBoxFocusVisible, focusProps } = createFocusRing();
+	const renderValues = createMemo(() => ({ isFocused: isListBoxFocused() }));
 	const renderProps = useRenderProps({
 		class: local.class,
 		style: local.style,
@@ -681,6 +779,10 @@ function ComboBoxListBox(props) {
 		const { ref: _ref2, ...rest } = listBoxProps;
 		return rest;
 	};
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
 	const items = () => Array.from(state.collection());
 	const getNodeValue = (node) => {
 		if (node.value != null) return node.value;
@@ -689,71 +791,166 @@ function ComboBoxListBox(props) {
 			return (candidate.key ?? candidate.id ?? index) === node.key;
 		}) ?? null;
 	};
+	const [listBoxEl, setListBoxEl] = createSignal(null, { ownedWrite: true });
+	createEffect(() => listBoxEl(), (el) => {
+		if (!el) {
+			setPopoverRef(null);
+			return;
+		}
+		const overlay = el.closest("[data-placement]");
+		setPopoverRef(overlay instanceof HTMLElement ? overlay : el);
+	});
 	const setListBoxElement = (el) => {
 		listBoxRef = el;
 		setListBoxRef(el);
+		setListBoxEl(el);
+		onCleanup(() => {
+			listBoxRef = void 0;
+			setListBoxRef(null);
+			setListBoxEl(null);
+			setPopoverRef(null);
+		});
 	};
-	onCleanup(() => {
-		setListBoxRef(null);
-	});
 	return createComponent(Show, {
 		get when() {
 			return isOpen();
 		},
 		get children() {
-			var _el$11 = getNextElement(_tmpl$7);
-			use(setListBoxElement, _el$11);
-			spread(_el$11, mergeProps(domProps, cleanContextProps, cleanListBoxProps, {
-				get ["class"]() {
-					return renderProps.class();
-				},
-				get style() {
-					return renderProps.style();
-				},
-				get ["data-focused"]() {
-					return state.isFocused() || void 0;
+			var _el$15 = getNextElement(_tmpl$7);
+			var _el$16 = _el$15.firstChild;
+			var [_el$17, _el$18] = getNextMarker(_el$16.nextSibling);
+			var _el$19 = _el$17.nextSibling;
+			var [_el$20, _el$21] = getNextMarker(_el$19.nextSibling);
+			var _el$22 = _el$20.nextSibling;
+			var [_el$23, _el$24] = getNextMarker(_el$22.nextSibling);
+			ref(() => {
+				return setListBoxElement;
+			}, _el$15);
+			spread(_el$15, [
+				domProps,
+				cleanContextProps,
+				cleanListBoxProps,
+				cleanFocusProps,
+				{
+					get "class"() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					},
+					get "data-focused"() {
+						return dataAttr(isListBoxFocused());
+					},
+					get "data-focus-visible"() {
+						return dataAttr(isListBoxFocusVisible());
+					},
+					get "data-empty"() {
+						return dataAttr(state.collection().size === 0);
+					},
+					"data-layout": "stack",
+					"data-orientation": "vertical"
 				}
-			}), false, true);
-			insert(_el$11, createComponent(Show, {
-				get when() {
-					return local.children;
+			], true);
+			insert(_el$15, createComponent(CollectionRoot, {
+				get collection() {
+					return items();
 				},
-				get fallback() {
-					return createComponent(For, {
-						get each() {
-							return items();
+				scrollRef: () => listBoxEl(),
+				get children() {
+					return createComponent(Show, {
+						get when() {
+							return local.children;
 						},
-						children: (node) => createComponent(ComboBoxOption, {
-							get id() {
-								return node.key;
-							},
-							get children() {
-								return node.textValue;
-							}
-						})
+						get fallback() {
+							return createComponent(For, {
+								get each() {
+									return items();
+								},
+								children: (node, index) => {
+									const item = createComponent(ComboBoxItem, {
+										get id() {
+											return node.key;
+										},
+										get children() {
+											return node.textValue;
+										}
+									});
+									return isVirtualized() ? createComponent(VirtualizerItem, {
+										get index() {
+											return index();
+										},
+										children: item
+									}) : item;
+								}
+							});
+						},
+						get children() {
+							return createComponent(For, {
+								get each() {
+									return items();
+								},
+								children: (node, index) => {
+									const value = getNodeValue(node);
+									const child = value != null ? local.children(value) : null;
+									return isVirtualized() ? createComponent(VirtualizerItem, {
+										get index() {
+											return index();
+										},
+										children: child
+									}) : child;
+								}
+							});
+						}
 					});
+				}
+			}), _el$17, _el$18);
+			insert(_el$15, scope((() => {
+				var _c$2 = memo(() => {
+					return !!(state.collection().size === 0 && local.renderEmptyState);
+				});
+				return () => {
+					return _c$2() ? (() => {
+						var _el$25 = getNextElement(_tmpl$8);
+						insert(_el$25, scope(() => {
+							return local.renderEmptyState();
+						}));
+						return _el$25;
+					})() : null;
+				};
+			})()), _el$20, _el$21);
+			insert(_el$15, createComponent(Show, {
+				get when() {
+					return local.onLoadMore;
 				},
 				get children() {
-					return createComponent(For, {
-						get each() {
-							return items();
+					return createComponent(ListBoxLoadMoreItem, {
+						get onLoadMore() {
+							return local.onLoadMore;
+						},
+						get isLoading() {
+							return local.isLoading;
 						},
-						children: (node) => {
-							const value = getNodeValue(node);
-							return value != null ? local.children(value) : null;
+						get "class"() {
+							return local.loadMoreClass;
+						},
+						get children() {
+							return local.renderLoadMore?.();
 						}
 					});
 				}
-			}));
+			}), _el$23, _el$24);
 			runHydrationEvents();
-			return _el$11;
+			return _el$15;
 		}
 	});
 }
 /**
-* An option in a combobox listbox.
+* An item in a combobox listbox.
+*
+* Local addition: RAC ComboBox uses {@link ListBoxItem}. Prefer that when
+* composing the headless ComboBox. This wrapper stays for existing call sites.
 */
-function ComboBoxOption(props) {
+function ComboBoxItem(props) {
 	const [local, ariaProps] = splitProps(props, [
 		"class",
 		"style",
@@ -766,20 +963,24 @@ function ComboBoxOption(props) {
 	]);
 	const stateContext = useContext(ComboBoxStateContext);
 	const comboBoxContext = useContext(ComboBoxContext);
-	if (!stateContext || !comboBoxContext) throw new Error("ComboBoxOption must be used within a ComboBox");
+	if (!stateContext || !comboBoxContext) throw new Error("ComboBoxItem must be used within a ComboBox");
 	const state = stateContext;
 	const listState = comboBoxContext.listState;
-	const [ref, setRef] = createSignal(null);
+	const [ref$1, setRef] = createSignal(null);
 	const optionId = () => {
 		const listBoxId = getComboBoxData(state)?.listBoxId;
 		return listBoxId ? `${listBoxId}-option-${local.id}` : String(local.id);
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const key = local.id;
 		comboBoxContext?.registerOptionAction(key, local.onAction);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			comboBoxContext?.registerOptionAction(key, void 0);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const optionAria = createOption({
 		key: local.id,
@@ -808,7 +1009,7 @@ function ComboBoxOption(props) {
 		get onAction() {
 			return local.onAction;
 		}
-	}, listState, () => ref());
+	}, listState, () => ref$1());
 	const isOptionFocusVisible = () => optionAria.isFocused() && isFocusVisible();
 	const renderValues = createMemo(() => ({
 		isSelected: optionAria.isSelected(),
@@ -831,45 +1032,98 @@ function ComboBoxOption(props) {
 		const { ref: _ref1, ...rest } = optionAria.optionProps;
 		return rest;
 	};
-	return createComponent(SelectionIndicatorContext.Provider, {
+	const optionTextSlots = { slots: {
+		get [DEFAULT_SLOT]() {
+			return optionAria.labelProps;
+		},
+		get label() {
+			return optionAria.labelProps;
+		},
+		get description() {
+			return optionAria.descriptionProps;
+		}
+	} };
+	createRenderEffect(() => ({
+		el: ref$1(),
+		labelId: optionAria.labelProps.id,
+		descriptionId: optionAria.descriptionProps.id
+	}), ({ el, labelId, descriptionId }) => {
+		if (!el) return;
+		const stamp = () => {
+			if (labelId) {
+				const label = el.querySelector("[slot='label']");
+				if (label && label.id !== labelId) label.id = labelId;
+			}
+			if (descriptionId) {
+				const description = el.querySelector("[slot='description']");
+				if (description && description.id !== descriptionId) description.id = descriptionId;
+			}
+		};
+		stamp();
+		const observer = new MutationObserver(stamp);
+		observer.observe(el, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	});
+	const selectionMode = () => listState.selectionMode();
+	return createComponent(SelectionIndicatorContext, {
 		get value() {
 			return selectionIndicatorContext();
 		},
 		get children() {
-			var _el$12 = getNextElement(_tmpl$7);
-			use((el) => {
-				setRef(el);
-				assignRef(local.ref, el);
-			}, _el$12);
-			spread(_el$12, mergeProps(cleanOptionProps, {
-				get ["class"]() {
+			var _el$26 = getNextElement(_tmpl$9);
+			ref(() => {
+				return (el) => {
+					setRef(el);
+					assignRef$1(local.ref, el);
+				};
+			}, _el$26);
+			spread(_el$26, [cleanOptionProps, {
+				get "class"() {
 					return renderProps.class();
 				},
 				get style() {
 					return renderProps.style();
 				},
-				get ["data-selected"]() {
-					return optionAria.isSelected() || void 0;
+				get "data-selected"() {
+					return dataAttr(optionAria.isSelected());
+				},
+				get "data-focused"() {
+					return dataAttr(optionAria.isFocused());
 				},
-				get ["data-focused"]() {
-					return optionAria.isFocused() || void 0;
+				get "data-focus-visible"() {
+					return dataAttr(isOptionFocusVisible());
 				},
-				get ["data-focus-visible"]() {
-					return isOptionFocusVisible() || void 0;
+				get "data-pressed"() {
+					return dataAttr(optionAria.isPressed());
 				},
-				get ["data-pressed"]() {
-					return optionAria.isPressed() || void 0;
+				get "data-hovered"() {
+					return dataAttr(optionAria.isHovered());
 				},
-				get ["data-hovered"]() {
-					return optionAria.isHovered() || void 0;
+				get "data-disabled"() {
+					return dataAttr(optionAria.isDisabled());
 				},
-				get ["data-disabled"]() {
-					return optionAria.isDisabled() || void 0;
+				get "data-selection-mode"() {
+					return selectionMode() === "none" ? void 0 : selectionMode();
+				}
+			}], true);
+			insert(_el$26, createComponent(Provider, {
+				values: [[TextContext, optionTextSlots]],
+				get children() {
+					return createComponent(OptionContent, {
+						get render() {
+							return renderProps.renderChildrenStable;
+						},
+						get labelProps() {
+							return optionAria.labelProps;
+						}
+					});
 				}
-			}), false, true);
-			insert(_el$12, () => renderProps.renderChildren());
+			}));
 			runHydrationEvents();
-			return _el$12;
+			return _el$26;
 		}
 	});
 }
@@ -889,23 +1143,23 @@ function ComboBoxTagGroup(props) {
 			return items().length > 0;
 		},
 		get children() {
-			var _el$13 = getNextElement(_tmpl$8);
-			insert(_el$13, createComponent(For, {
+			var _el$27 = getNextElement(_tmpl$10);
+			insert(_el$27, createComponent(For, {
 				get each() {
 					return items();
 				},
 				children: (item) => props.children(item)
 			}));
-			effect((_p$) => {
-				var _v$6 = props.class ?? "solidaria-ComboBox-tagGroup", _v$7 = props.style;
-				_v$6 !== _p$.e && className(_el$13, _p$.e = _v$6);
-				_p$.t = style(_el$13, _v$7, _p$.t);
-				return _p$;
-			}, {
-				e: void 0,
-				t: void 0
+			effect(() => {
+				return {
+					e: readShallow(props.class ?? "solidaria-ComboBox-tagGroup"),
+					t: readShallow(props.style)
+				};
+			}, ({ e, t }, _p$) => {
+				className(_el$27, e, _p$?.e);
+				style(_el$27, t, _p$?.t);
 			});
-			return _el$13;
+			return _el$27;
 		}
 	});
 }
@@ -920,31 +1174,38 @@ function ComboBoxTag(props) {
 		if (props.onRemove) props.onRemove();
 		else state.removeSelectedKey(props.item.key);
 	};
-	return (() => {
-		var _el$14 = getNextElement(_tmpl$9), _el$16 = _el$14.firstChild, [_el$17, _co$3] = getNextMarker(_el$16.nextSibling), _el$15 = _el$17.nextSibling;
-		insert(_el$14, () => props.children ?? props.item.label, _el$17, _co$3);
-		_el$15.$$click = handleRemove;
-		effect((_p$) => {
-			var _v$8 = props.class ?? "solidaria-ComboBox-tag", _v$9 = props.style, _v$0 = String(props.item.key), _v$1 = `Remove ${props.item.label}`;
-			_v$8 !== _p$.e && className(_el$14, _p$.e = _v$8);
-			_p$.t = style(_el$14, _v$9, _p$.t);
-			_v$0 !== _p$.a && setAttribute(_el$14, "data-key", _p$.a = _v$0);
-			_v$1 !== _p$.o && setAttribute(_el$15, "aria-label", _p$.o = _v$1);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0,
-			o: void 0
-		});
-		runHydrationEvents();
-		return _el$14;
-	})();
+	var _el$28 = getNextElement(_tmpl$11);
+	var _el$29 = _el$28.firstChild;
+	var [_el$30, _el$31] = getNextMarker(_el$29.nextSibling);
+	var _el$32 = _el$30.nextSibling;
+	insert(_el$28, () => {
+		return props.children ?? props.item.label;
+	}, _el$30, _el$31);
+	_el$32._$$click = handleRemove;
+	effect(() => {
+		return {
+			e: readShallow(props.class ?? "solidaria-ComboBox-tag"),
+			t: readShallow(props.style),
+			a: String(props.item.key),
+			o: `Remove ${props.item.label}`
+		};
+	}, ({ e, t, a, o }, _p$) => {
+		className(_el$28, e, _p$?.e);
+		style(_el$28, t, _p$?.t);
+		a !== _p$?.a && setAttribute(_el$28, "data-key", a);
+		o !== _p$?.o && setAttribute(_el$32, "aria-label", o);
+	});
+	runHydrationEvents();
+	return _el$28;
 }
 ComboBox.Input = ComboBoxInput;
 ComboBox.Button = ComboBoxButton;
 ComboBox.ListBox = ComboBoxListBox;
-ComboBox.Option = ComboBoxOption;
+/**
+* @deprecated Use {@link ComboBoxItem}. Local addition — RAC ComboBox uses ListBoxItem. Removed in a future minor.
+*/
+const ComboBoxOption = ComboBoxItem;
+ComboBox.Option = ComboBoxItem;
 ComboBox.Label = ComboBoxLabel;
 ComboBox.Description = ComboBoxDescription;
 ComboBox.ErrorMessage = ComboBoxErrorMessage;
@@ -954,7 +1215,7 @@ function createComboBoxListStateAdapter(state) {
 	const selectedKeys = createMemo(() => {
 		if (state.selectionMode() === "multiple") return state.selectedKeys();
 		const key = state.selectedKey();
-		return key != null ? new Set([key]) : /* @__PURE__ */ new Set();
+		return key != null ? /* @__PURE__ */ new Set([key]) : /* @__PURE__ */ new Set();
 	});
 	const disabledKeys = createMemo(() => {
 		const keys = /* @__PURE__ */ new Set();
@@ -983,6 +1244,10 @@ function createComboBoxListStateAdapter(state) {
 		toggleSelection: (key) => state.select(key),
 		replaceSelection: (key) => state.select(key),
 		setSelectedKeys: (keys) => {
+			if (state.selectionMode() === "multiple") {
+				state.setSelectedKeys(new Set(keys));
+				return;
+			}
 			const first = keys[Symbol.iterator]().next().value;
 			state.setSelectedKey(first ?? null);
 		},
@@ -995,6 +1260,6 @@ function createComboBoxListStateAdapter(state) {
 }
 delegateEvents(["click"]);
 //#endregion
-export { ComboBox, ComboBoxButton, ComboBoxContext, ComboBoxDescription, ComboBoxErrorMessage, ComboBoxInput, ComboBoxLabel, ComboBoxListBox, ComboBoxOption, ComboBoxStateContext, ComboBoxTag, ComboBoxTagGroup, ComboBoxValue, ComboBoxValueContext, defaultContainsFilter };
+export { ComboBox, ComboBoxButton, ComboBoxContext, ComboBoxDescription, ComboBoxErrorMessage, ComboBoxInput, ComboBoxItem, ComboBoxLabel, ComboBoxListBox, ComboBoxOption, ComboBoxStateContext, ComboBoxTag, ComboBoxTagGroup, ComboBoxValue, ComboBoxValueContext, defaultContainsFilter };
 
 //# sourceMappingURL=ComboBox.js.map