@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/src/Meter.tsx

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

package/src/Modal.tsx

@@ -22,6 +22,8 @@ import {
   ariaHideOutside,
   FocusScope,
   useUNSAFE_PortalContext,
+  createEnterAnimation,
+  createExitAnimation,
 } from "@proyecto-viviana/solidaria";
 import {
   type RenderChildren,
@@ -37,6 +39,7 @@ import {
   OverlayTriggerStateContext,
   type OverlayTriggerState,
 } from "./contexts";
+import { VisuallyHidden } from "./VisuallyHidden";
 
 /**
  * Internal context to signal that Modal is wrapped in ModalOverlay.
@@ -45,6 +48,13 @@ import {
 interface InternalModalContextValue {
   isDismissable?: boolean;
   isKeyboardDismissDisabled?: boolean;
+  // Upstream's ModalOverlay owns the modal element's ref so it can watch the
+  // modal surface's exit animation alongside the overlay's (both must finish
+  // before the overlay unmounts). ModalContent registers its element here.
+  setModalRef?: (element: HTMLElement | null) => void;
+  // Combined exit flag (overlay OR modal still exiting). Both the overlay and
+  // the modal surface carry `data-exiting` off this so they fade out together.
+  isExiting?: () => boolean;
 }
 
 const InternalModalContext = createContext<InternalModalContextValue | null>(null);
@@ -177,9 +187,34 @@ export function ModalOverlay(props: ModalOverlayProps): JSX.Element {
     toggle,
   };
 
+  // Enter/exit animation state (mirrors upstream's ModalOverlayWithForwardRef +
+  // ModalOverlayInner). The overlay stays mounted here even while closed, so the
+  // enter animation is gated on `isOpen` (isReady) — otherwise it would resolve
+  // to "done entering" before the element ever mounts. Exit is watched for BOTH
+  // the overlay and the modal surface; the modal registers its element via
+  // InternalModalContext (setModalRef) so we can await its exit too.
+  let overlayRef!: HTMLDivElement;
+  // Signal-backed so the enter/exit effects re-run once the element mounts — a
+  // plain closure over `overlayRef` would read `null` if the effect fired first
+  // and, with no reactive dep on the ref, never recover (stuck `data-entering`).
+  const [overlayEl, setOverlayEl] = createSignal<HTMLElement | null>(null);
+  const overlayRefAccessor = () => overlayEl();
+  const registerOverlayRef = (element: HTMLDivElement) => {
+    overlayRef = element;
+    setOverlayEl(element);
+  };
+  const [modalEl, setModalEl] = createSignal<HTMLElement | null>(null);
+
+  const isOverlayEntering = createEnterAnimation(overlayRefAccessor, isOpen);
+  const isOverlayExiting = createExitAnimation(overlayRefAccessor, isOpen);
+  const isModalExiting = createExitAnimation(() => modalEl(), isOpen);
+  const overlayEntering = () => isOverlayEntering() || (local.isEntering ?? false);
+  const combinedExiting = () =>
+    isOverlayExiting() || isModalExiting() || (local.isExiting ?? false);
+
   const renderValues = createMemo<ModalRenderProps>(() => ({
-    isEntering: local.isEntering ?? false,
-    isExiting: local.isExiting ?? false,
+    isEntering: overlayEntering(),
+    isExiting: combinedExiting(),
   }));
 
   // Resolve render props - don't pass children, we'll render props.children directly
@@ -200,10 +235,11 @@ export function ModalOverlay(props: ModalOverlayProps): JSX.Element {
   const internalModalContext: InternalModalContextValue = {
     isDismissable: local.isDismissable,
     isKeyboardDismissDisabled: local.isKeyboardDismissDisabled,
+    setModalRef: setModalEl,
+    isExiting: combinedExiting,
   };
   const portalContext = useUNSAFE_PortalContext();
   const portalContainer = () => portalContext.getContainer?.() ?? undefined;
-  let overlayRef!: HTMLDivElement;
 
   const isTopMostModalInOverlay = () => {
     pruneDisconnectedModals();
@@ -228,9 +264,14 @@ export function ModalOverlay(props: ModalOverlayProps): JSX.Element {
       }
     };
 
-    document.addEventListener("keydown", handleKeyDown, true);
+    // Bubble phase, mirroring react-aria's `useOverlay` (its `onKeyDown` is an
+    // overlay-element prop, handled on bubble). Capture would preempt inner
+    // widgets that dismiss on Escape (a combobox/menu inside the dialog must
+    // consume Escape first) and would also fire before the event is recorded by
+    // capture-phase listeners, inverting the keydown/onOpenChange order.
+    document.addEventListener("keydown", handleKeyDown, false);
     onCleanup(() => {
-      document.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("keydown", handleKeyDown, false);
     });
   });
 
@@ -246,17 +287,17 @@ export function ModalOverlay(props: ModalOverlayProps): JSX.Element {
   };
 
   return (
-    <Show when={isHydrated() && (isOpen() || local.isExiting)}>
+    <Show when={isHydrated() && (isOpen() || combinedExiting())}>
       <Portal mount={portalContainer()}>
         <OverlayTriggerStateContext.Provider value={state}>
           <InternalModalContext.Provider value={internalModalContext}>
             <div
               {...domProps()}
-              ref={overlayRef}
+              ref={registerOverlayRef}
               class={renderProps.class()}
               style={renderProps.style()}
-              data-entering={dataAttr(local.isEntering)}
-              data-exiting={dataAttr(local.isExiting)}
+              data-entering={dataAttr(overlayEntering())}
+              data-exiting={dataAttr(combinedExiting())}
               onPointerDown={handleOverlayPointerDown}
             >
               {resolveChildren()}
@@ -305,26 +346,17 @@ function ModalContentWithAutoOverlay(props: ModalProps): JSX.Element {
   // Check for InternalModalContext - if present, we're inside a ModalOverlay
   const internalContext = useContext(InternalModalContext);
 
-  // If wrapped in ModalOverlay, just render the content
+  // If wrapped in ModalOverlay, just render the content. ModalContent reads the
+  // overlay's InternalModalContext itself (via useContext), so nothing needs
+  // threading — in both branches ModalContent renders inside a provider.
   if (internalContext) {
-    return (
-      <ModalContent {...modalProps} internalContext={internalContext}>
-        {props.children}
-      </ModalContent>
-    );
+    return <ModalContent {...modalProps}>{props.children}</ModalContent>;
   }
 
-  // For standalone usage, wrap in ModalOverlay
-  const standaloneContext: InternalModalContextValue = {
-    isDismissable: overlayProps.isDismissable,
-    isKeyboardDismissDisabled: overlayProps.isKeyboardDismissDisabled,
-  };
-
+  // For standalone usage, wrap in ModalOverlay.
   return (
     <ModalOverlay {...overlayProps}>
-      <ModalContent {...modalProps} internalContext={standaloneContext}>
-        {props.children}
-      </ModalContent>
+      <ModalContent {...modalProps}>{props.children}</ModalContent>
     </ModalOverlay>
   );
 }
@@ -333,9 +365,7 @@ function ModalContentWithAutoOverlay(props: ModalProps): JSX.Element {
  * Internal component that renders the actual modal content.
  * Used by both standalone Modal and Modal wrapped in ModalOverlay.
  */
-function ModalContent(
-  props: ModalProps & { internalContext: InternalModalContextValue },
-): JSX.Element {
+function ModalContent(props: ModalProps): JSX.Element {
   if (isServer) {
     return <>{props.children}</>;
   }
@@ -351,19 +381,27 @@ function ModalContent(
     "isKeyboardDismissDisabled",
     "isEntering",
     "isExiting",
-    "internalContext",
   ]);
 
   let modalRef!: HTMLDivElement;
   const modalRefAccessor = () => modalRef ?? null;
+  // Signal-backed element for the enter animation, so the effect re-runs when
+  // the surface mounts (see the overlay's note); the plain `modalRef` var still
+  // backs the synchronous consumers (focus stack, interact-outside, aria-hide).
+  const [modalEl, setModalEl] = createSignal<HTMLElement | null>(null);
 
   // Get state from parent OverlayTriggerStateContext (provided by ModalOverlay)
   const parentState = useContext(OverlayTriggerStateContext);
 
+  // The overlay (auto or user-provided) always wraps this content, so it owns
+  // the InternalModalContext: dismissal settings, the modal-ref registration
+  // sink, and the combined exit flag.
+  const internalContext = useContext(InternalModalContext);
+
   // Get dismissable settings from internal context (set by ModalOverlay)
-  const isDismissable = () => local.internalContext?.isDismissable ?? local.isDismissable;
+  const isDismissable = () => internalContext?.isDismissable ?? local.isDismissable;
   const isKeyboardDismissDisabled = () =>
-    local.internalContext?.isKeyboardDismissDisabled ?? local.isKeyboardDismissDisabled;
+    internalContext?.isKeyboardDismissDisabled ?? local.isKeyboardDismissDisabled;
 
   // Determine if open from parent state
   const isOpen = (): boolean => {
@@ -371,6 +409,19 @@ function ModalContent(
     return parentState?.isOpen ?? false;
   };
 
+  // Register this element with the overlay so it can await the modal surface's
+  // exit animation (upstream threads modalRef down the same way). The overlay's
+  // combined exit flag drives this surface's `data-exiting`. The enter animation
+  // is local — the modal fades/slides in on its own timeline (delay 160 vs the
+  // overlay's 0).
+  const registerModalRef = (element: HTMLDivElement) => {
+    modalRef = element;
+    setModalEl(element);
+    internalContext?.setModalRef?.(element);
+  };
+  const isModalEntering = createEnterAnimation(() => modalEl(), isOpen);
+  const isModalExiting = () => internalContext?.isExiting?.() ?? local.isExiting ?? false;
+
   // Keep this modal in a global stack so nested modals dismiss in top-down order.
   createEffect(() => {
     if (!isOpen()) return;
@@ -441,9 +492,11 @@ function ModalContent(
       }
     };
 
-    document.addEventListener("keydown", handleKeyDown, true);
+    // Bubble phase — see the ModalOverlay handler above for why (react-aria
+    // `useOverlay` parity; inner-widget Escape precedence; event-order fidelity).
+    document.addEventListener("keydown", handleKeyDown, false);
     onCleanup(() => {
-      document.removeEventListener("keydown", handleKeyDown, true);
+      document.removeEventListener("keydown", handleKeyDown, false);
     });
   });
 
@@ -457,7 +510,7 @@ function ModalContent(
 
     const hideOutside = () => {
       if (cancelled || !modalRef?.isConnected) return;
-      cleanup = ariaHideOutside([modalRef]);
+      cleanup = ariaHideOutside([modalRef], { shouldUseInert: true });
     };
 
     if (modalRef.isConnected) {
@@ -473,8 +526,8 @@ function ModalContent(
   });
 
   const renderValues = createMemo<ModalRenderProps>(() => ({
-    isEntering: local.isEntering ?? false,
-    isExiting: local.isExiting ?? false,
+    isEntering: isModalEntering(),
+    isExiting: isModalExiting(),
   }));
 
   const renderProps = useRenderProps(
@@ -499,33 +552,44 @@ function ModalContent(
   );
 
   return (
-    <FocusScope contain restoreFocus autoFocus>
+    // No autoFocus: react-aria's Overlay renders FocusScope with restoreFocus +
+    // contain only — initial focus is useDialog's job (it focuses the dialog
+    // element itself when nothing inside holds focus).
+    //
+    // `contain` is gated on `!isExiting`, mirroring react-aria's Overlay
+    // (react-aria/src/overlays/Overlay.tsx: `contain={... && !isExiting}`). The
+    // overlay stays mounted through its exit transition (isOpen || isExiting), so
+    // without this gate containment would remain active during the exit and yank
+    // focus back into the dialog as restoreFocus moves it to the trigger —
+    // producing a focus bounce (focusout→focusin→focusout) that React never
+    // shows. Releasing containment the instant the exit begins lets focus settle
+    // on the trigger in a single move, matching upstream's event sequence.
+    <FocusScope contain={!isModalExiting()} restoreFocus>
       <div
         {...domProps()}
-        ref={modalRef}
+        ref={registerModalRef}
         class={renderProps.class()}
         style={renderProps.style()}
-        data-entering={dataAttr(local.isEntering)}
-        data-exiting={dataAttr(local.isExiting)}
+        data-entering={dataAttr(isModalEntering())}
+        data-exiting={dataAttr(isModalExiting())}
       >
         <Show when={isDismissable()}>
-          <button
-            type="button"
-            aria-label="Dismiss"
-            tabIndex={-1}
-            onClick={close}
-            style={{
-              position: "absolute",
-              width: "1px",
-              height: "1px",
-              padding: 0,
-              margin: "-1px",
-              overflow: "hidden",
-              clip: "rect(0, 0, 0, 0)",
-              "white-space": "nowrap",
-              border: 0,
-            }}
-          />
+          {/* Faithful to react-aria's DismissButton: a bare button carrying
+              only `width/height: 1px` inside a VisuallyHidden `div` wrapper —
+              NOT the hidden styles inlined onto the button. The wrapper clips
+              it out of sight while the button keeps its intrinsic UA border-box,
+              which is exactly what upstream renders (and what D8 target-size
+              measures against the pair oracle). Inlining the reset onto the
+              button instead collapsed it to a 1x1 box, diverging from
+              upstream's ~16x6 sentinel. */}
+          <VisuallyHidden elementType="div">
+            <button
+              aria-label="Dismiss"
+              tabIndex={-1}
+              onClick={close}
+              style={{ width: "1px", height: "1px" }}
+            />
+          </VisuallyHidden>
         </Show>
         {renderProps.renderChildren()}
       </div>

package/src/NumberField.tsx

@@ -5,7 +5,14 @@
  * Port of react-aria-components/src/NumberField.tsx
  */
 
-import { type JSX, createContext, createMemo, splitProps, useContext } from "solid-js";
+import {
+  type JSX,
+  type Context,
+  createContext,
+  createMemo,
+  splitProps,
+  useContext,
+} from "solid-js";
 import {
   createNumberField,
   createButton,
@@ -22,7 +29,9 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  Provider,
 } from "./utils";
+import { TextContext } from "./Text";
 
 export interface NumberFieldRenderProps {
   /** Whether the number field is disabled. */
@@ -294,7 +303,9 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-NumberField",
@@ -366,6 +377,21 @@ export function NumberField(props: NumberFieldProps): JSX.Element {
     },
     setInputRef,
   };
+  // Provide the description / errorMessage props as `TextContext` slots (mirrors
+  // react-aria-components' NumberField), so a `<Text slot="description">` /
+  // `<Text slot="errorMessage">` child picks up the `id` its `aria-describedby`
+  // references. Additive: existing consumers reading these off
+  // `NumberFieldContext` are unaffected.
+  const textSlots = {
+    slots: {
+      get description() {
+        return numberFieldAria.descriptionProps;
+      },
+      get errorMessage() {
+        return numberFieldAria.errorMessageProps;
+      },
+    },
+  };
 
   return (
     <NumberFieldStateContext.Provider value={state}>
@@ -379,7 +405,9 @@ export function NumberField(props: NumberFieldProps): 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>
       </NumberFieldContext.Provider>
     </NumberFieldStateContext.Provider>
@@ -399,14 +427,25 @@ export function NumberFieldLabel(props: {
     throw new Error("NumberFieldLabel must be used within a NumberField");
   }
 
+  // Upstream RAC/S2 renders the NumberField label as a native `<label>` (the field's
+  // `labelElementType` is the default `'label'`), so `labelProps` carries `for=inputId`.
+  // This was a `<span>` — a self-inflicted divergence dropping the native for/label
+  // semantics; reverted to `<label>` to match the shipped React DOM byte-for-byte.
+  // (Mirror SearchFieldLabel: `labelProps` is typed for a generic element, so strip the
+  // `ref` and spread the rest onto the `<label>` intrinsic.)
+  const cleanLabelProps = () => {
+    const { ref: _ref, ...rest } = context.labelProps as Record<string, unknown>;
+    return rest;
+  };
+
   return (
-    <span
-      {...context.labelProps}
+    <label
+      {...cleanLabelProps()}
       class={props.class ?? "solidaria-NumberField-label"}
       style={props.style}
     >
       {props.children}
-    </span>
+    </label>
   );
 }
 
@@ -558,7 +597,9 @@ export function NumberFieldIncrementButton(props: NumberFieldIncrementButtonProp
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-NumberField-increment",
@@ -637,7 +678,9 @@ export function NumberFieldDecrementButton(props: NumberFieldDecrementButtonProp
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-NumberField-decrement",

package/src/Popover.tsx

@@ -22,8 +22,10 @@ import {
   createOverlayTrigger,
   createPopover,
   FocusScope,
+  useLocale,
   useUNSAFE_PortalContext,
   visuallyHiddenStyles,
+  type AriaLabelingProps,
   type Placement,
   type PlacementAxis,
 } from "@proyecto-viviana/solidaria";
@@ -59,7 +61,7 @@ export interface PopoverRenderProps {
   isExiting: boolean;
 }
 
-export interface PopoverProps extends SlotProps {
+export interface PopoverProps extends SlotProps, AriaLabelingProps {
   /** The children of the component - can be JSX or render function. */
   children?: RenderChildren<PopoverRenderProps>;
   /** The CSS className for the element. */
@@ -111,6 +113,14 @@ export interface PopoverProps extends SlotProps {
    * A boundary element for placement calculations.
    */
   boundaryElement?: Element;
+  /**
+   * Overrides the target element's bounding rectangle. Useful for positioning relative to
+   * a specific point such as the mouse cursor (e.g. context menus) or text selection.
+   *
+   * @default target.getBoundingClientRect()
+   * @param target - The target element.
+   */
+  getTargetRect?: (target: Element) => DOMRect | null | undefined;
   /**
    * A ref for the popover arrow element.
    */
@@ -257,6 +267,7 @@ export function Popover(props: PopoverProps): JSX.Element {
     "shouldFlip",
     "maxHeight",
     "boundaryElement",
+    "getTargetRect",
     "arrowRef",
     "scrollRef",
     "isNonModal",
@@ -270,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);
@@ -323,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;
@@ -346,6 +374,9 @@ export function Popover(props: PopoverProps): JSX.Element {
       get boundaryElement() {
         return local.boundaryElement;
       },
+      get getTargetRect() {
+        return local.getTargetRect;
+      },
       get arrowRef() {
         return local.arrowRef;
       },
@@ -501,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;
@@ -509,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 = () => {
@@ -559,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)}
@@ -627,10 +661,33 @@ export function OverlayArrow(props: OverlayArrowProps): JSX.Element {
   const popoverContext = useContext(PopoverContext);
   const placement = () => popoverContext?.placement() ?? null;
 
-  const mergedStyle = () => {
+  // Mirror react-aria-components' OverlayArrow: the wrapper positions itself
+  // absolutely against the popover edge (`[placement]: '100%'`) and takes the
+  // cross-axis offset (`left`/`top`) from the overlay's computed `arrowProps`.
+  // No `aria-hidden`/`role="presentation"` — upstream leaves the arrow in the
+  // accessibility tree (the arrow SVG surfaces as an unlabeled `img`), matching
+  // S2's `<OverlayArrow className="">`. The styled layer therefore passes no
+  // positioning class of its own.
+  const mergedStyle = (): JSX.CSSProperties => {
+    const currentPlacement = placement();
+    // Mirror react-aria-components' OverlayArrow: the reported `arrowProps`
+    // offset (`left`/`top`) points at the arrow's CENTER, so the wrapper must be
+    // pulled back by half its size to center on that point — horizontally for
+    // top/bottom placements, vertically for left/right. Omitting this shifts the
+    // arrow off by half its width/height (a self-inflicted divergence).
+    const style: JSX.CSSProperties = {
+      position: "absolute",
+      transform:
+        currentPlacement === "top" || currentPlacement === "bottom"
+          ? "translateX(-50%)"
+          : "translateY(-50%)",
+    };
+    if (currentPlacement != null) {
+      (style as Record<string, string>)[currentPlacement] = "100%";
+    }
+
     const contextStyle = (popoverContext?.arrowProps() as Record<string, unknown> | undefined)
       ?.style as (JSX.CSSProperties & Record<string, unknown>) | undefined;
-    const style: JSX.CSSProperties = {};
     if (typeof contextStyle?.left === "string") {
       style.left = contextStyle.left;
     }
@@ -651,13 +708,7 @@ export function OverlayArrow(props: OverlayArrowProps): JSX.Element {
   };
 
   return (
-    <div
-      class={props.class}
-      style={mergedStyle()}
-      data-placement={placement()}
-      aria-hidden="true"
-      role="presentation"
-    >
+    <div class={props.class} style={mergedStyle()} data-placement={placement()}>
       {props.render ? props.render() : props.children}
     </div>
   );

package/src/ProgressBar.tsx

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