@multiplatform.one/forms 7.28.0 → 7.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/forms",
-  "version": "7.28.0",
+  "version": "7.29.0",
   "description": "Cross-platform form components with URL state management",
   "keywords": [
     "cross-platform",
@@ -57,10 +57,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
-    "@multiplatform.one/platform": "7.28.0",
-    "@multiplatform.one/router": "7.28.0",
-    "@multiplatform.one/table-primitives": "7.28.0",
-    "@multiplatform.one/theme": "7.28.0",
+    "@multiplatform.one/platform": "7.29.0",
+    "@multiplatform.one/router": "7.29.0",
+    "@multiplatform.one/table-primitives": "7.29.0",
+    "@multiplatform.one/theme": "7.29.0",
     "@phosphor-icons/react": "^2.1.10",
     "@tamagui/get-font-sized": "2.7.6",
     "@tamagui/get-token": "2.7.6",
@@ -79,9 +79,9 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.28.0",
-    "@multiplatform.one/storybook": "7.28.0",
-    "@multiplatform.one/test-utils": "7.28.0",
+    "@multiplatform.one/config": "7.29.0",
+    "@multiplatform.one/storybook": "7.29.0",
+    "@multiplatform.one/test-utils": "7.29.0",
     "@tamagui/build": "2.7.6",
     "@tamagui/config": "2.7.6",
     "@tamagui/vite-plugin": "2.7.6",

package/src/AdaptivePopup/AdaptivePopup.spec.tsx

@@ -1,10 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { fireEvent, waitFor } from "@testing-library/react";
-import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { modelFirstFocusableShow, renderWithProviders } from "@multiplatform.one/test-utils";
 import { OVERLAY_BREAKPOINT } from "@multiplatform.one/theme";
 import { useState, type ReactNode } from "react";
 import { Text } from "tamagui";
 import { Button } from "../Button";
+import { Input } from "../fields/Input";
 import { AdaptivePopup, pickAdaptivePopupFace } from "./index";
 
 /**
@@ -418,3 +419,45 @@ describe("AdaptivePopup drawer contract (LC-48 / DG-OVL-01 / overlay ground)", (
     expect(surface()?.getAttribute("data-drawer-attached-radius")).toBe("0");
   });
 });
+
+// MPO-470: in Chromium and WebKit, <dialog>.show() focuses the first focusable
+// descendant, which here is the tabindex=-1 surface itself (Firefox and the HTML
+// spec take the first tab stop). FocusScope then saw focus inside and never ran
+// the popup's field focus, so typing right after open went nowhere. jsdom has
+// no show(), so modelFirstFocusableShow stands in for Chromium's.
+
+describe("AdaptivePopup open focus behind <dialog>.show() (MPO-470)", () => {
+  let restoreShow = () => {};
+  beforeEach(() => {
+    setViewportWidth(1440);
+    restoreShow = modelFirstFocusableShow();
+  });
+  afterEach(() => restoreShow());
+
+  function FieldPopup({ face }: { face: "dialog" | "drawer" }) {
+    const [open, setOpen] = useState(false);
+    return (
+      <AdaptivePopup
+        open={open}
+        onOpenChange={setOpen}
+        face={face}
+        title="Edit Profile"
+        trigger={<Button>Open Popup</Button>}
+      >
+        <Input inputProps={{ "aria-label": "Name" }} />
+      </AdaptivePopup>
+    );
+  }
+
+  it.each(["dialog", "drawer"] as const)(
+    "%s: moves focus off the surface onto the first field",
+    async (face) => {
+      const result = renderWithProviders(<FieldPopup face={face} />);
+      press(result.container.querySelector("[role='button']") as Element);
+      await waitFor(() => expect(surface()?.getAttribute("data-adaptive-popup-mode")).toBe(face));
+      const field = document.querySelector("input[aria-label='Name']");
+      expect(field).not.toBeNull();
+      await waitFor(() => expect(document.activeElement).toBe(field));
+    },
+  );
+});

package/src/AdaptivePopup/index.tsx

@@ -17,7 +17,11 @@ import {
 } from "tamagui";
 import { X } from "@tamagui/lucide-icons-2";
 import { formCommonColors } from "../shared/colorRamps";
-import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
+import {
+  DialogShowFocus,
+  useReturnFocusOnClose,
+  useSheetModalFocus,
+} from "../shared/focusManagement";
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
 import { zIndex } from "../shared/zIndex";
 import { useViewportGtSm } from "../FloatingPanel";
@@ -158,6 +162,16 @@ function PopupCloseButton({ onPress }: { onPress: () => void }) {
   );
 }
 
+function focusFirstField(event: Event) {
+  const root = event.currentTarget as HTMLElement | null;
+  const field = root?.querySelector<HTMLElement>(
+    "input, textarea, select, [contenteditable='true']",
+  );
+  if (!field) return;
+  event.preventDefault();
+  field.focus({ preventScroll: true });
+}
+
 export function AdaptivePopup({
   open,
   onOpenChange,
@@ -398,15 +412,7 @@ export function AdaptivePopup({
             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 });
-            }}
+            onOpenAutoFocus={focusFirstField}
             onCloseAutoFocus={(event) => {
               // LC-48: Dialog.Trigger is the wrapper View (tabIndex -1), not
               // the painted Button. Prevent Radix restoring there so
@@ -415,6 +421,7 @@ export function AdaptivePopup({
             }}
           >
             {body}
+            <DialogShowFocus onOpenAutoFocus={focusFirstField} />
           </Dialog.Content>
         </Dialog.Portal>
       </Dialog>
@@ -459,15 +466,7 @@ export function AdaptivePopup({
           maxHeight={maxHeight}
           width="90vw"
           {...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 });
-          }}
+          onOpenAutoFocus={focusFirstField}
           onCloseAutoFocus={(event) => {
             // LC-48: Dialog.Trigger is the wrapper View (tabIndex -1), not
             // the painted Button. Prevent Radix restoring there so
@@ -476,6 +475,7 @@ export function AdaptivePopup({
           }}
         >
           {body}
+          <DialogShowFocus onOpenAutoFocus={focusFirstField} />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog>

package/src/Button/Button.disabledReasonInk.spec.tsx

@@ -0,0 +1,134 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-431 / T-HELPER: a disabled Button's reason is copy on the host surface,
+ * not button chrome. Rendered inside the Button's intent <Theme>, its
+ * `$color11` resolved on the intent's on-fill ramp and "Enter a title first"
+ * painted 1.17:1 on the white page (Screens/Todos, light).
+ *
+ * jsdom does not cascade Tamagui CSS, so ink is resolved the way the browser
+ * resolves it: the token on the text node's `_col-*` class, looked up in the
+ * theme scope that encloses that node. Moving the reason back inside the
+ * intent scope changes the looked-up ramp and fails the contrast arm.
+ */
+
+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, type ButtonProps } from "./index";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const SCHEMES = ["light", "dark"] as const;
+const PLACEMENTS = ["below", "inline"] as const;
+const PAGE_SURFACES = ["background", "color1", "color2"] as const;
+
+/** Every channel that re-themes the frame: the four intent props, and `theme`. */
+const CHANNELS: { name: string; themeName: string; props: Partial<ButtonProps> }[] = [
+  { name: "accent", themeName: "accent", props: { accent: true } },
+  { name: "error", themeName: "error", props: { error: true } },
+  { name: "warning", themeName: "warning", props: { warning: true } },
+  { name: "success", themeName: "success", props: { success: true } },
+  { name: 'theme="accent"', themeName: "accent", props: { theme: "accent" } },
+];
+
+function houseRender(ui: React.ReactElement, scheme: "light" | "dark") {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      <YStack backgroundColor="$background">{ui}</YStack>
+    </TamaguiProvider>,
+  );
+}
+
+function scopeThemeKey(node: HTMLElement, scheme: string): string {
+  const names: string[] = [];
+  for (let el: HTMLElement | null = node; el; el = el.parentElement) {
+    if (!el.classList.contains("is_Theme")) continue;
+    for (const cls of Array.from(el.classList)) {
+      if (!cls.startsWith("t_") || cls === "t_sub_theme") continue;
+      const name = cls.slice(2);
+      if (name !== "light" && name !== "dark") names.unshift(name);
+    }
+  }
+  return [scheme, ...names].join("_");
+}
+
+function resolvedInk(
+  node: HTMLElement,
+  scheme: string,
+): { key: string; token: string; ink: string } {
+  const token = node.className.match(/(?:^|\s)_col-(\w+)(?:\s|$)/)?.[1];
+  expect(token, `reason carries a colour token class: ${node.className}`).toBeTruthy();
+  const key = scopeThemeKey(node, scheme);
+  const ink = houseThemes[key]?.[token!];
+  expect(ink, `${key}.${token} resolves in the house themes`).toBeTruthy();
+  return { key, token: token!, ink: ink! };
+}
+
+describe("Button disabledReason ink (MPO-431 / T-HELPER)", () => {
+  for (const scheme of SCHEMES) {
+    for (const placement of PLACEMENTS) {
+      it.each(CHANNELS)(
+        `${scheme} ${placement}: the $name reason clears 4.5:1 on every page surface`,
+        ({ name, props }) => {
+          const reason = `Reason ${name}`;
+          houseRender(
+            <Button {...props} disabled disabledReason={reason} disabledReasonPlacement={placement}>
+              Add
+            </Button>,
+            scheme,
+          );
+          const { key, token, ink } = resolvedInk(screen.getByText(reason), scheme);
+          for (const surface of PAGE_SURFACES) {
+            const ground = houseThemes[scheme][surface];
+            const label = `${key}.${token} ${ink} on ${scheme}.${surface} ${ground}`;
+            expect(
+              measureContrast({ foreground: ink, background: ground, label }).ratio,
+              label,
+            ).toBeGreaterThanOrEqual(aaTextContrastRatio);
+          }
+        },
+      );
+
+      it.each(CHANNELS)(
+        `${scheme} ${placement}: the $name theme scopes the button, never its reason`,
+        ({ name, themeName, props }) => {
+          const reason = `Reason ${name}`;
+          houseRender(
+            <Button {...props} disabled disabledReason={reason} disabledReasonPlacement={placement}>
+              Add
+            </Button>,
+            scheme,
+          );
+          const button = screen.getByRole("button");
+          expect(button.getAttribute("aria-disabled")).toBe("true");
+          expect(
+            button.closest(`.t_${themeName}`),
+            "the frame keeps its intent theme",
+          ).toBeTruthy();
+          expect(
+            screen.getByText(reason).closest(`.t_${themeName}`),
+            "the reason resolves on the host surface",
+          ).toBeNull();
+          expect(scopeThemeKey(screen.getByText(reason), scheme)).toBe(scheme);
+        },
+      );
+    }
+  }
+});

