@multiplatform.one/forms 7.4.1 → 7.6.0

package/src/AdaptivePopup/index.tsx

@@ -1,6 +1,10 @@
 import { useCallback, useRef, type ReactNode } from "react";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
-import { Dialog, isWeb, Sheet, Unspaced, useMedia, View, XStack, YStack } from "tamagui";
+import {
+  OVERLAY_BREAKPOINT,
+  ensureFocusVisibleRing,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { Dialog, isWeb, Sheet, Unspaced, useMedia, View, VisuallyHidden, XStack, YStack } from "tamagui";
 import { X } from "@tamagui/lucide-icons-2";
 import { formCommonColors } from "../shared/colorRamps";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
@@ -30,6 +34,13 @@ export interface AdaptivePopupProps {
    * - `fullscreen`: fills viewport with padding
    */
   size?: "sm" | "md" | "lg" | "xl" | "fullscreen";
+  /**
+   * Desktop face. `"drawer"` is the edge-anchored companion (C22) above
+   * `OVERLAY_BREAKPOINT`. At the breakpoint and below the drawer face does
+   * not exist — the same props render the existing sheet. `size="fullscreen"`
+   * stays dialog-family. Default `"dialog"`.
+   */
+  face?: "dialog" | "drawer";
   /** Whether to show the close button. Default true. */
   showCloseButton?: boolean;
   /** Custom footer content (e.g. action buttons) */
@@ -54,6 +65,40 @@ const sizeToHeight: Record<NonNullable<AdaptivePopupProps["size"]>, number | str
   fullscreen: "90vh",
 };
 
+export type AdaptivePopupRenderedFace = "dialog" | "drawer" | "sheet";
+
+/**
+ * Face-picking rule (C22): ≤ OVERLAY_BREAKPOINT always sheet; above it,
+ * `face="drawer"` → edge panel unless `size="fullscreen"` (dialog-family).
+ * A panel the user keeps open is SupportingPaneLayout, not this overlay (LC-29).
+ */
+export function pickAdaptivePopupFace(options: {
+  face?: AdaptivePopupProps["face"];
+  size?: AdaptivePopupProps["size"];
+  viewportWidth: number;
+}): AdaptivePopupRenderedFace {
+  if (options.viewportWidth <= OVERLAY_BREAKPOINT) return "sheet";
+  if (options.size === "fullscreen") return "dialog";
+  if (options.face === "drawer") return "drawer";
+  return "dialog";
+}
+
+/** Reference §8 overlay shadow — rgba(0,0,0,0.12) 0 12px 24px. Not Button $1. */
+const overlayElevationShadow = {
+  shadowColor: "rgba(0,0,0,0.12)",
+  shadowOffset: { width: 0, height: 12 },
+  shadowOpacity: 1,
+  shadowRadius: 24,
+} as const;
+
+function readRtl(): boolean {
+  return (
+    isWeb &&
+    typeof document !== "undefined" &&
+    document.documentElement.getAttribute("dir") === "rtl"
+  );
+}
+
 /**
  * LC-71: the overlay frame is not a control. Auto-focus on open (Radix /
  * Sheet) must not paint a ring on the panel; the first inner field rings if
@@ -66,21 +111,6 @@ const overlayFrameFocus = {
   focusVisibleStyle: { outlineWidth: 0 },
 } as const;
 
-function VisuallyHidden({ children }: { children: ReactNode }) {
-  return (
-    <YStack
-      position="absolute"
-      width={1}
-      height={1}
-      overflow="hidden"
-      opacity={0}
-      pointerEvents="none"
-    >
-      {children}
-    </YStack>
-  );
-}
-
 /**
  * Overlay close: nested density (LC-73), keyboard-only ring on the painted
  * circle (LC-71). House Button's circular press floor is the page 44px well —
@@ -134,6 +164,7 @@ export function AdaptivePopup({
   description,
   children,
   size = "md",
+  face = "dialog",
   showCloseButton = true,
   footer,
   disabled,
@@ -145,19 +176,27 @@ export function AdaptivePopup({
   // `media.sm` = v5 minWidth 640 (`gtSm` died with the v5 media map,
   // MPO-13 C4) — SSR fallback only; the viewport hook wins on client.
   const isDesktop = typeof window !== "undefined" ? viewportGtSm : media.sm === true;
+  const renderedFace = pickAdaptivePopupFace({
+    face,
+    size,
+    viewportWidth: isDesktop ? OVERLAY_BREAKPOINT + 1 : OVERLAY_BREAKPOINT,
+  });
+  const rtl = readRtl();
   // Sheet mode only: the desktop Dialog already dismisses via Dismissable.
-  useSheetEscapeDismiss(open && !isDesktop, () => onOpenChange(false));
+  useSheetEscapeDismiss(open && renderedFace === "sheet", () => onOpenChange(false));
   // DG-A11Y-04 / Axiom 7: Tamagui's focus scope only restores focus when a
   // Dialog.Trigger lives inside the Dialog — this popup is (also) opened
   // programmatically, so close dropped focus on <body>. Restore it ourselves;
   // sheet mode additionally moves focus in and traps Tab (Sheet has no scope).
   const sheetFrameRef = useRef<HTMLElement | null>(null);
-  useReturnFocusOnClose(open && isDesktop);
-  useSheetModalFocus(open && !isDesktop, sheetFrameRef);
+  useReturnFocusOnClose(open && renderedFace !== "sheet");
+  useSheetModalFocus(open && renderedFace === "sheet", sheetFrameRef);
 
   const maxWidth = sizeToWidth[size];
   const maxHeight = sizeToHeight[size];
   const closePx = nestedKnobs.nestedControl.px;
+  const drawerWidth = typeof maxWidth === "number" ? maxWidth : sizeToWidth.md;
+  const { borderRadius: drawerFreeRadius, ...drawerRadiusRest } = knobProps.containerRadius;
 
   const openFromTrigger = useCallback(() => {
     if (!disabled) onOpenChange(true);
@@ -233,10 +272,12 @@ export function AdaptivePopup({
     </YStack>
   );
 
-  // Compact (Apple HIG / Radix Adapt): sheet. Regular: modal dialog (form
-  // sheet). Popover is the wrong desktop primitive here — AdaptivePopup is a
-  // titled form with a footer, not a small anchored bubble (that's FloatingPanel).
-  if (!isDesktop) {
+  // Compact: sheet. Regular: modal dialog (form sheet). Drawer is the third
+  // face: edge-anchored companion above the overlay breakpoint. Same 860
+  // pivot as FloatingPanel (useViewportGtSm) — never Tamagui Adapt. Popover
+  // is the wrong desktop primitive here — AdaptivePopup is a titled form
+  // with a footer, not a small anchored bubble (that's FloatingPanel).
+  if (renderedFace === "sheet") {
     return (
       <>
         {trigger && <View {...triggerWrap}>{trigger}</View>}
@@ -288,6 +329,97 @@ export function AdaptivePopup({
     );
   }
 
+  if (renderedFace === "drawer") {
+    const attached = 0;
+    const free = drawerFreeRadius;
+    const drawerRadius = rtl
+      ? {
+          borderTopLeftRadius: attached,
+          borderBottomLeftRadius: attached,
+          borderTopRightRadius: free,
+          borderBottomRightRadius: free,
+        }
+      : {
+          borderTopRightRadius: attached,
+          borderBottomRightRadius: attached,
+          borderTopLeftRadius: free,
+          borderBottomLeftRadius: free,
+        };
+    const slideFromEnd = rtl ? -24 : 24;
+    return (
+      <Dialog modal open={open} onOpenChange={onOpenChange}>
+        {trigger && (
+          <Dialog.Trigger asChild disabled={disabled}>
+            <View {...triggerWrap}>{trigger}</View>
+          </Dialog.Trigger>
+        )}
+
+        <Dialog.Portal zIndex={zIndex.dropdown}>
+          <Dialog.Overlay
+            key="overlay"
+            backgroundColor="$shadow6"
+            transition={knobProps.transition}
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+          <Dialog.Content
+            key="content"
+            unstyled
+            position="fixed"
+            top={0}
+            bottom={0}
+            {...(rtl ? { left: 0 } : { right: 0 })}
+            height="100%"
+            width={drawerWidth}
+            maxHeight="100%"
+            margin={0}
+            x={0}
+            y={0}
+            pointerEvents="auto"
+            tabIndex={-1}
+            data-testid="adaptive-popup-surface"
+            data-adaptive-popup-mode="drawer"
+            data-popup-ground="$background"
+            data-drawer-gap="0"
+            data-drawer-edge="inline-end"
+            data-popup-width={String(drawerWidth)}
+            data-drawer-attached-radius="0"
+            {...knobProps.elevatedSurface}
+            {...drawerRadiusRest}
+            {...drawerRadius}
+            elevate={false}
+            elevation={knobProps.elevatedSurface.elevation}
+            {...overlayElevationShadow}
+            backgroundColor="$background"
+            {...overlayFrameFocus}
+            transition={knobProps.transition}
+            animateOnly={["transform", "opacity"]}
+            enterStyle={{ opacity: 0, x: slideFromEnd }}
+            exitStyle={{ opacity: 0, x: slideFromEnd }}
+            {...knobProps.panelPadding}
+            onOpenAutoFocus={(event) => {
+              const root = event.currentTarget as unknown as HTMLElement | null;
+              const field = root?.querySelector<HTMLElement>(
+                "input, textarea, select, [contenteditable='true']",
+              );
+              if (!field) return;
+              event.preventDefault();
+              field.focus({ preventScroll: true });
+            }}
+            onCloseAutoFocus={(event) => {
+              // LC-48: Dialog.Trigger is the wrapper View (tabIndex -1), not
+              // the painted Button. Prevent Radix restoring there so
+              // useReturnFocusOnClose can return to the opener.
+              event.preventDefault();
+            }}
+          >
+            {body}
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog>
+    );
+  }
+
   return (
     <Dialog modal open={open} onOpenChange={onOpenChange}>
       {trigger && (
@@ -335,6 +467,12 @@ export function AdaptivePopup({
             event.preventDefault();
             field.focus({ preventScroll: true });
           }}
+          onCloseAutoFocus={(event) => {
+            // LC-48: Dialog.Trigger is the wrapper View (tabIndex -1), not
+            // the painted Button. Prevent Radix restoring there so
+            // useReturnFocusOnClose can return to the opener.
+            event.preventDefault();
+          }}
         >
           {body}
         </Dialog.Content>

package/src/Button/Button.density.spec.tsx

@@ -0,0 +1,164 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-42 / LC-76: the density knob and the `compact` PROP must land the
+ * SAME padX. Height stays 44 at both stops — density moves space, not size.
+ *
+ * LC-79 / LC-80: the internals come from the size recipe, so density picks
+ * the recipe FAMILY (`control` -> `controlCompact`) and never subtracts a
+ * hand-set delta. The delta drifted from the generated table at every token
+ * but `$4`, and at `$2` it INVERTED — `max(8, 7 - 2)` painted a compact
+ * Button 8px wider than the comfortable 7px one.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset, recipeFamilies } from "@multiplatform.one/theme";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button, buttonDensityFamily, resolveButtonSizeRecipe } from "./index";
+
+afterEach(cleanup);
+
+const sizes = ["$2", "$3", "$4"] as const;
+
+/** Last `_pl-Npx` / `_pr-Npx` class wins (paddingHorizontal expands to both). */
+function paddingPxFromClass(el: HTMLElement): number | null {
+  let found: number | null = null;
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const m = c.match(/^_p[lr]-(\d+)px$/);
+    if (m) found = Number(m[1]);
+  }
+  return found;
+}
+
+function gapPxFromClass(el: HTMLElement): number | null {
+  for (const c of String(el.className || "").split(/\s+/)) {
+    const m = c.match(/^_gap-(\d+)px$/);
+    if (m) return Number(m[1]);
+  }
+  return null;
+}
+
+function renderProp(size: (typeof sizes)[number]) {
+  renderWithProviders(
+    <Button compact size={size} icon={<span>i</span>}>
+      Save
+    </Button>,
+  );
+  return screen.getByRole("button");
+}
+
+function renderKnob(size: (typeof sizes)[number]) {
+  renderWithProviders(
+    <Preset overrides={{ density: "compact" }}>
+      <Button size={size} icon={<span>i</span>}>
+        Save
+      </Button>
+    </Preset>,
+  );
+  return screen.getByRole("button");
+}
+
+function renderComfortable(size: (typeof sizes)[number]) {
+  renderWithProviders(
+    <Button size={size} icon={<span>i</span>}>
+      Save
+    </Button>,
+  );
+  return screen.getByRole("button");
+}
+
+describe("Button density knob = compact PROP (MPO-42)", () => {
+  it("compact PROP and density:compact knob land the SAME padX", () => {
+    const viaProp = renderProp("$4");
+    const propPad = paddingPxFromClass(viaProp);
+    expect(viaProp.getAttribute("data-mp-density")).toBe("compact");
+    expect(propPad).toBe(16);
+    cleanup();
+
+    const viaKnob = renderKnob("$4");
+    expect(viaKnob.getAttribute("data-mp-density")).toBe("compact");
+    expect(paddingPxFromClass(viaKnob)).toBe(propPad);
+    expect(paddingPxFromClass(viaKnob)).toBe(16);
+  });
+
+  it("both channels land the SAME padX at every size step, not just $4", () => {
+    for (const size of sizes) {
+      const viaProp = paddingPxFromClass(renderProp(size));
+      cleanup();
+      const viaKnob = paddingPxFromClass(renderKnob(size));
+      cleanup();
+      expect(viaKnob, `padX at ${size}`).toBe(viaProp);
+    }
+  });
+
+  it("height stays 44 at comfortable and compact density stops", () => {
+    const comfortable = renderComfortable("$4");
+    expect(comfortable.getAttribute("data-mp-button-height")).toBe("44");
+    expect(comfortable.className).toMatch(/_h-44px/);
+    expect(paddingPxFromClass(comfortable)).toBe(18);
+    cleanup();
+
+    const viaKnob = renderKnob("$4");
+    expect(viaKnob.getAttribute("data-mp-button-height")).toBe("44");
+    expect(viaKnob.className).toMatch(/_h-44px/);
+    cleanup();
+
+    const viaProp = renderProp("$4");
+    expect(viaProp.getAttribute("data-mp-button-height")).toBe("44");
+    expect(viaProp.className).toMatch(/_h-44px/);
+  });
+
+  it("density never changes the painted height at any size step (LC-76)", () => {
+    for (const size of sizes) {
+      const relaxed = renderComfortable(size).getAttribute("data-mp-button-height");
+      cleanup();
+      const tight = renderKnob(size).getAttribute("data-mp-button-height");
+      cleanup();
+      expect(tight, `height at ${size}`).toBe(relaxed);
+    }
+  });
+});
+
+describe("Button density comes from the recipe family (LC-79 / LC-80)", () => {
+  it("density picks the family, it does not subtract from the recipe", () => {
+    expect(buttonDensityFamily("control", true)).toBe("controlCompact");
+    expect(buttonDensityFamily("control", false)).toBe("control");
+    // An explicit controlCompact consumer (Chip) does not tighten twice.
+    expect(buttonDensityFamily("controlCompact", true)).toBe("controlCompact");
+  });
+
+  it("compact padX is the generated controlCompact table, at every size", () => {
+    for (const size of sizes) {
+      const expected = resolveButtonSizeRecipe(size, "controlCompact").paddingHorizontal;
+      const viaKnob = paddingPxFromClass(renderKnob(size));
+      cleanup();
+      expect(viaKnob, `padX at ${size}`).toBe(expected);
+    }
+  });
+
+  it("compact is never WIDER than comfortable — the $2 inversion stays fixed", () => {
+    for (const size of sizes) {
+      const relaxed = paddingPxFromClass(renderComfortable(size)) ?? 0;
+      cleanup();
+      const tight = paddingPxFromClass(renderKnob(size)) ?? 0;
+      cleanup();
+      expect(tight, `padX at ${size}`).toBeLessThan(relaxed);
+    }
+  });
+
+  it("the inner gap stays the recipe gap — gap == radius at both stops", () => {
+    for (const size of sizes) {
+      const radius = recipeFamilies.controlCompact.radii[size];
+      const relaxed = gapPxFromClass(renderComfortable(size));
+      cleanup();
+      const tight = gapPxFromClass(renderKnob(size));
+      cleanup();
+      expect(tight, `gap at ${size}`).toBe(resolveButtonSizeRecipe(size, "controlCompact").gap);
+      expect(tight, `gap == radius at ${size}`).toBe(radius);
+      expect(relaxed, `comfortable gap at ${size}`).toBe(
+        resolveButtonSizeRecipe(size, "control").gap,
+      );
+    }
+  });
+});

