@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/src/RadioGroup.tsx

@@ -8,6 +8,7 @@
 import {
   type JSX,
   type ParentProps,
+  type Context,
   createContext,
   createMemo,
   createSignal,
@@ -43,9 +44,11 @@ import {
   type ClassNameOrFunction,
   type StyleOrFunction,
   type SlotProps,
+  Provider,
   useRenderProps,
   filterDOMProps,
 } from "./utils";
+import { TextContext } from "./Text";
 
 type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
 
@@ -147,6 +150,15 @@ export interface RadioGroupProps
   description?: JSX.Element;
   /** An error message for the radio group. */
   errorMessage?: JSX.Element;
+  /**
+   * Whether this component renders the visible description/error help-text nodes.
+   * Defaults to `true`. A styled layer (e.g. solid-spectrum) passes `false` to keep
+   * the id-minting and `aria-describedby` wiring here (so child radios inherit the
+   * group's shared description via `radioGroupData`) while owning the visible node
+   * itself — mirroring RAC, where the group exposes a `TextContext`/`FieldError`
+   * slot rather than rendering its own help text.
+   */
+  renderHelpText?: boolean;
 }
 
 export interface RadioProps extends Omit<AriaRadioProps, "children">, SlotProps {
@@ -213,7 +225,14 @@ export function RadioGroup(props: ParentProps<RadioGroupProps>): JSX.Element {
         props,
       ) as ParentProps<RadioGroupProps>)
     : props;
