@proyecto-viviana/solidaria-components 0.2.9 → 0.3.1

package/src/Select.tsx

@@ -9,12 +9,16 @@ import {
   type JSX,
   type Accessor,
   createContext,
+  createEffect,
   createMemo,
+  createSignal,
+  createUniqueId,
   splitProps,
   useContext,
   For,
   Show,
-} from 'solid-js';
+  untrack,
+} from "solid-js";
 import {
   createSelect,
   createHiddenSelect,
@@ -23,17 +27,22 @@ import {
   createHover,
   createInteractOutside,
   FocusScope,
+  focusSafely,
+  mergeProps,
   type AriaSelectProps,
   type AriaListBoxProps,
   type AriaOptionProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createSelectState,
   type ListState,
   type SelectState,
   type Key,
   type CollectionNode,
-} from '@proyecto-viviana/solid-stately';
+  DEFAULT_VALIDATION_RESULT,
+  type ValidationResult,
+} from "@proyecto-viviana/solid-stately";
+import { FieldErrorContext, type FieldErrorContextValue } from "./FieldError";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -41,15 +50,43 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
+} from "./utils";
 import {
   SelectionIndicatorContext,
   type SelectionIndicatorContextValue,
-} from './SelectionIndicator';
+} from "./SelectionIndicator";
+import { ListBoxLoadMoreItem } from "./ListBox";
 