package/src/Button/Button.filledBorder.spec.tsx

@@ -0,0 +1,74 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-19 X3 / W1-button-filled-border: a filled Button keeps a 1px
+ * TRANSPARENT border so filled and outlined share box geometry, and only
+ * the outlined variant paints `$borderColor` (tamagui-rendered-reference
+ * §6.1). jsdom cannot cascade Tamagui CSS — assertions read the atomic
+ * border-color / border-width / height classes the FRAME emits.
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+function frame(): HTMLElement {
+  return screen.getByRole("button");
+}
+
+function atoms(el: HTMLElement, prefix: string): string[] {
+  return String(el.className || "")
+    .split(/\s+/)
+    .filter((c) => c.startsWith(prefix))
+    .sort();
+}
+
+describe("Button MPO-19 filled border is transparent", () => {
+  it("filled paints no visible edge; outlined does; boxes match", () => {
+    renderWithProviders(<Button>Filled</Button>);
+    const filled = frame();
+    const filledHeight = atoms(filled, "_h-");
+    const filledPad = [...atoms(filled, "_pr-"), ...atoms(filled, "_pl-")];
+    const filledWidth = atoms(filled, "_btw-");
+    expect(filled.className).toMatch(/_btc-transparent\b/);
+    expect(filled.className).toMatch(/_brc-transparent\b/);
+    expect(filled.className).toMatch(/_bbc-transparent\b/);
+    expect(filled.className).toMatch(/_blc-transparent\b/);
+    expect(filled.className).not.toMatch(/_btc-borderColor\b/);
+    expect(filledWidth).toEqual(["_btw-1px"]);
+    cleanup();
+
+    renderWithProviders(<Button outlined>Outlined</Button>);
+    const outlined = frame();
+    expect(outlined.className).toMatch(/_btc-borderColor\b/);
+    expect(outlined.className).toMatch(/_brc-borderColor\b/);
+    expect(outlined.className).toMatch(/_bbc-borderColor\b/);
+    expect(outlined.className).toMatch(/_blc-borderColor\b/);
+    expect(outlined.className).not.toMatch(/_btc-transparent\b/);
+    expect(atoms(outlined, "_btw-")).toEqual(filledWidth);
+    expect(atoms(outlined, "_h-")).toEqual(filledHeight);
+    expect([...atoms(outlined, "_pr-"), ...atoms(outlined, "_pl-")]).toEqual(filledPad);
+  });
+
+  it("intent filled Buttons keep the invisible 1px edge", () => {
+    renderWithProviders(<Button error>Destroy</Button>);
+    const filled = frame();
+    expect(filled.className).toMatch(/_btc-transparent\b/);
+    expect(atoms(filled, "_btw-")).toEqual(["_btw-1px"]);
+    expect(filled.className).toMatch(/_h-44px\b/);
+    cleanup();
+
+    renderWithProviders(
+      <Button outlined error>
+        Destroy
+      </Button>,
+    );
+    const outlined = frame();
+    expect(outlined.className).toMatch(/_btc-borderColor\b/);
+    expect(atoms(outlined, "_btw-")).toEqual(["_btw-1px"]);
+    expect(outlined.className).toMatch(/_h-44px\b/);
+  });
+});

