@proyecto-viviana/solidaria-components 0.4.0 → 0.5.0

package/src/Autocomplete.tsx

@@ -26,6 +26,7 @@ import {
   createAutocompleteState,
   type AutocompleteState,
   type AutocompleteStateOptions,
+  type CollectionNode,
 } from "@proyecto-viviana/solid-stately";
 import { type SlotProps } from "./utils";
 
@@ -44,7 +45,7 @@ export interface AutocompleteContextValue {
 export interface AutocompleteCollectionContextValue {
   collectionProps: CollectionOptions;
   collectionRef: (el: HTMLElement) => void;
-  filter?: (textValue: string) => boolean;
+  filter?: (nodeTextValue: string, node: CollectionNode<unknown>) => boolean;
 }
 
 export const AutocompleteContext = createContext<AutocompleteContextValue | null>(null);
@@ -126,16 +127,18 @@ export function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Elem
 
   const state = createAutocompleteState(stateProps);
 
-  // Create refs
-  let inputRef: HTMLInputElement | undefined;
-  let collectionRef: HTMLElement | undefined;
+  // Refs are signals so createAutocomplete's effects (the beforeinput listener
+  // and the reverse-path focusin listener that mirrors aria-activedescendant)
+  // bind reactively once the input/collection elements actually mount.
+  const [inputRef, setInputRef] = createSignal<HTMLInputElement>();
+  const [collectionRef, setCollectionRef] = createSignal<HTMLElement>();
 
   // Create autocomplete aria
   const autocomplete = createAutocomplete<T>(
     {
       ...ariaProps,
-      inputRef: () => inputRef,
-      collectionRef: () => collectionRef,
+      inputRef,
+      collectionRef,
     },
     state,
   );
@@ -144,7 +147,7 @@ export function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Elem
   const inputContextValue = createMemo<AutocompleteContextValue>(() => ({
     inputProps: autocomplete.inputProps,
     inputRef: (el: HTMLInputElement) => {
-      inputRef = el;
+      setInputRef(el);
     },
   }));
 
@@ -152,9 +155,11 @@ export function Autocomplete<T = unknown>(props: AutocompleteProps<T>): JSX.Elem
   const collectionContextValue = createMemo<AutocompleteCollectionContextValue>(() => ({
     collectionProps: autocomplete.collectionProps,
     collectionRef: (el: HTMLElement) => {
-      collectionRef = el;
+      setCollectionRef(el);
     },
-    filter: autocomplete.filter,
+    filter: autocomplete.filter as
+      | ((nodeTextValue: string, node: CollectionNode<unknown>) => boolean)
+      | undefined,
   }));
 
   return (

package/src/Breadcrumbs.tsx

@@ -17,7 +17,7 @@ import {
   For,
   Show,
 } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { ElementTag } from "./ElementTag";
 import {
   createBreadcrumbs,
   createBreadcrumbItem,
@@ -196,7 +196,20 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
         setStaticItemCount,
       }}
     >
-      <nav
+      {/*
+        Faithful to react-aria-components Breadcrumbs: the accessible name (navProps'
+        aria-label) sits directly on the <ol> (role="list"), with NO wrapping <nav>
+        landmark (react-spectrum/packages/react-aria-components/src/Breadcrumbs.tsx
+        renders `<dom.ol {...mergeProps(DOMProps, navProps)} style={props.style}>`).
+        The <ol> carries ONLY the consumer's class/style — no hard-coded inline
+        layout reset. An inline reset would beat the styled layer's class (inline
+        wins over class), which is exactly what broke S2 parity: the solid-spectrum
+        `wrapperStyles` class supplies display:flex / list-style:none / padding:0 /
+        marginStart and deliberately leaves align-items at its `normal` default, so
+        a hard-coded inline `align-items:center` + `margin:0` clobbered the
+        wrapper's margin and diverged from S2 (whose <ol> has neither).
+      */}
+      <ol
         {...navProps}
         {...domProps()}
         ref={(element) => assignRef(local.ref, element)}
@@ -204,39 +217,27 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
         style={renderProps.style()}
         data-disabled={isDisabled() || undefined}
       >
-        <ol
-          style={{
-            display: "flex",
-            "align-items": "center",
-            "list-style": "none",
-            margin: 0,
-            padding: 0,
-          }}
+        <Show
+          when={hasCollectionItems()}
+          fallback={<StaticBreadcrumbItems>{local.children as JSX.Element}</StaticBreadcrumbItems>}
         >
-          <Show
-            when={hasCollectionItems()}
-            fallback={
-              <StaticBreadcrumbItems>{local.children as JSX.Element}</StaticBreadcrumbItems>
-            }
-          >
-            <For each={items()}>
-              {(item, index) => {
-                const itemKey = getItemKey(item, index());
-                const isLast = () => index() === items().length - 1;
-                const renderItem = local.children as ((item: T) => JSX.Element) | undefined;
-
-                return (
-                  <li style={{ display: "flex", "align-items": "center" }}>
-                    <BreadcrumbItemContext.Provider value={{ itemKey, isLast }}>
-                      {renderItem?.(item)}
-                    </BreadcrumbItemContext.Provider>
-                  </li>
-                );
-              }}
-            </For>
-          </Show>
-        </ol>
-      </nav>
+          <For each={items()}>
+            {(item, index) => {
+              const itemKey = getItemKey(item, index());
+              const isLast = () => index() === items().length - 1;
+              const renderItem = local.children as ((item: T) => JSX.Element) | undefined;
+
+              return (
+                <li style={{ display: "flex", "align-items": "center" }}>
+                  <BreadcrumbItemContext.Provider value={{ itemKey, isLast }}>
+                    {renderItem?.(item)}
+                  </BreadcrumbItemContext.Provider>
+                </li>
+              );
+            }}
+          </For>
+        </Show>
+      </ol>
     </BreadcrumbsContext.Provider>
   );
 }