package/src/Button/Button.disabledWash.spec.tsx

@@ -0,0 +1,206 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-433 / LC-40 DISABLED-VISIBLE: every intent Button reads disabled.
+ *
+ * The keepLabel wash paints the ACTIVE ramp's `$color3`/`$color6` with the
+ * label on `$color11`. Error, warning and success parents are Radix ramps, so
+ * step 3 is a pale wash far from their step-11 Button fill. The accent slot is
+ * solid by palette shape (defaults/accent.ts): step 3 sat one lightness step
+ * off the step-4 fill, measured ΔE 8.2 light and 2.5 dark, and the button
+ * never read disabled. The sweep also caught light warning and success labels
+ * at 4.48 and 4.27:1 on their own wash, since step 11 is only AA on steps 1-2.
+ *
+ * jsdom cascades no Tamagui CSS, so this reads what the frame asks for: the
+ * atomic class, the injected rule behind it, and for a `var(--token)` rule the
+ * house theme table of the scope that paints it.
+ */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import {
+  aaTextContrastRatio,
+  createDefaultThemeConfig,
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  measureContrast,
+  normalizeToHex,
+  Preset,
+} from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { TamaguiProvider, YStack } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button, type ButtonProps } from "./index";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const SCHEMES = ["light", "dark"] as const;
+const DISABLED_STYLES = ["keepLabel", "dimWhole"] as const;
+const VARIANTS: { name: string; props: Partial<ButtonProps> }[] = [
+  { name: "accent", props: { accent: true } },
+  { name: 'theme="accent"', props: { theme: "accent" } },
+  { name: "error", props: { error: true } },
+  { name: "warning", props: { warning: true } },
+  { name: "success", props: { success: true } },
+];
+
+/**
+ * LC-40's fill threshold (a HYBRID dial). CIE76 ΔE between the enabled fill
+ * and the disabled fill; the house intents land 57-92 once washed, the
+ * accent measured 2.5-8.2 before the fix.
+ */
+const MIN_FILL_DELTA_E = 20;
+const MIN_OPACITY_DELTA = 0.3;
+
+type Scheme = (typeof SCHEMES)[number];
+
+function houseRender(ui: ReactElement, scheme: Scheme, disabledStyle: string) {
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      <Preset overrides={{ disabledStyle: disabledStyle as "keepLabel" | "dimWhole" }}>
+        <YStack backgroundColor="$background">{ui}</YStack>
+      </Preset>
+    </TamaguiProvider>,
+  );
+}
+
+function injectedRuleValue(className: string, property: string): string {
+  for (const sheet of Array.from(document.styleSheets)) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      if (!(rule instanceof CSSStyleRule)) continue;
+      if (!rule.selectorText.endsWith(`.${className}`)) continue;
+      const value = rule.style.getPropertyValue(property);
+      if (value) return value.trim();
+    }
+  }
+  throw new Error(`no injected ${property} rule for .${className}`);
+}
+
+/** The innermost Tamagui theme scope painting `el`, e.g. `accent_Button`. */
+function scopeOf(el: Element): string | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const names = Array.from(node.classList)
+      .filter((c) => c.startsWith("t_") && c !== "t_sub_theme")
+      .map((c) => c.slice(2))
+      .filter((c) => c !== "light" && c !== "dark");
+    if (names.length) return names.sort((a, b) => b.length - a.length)[0];
+  }
+  return null;
+}
+
+function resolveInScope(value: string, scheme: Scheme, scope: string | null): string {
+  const token = value.match(/^var\(--([\w-]+)\)$/)?.[1];
+  if (!token) return value;
+  const chain: string[] = [];
+  if (scope) {
+    const parts = scope.split("_");
+    for (let i = parts.length; i > 0; i--) chain.push(`${scheme}_${parts.slice(0, i).join("_")}`);
+  }
+  chain.push(scheme);
+  for (const name of chain) {
+    const hit = houseThemes[name]?.[token];
+    if (hit) return hit;
+  }
+  throw new Error(`--${token} resolves in none of ${chain.join(", ")}`);
+}
+
+/** What `el` paints for one atomic property: `_bg-` → background-color. */
+function painted(el: Element, prefix: string, property: string, scheme: Scheme): string {
+  const cls = Array.from(el.classList).find(
+    (c) => c.startsWith(prefix) && !/^_[a-z]+-0(hover|active|focus|press)/.test(c),
+  );
+  if (!cls) throw new Error(`${el.tagName} carries no ${prefix} class`);
+  return resolveInScope(injectedRuleValue(cls, property), scheme, scopeOf(el));
+}
+
+function opacityOf(el: Element): number {
+  const cls = Array.from(el.classList).find((c) => c.startsWith("_o-"));
+  return cls ? Number(injectedRuleValue(cls, "opacity")) : 1;
+}
+
+function toLab(color: string): [number, number, number] {
+  const hex = normalizeToHex(color);
+  if (!hex) throw new Error(`not an opaque color: ${color}`);
+  const lin = (i: number) => {
+    const v = Number.parseInt(hex.slice(i, i + 2), 16) / 255;
+    return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  const [r, g, b] = [lin(1), lin(3), lin(5)];
+  const f = (t: number) => (t > 216 / 24389 ? Math.cbrt(t) : ((24389 / 27) * t + 16) / 116);
+  const x = f((0.4124 * r + 0.3576 * g + 0.1805 * b) / 0.95047);
+  const y = f(0.2126 * r + 0.7152 * g + 0.0722 * b);
+  const z = f((0.0193 * r + 0.1192 * g + 0.9505 * b) / 1.08883);
+  return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+}
+
+function deltaE(a: string, b: string): number {
+  const [p, q] = [toLab(a), toLab(b)];
+  return Math.hypot(p[0] - q[0], p[1] - q[1], p[2] - q[2]);
+}
+
+function measure(scheme: Scheme, disabledStyle: string, props: Partial<ButtonProps>) {
+  houseRender(
+    <>
+      <Button {...props}>Enabled</Button>
+      <Button {...props} disabled>
+        Disabled
+      </Button>
+    </>,
+    scheme,
+    disabledStyle,
+  );
+  const enabledLabel = screen.getByText("Enabled");
+  const disabledLabel = screen.getByText("Disabled");
+  const enabled = enabledLabel.closest("[role=button]") as Element;
+  const disabled = disabledLabel.closest("[role=button]") as Element;
+  const enabledFill = painted(enabled, "_bg-", "background-color", scheme);
+  const disabledFill = painted(disabled, "_bg-", "background-color", scheme);
+  const labelInk = painted(disabledLabel, "_col-", "color", scheme);
+  return {
+    enabledFill,
+    disabledFill,
+    labelInk,
+    fillDeltaE: deltaE(enabledFill, disabledFill),
+    opacityDelta: opacityOf(enabled) - opacityOf(disabled),
+    labelContrast: measureContrast({ foreground: labelInk, background: disabledFill }).ratio,
+  };
+}
+
+describe("MPO-433 LC-40: a disabled intent Button differs from its enabled twin", () => {
+  for (const scheme of SCHEMES) {
+    for (const disabledStyle of DISABLED_STYLES) {
+      for (const variant of VARIANTS) {
+        it(`${scheme} ${disabledStyle} ${variant.name}: fill ΔE ≥ ${MIN_FILL_DELTA_E} or opacity delta ≥ ${MIN_OPACITY_DELTA}`, () => {
+          const m = measure(scheme, disabledStyle, variant.props);
+          const detail = `${m.enabledFill} -> ${m.disabledFill}: ΔE ${m.fillDeltaE.toFixed(1)}, opacity delta ${m.opacityDelta}`;
+          expect(
+            m.fillDeltaE >= MIN_FILL_DELTA_E || m.opacityDelta >= MIN_OPACITY_DELTA,
+            detail,
+          ).toBe(true);
+        });
+      }
+    }
+  }
+});
+
+describe("MPO-433 LC-40: keepLabel keeps the disabled label ≥ 4.5:1 on its own fill", () => {
+  for (const scheme of SCHEMES) {
+    for (const variant of VARIANTS) {
+      it(`${scheme} ${variant.name}`, () => {
+        const m = measure(scheme, "keepLabel", variant.props);
+        expect(
+          m.labelContrast,
+          `${m.labelInk} on ${m.disabledFill}: ${m.labelContrast.toFixed(2)}:1`,
+        ).toBeGreaterThanOrEqual(aaTextContrastRatio);
+      });
+    }
+  }
+});

package/src/Button/Button.outlinedAccentInk.spec.tsx

@@ -0,0 +1,152 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * MPO-447: under fillStyle outlined a `theme="accent"` Button (the portal's
+ * Sign in) sits on its host with no fill, and its label kept the accent
+ * sub-theme's on-fill `$color`, 1.06:1 on the light page. The accent slot is
+ * solid by palette shape (defaults/accent.ts), so no step of its own ramp
+ * reads on the page in both schemes; MPO-40 re-anchored only the solid
+ * intents (error, warning, success) to `$color11`. The label and the frame's
+ * `color` (currentColor glyphs) now take the host's readable accent ink.
+ *
+ * The `accent` intent stays filled under an outlined preset (SB-E-01,
+ * intents.ts), so the knob channel only reaches `theme="accent"`; an explicit
+ * `outlined` prop reaches both.
+ *
+ * jsdom cascades no Tamagui CSS, so this reads what the nodes ask for: the
+ * atomic `_col-` class, the injected rule behind it, and for a `var(--token)`
+ * rule the house theme table of the scope that paints it.
+ */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import {
+  aaTextContrastRatio,
+  createDefaultThemeConfig,
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  measureContrast,
+  Preset,
+} from "@multiplatform.one/theme";
+import type { ReactElement } from "react";
+import { TamaguiProvider, YStack } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button, type ButtonProps } from "./index";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const SCHEMES = ["light", "dark"] as const;
+type Scheme = (typeof SCHEMES)[number];
+const HOST_SURFACES = ["background", "color1", "color2"] as const;
+const CASES: { name: string; props: Partial<ButtonProps>; knob: boolean }[] = [
+  {
+    name: 'theme="accent" under the fillStyle outlined knob',
+    props: { theme: "accent" },
+    knob: true,
+  },
+  { name: 'theme="accent" outlined', props: { theme: "accent", outlined: true }, knob: false },
+  { name: "accent outlined", props: { accent: true, outlined: true }, knob: false },
+];
+
+function houseRender(ui: ReactElement, scheme: Scheme, knob: boolean) {
+  const body = <YStack backgroundColor="$background">{ui}</YStack>;
+  return render(
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {knob ? <Preset overrides={{ fillStyle: "outlined" }}>{body}</Preset> : body}
+    </TamaguiProvider>,
+  );
+}
+
+function injectedRuleValue(className: string, property: string): string {
+  for (const sheet of Array.from(document.styleSheets)) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      if (!(rule instanceof CSSStyleRule)) continue;
+      if (!rule.selectorText.endsWith(`.${className}`)) continue;
+      const value = rule.style.getPropertyValue(property);
+      if (value) return value.trim();
+    }
+  }
+  throw new Error(`no injected ${property} rule for .${className}`);
+}
+
+/** The innermost Tamagui theme scope painting `el`, e.g. `accent_Button`. */
+function scopeOf(el: Element): string | null {
+  for (let node: Element | null = el; node; node = node.parentElement) {
+    const names = Array.from(node.classList)
+      .filter((c) => c.startsWith("t_") && c !== "t_sub_theme")
+      .map((c) => c.slice(2))
+      .filter((c) => c !== "light" && c !== "dark");
+    if (names.length) return names.sort((a, b) => b.length - a.length)[0];
+  }
+  return null;
+}
+
+function resolveInScope(value: string, scheme: Scheme, scope: string | null): string {
+  const token = value.match(/^var\(--([\w-]+)\)$/)?.[1];
+  if (!token) return value;
+  const chain: string[] = [];
+  if (scope) {
+    const parts = scope.split("_");
+    for (let i = parts.length; i > 0; i--) chain.push(`${scheme}_${parts.slice(0, i).join("_")}`);
+  }
+  chain.push(scheme);
+  for (const name of chain) {
+    const hit = houseThemes[name]?.[token];
+    if (hit) return hit;
+  }
+  throw new Error(`--${token} resolves in none of ${chain.join(", ")}`);
+}
+
+function paintedColor(el: Element, scheme: Scheme): string {
+  const cls = Array.from(el.classList).find(
+    (c) => c.startsWith("_col-") && !/^_col-0(hover|active|focus|press)/.test(c),
+  );
+  if (!cls) throw new Error(`${el.tagName} carries no _col- class`);
+  return resolveInScope(injectedRuleValue(cls, "color"), scheme, scopeOf(el));
+}
+
+describe("MPO-447: an outlined accent Button's label reads on its host", () => {
+  for (const scheme of SCHEMES) {
+    for (const c of CASES) {
+      it(`${scheme} ${c.name}: label and glyph ink clear 4.5:1 on every host surface`, () => {
+        houseRender(<Button {...c.props}>Sign in</Button>, scheme, c.knob);
+        const label = screen.getByText("Sign in");
+        const frame = label.closest("[role=button]") as Element;
+        for (const [part, el] of [
+          ["label", label],
+          ["frame", frame],
+        ] as const) {
+          const ink = paintedColor(el, scheme);
+          for (const surface of HOST_SURFACES) {
+            const ground = houseThemes[scheme][surface];
+            const ratio = measureContrast({ foreground: ink, background: ground }).ratio;
+            expect(
+              ratio,
+              `${part} ${ink} on ${scheme}.${surface} ${ground}: ${ratio.toFixed(2)}:1`,
+            ).toBeGreaterThanOrEqual(aaTextContrastRatio);
+          }
+        }
+      });
+    }
+  }
+
+  for (const scheme of SCHEMES) {
+    for (const c of [
+      { name: 'theme="accent"', props: { theme: "accent" }, knob: false },
+      { name: "accent under the fillStyle outlined knob", props: { accent: true }, knob: true },
+    ] as const) {
+      it(`${scheme}: a filled ${c.name} Button keeps its on-fill label`, () => {
+        houseRender(<Button {...c.props}>Filled</Button>, scheme, c.knob);
+        expect(screen.getByText("Filled").className).toMatch(/_col-color\b/);
+      });
+    }
+  }
+});