-// ============================================
-// TYPES
-// ============================================
+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;
+  }
+}
+
+function getNativeSelectValidation(select: HTMLSelectElement): ValidationResult {
+  return {
+    isInvalid: !select.validity.valid,
+    validationDetails: {
+      badInput: select.validity.badInput,
+      customError: select.validity.customError,
+      patternMismatch: select.validity.patternMismatch,
+      rangeOverflow: select.validity.rangeOverflow,
+      rangeUnderflow: select.validity.rangeUnderflow,
+      stepMismatch: select.validity.stepMismatch,
+      tooLong: select.validity.tooLong,
+      tooShort: select.validity.tooShort,
+      typeMismatch: select.validity.typeMismatch,
+      valueMissing: select.validity.valueMissing,
+      valid: select.validity.valid,
+    },
+    validationErrors: select.validationMessage ? [select.validationMessage] : [],
+  };
+}
 
 export interface SelectRenderProps {
   /** Whether the select is open. */
@@ -66,9 +103,7 @@ export interface SelectRenderProps {
   isSelected: boolean;
 }
 
-export interface SelectProps<T>
-  extends Omit<AriaSelectProps, 'children'>,
-    SlotProps {
+export interface SelectProps<T> extends Omit<AriaSelectProps, "children">, SlotProps {
   /** The items to render in the select. */
   items: T[];
   /** Function to get the key from an item. */
@@ -80,19 +115,19 @@ export interface SelectProps<T>
   /** Keys of disabled items. */
   disabledKeys?: Iterable<Key>;
   /** Selection mode. */
-  selectionMode?: 'single' | 'multiple';
+  selectionMode?: "single" | "multiple";
   /** The currently selected key (controlled). */
   selectedKey?: Key | null;
   /** The default selected key (uncontrolled). */
   defaultSelectedKey?: Key | null;
   /** Currently selected keys (controlled, for multiple selection). */
-  selectedKeys?: 'all' | Iterable<Key>;
+  selectedKeys?: "all" | Iterable<Key>;
   /** Default selected keys (uncontrolled, for multiple selection). */
-  defaultSelectedKeys?: 'all' | Iterable<Key>;
+  defaultSelectedKeys?: "all" | Iterable<Key>;
   /** Handler called when selection changes. */
   onSelectionChange?: (key: Key | null) => void;
   /** Handler called when selected keys change. */
-  onSelectionChangeKeys?: (keys: 'all' | Set<Key>) => void;
+  onSelectionChangeKeys?: (keys: "all" | Set<Key>) => void;
   /** Whether the select is open (controlled). */
   isOpen?: boolean;
   /** Whether the select is open by default (uncontrolled). */
@@ -104,16 +139,25 @@ export interface SelectProps<T>
   /** The name of the select, used when submitting an HTML form. */
   name?: string;
   /** The children of the component (compound components: SelectTrigger, SelectListBox). */
-  children: JSX.Element;
+  children: RenderChildren<SelectRenderProps>;
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<SelectRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<SelectRenderProps>;
+  /** Custom renderer for the outer select element. */
+  render?: (
+    props: JSX.HTMLAttributes<HTMLDivElement>,
+    renderProps: SelectRenderProps,
+  ) => JSX.Element;
+  /** Ref for the outer select element. */
+  ref?: RefLike<HTMLDivElement>;
 }
 
 export interface SelectValueRenderProps<T> {
   /** The selected item. */
   selectedItem: CollectionNode<T> | null;
+  /** The selected items. */
+  selectedItems: CollectionNode<T>[];
   /** The text value of the selected item. */
   selectedText: string | null;
   /** Whether a value is selected. */
@@ -163,6 +207,18 @@ export interface SelectListBoxRenderProps {
 export interface SelectListBoxProps<T> extends SlotProps {
   /** The children of the listbox. A function may be provided to render each item. */
   children?: (item: T) => JSX.Element;
+  /** Content to display when the listbox has no items. */
+  renderEmptyState?: () => JSX.Element;
+  /** Called when the load more sentinel becomes visible. */
+  onLoadMore?: () => void | Promise<void>;
+  /** Whether additional items are currently loading. */
+  isLoading?: boolean;
+  /** Content to display in the load more sentinel row. */
+  renderLoadMore?: () => JSX.Element | undefined;
+  /** CSS class for the load more sentinel row. */
+  loadMoreClass?: ClassNameOrFunction<{ isLoading: boolean }>;
+  /** Whether the listbox is rendered inside an overlay popover. */
+  isInPopover?: boolean;
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<SelectListBoxRenderProps>;
   /** The inline style for the element. */
@@ -184,9 +240,7 @@ export interface SelectOptionRenderProps {
   isDisabled: boolean;
 }
 
-export interface SelectOptionProps<T>
-  extends Omit<AriaOptionProps, 'children' | 'key'>,
-    SlotProps {
+export interface SelectOptionProps<T> extends Omit<AriaOptionProps, "children" | "key">, SlotProps {
   /** The unique key for the option. */
   id: Key;
   /** The item value. */
@@ -201,16 +255,17 @@ export interface SelectOptionProps<T>
   textValue?: string;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 interface SelectContextValue<T> {
   state: SelectState<T>;
+  rootRef: Accessor<HTMLElement | null>;
+  triggerRef: Accessor<HTMLElement | null>;
+  setTriggerRef: (el: HTMLElement | null) => void;
   triggerProps: JSX.HTMLAttributes<HTMLElement>;
   valueProps: JSX.HTMLAttributes<HTMLElement>;
   labelProps: JSX.HTMLAttributes<HTMLElement>;
   menuProps: JSX.HTMLAttributes<HTMLElement>;
+  errorMessageProps?: JSX.HTMLAttributes<HTMLElement>;
+  validation?: ValidationResult;
   isOpen: Accessor<boolean>;
   isFocused: Accessor<boolean>;
   isFocusVisible: Accessor<boolean>;
@@ -218,35 +273,67 @@ interface SelectContextValue<T> {
   placeholder?: string;
   items: T[];
   renderItem?: (item: T) => JSX.Element;
+  slots?: Record<string, Partial<SelectProps<T>>>;
+  autoFocus?: boolean;
 }
 
 export const SelectContext = createContext<SelectContextValue<unknown> | null>(null);
 export const SelectStateContext = createContext<SelectState<unknown> | null>(null);
 export const SelectValueContext = SelectContext;
 
-// ============================================
-// COMPONENTS
-// ============================================
+const selectRootLabelProps = new Set([
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-details",
+]);
 
 /**
  * A select displays a collapsible list of options and allows a user to select one of them.
  */
 export function Select<T>(props: SelectProps<T>): JSX.Element {
+  const parentContext = useContext(SelectContext) as SelectContextValue<T> | null;
+  const contextSlotProps = parentContext?.slots?.[props.slot ?? "default"] as
+    | Partial<SelectProps<T>>
+    | undefined;
+  const mergedSelectProps = (
+    contextSlotProps ? mergeProps(contextSlotProps, props) : props
+  ) as SelectProps<T>;
   const [local, stateProps, ariaProps] = splitProps(
-    props,
-    ['class', 'style', 'slot'],
-    ['items', 'getKey', 'getTextValue', 'getDisabled', 'disabledKeys', 'selectionMode', 'selectedKey', 'defaultSelectedKey', 'selectedKeys', 'defaultSelectedKeys', 'onSelectionChange', 'onSelectionChangeKeys', 'isOpen', 'defaultOpen', 'onOpenChange', 'name']
+    mergedSelectProps,
+    ["class", "style", "render", "ref", "slot", "children"],
+    [
+      "items",
+      "getKey",
+      "getTextValue",
+      "getDisabled",
+      "disabledKeys",
+      "selectionMode",
+      "selectedKey",
+      "defaultSelectedKey",
+      "selectedKeys",
+      "defaultSelectedKeys",
+      "onSelectionChange",
+      "onSelectionChangeKeys",
+      "isOpen",
+      "defaultOpen",
+      "onOpenChange",
+      "name",
+    ],
   );
+  let rootRef: HTMLDivElement | undefined;
+  const [selectValidation, setSelectValidation] =
+    createSignal<ValidationResult>(DEFAULT_VALIDATION_RESULT);
+  const errorMessageId = createUniqueId();
 
   const resolveDisabled = (): boolean => {
     const disabled = ariaProps.isDisabled;
-    if (typeof disabled === 'function') {
+    if (typeof disabled === "function") {
       return (disabled as () => boolean)();
     }
     return !!disabled;
   };
 
-  // Create select state
   const state = createSelectState<T>({
     get items() {
       return stateProps.items;
@@ -301,48 +388,74 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     },
   });
 
-  // Create select aria props
-  const { labelProps, triggerProps, valueProps, menuProps, isFocused, isFocusVisible, isOpen } = createSelect<T>(
-    ariaProps,
-    state
-  );
+  const selectAriaProps = createMemo(() => {
+    const clean: Record<string, unknown> = {};
+    for (const key in ariaProps as Record<string, unknown>) {
+      if (!key.startsWith("data-")) {
+        clean[key] = (ariaProps as Record<string, unknown>)[key];
+      }
+    }
+    return clean as typeof ariaProps;
+  });
+
+  const { labelProps, triggerProps, valueProps, menuProps, isFocused, isFocusVisible, isOpen } =
+    createSelect<T>(selectAriaProps, state);
 
-  // Create hover for wrapper
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return resolveDisabled();
     },
   });
 
-  // Render props values
   const renderValues = createMemo<SelectRenderProps>(() => ({
     isOpen: isOpen(),
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible(),
     isDisabled: resolveDisabled(),
     isRequired: !!ariaProps.isRequired,
-    isSelected: state.selectionMode() === 'multiple'
-      ? state.selectedKeys() === 'all' || (state.selectedKeys() as Set<Key>).size > 0
-      : state.selectedKey() != null,
+    isSelected:
+      state.selectionMode() === "multiple"
+        ? state.selectedKeys() === "all" || (state.selectedKeys() as Set<Key>).size > 0
+        : state.selectedKey() != null,
   }));
+  const childRenderValues: SelectRenderProps = {
+    get isOpen() {
+      return isOpen();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get isFocusVisible() {
+      return isFocusVisible();
+    },
+    get isDisabled() {
+      return resolveDisabled();
+    },
+    get isRequired() {
+      return !!ariaProps.isRequired;
+    },
+    get isSelected() {
+      return hasSelection();
+    },
+  };
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Select',
+      defaultClassName: "solidaria-Select",
     },
-    renderValues
+    renderValues,
   );
 
-  // Filter DOM props
   const domProps = createMemo(() => {
     const filtered = filterDOMProps(ariaProps as Record<string, unknown>, { global: true });
+    for (const key of selectRootLabelProps) {
+      delete filtered[key];
+    }
     return filtered;
   });
 
-  // Remove ref from hover props
   const cleanHoverProps = () => {
     const { ref: _ref, ...rest } = hoverProps as Record<string, unknown>;
     return rest;
@@ -351,80 +464,264 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     const { ref: _ref, ...rest } = labelProps as Record<string, unknown>;
     return rest;
   };
+  const setRootRef = (el: HTMLDivElement) => {
+    rootRef = el;
+    assignRef(local.ref, el);
+  };
+  const validation = createMemo<ValidationResult>(() => {
+    const current = selectValidation();
+    if (current.isInvalid || !ariaProps.isInvalid) {
+      return current;
+    }
+
+    return {
+      ...DEFAULT_VALIDATION_RESULT,
+      isInvalid: true,
+    };
+  });
+  const isInvalid = createMemo(() => validation().isInvalid);
+  const triggerDescribedBy = () => {
+    const ids = [
+      (triggerProps as { "aria-describedby"?: string })["aria-describedby"],
+      isInvalid() ? errorMessageId : undefined,
+    ]
+      .filter(Boolean)
+      .join(" ")
+      .split(" ")
+      .filter(Boolean);
+    return ids.length ? Array.from(new Set(ids)).join(" ") : undefined;
+  };
+  const triggerPropsWithValidation = () =>
+    ({
+      ...triggerProps,
+      "aria-describedby": triggerDescribedBy(),
+    }) as JSX.HTMLAttributes<HTMLElement>;
+  const fieldErrorContext: FieldErrorContextValue = {
+    get validation() {
+      return validation();
+    },
+    get errorMessageProps() {
+      return { id: errorMessageId };
+    },
+  };
+  const focusTrigger = () => {
+    triggerRef?.focus();
+  };
+  const hasSelection = () =>
+    state.selectionMode() === "multiple"
+      ? state.selectedKeys() === "all" || (state.selectedKeys() as Set<Key>).size > 0
+      : state.selectedKey() != null;
+  const hasNativeValidation = () => (ariaProps.validationBehavior ?? "native") === "native";
+  const getSelectValidation = (select: HTMLSelectElement): ValidationResult => {
+    if (ariaProps.isRequired && !hasSelection()) {
+      return {
+        isInvalid: true,
+        validationDetails: {
+          badInput: false,
+          customError: false,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          typeMismatch: false,
+          valueMissing: true,
+          valid: false,
+        },
+        validationErrors: [select.validationMessage || "Constraints not satisfied"],
+      };
+    }
+    return getNativeSelectValidation(select);
+  };
 
-  // Create hidden select for form submission
   const { containerProps, selectProps: hiddenSelectProps } = createHiddenSelect({
     state,
     name: stateProps.name,
+    form: ariaProps.form,
+    isRequired: ariaProps.isRequired,
+    validationBehavior: ariaProps.validationBehavior ?? "native",
     get isDisabled() {
       return resolveDisabled();
     },
   });
+  const handleHiddenSelectInvalid: JSX.EventHandler<HTMLSelectElement, Event> = (event) => {
+    setSelectValidation(getSelectValidation(event.currentTarget));
+    focusTrigger();
+    event.preventDefault();
+  };
+  const handleHiddenSelectChange: JSX.EventHandler<HTMLSelectElement, Event> = (event) => {
+    (hiddenSelectProps as { onChange?: JSX.EventHandler<HTMLSelectElement, Event> }).onChange?.(
+      event,
+    );
+    setSelectValidation(
+      hasSelection() && event.currentTarget.validity.valid
+        ? DEFAULT_VALIDATION_RESULT
+        : getSelectValidation(event.currentTarget),
+    );
+  };
+  createEffect(() => {
+    if (hasSelection() && selectValidation().isInvalid) {
+      setSelectValidation(DEFAULT_VALIDATION_RESULT);
+    }
+  });
+  let triggerRef: HTMLElement | null = null;
+  const setTriggerRef = (el: HTMLElement | null) => {
+    triggerRef = el;
+  };
 
-  return (
-    <SelectContext.Provider
-      value={{
-        state,
-        triggerProps,
-        valueProps,
-        labelProps,
-        menuProps,
-        isOpen,
-        isFocused,
-        isFocusVisible,
-        isDisabled: resolveDisabled,
-        placeholder: ariaProps.placeholder,
-        items: stateProps.items,
-      }}
-    >
-      <SelectStateContext.Provider value={state}>
-        <div
-          {...domProps()}
-          {...cleanHoverProps()}
-          class={renderProps.class()}
-          style={renderProps.style()}
-          data-open={isOpen() || undefined}
-          data-focused={isFocused() || undefined}
-          data-focus-visible={isFocusVisible() || undefined}
-          data-disabled={resolveDisabled() || undefined}
-          data-required={ariaProps.isRequired || undefined}
-          data-hovered={isHovered() || undefined}
-        >
-          {/* Hidden select for form submission */}
-          <div {...containerProps}>
-            <select {...hiddenSelectProps}>
-              <option />
-              <For each={stateProps.items}>
-                {(item) => {
-                  const itemRecord = isObjectRecord(item) ? item : null;
-                  const fallbackKey = itemRecord != null
-                    ? toKey(itemRecord.key) ?? toKey(itemRecord.id)
+  const RootChildren = () => {
+    const selectChildren = untrack(() =>
+      typeof local.children === "function"
+        ? (local.children as (values: SelectRenderProps) => JSX.Element)(childRenderValues)
+        : local.children,
+    );
+
+    return (
+      <>
+        <div {...containerProps}>
+          <select
+            {...hiddenSelectProps}
+            name={hasSelection() ? undefined : stateProps.name}
+            required={
+              (hasNativeValidation() && ariaProps.isRequired && !hasSelection()) || undefined
+            }
+            onInvalid={handleHiddenSelectInvalid}
+            onChange={handleHiddenSelectChange}
+          >
+            <Show when={state.selectionMode() !== "multiple"}>
+              <option selected={state.selectedKey() == null} />
+            </Show>
+            <For each={stateProps.items}>
+              {(item) => {
+                const itemRecord = isObjectRecord(item) ? item : null;
+                const fallbackKey =
+                  itemRecord != null ? (toKey(itemRecord.key) ?? toKey(itemRecord.id)) : undefined;
+                const key = stateProps.getKey?.(item) ?? fallbackKey ?? String(item);
+                const fallbackTextValue =
+                  itemRecord != null
+                    ? (toTextValue(itemRecord.textValue) ?? toTextValue(itemRecord.label))
                     : undefined;
-                  const key = stateProps.getKey?.(item) ?? fallbackKey ?? String(item);
-                  const fallbackTextValue = itemRecord != null
-                    ? toTextValue(itemRecord.textValue) ?? toTextValue(itemRecord.label)
-                    : undefined;
-                  const textValue = stateProps.getTextValue?.(item) ?? fallbackTextValue ?? String(item);
-                  const selectedKeys = state.selectedKeys();
-                  const isSelected = state.selectionMode() === 'multiple'
-                    ? selectedKeys === 'all'
+                const textValue =
+                  stateProps.getTextValue?.(item) ?? fallbackTextValue ?? String(item);
+                const selectedKeys = state.selectedKeys();
+                const isSelected =
+                  state.selectionMode() === "multiple"
+                    ? selectedKeys === "all"
                       ? true
                       : (selectedKeys as Set<Key>).has(key)
                     : key === state.selectedKey();
-                  return (
-                    <option value={String(key)} selected={isSelected}>
-                      {textValue}
-                    </option>
-                  );
-                }}
-              </For>
-            </select>
-          </div>
-          <Show when={ariaProps.label}>
-            <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
+                return (
+                  <option value={String(key)} selected={isSelected}>
+                    {textValue}
+                  </option>
+                );
+              }}
+            </For>
+          </select>
+          <Show when={state.selectionMode() === "multiple" && stateProps.name}>
+            <For
+              each={
+                state.selectedKeys() === "all"
+                  ? Array.from(state.collection()).map((item) => item.key)
+                  : Array.from(state.selectedKeys() as Set<Key>)
+              }
+            >
+              {(key) => (
+                <input
+                  type="hidden"
+                  name={stateProps.name}
+                  form={ariaProps.form}
+                  value={String(key)}
+                  disabled={resolveDisabled()}
+                />
+              )}
+            </For>
+          </Show>
+          <Show
+            when={
+              state.selectionMode() !== "multiple" && stateProps.name && state.selectedKey() != null
+            }
+          >
+            <input
+              type="hidden"
+              name={stateProps.name}
+              form={ariaProps.form}
+              value={String(state.selectedKey())}
+              disabled={resolveDisabled()}
+            />
           </Show>
-          {props.children}
         </div>
+        <Show when={ariaProps.label}>
+          <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
+        </Show>
+        {selectChildren}
+      </>
+    );
+  };
+  const baseRootProps = () =>
+    ({
+      ...domProps(),
+      ...cleanHoverProps(),
+      ref: setRootRef,
+      class: renderProps.class(),
+      style: renderProps.style(),
+      slot: local.slot,
+      "data-open": isOpen() || undefined,
+      "data-disabled": resolveDisabled() || undefined,
+      "data-required": ariaProps.isRequired || undefined,
+      "data-invalid": isInvalid() || undefined,
+      "data-hovered": isHovered() || undefined,
+    }) as JSX.HTMLAttributes<HTMLDivElement>;
+  const RootContent = () => {
+    const renderedRootChildren = <RootChildren />;
+    const rootProps = () =>
+      ({
+        ...baseRootProps(),
+        children: renderedRootChildren,
+      }) as JSX.HTMLAttributes<HTMLDivElement>;
+
+    return local.render ? (
+      local.render(rootProps(), renderValues())
+    ) : (
+      <div {...baseRootProps()}>{renderedRootChildren}</div>
+    );
+  };
+
+  return (
+    <SelectContext.Provider
+      value={
+        {
+          state,
+          rootRef: () => rootRef ?? null,
+          triggerRef: () => triggerRef,
+          setTriggerRef,
+          get triggerProps() {
+            return triggerPropsWithValidation();
+          },
+          valueProps,
+          labelProps,
+          menuProps,
+          get errorMessageProps() {
+            return { id: errorMessageId };
+          },
+          get validation() {
+            return validation();
+          },
+          isOpen,
+          isFocused,
+          isFocusVisible,
+          isDisabled: resolveDisabled,
+          placeholder: ariaProps.placeholder,
+          items: stateProps.items,
+          autoFocus: !!ariaProps.autoFocus,
+        } as SelectContextValue<unknown>
+      }
+    >
+      <SelectStateContext.Provider value={state}>
+        <FieldErrorContext.Provider value={fieldErrorContext}>
+          <RootContent />
+        </FieldErrorContext.Provider>
       </SelectStateContext.Provider>
     </SelectContext.Provider>
   );
@@ -434,23 +731,31 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
  * The trigger button for a select.
  */
 export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
-  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
 
-  // Get context
   const context = useContext(SelectContext);
   if (!context) {
-    throw new Error('SelectTrigger must be used within a Select');
+    throw new Error("SelectTrigger must be used within a Select");
   }
-  const { triggerProps, isOpen, isFocused, isFocusVisible, state } = context;
+  const { isOpen, isFocused, isFocusVisible, state } = context;
+  let triggerRef: HTMLButtonElement | undefined;
+  const setTriggerRef = (el: HTMLButtonElement) => {
+    triggerRef = el;
+    context.setTriggerRef(el);
+  };
+
+  createEffect(() => {
+    if (context.autoFocus) {
+      triggerRef?.focus();
+    }
+  });
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return state.isDisabled;
     },
   });
 
-  // Render props values
   const renderValues = createMemo<SelectTriggerRenderProps>(() => ({
     isOpen: isOpen(),
     isFocused: isFocused(),
@@ -459,33 +764,43 @@ export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
     isDisabled: state.isDisabled,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Select-trigger',
+      defaultClassName: "solidaria-Select-trigger",
     },
-    renderValues
+    renderValues,
   );
 
-  // Remove ref from spread props
   const cleanTriggerProps = () => {
-    const { ref: _ref1, ...rest } = triggerProps as Record<string, unknown>;
+    const { ref: _ref1, ...rest } = context.triggerProps as Record<string, unknown>;
     return rest;
   };
   const cleanHoverProps = () => {
     const { ref: _ref2, ...rest } = hoverProps as Record<string, unknown>;
     return rest;
   };
-
+  const triggerAriaProps = () => context.triggerProps as Record<string, unknown>;
+  const menuAriaProps = () => context.menuProps as Record<string, unknown>;
   return (
     <button
+      ref={setTriggerRef}
       {...domProps}
       {...cleanTriggerProps()}
       {...cleanHoverProps()}
       type="button"
+      id={triggerAriaProps().id as string | undefined}
+      tabIndex={state.isDisabled ? undefined : 0}
+      aria-label={triggerAriaProps()["aria-label"] as string | undefined}
+      aria-labelledby={triggerAriaProps()["aria-labelledby"] as string | undefined}
+      aria-haspopup="listbox"
+      aria-expanded={isOpen()}
+      aria-controls={isOpen() ? (menuAriaProps().id as string | undefined) : undefined}
+      aria-disabled={state.isDisabled || undefined}
+      aria-required={triggerAriaProps()["aria-required"] as boolean | undefined}
+      aria-describedby={triggerAriaProps()["aria-describedby"] as string | undefined}
       class={renderProps.class()}
       style={renderProps.style()}
       data-open={isOpen() || undefined}
@@ -501,50 +816,67 @@ export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
 
 // Default children function for SelectValue - defined at module level for SSR stability
 function defaultSelectValueChildren<T>(values: SelectValueRenderProps<T>) {
-  return values.selectedText ?? values.placeholder ?? '';
+  return values.selectedText ?? values.placeholder ?? "";
 }
 
 /**
  * Displays the selected value in a select.
  */
 export function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {
-  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'placeholder', 'children']);
+  const [local, domProps] = splitProps(props, [
+    "class",
+    "style",
+    "slot",
+    "placeholder",
+    "children",
+  ]);
 
-  // Get context
   const context = useContext(SelectContext);
   if (!context) {
-    throw new Error('SelectValue must be used within a Select');
+    throw new Error("SelectValue must be used within a Select");
   }
   const { valueProps, placeholder: contextPlaceholder } = context;
   const state = context.state as SelectState<T>;
 
-  // Use local placeholder if provided, otherwise fall back to context
   const placeholder = () => local.placeholder ?? contextPlaceholder;
 
-  // Render props values
   const renderValues = createMemo<SelectValueRenderProps<T>>(() => {
-    const selectedItem = state.selectedItem();
-    const selectedItems = state.selectedItems();
-    const selectedText = state.selectionMode() === 'multiple'
-      ? selectedItems.map((item) => item.textValue).join(', ')
-      : selectedItem?.textValue ?? null;
+    const collection = state.collection();
+    const selectedItem =
+      state.selectedKey() == null ? null : collection.getItem(state.selectedKey() as Key);
+    const selectedKeys = state.selectedKeys();
+    const selectedItems =
+      selectedKeys === "all"
+        ? Array.from(collection)
+        : Array.from(selectedKeys as Set<Key>)
+            .map((key) => collection.getItem(key))
+            .filter((item): item is CollectionNode<T> => item != null);
+    const selectedText =
+      state.selectionMode() === "multiple"
+        ? selectedItems.length > 0
+          ? new Intl.ListFormat(undefined, { style: "long", type: "conjunction" }).format(
+              selectedItems.map((item) => item.textValue),
+            )
+          : null
+        : (selectedItem?.textValue ?? null);
     return {
       selectedItem,
+      selectedItems,
       selectedText,
-      isSelected: state.selectionMode() === 'multiple' ? selectedItems.length > 0 : selectedItem != null,
+      isSelected:
+        state.selectionMode() === "multiple" ? selectedItems.length > 0 : selectedItem != null,
       placeholder: placeholder(),
     };
   });
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children ?? defaultSelectValueChildren,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Select-value',
+      defaultClassName: "solidaria-Select-value",
     },
-    renderValues
+    renderValues,
   );
 
   return (
@@ -555,7 +887,9 @@ export function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {
       style={renderProps.style()}
       data-placeholder={!renderValues().isSelected || undefined}
     >
-      {renderProps.renderChildren()}
+      {props.children == null
+        ? (renderValues().selectedText ?? renderValues().placeholder ?? "")
+        : renderProps.renderChildren()}
     </span>
   );
 }
@@ -564,59 +898,79 @@ export function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {
  * The listbox popup for a select.
  */
 export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
-  const [local, domProps] = splitProps(props, ['class', 'style', 'slot', 'children']);
+  const [local, domProps] = splitProps(props, [
+    "class",
+    "style",
+    "slot",
+    "children",
+    "renderEmptyState",
+    "onLoadMore",
+    "isLoading",
+    "renderLoadMore",
+    "loadMoreClass",
+    "isInPopover",
+  ]);
 
-  // Get context
   const context = useContext(SelectContext);
   if (!context) {
-    throw new Error('SelectListBox must be used within a Select');
+    throw new Error("SelectListBox must be used within a Select");
   }
-  const { menuProps, state: selectState, isOpen } = context;
+  const { menuProps, rootRef, state: selectState, isOpen } = context;
   const state = selectState as SelectState<T>;
 
-  // Ref for the listbox element (for click outside detection)
+  createEffect(() => {
+    if (!isOpen()) {
+      return;
+    }
+    if (state.focusedKey() != null) {
+      return;
+    }
+    const selectedKey = state.selectedKey();
+    if (selectedKey != null && !state.collection().getItem(selectedKey)?.isDisabled) {
+      state.setFocusedKey(selectedKey);
+    }
+  });
+
   let listBoxRef: HTMLUListElement | undefined;
 
-  // Handle click outside to close select
   createInteractOutside({
-    ref: () => listBoxRef ?? null,
+    ref: () => rootRef() ?? listBoxRef ?? null,
     onInteractOutside: () => {
       if (isOpen()) {
         state.close();
       }
     },
     get isDisabled() {
-      return !isOpen();
+      return !isOpen() || local.isInPopover === true;
     },
   });
 
-  // Create listbox aria props - reuse select's internal list state via collection
   const { listBoxProps } = createListBox(
     {
       ...(menuProps as unknown as AriaListBoxProps),
+      shouldSelectOnPressUp: true,
+      shouldFocusOnHover: true,
+      shouldSelectOnFocus: local.isInPopover === true ? false : undefined,
       get isDisabled() {
         return state.isDisabled;
       },
     },
-    createSelectListStateAdapter(state)
+    createSelectListStateAdapter(state),
   );
 
-  // Render props values
   const renderValues = createMemo<SelectListBoxRenderProps>(() => ({
     isFocused: state.isFocused(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-Select-listbox',
+      defaultClassName: "solidaria-Select-listbox",
     },
-    renderValues
+    renderValues,
   );
 
-  // Remove ref from spread props
   const cleanMenuProps = () => {
     const { ref: _ref1, ...rest } = menuProps as Record<string, unknown>;
     return rest;
@@ -627,34 +981,74 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
   };
 
   const items = () => Array.from(state.collection());
+  createEffect(() => {
+    if (!isOpen()) return;
+    const focusedKey = state.focusedKey();
+    if (focusedKey == null) return;
+
+    queueMicrotask(() => {
+      const option = Array.from(
+        listBoxRef?.querySelectorAll<HTMLElement>("[role='option']") ?? [],
+      ).find((element) => element.id === String(focusedKey));
+      if (option && document.activeElement !== option) {
+        focusSafely(option);
+      }
+    });
+  });
 
-  return (
-    <Show when={isOpen()}>
-      <FocusScope restoreFocus autoFocus>
-        <ul
-          ref={(el) => (listBoxRef = el)}
-          {...domProps}
-          {...cleanMenuProps()}
-          {...cleanListBoxProps()}
-          class={renderProps.class()}
-          style={renderProps.style()}
-          data-focused={state.isFocused() || undefined}
-        >
-          <Show when={props.children} fallback={
-            <For each={items()}>
-              {(node) => (
-                <SelectOption id={node.key}>
-                  {node.textValue}
-                </SelectOption>
-              )}
-            </For>
-          }>
+  const listBox = () => (
+    <ul
+      ref={(el) => (listBoxRef = el)}
+      {...domProps}
+      {...cleanMenuProps()}
+      {...cleanListBoxProps()}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      data-focused={state.isFocused() || undefined}
+      data-empty={state.collection().size === 0 || undefined}
+    >
+      {state.collection().size === 0 && local.renderEmptyState ? (
+        <li role="option" style={{ display: "contents" }} data-empty-state>
+          {local.renderEmptyState()}
+        </li>
+      ) : (
+        <Show
+          when={local.children}
+          fallback={
             <For each={items()}>
-              {(node) => node.value != null ? props.children!(node.value) : null}
+              {(node) => <SelectOption id={node.key}>{node.textValue}</SelectOption>}
             </For>
-          </Show>
-        </ul>
-      </FocusScope>
+          }
+        >
+          <For each={items()}>
+            {(node) => (node.value != null ? local.children!(node.value) : null)}
+          </For>
+        </Show>
+      )}
+      <Show when={local.onLoadMore}>
+        <ListBoxLoadMoreItem
+          onLoadMore={local.onLoadMore!}
+          isLoading={local.isLoading}
+          class={local.loadMoreClass}
+        >
+          {local.renderLoadMore?.()}
+        </ListBoxLoadMoreItem>
+      </Show>
+    </ul>
+  );
+
+  return (
+    <Show when={isOpen()}>
+      <Show
+        when={local.isInPopover}
+        fallback={
+          <FocusScope restoreFocus autoFocus>
+            {listBox()}
+          </FocusScope>
+        }
+      >
+        {listBox()}
+      </Show>
     </Show>
   );
 }
@@ -664,39 +1058,48 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
  */
 export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
   const [local, ariaProps] = splitProps(props, [
-    'class',
-    'style',
-    'slot',
-    'id',
-    'item',
-    'textValue',
+    "class",
+    "style",
+    "slot",
+    "id",
+    "item",
+    "textValue",
   ]);
 
-  // Get state from context
   const context = useContext(SelectStateContext);
   if (!context) {
-    throw new Error('SelectOption must be used within a Select');
+    throw new Error("SelectOption must be used within a Select");
   }
   const state = context as SelectState<T>;
   const selectContext = useContext(SelectContext) as SelectContextValue<T> | null;
 
-  // Create option aria props - adapt select state to list state interface
   const optionAria = createOption<T>(
     {
       key: local.id,
       get isDisabled() {
         return Boolean(ariaProps.isDisabled || selectContext?.isDisabled());
       },
-      get 'aria-label'() {
-        return ariaProps['aria-label'] ?? local.textValue;
+      get "aria-label"() {
+        return ariaProps["aria-label"] ?? local.textValue;
+      },
+      shouldSelectOnPressUp: true,
+      shouldFocusOnHover: true,
+      get onHoverStart() {
+        return ariaProps.onHoverStart;
+      },
+      get onHoverEnd() {
+        return ariaProps.onHoverEnd;
+      },
+      get onHoverChange() {
+        return ariaProps.onHoverChange;
       },
     },
     {
       ...createSelectListStateAdapter(state),
       select: (key: Key) => {
-        if (state.selectionMode() === 'multiple') {
+        if (state.selectionMode() === "multiple") {
           const keys = state.selectedKeys();
-          if (keys === 'all') return;
+          if (keys === "all") return;
           state.setSelectedKeys(new Set([...keys, key]));
           return;
         }
@@ -704,9 +1107,9 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
         state.close();
       },
       toggleSelection: (key: Key) => {
-        if (state.selectionMode() === 'multiple') {
+        if (state.selectionMode() === "multiple") {
           const keys = state.selectedKeys();
-          if (keys === 'all') return;
+          if (keys === "all") return;
           const next = new Set(keys);
           if (next.has(key)) next.delete(key);
           else next.add(key);
@@ -718,100 +1121,118 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
       },
       replaceSelection: (key: Key) => {
         state.setSelectedKey(key);
-        if (state.selectionMode() !== 'multiple') {
+        if (state.selectionMode() !== "multiple") {
           state.close();
         }
       },
-    }
-  );
-
-  // Create hover
-  const { isHovered, hoverProps } = createHover({
-    get isDisabled() {
-      return optionAria.isDisabled();
     },
-  });
+  );
+  const isOptionFocusVisible = () =>
+    optionAria.isFocused() && (selectContext?.isFocusVisible() ?? optionAria.isFocusVisible());
 
-  // Render props values
   const renderValues = createMemo<SelectOptionRenderProps>(() => ({
     isSelected: optionAria.isSelected(),
     isFocused: optionAria.isFocused(),
-    isFocusVisible: optionAria.isFocusVisible(),
+    isFocusVisible: isOptionFocusVisible(),
     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-Select-option',
+      defaultClassName: "solidaria-Select-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,
   }));
 
-  // 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"];
     }
+    const onClick = rest.onClick as ((event: MouseEvent) => void) | undefined;
+    rest.onClick = ((event: MouseEvent) => {
+      const wasSelected = optionAria.isSelected();
+      onClick?.(event);
+      if (typeof PointerEvent === "undefined") {
+        return;
+      }
+      queueMicrotask(() => {
+        if (state.selectionMode() !== "multiple" || optionAria.isSelected() === wasSelected) {
+          selectOption();
+        }
+      });
+    }) as JSX.EventHandler<HTMLLIElement, MouseEvent>;
     return rest;
   };
-  const cleanHoverProps = () => {
-    const { ref: _ref2, ...rest } = hoverProps as Record<string, unknown>;
-    return rest;
+  const selectOption = () => {
+    if (optionAria.isDisabled()) {
+      return;
+    }
+    if (state.selectionMode() === "multiple") {
+      const keys = state.selectedKeys();
+      if (keys === "all") return;
+      const next = new Set(keys);
+      if (next.has(local.id)) next.delete(local.id);
+      else next.add(local.id);
+      state.setSelectedKeys(next);
+      return;
+    }
+    state.setSelectedKey(local.id);
+    state.close();
   };
 
   return (
     <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
       <li
         {...cleanOptionProps()}
-        {...cleanHoverProps()}
         class={renderProps.class()}
         style={renderProps.style()}
         data-selected={optionAria.isSelected() || undefined}
         data-focused={optionAria.isFocused() || undefined}
-        data-focus-visible={optionAria.isFocusVisible() || undefined}
+        data-focus-visible={isOptionFocusVisible() || undefined}
         data-pressed={optionAria.isPressed() || undefined}
-        data-hovered={isHovered() || undefined}
+        data-hovered={optionAria.isHovered() || undefined}
         data-disabled={optionAria.isDisabled() || undefined}
       >
-        {hasPrimitiveLabel()
-          ? <span {...optionAria.labelProps}>{renderProps.renderChildren()}</span>
-          : renderProps.renderChildren()}
+        {hasPrimitiveLabel() ? (
+          <span {...optionAria.labelProps}>{renderProps.renderChildren()}</span>
+        ) : (
+          renderProps.renderChildren()
+        )}
       </li>
     </SelectionIndicatorContext.Provider>
   );
 }
 
 function isObjectRecord(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null;
+  return typeof value === "object" && value !== null;
 }
 
 function toKey(value: unknown): Key | undefined {
-  if (typeof value === 'string' || typeof value === 'number') {
+  if (typeof value === "string" || typeof value === "number") {
     return value;
   }
   return undefined;
 }
 
 function toTextValue(value: unknown): string | undefined {
-  if (typeof value === 'string' || typeof value === 'number') {
+  if (typeof value === "string" || typeof value === "number") {
     return String(value);
   }
   return undefined;
@@ -820,9 +1241,7 @@ function toTextValue(value: unknown): string | undefined {
 function createSelectListStateAdapter<T>(state: SelectState<T>): ListState<T> {
   const selectedKeys = createMemo(() => {
     const keys = state.selectedKeys();
-    return keys === 'all'
-      ? new Set(Array.from(state.collection()).map((item) => item.key))
-      : keys;
+    return keys === "all" ? new Set(Array.from(state.collection()).map((item) => item.key)) : keys;
   });
 
   const disabledKeys = createMemo(() => {
@@ -841,23 +1260,23 @@ function createSelectListStateAdapter<T>(state: SelectState<T>): ListState<T> {
     setFocusedKey: (key) => state.setFocusedKey(key ?? null),
     childFocusStrategy: () => null,
     selectionMode: () => state.selectionMode(),
-    selectionBehavior: () => 'replace',
+    selectionBehavior: () => "replace",
     disallowEmptySelection: () => true,
     selectedKeys,
     disabledKeys,
-    disabledBehavior: () => 'all',
+    disabledBehavior: () => "all",
     isEmpty: () => selectedKeys().size === 0,
-    isSelectAll: () => state.selectedKeys() === 'all',
+    isSelectAll: () => state.selectedKeys() === "all",
     isSelected: (key) => selectedKeys().has(key),
     isDisabled: state.isKeyDisabled,
     setSelectionBehavior: () => {},
     toggleSelection: (key) => {
-      if (state.selectionMode() !== 'multiple') {
+      if (state.selectionMode() !== "multiple") {
         state.setSelectedKey(key);
         return;
       }
       const keys = state.selectedKeys();
-      if (keys === 'all') return;
+      if (keys === "all") return;
       const next = new Set(keys);
       if (next.has(key)) next.delete(key);
       else next.add(key);
@@ -866,16 +1285,20 @@ function createSelectListStateAdapter<T>(state: SelectState<T>): ListState<T> {
     replaceSelection: (key) => state.setSelectedKey(key),
     setSelectedKeys: (keys) => state.setSelectedKeys(keys),
     selectAll: () => {},
-    clearSelection: () => state.selectionMode() === 'multiple' ? state.setSelectedKeys([]) : state.setSelectedKey(null),
+    clearSelection: () =>
+      state.selectionMode() === "multiple" ? state.setSelectedKeys([]) : state.setSelectedKey(null),
     toggleSelectAll: () => {},
     extendSelection: (toKey) => state.setSelectedKey(toKey),
-    select: (key) => state.selectionMode() === 'multiple'
-      ? state.setSelectedKeys([...(state.selectedKeys() === 'all' ? [] : state.selectedKeys() as Set<Key>), key])
-      : state.setSelectedKey(key),
+    select: (key) =>
+      state.selectionMode() === "multiple"
+        ? state.setSelectedKeys([
+            ...(state.selectedKeys() === "all" ? [] : (state.selectedKeys() as Set<Key>)),
+            key,
+          ])
+        : state.setSelectedKey(key),
   };
 }
 
-// Attach sub-components
 Select.Trigger = SelectTrigger;
 Select.Value = SelectValue;
 Select.ListBox = SelectListBox;