@@ -277,6 +278,18 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
       staticIndex === context.staticItemCount() - 1);
   const itemKey = () => itemContext?.itemKey ?? ariaProps.id ?? null;
 
+  // Mirror react-aria-components' Link: render an <a> only when there is an
+  // href on an enabled, non-current item; otherwise fall back to a <span
+  // role="link"> (via createLink). A styled layer may force the element type
+  // (S2 renders the current item as a plain <div>), which takes precedence.
+  const elementType = () =>
+    ariaProps.elementType ?? (ariaProps.href && !isDisabled() && !isCurrent() ? "a" : "span");
+  // The current breadcrumb is the current page and is non-interactive: S2
+  // renders it as a plain element with no link role. createLink only omits
+  // role="link" for an <a>, so treat the current item as an "a" purely for the
+  // role decision while still rendering the resolved element type above.
+  const linkElementType = () => (isCurrent() ? "a" : elementType());
+
   const handlePress = (e: PressEvent) => {
     ariaProps.onPress?.(e);
     const key = itemKey();
@@ -285,7 +298,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
     }
   };
 
-  const { itemProps, isPressed } = createBreadcrumbItem({
+  const itemAria = createBreadcrumbItem({
     get id() {
       return ariaProps.id;
     },
@@ -305,7 +318,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
       return ariaProps.rel;
     },
     get elementType() {
-      return ariaProps.elementType;
+      return linkElementType();
     },
     get onPress() {
       return handlePress;
@@ -354,20 +367,23 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
     },
   });
 
+  const isPressed = itemAria.isPressed;
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return isDisabled();
     },
   });
+  // Read itemAria.itemProps fresh inside the memo (do NOT destructure it above):
+  // the reactive getter re-runs createBreadcrumbItem → createLink each time this
+  // memo re-evaluates, so role/tabIndex track elementType once isCurrent settles.
   const mergedItemProps = createMemo(() =>
     mergeProps(
-      itemProps as Record<string, unknown>,
+      itemAria.itemProps as Record<string, unknown>,
       focusProps as Record<string, unknown>,
       hoverProps as Record<string, unknown>,
     ),
   );
