@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/src/Tabs.tsx

@@ -102,10 +102,6 @@ export interface TabListRenderProps {
   orientation: TabOrientation;
   /** Whether the tab list is disabled. */
   isDisabled: boolean;
-  /** Whether the tab list has focus. */
-  isFocused: boolean;
-  /** Whether the tab list has visible focus. */
-  isFocusVisible: boolean;
 }
 
 export interface TabListProps<T> extends Omit<AriaTabListProps, "children">, SlotProps {
@@ -319,7 +315,9 @@ export function Tabs<T>(props: TabsProps<T>): JSX.Element {
     {
       class: local.class,
       style: local.style,
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       defaultClassName: "solidaria-Tabs",
     },
     renderValues,
@@ -437,13 +435,9 @@ function TabListInner<T>(props: {
   // Create tab list aria props
   const { tabListProps } = createTabList<T>(props.ariaProps as AriaTabListProps, state);
 
-  const { isFocused, isFocusVisible, focusProps } = createFocusRing();
-
   const renderValues = createMemo<TabListRenderProps>(() => ({
     orientation: state.orientation(),
     isDisabled: state.isDisabled(),
-    isFocused: state.isFocused() || isFocused(),
-    isFocusVisible: isFocusVisible(),
   }));
 
   const renderProps = useRenderProps(
@@ -455,42 +449,16 @@ function TabListInner<T>(props: {
     renderValues,
   );
 
-  // Helper to safely call event handlers that may be bound tuples
-  const callHandler = <E extends Event>(
-    handler: JSX.EventHandlerUnion<HTMLElement, E> | undefined,
-    event: E,
-  ) => {
-    if (!handler) return;
-    if (Array.isArray(handler)) {
-      handler[1].call(handler[0], event);
-      return;
-    }
-    if (typeof handler === "function") {
-      (handler as (evt: E) => void)(event);
-      return;
-    }
-    if (
-      typeof handler === "object" &&
-      "handleEvent" in handler &&
-      typeof handler.handleEvent === "function"
-    ) {
-      (handler.handleEvent as (evt: E) => void)(event);
-    }
-  };
-
-  // Combine event handlers
   const handleKeyDown = (e: KeyboardEvent) => {
     tabListProps.onKeyDown(e);
   };
 
   const handleFocus = (e: FocusEvent) => {
-    tabListProps.onFocus(e);
-    callHandler(focusProps.onFocus, e);
+    tabListProps.onFocusIn(e);
   };
 
   const handleBlur = (e: FocusEvent) => {
-    tabListProps.onBlur(e);
-    callHandler(focusProps.onBlur, e);
+    tabListProps.onFocusOut(e);
   };
 
   return (
@@ -503,10 +471,8 @@ function TabListInner<T>(props: {
       class={renderProps.class()}
       style={renderProps.style()}
       onKeyDown={handleKeyDown}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      data-focused={state.isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
+      onFocusIn={handleFocus}
+      onFocusOut={handleBlur}
       data-orientation={state.orientation()}
       data-disabled={state.isDisabled() || undefined}
     >
@@ -611,7 +577,9 @@ function TabInner(props: {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.local.class,
       style: props.local.style,
       defaultClassName: "solidaria-Tab",
@@ -634,7 +602,7 @@ function TabInner(props: {
         aria-controls={tabAria.isSelected() ? tabAria.tabProps["aria-controls"] : undefined}
         aria-label={tabAria.tabProps["aria-label"]}
         aria-labelledby={tabAria.tabProps["aria-labelledby"]}
-        tabIndex={tabAria.isSelected() && !tabAria.isDisabled() ? 0 : -1}
+        tabIndex={tabAria.tabProps.tabIndex}
         class={renderProps.class()}
         style={renderProps.style()}
         onKeyDown={tabAria.tabProps.onKeyDown}
@@ -642,6 +610,7 @@ function TabInner(props: {
         onPointerDown={tabAria.tabProps.onPointerDown}
         onClick={tabAria.tabProps.onClick}
         onFocus={tabAria.tabProps.onFocus}
+        onBlur={tabAria.tabProps.onBlur}
         {...hoverProps}
         data-selected={tabAria.isSelected() || undefined}
         data-focused={tabAria.isFocused() || undefined}
@@ -650,7 +619,7 @@ function TabInner(props: {
         data-hovered={isHovered() || undefined}
         data-disabled={tabAria.isDisabled() || undefined}
       >
-        {renderProps.renderChildren()}
+        {renderProps.renderChildrenStable()}
       </div>
     </SelectionIndicatorContext.Provider>
   );
@@ -750,7 +719,9 @@ export function TabPanel(props: TabPanelProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-TabPanel",

package/src/TagGroup.tsx

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

package/src/Text.tsx

@@ -1,18 +1,39 @@
-import { type JSX, createContext } from "solid-js";
-import type { SlotProps } from "./utils";
+import { type JSX, createContext, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { type ContextValue, type SlotProps, useContextProps, filterDOMProps } from "./utils";
 
-export interface TextProps extends SlotProps {
-  children?: JSX.Element;
-  class?: string;
-  style?: JSX.CSSProperties;
+export interface TextProps extends JSX.HTMLAttributes<HTMLElement>, SlotProps {
+  /** The element type to render as. @default 'span' */
+  elementType?: string;
 }
 
-export const TextContext = createContext<null>(null);
+/**
+ * Slotted context for `Text`. A field provides description / errorMessage props
+ * (each carrying the `id` its `aria-describedby` references) under named slots,
+ * so a `<Text slot="description">` child picks up the right `id` without the field
+ * threading it manually. Mirrors react-aria-components' `TextContext` (default
+ * `{}` so an unprovided `Text` merges against an empty context and renders as-is).
+ */
+export const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({});
 
+/**
+ * A piece of text, typically a label, description, or error message inside a
+ * field. Port of react-aria-components' `Text`: it consumes its slot from
+ * `TextContext` (via `useContextProps`) so a field can supply the `id` and other
+ * props for the matching slot, then renders them onto the element.
+ */
 export function Text(props: TextProps): JSX.Element {
+  const [merged] = useContextProps(props, undefined, TextContext);
+  // `slot` stays a logical prop (not a DOM attribute) and `ref`/`class`/`children`
+  // are rendered explicitly; everything else (notably the slotted `id`) is spread.
+  const [local, domProps] = splitProps(merged, ["elementType", "class", "children", "slot", "ref"]);
   return (
-    <span class={props.class ?? "solidaria-Text"} style={props.style}>
-      {props.children}
-    </span>
+    <Dynamic
+      component={local.elementType ?? "span"}
+      class={local.class ?? "solidaria-Text"}
+      {...filterDOMProps(domProps, { global: true })}
+    >
+      {local.children}
+    </Dynamic>
   );
 }

package/src/TextField.tsx

@@ -7,6 +7,7 @@
 
 import {
   type JSX,
+  type Context,
   createContext,
   useContext,
   createMemo,
@@ -38,7 +39,9 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 
 export interface TextFieldRenderProps {
   /** Whether the text field is disabled. */
@@ -149,8 +152,21 @@ export interface LabelProps extends JSX.LabelHTMLAttributes<HTMLLabelElement> {
 export function Label(props: LabelProps): JSX.Element {
   const context = useContext(TextFieldContext);
 
+  const localDOMProps = () => {
+    const result: Record<string, unknown> = {};
+    const propsRecord = props as Record<string, unknown>;
+
+    for (const key in propsRecord) {
+      if (key !== "children") {
+        result[key] = propsRecord[key];
+      }
+    }
+    return result;
+  };
+
   // Merge context labelProps with local props (local props take precedence)
   const mergedProps = () => {
+    const localProps = localDOMProps();
     if (context) {
       const { ref: _ref, ...contextLabelProps } = (context.labelProps ?? {}) as Record<
         string,
@@ -159,14 +175,14 @@ export function Label(props: LabelProps): JSX.Element {
       const merged = {
         ...contextLabelProps,
         ...(context.inputId ? { for: context.inputId } : {}),
-        ...props,
+        ...localProps,
       } as Record<string, unknown>;
       if (merged.class == null) {
         merged.class = "solidaria-Label";
       }
       return merged;
     }
-    return props.class == null ? { ...props, class: "solidaria-Label" } : props;
+    return localProps.class == null ? { ...localProps, class: "solidaria-Label" } : localProps;
   };
 
   return <label {...mergedProps()}>{props.children}</label>;
@@ -481,7 +497,9 @@ export function TextField(props: TextFieldProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: local.children,
+      get children() {
+        return local.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-TextField",
@@ -586,6 +604,26 @@ export function TextField(props: TextFieldProps): 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' TextField), so a `<Text slot="description">` /
+  // `<Text slot="errorMessage">` child picks up the `id` its `aria-describedby`
+  // references. Additive: existing consumers reading these off `TextFieldContext`
+  // are unaffected.
+  const textSlots = {
+    slots: {
+      get description() {
+        return textFieldAria.descriptionProps as JSX.HTMLAttributes<HTMLElement>;
+      },
+      get errorMessage() {
+        return textFieldAria.errorMessageProps as JSX.HTMLAttributes<HTMLElement>;
+      },
+    },
+  };
+  const FieldChildrenSlotted = () => (
+    <Provider values={[[TextContext, textSlots]] as Array<[Context<unknown>, unknown]>}>
+      <FieldChildren />
+    </Provider>
+  );
   const rootProps = () =>
     ({
       ...domProps(),
@@ -604,7 +642,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
   const customRootProps = () =>
     ({
       ...rootProps(),
-      children: <FieldChildren />,
+      children: <FieldChildrenSlotted />,
     }) as JSX.HTMLAttributes<HTMLDivElement>;
 
   return (
@@ -614,7 +652,7 @@ export function TextField(props: TextFieldProps): JSX.Element {
           local.render(customRootProps(), renderValues())
         ) : (
           <div {...rootProps()}>
-            <FieldChildren />
+            <FieldChildrenSlotted />
           </div>
         )}
       </TextFieldContext.Provider>

package/src/TimeField.tsx

@@ -7,6 +7,7 @@
 
 import {
   type JSX,
+  type Context,
   createContext,
   createMemo,
   createSignal,
@@ -36,7 +37,9 @@ import {
   useRenderProps,
   dataAttr,
   useIsHydrated,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 import { HiddenTimeInput } from "./HiddenTimeInput";
 import { FormContext, type FormProps } from "./Form";
 
@@ -281,6 +284,17 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
     formContext?.validationBehavior ??
     "native";
 
+  const textSlots = {
+    slots: {
+      get description() {
+        return fieldAria.descriptionProps;
+      },
+      get errorMessage() {
+        return fieldAria.errorMessageProps;
+      },
+    },
+  };
+
   return (
     <TimeFieldStateContext.Provider value={state as unknown as TimeFieldState<TimeValue>}>
       <TimeFieldContext.Provider
@@ -304,7 +318,9 @@ function TimeFieldInner<T extends TimeValue = TimeValue>(
           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}>
           <HiddenTimeInput
@@ -388,7 +404,9 @@ export function TimeSegment(props: TimeSegmentProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-TimeSegment",

package/src/Toast.tsx

@@ -131,6 +131,7 @@ export const ToastContext = createContext<ToastState<ToastContent> | null>(null)
 interface ToastAriaContextValue {
   titleProps: JSX.HTMLAttributes<HTMLElement>;
   descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  contentProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
 const ToastAriaContext = createContext<ToastAriaContextValue | null>(null);
@@ -265,8 +266,6 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
     },
     renderValues,
   );
-  const renderedChildren = createMemo(() => renderProps.renderChildren());
-
   const domProps = createMemo(() =>
     filterDOMProps(rest as Record<string, unknown>, { global: true }),
   );
@@ -317,14 +316,19 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
 
   const visibleToasts = () => state()?.visibleToasts() ?? [];
   const hasToasts = () => visibleToasts().length > 0;
+  const hasAuthoredRegionStyle = () => local.class != null || local.style != null;
 
   const regionContent = () => {
     if (!state()) return null;
 
-    // Merge styles - placement styles are base, renderProps.style() overrides
     const mergedStyle = () => {
-      const placement = placementStyles();
       const custom = renderProps.style();
+      // React Aria Components leaves ToastRegion unstyled. Keep this package's
+      // fallback placement only for bare regions so styled layers such as S2 can
+      // own fixed viewport geometry with their generated classes.
+      if (hasAuthoredRegionStyle()) return custom;
+
+      const placement = placementStyles();
       if (!custom) return placement;
       return { ...placement, ...custom } as JSX.CSSProperties;
     };
@@ -340,7 +344,7 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
         style={mergedStyle()}
         data-placement={normalizedPlacement()}
       >
-        {renderedChildren()}
+        {renderProps.renderChildren()}
       </div>
     );
   };
@@ -403,7 +407,9 @@ export function Toast(props: ToastProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Toast",
@@ -478,8 +484,10 @@ export function Toast(props: ToastProps): JSX.Element {
 
   const { ref: _ref, ...cleanToastProps } = toastAria.toastProps as Record<string, unknown>;
 
-  // Ensure ARIA title/description IDs are present on rendered sub-components,
-  // even when children are pre-composed outside the Toast provider owner.
+  // Ensure ARIA title/description IDs and the content live-region attributes are
+  // present on rendered sub-components, even when children are pre-composed outside
+  // the Toast provider owner (as DefaultToast does), where useContext can't reach
+  // this owner's ToastAriaContext.
   createEffect(() => {
     if (!toastRef) return;
 
@@ -487,6 +495,7 @@ export function Toast(props: ToastProps): JSX.Element {
     const descriptionId = (toastAria.descriptionProps as Record<string, unknown>).id as
       | string
       | undefined;
+    const contentProps = toastAria.contentProps as Record<string, unknown>;
 
     if (titleId) {
       const titleEl = toastRef.querySelector("[data-solidaria-toast-title]");
@@ -501,11 +510,27 @@ export function Toast(props: ToastProps): JSX.Element {
         descriptionEl.id = descriptionId;
       }
     }
+
+    // Wire the content area as a live region (role="alert" / aria-live="assertive")
+    // so the toast message is announced to screen readers when it appears.
+    const contentEl = toastRef.querySelector("[data-solidaria-toast-content]");
+    if (contentEl instanceof HTMLElement) {
+      const role = contentProps.role as string | undefined;
+      const ariaLive = contentProps["aria-live"] as string | undefined;
+      const ariaAtomic = contentProps["aria-atomic"] as string | undefined;
+      if (role) contentEl.setAttribute("role", role);
+      if (ariaLive) contentEl.setAttribute("aria-live", ariaLive);
+      if (ariaAtomic) contentEl.setAttribute("aria-atomic", ariaAtomic);
+    }
   });
 
   return (
     <ToastAriaContext.Provider
-      value={{ titleProps: toastAria.titleProps, descriptionProps: toastAria.descriptionProps }}
+      value={{
+        titleProps: toastAria.titleProps,
+        descriptionProps: toastAria.descriptionProps,
+        contentProps: toastAria.contentProps,
+      }}
     >
       <div
         ref={toastRef}
@@ -537,10 +562,14 @@ export function ToastTitle(props: ToastTitleProps): JSX.Element {
   const context = useContext(ToastAriaContext);
   const { ref: _ref, ...ariaTitleProps } = (context?.titleProps ?? {}) as Record<string, unknown>;
 
+  // Upstream S2 Toast renders the title via `<Text slot="title">`, and RAC `Text`
+  // defaults to `elementType="span"` — so the title's text-node container is a
+  // `<span>`, not a `<div>`. Mirror that (the D7 contrast descriptor keys on the
+  // container tag name; a `<div>` here diverged on every variant × theme). (parity rule #1/#2)
   return (
-    <div data-solidaria-toast-title="" {...ariaTitleProps} class={props.class} style={props.style}>
+    <span data-solidaria-toast-title="" {...ariaTitleProps} class={props.class} style={props.style}>
       {props.children}
-    </div>
+    </span>
   );
 }
 
@@ -560,14 +589,50 @@ export function ToastDescription(props: ToastDescriptionProps): JSX.Element {
     unknown
   >;
 
+  // Match the title: upstream toast text is rendered in `<span>` elements (RAC
+  // `Text`). The port additionally supports a description (upstream S2 has only a
+  // title); keep it as a `<span>` sibling so its text-node container tag is faithful.
   return (
-    <div
+    <span
       data-solidaria-toast-description=""
       {...ariaDescriptionProps}
       class={props.class}
       style={props.style}
     >
       {props.children}
+    </span>
+  );
+}
+
+export interface ToastContentProps {
+  children: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+}
+
+/**
+ * ToastContent wraps the toast message (title + description) in the live region
+ * announced to screen readers. It carries `role="alert"` / `aria-live="assertive"`
+ * from createToast's contentProps so the toast text is announced when it appears.
+ *
+ * It is rendered as a sibling of the close button (never wrapping it) so screen
+ * readers announce the message without reading the close button first.
+ */
+export function ToastContent(props: ToastContentProps): JSX.Element {
+  const context = useContext(ToastAriaContext);
+  const { ref: _ref, ...ariaContentProps } = (context?.contentProps ?? {}) as Record<
+    string,
+    unknown
+  >;
+
+  return (
+    <div
+      data-solidaria-toast-content=""
+      {...ariaContentProps}
+      class={props.class}
+      style={props.style}
+    >
+      {props.children}
     </div>
   );
 }
@@ -633,7 +698,7 @@ export function DefaultToast(props: DefaultToastProps): JSX.Element {
   return (
     <Toast toast={props.toast}>
       <div style={{ display: "flex", "align-items": "flex-start", gap: "12px" }}>
-        <div style={{ flex: 1 }}>
+        <ToastContent style={{ flex: 1 }}>
           <Show when={title()}>
             <ToastTitle style={{ "font-weight": "bold", "margin-bottom": "4px" }}>
               {title()}
@@ -647,7 +712,7 @@ export function DefaultToast(props: DefaultToastProps): JSX.Element {
               {actionLabel()}
             </button>
           </Show>
-        </div>
+        </ToastContent>
         <ToastCloseButton toast={props.toast} />
       </div>
     </Toast>

package/src/ToggleButton.tsx

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

package/src/ToggleButtonGroup.tsx

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

package/src/Tooltip.tsx

@@ -574,7 +574,9 @@ function TooltipContent(
     {
       class: props.class,
       style: props.style,
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       defaultClassName: "solidaria-Tooltip",
     },
     values,