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

package/src/ListBox.tsx

@@ -1,33 +1,45 @@
+/*
+ * 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
+
 /**
  * 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.
  */
 
 import {
-  type JSX,
   createContext,
   createEffect,
   createMemo,
+  createRenderEffect,
   createSignal,
-  on,
   onCleanup,
-  splitProps,
+  untrack,
   useContext,
   For,
   Show,
+  createTrackedEffect,
 } from "solid-js";
+import type { Context, Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createListBox,
   createOption,
   createFocusRing,
   createScrollIntoViewOnFocus,
   createStringFormatter,
-  createDragSession,
-  getGlobalDraggingCollectionRef,
-  getGlobalDraggingKeys,
-  registerDropItem,
   dndIntlStrings,
   mergeProps,
   moveVirtualFocus,
@@ -44,6 +56,8 @@ import {
   type ListFilterFn,
   type Key,
   type DropTarget,
+  type DroppableCollectionState,
+  type Collection,
 } from "@proyecto-viviana/solid-stately";
 import { useAutocompleteCollection } from "./Autocomplete";
 import {
@@ -51,18 +65,24 @@ import {
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
+  DEFAULT_SLOT,
+  OptionContent,
+  Provider,
   useRenderProps,
   filterDOMProps,
+  dataAttr,
 } from "./utils";
+import { TextContext } from "./Text";
 import { SharedElementTransition } from "./SharedElementTransition";
 import {
   SelectionIndicatorContext,
   type SelectionIndicatorContextValue,
 } from "./SelectionIndicator";
-import { useVirtualizerContext } from "./Virtualizer";
+import { useVirtualizerContext, PersistedVirtualItem, VirtualizerItem } from "./Virtualizer";
 import { type DragAndDropHooks } from "./useDragAndDrop";
 import {
   getNormalizedDropTargetKey,
+  indexesOutsideRange,
   mergePersistedKeysIntoVirtualRange,
   useDndPersistedKeys,
   useRenderDropIndicator,
@@ -70,6 +90,7 @@ import {
   type DropIndicatorProps,
 } from "./DragAndDrop";
 import type { ItemDropTarget } from "@proyecto-viviana/solid-stately";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   CollectionRendererContext,
   Section,
@@ -77,8 +98,10 @@ import {
   Group,
   type CollectionEntry,
   type CollectionRendererContextValue,
+  type CollectionSection,
   type SectionProps,
   useCollectionRenderer,
+  useCollectionRoot,
   isCollectionSection,
   flattenCollectionEntries,
 } from "./Collection";
@@ -166,6 +189,12 @@ export interface ListBoxOptionRenderProps {
   isDisabled: boolean;
 }
 
+export type ListBoxItemProps<T> = ListBoxOptionProps<T>;
+export type ListBoxItemRenderProps = ListBoxOptionRenderProps;
+
+/**
+ * @deprecated Use {@link ListBoxItemProps}. Removed in a future minor.
+ */
 export interface ListBoxOptionProps<T>
   extends Omit<AriaOptionProps, "children" | "key">, SlotProps {
   /** The unique key for the option. */
@@ -214,12 +243,168 @@ export const ListBoxContext = createContext<ListBoxContextValue<unknown> | null>
 export const ListBoxStateContext = createContext<ListState<unknown> | null>(null);
 export const ListStateContext = ListBoxStateContext;
 
+function dropIndicatorLabel(
+  target: ItemDropTarget,
+  collection: Collection<unknown>,
+  format: (
+    key: "dropOnItem" | "insertBetween" | "insertAfter" | "insertBefore",
+    args?: Record<string, string>,
+  ) => string,
+): string {
+  const getText = (key: Key | null): string => {
+    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: Key | null;
+  let after: Key | null;
+  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: DropIndicatorProps): JSX.Element {
+  const listContext = useContext(ListBoxContext);
+  const listState = useContext(ListBoxStateContext);
+  const [el, setEl] = createSignal<HTMLDivElement | null>(null);
+  const dndFormatter = createStringFormatter(dndIntlStrings);
+  const dropState = listContext?.dropState as DroppableCollectionState | undefined;
+  const indicator = listContext?.dragAndDropHooks?.useDropIndicator?.(
+    { target: props.target },
+    dropState as DroppableCollectionState,
+    el,
+  );
+
+  return (
+    <Show when={indicator && !indicator.isHidden}>
+      <div
+        {...indicator?.dropIndicatorProps}
+        ref={setEl}
+        role="option"
+        class="solidaria-DropIndicator"
+        aria-label={
+          listState
+            ? dropIndicatorLabel(props.target, listState.collection(), (key, args) =>
+                dndFormatter().format(key, args),
+              )
+            : undefined
+        }
+        data-drop-target={dataAttr(indicator?.isDropTarget)}
+      />
+    </Show>
+  );
+}
+
+/**
+ * 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<T>(props: {
+  item: T;
+  renderItem: (item: T) => JSX.Element;
+}): JSX.Element {
+  // Comparison `hc` returns a one-shot thunk. Solid's insert treats a function
+  // child as an accessor and will call it again when a sibling indicator
+  // invalidates. Instantiate once under this owner so the option node stays.
+  const child = untrack(() => {
+    const rendered = props.renderItem(props.item);
+    return typeof rendered === "function" ? (rendered as () => JSX.Element)() : rendered;
+  });
+  return child as JSX.Element;
+}
+
+function ListBoxDropIndicatorSlot(props: {
+  itemIndex: number | Accessor<number>;
+  position: "before" | "after" | "on";
+  renderDropIndicator?: (
+    index: number,
+    position: "before" | "after" | "on",
+  ) => JSX.Element | undefined;
+}): JSX.Element {
+  const itemIndex = () =>
+    typeof props.itemIndex === "function" ? props.itemIndex() : props.itemIndex;
+  return <>{props.renderDropIndicator?.(itemIndex(), props.position)}</>;
+}
+
+/**
+ * Stable per-item row so drop-indicator mount does not remount the option.
+ */
+function ListBoxItemWithDropIndicators<T>(props: {
+  item: T;
+  itemIndex: number | Accessor<number>;
+  isLastInLevel: boolean | Accessor<boolean>;
+  renderItem: (item: T) => JSX.Element;
+  renderDropIndicator?: (
+    index: number,
+    position: "before" | "after" | "on",
+  ) => JSX.Element | undefined;
+}): JSX.Element {
+  const isLast = () =>
+    typeof props.isLastInLevel === "function" ? props.isLastInLevel() : props.isLastInLevel;
+  return (
+    <>
+      <ListBoxDropIndicatorSlot
+        itemIndex={props.itemIndex}
+        position="before"
+        renderDropIndicator={props.renderDropIndicator}
+      />
+      <ListBoxRenderedItem item={props.item} renderItem={props.renderItem} />
+      <Show when={isLast()}>
+        <ListBoxDropIndicatorSlot
+          itemIndex={props.itemIndex}
+          position="after"
+          renderDropIndicator={props.renderDropIndicator}
+        />
+      </Show>
+    </>
+  );
+}
+
 /**
  * A listbox displays a list of options and allows a user to select one or more of them.
  */
 export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
   const parentContext = useContext(ListBoxContext) as ListBoxContextValue<T> | null;
-  const contextSlotProps = parentContext?.slots?.[props.slot ?? "default"];
+  const contextSlotProps =
+    parentContext?.slots?.[typeof props.slot === "string" ? props.slot : "default"];
   const mergedListBoxProps = contextSlotProps
     ? (mergeProps(contextSlotProps, props) as ListBoxProps<T>)
     : props;
@@ -326,8 +511,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
   // option emits aria-posinset/aria-setsize for the windowed (incomplete) DOM.
   const parentCollectionRenderer = useCollectionRenderer<unknown>();
   const listBoxAria = createListBox(
-    {
-      ...ariaProps,
+    mergeProps(ariaProps, {
       get isVirtualized() {
         return parentCollectionRenderer?.isVirtualized ?? ariaProps.isVirtualized;
       },
@@ -357,7 +541,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
       get direction() {
         return locale().direction;
       },
-    },
+    }),
     state,
     () => listRef(),
   );
@@ -365,7 +549,10 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
   const renderValues = createMemo<ListBoxRenderProps>(() => ({
-    isFocused: state.isFocused() || isFocused(),
+    // RAC ListBox.tsx:366-414: `data-focused` / render-prop `isFocused` come from
+    // `useFocusRing` on the listbox element, not collection focus. Virtual focus
+    // (ComboBox) leaves the listbox itself unfocused.
+    isFocused: isFocused(),
     isFocusVisible: isFocusVisible(),
     isDisabled: resolveDisabled(),
     isEmpty: state.collection().size === 0,
@@ -408,19 +595,19 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     ref: () => listRef(),
   });
 
-  // Autocomplete bridge. createListBox reimplements navigation inline (it does
-  // not route through createSelectableCollection), so the virtual-focus event
-  // wiring the Autocomplete input relies on lives here, gated on the bridge
-  // context. This mirrors createSelectableCollection's FOCUS_EVENT/CLEAR_FOCUS_EVENT
-  // handlers and useSelectableItem's per-item moveVirtualFocus, at the component
-  // layer, without touching the shared hooks (protecting ComboBox/Picker).
+  // Autocomplete bridge. The shared selectable collection owns keyboard
+  // navigation and collection focus. This component keeps the Solid DOM handoff
+  // that mirrors the focused key to the input's active descendant. Ticket #100
+  // tracks moving the remaining virtual-focus work into the shared item layer.
   if (autocompleteCtx) {
     // Forward path: the input dispatches FOCUS_EVENT/CLEAR_FOCUS_EVENT onto the
     // collection element. FOCUS_EVENT marks the collection focused (and, when the
-    // user types forward, requests the first item); the actual arrow navigation
-    // arrives as a re-dispatched KeyboardEvent handled by createListBox's onKeyDown.
+    // user types forward, requests the first item). The shared collection handles
+    // the re-dispatched keyboard event.
     let shouldVirtualFocusFirst = false;
-    createEffect(() => {
+    createTrackedEffect(() => {
+      const _s2Cleanups: Array<() => void> = [];
+
       const list = listRef();
       if (!list) return;
       const onFocusEvent = (e: Event) => {
@@ -440,10 +627,14 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
       };
       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();
+      };
     });
 
     // Focus the first item once the (filtered) collection settles after the user
@@ -451,41 +642,53 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     // descendant by moving virtual focus onto the collection itself (its focusin
     // reaches the input's clear branch). Mirrors useSelectableCollection.
     createEffect(
-      on(
-        () => [state.collection().getFirstKey?.() ?? null, state.collection().size] as const,
-        ([firstKey, size]) => {
-          if (!shouldVirtualFocusFirst) return;
-          if (firstKey == null) {
-            const list = listRef();
-            if (list) moveVirtualFocus(list);
-            if (size > 0) shouldVirtualFocusFirst = false;
-          } else {
-            state.setFocusedKey(firstKey);
-            shouldVirtualFocusFirst = false;
-          }
-        },
-        { defer: true },
-      ),
+      () => [state.collection().getFirstKey?.() ?? null, state.collection().size] as const,
+      ([firstKey, size]) => {
+        if (!shouldVirtualFocusFirst) return;
+        if (firstKey == null) {
+          const list = listRef();
+          if (list) moveVirtualFocus(list);
+          if (size > 0) shouldVirtualFocusFirst = false;
+        } else {
+          state.setFocusedKey(firstKey);
+          shouldVirtualFocusFirst = false;
+        }
+      },
+      { defer: true },
     );
 
     // Reverse path: mirror the focused key onto the option's DOM element via a
     // synthetic, bubbling focusin (moveVirtualFocus). The input's focusin listener
     // reads target.id into its aria-activedescendant. Option ids are String(key)
     // in this path (createOption). Real DOM focus stays on the input.
-    createEffect(() => {
-      const key = state.focusedKey();
-      const list = listRef();
-      if (!list || !state.isFocused()) return;
-      if (key == null) return;
-      const el = list.ownerDocument.getElementById(String(key));
-      if (el) moveVirtualFocus(el);
-    });
+    createEffect(
+      () => {
+        const key = state.focusedKey();
+        const list = listRef();
+        const focused = state.isFocused();
+        return { key, list, focused };
+      },
+      ({ 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;
+  // RAC ListBox iterates CollectionRoot's filtered collection, not the
+  // unfiltered `items` prop. Keyboard already walks `state.collection()`
+  // (createFilteredListState under Autocomplete; baseState otherwise).
   const getItemNodes = createMemo(() =>
     Array.from(state.collection()).filter((node) => node.type === "item"),
   );
+  const collectionItems = createMemo(() => getItemNodes().map((node) => node.value as T));
+  const isEmpty = () => state.collection().size === 0;
+  const isLastDropItem = (itemIndex: number | Accessor<number>) => {
+    const i = typeof itemIndex === "function" ? itemIndex() : itemIndex;
+    return getItemNodes().length > 0 && i === getItemNodes().length - 1;
+  };
   const getDropTargetByIndex = (
     index: number,
     position: "before" | "after" | "on",
@@ -504,40 +707,36 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
         hooks.ListDropTargetDelegate),
     );
   });
-  const dropState = createMemo(() => {
-    if (!hasDroppableDnd()) return undefined;
-    return local.dragAndDropHooks?.useDroppableCollectionState?.({});
-  });
+  const dropStateValue = hasDroppableDnd()
+    ? local.dragAndDropHooks?.useDroppableCollectionState?.({
+        get collection() {
+          return state.collection();
+        },
+      })
+    : undefined;
+  const dropState = () => dropStateValue;
   const hasDraggableDnd = createMemo(() => {
     const hooks = local.dragAndDropHooks;
     return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
   });
-  const dragState = createMemo(() => {
-    if (!hasDraggableDnd()) return undefined;
-    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(() => {
+  const dragStateValue = hasDraggableDnd()
+    ? local.dragAndDropHooks?.useDraggableCollectionState?.({
+        items: flatItems(),
+        collection: state.collection(),
+        selectedKeys: state.selectionManager.selectedKeys,
+        isSelected: (key) => state.selectionManager.isSelected(key),
+      })
+    : undefined;
+  const dragState = () => dragStateValue;
+  if (local.dragAndDropHooks?.useDraggableCollection && dragStateValue) {
+    local.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => listRef());
+  }
+  const droppableCollectionValue = (() => {
     if (!hasDroppableDnd()) return undefined;
     const hooks = local.dragAndDropHooks;
-    const activeDropState = dropState();
+    const activeDropState = dropStateValue;
     if (!hooks?.useDroppableCollection || !activeDropState) return undefined;
-    const resolveDirection = (): "ltr" | "rtl" => {
-      const el = listRef();
-      if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
-        const dir = window.getComputedStyle(el).direction;
-        if (dir === "rtl") return "rtl";
-      }
-      return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
-    };
+    const resolveDirection = (): "ltr" | "rtl" => locale().direction;
     const dropTargetDelegate =
       hooks.dropTargetDelegate ??
       parentCollectionRenderer?.dropTargetDelegate ??
@@ -564,15 +763,21 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
         // (`navigate()` walks getKeyAfter/getKeyBefore) and post-drop focus
         // restoration. Reading it here re-registers the drop target when the
         // collection changes (mirrors upstream keying its effect on the state).
-        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),
+        setFocused: (isFocused) => state.setFocused(isFocused),
       },
       activeDropState,
       () => listRef(),
     );
-  });
+  })();
+  const droppableCollection = () => droppableCollectionValue;
   const isRootDropTarget = createMemo(() => {
     return Boolean(dropState()?.target?.type === "root");
   });
@@ -584,163 +789,14 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     if (!target || target.type !== "item") return undefined;
     return dndRenderDropIndicator()?.(target);
   };
+  // Stable callback so `For` item templates do not track drop-indicator
+  // reactivity (that remounts the option). The row component reads this.
+  const renderItemDropIndicator = (index: number, position: "before" | "after" | "on") =>
+    dndDropIndicator(index, position) ??
+    parentCollectionRenderer?.renderDropIndicator?.(index, position);
 
-  // ── Drop indicator (Fix B: labeled, self-focusing) ─────────────────────────
-  // The port of react-aria-components' ListBoxDropIndicatorWrapper +
-  // useDropIndicator. The droppable-collection state layer diverged to a minimal
-  // reactive target-holder with no collection reference, so the label (which
-  // needs the collection's text values) and the self-focus (which needs the live
-  // drag session) are computed here in the host layer, where both are available.
-  const dndFormatter = createStringFormatter(dndIntlStrings);
-  const dragSession = createDragSession();
-  const dropIndicatorTargetsEqual = (
-    a: DropTarget | null | undefined,
-    b: ItemDropTarget,
-  ): boolean =>
-    !!a && a.type === "item" && a.key === b.key && a.dropPosition === b.dropPosition;
-  // Faithful port of useDropIndicator's label logic: "Drop on X" for an on-item
-  // target, else "Insert between X and Y" / "Insert before X" / "Insert after X"
-  // resolved from the target's neighbours in the collection.
-  const dropIndicatorLabel = (target: ItemDropTarget): string => {
-    const collection = state.collection();
-    const getText = (key: Key | null): string => {
-      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: Key | null;
-    let after: Key | null;
-    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 "";
-  };
-  // Wrap the raw Set<string> the DragManager hands drop items into the DragTypes
-  // delegate the port state expects (mirrors createDroppableCollection.wrapTypes).
-  const wrapDropTypes = (types: Set<string>) => ({
-    has: (type: string | string[]) => {
-      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: { target: ItemDropTarget }): JSX.Element => {
-    const [indicatorRef, setIndicatorRef] = createSignal<HTMLDivElement | null>(null);
-    const isDropTarget = createMemo(() =>
-      dropIndicatorTargetsEqual(dropState()?.target, props.target),
-    );
-    // aria-hidden mirrors useDropIndicator: outside a drag session, or on a
-    // non-active target, the indicator is hidden from AT ('true'); the active
-    // target during a session is exposed (undefined). isHidden then tells us
-    // whether to omit the element entirely (RAC returns null when hidden).
-    const ariaHidden = createMemo(() =>
-      !dragSession() ? "true" : isDropTarget() ? undefined : "true",
-    );
-    const isHidden = createMemo(() => !isDropTarget() && !!ariaHidden());
-    // Faithful port of useDroppableItem. Registration (of the indicator element as
-    // a DragManager droppable item) and the self-focus must happen in one effect,
-    // registration first: the DragManager's onFocus keys off the dropItems map, so
-    // if the element self-focused before it was registered, onFocus would treat it
-    // as an unknown target and redirect focus back to the collection (a pickup
-    // bounce). React's two useDroppableItem effects run in guaranteed order after
-    // the ref is attached; Solid's independent effects race, so we fuse them. The
-    // dropItems map keys off live elements — the ref nulls itself on Show cleanup
-    // (below), so a hidden indicator unregisters instead of lingering as a stale
-    // detached entry.
-    createEffect(() => {
-      const el = indicatorRef();
-      if (!el) return;
-      const unregister = registerDropItem({
-        element: el,
-        target: props.target,
-        getDropOperation: (types, allowedOperations) => {
-          const st = dropState();
-          if (!st) return "cancel";
-          // Thread the same drag identity the collection uses (see
-          // createDroppableCollection.isInternalDropOperation): an internal
-          // keyboard reorder must report `isInternal` so the state's feature
-          // detection keeps before/after indicators valid (and rejects "on" for a
-          // reorder-only host). Without it every indicator would return "cancel"
-          // and drop out of the DragManager's ariaHideOutside keep-set.
-          const isInternal = getGlobalDraggingCollectionRef() === listRef();
-          return st.getDropOperation(
-            props.target,
-            wrapDropTypes(types) as Parameters<typeof st.getDropOperation>[1],
-            allowedOperations,
-            isInternal,
-            getGlobalDraggingKeys(),
-          );
-        },
-      });
-      onCleanup(unregister);
-      // While a drag session is active, the current drop target moves real DOM
-      // focus onto itself, so keyboard drop navigation lands on the labeled
-      // insertion point rather than the collection element. The self-focus is
-      // deferred to an animation frame to mirror upstream's timing: in
-      // useDroppableItem the focus is a *passive* useEffect, so it commits only
-      // after the browser's microtask checkpoint. That ordering matters because
-      // the DragManager keeps the active drop indicator visible via
-      // ariaHideOutside, whose keep-set is `[dragSource, ...registered drop
-      // items]` (the collection is dropped from the set once it owns items). A
-      // freshly-mounted indicator is momentarily `inert` — it only leaves the
-      // keep-set's blind spot once the DragManager's MutationObserver re-runs
-      // updateValidDropTargets on a later microtask. Focusing synchronously (or
-      // on a microtask) would call .focus() while the element is still inert and
-      // silently no-op; the animation frame runs after that refresh, exactly as
-      // React's passive effect does.
-      if (dragSession() && isDropTarget()) {
-        requestAnimationFrame(() => {
-          if (dragSession() && isDropTarget() && indicatorRef() === el) {
-            el.focus();
-          }
-        });
-      }
-    });
-    return (
-      <Show when={!isHidden()}>
-        <div
-          ref={(el) => {
-            setIndicatorRef(el);
-            onCleanup(() => setIndicatorRef(null));
-          }}
-          role="option"
-          class="solidaria-DropIndicator"
-          aria-roledescription={dndFormatter().format("dropIndicator")}
-          aria-label={dropIndicatorLabel(props.target)}
-          aria-hidden={ariaHidden()}
-          tabindex={-1}
-          data-drop-target={isDropTarget() || undefined}
-        />
-      </Show>
-    );
-  };
   const dropIndicatorContextValue = {
-    render: (p: DropIndicatorProps) => <ListBoxDropIndicator target={p.target} />,
+    render: (p: DropIndicatorProps) => <ListBoxDropIndicatorWrapper {...p} />,
   };
 
   const virtualizer = useVirtualizerContext();
@@ -752,36 +808,34 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
   );
   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,
-      {
-        forceIncludeIndexes,
-        forceIncludeMaxSpan: 320,
-      },
-    );
+    return mergePersistedKeysIntoVirtualRange(baseRange, [], itemCount, virtualizer, 80, {
+      forceIncludeIndexes,
+      forceIncludeMaxSpan: 320,
+    });
+  });
+  const persistedOutsideIndexes = createMemo(() => {
+    const range = virtualRange();
+    if (!range) return [] as number[];
+    const itemNodes = getItemNodes();
+    const persistedIndexes = Array.from(persistedKeys())
+      .map((key) => itemNodes.findIndex((node) => node.key === key))
+      .filter((index) => index >= 0);
+    return indexesOutsideRange(range, persistedIndexes);
   });
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
     const getItemNodes = () =>
       Array.from(state.collection()).filter((node) => node.type === "item");
@@ -798,44 +852,54 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
         key: typeof node.key === "string" || typeof node.key === "number" ? node.key : undefined,
       };
     });
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       virtualizer.setDropTargetIndexResolver(undefined);
       virtualizer.setDropTargetItemCountResolver(undefined);
       virtualizer.setDropTargetResolver(undefined);
     });