-  const elementType = () => ariaProps.elementType ?? "a";
 
   const renderValues = createMemo<BreadcrumbItemRenderProps>(() => ({
     isCurrent: isCurrent(),
@@ -397,11 +413,10 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
   };
 
   return (
-    <Dynamic
-      component={elementType()}
+    <ElementTag
+      tag={elementType()}
       {...mergedItemProps()}
       ref={(element: HTMLElement) => assignRef(local.ref, element)}
-      href={isCurrent() ? undefined : (mergedItemProps() as { href?: string }).href}
       aria-current={isCurrent() ? (ariaProps["aria-current"] ?? "page") : undefined}
       aria-disabled={isDisabled() || isCurrent() || undefined}
       class={renderProps.class()}
@@ -414,7 +429,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
       data-hovered={isHovered() || undefined}
     >
       {renderProps.renderChildren()}
-    </Dynamic>
+    </ElementTag>
   );
 }
 

package/src/Calendar.tsx

@@ -305,6 +305,17 @@ function CalendarWithState<
         <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. */}
+      <VisuallyHidden>
+        <button
+          aria-label={String(calendarAria.nextButtonProps["aria-label"] ?? "")}
+          disabled={Boolean(calendarAria.nextButtonProps.disabled)}
+          onClick={() => state().focusNextPage()}
+          tabIndex={-1}
+        />
+      </VisuallyHidden>
     </div>
   );
 }
@@ -387,6 +398,18 @@ function CalendarInner<
           <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. */}
+        <VisuallyHidden>
+          <button
+            aria-label={String(calendarAria.nextButtonProps["aria-label"] ?? "")}
+            disabled={Boolean(calendarAria.nextButtonProps.disabled)}
+            onClick={() => state.focusNextPage()}
+            tabIndex={-1}
+          />
+        </VisuallyHidden>
       </div>
     </CalendarContext.Provider>
   );
@@ -455,12 +478,18 @@ export function CalendarButton(props: CalendarButtonProps): JSX.Element {
     return calendarAria.nextButtonProps;
   });
 
