@multiplatform.one/components 7.4.1 → 7.6.0

package/src/Text.spec.tsx

@@ -0,0 +1,188 @@
+/**
+ * House Text knob wiring (MPO-20) — bodyFont / fontWeight / textAccent reach
+ * the TEXT NODE, on the props channel that serves every platform.
+ *
+ * Measurement discipline (the MPO-40/44/48 lesson): every font/weight/ink
+ * assertion here reads the TEXT NODE — the element `screen.getByText`
+ * returns, guarded to not be the wrapping frame — never the frame. jsdom/
+ * happy-dom cannot cascade Tamagui's class-based CSS, so assertions compare
+ * the atomic style classes the props emit on that node (`_col-` color,
+ * `_fow-` fontWeight, `_fos-`/`_lh-` size — the pageTitleScale.spec.tsx
+ * technique) and the font-scope class (`font_body` / `font_mono`) for
+ * family. Between knob flips and against explicit-prop renders of the
+ * same value. Hashed class names are compared by identity only.
+ *
+ * This file is the WEB arm (the default module graph, isWeb true). The NATIVE
+ * arm is ./Text.native.spec.tsx, a separate FILE so that a file-scoped
+ * `vi.mock` gives it one coherent module graph. FontKnobStyles' CSS-variable
+ * rescue is absent in BOTH arms (renderWithProviders mounts no theme
+ * provider), so a flip that reaches the node proves the PROPS channel — the
+ * only channel native has.
+ */
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { XStack } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Text } from "./Text";
+
+afterEach(cleanup);
+
+const LABEL = "Measure the text node";
+
+function classesByPrefix(el: Element, prefixes: string[]): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+/** Tamagui font-scope class on the TEXT NODE (`font_body` / `font_mono` / …). */
+function fontScopeClass(el: Element): string {
+  return (
+    String((el as HTMLElement).className || "")
+      .split(" ")
+      .find((c) => c.startsWith("font_")) ?? ""
+  );
+}
+
+/** Render, read the TEXT NODE's prefixed classes, clean up. */
+function renderTextClasses(node: React.ReactElement, prefixes: string[]): string[] {
+  renderWithProviders(node);
+  const textNode = screen.getByText(LABEL);
+  const classes = classesByPrefix(textNode, prefixes);
+  cleanup();
+  return classes;
+}
+
+describe("house Text — textAccent reaches the text node (MPO-20)", () => {
+  it("changes colour on a textAccent flip", () => {
+    const high = renderTextClasses(
+      <Preset overrides={{ textAccent: "high" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    const low = renderTextClasses(
+      <Preset overrides={{ textAccent: "low" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    expect(high).not.toHaveLength(0);
+    expect(low).not.toHaveLength(0);
+    expect(high).not.toEqual(low);
+  });
+
+  it("low and medium share the AA legibility floor ($color11)", () => {
+    const low = renderTextClasses(
+      <Preset overrides={{ textAccent: "low" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    const medium = renderTextClasses(
+      <Preset overrides={{ textAccent: "medium" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    expect(low).toEqual(medium);
+  });
+
+  it("measures the TEXT NODE, never the frame (MPO-44 discipline)", () => {
+    renderWithProviders(
+      <XStack data-testid="frame">
+        <Text>{LABEL}</Text>
+      </XStack>,
+    );
+    const textNode = screen.getByText(LABEL);
+    const frame = screen.getByTestId("frame");
+    expect(textNode).not.toBe(frame);
+    expect(frame.contains(textNode)).toBe(true);
+    // The ink/weight/family live on the text node; the frame carries none.
+    expect(classesByPrefix(textNode, ["_col-", "_fow-", "_ff-"])).not.toHaveLength(0);
+    expect(classesByPrefix(frame, ["_col-", "_fow-", "_ff-"])).toHaveLength(0);
+  });
+});
+
+describe("house Text — fontWeight and bodyFont reach the text node", () => {
+  it("changes weight on a fontWeight flip, pinned to the 400/700 label law", () => {
+    const regular = renderTextClasses(
+      <Preset overrides={{ fontWeight: "regular" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    const bold = renderTextClasses(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    // Identity-pin the values without hardcoding hashed class names: the
+    // knob's rendering must equal an explicit render of the lawful weight
+    // (labels are 400, bold 700 — 500/600 are not label weights).
+    const explicit400 = renderTextClasses(<Text fontWeight="400">{LABEL}</Text>, ["_fow-"]);
+    const explicit700 = renderTextClasses(<Text fontWeight="700">{LABEL}</Text>, ["_fow-"]);
+    expect(regular).not.toHaveLength(0);
+    expect(regular).not.toEqual(bold);
+    expect(regular).toEqual(explicit400);
+    expect(bold).toEqual(explicit700);
+  });
+
+  it("changes family on a bodyFont flip (props, not the web-only CSS rescue)", () => {
+    // Family lives on the font-scope class (`font_body` / `font_mono`), not
+    // the shared `_ff-f-family` token class — measure that on the TEXT NODE.
+    const scope = (node: React.ReactElement) => {
+      renderWithProviders(node);
+      const cls = fontScopeClass(screen.getByText(LABEL));
+      cleanup();
+      return cls;
+    };
+    const sans = scope(
+      <Preset overrides={{ bodyFont: "sans-serif" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+    );
+    const mono = scope(
+      <Preset overrides={{ bodyFont: "mono" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+    );
+    expect(sans).toBe("font_body");
+    expect(mono).toBe("font_mono");
+  });
+
+  it("default label ramp is 400 at 14/25 on the TEXT NODE", () => {
+    // tamagui-rendered-reference.md §9: $4 / $true labels are Inter 14/25
+    // weight 400. Identity-pin against an explicit render so hashed classes
+    // never leak into the assertion.
+    const byDefault = renderTextClasses(<Text>{LABEL}</Text>, ["_fos-", "_lh-", "_fow-"]);
+    const explicit = renderTextClasses(
+      <Text fontSize={14} lineHeight={25} fontWeight="400">
+        {LABEL}
+      </Text>,
+      ["_fos-", "_lh-", "_fow-"],
+    );
+    expect(byDefault).not.toHaveLength(0);
+    expect(byDefault).toEqual(explicit);
+  });
+
+  it("explicit consumer props still eject (STD-EJECT-LAST)", () => {
+    const ejected = renderTextClasses(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Text fontWeight="400">{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    const explicit400 = renderTextClasses(<Text fontWeight="400">{LABEL}</Text>, ["_fow-"]);
+    expect(ejected).toEqual(explicit400);
+  });
+});
+
+// The NATIVE arm lives in ./Text.native.spec.tsx. It used to sit here as a
+// `vi.resetModules()` + dynamic-import block, but that returned a SPLIT module
+// graph — a fresh `renderWithProviders` over a stale `useResolvedKnobs` — and
+// threw "Missing theme." instead of measuring anything. A file-scoped
+// `vi.mock` in its own spec file is one coherent graph.

package/src/Text.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Preset } from "@multiplatform.one/theme";
+import { YStack } from "tamagui";
+import { Text } from "./Text";
+import { Paragraph, SizableText } from "./Text";
+
+const meta: Meta<typeof Text> = {
+  title: "Components/Text",
+  component: Text,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "House body text (MPO-20). Spreads knobProps.body and the textAccent ink as props, so bodyFont/fontWeight/textAccent restyle it on every platform. Default label ramp is 400 at 14/25. App text rides this, never raw tamagui typography (AN-8).",
+      },
+    },
+  },
+  argTypes: {
+    children: { control: "text" },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Text>;
+
+export const Default: Story = {
+  name: "Main",
+  args: {
+    children: "Body text follows the bodyFont, fontWeight and textAccent knobs.",
+  },
+};
+
+export const Voices: Story = {
+  render: () => (
+    <YStack gap="$3" maxWidth={520}>
+      <Text>Text — unsized body voice.</Text>
+      <SizableText size="$5">SizableText — sized body voice.</SizableText>
+      <Paragraph>Paragraph — flowing copy voice with the body size default.</Paragraph>
+    </YStack>
+  ),
+};
+
+export const TextAccentFlip: Story = {
+  name: "textAccent flip (high vs low)",
+  render: () => (
+    <YStack gap="$3" maxWidth={520}>
+      <Preset overrides={{ textAccent: "high" }}>
+        <Text>high — full ink ($color).</Text>
+      </Preset>
+      <Preset overrides={{ textAccent: "low" }}>
+        <Text>low — muted ink on the AA floor ($color11).</Text>
+      </Preset>
+    </YStack>
+  ),
+};
+
+export const FontWeightFlip: Story = {
+  name: "fontWeight flip (regular vs bold)",
+  render: () => (
+    <YStack gap="$3" maxWidth={520}>
+      <Preset overrides={{ fontWeight: "regular" }}>
+        <Text>regular — labels are 400 (500/600 are not label weights).</Text>
+      </Preset>
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Text>bold — 700.</Text>
+      </Preset>
+    </YStack>
+  ),
+};

package/src/Text.tsx

@@ -0,0 +1,85 @@
+/**
+ * House body-text voices for the components catalog — Text, SizableText,
+ * Paragraph and Anchor (MPO-20, LC-70 CURATED-REEXPORT-IS-CATALOG).
+ *
+ * Before this module the barrel re-exported the RAW tamagui typography
+ * primitives under bare names, registered as "typography substrate" rows in
+ * ./knobImmuneExports.ts. That registry claim was a lie in three parts:
+ * FontKnobStyles rescues family/leading/tracking on WEB ONLY (CSS variables),
+ * fontWeight and textAccent reach the primitives on NO platform, and on
+ * native nothing reaches them at all. AN-8 ("never render app text through
+ * bare typography") was unfollowable — there was no house Text to follow it
+ * with.
+ *
+ * ARCHITECTURE (Button/Spinner shadow precedent): the thinnest legal shape
+ * is a wrapper that spreads the COMPLETE knob fragments onto the raw
+ * primitive and forwards consumer props LAST (STD-EJECT-LAST). The
+ * fragments are props, not CSS, so the same code path styles web AND native
+ * — the text node itself carries fontFamily/fontWeight/color on every
+ * platform (the MPO-44/48 lesson: the frame is not the text node).
+ *
+ * Knob channels wired here:
+ *  - bodyFont   → knobProps.body.fontFamily  (every platform, not just web)
+ *  - fontWeight → knobProps.body.fontWeight  (regular 400 / bold 700 —
+ *    500/600 are not label weights; see tamagui-rendered-reference.md §9)
+ *  - textAccent → knobProps.textAccentColor  (high $color / medium+low
+ *    $color11, the AA legibility floor) on Text/SizableText/Paragraph.
+ *    Anchor keeps tamagui's link ink: link chrome has no owning LC rule yet
+ *    (the former registry row's ADJUDICATION-CANDIDATE stands, tracked in
+ *    the MR), and painting body accent over it would silently restyle every
+ *    link before that adjudication.
+ *
+ * Default body/label ramp (tamagui-rendered-reference.md §9, the $4 / $true
+ * stop): 14px / 25px / 400. createInterFont's size+10 table yields 14/24;
+ * house Text and Paragraph pin the measured 14/25 pair as props on the
+ * TEXT NODE so the leading lands on every platform. SizableText keeps the
+ * size-token scale. Consumer size/lineHeight/fontWeight ejects still win.
+ *
+ * Raw primitives stay reachable as TamaguiText / TamaguiSizableText /
+ * TamaguiParagraph / TamaguiAnchor (./tamagui.ts escape hatches, LC-45).
+ */
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  Anchor as RawAnchor,
+  type AnchorProps,
+  Paragraph as RawParagraph,
+  type ParagraphProps,
+  SizableText as RawSizableText,
+  type SizableTextProps,
+  Text as RawText,
+  type TextProps,
+} from "tamagui";
+
+export type { AnchorProps, ParagraphProps, SizableTextProps, TextProps };
+
+/** Measured $4 label ramp — Inter 14/25, weight from the fontWeight knob. */
+const LABEL_RAMP = { fontSize: 14, lineHeight: 25 } as const;
+
+export function Text(props: TextProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <RawText {...LABEL_RAMP} {...knobProps.body} color={knobProps.textAccentColor} {...props} />
+  );
+}
+
+export function SizableText(props: SizableTextProps) {
+  const { knobProps } = useResolvedKnobs();
+  return <RawSizableText {...knobProps.body} color={knobProps.textAccentColor} {...props} />;
+}
+
+export function Paragraph(props: ParagraphProps) {
+  const { knobProps } = useResolvedKnobs();
+  return (
+    <RawParagraph
+      {...LABEL_RAMP}
+      {...knobProps.body}
+      color={knobProps.textAccentColor}
+      {...props}
+    />
+  );
+}
+
+export function Anchor(props: AnchorProps) {
+  const { knobProps } = useResolvedKnobs();
+  return <RawAnchor {...knobProps.body} {...props} />;
+}

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();
+      }
+    },
+  );
+});