@proyecto-viviana/solidaria-components 0.4.0 → 0.4.1

package/src/Popover.tsx

@@ -22,6 +22,7 @@ import {
   createOverlayTrigger,
   createPopover,
   FocusScope,
+  useLocale,
   useUNSAFE_PortalContext,
   visuallyHiddenStyles,
   type AriaLabelingProps,
@@ -280,12 +281,29 @@ export function Popover(props: PopoverProps): JSX.Element {
     "isExiting",
   ]);
 
-  let popoverRef!: HTMLDivElement;
+  // A reactive ref (not a plain `let`) so the overlay-position effect in
+  // createOverlayPosition — which tracks `overlayRef()` as a dependency —
+  // re-runs once the portal node actually mounts. React gets this timing for
+  // free from useLayoutEffect (the ref is populated before the position effect
+  // fires); in Solid the portal node is created lazily on open, AFTER the
+  // position effect first ran with a null ref, so a non-reactive ref left the
+  // popover stranded at the createOverlayPosition fallback (position:fixed;
+  // top:0; left:0) whenever no other dependency happened to re-fire the effect
+  // after mount. Mirrors the sibling groupRef signal below.
+  const [popoverRef, setPopoverRef] = createSignal<HTMLDivElement | null>(null);
   const [groupRef, setGroupRef] = createSignal<HTMLDivElement | null>(null);
   // False on the server and during hydration; true after onMount. Gates the Portal
   // so overlay content only ever renders client-side, post-hydration.
   const isHydrated = useIsHydrated();
 
+  // Mirrors upstream S2 Popover (Popover.mjs: `el.lang = locale; el.dir =
+  // direction`): the overlay portals out of the app root, so it must carry both
+  // the locale `lang` AND writing `direction` — otherwise the portaled
+  // listbox/dialog stays LTR and keeps the Latin font under an RTL Provider (the
+  // `:lang(ar)` font swap needs a `lang` ancestor the portal would otherwise
+  // escape). RAC's own Popover only threads `dir`; S2 adds `lang` on top.
+  const locale = useLocale();
+
   const triggerContext = useContext(PopoverTriggerContext);
   const dialogTriggerContext = useContext(DialogTriggerContext);
   const popoverGroupContext = useContext(PopoverGroupContext);