+  const isDisabled = () => props.isDisabled || state.isDisabled();
+
   return (
     <button
       {...buttonProps()}
       class={props.class ?? "solidaria-CalendarButton"}
       style={props.style}
-      disabled={props.isDisabled || state.isDisabled()}
+      disabled={isDisabled()}
+      // Mirror useFocusable: always set an explicit tabIndex on an enabled
+      // focusable button (0), and drop it entirely when disabled — so the
+      // nav buttons appear in the roving tab order exactly as upstream does.
+      tabindex={isDisabled() ? undefined : 0}
     >
       {props.children}
     </button>

package/src/Color.tsx

@@ -28,6 +28,7 @@ import {
   createFocusRing,
   createHover,
   mergeProps,
+  useLocale,
   type AriaColorSliderOptions,
   type AriaColorAreaOptions,
   type AriaColorWheelOptions,
@@ -233,7 +234,11 @@ export function ColorSlider(props: ColorSliderProps): JSX.Element {
     ],
   );
 
-  // Create color slider state
+  const locale = useLocale();
+
+  // Create color slider state. The locale drives the thumb value label's
+  // channel-value formatting (e.g. hue "50°" vs ar-AE "50 درجة"), mirroring
+  // RAC ColorSlider passing `useLocale().locale` into useColorSliderState.
   const state = createColorSliderState(() => ({
     value: stateProps.value ?? pickerContext?.value,
     defaultValue: stateProps.defaultValue,
@@ -243,6 +248,7 @@ export function ColorSlider(props: ColorSliderProps): JSX.Element {
     colorSpace: stateProps.colorSpace,
     orientation: ariaProps.orientation,
     isDisabled: ariaProps.isDisabled,
+    locale: locale().locale,
   }));
 
   let trackRef: HTMLDivElement | undefined;
@@ -2115,11 +2121,10 @@ export function ColorSwatchPicker(props: ColorSwatchPickerProps): JSX.Element {
     () => ({
       id: local.id,
       "aria-label":
-        local["aria-label"] ?? (!local["aria-labelledby"] ? "Color swatch picker" : undefined),
+        local["aria-label"] ?? (!local["aria-labelledby"] ? "Color swatches" : undefined),
       "aria-labelledby": local["aria-labelledby"],
       "aria-describedby": local["aria-describedby"],
       "aria-details": local["aria-details"],
-      shouldFocusWrap: true,
     }),
     state,
   );
@@ -2247,32 +2252,28 @@ export function ColorSwatchPicker(props: ColorSwatchPickerProps): JSX.Element {
     let nextKey: Key | null = null;
     switch (e.key) {
       case "ArrowDown":
-        nextKey = getGridKeyBelow(listbox, initialKey) ?? getBoundaryEnabledKey("next");
+        nextKey = getGridKeyBelow(listbox, initialKey);
         break;
       case "ArrowUp":
-        nextKey = getGridKeyAbove(listbox, initialKey) ?? getBoundaryEnabledKey("prev");
+        nextKey = getGridKeyAbove(listbox, initialKey);
         break;
       case "ArrowRight":
-        nextKey =
-          getGridKeyRightOf(initialKey) ??
-          (resolveDirection() === "rtl"
-            ? getBoundaryEnabledKey("prev")
-            : getBoundaryEnabledKey("next"));
+        nextKey = getGridKeyRightOf(initialKey);
         break;
       case "ArrowLeft":
-        nextKey =
-          getGridKeyLeftOf(initialKey) ??
-          (resolveDirection() === "rtl"
-            ? getBoundaryEnabledKey("next")
-            : getBoundaryEnabledKey("prev"));
+        nextKey = getGridKeyLeftOf(initialKey);
         break;
     }
 
-    if (nextKey == null) return false;
-
-    state.setFocusedKey(nextKey);
-    if (state.selectionMode() === "single") {
-      state.replaceSelection(nextKey);
+    // Mirror react-aria's grid keyboard delegate: an arrow in grid layout is
+    // always consumed (blocking the linear ListBox handler and page scroll),
+    // but focus only moves when the delegate yields a next key. With
+    // shouldFocusWrap unset (upstream default false) there is no wrap, so arrows
+    // stop dead at the grid's edges. Selection is not mutated on arrow — under
+    // the default 'toggle' selection behavior focus moves without selecting, and
+    // Enter/Space commits (handled by createSelectableItem).
+    if (nextKey != null) {
+      state.setFocusedKey(nextKey);
     }
 
     e.preventDefault();
@@ -2292,12 +2293,18 @@ export function ColorSwatchPicker(props: ColorSwatchPickerProps): JSX.Element {
     getListBoxKeyDown()?.(e);
   };
 
-  createEffect(() => {
-    const key = selectedKey();
-    if (key) {
-      state.setFocusedKey(key);
-    }
-  });
+  // NB: we deliberately do NOT seed `state.setFocusedKey(selectedKey())` at rest.
+  // Upstream's RAC `<ListBox>` (which `AriaColorSwatchPicker` is) keeps
+  // `focusedKey == null` until the collection is focused — the listbox CONTAINER
+  // is the roving tabstop (`tabIndex 0`), and `useSelectableCollection`'s onFocus
+  // navigates to `firstSelectedKey` on entry (mirrored by `createListBox`'s
+  // `onListBoxFocus`). Pre-seeding focusedKey to the selected swatch made the
+  // selected option the rest tabstop instead (container `tabIndex -1`) — a
+  // self-inflicted divergence — and, because our `createFocusWithin` only flips
+  // `manager.setFocused(true)` on CONTAINER focus (Solid's `onFocus` is
+  // non-bubbling), it also routed entry through a direct option focus that never
+  // set `isFocused`, so arrow keys could not pull real DOM focus. Letting the
+  // container be the tabstop restores both.
 
   const { isFocused, isFocusVisible, focusProps } = createFocusRing({ within: true });
   const domProps = createMemo(() =>
@@ -2387,13 +2394,20 @@ export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps): JSX.El
     onCleanup(() => context.unregisterItem(itemKey));
   });
 
+  const [optionRef, setOptionRef] = createSignal<HTMLElement | null>(null);
+
   const optionAria = createOption(
     () => ({
       key: key(),
       isDisabled: ariaProps.isDisabled,
-      "aria-label": ariaProps["aria-label"] ?? textValue(),
+      // No aria-label: the option is named by its content (the child swatch's
+      // role="img" aria-label), mirroring upstream ColorSwatchPickerItem which
+      // sets only textValue (typeahead, threaded via registerItem above) and
+      // never an aria-label.
+      "aria-label": ariaProps["aria-label"],
     }),
     context.state,
+    optionRef,
   );
 
   const renderValues = createMemo<ColorSwatchPickerItemRenderProps>(() => ({
@@ -2427,6 +2441,7 @@ export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps): JSX.El
 
   return (
     <div
+      ref={setOptionRef}
       {...mergeProps(domProps(), cleanOptionProps())}
       class={renderProps.class()}
       style={renderProps.style()}

package/src/ComboBox.tsx

@@ -28,6 +28,7 @@ import {
   createInteractOutside,
   createScrollIntoViewOnFocus,
   mergeProps,
+  isFocusVisible as isGlobalFocusVisible,
   type AriaComboBoxProps,
   type AriaListBoxProps,
   type AriaOptionProps,
@@ -239,6 +240,8 @@ export interface ComboBoxValueProps extends SlotProps {
 }
 
 export interface ComboBoxButtonProps extends SlotProps {
+  /** A ref to the underlying button element. */
+  ref?: RefLike<HTMLButtonElement>;
   /** The children of the button. */
   children?: RenderChildren<ComboBoxButtonRenderProps>;
   /** The CSS className for the element. */
@@ -278,6 +281,8 @@ export interface ComboBoxOptionRenderProps {
 
 export interface ComboBoxOptionProps<T>
   extends Omit<AriaOptionProps, "children" | "key">, SlotProps {
+  /** A ref to the underlying option element. */
+  ref?: RefLike<HTMLElement>;
   /** The unique key for the option. */
   id: Key;
   /** The item value. */
@@ -706,10 +711,13 @@ export function ComboBoxDescription(props: ComboBoxDescriptionProps): JSX.Elemen
     return rest;
   };
 
+  // Upstream renders the description via `<Text slot="description">`, and RAC's
+  // `Text` defaults to `elementType="span"` (Text.tsx:24) — so the help text is a
+  // `<span>`, not a `<div>`. Match it (mirrors the TextField port's same revert).
   return (
-    <div {...domProps} {...cleanDescriptionProps()} class={local.class} style={local.style}>
+    <span {...domProps} {...cleanDescriptionProps()} class={local.class} style={local.style}>
       {local.children}
-    </div>
+    </span>
   );
 }
 
@@ -729,10 +737,12 @@ export function ComboBoxErrorMessage(props: ComboBoxErrorMessageProps): JSX.Elem
     return rest;
   };
 
+  // Same as the description: upstream's error is `<Text slot="errorMessage">`,
+  // a `<span>` (RAC Text default elementType). Match it.
   return (
-    <div {...domProps} {...cleanErrorMessageProps()} class={local.class} style={local.style}>
+    <span {...domProps} {...cleanErrorMessageProps()} class={local.class} style={local.style}>
       {local.children}
-    </div>
+    </span>
   );
 }
 
@@ -865,7 +875,7 @@ export function ComboBoxValue(props: ComboBoxValueProps): JSX.Element {
  * The trigger button for a combobox.
  */
 export function ComboBoxButton(props: ComboBoxButtonProps): JSX.Element {
-  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children", "ref"]);
 
   const context = useContext(ComboBoxContext);
   if (!context) {
@@ -911,7 +921,10 @@ export function ComboBoxButton(props: ComboBoxButtonProps): JSX.Element {
   return (
     <button
       {...domProps}
-      ref={(el) => setButtonRef(el)}
+      ref={(el) => {
+        setButtonRef(el);
+        assignRef(local.ref, el);
+      }}
       {...cleanButtonProps()}
       {...cleanHoverProps()}
       class={renderProps.class()}
@@ -941,7 +954,7 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
   const { state: comboBoxState, listState, isOpen, inputRef, buttonRef, setListBoxRef } = context;
   const state = comboBoxState;
 
-  let listBoxRef: HTMLUListElement | undefined;
+  let listBoxRef: HTMLElement | undefined;
 
   // Reveal the activedescendant-focused option on keyboard navigation while the
   // listbox is open. Real DOM focus stays on the input, so the browser won't
@@ -1017,7 +1030,7 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
     );
   };
 
-  const setListBoxElement = (el: HTMLUListElement) => {
+  const setListBoxElement = (el: HTMLElement) => {
     listBoxRef = el;
     setListBoxRef(el);
   };
@@ -1028,7 +1041,10 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
 
   return (
     <Show when={isOpen()}>
-      <ul
+      {/* `<div role="listbox">`, not `<ul>` — upstream RAC ListBox (and our own
+          Select/ListBox) render div-over-div rows; the `role` comes from the
+          spread listbox aria props (createListBox), not the element tag. */}
+      <div
         {...domProps}
         ref={setListBoxElement}
         {...cleanContextProps()}
@@ -1052,7 +1068,7 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
             }}
           </For>
         </Show>
-      </ul>
+      </div>
     </Show>
   );
 }
@@ -1069,6 +1085,7 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
     "item",
     "textValue",
     "onAction",
+    "ref",
   ]);
 
   const stateContext = useContext(ComboBoxStateContext);
@@ -1078,7 +1095,7 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
   }
   const state = stateContext as ComboBoxState<T>;
   const listState = (comboBoxContext as ComboBoxContextValue<T>).listState;
-  const [ref, setRef] = createSignal<HTMLLIElement | null>(null);
+  const [ref, setRef] = createSignal<HTMLElement | null>(null);
   const optionId = () => {
     const listBoxId = getComboBoxData(state as ComboBoxState<unknown>)?.listBoxId;
     return listBoxId ? `${listBoxId}-option-${local.id}` : String(local.id);
@@ -1126,9 +1143,19 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
     () => ref(),
   );
 
-  const isOptionFocusVisible = () =>
-    optionAria.isFocusVisible() ||
-    (optionAria.isFocused() && (comboBoxContext?.isFocusVisible() ?? false));
+  // Mirror upstream `useOption` exactly (useOption.ts:172):
+  //   isFocusVisible = isFocused && selectionManager.isFocused && isFocusVisible()
+  // where `isFocusVisible()` is the GLOBAL interaction-modality singleton read as
+  // a render-time snapshot (NOT the input's focus ring, and NOT the option's own
+  // createFocusRing — the option div never receives real DOM focus under virtual
+  // focus, so its ring never lights). `optionAria.isFocused()` already folds in
+  // `selectionManager.isFocused()` (createSelectableItem.ts:239), so the upstream
+  // three-term product collapses to these two. Reading the global singleton off
+  // the `isFocused` dependency gives the same non-reactive snapshot semantics as
+  // React (mouse/hover focus → pointer modality → no ring; keyboard nav → keyboard
+  // modality → ring), which the earlier input-ring OR-branch got wrong (it lit the
+  // option ring whenever the input ring was on).
+  const isOptionFocusVisible = () => optionAria.isFocused() && isGlobalFocusVisible();
 
   const renderValues = createMemo<ComboBoxOptionRenderProps>(() => ({
     isSelected: optionAria.isSelected(),
@@ -1162,8 +1189,13 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
 
   return (
     <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
-      <li
-        ref={setRef}
+      {/* `<div role="option">`, not `<li>` — see the ComboBoxListBox note; the
+          `role` comes from the spread option aria props (createOption). */}
+      <div
+        ref={(el) => {
+          setRef(el);
+          assignRef(local.ref, el);
+        }}
         {...cleanOptionProps()}
         class={renderProps.class()}
         style={renderProps.style()}
@@ -1175,7 +1207,7 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
         data-disabled={optionAria.isDisabled() || undefined}
       >
         {renderProps.renderChildren()}
-      </li>
+      </div>
     </SelectionIndicatorContext.Provider>
   );
 }