+
+    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);
   });
-  // Spacers reserve the windowed-out extent along the virtualizer's primary axis,
-  // so a horizontal layout offsets along width rather than height.
-  const virtualSpacerStyle = (size: number): JSX.CSSProperties =>
-    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) => {
+    const entries: Array<
+      | { type: "section"; section: CollectionSection<T>; items: { item: T; index: number }[] }
+      | { type: "item"; item: { item: T; index: number } }
+    > = [];
+    for (const entry of stateProps.items) {
       if (isCollectionSection(entry)) {
-        const sectionItems = entry.items.map((item) => ({
-          item,
-          index: globalIndex++,
-        }));
-        return {
+        const sectionItems = entry.items
+          .filter((item) => values.has(item))
+          .map((item) => ({
+            item,
+            index: globalIndex++,
+          }));
+        if (sectionItems.length === 0) continue;
+        entries.push({
           type: "section" as const,
           section: entry,
           items: sectionItems,
-        };
+        });
+      } else if (values.has(entry as T)) {
+        entries.push({
+          type: "item" as const,
+          item: {
+            item: entry as T,
+            index: globalIndex++,
+          },
+        });
       }
-      const indexedItem = {
-        item: entry as T,
-        index: globalIndex++,
-      };
-      return {
-        type: "item" as const,
-        item: indexedItem,
-      };
-    });
+    }
+    return entries;
   });
   const collectionRenderer = createMemo<CollectionRendererContextValue<unknown>>(() => ({
     ...parentCollectionRenderer,
@@ -844,9 +908,10 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
       dndDropIndicator(index, position) ??
       parentCollectionRenderer?.renderDropIndicator?.(index, position),
   }));