-  const [local, ariaProps] = splitProps(mergedProps, ["class", "style", "render", "ref", "slot"]);
+  const [local, ariaProps] = splitProps(mergedProps, [
+    "class",
+    "style",
+    "render",
+    "ref",
+    "slot",
+    "renderHelpText",
+  ]);
 
   const state = createRadioGroupState(() => ({
     value: mergedProps.value,
@@ -255,7 +274,9 @@ export function RadioGroup(props: ParentProps<RadioGroupProps>): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-RadioGroup",
@@ -366,12 +387,12 @@ export function RadioGroup(props: ParentProps<RadioGroupProps>): JSX.Element {
     return (
       <>
         {renderedChildren()}
-        <Show when={mergedProps.description}>
+        <Show when={(local.renderHelpText ?? true) && mergedProps.description}>
           <div {...(groupAria.descriptionProps as unknown as JSX.HTMLAttributes<HTMLDivElement>)}>
             {mergedProps.description}
           </div>
         </Show>
-        <Show when={isInvalid() && mergedProps.errorMessage}>
+        <Show when={(local.renderHelpText ?? true) && isInvalid() && mergedProps.errorMessage}>
           <div {...(groupAria.errorMessageProps as unknown as JSX.HTMLAttributes<HTMLDivElement>)}>
             {mergedProps.errorMessage}
           </div>
@@ -766,3 +787,446 @@ export function Radio(props: RadioProps): JSX.Element {
     </Show>
   );
 }
+
+// ============================================================================
+// RadioField + RadioButton — the RAC form-field split (RAC 1.19)
+// ----------------------------------------------------------------------------
+// Upstream split the monolithic Radio into a RadioField wrapper (owns the radio
+// aria + optional description) containing a RadioButton control (the clickable
+// indicator + label). Mirrors react-aria-components/src/RadioGroup.tsx. The
+// legacy `Radio` above stays as the deprecated monolith for back-compat.
+//
+// Spine note: upstream wires the two halves with InternalRadioContext +
+// SelectionIndicatorContext + TextContext slots through `<Provider>`. Our
+// `<Provider>` is inert and TextContext carries no slots yet
+// (`port-context-slots`), so — exactly like RadioImpl already does — we use a
+// native Solid context and bridge `description`/`errorMessage` with explicit
+// ids. Like the legacy `Radio`, both halves require a surrounding RadioGroup.
+// ============================================================================
+
+export interface RadioFieldRenderProps {
+  /** Whether the radio is selected. */
+  isSelected: boolean;
+  /** Whether the radio is disabled. */
+  isDisabled: boolean;
+  /** Whether the radio is read only. */
+  isReadOnly: boolean;
+  /** Whether the radio is invalid. */
+  isInvalid: boolean;
+  /** Whether the radio is required. */
+  isRequired: boolean;
+}
+
+export interface RadioButtonRenderProps extends RadioRenderProps {}
+
+export interface RadioFieldProps extends Omit<AriaRadioProps, "children">, SlotProps {
+  /** The children of the component (typically a `RadioButton`). A function may receive render props. */
+  children?: RenderChildren<RadioFieldRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<RadioFieldRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<RadioFieldRenderProps>;
+  /** Ref for the radio field root element. */
+  ref?: RefLike<HTMLDivElement>;
+  /** Ref for the underlying input element. */
+  inputRef?: RefLike<HTMLInputElement>;
+}
+
+export interface RadioButtonProps extends SlotProps {
+  /** The children of the component. A function may receive render props. */
+  children?: RenderChildren<RadioButtonRenderProps>;
+  /** The CSS className for the element. */
+  class?: ClassNameOrFunction<RadioButtonRenderProps>;
+  /** The inline style for the element. */
+  style?: StyleOrFunction<RadioButtonRenderProps>;
+  /** Ref for the outer label element. */
+  ref?: RefLike<HTMLLabelElement>;
+  /** Handler called when hover starts. */
+  onHoverStart?: () => void;
+  /** Handler called when hover ends. */
+  onHoverEnd?: () => void;
+  /** Handler called when hover state changes. */
+  onHoverChange?: (isHovered: boolean) => void;
+}
+
+export interface RadioFieldContextValue extends Partial<RadioFieldProps> {
+  slots?: Record<string, Partial<RadioFieldProps>>;
+}
+export const RadioFieldContext = createContext<RadioFieldContextValue | null>(null);
+
+/** Carries the radio aria + state from a RadioField/Radio wrapper to its RadioButton. */
+interface InternalRadioContextValue {
+  isSelected: () => boolean;
+  isPressed: () => boolean;
+  isDisabled: () => boolean;
+  labelProps: () => JSX.LabelHTMLAttributes<HTMLLabelElement>;
+  inputProps: () => JSX.InputHTMLAttributes<HTMLInputElement>;
+  setInputRef: (el: HTMLInputElement) => void;
+  defaultClassName: string;
+}
+const InternalRadioContext = createContext<InternalRadioContextValue | null>(null);
+
+/**
+ * A RadioField represents an individual option within a radio group, containing a
+ * `RadioButton` and optional description. Must be rendered inside a `RadioGroup`.
+ * Per-option help text is wired through a TextContext description slot — render it
+ * with `<Text slot="description">`. (Radios have no per-option error slot; errors
+ * are reported at the group level.)
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup>
+ *   <RadioField value="a">
+ *     <RadioButton>Option A</RadioButton>
+ *     <Text slot="description">The first option</Text>
+ *   </RadioField>
+ * </RadioGroup>
+ * ```
+ */
+export function RadioField(props: RadioFieldProps): JSX.Element {
+  const getState = createMemo(() => useContext(RadioGroupStateContext));
+  return (
+    <Show when={getState()} fallback={null} keyed>
+      {(state) => <RadioFieldImpl fieldProps={props} state={state} />}
+    </Show>
+  );
+}
+
+function RadioFieldImpl(props: {
+  fieldProps: RadioFieldProps;
+  state: RadioGroupState;
+}): JSX.Element {
+  const [inputElement, setInputElement] = createSignal<HTMLInputElement | null>(null);
+  const { state } = props;
+  const contextProps = useContext(RadioFieldContext);
+  const contextSlotProps = contextProps?.slots?.[props.fieldProps.slot ?? "default"];
+  const contextBaseProps = createMemo<Partial<RadioFieldProps>>(() => {
+    if (!contextProps) return {};
+    const { slots: _slots, ...rest } = contextProps;
+    return rest;
+  });
+  const fieldProps = contextProps
+    ? (mergeProps(contextBaseProps(), contextSlotProps ?? {}, props.fieldProps) as RadioFieldProps)
+    : props.fieldProps;
+  const inputRefs = createMemo(
+    () =>
+      [contextBaseProps().inputRef, contextSlotProps?.inputRef, props.fieldProps.inputRef].filter(
+        Boolean,
+      ) as RefLike<HTMLInputElement>[],
+  );
+
+  // `children` is split out of ariaProps so neither the inputAriaProps key-copy
+  // loop nor the hook accessor spread eagerly reads it — reading a Solid
+  // `children` getter instantiates the nested RadioButton, and doing so OUTSIDE
+  // InternalRadioContext both breaks its binding and recurses.
+  const [local, ariaProps] = splitProps(fieldProps, [
+    "class",
+    "style",
+    "ref",
+    "inputRef",
+    "slot",
+    "children",
+  ]);
+  const inputAriaProps = 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 radioAria = createRadio(
+    () => ({
+      ...inputAriaProps(),
+      // The hook reads `children` only to decide if an aria-label is needed; the
+      // visible label lives in the RadioButton, so report presence as a literal.
+      children: true,
+    }),
+    state,
+    inputElement,
+  );
+
+  // The hook mints the description slot id and bakes the combined aria-describedby
+  // (own description + the group's shared description/error) into the input; the
+  // field exposes that id through TextContext so a `<Text slot="description">`
+  // child resolves it. Mirrors react-aria-components' RadioField Provider value
+  // list (description slot only — radios have no per-option error slot).
+  const textSlots = {
+    slots: {
+      get description() {
+        return radioAria.descriptionProps;
+      },
+    },
+  };
+
+  const setInputRef = (el: HTMLInputElement) => {
+    setInputElement(el);
+    el.addEventListener("invalid", (event) => {
+      state.updateValidation(getNativeValidation(el));
+      state.commitValidation();
+      el.focus();
+      event.preventDefault();
+    });
+    el.addEventListener("change", () => {
+      state.updateValidation(el.validity.valid ? validValidation : getNativeValidation(el));
+      state.commitValidation();
+    });
+    for (const ref of inputRefs()) {
+      assignRef(ref, el);
+    }
+  };
+  const setFieldRef = (el: HTMLDivElement) => {
+    assignRef(local.ref, el);
+  };
+
+  const internalContext: InternalRadioContextValue = {
+    isSelected: () => radioAria.isSelected(),
+    isPressed: () => radioAria.isPressed(),
+    isDisabled: () => radioAria.isDisabled,
+    labelProps: () => radioAria.labelProps,
+    inputProps: () => radioAria.inputProps,
+    setInputRef,
+    defaultClassName: "solidaria-RadioButton",
+  };
+
+  const selectionIndicatorContext = createMemo<SelectionIndicatorContextValue>(() => ({
+    isSelected: radioAria.isSelected,
+  }));
+
+  const renderValues = createMemo<RadioFieldRenderProps>(() => ({
+    isSelected: radioAria.isSelected(),
+    isDisabled: radioAria.isDisabled,
+    isReadOnly: state.isReadOnly,
+    isInvalid: state.isInvalid,
+    isRequired: state.isRequired,
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: fieldProps.children,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-RadioField",
+    },
+    renderValues,
+  );
+
+  const domProps = createMemo(() => {
+    const filtered = filterDOMProps(ariaProps, { global: true });
+    delete (filtered as Record<string, unknown>).id;
+    delete (filtered as Record<string, unknown>).onClick;
+    return filtered;
+  });
+
+  // Children are accessed inside the providers (component-execution owner) so a
+  // nested RadioButton's useContext binds to InternalRadioContext.
+  const FieldChildren = () => {
+    const childRenderValues: RadioFieldRenderProps = {
+      get isSelected() {
+        return radioAria.isSelected();
+      },
+      get isDisabled() {
+        return radioAria.isDisabled;
+      },
+      get isReadOnly() {
+        return state.isReadOnly;
+      },
+      get isInvalid() {
+        return state.isInvalid;
+      },
+      get isRequired() {
+        return state.isRequired;
+      },
+    };
+    const renderedChildren = createMemo(() => {
+      const children = fieldProps.children;
+      return typeof children === "function" ? children(childRenderValues) : children;
+    });
+    return <>{renderedChildren()}</>;
+  };
+
+  return (
+    <div
+      {...domProps()}
+      ref={setFieldRef}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={local.slot}
+      data-selected={radioAria.isSelected() || undefined}
+      data-disabled={radioAria.isDisabled || undefined}
+      data-readonly={state.isReadOnly || undefined}
+      data-invalid={state.isInvalid || undefined}
+      data-required={state.isRequired || undefined}
+    >
+      <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
+        <InternalRadioContext.Provider value={internalContext}>
+          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+            <FieldChildren />
+          </Provider>
+        </InternalRadioContext.Provider>
+      </SelectionIndicatorContext.Provider>
+    </div>
+  );
+}
+
+/**
+ * A RadioButton is the clickable area of a radio, including the indicator and label.
+ * Must be rendered inside a `RadioField` (or the legacy `Radio`).
+ */
+export function RadioButton(props: RadioButtonProps): JSX.Element {
+  const getCtx = createMemo(() => useContext(InternalRadioContext));
+  const getState = createMemo(() => useContext(RadioGroupStateContext));
+  return (
+    <Show when={getCtx()} fallback={null} keyed>
+      {(ctx) => (
+        <Show when={getState()} fallback={null} keyed>
+          {(state) => <RadioButtonImpl buttonProps={props} ctx={ctx} state={state} />}
+        </Show>
+      )}
+    </Show>
+  );
+}
+
+function RadioButtonImpl(props: {
+  buttonProps: RadioButtonProps;
+  ctx: InternalRadioContextValue;
+  state: RadioGroupState;
+}): JSX.Element {
+  const { ctx, state } = props;
+
+  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+  const { isHovered, hoverProps } = createHover({
+    get isDisabled() {
+      return ctx.isDisabled() || state.isReadOnly;
+    },
+    onHoverStart: props.buttonProps.onHoverStart,
+    onHoverEnd: props.buttonProps.onHoverEnd,
+    onHoverChange: props.buttonProps.onHoverChange,
+  });
+
+  const renderValues = createMemo<RadioButtonRenderProps>(() => ({
+    isSelected: ctx.isSelected(),
+    isHovered: isHovered(),
+    isPressed: ctx.isPressed(),
+    isFocused: isFocused(),
+    isFocusVisible: isFocusVisible(),
+    isDisabled: ctx.isDisabled(),
+    isReadOnly: state.isReadOnly,
+    isInvalid: state.isInvalid,
+    isRequired: state.isRequired,
+  }));
+
+  const renderProps = useRenderProps(
+    {
+      children: props.buttonProps.children,
+      class: props.buttonProps.class,
+      style: props.buttonProps.style,
+      defaultClassName: ctx.defaultClassName,
+    },
+    renderValues,
+  );
+
+  const cleanLabelProps = () => {
+    const { ref: _ref1, ...rest } = ctx.labelProps() as Record<string, unknown>;
+    return rest;
+  };
+  const cleanHoverProps = () => {
+    const { ref: _ref2, ...rest } = hoverProps as Record<string, unknown>;
+    return rest;
+  };
+  const cleanInputProps = () => {
+    const {
+      ref: _ref3,
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      ...rest
+    } = ctx.inputProps() as Record<string, unknown>;
+    return rest;
+  };
+  const cleanFocusProps = () => {
+    const {
+      ref: _ref4,
+      onFocus: _onFocus,
+      onBlur: _onBlur,
+      ...rest
+    } = focusProps as Record<string, unknown>;
+    return rest;
+  };
+  const handleInputFocus: JSX.EventHandler<HTMLInputElement, FocusEvent> = (event) => {
+    (
+      ctx.inputProps() as unknown as { onFocus?: JSX.EventHandler<HTMLInputElement, FocusEvent> }
+    ).onFocus?.(event);
+    (
+      focusProps as unknown as { onFocus?: JSX.EventHandler<HTMLInputElement, FocusEvent> }
+    ).onFocus?.(event);
+  };
+  const handleInputBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (event) => {
+    (
+      ctx.inputProps() as unknown as { onBlur?: JSX.EventHandler<HTMLInputElement, FocusEvent> }
+    ).onBlur?.(event);
+    (focusProps as unknown as { onBlur?: JSX.EventHandler<HTMLInputElement, FocusEvent> }).onBlur?.(
+      event,
+    );
+  };
+  const handleInputClick: JSX.EventHandler<HTMLInputElement, MouseEvent> = (event) => {
+    (
+      ctx.inputProps() as unknown as { onClick?: JSX.EventHandler<HTMLInputElement, MouseEvent> }
+    ).onClick?.(event);
+  };
+  const handleInputInvalid: JSX.EventHandler<HTMLInputElement, Event> = (event) => {
+    state.updateValidation(getNativeValidation(event.currentTarget));
+    state.commitValidation();
+    event.currentTarget.focus();
+    event.preventDefault();
+  };
+  const handleInputChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {
+    (
+      ctx.inputProps() as unknown as { onChange?: JSX.EventHandler<HTMLInputElement, Event> }
+    ).onChange?.(event);
+    state.updateValidation(
+      event.currentTarget.validity.valid
+        ? validValidation
+        : getNativeValidation(event.currentTarget),
+    );
+    state.commitValidation();
+  };
+  const setButtonRef = (el: HTMLLabelElement) => {
+    assignRef(props.buttonProps.ref, el);
+  };
+
+  return (
+    <label
+      {...cleanLabelProps()}
+      {...cleanHoverProps()}
+      ref={setButtonRef}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={props.buttonProps.slot}
+      data-selected={ctx.isSelected() || undefined}
+      data-pressed={ctx.isPressed() || undefined}
+      data-hovered={isHovered() || undefined}
+      data-focused={isFocused() || undefined}
+      data-focus-visible={isFocusVisible() || undefined}
+      data-disabled={ctx.isDisabled() || undefined}
+      data-readonly={state.isReadOnly || undefined}
+      data-invalid={state.isInvalid || undefined}
+      data-required={state.isRequired || undefined}
+    >
+      <VisuallyHidden>
+        <input
+          ref={ctx.setInputRef}
+          {...cleanInputProps()}
+          {...cleanFocusProps()}
+          onFocus={handleInputFocus}
+          onBlur={handleInputBlur}
+          onInvalid={handleInputInvalid}
+          onChange={handleInputChange}
+          onClick={handleInputClick}
+        />
+      </VisuallyHidden>
+      {renderProps.renderChildren()}
+    </label>
+  );
+}

package/src/RangeCalendar.tsx

@@ -508,7 +508,9 @@ export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-RangeCalendarCell",

package/src/SearchField.tsx

@@ -7,6 +7,7 @@
 
 import {
   type JSX,
+  type Context,
   createContext,
   createMemo,
   onCleanup,
@@ -38,7 +39,9 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 
 export interface SearchFieldRenderProps {
   /** Whether the search field is empty. */
@@ -456,7 +459,9 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-SearchField",
@@ -544,6 +549,21 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
     const children = local.children;
     return typeof children === "function" ? children(childRenderValues) : children;
   };
+  // Provide the description / errorMessage props as `TextContext` slots (mirrors
+  // react-aria-components' SearchField), so a `<Text slot="description">` /
+  // `<Text slot="errorMessage">` child picks up the `id` its `aria-describedby`
+  // references. Additive: existing consumers reading these off
+  // `SearchFieldContext` are unaffected.
+  const textSlots = {
+    slots: {
+      get description() {
+        return searchFieldAria.descriptionProps;
+      },
+      get errorMessage() {
+        return searchFieldAria.errorMessageProps;
+      },
+    },
+  };
 
   return (
     <FieldErrorContext.Provider value={fieldErrorContext}>
@@ -559,7 +579,9 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
           data-required={ariaProps.isRequired || undefined}
           data-readonly={ariaProps.isReadOnly || undefined}
         >
-          {fieldChildren()}
+          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+            {fieldChildren()}
+          </Provider>
         </div>
       </SearchFieldContext.Provider>
     </FieldErrorContext.Provider>
@@ -758,7 +780,9 @@ export function SearchFieldClearButton(props: SearchFieldClearButtonProps): JSX.
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-SearchField-clear",

package/src/Select.tsx

@@ -766,7 +766,9 @@ export function SelectTrigger(props: SelectTriggerProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Select-trigger",
@@ -871,7 +873,9 @@ export function SelectValue<T>(props: SelectValueProps<T>): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children ?? defaultSelectValueChildren,
+      get children() {
+        return props.children ?? defaultSelectValueChildren;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Select-value",
@@ -959,7 +963,9 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
   );
 
   const renderValues = createMemo<SelectListBoxRenderProps>(() => ({
-    isFocused: state.isFocused(),
+    // Focus within the listbox itself (the selection manager's focus state),
+    // not the select-level trigger focus.
+    isFocused: state.selectionManager.isFocused,
   }));
 
   const renderProps = useRenderProps(
@@ -1004,7 +1010,7 @@ export function SelectListBox<T>(props: SelectListBoxProps<T>): JSX.Element {
       {...cleanListBoxProps()}
       class={renderProps.class()}
       style={renderProps.style()}
-      data-focused={state.isFocused() || undefined}
+      data-focused={state.selectionManager.isFocused || undefined}
       data-empty={state.collection().size === 0 || undefined}
     >
       {state.collection().size === 0 && local.renderEmptyState ? (
@@ -1072,6 +1078,7 @@ 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 optionAria = createOption<T>(
     {
@@ -1126,6 +1133,7 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
         }
       },
     },
+    () => ref(),
   );
   const isOptionFocusVisible = () =>
     optionAria.isFocused() && (selectContext?.isFocusVisible() ?? optionAria.isFocusVisible());
@@ -1141,7 +1149,9 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Select-option",
@@ -1200,6 +1210,7 @@ export function SelectOption<T>(props: SelectOptionProps<T>): JSX.Element {
   return (
     <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
       <li
+        ref={setRef}
         {...cleanOptionProps()}
         class={renderProps.class()}
         style={renderProps.style()}
@@ -1254,8 +1265,12 @@ function createSelectListStateAdapter<T>(state: SelectState<T>): ListState<T> {
 
   return {
     collection: state.collection,
-    isFocused: state.isFocused,
-    setFocused: state.setFocused,
+    selectionManager: state.selectionManager,
+    // Collection-level focus (the selection manager's), not the select-level
+    // trigger focus — upstream listbox internals only ever read
+    // state.selectionManager.isFocused.
+    isFocused: () => state.selectionManager.isFocused,
+    setFocused: (isFocused) => state.selectionManager.setFocused(isFocused),
     focusedKey: state.focusedKey,
     setFocusedKey: (key) => state.setFocusedKey(key ?? null),
     childFocusStrategy: () => null,