@@ -333,7 +351,7 @@ export function Popover(props: PopoverProps): JSX.Element {
   const popoverAria = createPopover(
     {
       triggerRef: getTriggerRef,
-      popoverRef: () => popoverRef ?? null,
+      popoverRef: () => popoverRef(),
       groupRef: () => (isSubPopover() ? (popoverGroupContext?.() ?? null) : groupRef()),
       get placement() {
         return local.placement;
@@ -514,7 +532,7 @@ export function Popover(props: PopoverProps): JSX.Element {
   createEffect(() => {
     if (!isOpen() || !shouldBeDialog()) return;
     if ((local.autoFocus ?? true) === false) return;
-    if (!popoverRef) return;
+    if (!popoverRef()) return;
     if (resolvedTrigger() === "SubmenuTrigger") return;
 
     let timeout: number | undefined;
@@ -522,11 +540,12 @@ export function Popover(props: PopoverProps): JSX.Element {
 
     const focusIfNeeded = () => {
       if (!isOpen() || !shouldBeDialog()) return;
-      if (!popoverRef || resolvedTrigger() === "SubmenuTrigger") return;
-      if (document.activeElement === popoverRef || popoverRef.contains(document.activeElement)) {
+      const node = popoverRef();
+      if (!node || resolvedTrigger() === "SubmenuTrigger") return;
+      if (document.activeElement === node || node.contains(document.activeElement)) {
         return;
       }
-      popoverRef.focus();
+      node.focus();
     };
 
     const scheduleFocus = () => {
@@ -572,12 +591,14 @@ export function Popover(props: PopoverProps): JSX.Element {
         <div
           {...domProps()}
           {...cleanPopoverProps()}
-          ref={popoverRef}
+          ref={setPopoverRef}
           id={overlayId()}
           role={shouldBeDialog() ? "dialog" : undefined}
           tabIndex={shouldBeDialog() ? -1 : undefined}
           class={renderProps.class()}
           style={mergedStyle()}
+          lang={locale().locale}
+          dir={locale().direction}
           data-trigger={resolvedTrigger()}
           data-placement={popoverAria.placement()}
           data-entering={dataAttr(local.isEntering)}

package/src/RangeCalendar.tsx

@@ -196,6 +196,13 @@ export function useRangeCalendarContext(): RangeCalendarState<DateValue> {
 export function RangeCalendar<T extends DateValue = CalendarDate>(
   props: RangeCalendarProps<T>,
 ): JSX.Element {
+  // When rendered inside a composite that owns the range state (e.g.
+  // DateRangePicker provides `RangeCalendarContext`), reuse that shared state
+  // instead of minting a fresh one — otherwise the composite's focus/anchor
+  // flags (e.g. the popover-open `setFocused(true)`) drive a different state
+  // instance than the one this grid renders. Mirrors the single `Calendar`.
+  const inheritedState = useContext(RangeCalendarContext);
+
   // Use hydration-safe pattern for client-only rendering
   const isHydrated = useIsHydrated();
 
@@ -209,11 +216,106 @@ export function RangeCalendar<T extends DateValue = CalendarDate>(
         />
       }
     >
-      <RangeCalendarInner {...props} />
+      <Show when={inheritedState} fallback={<RangeCalendarInner {...props} />}>
+        <RangeCalendarWithState
+          state={inheritedState as RangeCalendarState<DateValue>}
+          {...props}
+        />
+      </Show>
     </Show>
   );
 }
 
+/**
+ * RangeCalendar variant that renders against an externally-owned state (from
+ * `RangeCalendarContext`) rather than creating its own. Mirrors the single
+ * `CalendarWithState`.
+ */
+function RangeCalendarWithState<T extends DateValue = CalendarDate>(
+  props: RangeCalendarProps<T> & { state: RangeCalendarState<DateValue> },
+): JSX.Element {
+  const [local, , rest] = splitProps(
+    props,
+    ["children", "class", "style", "slot", "state", "ref"],
+    [
+      "value",
+      "defaultValue",
+      "onChange",
+      "minValue",
+      "maxValue",
+      "isDisabled",
+      "isReadOnly",
+      "focusedValue",
+      "defaultFocusedValue",
+      "onFocusChange",
+      "locale",
+      "createCalendar",
+      "isDateUnavailable",
+      "visibleMonths",
+      "pageBehavior",
+      "selectionAlignment",
+      "isDateDisabled",
+      "validationState",
+      "allowsNonContiguousRanges",
+      "firstDayOfWeek",
+    ],
+  );
+
+  const state = () => props.state;
+
+  const calendarAria = createRangeCalendar(rest, state());
+
+  const renderValues = createMemo<RangeCalendarRenderProps>(() => ({
+    isDisabled: state().isDisabled(),
+    isReadOnly: state().isReadOnly(),
+    isInvalid: state().isValueInvalid(),
+    isDragging: state().isDragging(),
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-RangeCalendar",
+    },
+    renderValues,
+  );
+
+  return (
+    <RangeCalendarStateContext.Provider value={state()}>
+      <RangeCalendarContext.Provider value={state()}>
+        <div
+          {...calendarAria.calendarProps}
+          ref={(el) => assignRef(local.ref, el)}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-disabled={dataAttr(state().isDisabled())}
+          data-readonly={dataAttr(state().isReadOnly())}
+          data-invalid={dataAttr(state().isValueInvalid())}
+          data-dragging={dataAttr(state().isDragging())}
+        >
+          <VisuallyHidden>
+            <h2>{String(calendarAria.calendarProps["aria-label"] ?? "")}</h2>
+          </VisuallyHidden>
+          {props.children}
+          {/* For touch screen readers, a visually hidden next button after the
+           * month grid so it's easy to navigate after reaching the end without
+           * going all the way back to the start. Mirrors react-aria-components
+           * Calendar (and the headless Calendar). */}
+          <VisuallyHidden>
+            <button
+              aria-label={String(calendarAria.nextButtonProps["aria-label"] ?? "")}
+              disabled={Boolean(calendarAria.nextButtonProps.disabled)}
+              onClick={() => state().focusNextPage()}
+              tabIndex={-1}
+            />
+          </VisuallyHidden>
+        </div>
+      </RangeCalendarContext.Provider>
+    </RangeCalendarStateContext.Provider>
+  );
+}
+
 /**
  * Internal RangeCalendar component that renders after client mount.
  */
@@ -284,6 +386,18 @@ function RangeCalendarInner<T extends DateValue = CalendarDate>(
             <h2>{String(calendarAria.calendarProps["aria-label"] ?? "")}</h2>
           </VisuallyHidden>
           {props.children}
+          {/* For touch screen readers, a visually hidden next button after the
+           * month grid so it's easy to navigate after reaching the end without
+           * going all the way back to the start. Mirrors react-aria-components
+           * Calendar (and the headless Calendar). */}
+          <VisuallyHidden>
+            <button
+              aria-label={String(calendarAria.nextButtonProps["aria-label"] ?? "")}
+              disabled={Boolean(calendarAria.nextButtonProps.disabled)}
+              onClick={() => state.focusNextPage()}
+              tabIndex={-1}
+            />
+          </VisuallyHidden>
         </div>
       </RangeCalendarContext.Provider>
     </RangeCalendarStateContext.Provider>
@@ -350,6 +464,11 @@ export function RangeCalendarButton(props: RangeCalendarButtonProps): JSX.Elemen
       class={props.class ?? "solidaria-RangeCalendarButton"}
       style={props.style}
       disabled={isDisabled()}
+      // Mirror useFocusable (same as CalendarButton): always set an explicit
+      // tabIndex on an enabled focusable nav button (0), and drop it entirely
+      // when disabled — so the prev/next buttons appear in the roving tab order
+      // exactly as the S2 oracle does.
+      tabindex={isDisabled() ? undefined : 0}
     >
       {props.children}
     </button>

package/src/SearchField.tsx

@@ -42,6 +42,7 @@ import {
   Provider,
 } from "./utils";
 import { TextContext } from "./Text";
+import { useAutocompleteInput } from "./Autocomplete";
 
 export interface SearchFieldRenderProps {
   /** Whether the search field is empty. */
@@ -247,7 +248,35 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
   const baseProps = (
     contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) : props
   ) as SearchFieldProps;
-  const mergedProps = withFormValidationBehavior(baseProps, formContext);
+
+  // When rendered inside an <Autocomplete>, the FieldInputContext (AutocompleteContext)
+  // controls the input's value and keyboard handling: value + onChange make the field's
+  // state controlled by the shared autocomplete state (which drives the collection
+  // filter), and onKeyDown/onFocus/onBlur chain the autocomplete's virtual-focus
+  // navigation into the input. This mirrors RAC's
+  // useContextProps(props, inputRef, FieldInputContext). The remaining passthroughs
+  // (aria-activedescendant/aria-controls/aria-autocomplete) and the input-ref
+  // registration are applied at the <input> in SearchFieldInput.
+  const autocompleteInput = useAutocompleteInput();
+  const autocompleteProps = autocompleteInput
+    ? ({
+        get value() {
+          return autocompleteInput.inputProps.value();
+        },
+        onChange: autocompleteInput.inputProps.onChange,
+        onKeyDown: autocompleteInput.inputProps
+          .onKeyDown as unknown as SearchFieldProps["onKeyDown"],
+        onFocus: autocompleteInput.inputProps.onFocus as unknown as SearchFieldProps["onFocus"],
+        onBlur: autocompleteInput.inputProps.onBlur as unknown as SearchFieldProps["onBlur"],
+      } as Partial<SearchFieldProps>)
+    : undefined;
+
+  const mergedProps = withFormValidationBehavior(
+    autocompleteProps
+      ? (mergeProps(baseProps, autocompleteProps) as SearchFieldProps)
+      : baseProps,
+    formContext,
+  );
 
   const [local, stateProps, ariaProps, rest] = splitProps(
     mergedProps,
@@ -629,6 +658,15 @@ export function SearchFieldInput(props: SearchFieldInputProps): JSX.Element {
     throw new Error("SearchFieldInput must be used within a SearchField");
   }
 
+  // Inside an <Autocomplete>, expose the ARIA attributes that identify the
+  // controlled collection and its virtually-focused option. value/onChange and the
+  // keyboard handlers are already merged upstream in SearchField(); here we only add
+  // the passthrough attributes that createTextField doesn't forward, and register the
+  // input element as the autocomplete inputRef so the beforeinput + reverse-path
+  // (aria-activedescendant mirror) listeners bind. Mirrors RAC's
+  // [InputContext, {...inputProps, ref: inputRef}].
+  const autocompleteInput = useAutocompleteInput();
+
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
   const { isHovered, hoverProps } = createHover({
@@ -667,12 +705,25 @@ export function SearchFieldInput(props: SearchFieldInputProps): JSX.Element {
     return rest;
   };
 
+  const autocompleteInputAttrs = (): Record<string, unknown> => {
+    if (!autocompleteInput) {
+      return {};
+    }
+    const inputProps = autocompleteInput.inputProps;
+    return {
+      "aria-controls": inputProps["aria-controls"],
+      "aria-autocomplete": inputProps["aria-autocomplete"],
+      "aria-activedescendant": inputProps["aria-activedescendant"](),
+    };
+  };
+
   const mergedInputProps = () =>
     ({
       ...domProps,
       ...cleanInputProps(),
       ...cleanFocusProps(),
       ...cleanHoverProps(),
+      ...autocompleteInputAttrs(),
     }) as Record<string, unknown>;
 
   onMount(() => {
@@ -723,6 +774,7 @@ export function SearchFieldInput(props: SearchFieldInputProps): JSX.Element {
       ref={(element) => {
         inputElement = element;
         context.setInputRef?.(element);
+        autocompleteInput?.inputRef(element);
         const ref = (domProps as { ref?: unknown }).ref;
         if (typeof ref === "function") {
           ref(element);

package/src/Select.tsx

@@ -186,11 +186,15 @@ export interface SelectTriggerRenderProps {
   isFocusVisible: boolean;
   /** Whether the trigger is hovered. */
   isHovered: boolean;
+  /** Whether the trigger is pressed. */
+  isPressed: boolean;
   /** Whether the trigger is disabled. */
   isDisabled: boolean;
 }
 
 export interface SelectTriggerProps extends SlotProps {
+  /** A ref callback/object for the underlying trigger button element. */
+  ref?: RefLike<HTMLButtonElement>;
   /** The children of the trigger. A function may be provided to receive render props. */
   children?: RenderChildren<SelectTriggerRenderProps>;
   /** The CSS className for the element. */
@@ -241,6 +245,8 @@ export interface SelectOptionRenderProps {
 }
 
 export interface SelectOptionProps<T> extends Omit<AriaOptionProps, "children" | "key">, SlotProps {
+  /** A ref callback/object for the underlying option element. */
+  ref?: RefLike<HTMLDivElement>;
   /** The unique key for the option. */
   id: Key;
   /** The item value. */
@@ -269,6 +275,7 @@ interface SelectContextValue<T> {
   isOpen: Accessor<boolean>;
   isFocused: Accessor<boolean>;
   isFocusVisible: Accessor<boolean>;
+  isPressed: Accessor<boolean>;
   isDisabled: Accessor<boolean>;
   placeholder?: string;
   items: T[];
@@ -398,8 +405,16 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
     return clean as typeof ariaProps;
   });
 
-  const { labelProps, triggerProps, valueProps, menuProps, isFocused, isFocusVisible, isOpen } =
-    createSelect<T>(selectAriaProps, state);
+  const {
+    labelProps,
+    triggerProps,
+    valueProps,
+    menuProps,
+    isFocused,
+    isFocusVisible,
+    isOpen,
+    isPressed,
+  } = createSelect<T>(selectAriaProps, state);
 
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
@@ -579,6 +594,17 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
 
     return (
       <>
+        <Show when={ariaProps.label}>
+          <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
+        </Show>
+        {selectChildren}
+        {/*
+          The HiddenSelect (native `<select>` for form autofill/submission) renders
+          AFTER the trigger button, mirroring upstream RAC `Select` which emits
+          `{renderProps.children}` then `<HiddenSelect>` (Select.tsx:288-289). Order
+          matters for the DOM tab/focus trail: the visible button must precede the
+          form-only hidden control.
+        */}
         <div {...containerProps}>
           <select
             {...hiddenSelectProps}
@@ -652,10 +678,6 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
             />
           </Show>
         </div>
-        <Show when={ariaProps.label}>
-          <span {...cleanLabelProps()}>{ariaProps.label as JSX.Element}</span>
-        </Show>
-        {selectChildren}
       </>
     );
   };
@@ -711,6 +733,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
           isOpen,
           isFocused,
           isFocusVisible,
+          isPressed,
           isDisabled: resolveDisabled,
           placeholder: ariaProps.placeholder,
           items: stateProps.items,
@@ -731,17 +754,18 @@ 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", "ref"]);
 
   const context = useContext(SelectContext);
   if (!context) {
     throw new Error("SelectTrigger must be used within a Select");
   }
-  const { isOpen, isFocused, isFocusVisible, state } = context;
+  const { isOpen, isFocused, isFocusVisible, isPressed, state } = context;
   let triggerRef: HTMLButtonElement | undefined;
   const setTriggerRef = (el: HTMLButtonElement) => {
     triggerRef = el;
     context.setTriggerRef(el);
+    assignRef(local.ref, el);
   };
 
   createEffect(() => {
@@ -761,6 +785,7 @@ export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible(),
     isHovered: isHovered(),
+    isPressed: isPressed(),
     isDisabled: state.isDisabled,
   }));
 
@@ -926,6 +951,14 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
     if (!isOpen()) {
       return;
     }
+    // On open the listbox takes collection focus. Upstream `useSelect` sets
+    // `menuProps.autoFocus = state.focusStrategy || true`, so the ListBox's
+    // `useSelectableCollection` auto-focuses on mount — setting the selection
+    // manager's `isFocused` true and focusing the selected option. Our
+    // `createListBox` reimplements keyboard nav inline (no `autoFocus` effect),
+    // so we set the manager focus here to match. Without it the selected option
+    // never paints its focus-visible background (`data-focused` stays unset).
+    state.selectionManager.setFocused(true);
     if (state.focusedKey() != null) {
       return;
     }
@@ -935,7 +968,7 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
     }
   });
 
-  let listBoxRef: HTMLUListElement | undefined;
+  let listBoxRef: HTMLDivElement | undefined;
 
   createInteractOutside({
     ref: () => rootRef() ?? listBoxRef ?? null,
@@ -949,7 +982,14 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
     },
   });
 
-  const { listBoxProps } = createListBox(
+  // Keep the hook result intact — destructuring `{ listBoxProps }` invokes the
+  // `get listBoxProps()` getter ONCE and freezes it (the Solid "destructuring a
+  // get-prop freezes reactivity" gotcha). The listbox `tabIndex` is computed from
+  // `focusedKey` (`focusedKey != null ? -1 : 0`); on open the effect above sets a
+  // focused key, so a frozen snapshot would leave the listbox tabbable (`0`) when
+  // upstream flips it to `-1`. Reading `listBoxHook.listBoxProps` per access keeps
+  // it reactive.
+  const listBoxHook = createListBox(
     {
       ...(menuProps as unknown as AriaListBoxProps),
       shouldSelectOnPressUp: true,
@@ -982,8 +1022,37 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
     return rest;
   };
   const cleanListBoxProps = () => {
-    const { ref: _ref2, ...rest } = listBoxProps as Record<string, unknown>;
-    return rest;
+    const {
+      ref: _ref2,
+      "aria-activedescendant": _activeDescendant,
+      onFocus: _onFocus,
+      ...rest
+    } = listBoxHook.listBoxProps as Record<string, unknown>;
+    // Faithful Select listbox focus model: the focused option receives REAL DOM
+    // focus (the open effect above + `createSelectableItem`'s self-focus move
+    // `document.activeElement` onto it), mirroring upstream `useSelect`. So the
+    // listbox must (a) leave the tab sequence once an option is focused —
+    // `useSelectableCollection` uses `tabIndex = focusedKey == null ? 0 : -1`
+    // (useSelectableCollection.ts:687-690) — and (b) NOT expose
+    // `aria-activedescendant`, which is the virtual-focus channel upstream Select
+    // never uses. These are overridden here, not in the shared `createListBox`,
+    // because the standalone `ListBox` keeps its container-focus model (focus
+    // stays on the listbox, `aria-activedescendant` is its AT channel).
+    //
+    // We also drop `createListBox`'s container-focus TRAMPOLINE (`onFocus`): it
+    // marshals the first key when the container is focused with `focusedKey ==
+    // null`, which is exactly Select's deliberate click-open state (the open
+    // effect sets `isFocused` true but leaves `focusedKey` null when nothing is
+    // selected, so the first arrow enters the first item). Upstream's own
+    // trampoline no-ops in this case because it guards on `manager.isFocused`
+    // (already true); our shared guard uses `focusedKey == null` for the
+    // standalone ListBox, so we strip it here to preserve Select's faithful
+    // model. (Auto-selecting on focus under replace behavior would also toggle
+    // the first item selected on open — the bug this override prevents.)
+    return {
+      ...rest,
+      tabIndex: state.isDisabled ? undefined : state.focusedKey() != null ? -1 : 0,
+    };
   };
 
   const items = () => Array.from(state.collection());
@@ -1003,7 +1072,12 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
   });
 
   const listBox = () => (
-    <ul
+    // Upstream RAC ListBox (and our own Menu.tsx) render a `<div role="listbox">`
+    // over `<div role="option">` rows, NOT `<ul>`/`<li>` — the collection is
+    // div-based for virtualization parity. `<ul>`/`<li>` here was a self-inflicted
+    // structural divergence surfaced by the Picker recertification (D5/D6/D8 saw
+    // `li[option]`/`ul[listbox]` where the React oracle sees `div`).
+    <div
       ref={(el) => (listBoxRef = el)}
       {...domProps}
       {...cleanMenuProps()}
@@ -1014,9 +1088,9 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
       data-empty={state.collection().size === 0 || undefined}
     >
       {state.collection().size === 0 && local.renderEmptyState ? (
-        <li role="option" style={{ display: "contents" }} data-empty-state>
+        <div role="option" style={{ display: "contents" }} data-empty-state>
           {local.renderEmptyState()}
-        </li>
+        </div>
       ) : (
         <Show
           when={local.children}
@@ -1040,7 +1114,7 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
           {local.renderLoadMore?.()}
         </ListBoxLoadMoreItem>
       </Show>
-    </ul>
+    </div>
   );
 
   return (
@@ -1070,6 +1144,7 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
     "id",
     "item",
     "textValue",
+    "ref",
   ]);
 
   const context = useContext(SelectStateContext);
@@ -1078,7 +1153,11 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
   }
   const state = context as SelectState<T>;
   const selectContext = useContext(SelectContext) as SelectContextValue<T> | null;
-  const [ref, setRef] = createSignal<HTMLLIElement | null>(null);
+  const [ref, setRefSignal] = createSignal<HTMLDivElement | null>(null);
+  const setRef = (el: HTMLDivElement | null) => {
+    setRefSignal(el);
+    assignRef(local.ref, el as HTMLDivElement);
+  };
 
   const optionAria = createOption<T>(
     {
@@ -1187,7 +1266,7 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
           selectOption();
         }
       });
-    }) as JSX.EventHandler<HTMLLIElement, MouseEvent>;
+    }) as JSX.EventHandler<HTMLDivElement, MouseEvent>;
     return rest;
   };
   const selectOption = () => {
@@ -1209,7 +1288,9 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
 
   return (
     <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
-      <li
+      {/* `<div role="option">`, not `<li>` — see the SelectListBox note; upstream
+          RAC options are div-based. */}
+      <div
         ref={setRef}
         {...cleanOptionProps()}
         class={renderProps.class()}
@@ -1226,7 +1307,7 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
         ) : (
           renderProps.renderChildren()
         )}
-      </li>
+      </div>
     </SelectionIndicatorContext.Provider>
   );
 }