@proyecto-viviana/solidaria-components 0.2.9 → 0.3.1

package/src/ListBox.tsx

@@ -16,22 +16,21 @@ import {
   useContext,
   For,
   Show,
-} from 'solid-js';
+} from "solid-js";
 import {
   createListBox,
   createOption,
   createFocusRing,
-  createHover,
   mergeProps,
   type AriaListBoxProps,
   type AriaOptionProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createListState,
   type ListState,
   type Key,
   type DropTarget,
-} from '@proyecto-viviana/solid-stately';
+} from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -39,20 +38,20 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-import { SharedElementTransition } from './SharedElementTransition';
+} from "./utils";
+import { SharedElementTransition } from "./SharedElementTransition";
 import {
   SelectionIndicatorContext,
   type SelectionIndicatorContextValue,
-} from './SelectionIndicator';
-import { useVirtualizerContext } from './Virtualizer';
-import { type DragAndDropHooks } from './useDragAndDrop';
+} from "./SelectionIndicator";
+import { useVirtualizerContext } from "./Virtualizer";
+import { type DragAndDropHooks } from "./useDragAndDrop";
 import {
   getNormalizedDropTargetKey,
   mergePersistedKeysIntoVirtualRange,
   useDndPersistedKeys,
   useRenderDropIndicator,
-} from './DragAndDrop';
+} from "./DragAndDrop";
 import {
   CollectionRendererContext,
   Section,
@@ -64,11 +63,7 @@ import {
   useCollectionRenderer,
   isCollectionSection,
   flattenCollectionEntries,
-} from './Collection';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./Collection";
 
 export interface ListBoxRenderProps {
   /** Whether the listbox has focus. */
@@ -81,9 +76,15 @@ export interface ListBoxRenderProps {
   isEmpty: boolean;
 }
 
-export interface ListBoxProps<T>
-  extends Omit<AriaListBoxProps, 'children'>,
-    SlotProps {
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
+
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) return;
+  if (typeof ref === "function") ref(el);
+  else ref.current = el;
+}
+
+export interface ListBoxProps<T> extends Omit<AriaListBoxProps, "children">, SlotProps {
   /** The items to render in the listbox. */
   items: CollectionEntry<T>[];
   /** Function to get the key from an item. */
@@ -93,15 +94,19 @@ export interface ListBoxProps<T>
   /** Function to check if an item is disabled. */
   getDisabled?: (item: T) => boolean;
   /** The selection mode. */
-  selectionMode?: 'none' | 'single' | 'multiple';
+  selectionMode?: "none" | "single" | "multiple";
+  /** The selection behavior (toggle vs replace). */
+  selectionBehavior?: "toggle" | "replace";
+  /** Whether disabled items can still receive focus. */
+  disabledBehavior?: "selection" | "all";
   /** Keys of disabled items. */
   disabledKeys?: Iterable<Key>;
   /** Currently selected keys (controlled). */
-  selectedKeys?: 'all' | Iterable<Key>;
+  selectedKeys?: "all" | Iterable<Key>;
   /** Default selected keys (uncontrolled). */
-  defaultSelectedKeys?: 'all' | Iterable<Key>;
+  defaultSelectedKeys?: "all" | Iterable<Key>;
   /** Handler called when selection changes. */
-  onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+  onSelectionChange?: (keys: "all" | Set<Key>) => void;
   /** The children of the component. A function may be provided to render each item. */
   children: (item: T) => JSX.Element;
   /** The CSS className for the element. */
@@ -116,8 +121,16 @@ export interface ListBoxProps<T>
   isLoading?: boolean;
   /** Called when the load more sentinel becomes visible. */
   onLoadMore?: () => void | Promise<void>;
+  /** Ref for the listbox element. */
+  ref?: RefLike<HTMLUListElement>;
   /** Drag and drop hooks from `useDragAndDrop`. */
   dragAndDropHooks?: DragAndDropHooks<T>;
+  /** Layout hint for styling parity. */
+  layout?: "stack" | "grid";
+  /** Orientation hint for styling parity. */
+  orientation?: "vertical" | "horizontal";
+  /** Slot definitions provided through ListBoxContext. */
+  slots?: Record<string, Partial<ListBoxProps<T>>>;
 }
 
 export interface ListBoxOptionRenderProps {
@@ -136,8 +149,7 @@ export interface ListBoxOptionRenderProps {
 }
 
 export interface ListBoxOptionProps<T>
-  extends Omit<AriaOptionProps, 'children' | 'key'>,
-    SlotProps {
+  extends Omit<AriaOptionProps, "children" | "key">, SlotProps {
   /** The unique key for the option. */
   id: Key;
   /** The item value. */
@@ -150,6 +162,8 @@ export interface ListBoxOptionProps<T>
   style?: StyleOrFunction<ListBoxOptionRenderProps>;
   /** The text value of the option (for typeahead). */
   textValue?: string;
+  /** Ref for the option element. */
+  ref?: RefLike<HTMLLIElement>;
 }
 
 export interface ListBoxLoadMoreItemProps extends SlotProps {
@@ -157,6 +171,8 @@ export interface ListBoxLoadMoreItemProps extends SlotProps {
   onLoadMore: () => void | Promise<void>;
   /** Whether additional items are currently loading. */
   isLoading?: boolean;
+  /** Scroll offset multiplier for early loading trigger (default: 1 = 100% of viewport height). */
+  scrollOffset?: number;
   /** Content for the load more row. */
   children?: JSX.Element;
   /** The CSS className for the element. */
@@ -167,34 +183,58 @@ export interface ListBoxLoadMoreItemProps extends SlotProps {
 
 export interface ListBoxSectionProps extends SectionProps {}
 
-// ============================================
-// CONTEXT
-// ============================================
-
 interface ListBoxContextValue<T> {
   state: ListState<T>;
   isDisabled: () => boolean;
   dragAndDropHooks?: DragAndDropHooks<unknown>;
   dragState?: unknown;
   dropState?: unknown;
+  slots?: Record<string, Partial<ListBoxProps<T>>>;
 }
 
 export const ListBoxContext = createContext<ListBoxContextValue<unknown> | null>(null);
 export const ListBoxStateContext = createContext<ListState<unknown> | null>(null);
 export const ListStateContext = ListBoxStateContext;
 
-// ============================================
-// COMPONENTS
-// ============================================
-
 /**
  * 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 mergedListBoxProps = contextSlotProps
+    ? (mergeProps(contextSlotProps, props) as ListBoxProps<T>)
+    : props;
   const [local, stateProps, ariaProps] = splitProps(
-    props,
-    ['children', 'class', 'style', 'slot', 'renderEmptyState', 'hasMore', 'isLoading', 'onLoadMore', 'dragAndDropHooks'],
-    ['items', 'getKey', 'getTextValue', 'getDisabled', 'disabledKeys', 'selectionMode', 'selectedKeys', 'defaultSelectedKeys', 'onSelectionChange']
+    mergedListBoxProps,
+    [
+      "children",
+      "class",
+      "style",
+      "slot",
+      "renderEmptyState",
+      "hasMore",
+      "isLoading",
+      "onLoadMore",
+      "dragAndDropHooks",
+      "slots",
+      "ref",
+    ],
+    [
+      "items",
+      "getKey",
+      "getTextValue",
+      "getDisabled",
+      "disabledKeys",
+      "disabledBehavior",
+      "selectionMode",
+      "selectionBehavior",
+      "selectedKeys",
+      "defaultSelectedKeys",
+      "onSelectionChange",
+      "layout",
+      "orientation",
+    ],
   );
 
   const flatItems = createMemo<T[]>(() => {
@@ -203,7 +243,6 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
 
   const hasSections = createMemo(() => stateProps.items.some((item) => isCollectionSection(item)));
 
-  // Create list state
   const state = createListState<T>({
     get items() {
       return flatItems();
@@ -223,6 +262,12 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     get selectionMode() {
       return stateProps.selectionMode;
     },
+    get selectionBehavior() {
+      return stateProps.selectionBehavior;
+    },
+    get disabledBehavior() {
+      return stateProps.disabledBehavior;
+    },
     get selectedKeys() {
       return stateProps.selectedKeys;
     },
@@ -234,16 +279,14 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     },
   });
 
-  // Helper to resolve isDisabled
   const resolveDisabled = (): boolean => {
     const disabled = ariaProps.isDisabled;
-    if (typeof disabled === 'function') {
+    if (typeof disabled === "function") {
       return (disabled as () => boolean)();
     }
     return !!disabled;
   };
 
-  // Create listbox aria props
   const listBoxAria = createListBox(
     {
       ...ariaProps,
@@ -251,13 +294,11 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
         return resolveDisabled();
       },
     },
-    state
+    state,
   );
 
-  // Create focus ring
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
-  // Render props values
   const renderValues = createMemo<ListBoxRenderProps>(() => ({
     isFocused: state.isFocused() || isFocused(),
     isFocusVisible: isFocusVisible(),
@@ -265,23 +306,20 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     isEmpty: state.collection().size === 0,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-ListBox',
+      defaultClassName: "solidaria-ListBox",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
   const domProps = createMemo(() => {
     const filtered = filterDOMProps(ariaProps as Record<string, unknown>, { global: true });
     return filtered;
   });
 
-  // Remove ref from spread props
   const cleanListBoxProps = () => {
     const { ref: _ref1, ...rest } = listBoxAria.listBoxProps as Record<string, unknown>;
     return rest;
@@ -298,18 +336,25 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
 
   const isEmpty = () => stateProps.items.length === 0;
   const parentCollectionRenderer = useCollectionRenderer<unknown>();
-  const getItemNodes = createMemo(() => Array.from(state.collection()).filter((node) => node.type === 'item'));
-  const getDropTargetByIndex = (index: number, position: 'before' | 'after' | 'on'): DropTarget | null => {
+  const getItemNodes = createMemo(() =>
+    Array.from(state.collection()).filter((node) => node.type === "item"),
+  );
+  const getDropTargetByIndex = (
+    index: number,
+    position: "before" | "after" | "on",
+  ): DropTarget | null => {
     const node = getItemNodes()[index];
     if (!node) return null;
-    return { type: 'item', key: node.key, dropPosition: position };
+    return { type: "item", key: node.key, dropPosition: position };
   };
   const hasDroppableDnd = createMemo(() => {
     const hooks = local.dragAndDropHooks;
     return Boolean(
       hooks?.useDroppableCollectionState &&
       hooks.useDroppableCollection &&
-      (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate)
+      (hooks.dropTargetDelegate ||
+        parentCollectionRenderer?.dropTargetDelegate ||
+        hooks.ListDropTargetDelegate),
     );
   });
   const dropState = createMemo(() => {
@@ -338,22 +383,23 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     const hooks = local.dragAndDropHooks;
     const activeDropState = dropState();
     if (!hooks?.useDroppableCollection || !activeDropState) return undefined;
-    const resolveDirection = (): 'ltr' | 'rtl' => {
+    const resolveDirection = (): "ltr" | "rtl" => {
       const el = listRef();
-      if (el && typeof window !== 'undefined' && typeof window.getComputedStyle === 'function') {
+      if (el && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
         const dir = window.getComputedStyle(el).direction;
-        if (dir === 'rtl') return 'rtl';
+        if (dir === "rtl") return "rtl";
       }
-      return typeof document !== 'undefined' && document.dir === 'rtl' ? 'rtl' : 'ltr';
+      return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
     };
-    const dropTargetDelegate = hooks.dropTargetDelegate
-      ?? parentCollectionRenderer?.dropTargetDelegate
-      ?? (hooks.ListDropTargetDelegate
+    const dropTargetDelegate =
+      hooks.dropTargetDelegate ??
+      parentCollectionRenderer?.dropTargetDelegate ??
+      (hooks.ListDropTargetDelegate
         ? new hooks.ListDropTargetDelegate(
-          () => state.collection(),
-          () => listRef(),
-          { layout: 'stack', orientation: 'vertical', direction: resolveDirection() }
-        )
+            () => state.collection(),
+            () => listRef(),
+            { layout: "stack", orientation: "vertical", direction: resolveDirection() },
+          )
         : undefined);
     if (!dropTargetDelegate) return undefined;
     return hooks.useDroppableCollection(
@@ -369,16 +415,18 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
         },
       },
       activeDropState,
-      () => listRef()
+      () => listRef(),
     );
   });
   const isRootDropTarget = createMemo(() => {
-    return Boolean(dropState()?.target?.type === 'root');
+    return Boolean(dropState()?.target?.type === "root");
   });
-  const dndRenderDropIndicator = createMemo(() => useRenderDropIndicator(local.dragAndDropHooks, dropState()));
-  const dndDropIndicator = (index: number, position: 'before' | 'after' | 'on') => {
+  const dndRenderDropIndicator = createMemo(() =>
+    useRenderDropIndicator(local.dragAndDropHooks, dropState()),
+  );
+  const dndDropIndicator = (index: number, position: "before" | "after" | "on") => {
     const target = getDropTargetByIndex(index, position);
-    if (!target || target.type !== 'item') return undefined;
+    if (!target || target.type !== "item") return undefined;
     return dndRenderDropIndicator()?.(target);
   };
   const virtualizer = useVirtualizerContext();
@@ -386,7 +434,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     { focusedKey: state.focusedKey },
     local.dragAndDropHooks,
     dropState(),
-    state.collection()
+    state.collection(),
   );
   const virtualRange = createMemo(() => {
     if (!virtualizer || !parentCollectionRenderer?.isVirtualized || hasSections()) return null;
@@ -398,20 +446,31 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
     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 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,
+      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,
+      persistedIndexes,
+      stateProps.items.length,
+      virtualizer,
+      80,
+      {
+        forceIncludeIndexes,
+        forceIncludeMaxSpan: 320,
+      },
+    );
   });
   createEffect(() => {
     if (!virtualizer || !parentCollectionRenderer?.isVirtualized) return;
-    const getItemNodes = () => Array.from(state.collection()).filter((node) => node.type === 'item');
+    const getItemNodes = () =>
+      Array.from(state.collection()).filter((node) => node.type === "item");
     virtualizer.setDropTargetItemCountResolver(() => getItemNodes().length);
     virtualizer.setDropTargetIndexResolver((key) => {
       const index = getItemNodes().findIndex((node) => node.key === key);
@@ -422,7 +481,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
       if (!node) return target;
       return {
         ...target,
-        key: typeof node.key === 'string' || typeof node.key === 'number' ? node.key : undefined,
+        key: typeof node.key === "string" || typeof node.key === "number" ? node.key : undefined,
       };
     });
     onCleanup(() => {
@@ -445,7 +504,7 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
           index: globalIndex++,
         }));
         return {
-          type: 'section' as const,
+          type: "section" as const,
           section: entry,
           items: sectionItems,
         };
@@ -455,27 +514,31 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
         index: globalIndex++,
       };
       return {
-        type: 'item' as const,
+        type: "item" as const,
         item: indexedItem,
       };
     });
   });
   const collectionRenderer = createMemo<CollectionRendererContextValue<unknown>>(() => ({
     ...parentCollectionRenderer,
-    renderItem: (item) => props.children(item as T),
+    renderItem: (item) => local.children(item as T),
     renderDropIndicator: (index, position) =>
-      dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position),
+      dndDropIndicator(index, position) ??
+      parentCollectionRenderer?.renderDropIndicator?.(index, position),
   }));
 
   return (
     <ListBoxContext.Provider
-      value={{
-        state,
-        isDisabled: resolveDisabled,
-        dragAndDropHooks: local.dragAndDropHooks as DragAndDropHooks<unknown> | undefined,
-        dragState: dragState(),
-        dropState: dropState(),
-      }}
+      value={
+        {
+          state,
+          isDisabled: resolveDisabled,
+          dragAndDropHooks: local.dragAndDropHooks as DragAndDropHooks<unknown> | undefined,
+          dragState: dragState(),
+          dropState: dropState(),
+          slots: local.slots,
+        } as ListBoxContextValue<unknown>
+      }
     >
       <ListBoxStateContext.Provider value={state}>
         <CollectionRendererContext.Provider value={collectionRenderer()}>
@@ -488,10 +551,12 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
                 domProps(),
                 cleanListBoxProps(),
                 cleanFocusProps(),
-                (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ?? {}
+                (droppableCollection()?.collectionProps as Record<string, unknown> | undefined) ??
+                  {},
               )}
               ref={(el) => {
                 setListRef(el);
+                assignRef(local.ref, el);
               }}
               class={renderProps.class()}
               style={renderProps.style()}
@@ -499,83 +564,104 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
               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
-                ? local.renderEmptyState()
-                : hasSections()
-                  ? (
-                    <For each={sectionedRenderEntries()}>
-                      {(entry) =>
-                        entry.type === 'section'
-                          ? (
-                            <li 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">
-                                  <ul role="group" aria-label={entry.section['aria-label']}>
-                                    <For each={entry.items}>
-                                      {(indexedItem) => (
-                                        <>
-                                          {collectionRenderer().renderDropIndicator?.(indexedItem.index, 'before')}
-                                          {collectionRenderer().renderDropIndicator?.(indexedItem.index, 'on')}
-                                          {props.children(indexedItem.item)}
-                                          {collectionRenderer().renderDropIndicator?.(indexedItem.index, 'after')}
-                                        </>
+                {isEmpty() && local.renderEmptyState ? (
+                  <li role="option" style={{ display: "contents" }} data-empty-state>
+                    {local.renderEmptyState()}
+                  </li>
+                ) : hasSections() ? (
+                  <For each={sectionedRenderEntries()}>
+                    {(entry) =>
+                      entry.type === "section" ? (
+                        <li 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">
+                              <ul role="group" aria-label={entry.section["aria-label"]}>
+                                <For each={entry.items}>
+                                  {(indexedItem) => (
+                                    <>
+                                      {collectionRenderer().renderDropIndicator?.(
+                                        indexedItem.index,
+                                        "before",
                                       )}
-                                    </For>
-                                  </ul>
-                                </Group>
-                              </Section>
-                            </li>
-                          )
-                          : (
-                            <>
-                              {collectionRenderer().renderDropIndicator?.(entry.item.index, 'before')}
-                              {collectionRenderer().renderDropIndicator?.(entry.item.index, 'on')}
-                              {props.children(entry.item.item)}
-                              {collectionRenderer().renderDropIndicator?.(entry.item.index, 'after')}
-                            </>
-                          )
-                      }
+                                      {collectionRenderer().renderDropIndicator?.(
+                                        indexedItem.index,
+                                        "on",
+                                      )}
+                                      {local.children(indexedItem.item)}
+                                      {collectionRenderer().renderDropIndicator?.(
+                                        indexedItem.index,
+                                        "after",
+                                      )}
+                                    </>
+                                  )}
+                                </For>
+                              </ul>
+                            </Group>
+                          </Section>
+                        </li>
+                      ) : (
+                        <>
+                          {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 ? (
+                      <li
+                        role="presentation"
+                        aria-hidden="true"
+                        style={{ height: `${virtualRange()!.offsetTop}px` }}
+                        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 (
+                          <>
+                            {beforeIndicator()}
+                            {onIndicator()}
+                            {local.children(item as T)}
+                            {afterIndicator()}
+                          </>
+                        );
+                      }}
                     </For>
-                  )
-                  : (
-                    <>
-                      {virtualRange()?.offsetTop
-                        ? <li role="presentation" aria-hidden="true" style={{ height: `${virtualRange()!.offsetTop}px` }} 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 (
-                            <>
-                              {beforeIndicator()}
-                              {onIndicator()}
-                              {props.children(item as T)}
-                              {afterIndicator()}
-                            </>
-                          );
-                        }}
-                      </For>
-                      {virtualRange()?.offsetBottom
-                        ? <li role="presentation" aria-hidden="true" style={{ height: `${virtualRange()!.offsetBottom}px` }} data-virtualizer-spacer="bottom" />
-                        : null}
-                    </>
-                  )
-              }
+                    {virtualRange()?.offsetBottom ? (
+                      <li
+                        role="presentation"
+                        aria-hidden="true"
+                        style={{ height: `${virtualRange()!.offsetBottom}px` }}
+                        data-virtualizer-spacer="bottom"
+                      />
+                    ) : null}
+                  </>
+                )}
               </SharedElementTransition>
               {local.hasMore && local.onLoadMore && (
-                <ListBoxLoadMoreItem
-                  onLoadMore={local.onLoadMore}
-                  isLoading={local.isLoading}
-                />
+                <ListBoxLoadMoreItem onLoadMore={local.onLoadMore} isLoading={local.isLoading} />
               )}
             </ul>
           </>
@@ -590,120 +676,123 @@ export function ListBox<T>(props: ListBoxProps<T>): JSX.Element {
  */
 export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
   const [local, ariaProps] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-    'id',
-    'item',
-    'textValue',
+    "class",
+    "style",
+    "slot",
+    "id",
+    "item",
+    "textValue",
+    "ref",
   ]);
 
-  // Get state from context
   const context = useContext(ListBoxStateContext);
   if (!context) {
-    throw new Error('ListBoxOption must be used within a ListBox');
+    throw new Error("ListBoxOption must be used within a ListBox");
   }
   const state = context as ListState<T>;
   const listContext = useContext(ListBoxContext) as ListBoxContextValue<T> | null;
   const [ref, setRef] = createSignal<HTMLLIElement | null>(null);
 
-  // Create option aria props
   const optionAria = createOption<T>(
     {
       key: local.id,
       get isDisabled() {
         return Boolean(ariaProps.isDisabled || listContext?.isDisabled());
       },
-      get 'aria-label'() {
-        return ariaProps['aria-label'] ?? local.textValue;
+      get "aria-label"() {
+        return ariaProps["aria-label"] ?? local.textValue;
       },
       get shouldSelectOnPressUp() {
         return ariaProps.shouldSelectOnPressUp;
       },
+      get shouldFocusOnHover() {
+        return ariaProps.shouldFocusOnHover;
+      },
+      get onHoverStart() {
+        return ariaProps.onHoverStart;
+      },
+      get onHoverEnd() {
+        return ariaProps.onHoverEnd;
+      },
+      get onHoverChange() {
+        return ariaProps.onHoverChange;
+      },
     },
-    state
+    state,
   );
 
-  // Create hover
-  const { isHovered, hoverProps } = createHover({
-    get isDisabled() {
-      return optionAria.isDisabled();
-    },
-  });
-
-  // Render props values
   const renderValues = createMemo<ListBoxOptionRenderProps>(() => ({
     isSelected: optionAria.isSelected(),
     isFocused: optionAria.isFocused(),
     isFocusVisible: optionAria.isFocusVisible(),
     isPressed: optionAria.isPressed(),
-    isHovered: isHovered(),
+    isHovered: optionAria.isHovered(),
     isDisabled: optionAria.isDisabled(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-ListBox-option',
+      defaultClassName: "solidaria-ListBox-option",
     },
-    renderValues
+    renderValues,
   );
   const hasPrimitiveLabel = () => {
-    return typeof props.children === 'string' || typeof props.children === 'number';
+    return typeof props.children === "string" || typeof props.children === "number";
   };
 
   const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({
     isSelected: optionAria.isSelected,
   }));
   const draggableItem = createMemo(() => {
-    if (!listContext?.dragAndDropHooks?.useDraggableItem || !listContext.dragState) return undefined;
+    if (!listContext?.dragAndDropHooks?.useDraggableItem || !listContext.dragState)
+      return undefined;
     return listContext.dragAndDropHooks.useDraggableItem(
       {
         key: local.id as string | number,
       },
-      listContext.dragState as Parameters<NonNullable<DragAndDropHooks<T>['useDraggableItem']>>[1]
+      listContext.dragState as Parameters<NonNullable<DragAndDropHooks<T>["useDraggableItem"]>>[1],
     );
   });
   const droppableItem = createMemo(() => {
-    if (!listContext?.dragAndDropHooks?.useDroppableItem || !listContext.dropState) return undefined;
+    if (!listContext?.dragAndDropHooks?.useDroppableItem || !listContext.dropState)
+      return undefined;
     return listContext.dragAndDropHooks.useDroppableItem(
       {
         key: local.id as string | number,
       },
-      listContext.dropState as Parameters<NonNullable<DragAndDropHooks<T>['useDroppableItem']>>[1],
-      () => ref()
+      listContext.dropState as Parameters<NonNullable<DragAndDropHooks<T>["useDroppableItem"]>>[1],
+      () => ref(),
     );
   });
 
-  // Remove ref from spread props
   const cleanOptionProps = () => {
     const {
       ref: _ref1,
-      'aria-describedby': _ariaDescribedby,
+      "aria-describedby": _ariaDescribedby,
       ...rest
     } = optionAria.optionProps as Record<string, unknown>;
-    if (!hasPrimitiveLabel() && rest['aria-label'] == null) {
-      delete rest['aria-labelledby'];
+    if (!hasPrimitiveLabel() && rest["aria-label"] == null) {
+      delete rest["aria-labelledby"];
     }
     return rest;
   };
-  const cleanHoverProps = () => {
-    const { ref: _ref2, ...rest } = hoverProps as Record<string, unknown>;
-    return rest;
-  };
+  const domProps = () => filterDOMProps(ariaProps as Record<string, unknown>, { global: true });
 
   return (
     <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
       <li
-        ref={setRef}
+        ref={(el) => {
+          setRef(el);
+          assignRef(local.ref, el);
+        }}
         {...mergeProps(
+          domProps(),
           cleanOptionProps(),
-          cleanHoverProps(),
           (draggableItem()?.dragProps as Record<string, unknown> | undefined) ?? {},
-          (droppableItem()?.dropProps as Record<string, unknown> | undefined) ?? {}
+          (droppableItem()?.dropProps as Record<string, unknown> | undefined) ?? {},
         )}
         class={renderProps.class()}
         style={renderProps.style()}
@@ -711,14 +800,17 @@ export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
         data-focused={optionAria.isFocused() || undefined}
         data-focus-visible={optionAria.isFocusVisible() || undefined}
         data-pressed={optionAria.isPressed() || undefined}
-        data-hovered={isHovered() || undefined}
+        data-hovered={optionAria.isHovered() || undefined}
         data-disabled={optionAria.isDisabled() || undefined}
         data-dragging={draggableItem()?.isDragging || undefined}
         data-drop-target={droppableItem()?.isDropTarget || undefined}
+        slot={local.slot}
       >
-        {hasPrimitiveLabel()
-          ? <span {...optionAria.labelProps}>{renderProps.renderChildren()}</span>
-          : renderProps.renderChildren()}
+        {hasPrimitiveLabel() ? (
+          <span {...optionAria.labelProps}>{renderProps.renderChildren()}</span>
+        ) : (
+          renderProps.renderChildren()
+        )}
       </li>
     </SelectionIndicatorContext.Provider>
   );
@@ -728,7 +820,7 @@ export function ListBoxOption<T>(props: ListBoxOptionProps<T>): JSX.Element {
  * Load more sentinel item for listbox collections.
  */
 export function ListBoxLoadMoreItem(props: ListBoxLoadMoreItemProps): JSX.Element {
-  let ref: HTMLLIElement | undefined;
+  let sentinelRef: HTMLDivElement | undefined;
   const [isPending, setIsPending] = createSignal(false);
 
   const isLoading = () => !!props.isLoading || isPending();
@@ -744,44 +836,52 @@ export function ListBoxLoadMoreItem(props: ListBoxLoadMoreItemProps): JSX.Elemen
   };
 
   createEffect(() => {
-    if (!ref || typeof IntersectionObserver !== 'function') return;
-
-    const observer = new IntersectionObserver((entries) => {
-      const entry = entries[0];
-      if (entry?.isIntersecting) {
-        void triggerLoadMore();
-      }
-    });
+    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(ref);
+    observer.observe(sentinelRef);
     return () => observer.disconnect();
   });
 
   const renderProps = useRenderProps(
     {
-      children: props.children ?? (() => (isLoading() ? 'Loading more...' : 'Load more')),
+      children: props.children ?? (() => (isLoading() ? "Loading more..." : "Load more")),
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-ListBox-loadMore',
+      defaultClassName: "solidaria-ListBox-loadMore",
     },
-    () => ({ isLoading: isLoading() })
+    () => ({ isLoading: isLoading() }),
   );
 
   return (
-    <li
-      ref={ref}
-      role="option"
-      aria-disabled={true}
-      tabIndex={0}
-      onFocus={() => {
-        void triggerLoadMore();
-      }}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      data-loading={isLoading() || undefined}
-    >
-      {renderProps.renderChildren()}
-    </li>
+    <>
+      <li style={{ position: "relative", width: 0, height: 0, overflow: "hidden" }} inert>
+        <div ref={sentinelRef} style={{ position: "absolute", height: "1px", width: "1px" }} />
+      </li>
+      <li
+        role="option"
+        aria-disabled={true}
+        tabIndex={0}
+        onFocus={() => {
+          void triggerLoadMore();
+        }}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-loading={isLoading() || undefined}
+      >
+        {renderProps.renderChildren()}
+      </li>
+    </>
   );
 }
 
@@ -792,6 +892,5 @@ export function ListBoxSection(props: ListBoxSectionProps): JSX.Element {
   return <Section {...props} />;
 }
 
-// Attach Option as a static property
 ListBox.Option = ListBoxOption;
 ListBox.LoadMoreItem = ListBoxLoadMoreItem;