+  const CollectionRoot = useCollectionRoot();
 
   return (
-    <ListBoxContext.Provider
+    <ListBoxContext
       value={
         {
           state,
@@ -858,144 +923,208 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
         } as ListBoxContextValue<unknown>
       }
     >
-      <ListBoxStateContext.Provider value={state}>
-        <CollectionRendererContext.Provider value={collectionRenderer()}>
-         <DropIndicatorContext.Provider value={dropIndicatorContextValue}>
-          <>
-            <Show when={ariaProps.label}>
-              <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
-            </Show>
-            <div
-              {...mergeProps(
-                domProps(),
-                cleanListBoxProps(),
-                cleanFocusProps(),
-                (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ??
-                  {},
-              )}
-              ref={(el) => {
-                setListRef(el);
-                assignRef(local.ref, el);
-                autocompleteCtx?.collectionRef(el);
-              }}
-              class={renderProps.class()}
-              style={renderProps.style()}
-              data-focused={state.isFocused() || undefined}
-              data-focus-visible={isFocusVisible() || undefined}
-              data-disabled={resolveDisabled() || undefined}
-              data-empty={isEmpty() || undefined}
-              data-layout={stateProps.layout}
-              data-orientation={stateProps.orientation}
-              data-drop-target={isRootDropTarget() || undefined}
-              slot={local.slot}
-            >
-              <SharedElementTransition>
-                {isEmpty() && local.renderEmptyState ? (
-                  <div role="option" style={{ display: "contents" }} data-empty-state>
-                    {local.renderEmptyState()}
-                  </div>
-                ) : hasSections() ? (
-                  <For each={sectionedRenderEntries()}>
-                    {(entry) =>
-                      entry.type === "section" ? (
-                        <div role="presentation" data-section-wrapper>
-                          <Section class="solidaria-ListBox-section">
-                            {entry.section.title != null && (
-                              <Header class="solidaria-ListBox-sectionHeader">
-                                {entry.section.title}
-                              </Header>
-                            )}
-                            <Group class="solidaria-ListBox-sectionGroup">
-                              <div role="group" aria-label={entry.section["aria-label"]}>
-                                <For each={entry.items}>
-                                  {(indexedItem) => (
-                                    <>
-                                      {collectionRenderer().renderDropIndicator?.(
-                                        indexedItem.index,
-                                        "before",
-                                      )}
-                                      {collectionRenderer().renderDropIndicator?.(
-                                        indexedItem.index,
-                                        "on",
-                                      )}
-                                      {local.children(indexedItem.item)}
-                                      {collectionRenderer().renderDropIndicator?.(
-                                        indexedItem.index,
-                                        "after",
-                                      )}
-                                    </>
-                                  )}
-                                </For>
-                              </div>
-                            </Group>
-                          </Section>
-                        </div>
-                      ) : (
-                        <>
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "before")}
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "on")}
-                          {local.children(entry.item.item)}
-                          {collectionRenderer().renderDropIndicator?.(entry.item.index, "after")}
-                        </>
-                      )
-                    }
-                  </For>
-                ) : (
-                  <>
-                    {virtualRange()?.offsetTop ? (
-                      <div
-                        role="presentation"
-                        aria-hidden="true"
-                        style={virtualSpacerStyle(virtualRange()!.offsetTop)}
-                        data-virtualizer-spacer="top"
-                      />
-                    ) : null}
-                    <For each={visibleItems()}>
-                      {(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 (
+      <ListBoxStateContext value={state}>
+        <CollectionRendererContext value={collectionRenderer()}>
+          <DropIndicatorContext value={dropIndicatorContextValue}>
+            <>
+              <Show when={ariaProps.label}>
+                <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
+              </Show>
+              <div
+                {...mergeProps(
+                  domProps(),
+                  cleanListBoxProps(),
+                  cleanFocusProps(),
+                  (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ??
+                    {},
+                )}
+                ref={(el) => {
+                  setListRef(el);
+                  assignRef(local.ref, el);
+                  autocompleteCtx?.collectionRef(el);
+                }}
+                class={renderProps.class()}
+                style={renderProps.style()}
+                data-focused={dataAttr(isFocused())}
+                data-focus-visible={dataAttr(isFocusVisible())}
+                data-disabled={dataAttr(resolveDisabled())}
+                data-empty={dataAttr(isEmpty())}
+                data-layout={stateProps.layout || "stack"}
+                data-orientation={stateProps.orientation || "vertical"}
+                data-drop-target={dataAttr(isRootDropTarget())}
+                slot={local.slot}
+              >
+                <SharedElementTransition>
+                  {parentCollectionRenderer?.isVirtualized ? (
+                    <>
+                      <CollectionRoot
+                        collection={virtualRange() ? collectionItems() : []}
+                        scrollRef={() => listRef()}
+                        persistedKeys={persistedKeys()}
+                      >
+                        {isEmpty() && local.renderEmptyState ? null : hasSections() ? (
+                          <For each={sectionedRenderEntries()}>
+                            {(entry) =>
+                              entry.type === "section" ? (
+                                <div role="presentation" data-section-wrapper>
+                                  <Section class="solidaria-ListBox-section">
+                                    {entry.section.title != null && (
+                                      <Header class="solidaria-ListBox-sectionHeader">
+                                        {entry.section.title}
+                                      </Header>
+                                    )}
+                                    <Group class="solidaria-ListBox-sectionGroup">
+                                      <div role="group" aria-label={entry.section["aria-label"]}>
+                                        <For each={entry.items}>
+                                          {(indexedItem) => (
+                                            <VirtualizerItem index={indexedItem.index}>
+                                              <ListBoxItemWithDropIndicators
+                                                item={indexedItem.item}
+                                                itemIndex={indexedItem.index}
+                                                isLastInLevel={() =>
+                                                  isLastDropItem(indexedItem.index)
+                                                }
+                                                renderItem={local.children}
+                                                renderDropIndicator={renderItemDropIndicator}
+                                              />
+                                            </VirtualizerItem>
+                                          )}
+                                        </For>
+                                      </div>
+                                    </Group>
+                                  </Section>
+                                </div>
+                              ) : (
+                                <VirtualizerItem index={entry.item.index}>
+                                  <ListBoxItemWithDropIndicators
+                                    item={entry.item.item}
+                                    itemIndex={entry.item.index}
+                                    isLastInLevel={() => isLastDropItem(entry.item.index)}
+                                    renderItem={local.children}
+                                    renderDropIndicator={renderItemDropIndicator}
+                                  />
+                                </VirtualizerItem>
+                              )
+                            }
+                          </For>
+                        ) : (
                           <>
-                            {beforeIndicator()}
-                            {onIndicator()}
-                            {local.children(item as T)}
-                            {afterIndicator()}
+                            <For each={visibleItems()}>
+                              {(item, index) => (
+                                <VirtualizerItem
+                                  index={() => (virtualRange()?.start ?? 0) + index()}
+                                >
+                                  <ListBoxItemWithDropIndicators
+                                    item={item as T}
+                                    itemIndex={() => (virtualRange()?.start ?? 0) + index()}
+                                    isLastInLevel={() =>
+                                      isLastDropItem((virtualRange()?.start ?? 0) + index())
+                                    }
+                                    renderItem={local.children}
+                                    renderDropIndicator={renderItemDropIndicator}
+                                  />
+                                </VirtualizerItem>
+                              )}
+                            </For>
+                            <For each={persistedOutsideIndexes()}>
+                              {(index) => (
+                                <PersistedVirtualItem index={index}>
+                                  <ListBoxItemWithDropIndicators
+                                    item={collectionItems()[index] as T}
+                                    itemIndex={() => index}
+                                    isLastInLevel={() => isLastDropItem(index)}
+                                    renderItem={local.children}
+                                    renderDropIndicator={renderItemDropIndicator}
+                                  />
+                                </PersistedVirtualItem>
+                              )}
+                            </For>
                           </>
-                        );
-                      }}
+                        )}
+                      </CollectionRoot>
+                      {isEmpty() && local.renderEmptyState ? (
+                        <div role="option" style={{ display: "contents" }} data-empty-state>
+                          {local.renderEmptyState()}
+                        </div>
+                      ) : null}
+                    </>
+                  ) : isEmpty() && local.renderEmptyState ? (
+                    <div role="option" style={{ display: "contents" }} data-empty-state>
+                      {local.renderEmptyState()}
+                    </div>
+                  ) : hasSections() ? (
+                    <For each={sectionedRenderEntries()}>
+                      {(entry) =>
+                        entry.type === "section" ? (
+                          <div role="presentation" data-section-wrapper>
+                            <Section class="solidaria-ListBox-section">
+                              {entry.section.title != null && (
+                                <Header class="solidaria-ListBox-sectionHeader">
+                                  {entry.section.title}
+                                </Header>
+                              )}
+                              <Group class="solidaria-ListBox-sectionGroup">
+                                <div role="group" aria-label={entry.section["aria-label"]}>
+                                  <For each={entry.items}>
+                                    {(indexedItem) => (
+                                      <ListBoxItemWithDropIndicators
+                                        item={indexedItem.item}
+                                        itemIndex={indexedItem.index}
+                                        isLastInLevel={() => isLastDropItem(indexedItem.index)}
+                                        renderItem={local.children}
+                                        renderDropIndicator={renderItemDropIndicator}
+                                      />
+                                    )}
+                                  </For>
+                                </div>
+                              </Group>
+                            </Section>
+                          </div>
+                        ) : (
+                          <ListBoxItemWithDropIndicators
+                            item={entry.item.item}
+                            itemIndex={entry.item.index}
+                            isLastInLevel={() => isLastDropItem(entry.item.index)}
+                            renderItem={local.children}
+                            renderDropIndicator={renderItemDropIndicator}
+                          />
+                        )
+                      }
                     </For>
-                    {virtualRange()?.offsetBottom ? (
-                      <div
-                        role="presentation"
-                        aria-hidden="true"
-                        style={virtualSpacerStyle(virtualRange()!.offsetBottom)}
-                        data-virtualizer-spacer="bottom"
-                      />
-                    ) : null}
-                  </>
+                  ) : (
+                    <>
+                      <For each={visibleItems()}>
+                        {(item, index) => (
+                          <ListBoxItemWithDropIndicators
+                            item={item as T}
+                            itemIndex={() => (virtualRange()?.start ?? 0) + index()}
+                            isLastInLevel={() =>
+                              isLastDropItem((virtualRange()?.start ?? 0) + index())
+                            }
+                            renderItem={local.children}
+                            renderDropIndicator={renderItemDropIndicator}
+                          />
+                        )}
+                      </For>
+                    </>
+                  )}
+                </SharedElementTransition>
+                {local.hasMore && local.onLoadMore && (
+                  <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />
                 )}
-              </SharedElementTransition>
-              {local.hasMore && local.onLoadMore && (
-                <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />
-              )}
-            </div>
-          </>
-         </DropIndicatorContext.Provider>
-        </CollectionRendererContext.Provider>
-      </ListBoxStateContext.Provider>
-    </ListBoxContext.Provider>
+              </div>
+            </>
+          </DropIndicatorContext>
+        </CollectionRendererContext>
+      </ListBoxStateContext>
+    </ListBoxContext>
   );
 }
 
 /**
- * An option in a listbox.
+ * An item in a listbox.
  */
