@multiplatform.one/components 7.4.1 → 7.5.0

package/src/Toast/Toast.spec.tsx

@@ -1,8 +1,17 @@
-import { fireEvent, screen, act } from "@testing-library/react";
+import { fireEvent, screen, act, cleanup } from "@testing-library/react";
+import type { ReactElement } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Button } from "tamagui";
-import { __resetDevWarnSeen } from "@multiplatform.one/theme";
+import { Button, SizableText, Theme, useTheme, YStack } from "tamagui";
+import {
+  __resetDevWarnSeen,
+  aaTextContrastRatio,
+  contrastRatio,
+  normalizeToHex,
+  Preset,
+  relativeLuminance,
+  useAccentOnSurface,
+} from "@multiplatform.one/theme";
 import { Toast, ToastViewport, useToast } from "./index";
 import {
   __resetToastViewportRegistry,
@@ -84,7 +93,7 @@ describe("Toast (standalone)", () => {
     expect(close).toHaveStyle({ minWidth: "44px" });
   });
 
-  it("compact steps nested scale down; size is a separate axis from density", () => {
+  it("compact flips density; size stays an independent axis (LC-76)", () => {
     const { rerender } = renderWithProviders(
       <Toast title="Saved" compact={false} onDismiss={() => {}} />,
     );
@@ -95,8 +104,9 @@ describe("Toast (standalone)", () => {
     rerender(<Toast title="Saved" compact onDismiss={() => {}} />);
     const compactToast = screen.getByTestId("toast");
     expect(compactToast.getAttribute("data-density")).toBe("compact");
-    expect(compactToast.getAttribute("data-size")).toBe("small");
-    expect(Number(compactToast.getAttribute("data-nested-px"))).toBeLessThan(comfortablePx);
+    expect(compactToast.getAttribute("data-size")).toBe("medium");
+    // nested-px follows size, not density — same size → same nested box
+    expect(Number(compactToast.getAttribute("data-nested-px"))).toBe(comfortablePx);
   });
 });
 
@@ -421,3 +431,238 @@ describe("Toast banned-error-word DEV warn", () => {
     expect(warnSpy).not.toHaveBeenCalledWith(expect.stringContaining("banned-error-word"));
   });
 });
+
+function classesByPrefix(el: Element, prefixes: string[]): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+function shadowClasses(el: Element): string[] {
+  return classesByPrefix(el, ["_bxsh-"]);
+}
+
+const ACTION = "Undo";
+
+function renderActionWeight(node: ReactElement): string[] {
+  renderWithProviders(node);
+  const textNode = screen.getByText(ACTION);
+  const classes = classesByPrefix(textNode, ["_fow-"]);
+  cleanup();
+  return classes;
+}
+
+function tokenVal(theme: ReturnType<typeof useTheme>, key: string): string {
+  const t = theme as unknown as Record<string, { val?: unknown; get?: () => unknown }>;
+  const raw = t[key]?.val ?? t[key]?.get?.();
+  return typeof raw === "string" ? raw : "";
+}
+
+function ContrastProbe({ intent }: { intent: "accent" | "success" | "warning" | "error" }) {
+  const onSurface = useAccentOnSurface();
+  const theme = useTheme();
+  const paper = tokenVal(theme, "background") || tokenVal(theme, "color1");
+  const color11 = tokenVal(theme, "color11");
+  const fg =
+    intent === "accent"
+      ? onSurface.startsWith("$")
+        ? tokenVal(theme, onSurface.slice(1)) || onSurface
+        : onSurface
+      : color11;
+  return (
+    <>
+      <span data-testid="contrast-probe" data-fg={fg} data-bg={paper} />
+      <Toast
+        title="Archived"
+        intent={intent}
+        action={{ label: ACTION, onPress: () => {} }}
+        onDismiss={() => {}}
+      />
+    </>
+  );
+}
+
+function measuredRatio(fg: string, bg: string): number {
+  const f = normalizeToHex(fg);
+  const b = normalizeToHex(bg);
+  if (!f || !b) return Number.NaN;
+  return contrastRatio(relativeLuminance(f), relativeLuminance(b));
+}
+
+describe("Toast overlay shadow (standalone === viewport)", () => {
+  it("paints the SAME overlay shadow on both paths, not the $1 control token", () => {
+    renderWithProviders(
+      <YStack elevation={"$1" as never} data-testid="control-elev">
+        control
+      </YStack>,
+    );
+    const controlShadow = shadowClasses(screen.getByTestId("control-elev"));
+    cleanup();
+
+    renderWithProviders(
+      <YStack elevation={"$2" as never} data-testid="overlay-elev">
+        overlay
+      </YStack>,
+    );
+    const overlayShadow = shadowClasses(screen.getByTestId("overlay-elev"));
+    expect(overlayShadow).not.toHaveLength(0);
+    expect(overlayShadow).not.toEqual(controlShadow);
+    cleanup();
+
+    renderWithProviders(<Toast title="Saved" onDismiss={() => {}} />);
+    const standaloneShadow = shadowClasses(screen.getByTestId("toast"));
+    expect(standaloneShadow).toEqual(overlayShadow);
+    cleanup();
+
+    renderWithProviders(<ToastViewport />);
+    act(() => {
+      showToast({ title: "Viewport saved", sticky: true });
+    });
+    const viewportShadow = shadowClasses(screen.getByTestId("toast"));
+    expect(viewportShadow).toEqual(overlayShadow);
+    expect(viewportShadow).toEqual(standaloneShadow);
+  });
+
+  it("elevation none is flat on both paths; large is a different overlay token", () => {
+    renderWithProviders(
+      <Preset overrides={{ elevation: "none" }}>
+        <Toast title="Flat" onDismiss={() => {}} />
+      </Preset>,
+    );
+    expect(shadowClasses(screen.getByTestId("toast"))).toEqual([]);
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ elevation: "large" }}>
+        <Toast title="High" onDismiss={() => {}} />
+      </Preset>,
+    );
+    const large = shadowClasses(screen.getByTestId("toast"));
+    expect(large).not.toHaveLength(0);
+    cleanup();
+
+    renderWithProviders(<Toast title="Default" onDismiss={() => {}} />);
+    expect(shadowClasses(screen.getByTestId("toast"))).not.toEqual(large);
+  });
+});
+
+describe("Toast 3px logical intent edge", () => {
+  it("survives Tamagui style clobber in the style attribute and mirrors under RTL", () => {
+    renderWithProviders(<Toast title="Saved" intent="success" onDismiss={() => {}} />);
+    const toast = screen.getByTestId("toast") as HTMLElement;
+    expect(toast.style.borderInlineStartWidth).toBe("3px");
+    expect(toast.style.borderInlineStartStyle).toBe("solid");
+    expect(toast.style.borderInlineStartColor).toBeTruthy();
+    cleanup();
+
+    renderWithProviders(
+      <div dir="rtl">
+        <Toast title="Saved" intent="error" onDismiss={() => {}} />
+      </div>,
+    );
+    const rtl = screen.getByTestId("toast") as HTMLElement;
+    expect(rtl.style.borderInlineStartWidth).toBe("3px");
+    expect(rtl.closest("[dir='rtl']")).not.toBeNull();
+  });
+});
+
+describe("Toast data attributes reach the DOM", () => {
+  it("data-testid/data-size/data-density/data-nested-px land on standalone and viewport", () => {
+    renderWithProviders(<Toast title="Saved" onDismiss={() => {}} />);
+    const standalone = screen.getByTestId("toast");
+    expect(standalone.getAttribute("data-testid")).toBe("toast");
+    expect(standalone.getAttribute("data-size")).toBe("medium");
+    expect(standalone.getAttribute("data-density")).toBe("comfortable");
+    expect(Number(standalone.getAttribute("data-nested-px"))).toBeGreaterThan(0);
+    cleanup();
+
+    renderWithProviders(<ToastViewport />);
+    act(() => {
+      showToast({ title: "Viewport attrs", sticky: true });
+    });
+    const viewport = screen.getByTestId("toast");
+    expect(viewport.getAttribute("data-testid")).toBe("toast");
+    expect(viewport.getAttribute("data-size")).toBeTruthy();
+    expect(viewport.getAttribute("data-density")).toBeTruthy();
+    expect(viewport.getAttribute("data-nested-px")).toBeTruthy();
+  });
+
+  it("size and density knob strips measurably move (MPO-42)", () => {
+    renderWithProviders(
+      <Preset overrides={{ size: "large" }}>
+        <Toast title="Big" onDismiss={() => {}} />
+      </Preset>,
+    );
+    const large = screen.getByTestId("toast");
+    expect(large.getAttribute("data-size")).toBe("large");
+    const largePx = Number(large.getAttribute("data-nested-px"));
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ size: "small" }}>
+        <Toast title="Small" onDismiss={() => {}} />
+      </Preset>,
+    );
+    const small = screen.getByTestId("toast");
+    expect(small.getAttribute("data-size")).toBe("small");
+    expect(Number(small.getAttribute("data-nested-px"))).toBeLessThan(largePx);
+    cleanup();
+
+    renderWithProviders(
+      <Preset overrides={{ density: "compact" }}>
+        <Toast title="Tight" onDismiss={() => {}} />
+      </Preset>,
+    );
+    const compact = screen.getByTestId("toast");
+    expect(compact.getAttribute("data-density")).toBe("compact");
+    expect(compact.getAttribute("data-size")).toBe("medium");
+  });
+});
+
+describe("Toast action label weight and contrast (TEXT NODE)", () => {
+  it("Undo is weight 400 on the TEXT NODE, never 600 (R7 / §6.1)", () => {
+    const action = renderActionWeight(
+      <Toast title="Archived" action={{ label: ACTION, onPress: () => {} }} onDismiss={() => {}} />,
+    );
+    const explicit400 = renderActionWeight(<SizableText fontWeight="400">{ACTION}</SizableText>);
+    const explicit600 = renderActionWeight(<SizableText fontWeight="600">{ACTION}</SizableText>);
+    expect(action).not.toHaveLength(0);
+    expect(action).toEqual(explicit400);
+    expect(action).not.toEqual(explicit600);
+
+    renderWithProviders(
+      <Toast title="Archived" action={{ label: ACTION, onPress: () => {} }} onDismiss={() => {}} />,
+    );
+    const textNode = screen.getByText(ACTION);
+    expect(textNode).not.toBe(screen.getByTestId("toast"));
+    expect(screen.getByTestId("toast").contains(textNode)).toBe(true);
+  });
+
+  it.each(["accent", "success", "warning", "error"] as const)(
+    "%s action label clears 4.5:1 vs its pill in light and dark",
+    (intent) => {
+      for (const scheme of ["light", "dark"] as const) {
+        renderWithProviders(
+          <Theme name={scheme}>
+            <ContrastProbe intent={intent} />
+          </Theme>,
+        );
+        const probe = screen.getByTestId("contrast-probe");
+        const fg = probe.getAttribute("data-fg") ?? "";
+        const bg = probe.getAttribute("data-bg") ?? "";
+        const label = screen.getByText(ACTION);
+        const pill = label.parentElement as HTMLElement;
+        const labelColor = (label as HTMLElement).style.color;
+        const pillBg = (pill as HTMLElement).style.backgroundColor;
+        const fromProbe = measuredRatio(fg, bg);
+        const fromNodes = measuredRatio(labelColor || fg, pillBg || bg);
+        const ratio = Number.isFinite(fromNodes) ? fromNodes : fromProbe;
+        expect(ratio, `${scheme} ${intent} ${fg} on ${bg}`).toBeGreaterThanOrEqual(
+          aaTextContrastRatio,
+        );
+        cleanup();
+      }
+    },
+  );
+});

