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

package/dist/ListBox.js

@@ -1,23 +1,44 @@
-import { 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/ListBox.tsx
+import { DEFAULT_SLOT, OptionContent, Provider, dataAttr, filterDOMProps, useRenderProps } from "./utils.js";
+import { TextContext } from "./Text.js";
 import { SharedElementTransition } from "./SharedElementTransition.js";
 import { SelectionIndicatorContext } from "./SelectionIndicator.js";
-import { CollectionRendererContext, Group, Header, Section, flattenCollectionEntries, isCollectionSection, useCollectionRenderer } from "./Collection.js";
-import { r as useVirtualizerContext } from "./Virtualizer2.js";
+import { CollectionRendererContext, Group, Header, Section, flattenCollectionEntries, isCollectionSection, useCollectionRenderer, useCollectionRoot } from "./Collection.js";
+import { i as VirtualizerItem, o as useVirtualizerContext, t as PersistedVirtualItem } from "./Virtualizer2.js";
 import { useAutocompleteCollection } from "./Autocomplete.js";
-import { DropIndicatorContext, getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, style, template, use } from "solid-js/web";
-import { For, Show, createContext, createEffect, createMemo, createSignal, on, onCleanup, splitProps, useContext } from "solid-js";
-import { CLEAR_FOCUS_EVENT, FOCUS_EVENT, createDragSession, createFocusRing, createListBox, createOption, createScrollIntoViewOnFocus, createStringFormatter, dndIntlStrings, getGlobalDraggingCollectionRef, getGlobalDraggingKeys, mergeProps as mergeProps$2, moveVirtualFocus, registerDropItem, useLocale } from "@proyecto-viviana/solidaria";
+import { DropIndicatorContext, getNormalizedDropTargetKey, indexesOutsideRange, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { For, Show, createContext, createEffect, createMemo, createRenderEffect, createSignal, createTrackedEffect, untrack, useContext } from "solid-js";
+import { CLEAR_FOCUS_EVENT, FOCUS_EVENT, createFocusRing, createListBox, createOption, createScrollIntoViewOnFocus, createStringFormatter, dndIntlStrings, mergeProps as mergeProps$1, moveVirtualFocus, useLocale } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createFilteredListState, createListState } from "@proyecto-viviana/solid-stately";
 //#region src/ListBox.tsx
 /**
 * ListBox component for solidaria-components
 *
 * A pre-wired headless listbox that combines state + aria hooks.
-* Port of react-aria-components/src/ListBox.tsx
+* Solid adaptation of the pinned ListBox component.
 */
-var _tmpl$ = /*#__PURE__*/ template(`<div role=option class=solidaria-DropIndicator tabindex=-1>`), _tmpl$2 = /*#__PURE__*/ template(`<span>`), _tmpl$3 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<div role=option data-empty-state style=display:contents>`), _tmpl$5 = /*#__PURE__*/ template(`<div role=group>`), _tmpl$6 = /*#__PURE__*/ template(`<div role=presentation data-section-wrapper>`), _tmpl$7 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=top>`), _tmpl$8 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=bottom>`), _tmpl$9 = /*#__PURE__*/ template(`<div>`), _tmpl$0 = /*#__PURE__*/ template(`<div inert style=position:relative;width:0;height:0;overflow:hidden><div style=position:absolute;height:1px;width:1px>`), _tmpl$1 = /*#__PURE__*/ template(`<div role=option tabindex=0>`);
-function assignRef(ref, el) {
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><!$><!/><!$><!/>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div role=option data-empty-state style=display:contents>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div role=group>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div role=presentation data-section-wrapper>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div inert style=position:relative;width:0;height:0;overflow:hidden><div data-testid=loadMoreSentinel style=position:absolute;height:1px;width:1px>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div role=option tabindex=-1 data-loading>`);
+function assignRef$1(ref, el) {
 	if (!ref) return;
 	if (typeof ref === "function") ref(el);
 	else ref.current = el;
@@ -25,12 +46,141 @@ function assignRef(ref, el) {
 const ListBoxContext = createContext(null);
 const ListBoxStateContext = createContext(null);
 const ListStateContext = ListBoxStateContext;
+function dropIndicatorLabel(target, collection, format) {
+	const getText = (key) => {
+		if (key == null) return "";
+		return collection.getTextValue(key) ?? collection.getItem(key)?.textValue ?? "";
+	};
+	if (target.dropPosition === "on") return format("dropOnItem", { itemText: getText(target.key) });
+	let before;
+	let after;
+	if (target.dropPosition === "before") {
+		const prevKey = collection.getKeyBefore(target.key);
+		const prevNode = prevKey != null ? collection.getItem(prevKey) : null;
+		before = prevNode?.type === "item" ? prevNode.key : null;
+	} else before = target.key;
+	if (target.dropPosition === "after") {
+		const nextKey = collection.getKeyAfter(target.key);
+		const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+		after = nextNode?.type === "item" ? nextNode.key : null;
+	} else after = target.key;
+	if (before != null && after != null) return format("insertBetween", {
+		beforeItemText: getText(before),
+		afterItemText: getText(after)
+	});
+	if (before != null) return format("insertAfter", { itemText: getText(before) });
+	if (after != null) return format("insertBefore", { itemText: getText(after) });
+	return "";
+}
+/**
+* RAC `ListBox.tsx:662-717` `ListBoxDropIndicatorWrapper` — a stable module-level
+* component so Solid does not remount (and unregister) the indicator on every
+* parent ListBox re-render. `useDropIndicator` owns register + focus
+* (`useDroppableItem.ts:49-88`).
+*/
+function ListBoxDropIndicatorWrapper(props) {
+	const listContext = useContext(ListBoxContext);
+	const listState = useContext(ListBoxStateContext);
+	const [el, setEl] = createSignal(null);
+	const dndFormatter = createStringFormatter(dndIntlStrings);
+	const dropState = listContext?.dropState;
+	const indicator = listContext?.dragAndDropHooks?.useDropIndicator?.({ target: props.target }, dropState, el);
+	return createComponent(Show, {
+		get when() {
+			return indicator && !indicator.isHidden;
+		},
+		get children() {
+			var _el$ = getNextElement(_tmpl$);
+			ref(() => {
+				return setEl;
+			}, _el$);
+			spread(_el$, [() => {
+				return indicator?.dropIndicatorProps;
+			}, {
+				role: "option",
+				class: "solidaria-DropIndicator",
+				get "aria-label"() {
+					return listState ? dropIndicatorLabel(props.target, listState.collection(), (key, args) => dndFormatter().format(key, args)) : void 0;
+				},
+				get "data-drop-target"() {
+					return dataAttr(indicator?.isDropTarget);
+				}
+			}], false);
+			runHydrationEvents();
+			return _el$;
+		}
+	});
+}
+/**
+* Owns only the collection item. Drop-indicator siblings live in their own
+* components so their tracking cannot remount this node.
+*
+* Comparison hyperscript children (`hc` thunks) are one-shot: if the fragment
+* insert that owns the option also tracks indicator `Show`, the effect
+* re-runs, disposes the option, and Chromium maps focus to
+* `listbox:Permissions`. RAC `ListBoxItem` stays mounted while Collection
+* inserts indicator siblings (`react-aria-components/src/ListBox.tsx`).
+*/
+function ListBoxRenderedItem(props) {
+	return untrack(() => {
+		const rendered = props.renderItem(props.item);
+		return typeof rendered === "function" ? rendered() : rendered;
+	});
+}
+function ListBoxDropIndicatorSlot(props) {
+	const itemIndex = () => typeof props.itemIndex === "function" ? props.itemIndex() : props.itemIndex;
+	return memo(() => {
+		return props.renderDropIndicator?.(itemIndex(), props.position);
+	});
+}
+/**
+* Stable per-item row so drop-indicator mount does not remount the option.
+*/
+function ListBoxItemWithDropIndicators(props) {
+	const isLast = () => typeof props.isLastInLevel === "function" ? props.isLastInLevel() : props.isLastInLevel;
+	return [
+		createComponent(ListBoxDropIndicatorSlot, {
+			get itemIndex() {
+				return props.itemIndex;
+			},
+			position: "before",
+			get renderDropIndicator() {
+				return props.renderDropIndicator;
+			}
+		}),
+		createComponent(ListBoxRenderedItem, {
+			get item() {
+				return props.item;
+			},
+			get renderItem() {
+				return props.renderItem;
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return isLast();
+			},
+			get children() {
+				return createComponent(ListBoxDropIndicatorSlot, {
+					get itemIndex() {
+						return props.itemIndex;
+					},
+					position: "after",
+					get renderDropIndicator() {
+						return props.renderDropIndicator;
+					}
+				});
+			}
+		})
+	];
+}
 /**
 * A listbox displays a list of options and allows a user to select one or more of them.
 */
 function ListBox(props) {
-	const contextSlotProps = useContext(ListBoxContext)?.slots?.[props.slot ?? "default"];
-	const [local, stateProps, ariaProps] = splitProps(contextSlotProps ? mergeProps$2(contextSlotProps, props) : props, [
+	const contextSlotProps = useContext(ListBoxContext)?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
+	const mergedListBoxProps = contextSlotProps ? mergeProps$1(contextSlotProps, props) : props;
+	const [local, stateProps, ariaProps] = splitProps(mergedListBoxProps, [
 		"children",
 		"class",
 		"style",
@@ -105,8 +255,7 @@ function ListBox(props) {
 	};
 	const locale = useLocale();
 	const parentCollectionRenderer = useCollectionRenderer();
-	const listBoxAria = createListBox({
-		...ariaProps,
+	const listBoxAria = createListBox(mergeProps$1(ariaProps, {
 		get isVirtualized() {
 			return parentCollectionRenderer?.isVirtualized ?? ariaProps.isVirtualized;
 		},
@@ -131,10 +280,10 @@ function ListBox(props) {
 		get direction() {
 			return locale().direction;
 		}
-	}, state, () => listRef());
+	}), state, () => listRef());
 	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 	const renderValues = createMemo(() => ({
-		isFocused: state.isFocused() || isFocused(),
+		isFocused: isFocused(),
 		isFocusVisible: isFocusVisible(),
 		isDisabled: resolveDisabled(),
 		isEmpty: state.collection().size === 0
@@ -167,7 +316,8 @@ function ListBox(props) {
 	});
 	if (autocompleteCtx) {
 		let shouldVirtualFocusFirst = false;
-		createEffect(() => {
+		createTrackedEffect(() => {
+			const _s2Cleanups = [];
 			const list = listRef();
 			if (!list) return;
 			const onFocusEvent = (e) => {
@@ -183,12 +333,15 @@ function ListBox(props) {
 			};
 			list.addEventListener(FOCUS_EVENT, onFocusEvent);
 			list.addEventListener(CLEAR_FOCUS_EVENT, onClearFocusEvent);
-			onCleanup(() => {
+			_s2Cleanups.push(() => {
 				list.removeEventListener(FOCUS_EVENT, onFocusEvent);
 				list.removeEventListener(CLEAR_FOCUS_EVENT, onClearFocusEvent);
 			});
+			return () => {
+				for (const c of _s2Cleanups) c();
+			};
 		});
-		createEffect(on(() => [state.collection().getFirstKey?.() ?? null, state.collection().size], ([firstKey, size]) => {
+		createEffect(() => [state.collection().getFirstKey?.() ?? null, state.collection().size], ([firstKey, size]) => {
 			if (!shouldVirtualFocusFirst) return;
 			if (firstKey == null) {
 				const list = listRef();
@@ -198,18 +351,27 @@ function ListBox(props) {
 				state.setFocusedKey(firstKey);
 				shouldVirtualFocusFirst = false;
 			}
-		}, { defer: true }));
+		}, { defer: true });
 		createEffect(() => {
-			const key = state.focusedKey();
-			const list = listRef();
-			if (!list || !state.isFocused()) return;
+			return {
+				key: state.focusedKey(),
+				list: listRef(),
+				focused: state.isFocused()
+			};
+		}, ({ key, list, focused }) => {
+			if (!list || !focused) return;
 			if (key == null) return;
 			const el = list.ownerDocument.getElementById(String(key));
 			if (el) moveVirtualFocus(el);
 		});
 	}
-	const isEmpty = () => stateProps.items.length === 0;
 	const getItemNodes = createMemo(() => Array.from(state.collection()).filter((node) => node.type === "item"));
+	const collectionItems = createMemo(() => getItemNodes().map((node) => node.value));
+	const isEmpty = () => state.collection().size === 0;
+	const isLastDropItem = (itemIndex) => {
+		const i = typeof itemIndex === "function" ? itemIndex() : itemIndex;
+		return getItemNodes().length > 0 && i === getItemNodes().length - 1;
+	};
 	const getDropTargetByIndex = (index, position) => {
 		const node = getItemNodes()[index];
 		if (!node) return null;
@@ -223,37 +385,27 @@ function ListBox(props) {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
 	});
-	const dropState = createMemo(() => {
-		if (!hasDroppableDnd()) return void 0;
-		return local.dragAndDropHooks?.useDroppableCollectionState?.({});
-	});
-	const hasDraggableDnd = createMemo(() => {
+	const dropStateValue = hasDroppableDnd() ? local.dragAndDropHooks?.useDroppableCollectionState?.({ get collection() {
+		return state.collection();
+	} }) : void 0;
+	const dropState = () => dropStateValue;
+	const dragStateValue = createMemo(() => {
 		const hooks = local.dragAndDropHooks;
 		return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
-	});
-	const dragState = createMemo(() => {
-		if (!hasDraggableDnd()) return void 0;
-		return local.dragAndDropHooks?.useDraggableCollectionState?.({ items: flatItems() });
-	});
-	createEffect(() => {
-		if (!hasDraggableDnd()) return;
-		const hooks = local.dragAndDropHooks;
-		const activeDragState = dragState();
-		if (!hooks?.useDraggableCollection || !activeDragState) return;
-		hooks.useDraggableCollection({}, activeDragState, () => listRef());
-	});
-	const droppableCollection = createMemo(() => {
+	})() ? local.dragAndDropHooks?.useDraggableCollectionState?.({
+		items: flatItems(),
+		collection: state.collection(),
+		selectedKeys: state.selectionManager.selectedKeys,
+		isSelected: (key) => state.selectionManager.isSelected(key)
+	}) : void 0;
+	const dragState = () => dragStateValue;
+	if (local.dragAndDropHooks?.useDraggableCollection && dragStateValue) local.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => listRef());
+	const droppableCollectionValue = (() => {
 		if (!hasDroppableDnd()) return void 0;
 		const hooks = local.dragAndDropHooks;
-		const activeDropState = dropState();
+		const activeDropState = dropStateValue;
 		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
-		const resolveDirection = () => {
-			const el = listRef();
-			if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
-				if (window.getComputedStyle(el).direction === "rtl") return "rtl";
-			}
-			return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
-		};
+		const resolveDirection = () => locale().direction;
 		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection(), () => listRef(), {
 			layout: "stack",
 			orientation: "vertical",
@@ -270,12 +422,18 @@ function ListBox(props) {
 				getKeyPageBelow: (key) => state.collection().getKeyAfter(key),
 				getKeyPageAbove: (key) => state.collection().getKeyBefore(key)
 			},
-			collection: state.collection(),
-			selectedKeys: state.selectionManager.selectedKeys,
+			get collection() {
+				return state.collection();
+			},
+			get selectedKeys() {
+				return state.selectionManager.selectedKeys;
+			},
 			setSelectedKeys: (keys) => state.selectionManager.setSelectedKeys(keys),
-			setFocusedKey: (key) => state.setFocusedKey(key)
+			setFocusedKey: (key) => state.setFocusedKey(key),
+			setFocused: (isFocused) => state.setFocused(isFocused)
 		}, activeDropState, () => listRef());
-	});
+	})();
+	const droppableCollection = () => droppableCollectionValue;
 	const isRootDropTarget = createMemo(() => {
 		return Boolean(dropState()?.target?.type === "root");
 	});
@@ -285,115 +443,32 @@ function ListBox(props) {
 		if (!target || target.type !== "item") return void 0;
 		return dndRenderDropIndicator()?.(target);
 	};
-	const dndFormatter = createStringFormatter(dndIntlStrings);
-	const dragSession = createDragSession();
-	const dropIndicatorTargetsEqual = (a, b) => !!a && a.type === "item" && a.key === b.key && a.dropPosition === b.dropPosition;
-	const dropIndicatorLabel = (target) => {
-		const collection = state.collection();
-		const getText = (key) => {
-			if (key == null) return "";
-			return collection.getTextValue(key) ?? collection.getItem(key)?.textValue ?? "";
-		};
-		if (target.dropPosition === "on") return dndFormatter().format("dropOnItem", { itemText: getText(target.key) });
-		let before;
-		let after;
-		if (target.dropPosition === "before") {
-			const prevKey = collection.getKeyBefore(target.key);
-			const prevNode = prevKey != null ? collection.getItem(prevKey) : null;
-			before = prevNode?.type === "item" ? prevNode.key : null;
-		} else before = target.key;
-		if (target.dropPosition === "after") {
-			const nextKey = collection.getKeyAfter(target.key);
-			const nextNode = nextKey != null ? collection.getItem(nextKey) : null;
-			after = nextNode?.type === "item" ? nextNode.key : null;
-		} else after = target.key;
-		if (before != null && after != null) return dndFormatter().format("insertBetween", {
-			beforeItemText: getText(before),
-			afterItemText: getText(after)
-		});
-		if (before != null) return dndFormatter().format("insertAfter", { itemText: getText(before) });
-		if (after != null) return dndFormatter().format("insertBefore", { itemText: getText(after) });
-		return "";
-	};
-	const wrapDropTypes = (types) => ({ has: (type) => {
-		if (typeof type === "string") return types.has(type);
-		if (Array.isArray(type)) return type.some((t) => typeof t === "string" && types.has(t));
-		return false;
-	} });
-	const ListBoxDropIndicator = (props) => {
-		const [indicatorRef, setIndicatorRef] = createSignal(null);
-		const isDropTarget = createMemo(() => dropIndicatorTargetsEqual(dropState()?.target, props.target));
-		const ariaHidden = createMemo(() => !dragSession() ? "true" : isDropTarget() ? void 0 : "true");
-		const isHidden = createMemo(() => !isDropTarget() && !!ariaHidden());
-		createEffect(() => {
-			const el = indicatorRef();
-			if (!el) return;
-			onCleanup(registerDropItem({
-				element: el,
-				target: props.target,
-				getDropOperation: (types, allowedOperations) => {
-					const st = dropState();
-					if (!st) return "cancel";
-					const isInternal = getGlobalDraggingCollectionRef() === listRef();
-					return st.getDropOperation(props.target, wrapDropTypes(types), allowedOperations, isInternal, getGlobalDraggingKeys());
-				}
-			}));
-			if (dragSession() && isDropTarget()) requestAnimationFrame(() => {
-				if (dragSession() && isDropTarget() && indicatorRef() === el) el.focus();
-			});
-		});
-		return createComponent(Show, {
-			get when() {
-				return !isHidden();
-			},
-			get children() {
-				var _el$ = getNextElement(_tmpl$);
-				use((el) => {
-					setIndicatorRef(el);
-					onCleanup(() => setIndicatorRef(null));
-				}, _el$);
-				effect((_p$) => {
-					var _v$ = dndFormatter().format("dropIndicator"), _v$2 = dropIndicatorLabel(props.target), _v$3 = ariaHidden(), _v$4 = isDropTarget() || void 0;
-					_v$ !== _p$.e && setAttribute(_el$, "aria-roledescription", _p$.e = _v$);
-					_v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
-					_v$3 !== _p$.a && setAttribute(_el$, "aria-hidden", _p$.a = _v$3);
-					_v$4 !== _p$.o && setAttribute(_el$, "data-drop-target", _p$.o = _v$4);
-					return _p$;
-				}, {
-					e: void 0,
-					t: void 0,
-					a: void 0,
-					o: void 0
-				});
-				return _el$;
-			}
-		});
-	};
-	const dropIndicatorContextValue = { render: (p) => createComponent(ListBoxDropIndicator, { get target() {
-		return p.target;
-	} }) };
+	const renderItemDropIndicator = (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position);
+	const dropIndicatorContextValue = { render: (p) => createComponent(ListBoxDropIndicatorWrapper, p) };
 	const virtualizer = useVirtualizerContext();
 	const persistedKeys = useDndPersistedKeys({ focusedKey: state.focusedKey }, local.dragAndDropHooks, dropState(), state.collection());
 	const virtualRange = createMemo(() => {
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized || hasSections()) return null;
-		const baseRange = virtualizer.getVisibleRange(stateProps.items.length);
+		const itemCount = getItemNodes().length;
+		const baseRange = virtualizer.getVisibleRange(itemCount);
 		const itemNodes = getItemNodes();
-		const persistedIndexes = Array.from(persistedKeys()).map((key) => itemNodes.findIndex((node) => node.key === key)).filter((index) => index >= 0);
 		const dropTarget = dropState()?.target;
 		const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, state.collection());
-		const focusedKey = state.focusedKey();
-		const focusedIndex = focusedKey != null ? itemNodes.findIndex((node) => node.key === focusedKey) : -1;
-		const forceIncludeIndexes = [
-			dropTarget?.type === "item" ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1,
-			normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1,
-			dropTarget?.type === "item" ? -1 : focusedIndex
-		].filter((index) => index >= 0);
-		return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, stateProps.items.length, virtualizer, 80, {
+		const forceIncludeIndexes = [dropTarget?.type === "item" ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1, normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, [], itemCount, virtualizer, 80, {
 			forceIncludeIndexes,
 			forceIncludeMaxSpan: 320
 		});
 	});
-	createEffect(() => {
+	const persistedOutsideIndexes = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return [];
+		const itemNodes = getItemNodes();
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => itemNodes.findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		return indexesOutsideRange(range, persistedIndexes);
+	});
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
 		const getItemNodes = () => Array.from(state.collection()).filter((node) => node.type === "item");
 		virtualizer.setDropTargetItemCountResolver(() => getItemNodes().length);
@@ -409,44 +484,52 @@ function ListBox(props) {
 				key: typeof node.key === "string" || typeof node.key === "number" ? node.key : void 0
 			};
 		});
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			virtualizer.setDropTargetIndexResolver(void 0);
 			virtualizer.setDropTargetItemCountResolver(void 0);
 			virtualizer.setDropTargetResolver(void 0);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const visibleItems = createMemo(() => {
 		const range = virtualRange();
-		if (!range) return stateProps.items;
-		return stateProps.items.slice(range.start, range.end);
+		const items = collectionItems();
+		if (!range) return items;
+		return items.slice(range.start, range.end);
 	});
-	const virtualSpacerStyle = (size) => virtualizer?.orientation === "horizontal" ? { width: `${size}px` } : { height: `${size}px` };
 	const sectionedRenderEntries = createMemo(() => {
+		const values = new Set(collectionItems());
 		let globalIndex = 0;
-		return stateProps.items.map((entry) => {
-			if (isCollectionSection(entry)) return {
+		const entries = [];
+		for (const entry of stateProps.items) if (isCollectionSection(entry)) {
+			const sectionItems = entry.items.filter((item) => values.has(item)).map((item) => ({
+				item,
+				index: globalIndex++
+			}));
+			if (sectionItems.length === 0) continue;
+			entries.push({
 				type: "section",
 				section: entry,
-				items: entry.items.map((item) => ({
-					item,
-					index: globalIndex++
-				}))
-			};
-			return {
-				type: "item",
-				item: {
-					item: entry,
-					index: globalIndex++
-				}
-			};
+				items: sectionItems
+			});
+		} else if (values.has(entry)) entries.push({
+			type: "item",
+			item: {
+				item: entry,
+				index: globalIndex++
+			}
 		});
+		return entries;
 	});
 	const collectionRenderer = createMemo(() => ({
 		...parentCollectionRenderer,
 		renderItem: (item) => local.children(item),
 		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
 	}));
-	return createComponent(ListBoxContext.Provider, {
+	const CollectionRoot = useCollectionRoot();
+	return createComponent(ListBoxContext, {
 		get value() {
 			return {
 				state,
@@ -458,15 +541,15 @@ function ListBox(props) {
 			};
 		},
 		get children() {
-			return createComponent(ListBoxStateContext.Provider, {
+			return createComponent(ListBoxStateContext, {
 				value: state,
 				get children() {
-					return createComponent(CollectionRendererContext.Provider, {
+					return createComponent(CollectionRendererContext, {
 						get value() {
 							return collectionRenderer();
 						},
 						get children() {
-							return createComponent(DropIndicatorContext.Provider, {
+							return createComponent(DropIndicatorContext, {
 								value: dropIndicatorContextValue,
 								get children() {
 									return [createComponent(Show, {
@@ -475,138 +558,306 @@ function ListBox(props) {
 										},
 										get children() {
 											var _el$2 = getNextElement(_tmpl$2);
-											spread(_el$2, mergeProps(cleanLabelProps), false, true);
-											insert(_el$2, () => ariaProps.label);
+											spread(_el$2, cleanLabelProps, true);
+											insert(_el$2, () => {
+												return ariaProps.label;
+											});
 											runHydrationEvents();
 											return _el$2;
 										}
 									}), (() => {
-										var _el$3 = getNextElement(_tmpl$3), _el$4 = _el$3.firstChild, [_el$5, _co$] = getNextMarker(_el$4.nextSibling), _el$6 = _el$5.nextSibling, [_el$7, _co$2] = getNextMarker(_el$6.nextSibling);
-										use((el) => {
-											setListRef(el);
-											assignRef(local.ref, el);
-											autocompleteCtx?.collectionRef(el);
+										var _el$3 = getNextElement(_tmpl$3);
+										var _el$4 = _el$3.firstChild;
+										var [_el$5, _el$6] = getNextMarker(_el$4.nextSibling);
+										var _el$7 = _el$5.nextSibling;
+										var [_el$8, _el$9] = getNextMarker(_el$7.nextSibling);
+										ref(() => {
+											return (el) => {
+												setListRef(el);
+												assignRef$1(local.ref, el);
+												autocompleteCtx?.collectionRef(el);
+											};
 										}, _el$3);
-										spread(_el$3, mergeProps(() => mergeProps$2(domProps(), cleanListBoxProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}), {
-											get ["class"]() {
+										spread(_el$3, [() => {
+											return mergeProps$1(domProps(), cleanListBoxProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {});
+										}, {
+											get "class"() {
 												return renderProps.class();
 											},
 											get style() {
 												return renderProps.style();
 											},
-											get ["data-focused"]() {
-												return state.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-disabled"]() {
-												return resolveDisabled() || void 0;
+											get "data-disabled"() {
+												return dataAttr(resolveDisabled());
 											},
-											get ["data-empty"]() {
-												return isEmpty() || void 0;
+											get "data-empty"() {
+												return dataAttr(isEmpty());
 											},
-											get ["data-layout"]() {
-												return stateProps.layout;
+											get "data-layout"() {
+												return stateProps.layout || "stack";
 											},
-											get ["data-orientation"]() {
-												return stateProps.orientation;
+											get "data-orientation"() {
+												return stateProps.orientation || "vertical";
 											},
-											get ["data-drop-target"]() {
-												return isRootDropTarget() || void 0;
+											get "data-drop-target"() {
+												return dataAttr(isRootDropTarget());
 											},
 											get slot() {
 												return local.slot;
 											}
-										}), false, true);
+										}], true);
 										insert(_el$3, createComponent(SharedElementTransition, { get children() {
-											return memo(() => !!(isEmpty() && local.renderEmptyState))() ? (() => {
-												var _el$8 = getNextElement(_tmpl$4);
-												insert(_el$8, () => local.renderEmptyState());
-												return _el$8;
-											})() : memo(() => !!hasSections())() ? createComponent(For, {
+											return memo(() => {
+												return !!parentCollectionRenderer?.isVirtualized;
+											})() ? [createComponent(CollectionRoot, {
+												get collection() {
+													return memo(() => {
+														return !!virtualRange();
+													})() ? collectionItems() : [];
+												},
+												scrollRef: () => listRef(),
+												get persistedKeys() {
+													return persistedKeys();
+												},
+												get children() {
+													return memo(() => {
+														return !!(isEmpty() && local.renderEmptyState);
+													})() ? null : memo(() => {
+														return !!hasSections();
+													})() ? createComponent(For, {
+														get each() {
+															return sectionedRenderEntries();
+														},
+														children: (entry) => entry.type === "section" ? (() => {
+															var _el$11 = getNextElement(_tmpl$6);
+															insert(_el$11, createComponent(Section, {
+																class: "solidaria-ListBox-section",
+																get children() {
+																	return [memo(() => {
+																		return memo(() => {
+																			return entry.section.title != null;
+																		})() && createComponent(Header, {
+																			class: "solidaria-ListBox-sectionHeader",
+																			get children() {
+																				return entry.section.title;
+																			}
+																		});
+																	}), createComponent(Group, {
+																		class: "solidaria-ListBox-sectionGroup",
+																		get children() {
+																			var _el$12 = getNextElement(_tmpl$5);
+																			insert(_el$12, createComponent(For, {
+																				get each() {
+																					return entry.items;
+																				},
+																				children: (indexedItem) => createComponent(VirtualizerItem, {
+																					get index() {
+																						return indexedItem.index;
+																					},
+																					get children() {
+																						return createComponent(ListBoxItemWithDropIndicators, {
+																							get item() {
+																								return indexedItem.item;
+																							},
+																							get itemIndex() {
+																								return indexedItem.index;
+																							},
+																							isLastInLevel: () => isLastDropItem(indexedItem.index),
+																							get renderItem() {
+																								return local.children;
+																							},
+																							renderDropIndicator: renderItemDropIndicator
+																						});
+																					}
+																				})
+																			}));
+																			effect(() => entry.section["aria-label"], (_v$) => {
+																				setAttribute(_el$12, "aria-label", _v$);
+																			});
+																			return _el$12;
+																		}
+																	})];
+																}
+															}));
+															return _el$11;
+														})() : createComponent(VirtualizerItem, {
+															get index() {
+																return entry.item.index;
+															},
+															get children() {
+																return createComponent(ListBoxItemWithDropIndicators, {
+																	get item() {
+																		return entry.item.item;
+																	},
+																	get itemIndex() {
+																		return entry.item.index;
+																	},
+																	isLastInLevel: () => isLastDropItem(entry.item.index),
+																	get renderItem() {
+																		return local.children;
+																	},
+																	renderDropIndicator: renderItemDropIndicator
+																});
+															}
+														})
+													}) : [createComponent(For, {
+														get each() {
+															return visibleItems();
+														},
+														children: (item, index) => createComponent(VirtualizerItem, {
+															index: () => (virtualRange()?.start ?? 0) + index(),
+															get children() {
+																return createComponent(ListBoxItemWithDropIndicators, {
+																	item,
+																	itemIndex: () => (virtualRange()?.start ?? 0) + index(),
+																	isLastInLevel: () => isLastDropItem((virtualRange()?.start ?? 0) + index()),
+																	get renderItem() {
+																		return local.children;
+																	},
+																	renderDropIndicator: renderItemDropIndicator
+																});
+															}
+														})
+													}), createComponent(For, {
+														get each() {
+															return persistedOutsideIndexes();
+														},
+														children: (index) => createComponent(PersistedVirtualItem, {
+															index,
+															get children() {
+																return createComponent(ListBoxItemWithDropIndicators, {
+																	get item() {
+																		return collectionItems()[index];
+																	},
+																	itemIndex: () => index,
+																	isLastInLevel: () => isLastDropItem(index),
+																	get renderItem() {
+																		return local.children;
+																	},
+																	renderDropIndicator: renderItemDropIndicator
+																});
+															}
+														})
+													})];
+												}
+											}), memo(() => {
+												return memo(() => {
+													return !!(isEmpty() && local.renderEmptyState);
+												})() ? (() => {
+													var _el$13 = getNextElement(_tmpl$4);
+													insert(_el$13, scope(() => {
+														return local.renderEmptyState();
+													}));
+													return _el$13;
+												})() : null;
+											})] : memo(() => {
+												return !!(isEmpty() && local.renderEmptyState);
+											})() ? (() => {
+												var _el$10 = getNextElement(_tmpl$4);
+												insert(_el$10, scope(() => {
+													return local.renderEmptyState();
+												}));
+												return _el$10;
+											})() : memo(() => {
+												return !!hasSections();
+											})() ? createComponent(For, {
 												get each() {
 													return sectionedRenderEntries();
 												},
 												children: (entry) => entry.type === "section" ? (() => {
-													var _el$9 = getNextElement(_tmpl$6);
-													insert(_el$9, createComponent(Section, {
-														"class": "solidaria-ListBox-section",
+													var _el$14 = getNextElement(_tmpl$6);
+													insert(_el$14, createComponent(Section, {
+														class: "solidaria-ListBox-section",
 														get children() {
-															return [memo(() => memo(() => entry.section.title != null)() && createComponent(Header, {
-																"class": "solidaria-ListBox-sectionHeader",
+															return [memo(() => {
+																return memo(() => {
+																	return entry.section.title != null;
+																})() && createComponent(Header, {
+																	class: "solidaria-ListBox-sectionHeader",
+																	get children() {
+																		return entry.section.title;
+																	}
+																});
+															}), createComponent(Group, {
+																class: "solidaria-ListBox-sectionGroup",
 																get children() {
-																	return entry.section.title;
-																}
-															})), createComponent(Group, {
-																"class": "solidaria-ListBox-sectionGroup",
-																get children() {
-																	var _el$0 = getNextElement(_tmpl$5);
-																	insert(_el$0, createComponent(For, {
+																	var _el$15 = getNextElement(_tmpl$5);
+																	insert(_el$15, createComponent(For, {
 																		get each() {
 																			return entry.items;
 																		},
-																		children: (indexedItem) => [
-																			memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "before")),
-																			memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "on")),
-																			memo(() => local.children(indexedItem.item)),
-																			memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "after"))
-																		]
+																		children: (indexedItem) => createComponent(ListBoxItemWithDropIndicators, {
+																			get item() {
+																				return indexedItem.item;
+																			},
+																			get itemIndex() {
+																				return indexedItem.index;
+																			},
+																			isLastInLevel: () => isLastDropItem(indexedItem.index),
+																			get renderItem() {
+																				return local.children;
+																			},
+																			renderDropIndicator: renderItemDropIndicator
+																		})
 																	}));
-																	effect(() => setAttribute(_el$0, "aria-label", entry.section["aria-label"]));
-																	return _el$0;
+																	effect(() => entry.section["aria-label"], (_v$) => {
+																		setAttribute(_el$15, "aria-label", _v$);
+																	});
+																	return _el$15;
 																}
 															})];
 														}
 													}));
-													return _el$9;
-												})() : [
-													memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "before")),
-													memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "on")),
-													memo(() => local.children(entry.item.item)),
-													memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "after"))
-												]
-											}) : [
-												memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
-													var _el$1 = getNextElement(_tmpl$7);
-													effect((_$p) => style(_el$1, virtualSpacerStyle(virtualRange().offsetTop), _$p));
-													return _el$1;
-												})() : null),
-												createComponent(For, {
-													get each() {
-														return visibleItems();
+													return _el$14;
+												})() : createComponent(ListBoxItemWithDropIndicators, {
+													get item() {
+														return entry.item.item;
 													},
-													children: (item, index) => {
-														const itemIndex = () => (virtualRange()?.start ?? 0) + index();
-														const beforeIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "before");
-														const onIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "on");
-														const afterIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "after");
-														return [
-															memo(beforeIndicator),
-															memo(onIndicator),
-															memo(() => local.children(item)),
-															memo(afterIndicator)
-														];
-													}
-												}),
-												memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
-													var _el$10 = getNextElement(_tmpl$8);
-													effect((_$p) => style(_el$10, virtualSpacerStyle(virtualRange().offsetBottom), _$p));
-													return _el$10;
-												})() : null)
-											];
-										} }), _el$5, _co$);
-										insert(_el$3, (() => {
-											var _c$ = memo(() => !!(local.hasMore && local.onLoadMore));
-											return () => _c$() && createComponent(ListBoxLoadMoreItem, {
-												get onLoadMore() {
-													return local.onLoadMore;
+													get itemIndex() {
+														return entry.item.index;
+													},
+													isLastInLevel: () => isLastDropItem(entry.item.index),
+													get renderItem() {
+														return local.children;
+													},
+													renderDropIndicator: renderItemDropIndicator
+												})
+											}) : createComponent(For, {
+												get each() {
+													return visibleItems();
 												},
-												get isLoading() {
-													return local.isLoading;
-												}
+												children: (item, index) => createComponent(ListBoxItemWithDropIndicators, {
+													item,
+													itemIndex: () => (virtualRange()?.start ?? 0) + index(),
+													isLastInLevel: () => isLastDropItem((virtualRange()?.start ?? 0) + index()),
+													get renderItem() {
+														return local.children;
+													},
+													renderDropIndicator: renderItemDropIndicator
+												})
 											});
-										})(), _el$7, _co$2);
+										} }), _el$5, _el$6);
+										insert(_el$3, scope((() => {
+											var _c$ = memo(() => {
+												return !!(local.hasMore && local.onLoadMore);
+											});
+											return () => {
+												return _c$() ? createComponent(ListBoxLoadMoreItem, {
+													get onLoadMore() {
+														return local.onLoadMore;
+													},
+													get isLoading() {
+														return local.isLoading;
+													}
+												}) : local.hasMore && local.onLoadMore;
+											};
+										})()), _el$8, _el$9);
 										runHydrationEvents();
 										return _el$3;
 									})()];
@@ -620,9 +871,9 @@ function ListBox(props) {
 	});
 }
 /**
-* An option in a listbox.
+* An item in a listbox.
 */
-function ListBoxOption(props) {
+function ListBoxItem(props) {
 	const [local, ariaProps] = splitProps(props, [
 		"class",
 		"style",
@@ -633,17 +884,17 @@ function ListBoxOption(props) {
 		"ref"
 	]);
 	const context = useContext(ListBoxStateContext);
-	if (!context) throw new Error("ListBoxOption must be used within a ListBox");
+	if (!context) throw new Error("ListBoxItem must be used within a ListBox");
 	const state = context;
 	const listContext = useContext(ListBoxContext);
-	const [ref, setRef] = createSignal(null);
+	const [ref$1, setRef] = createSignal(null);
 	const optionAria = createOption({
 		key: local.id,
 		get isDisabled() {
 			return Boolean(ariaProps.isDisabled || listContext?.isDisabled());
 		},
 		get "aria-label"() {
-			return ariaProps["aria-label"] ?? local.textValue;
+			return ariaProps["aria-label"];
 		},
 		get shouldSelectOnPressUp() {
 			return ariaProps.shouldSelectOnPressUp;
@@ -660,7 +911,7 @@ function ListBoxOption(props) {
 		get onHoverChange() {
 			return ariaProps.onHoverChange;
 		}
-	}, state, ref);
+	}, state, ref$1);
 	const renderValues = createMemo(() => ({
 		isSelected: optionAria.isSelected(),
 		isFocused: optionAria.isFocused(),
@@ -677,9 +928,6 @@ function ListBoxOption(props) {
 		style: local.style,
 		defaultClassName: "solidaria-ListBox-option"
 	}, renderValues);
-	const hasPrimitiveLabel = () => {
-		return typeof props.children === "string" || typeof props.children === "number";
-	};
 	const selectionIndicatorContext = createMemo(() => ({ isSelected: optionAria.isSelected }));
 	const draggableItem = createMemo(() => {
 		if (!listContext?.dragAndDropHooks?.useDraggableItem || !listContext.dragState) return void 0;
@@ -690,71 +938,109 @@ function ListBoxOption(props) {
 	});
 	const droppableItem = createMemo(() => {
 		if (!listContext?.dragAndDropHooks?.useDroppableItem || !listContext.dropState) return void 0;
-		return listContext.dragAndDropHooks.useDroppableItem({ key: local.id }, listContext.dropState, () => ref());
+		return listContext.dragAndDropHooks.useDroppableItem({ key: local.id }, listContext.dropState, () => ref$1());
 	});
 	const cleanOptionProps = () => {
-		const { ref: _ref1, "aria-describedby": _ariaDescribedby, ...rest } = optionAria.optionProps;
-		if (!hasPrimitiveLabel() && rest["aria-label"] == null) delete rest["aria-labelledby"];
+		const { ref: _ref1, ...rest } = optionAria.optionProps;
 		return rest;
 	};
+	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;
+		if (labelId) {
+			const label = el.querySelector("[slot='label']");
+			if (label && !label.id) label.id = labelId;
+		}
+		if (descriptionId) {
+			const description = el.querySelector("[slot='description']");
+			if (description && !description.id) description.id = descriptionId;
+		}
+	});
 	const domProps = () => filterDOMProps(ariaProps, { global: true });
-	return createComponent(SelectionIndicatorContext.Provider, {
+	const selectionMode = () => state.selectionMode();
+	return createComponent(SelectionIndicatorContext, {
 		get value() {
 			return selectionIndicatorContext();
 		},
 		get children() {
-			var _el$11 = getNextElement(_tmpl$9);
-			use((el) => {
-				setRef(el);
-				assignRef(local.ref, el);
-			}, _el$11);
-			spread(_el$11, mergeProps(() => mergeProps$2(domProps(), cleanOptionProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}), {
-				get ["class"]() {
+			var _el$16 = getNextElement(_tmpl$);
+			ref(() => {
+				return (el) => {
+					setRef(el);
+					assignRef$1(local.ref, el);
+					const dragRef = (draggableItem()?.dragProps)?.ref;
+					if (typeof dragRef === "function") dragRef(el);
+				};
+			}, _el$16);
+			spread(_el$16, [() => {
+				return mergeProps$1(domProps(), cleanOptionProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {});
+			}, {
+				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 optionAria.isFocused() || void 0;
+				get "data-focused"() {
+					return dataAttr(optionAria.isFocused());
 				},
-				get ["data-focus-visible"]() {
-					return optionAria.isFocusVisible() || void 0;
+				get "data-focus-visible"() {
+					return dataAttr(optionAria.isFocusVisible());
 				},
-				get ["data-pressed"]() {
-					return optionAria.isPressed() || void 0;
+				get "data-pressed"() {
+					return dataAttr(optionAria.isPressed());
 				},
-				get ["data-hovered"]() {
-					return optionAria.isHovered() || void 0;
+				get "data-hovered"() {
+					return dataAttr(optionAria.isHovered());
 				},
-				get ["data-disabled"]() {
-					return optionAria.isDisabled() || void 0;
+				get "data-disabled"() {
+					return dataAttr(optionAria.isDisabled());
 				},
-				get ["data-dragging"]() {
-					return draggableItem()?.isDragging || void 0;
+				get "data-dragging"() {
+					return dataAttr(draggableItem()?.isDragging);
 				},
-				get ["data-drop-target"]() {
-					return droppableItem()?.isDropTarget || void 0;
+				get "data-drop-target"() {
+					return dataAttr(droppableItem()?.isDropTarget);
+				},
+				get "data-selection-mode"() {
+					return selectionMode() === "none" ? void 0 : selectionMode();
 				},
 				get slot() {
 					return local.slot;
 				}
-			}), false, true);
-			insert(_el$11, (() => {
-				var _c$2 = memo(() => !!hasPrimitiveLabel());
-				return () => _c$2() ? (() => {
-					var _el$12 = getNextElement(_tmpl$2);
-					spread(_el$12, mergeProps(() => optionAria.labelProps), false, true);
-					insert(_el$12, () => renderProps.renderChildren());
-					runHydrationEvents();
-					return _el$12;
-				})() : renderProps.renderChildren();
-			})());
+			}], true);
+			insert(_el$16, createComponent(Provider, {
+				values: [[TextContext, optionTextSlots]],
+				get children() {
+					return createComponent(OptionContent, {
+						get render() {
+							return renderProps.renderChildrenStable;
+						},
+						get labelProps() {
+							return optionAria.labelProps;
+						}
+					});
+				}
+			}));
 			runHydrationEvents();
-			return _el$11;
+			return _el$16;
 		}
 	});
 }
@@ -762,8 +1048,9 @@ function ListBoxOption(props) {
 * Load more sentinel item for listbox collections.
 */
 function ListBoxLoadMoreItem(props) {
-	let sentinelRef;
+	const [sentinel, setSentinel] = createSignal();
 	const [isPending, setIsPending] = createSignal(false);
+	const scrollOffsetValue = createMemo(() => props.scrollOffset ?? 1);
 	const isLoading = () => !!props.isLoading || isPending();
 	const triggerLoadMore = async () => {
 		if (isLoading()) return;
@@ -774,48 +1061,56 @@ function ListBoxLoadMoreItem(props) {
 			setIsPending(false);
 		}
 	};
-	createEffect(() => {
-		if (!sentinelRef || typeof IntersectionObserver !== "function") return;
-		const margin = `0px 0px ${100 * (props.scrollOffset ?? 1)}% 0px`;
+	createEffect(() => ({
+		current: sentinel(),
+		scrollOffset: scrollOffsetValue()
+	}), ({ current, scrollOffset }) => {
+		if (!current || typeof IntersectionObserver !== "function") return;
+		const margin = `0px 0px ${100 * scrollOffset}% 0px`;
 		const observer = new IntersectionObserver((entries) => {
 			if (entries[0]?.isIntersecting) triggerLoadMore();
 		}, { rootMargin: margin });
-		observer.observe(sentinelRef);
+		observer.observe(current);
 		return () => observer.disconnect();
 	});
 	const renderProps = useRenderProps({
 		get children() {
-			return props.children ?? (() => isLoading() ? "Loading more..." : "Load more");
+			return props.children;
 		},
 		class: props.class,
 		style: props.style,
 		defaultClassName: "solidaria-ListBox-loadMore"
 	}, () => ({ isLoading: isLoading() }));
 	return [(() => {
-		var _el$13 = getNextElement(_tmpl$0), _el$14 = _el$13.firstChild;
-		var _ref$ = sentinelRef;
-		typeof _ref$ === "function" ? use(_ref$, _el$14) : sentinelRef = _el$14;
-		return _el$13;
-	})(), (() => {
-		var _el$15 = getNextElement(_tmpl$1);
-		_el$15.addEventListener("focus", () => {
-			triggerLoadMore();
-		});
-		setAttribute(_el$15, "aria-disabled", true);
-		insert(_el$15, () => renderProps.renderChildren());
-		effect((_p$) => {
-			var _v$5 = renderProps.class(), _v$6 = renderProps.style(), _v$7 = isLoading() || void 0;
-			_v$5 !== _p$.e && className(_el$15, _p$.e = _v$5);
-			_p$.t = style(_el$15, _v$6, _p$.t);
-			_v$7 !== _p$.a && setAttribute(_el$15, "data-loading", _p$.a = _v$7);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		});
-		return _el$15;
-	})()];
+		var _el$17 = getNextElement(_tmpl$7);
+		var _el$18 = _el$17.firstChild;
+		ref(() => {
+			return setSentinel;
+		}, _el$18);
+		return _el$17;
+	})(), createComponent(Show, {
+		get when() {
+			return memo(() => {
+				return !!isLoading();
+			})() ? props.children : isLoading();
+		},
+		get children() {
+			var _el$19 = getNextElement(_tmpl$8);
+			insert(_el$19, scope(() => {
+				return renderProps.renderChildren();
+			}));
+			effect(() => {
+				return {
+					e: readShallow(renderProps.class()),
+					t: readShallow(renderProps.style())
+				};
+			}, ({ e, t }, _p$) => {
+				className(_el$19, e, _p$?.e);
+				style(_el$19, t, _p$?.t);
+			});
+			return _el$19;
+		}
+	})];
 }
 /**
 * Section primitive alias for ListBox composition parity.
@@ -823,9 +1118,13 @@ function ListBoxLoadMoreItem(props) {
 function ListBoxSection(props) {
 	return createComponent(Section, props);
 }
-ListBox.Option = ListBoxOption;
+/**
+* @deprecated Use {@link ListBoxItem}. Removed in a future minor.
+*/
+const ListBoxOption = ListBoxItem;
+ListBox.Option = ListBoxItem;
 ListBox.LoadMoreItem = ListBoxLoadMoreItem;
 //#endregion
-export { ListBox, ListBoxContext, ListBoxLoadMoreItem, ListBoxOption, ListBoxSection, ListBoxStateContext, ListStateContext };
+export { ListBox, ListBoxContext, ListBoxItem, ListBoxLoadMoreItem, ListBoxOption, ListBoxSection, ListBoxStateContext, ListStateContext };
 
 //# sourceMappingURL=ListBox.js.map