-export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
+export function ListBoxItem<T>(props: ListBoxItemProps<T>): JSX.Element {
   const [local, ariaProps] = splitProps(props, [
     "class",
     "style",
@@ -1008,7 +1137,7 @@ export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
 
   const context = useContext(ListBoxStateContext);
   if (!context) {
-    throw new Error("ListBoxOption must be used within a ListBox");
+    throw new Error("ListBoxItem must be used within a ListBox");
   }
   const state = context as ListState<T>;
   const listContext = useContext(ListBoxContext) as ListBoxContextValue<T> | null;
@@ -1021,7 +1150,7 @@ export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
         return Boolean(ariaProps.isDisabled || listContext?.isDisabled());
       },
       get "aria-label"() {
-        return ariaProps["aria-label"] ?? local.textValue;
+        return ariaProps["aria-label"];
       },
       get shouldSelectOnPressUp() {
         return ariaProps.shouldSelectOnPressUp;
@@ -1063,9 +1192,6 @@ export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
     },
     renderValues,
   );
-  const hasPrimitiveLabel = () => {
-    return typeof props.children === "string" || typeof props.children === "number";
-  };
 
   const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({
     isSelected: optionAria.isSelected,
@@ -1096,24 +1222,59 @@ export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
   });
 
   const cleanOptionProps = () => {
-    const {
-      ref: _ref1,
-      "aria-describedby": _ariaDescribedby,
-      ...rest
-    } = optionAria.optionProps as Record<string, unknown>;
-    if (!hasPrimitiveLabel() && rest["aria-label"] == null) {
-      delete rest["aria-labelledby"];
-    }
+    const { ref: _ref1, ...rest } = optionAria.optionProps as Record<string, unknown>;
     return rest;
   };
+
+  const optionTextSlots = {
+    slots: {
+      get [DEFAULT_SLOT]() {
+        return optionAria.labelProps;
+      },
+      get label() {
+        return optionAria.labelProps;
+      },
+      get description() {
+        return optionAria.descriptionProps;
+      },
+    },
+  };
+
+  // Styled hosts (S2 ComboBoxItem / PickerItem) emit `<span slot="label">` rather
+  // than `<Text>`. Stamp the slot id onto that node before `createSlotId` probes
+  // the DOM, matching RAC TextContext + useSlotId.
+  createRenderEffect(
+    () => ({
+      el: ref(),
+      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 as Record<string, unknown>, { global: true });
 
+  const selectionMode = () => state.selectionMode();
+
   return (
-    <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+    <SelectionIndicatorContext value={selectionIndicatorContext()}>
       <div
         ref={(el) => {
           setRef(el);
           assignRef(local.ref, el);
+          const dragRef = (
+            draggableItem()?.dragProps as { ref?: (el: HTMLDivElement) => void } | undefined
+          )?.ref;
+          if (typeof dragRef === "function") dragRef(el);
         }}
         {...mergeProps(
           domProps(),
@@ -1123,23 +1284,25 @@ export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
         )}
         class={renderProps.class()}
         style={renderProps.style()}
-        data-selected={optionAria.isSelected() || undefined}
-        data-focused={optionAria.isFocused() || undefined}
-        data-focus-visible={optionAria.isFocusVisible() || undefined}
-        data-pressed={optionAria.isPressed() || undefined}
-        data-hovered={optionAria.isHovered() || undefined}
-        data-disabled={optionAria.isDisabled() || undefined}
-        data-dragging={draggableItem()?.isDragging || undefined}
-        data-drop-target={droppableItem()?.isDropTarget || undefined}
+        data-selected={dataAttr(optionAria.isSelected())}
+        data-focused={dataAttr(optionAria.isFocused())}
+        data-focus-visible={dataAttr(optionAria.isFocusVisible())}
+        data-pressed={dataAttr(optionAria.isPressed())}
+        data-hovered={dataAttr(optionAria.isHovered())}
+        data-disabled={dataAttr(optionAria.isDisabled())}
+        data-dragging={dataAttr(draggableItem()?.isDragging)}
+        data-drop-target={dataAttr(droppableItem()?.isDropTarget)}
+        data-selection-mode={selectionMode() === "none" ? undefined : selectionMode()}
         slot={local.slot}
       >
-        {hasPrimitiveLabel() ? (
-          <span {...optionAria.labelProps}>{renderProps.renderChildren()}</span>
-        ) : (
-          renderProps.renderChildren()
-        )}
+        <Provider values={[[TextContext, optionTextSlots] as [Context<unknown>, unknown]]}>
+          <OptionContent
+            render={renderProps.renderChildrenStable}
+            labelProps={optionAria.labelProps}
+          />
+        </Provider>
       </div>
-    </SelectionIndicatorContext.Provider>
+    </SelectionIndicatorContext>
   );
 }
 
@@ -1147,8 +1310,9 @@ export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
  * Load more sentinel item for listbox collections.
  */
 export function ListBoxLoadMoreItem(props: ListBoxLoadMoreItemProps): JSX.Element {
-  let sentinelRef: HTMLDivElement | undefined;
+  const [sentinel, setSentinel] = createSignal<HTMLDivElement | undefined>();
   const [isPending, setIsPending] = createSignal(false);
+  const scrollOffsetValue = createMemo(() => props.scrollOffset ?? 1);
 
   const isLoading = () => !!props.isLoading || isPending();
 
@@ -1162,28 +1326,31 @@ export function ListBoxLoadMoreItem(props: ListBoxLoadMoreItemProps): JSX.Elemen
     }
   };
 
-  createEffect(() => {
-    if (!sentinelRef || typeof IntersectionObserver !== "function") return;
-
-    const offset = props.scrollOffset ?? 1;
-    const margin = `0px 0px ${100 * offset}% 0px`;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0]?.isIntersecting) {
-          void triggerLoadMore();
-        }
-      },
-      { rootMargin: margin },
-    );
-
-    observer.observe(sentinelRef);
-    return () => observer.disconnect();
-  });
+  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) {
+            void triggerLoadMore();
+          }
+        },
+        { rootMargin: margin },
+      );
+      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,
@@ -1192,24 +1359,29 @@ export function ListBoxLoadMoreItem(props: ListBoxLoadMoreItemProps): JSX.Elemen
     () => ({ isLoading: isLoading() }),
   );
 