package/src/Toast/Toast.stories.tsx

@@ -4,7 +4,14 @@ import { useEffect, useRef, useState } from "react";
 import { Button } from "@multiplatform.one/forms";
 import { Text, XStack, YStack } from "tamagui";
 import { SheetModal } from "../SheetModal";
-import { Toast, ToastViewport, useToast, type ToastIntent, type ToastShowOptions } from "./index";
+import {
+  Toast,
+  ToastViewport,
+  showToast,
+  useToast,
+  type ToastIntent,
+  type ToastShowOptions,
+} from "./index";
 import { resetToasts } from "./store";
 
 const intents: ToastIntent[] = ["accent", "success", "warning", "error"];
@@ -247,6 +254,46 @@ export const StickyErrorOverSheet: Story = {
   },
 };
 
+/** Viewport board: toasts are mounted, not behind a click — shooter finds [data-testid=toast]. */
+export const ViewportPopulated: Story = {
+  render: () => {
+    useEffect(() => {
+      resetToasts();
+      showToast({
+        title: "Document saved",
+        description: "Your changes were written to the server.",
+        intent: "accent",
+        sticky: true,
+        action: { label: "Undo", onPress: () => action("undo")() },
+      });
+      showToast({
+        title: "Customer record updated",
+        intent: "success",
+        sticky: true,
+      });
+      showToast({
+        title: "Storage almost full",
+        description: "You are at 90% of your quota.",
+        intent: "warning",
+        sticky: true,
+      });
+      showToast({
+        title: "Save failed",
+        description: "The server rejected the request.",
+        intent: "error",
+        sticky: true,
+        action: { label: "Retry", onPress: () => action("retry")() },
+      });
+    }, []);
+    return (
+      <YStack minHeight={280}>
+        <StoryReset />
+        <ToastViewport />
+      </YStack>
+    );
+  },
+};
+
 /** Static presentational surfaces (no viewport machinery) for visual QA. */
 export const AllIntentsStatic: Story = {
   render: () => (
@@ -256,6 +303,7 @@ export const AllIntentsStatic: Story = {
         title="Heads up"
         description="A new version is available."
         intent="accent"
+        action={{ label: "Undo", onPress: () => action("undo")("accent") }}
         onDismiss={() => action("dismiss")("accent")}
       />
       <Toast

package/src/Toast/index.tsx

@@ -39,6 +39,7 @@ import {
   ensureCompositeFocusRing,
   pressTargetHitSlop,
   pressTargetStyle,
+  useAccentOnSurface,
   useResolvedKnobs,
   warnBannedErrorWords,
 } from "@multiplatform.one/theme";
@@ -49,10 +50,19 @@ import {
   ToastViewport as TamaguiToastViewport,
   type SwipeDirection,
 } from "@tamagui/toast";
-import { useEffect, useId, useMemo, useSyncExternalStore } from "react";
-import type { ReactNode } from "react";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
-import { SizableText, View, YStack, isWeb, styled, useTheme, type ViewProps } from "tamagui";
+import {
+  SizableText,
+  View,
+  XStack,
+  YStack,
+  isWeb,
+  styled,
+  useTheme,
+  type ViewProps,
+} from "tamagui";
 import {
   claimToastViewport,
   dismissAllToasts,
@@ -172,6 +182,54 @@ function toastActionPressProps(visualH: number) {
   };
 }
 
+// Overlay elevation is one step above the control token (DG-OVL-01 /
+// E-OVERLAY). elevatedSurface.elevation is a Tamagui VARIANT — dropped on a
+// bare View, and on main it is still the $1 CONTROL stop. Bind the overlay
+// token explicitly onto XStack / TamaguiToast (both have the elevation
+// variant) so standalone and viewport paint the SAME overlay shadow.
+// W1-knob-res exposes `overlayElevation` on knobProps; prefer that when
+// present so this local step-up retires itself.
+const OVERLAY_ELEVATION_WEB: Record<string, string> = { $1: "$2", $2: "$3", $4: "$5" };
+const OVERLAY_ELEVATION_NATIVE: Record<number, number> = { 20: 28, 28: 36, 44: 52 };
+
+function overlayElevationOf(knobProps: KnobProps): string | number | undefined {
+  const extra = knobProps as KnobProps & { overlayElevation?: string | number };
+  if ("overlayElevation" in extra) return extra.overlayElevation;
+  const control = knobProps.elevation;
+  if (control == null) return undefined;
+  if (typeof control === "string") return OVERLAY_ELEVATION_WEB[control] ?? control;
+  return OVERLAY_ELEVATION_NATIVE[control] ?? control;
+}
+
+/** 3px logical intent edge — must live in the style attribute after Tamagui writes. */
+const TOAST_INTENT_EDGE_PX = 3;
+const TOAST_FRAME_STYLE_ID = "mp-toast-intent-edge";
+const toastIntentEdgeCss =
+  ".mp-toast{border-inline-start-width:3px!important;border-inline-start-style:solid!important;}";
+
+function ensureToastIntentEdge() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(TOAST_FRAME_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = TOAST_FRAME_STYLE_ID;
+  tag.textContent = toastIntentEdgeCss;
+  document.head.appendChild(tag);
+}
+
+function paintToastFrame(
+  node: HTMLElement | null,
+  attrs: { size: string; density: string; nestedPx: number; edgeColor?: string },
+) {
+  if (!node) return;
+  node.setAttribute("data-testid", "toast");
+  node.setAttribute("data-size", attrs.size);
+  node.setAttribute("data-density", attrs.density);
+  node.setAttribute("data-nested-px", String(attrs.nestedPx));
+  node.style.borderInlineStartWidth = `${TOAST_INTENT_EDGE_PX}px`;
+  node.style.borderInlineStartStyle = "solid";
+  if (attrs.edgeColor) node.style.borderInlineStartColor = attrs.edgeColor;
+}
+
 // Grown transparent press target. Stays UNPAINTED — LC-71 ring lives on the
 // inner pill via `.mp-chip-dismiss:focus-visible .mp-chip-dismiss-ring`.
 const ToastActionTarget = styled(View, {
@@ -255,17 +313,22 @@ function IntentWrap({ intent, children }: { intent: ToastIntent; children: React
  */
 function useToastVisuals(intent: ToastIntent, compact?: boolean) {
   const { knobProps } = useResolvedKnobs({ intent, component: "Toast", compact });
-  if (typeof document !== "undefined") ensureCompositeFocusRing();
+  if (typeof document !== "undefined") {
+    ensureCompositeFocusRing();
+    ensureToastIntentEdge();
+  }
   const theme = useTheme();
+  const accentOnSurface = useAccentOnSurface();
   const isAccent = intent === "accent";
   // Semantic hues: step 11 — lowest AA-safe step of the hue on the step-1/2
   // surface (resolves to a CSS var on web, concrete value on native).
-  // Accent: the base theme's $color ramp is the neutral gray, so the brand
-  // accent comes from $accentColor/$accentBackground instead.
+  // Accent action ink: $accentColor is the on-fill foreground (~1.9:1 on the
+  // dark toast surface). useAccentOnSurface picks the most chromatic accent
+  // step that still clears AA 4.5:1 on color1/color2 (R7 / MPO-48).
   const iconColor = (isAccent ? theme.accentColor?.get() : theme.color11?.get()) as
     | string
     | undefined;
-  const accentTextColor = isAccent ? "$accentColor" : "$color11";
+  const accentTextColor = isAccent ? accentOnSurface : "$color11";
   const size = knobProps.size;
   const iconPx = iconPxForSize(size);
   const closePx = closePxForSize(size);
@@ -275,6 +338,22 @@ function useToastVisuals(intent: ToastIntent, compact?: boolean) {
     DESC_FONT_SIZE[labelFontSize as keyof typeof DESC_FONT_SIZE] ?? knobProps.label.fontSize;
   const closeVisual = closePx + CLOSE_RING_INSET * 2;
   const closeRadius = knobProps.pointy ? 0 : "$12";
+  const { elevation: _controlElevation, ...elevatedChrome } = knobProps.elevatedSurface;
+  const overlayElevation = overlayElevationOf(knobProps);
+  const edgeColor = (isAccent ? theme.accentBackground?.get() : theme.color9?.get()) as
+    | string
+    | undefined;
+  // Intent accent edge (solid hue) — decorative, so no AA floor. Logical
+  // start so the stripe mirrors in RTL. Tamagui writes resolved styles into
+  // the same style attribute and clobbers a style set on elevatedSurface
+  // (SB-M-1215); we apply this LAST on the host and re-paint after commit.
+  const intentEdgeStyle: CSSProperties | undefined = isWeb
+    ? {
+        borderInlineStartWidth: TOAST_INTENT_EDGE_PX,
+        borderInlineStartStyle: "solid",
+        borderInlineStartColor: edgeColor,
+      }
+    : undefined;
   return {
     knobProps,
     iconColor,
@@ -285,27 +364,25 @@ function useToastVisuals(intent: ToastIntent, compact?: boolean) {
     closeVisual,
     closeRadius,
     descFontSize,
+    overlayElevation,
+    edgeColor,
+    intentEdgeStyle,
+    dataAttrs: {
+      testID: "toast",
+      "data-testid": "toast",
+      "data-size": knobProps.size,
+      "data-density": knobProps.density,
+      "data-nested-px": String(nestedPx),
+    },
     frameProps: {
-      ...knobProps.elevatedSurface,
+      ...elevatedChrome,
       ...knobProps.panelPadding,
       ...knobProps.gap,
-      // Intent accent edge (solid hue) — decorative, so no AA floor.
-      // Logical start edge so the stripe mirrors in RTL. On web, inline style
-      // (CSS logical props) deterministically beats the physical
-      // border-left-width from elevatedSurface's borderWidth expansion;
-      // tamagui borderStartWidth does not compile to working CSS (SB-M-1215).
+      elevation: overlayElevation,
       ...(isWeb
-        ? {
-            style: {
-              borderInlineStartWidth: 3,
-              borderInlineStartStyle: "solid",
-              borderInlineStartColor: (isAccent
-                ? theme.accentBackground?.get()
-                : theme.color9?.get()) as string,
-            } as any,
-          }
+        ? {}
         : {
-            borderStartWidth: 3,
+            borderStartWidth: TOAST_INTENT_EDGE_PX,
             borderStartColor: isAccent ? "$accentBackground" : "$color9",
           }),
       width: 360,
@@ -370,8 +447,12 @@ interface ToastActionLabelProps {
 }
 
 function ToastActionLabel({ label, color, labelFontProps }: ToastActionLabelProps) {
+  // R7 / reference §6.1: action label is weight 400. Never 500, never 600.
+  // Measure the TEXT NODE — a wrapping frame's weight is not the label's.
+  const inkStyle =
+    isWeb && typeof color === "string" && !color.startsWith("$") ? { color } : undefined;
   return (
-    <SizableText {...labelFontProps} fontWeight="600" color={color as never}>
+    <SizableText {...labelFontProps} fontWeight="400" color={color as never} style={inkStyle}>
       {label}
     </SizableText>
   );
@@ -393,9 +474,9 @@ export interface ToastProps extends Omit<ViewProps, "children"> {
   /** Show the close button (default: true when onDismiss is provided) */
   dismissible?: boolean;
   /**
-   * Compact density override. `true` steps size+space down one level;
-   * `false` forces comfortable. Omit to follow the density knob (size and
-   * density stay independent axes).
+   * Compact density override. `true` forces compact (space/padding only);
+   * `false` forces comfortable. Omit to follow the density knob. Size and
+   * density stay independent axes (LC-76).
    */
   compact?: boolean;
 }
@@ -426,20 +507,36 @@ function ToastInner({
     closeRadius,
     descFontSize,
     frameProps,
+    dataAttrs,
+    intentEdgeStyle,
+    edgeColor,
   } = useToastVisuals(intent, compact);
   const showClose = dismissible ?? onDismiss != null;
+  const frameRef = useRef<HTMLElement | null>(null);
+  useLayoutEffect(() => {
+    paintToastFrame(frameRef.current, {
+      size: knobProps.size,
+      density: knobProps.density,
+      nestedPx,
+      edgeColor,
+    });
+  });
+  const consumerStyle =
+    props.style && typeof props.style === "object" && !Array.isArray(props.style)
+      ? (props.style as CSSProperties)
+      : undefined;
   return (
-    <View
+    <XStack
       role="status"
       aria-live="polite"
+      className="mp-toast"
       transition={knobProps.transition}
-      data-testid="toast"
-      data-size={knobProps.size}
-      data-density={knobProps.density}
-      data-nested-px={nestedPx}
       {...frameProps}
       alignItems={description ? "flex-start" : "center"}
       {...props}
+      {...dataAttrs}
+      ref={frameRef as never}
+      style={{ ...consumerStyle, ...intentEdgeStyle }}
     >
       <ToastBody
         title={title}
@@ -460,7 +557,7 @@ function ToastInner({
         >
           <ToastActionPill
             className="mp-chip-dismiss-ring"
-            {...knobProps.borderRadiusOuter}
+            {...knobProps.borderRadiusNested}
             height={nestedPx}
             minHeight={nestedPx}
           >
@@ -485,7 +582,7 @@ function ToastInner({
           </ToastCloseRing>
         </ToastCloseTarget>
       )}
-    </View>
+    </XStack>
   );
 }
 
@@ -523,11 +620,23 @@ function ToastItemInner({ entry, isTop, compact }: ToastItemProps) {
     closeRadius,
     descFontSize,
     frameProps,
+    dataAttrs,
+    intentEdgeStyle,
+    edgeColor,
   } = useToastVisuals(entry.intent, compact);
   const enterExit = { opacity: 0, y: isTop ? -16 : 16, scale: 0.97 };
   // Store-resolved policy: 0 = sticky/persistent (never auto-expires).
   const duration = entry.duration === 0 ? Number.POSITIVE_INFINITY : entry.duration;
   const assertive = entry.intent === "error" || entry.intent === "warning";
+  const frameRef = useRef<HTMLElement | null>(null);
+  useLayoutEffect(() => {
+    paintToastFrame(frameRef.current, {
+      size: knobProps.size,
+      density: knobProps.density,
+      nestedPx,
+      edgeColor,
+    });
+  });
   return (
     <TamaguiToast
       open={entry.open}
@@ -536,15 +645,15 @@ function ToastItemInner({ entry, isTop, compact }: ToastItemProps) {
       }}
       duration={duration}
       type={assertive ? "foreground" : "background"}
+      className="mp-toast"
       transition={knobProps.transition}
       enterStyle={enterExit}
       exitStyle={enterExit}
-      data-testid="toast"
-      data-size={knobProps.size}
-      data-density={knobProps.density}
-      data-nested-px={nestedPx}
       {...frameProps}
       alignItems={entry.description ? "flex-start" : "center"}
+      {...dataAttrs}
+      ref={frameRef as never}
+      style={intentEdgeStyle}
     >
       <ToastBody
         title={entry.title}
@@ -567,7 +676,7 @@ function ToastItemInner({ entry, isTop, compact }: ToastItemProps) {
           >
             <ToastActionPill
               className="mp-chip-dismiss-ring"
-              {...knobProps.borderRadiusOuter}
+              {...knobProps.borderRadiusNested}
               height={nestedPx}
               minHeight={nestedPx}
             >