@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/src/Color.tsx

@@ -288,7 +288,9 @@ export function ColorSlider(props: ColorSliderProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorSlider",
@@ -422,7 +424,9 @@ export function ColorSliderTrack(props: ColorSliderTrackProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorSlider-track",
@@ -494,7 +498,9 @@ export function ColorSliderThumb(props: ColorSliderThumbProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorSlider-thumb",
@@ -739,7 +745,9 @@ export function ColorArea(props: ColorAreaProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorArea",
@@ -825,7 +833,9 @@ export function ColorAreaGradient(props: ColorAreaGradientProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorArea-gradient",
@@ -895,7 +905,9 @@ export function ColorAreaThumb(props: ColorAreaThumbProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorArea-thumb",
@@ -1144,7 +1156,9 @@ export function ColorWheel(props: ColorWheelProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorWheel",
@@ -1211,7 +1225,9 @@ export function ColorWheelTrack(props: ColorWheelTrackProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorWheel-track",
@@ -1281,7 +1297,9 @@ export function ColorWheelThumb(props: ColorWheelThumbProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorWheel-thumb",
@@ -1548,7 +1566,9 @@ export function ColorField(props: ColorFieldProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorField",
@@ -1677,7 +1697,9 @@ export function ColorFieldInput(props: ColorFieldInputProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorField-input",
@@ -1790,7 +1812,9 @@ export function ColorSwatch(props: ColorSwatchProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorSwatch",
@@ -1958,7 +1982,9 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorPicker",
@@ -2381,7 +2407,9 @@ export function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps): JSX.El
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ColorSwatchPickerItem",

package/src/ComboBox.tsx

@@ -8,9 +8,11 @@
 import {
   type JSX,
   type Accessor,
+  type Context,
   createContext,
   createEffect,
   createMemo,
+  createSignal,
   onCleanup,
   splitProps,
   useContext,
@@ -24,6 +26,7 @@ import {
   getComboBoxData,
   createHover,
   createInteractOutside,
+  createScrollIntoViewOnFocus,
   mergeProps,
   type AriaComboBoxProps,
   type AriaListBoxProps,
@@ -45,7 +48,9 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 import {
   SelectionIndicatorContext,
   type SelectionIndicatorContextValue,
@@ -561,6 +566,17 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
       ? (local.children as (values: ComboBoxRenderProps) => JSX.Element)(renderValues())
       : local.children;
 
+  const textSlots = {
+    slots: {
+      get description() {
+        return comboBoxAria.descriptionProps;
+      },
+      get errorMessage() {
+        return comboBoxAria.errorMessageProps;
+      },
+    },
+  };
+
   return (
     <ComboBoxContext.Provider
       value={
@@ -571,7 +587,12 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
           buttonProps: () => comboBoxAria.buttonProps,
           listBoxProps: () => ({
             ...comboBoxAria.listBoxProps,
-            onAction: runOptionAction,
+            onAction: undefined,
+            shouldUseVirtualFocus: true,
+            shouldSelectOnPressUp: true,
+            shouldFocusOnHover: true,
+            linkBehavior: "selection",
+            UNSTABLE_itemBehavior: "action",
           }),
           labelProps: () => comboBoxAria.labelProps,
           descriptionProps: () => comboBoxAria.descriptionProps,
@@ -637,7 +658,9 @@ export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
               value={state.selectedKey()?.toString() ?? ""}
             />
           </Show>
-          <ComboBoxChildren />
+          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+            <ComboBoxChildren />
+          </Provider>
         </div>
       </ComboBoxStateContext.Provider>
     </ComboBoxContext.Provider>
@@ -742,7 +765,9 @@ export function ComboBoxInput(props: ComboBoxInputProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ComboBox-input",
@@ -805,7 +830,9 @@ export function ComboBoxValue(props: ComboBoxValueProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-ComboBox-value",
@@ -862,7 +889,9 @@ export function ComboBoxButton(props: ComboBoxButtonProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ComboBox-button",
@@ -914,6 +943,15 @@ export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element
 
   let listBoxRef: HTMLUListElement | 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
+  // natively scroll an off-screen focused option into view.
+  createScrollIntoViewOnFocus({
+    focusedKey: () => state.focusedKey(),
+    isActive: () => isOpen(),
+    ref: () => listBoxRef ?? null,
+  });
+
   createInteractOutside({
     ref: () => listBoxRef ?? null,
     onInteractOutside: (e) => {
@@ -1040,6 +1078,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 optionId = () => {
     const listBoxId = getComboBoxData(state as ComboBoxState<unknown>)?.listBoxId;
     return listBoxId ? `${listBoxId}-option-${local.id}` : String(local.id);
@@ -1084,6 +1123,7 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
       },
     },
     listState,
+    () => ref(),
   );
 
   const isOptionFocusVisible = () =>
@@ -1101,7 +1141,9 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-ComboBox-option",
@@ -1121,6 +1163,7 @@ export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
   return (
     <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
       <li
+        ref={setRef}
         {...cleanOptionProps()}
         class={renderProps.class()}
         style={renderProps.style()}
@@ -1260,6 +1303,7 @@ function createComboBoxListStateAdapter<T>(state: ComboBoxState<T>): ListState<T
 
   return {
     collection: state.collection,
+    selectionManager: state.selectionManager,
     isFocused: state.isFocused,
     setFocused: state.setFocused,
     focusedKey: state.focusedKey,

package/src/DateField.tsx

@@ -7,6 +7,7 @@
 
 import {
   type JSX,
+  type Context,
   createContext,
   createEffect,
   createMemo,
@@ -39,7 +40,9 @@ import {
   useRenderProps,
   dataAttr,
   useIsHydrated,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 import { HiddenDateInput } from "./HiddenDateInput";
 import { FormContext, type FormProps } from "./Form";
 import {
@@ -309,6 +312,17 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
     formContext?.validationBehavior ??
     "native";
 
+  const textSlots = {
+    slots: {
+      get description() {
+        return fieldAria.descriptionProps;
+      },
+      get errorMessage() {
+        return fieldAria.errorMessageProps;
+      },
+    },
+  };
+
   return (
     <DateFieldStateContext.Provider value={state as unknown as DateFieldState<DateValue>}>
       <DateFieldContext.Provider
@@ -332,7 +346,9 @@ function DateFieldInner<T extends DateValue = CalendarDate>(
           data-required={dataAttr(state.isRequired())}
           data-invalid={dataAttr(state.isInvalid())}
         >
-          {local.children as JSX.Element}
+          <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+            {local.children as JSX.Element}
+          </Provider>
         </div>
         <Show when={(rest as Record<string, unknown>).name}>
           <HiddenDateInput
@@ -428,7 +444,9 @@ export function DateSegment(props: DateSegmentProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-DateSegment",

package/src/DatePicker.tsx

@@ -7,6 +7,7 @@
 
 import {
   type JSX,
+  type Context,
   createContext,
   createEffect,
   createMemo,
@@ -53,7 +54,9 @@ import {
   useRenderProps,
   dataAttr,
   useIsHydrated,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 import { DateFieldContext } from "./DateField";
 import { CalendarContext } from "./Calendar";
 import { RangeCalendarContext } from "./RangeCalendar";
@@ -535,7 +538,27 @@ function DatePickerInner<T extends DateValue = CalendarDate>(
               data-invalid={dataAttr(isInvalid())}
               data-open={dataAttr(overlayState.isOpen)}
             >
-              {props.children}
+              <Provider
+                values={
+                  [
+                    [
+                      TextContext,
+                      {
+                        slots: {
+                          get description() {
+                            return pickerAria.descriptionProps;
+                          },
+                          get errorMessage() {
+                            return pickerAria.errorMessageProps;
+                          },
+                        },
+                      },
+                    ],
+                  ] as Array<[Context<unknown>, unknown]>
+                }
+              >
+                {props.children}
+              </Provider>
             </div>
             <Show when={(rest as Record<string, unknown>).name}>
               <HiddenDateInput
@@ -716,7 +739,12 @@ function DateRangePickerInner<T extends DateValue = CalendarDate>(
     hideTimeZone: stateProps.hideTimeZone,
     placeholderValue: stateProps.placeholderValue,
     validationState: () => (isInvalid() ? "invalid" : access(stateProps.validationState)),
-    isDateUnavailable: stateProps.isDateUnavailable,
+    // The range picker's isDateUnavailable is anchor-aware (date, anchorDate),
+    // but a text field has no range anchor, so adapt it to the field's 1-arg form
+    // by always passing a null anchor (checks raw per-date availability).
+    isDateUnavailable: stateProps.isDateUnavailable
+      ? (date: DateValue) => stateProps.isDateUnavailable!(date, null)
+      : undefined,
   } satisfies Partial<DateFieldStateProps<T>>;
 
   const startFieldState = createDateFieldState<T>({
@@ -823,7 +851,27 @@ function DateRangePickerInner<T extends DateValue = CalendarDate>(
             data-invalid={dataAttr(isInvalid())}
             data-open={dataAttr(overlayState.isOpen)}
           >
-            {props.children}
+            <Provider
+              values={
+                [
+                  [
+                    TextContext,
+                    {
+                      slots: {
+                        get description() {
+                          return pickerAria.descriptionProps;
+                        },
+                        get errorMessage() {
+                          return pickerAria.errorMessageProps;
+                        },
+                      },
+                    },
+                  ],
+                ] as Array<[Context<unknown>, unknown]>
+              }
+            >
+              {props.children}
+            </Provider>
           </div>
           <Show when={(rest as Record<string, unknown>).startName}>
             <HiddenDateInput
@@ -866,7 +914,9 @@ export function DatePickerButton(props: DatePickerButtonProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-DatePickerButton",
@@ -909,7 +959,9 @@ export function DateRangePickerButton(props: DateRangePickerButtonProps): JSX.El
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-DateRangePickerButton",

package/src/Dialog.tsx

@@ -27,7 +27,9 @@ import {
   type OverlayTriggerState,
 } from "@proyecto-viviana/solid-stately";
 import { DialogTriggerContext, useOverlayTriggerState } from "./contexts";
+import { ButtonContext } from "./Button";
 import {
+  DEFAULT_SLOT,
   type RenderChildren,
   type ClassNameOrFunction,
   type StyleOrFunction,
@@ -167,7 +169,7 @@ export function Dialog(props: DialogProps): JSX.Element {
     ["role", "aria-label", "aria-labelledby", "aria-describedby"],
   );
 
-  let dialogRef!: HTMLDivElement;
+  let dialogRef!: HTMLElement;
 
   // Get trigger context for aria-labelledby fallback
   const triggerContext = useContext(DialogTriggerContext);
@@ -223,7 +225,9 @@ export function Dialog(props: DialogProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Dialog",
@@ -237,7 +241,7 @@ export function Dialog(props: DialogProps): JSX.Element {
 
   return (
     <DialogContext.Provider value={{ close, titleId: titleId() }}>
-      <div
+      <section
         {...dialogProps()}
         {...domProps()}
         ref={dialogRef}
@@ -245,8 +249,12 @@ export function Dialog(props: DialogProps): JSX.Element {
         style={renderProps.style()}
         slot={local.slot}
       >
-        {renderProps.renderChildren()}
-      </div>
+        <ButtonContext.Provider
+          value={{ slots: { [DEFAULT_SLOT]: {}, close: { onPress: () => close() } } }}
+        >
+          {renderProps.renderChildren()}
+        </ButtonContext.Provider>
+      </section>
     </DialogContext.Provider>
   );
 }

package/src/Disclosure.tsx

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

package/src/DragAndDrop.tsx

@@ -58,7 +58,9 @@ function DefaultDropIndicator(props: DropIndicatorProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-DropIndicator",

package/src/DropZone.tsx

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