+  // RAC ListBoxLoadMoreItem (ListBox.tsx:781-803): always mount the 0×0
+  // sentinel; render the loader `option` only while `isLoading` and children
+  // exist. A visible "Load more" row when idle/`loading` is a local invention.
   return (
     <>
       <div style={{ position: "relative", width: 0, height: 0, overflow: "hidden" }} inert>
-        <div ref={sentinelRef} style={{ position: "absolute", height: "1px", width: "1px" }} />
-      </div>
-      <div
-        role="option"
-        aria-disabled={true}
-        tabIndex={0}
-        onFocus={() => {
-          void triggerLoadMore();
-        }}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        data-loading={isLoading() || undefined}
-      >
-        {renderProps.renderChildren()}
+        <div
+          data-testid="loadMoreSentinel"
+          ref={setSentinel}
+          style={{ position: "absolute", height: "1px", width: "1px" }}
+        />
       </div>
+      <Show when={isLoading() && props.children}>
+        <div
+          role="option"
+          tabindex={-1}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-loading
+        >
+          {renderProps.renderChildren()}
+        </div>
+      </Show>
     </>
   );
 }
@@ -1221,5 +1393,10 @@ export function ListBoxSection(props: ListBoxSectionProps): JSX.Element {
   return <Section {...props} />;
 }
 
-ListBox.Option = ListBoxOption;
+/**
+ * @deprecated Use {@link ListBoxItem}. Removed in a future minor.
+ */
+export const ListBoxOption = ListBoxItem;
+
+ListBox.Option = ListBoxItem;
 ListBox.LoadMoreItem = ListBoxLoadMoreItem;