package/src/Button/Button.labelInk.spec.tsx

@@ -0,0 +1,196 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-40 / W1-button-label-ink: outlined error/warning/success labels
+ * re-anchor to `$color11` on the LABEL TEXT NODE. The harness passed this
+ * defect for months by reading the frame (`color` inherits) while
+ * SizableText re-resolved `$color` — the on-fill foreground (measured
+ * ~1.03:1 on the page).
+ *
+ * jsdom cannot cascade Tamagui CSS, so the DOM arm reads the atomic
+ * classes the text node emits (`_col-color11`, `_fow-400`). Contrast is
+ * the theme-table arm: intent `$color11` against EVERY page surface the
+ * house theme paints, in both schemes — `$background`/`$color1` (white)
+ * and `$color2` (#f9f9fa, what the gallery boards are shot on).
+ */
+
+import { render, cleanup, screen } from "@testing-library/react";
+import {
+  aaTextContrastRatio,
+  createDefaultThemeConfig,
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  measureContrast,
+} from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
+import { TamaguiProvider, YStack } from "tamagui";
+import { Button } from "./index";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const INTENTS = ["error", "warning", "success"] as const;
+const SCHEMES = ["light", "dark"] as const;
+/**
+ * The house theme has THREE page surfaces and they are not interchangeable:
+ * `$background` and `$color1` are pure white, `$color2` is #f9f9fa. Every
+ * gallery board paints `$color2` (actionFeedbackMain.tsx board root), so a
+ * contrast arm that only reads `$background` certifies on a surface the
+ * boards never shoot — the same shape of hole as measuring the FRAME
+ * instead of the text node. All three are measured here.
+ */
+const WHITE_PAGE_SURFACES = ["background", "color1"] as const;
+
+function houseRender(ui: React.ReactElement, theme: "light" | "dark" = "light") {
+  return render(
+    <TamaguiProvider config={houseConfig} defaultTheme={theme} disableInjectCSS>
+      <YStack backgroundColor="$background">{ui}</YStack>
+    </TamaguiProvider>,
+  );
+}
+
+function labelNode(text: string): HTMLElement {
+  return screen.getByText(text);
+}
+
+/**
+ * One implementation of the arithmetic (the point of exporting
+ * `measureContrast`), and the REPORTED 2-decimal ratio, so the number a
+ * failure prints is the number the verdict used.
+ */
+function pageRatio(ink: string, ground: string, label: string): number {
+  return measureContrast({ foreground: ink, background: ground, label }).ratio;
+}
+
+describe("Button MPO-40 outlined intent label ink", () => {
+  it.each(SCHEMES)(
+    "%s: outlined intent labels emit $color11 on the TEXT NODE, never the on-fill $color",
+    (scheme) => {
+      houseRender(
+        <>
+          {INTENTS.map((intent) => (
+            <Button key={`o-${intent}`} outlined {...{ [intent]: true }}>
+              {`Outlined-${intent}`}
+            </Button>
+          ))}
+          {INTENTS.map((intent) => (
+            <Button key={`s-${intent}`} {...{ [intent]: true }}>
+              {`Solid-${intent}`}
+            </Button>
+          ))}
+        </>,
+        scheme,
+      );
+
+      for (const intent of INTENTS) {
+        const outlined = labelNode(`Outlined-${intent}`);
+        const solid = labelNode(`Solid-${intent}`);
+        // TEXT NODE — not the frame. The frame already carried $color11
+        // and hid this defect.
+        expect(outlined.tagName).not.toBe("BUTTON");
+        expect(outlined.className).toMatch(/_col-color11\b/);
+        expect(outlined.className).not.toMatch(/_col-color\b/);
+        expect(solid.className).toMatch(/_col-color\b/);
+        expect(solid.className).not.toMatch(/_col-color11\b/);
+      }
+    },
+  );
+
+  it.each(SCHEMES)("%s: label TEXT NODE weight is 400, never 500/600", (scheme) => {
+    houseRender(
+      <>
+        <Button>Filled-label</Button>
+        <Button outlined>Outlined-label</Button>
+        <Button outlined error>
+          Outlined-error-label
+        </Button>
+        <Button error>Solid-error-label</Button>
+      </>,
+      scheme,
+    );
+
+    for (const text of [
+      "Filled-label",
+      "Outlined-label",
+      "Outlined-error-label",
+      "Solid-error-label",
+    ]) {
+      const node = labelNode(text);
+      expect(node.className).toMatch(/_fow-400\b/);
+      expect(node.className).not.toMatch(/_fow-500\b/);
+      expect(node.className).not.toMatch(/_fow-600\b/);
+    }
+  });
+
+  it("intent $color11 clears 4.5:1 on the white page surfaces in both schemes; on-fill $color never does", () => {
+    for (const scheme of SCHEMES) {
+      for (const intent of INTENTS) {
+        const ink = houseThemes[`${scheme}_${intent}`].color11;
+        for (const surface of WHITE_PAGE_SURFACES) {
+          const ground = houseThemes[scheme][surface];
+          const label = `${scheme}_${intent}.color11 ${ink} on ${scheme}.${surface} ${ground}`;
+          expect(pageRatio(ink, ground, label), label).toBeGreaterThanOrEqual(aaTextContrastRatio);
+        }
+
+        const onFill = houseThemes[`${scheme}_${intent}_Button`].color;
+        const ground = houseThemes[scheme].background;
+        expect(
+          pageRatio(onFill, ground, `${scheme}_${intent}_Button.color`),
+          `${scheme}_${intent}_Button.color is the on-fill foreground`,
+        ).toBeLessThan(2);
+      }
+    }
+  });
+
+  it("dark intent $color11 clears 4.5:1 on the $color2 page surface too", () => {
+    for (const intent of INTENTS) {
+      const ink = houseThemes[`dark_${intent}`].color11;
+      const ground = houseThemes.dark.color2;
+      const label = `dark_${intent}.color11 ${ink} on dark.color2 ${ground}`;
+      expect(pageRatio(ink, ground, label), label).toBeGreaterThanOrEqual(aaTextContrastRatio);
+    }
+  });
+
+  // PINNED MISS — MPO-40's own secondary finding, still OPEN.
+  //
+  // Fixing the plumbing (the arm above) was necessary, not sufficient. On
+  // $color2 — the surface every gallery board is shot on — light warning
+  // and success $color11 are under mpo's own floor, and those are exactly
+  // the numbers button-anatomy already prints for its CONTRACT row. The
+  // step that would close them is a PALETTE change (Radix yellow-11
+  // #9e6c00 / green-11 #218358), owned by the contrast-floor lane, not by
+  // the Button. colorRules.ts pins the same warning miss on the intent's
+  // own color1 (#fcfcf7, 4.44:1); this pins it on the page ground.
+  //
+  // These numbers are asserted EXACTLY on purpose. Step the palette and
+  // this test fails, which is the reminder to re-measure the board and
+  // tick MPO-40's contrast criterion — never a regression to re-baseline.
+  it("light warning/success $color11 are STILL under 4.5:1 on the $color2 page surface", () => {
+    const ground = houseThemes.light.color2;
+    const measured = Object.fromEntries(
+      INTENTS.map((intent): [string, number] => [
+        intent,
+        pageRatio(
+          houseThemes[`light_${intent}`].color11,
+          ground,
+          `light_${intent}.color11 on light.color2`,
+        ),
+      ]),
+    );
+    expect(measured, `light.color2 is ${ground}`).toEqual({
+      error: 4.95,
+      warning: 4.34,
+      success: 4.48,
+    });
+    expect(measured.warning).toBeLessThan(aaTextContrastRatio);
+    expect(measured.success).toBeLessThan(aaTextContrastRatio);
+  });
+});