@multiplatform.one/forms 7.88.5 → 7.88.7

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

@@ -16,7 +16,7 @@
  * house theme table of the scope that paints it.
  */
 
-import { cleanup, render, screen } from "@testing-library/react";
+import { act, cleanup, render, screen } from "@testing-library/react";
 import {
   aaTextContrastRatio,
   createDefaultThemeConfig,
@@ -24,11 +24,12 @@ import {
   defaultAccentTheme,
   defaultBaseTheme,
   defaultBuilderOptions,
+  type Knobs,
   measureContrast,
   normalizeToHex,
   Preset,
 } from "@multiplatform.one/theme";
-import type { ReactElement } from "react";
+import { type ReactElement, type ReactNode, useState } from "react";
 import { TamaguiProvider, YStack } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
 import { Button, type ButtonProps } from "./index";
@@ -118,7 +119,19 @@ function painted(el: Element, prefix: string, property: string, scheme: Scheme):
     (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));
+  const value = injectedRuleValue(cls, property);
+  const alias = value.match(/^var\((--[\w-]+)\)$/)?.[1];
+  const declarer = alias ? declaredOn(el, alias) : null;
+  return alias && declarer
+    ? resolveInScope(declarer.style.getPropertyValue(alias).trim(), scheme, scopeOf(declarer))
+    : resolveInScope(value, scheme, scopeOf(el));
+}
+
+function declaredOn(el: Element, property: string): HTMLElement | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.style.getPropertyValue(property)) return node;
+  }
+  return null;
 }
 
 function opacityOf(el: Element): number {
@@ -204,3 +217,216 @@ describe("MPO-433 LC-40: keepLabel keeps the disabled label ≥ 4.5:1 on its own
     }
   }
 });
+
+let flipScheme: (scheme: Scheme) => void = () => {};
+
+function SchemeRoot({ initial, children }: { initial: Scheme; children: ReactNode }) {
+  const [scheme, setScheme] = useState<Scheme>(initial);
+  flipScheme = setScheme;
+  return (
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {children}
+    </TamaguiProvider>
+  );
+}
+
+function schemeOf(el: Element): Scheme | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.classList.contains("t_dark")) return "dark";
+    if (node.classList.contains("t_light")) return "light";
+  }
+  return null;
+}
+
+function disabledPaint(scheme: Scheme) {
+  const label = screen.getByText("Disabled");
+  const frame = label.closest("[role=button]") as Element;
+  return {
+    scheme: schemeOf(frame),
+    fill: painted(frame, "_bg-", "background-color", scheme),
+    border: painted(frame, "_btc-", "border-top-color", scheme),
+    ink: painted(label, "_col-", "color", scheme),
+  };
+}
+
+const KNOB_SPACE = {
+  fillStyle: ["filled", "outlined"],
+  borderRadius: ["none", "small", "medium", "large", "full"],
+  borderWidth: ["none", "small", "medium", "large"],
+  elevation: ["none", "small", "medium", "large"],
+  textAccent: ["low", "medium", "high"],
+} as const;
+
+function knobFuzz(seed: number, count: number): Partial<Knobs>[] {
+  let state = seed;
+  const next = () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let t = Math.imul(state ^ (state >>> 15), 1 | state);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+  return Array.from(
+    { length: count },
+    () =>
+      ({
+        disabledStyle: "keepLabel",
+        ...Object.fromEntries(
+          Object.entries(KNOB_SPACE).map(([knob, values]) => [
+            knob,
+            values[Math.floor(next() * values.length)],
+          ]),
+        ),
+      }) as Partial<Knobs>,
+  );
+}
+
+const KNOB_COMBOS: Partial<Knobs>[] = [
+  { disabledStyle: "keepLabel" },
+  { disabledStyle: "dimWhole" },
+  ...knobFuzz(9578, 3),
+];
+
+const SOLID_PALETTE = VARIANTS.filter((v) => v.name === "accent" || v.name === 'theme="accent"');
+
+function swapSchemeClass(from: Scheme, to: Scheme) {
+  for (const el of Array.from(document.querySelectorAll(`.t_${from}`))) {
+    el.classList.replace(`t_${from}`, `t_${to}`);
+  }
+}
+
+describe("FZ-9578 LC-40: a disabled solid-palette Button follows a scheme flip with no prop change", () => {
+  const FLIPS = [
+    ["light", "dark"],
+    ["dark", "light"],
+  ] as const;
+  for (const [from, to] of FLIPS) {
+    for (const variant of SOLID_PALETTE) {
+      for (const knobs of KNOB_COMBOS) {
+        const button = (
+          <Preset overrides={knobs}>
+            <YStack backgroundColor="$background">
+              <Button {...variant.props} disabled>
+                Disabled
+              </Button>
+            </YStack>
+          </Preset>
+        );
+        const label = `${from} -> ${to} ${variant.name} ${JSON.stringify(knobs)}`;
+
+        it(`${label}: a flip that never re-renders it paints what a fresh ${to} mount paints`, () => {
+          render(<SchemeRoot initial={to}>{button}</SchemeRoot>);
+          const fresh = disabledPaint(to);
+          cleanup();
+          render(<SchemeRoot initial={from}>{button}</SchemeRoot>);
+          swapSchemeClass(from, to);
+          try {
+            expect(disabledPaint(to)).toEqual(fresh);
+          } finally {
+            swapSchemeClass(to, from);
+          }
+        });
+
+        it(`${label}: a provider flip paints what a fresh ${to} mount paints`, () => {
+          render(<SchemeRoot initial={to}>{button}</SchemeRoot>);
+          const fresh = disabledPaint(to);
+          cleanup();
+          render(<SchemeRoot initial={from}>{button}</SchemeRoot>);
+          act(() => flipScheme(to));
+          expect(disabledPaint(to)).toEqual(fresh);
+        });
+      }
+    }
+  }
+});
+
+describe("FZ-9578: a focused solid-palette Button keeps its node and focus when it turns disabled", () => {
+  for (const variant of SOLID_PALETTE) {
+    it(variant.name, () => {
+      const view = (disabled: boolean) => (
+        <TamaguiProvider config={houseConfig.tamagui} defaultTheme="light" disableInjectCSS>
+          <Preset overrides={{ disabledStyle: "keepLabel" }}>
+            <YStack backgroundColor="$background">
+              <Button {...variant.props} disabled={disabled}>
+                Go
+              </Button>
+            </YStack>
+          </Preset>
+        </TamaguiProvider>
+      );
+      const { rerender } = render(view(false));
+      const frame = screen.getByText("Go").closest("[role=button]") as HTMLElement;
+      frame.focus();
+      rerender(view(true));
+      expect(screen.getByText("Go").closest("[role=button]")).toBe(frame);
+      expect(document.activeElement).toBe(frame);
+    });
+  }
+});
+
+const WASH_KNOBS: Partial<Knobs> = {
+  disabledStyle: "keepLabel",
+  fillStyle: "filled",
+  borderWidth: "medium",
+};
+
+function washedButton(props: Partial<ButtonProps>, disabled: boolean, text: string) {
+  return (
+    <Preset overrides={WASH_KNOBS}>
+      <YStack backgroundColor="$background">
+        <Button {...props} disabled={disabled}>
+          {text}
+        </Button>
+      </YStack>
+    </Preset>
+  );
+}
+
+function hostRecipe(scheme: Scheme) {
+  const host = houseThemes[scheme] ?? {};
+  return { scheme, fill: host.color3, border: host.color6, ink: host.color11 };
+}
+
+describe("FZ-9578 LC-40: a disabled solid-palette Button washes on the host scope's $color3, $color6 and $color11", () => {
+  for (const scheme of SCHEMES) {
+    const from: Scheme = scheme === "light" ? "dark" : "light";
+    for (const variant of SOLID_PALETTE) {
+      it(`${scheme} ${variant.name}: a fresh mount`, () => {
+        render(
+          <SchemeRoot initial={scheme}>{washedButton(variant.props, true, "Disabled")}</SchemeRoot>,
+        );
+        expect(hostRecipe(scheme).fill).toMatch(/^#|^rgb|^hsl/);
+        expect(disabledPaint(scheme)).toEqual(hostRecipe(scheme));
+      });
+
+      it(`${from} -> ${scheme} ${variant.name}: a flip that never re-renders it`, () => {
+        render(
+          <SchemeRoot initial={from}>{washedButton(variant.props, true, "Disabled")}</SchemeRoot>,
+        );
+        swapSchemeClass(from, scheme);
+        try {
+          expect(disabledPaint(scheme)).toEqual(hostRecipe(scheme));
+        } finally {
+          swapSchemeClass(scheme, from);
+        }
+      });
+    }
+  }
+});
+
+describe("FZ-9578: the span that declares the host wash aliases is display: contents", () => {
+  for (const scheme of SCHEMES) {
+    for (const variant of SOLID_PALETTE) {
+      for (const disabled of [false, true]) {
+        it(`${scheme} ${variant.name} ${disabled ? "disabled" : "enabled"}`, () => {
+          render(
+            <SchemeRoot initial={scheme}>{washedButton(variant.props, disabled, "Go")}</SchemeRoot>,
+          );
+          const frame = screen.getByText("Go").closest("[role=button]") as Element;
+          const span = declaredOn(frame, "--mp-host-color3");
+          expect(span?.tagName).toBe("SPAN");
+          expect((span as HTMLElement).style.display).toBe("contents");
+        });
+      }
+    }
+  }
+});

package/src/Button/Button.nativeInk.spec.tsx

@@ -1,5 +1,5 @@
 import { cleanup, render, screen } from "@testing-library/react";
-import { createDefaultThemeConfig } from "@multiplatform.one/theme";
+import { createDefaultThemeConfig, Preset } from "@multiplatform.one/theme";
 import { memo } from "react";
 import { getVariableValue, TamaguiProvider, useTheme } from "tamagui";
 import { afterEach, describe, expect, it, vi } from "vitest";
@@ -114,3 +114,63 @@ describe("native Button icon ink", () => {
     expect(screen.getByTestId("icon").dataset.color).toBe("");
   });
 });
+
+function HostProbe() {
+  const theme = useTheme();
+  return (
+    <span
+      data-testid="host"
+      data-wash={String(getVariableValue(theme.color3))}
+      data-ink={String(getVariableValue(theme.color11))}
+    />
+  );
+}
+
+function injectedRuleValue(className: string, property: string): string | undefined {
+  for (const sheet of Array.from(document.styleSheets)) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      const style = (rule as CSSStyleRule).style;
+      if (!(rule as CSSStyleRule).selectorText?.endsWith(`.${className}`) || !style) continue;
+      const value = style.getPropertyValue(property);
+      if (value) return value.trim();
+    }
+  }
+  return undefined;
+}
+
+function frameFill(text: string): string | undefined {
+  const frame = screen.getByText(text).closest("[role=button]") as Element;
+  const cls = Array.from(frame.classList).find(
+    (c) => c.startsWith("_bg-") && !/^_bg-0(hover|active|focus|press)/.test(c),
+  );
+  return cls ? injectedRuleValue(cls, "background-color") : undefined;
+}
+
+describe("FZ-9578: a native disabled accent Button keeps the host scope's literal wash", () => {
+  it.each(["light", "dark"] as const)(
+    "%s paints the host $color3 and $color11 as literals, never a CSS variable",
+    (scheme) => {
+      render(
+        <TamaguiProvider config={config.tamagui} defaultTheme={scheme} disableInjectCSS>
+          <HostProbe />
+          <Preset overrides={{ disabledStyle: "keepLabel", fillStyle: "filled" }}>
+            <Button accent disabled icon={IconProbe}>
+              Save
+            </Button>
+            <Button theme="accent" disabled icon={IconProbe}>
+              Send
+            </Button>
+          </Preset>
+        </TamaguiProvider>,
+      );
+      const host = screen.getByTestId("host").dataset;
+      expect(host.ink).toMatch(/^#|^rgb|^hsl/);
+      for (const icon of screen.getAllByTestId("icon")) {
+        expect(icon.dataset.color).toBe(host.ink);
+      }
+      for (const text of ["Save", "Send"]) {
+        expect(frameFill(text)).toBe(host.wash);
+      }
+    },
+  );
+});

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

@@ -110,7 +110,19 @@ function paintedColor(el: Element, scheme: Scheme): string {
     (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));
+  const value = injectedRuleValue(cls, "color");
+  const alias = value.match(/^var\((--[\w-]+)\)$/)?.[1];
+  const declarer = alias ? declaredOn(el, alias) : null;
+  return alias && declarer
+    ? resolveInScope(declarer.style.getPropertyValue(alias).trim(), scheme, scopeOf(declarer))
+    : resolveInScope(value, scheme, scopeOf(el));
+}
+
+function declaredOn(el: Element, property: string): HTMLElement | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.style.getPropertyValue(property)) return node;
+  }
+  return null;
 }
 
 describe("MPO-447: an outlined accent Button's label reads on its host", () => {

package/src/Button/Button.outlinedInkFlip.spec.tsx

@@ -0,0 +1,305 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * FZ-9608: an outlined solid-palette Button (the `accent` prop or
+ * `theme="accent"`) inks its label on the host (MPO-447). That ink was a
+ * literal from the scheme current at render: `useAccentOnSurface()` under the
+ * default textAccent, `hostScoped()` of `$color11` under low and medium. A
+ * flip that moves only the root's t_light/t_dark class, which never
+ * re-renders the Button, left the old scheme's ink on the new page.
+ *
+ * jsdom cascades no Tamagui CSS, so this reads what each node asks for: the
+ * atomic class, the injected rule behind it, a `--mp-host-*` alias on the
+ * ancestor that declares it, and for a `var(--token)` rule the house theme
+ * table of the scope that paints it.
+ */
+
+import { act, cleanup, render, screen } from "@testing-library/react";
+import {
+  createDefaultThemeConfig,
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  type Knobs,
+  Preset,
+} from "@multiplatform.one/theme";
+import { type ReactElement, type ReactNode, useState } 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 FLIPS = [
+  ["light", "dark"],
+  ["dark", "light"],
+] as const;
+type Scheme = (typeof FLIPS)[number][number];
+
+const VARIANTS: { name: string; props: Partial<ButtonProps> }[] = [
+  { name: 'theme="accent" outlined', props: { theme: "accent", outlined: true } },
+  { name: "accent outlined", props: { accent: true, outlined: true } },
+];
+const TEXT_ACCENTS = ["low", "medium", "high"] as const;
+const STATES = [
+  { name: "enabled", disabled: false },
+  { name: "dimWhole disabled", disabled: true },
+] as const;
+
+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}`);
+}
+
+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(", ")}`);
+}
+
+function declaredOn(el: Element, property: string): HTMLElement | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.style.getPropertyValue(property)) return node;
+  }
+  return null;
+}
+
+/** What `el` paints for one atomic property, or null when it asks for none. */
+function painted(el: Element, prefix: string, property: string, scheme: Scheme): string | null {
+  const cls = Array.from(el.classList).find(
+    (c) => c.startsWith(prefix) && !/^_[a-z]+-0(hover|active|focus|press)/.test(c),
+  );
+  if (!cls) return null;
+  const value = injectedRuleValue(cls, property);
+  const alias = value.match(/^var\((--[\w-]+)\)$/)?.[1];
+  const declarer = alias ? declaredOn(el, alias) : null;
+  return alias && declarer
+    ? resolveInScope(declarer.style.getPropertyValue(alias).trim(), scheme, scopeOf(declarer))
+    : resolveInScope(value, scheme, scopeOf(el));
+}
+
+function schemeOf(el: Element): Scheme | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.classList.contains("t_dark")) return "dark";
+    if (node.classList.contains("t_light")) return "light";
+  }
+  return null;
+}
+
+function paintOf(text: string, scheme: Scheme) {
+  const label = screen.getByText(text);
+  const frame = label.closest("[role=button]") as Element;
+  return {
+    scheme: schemeOf(frame),
+    ink: painted(label, "_col-", "color", scheme),
+    frameInk: painted(frame, "_col-", "color", scheme),
+    fill: painted(frame, "_bg-", "background-color", scheme),
+    border: painted(frame, "_btc-", "border-top-color", scheme),
+  };
+}
+
+let flipScheme: (scheme: Scheme) => void = () => {};
+
+function SchemeRoot({ initial, children }: { initial: Scheme; children: ReactNode }) {
+  const [scheme, setScheme] = useState<Scheme>(initial);
+  flipScheme = setScheme;
+  return (
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {children}
+    </TamaguiProvider>
+  );
+}
+
+function swapSchemeClass(from: Scheme, to: Scheme) {
+  for (const el of Array.from(document.querySelectorAll(`.t_${from}`))) {
+    el.classList.replace(`t_${from}`, `t_${to}`);
+  }
+}
+
+function onHost(knobs: Partial<Knobs>, button: ReactElement) {
+  return (
+    <Preset overrides={knobs}>
+      <YStack backgroundColor="$background">{button}</YStack>
+    </Preset>
+  );
+}
+
+function expectFlipFollows(from: Scheme, to: Scheme, tree: ReactElement, text: string) {
+  render(<SchemeRoot initial={to}>{tree}</SchemeRoot>);
+  const fresh = paintOf(text, to);
+  cleanup();
+  render(<SchemeRoot initial={from}>{tree}</SchemeRoot>);
+  swapSchemeClass(from, to);
+  try {
+    expect(paintOf(text, to)).toEqual(fresh);
+  } finally {
+    swapSchemeClass(to, from);
+  }
+}
+
+function expectProviderFlipFollows(from: Scheme, to: Scheme, tree: ReactElement, text: string) {
+  render(<SchemeRoot initial={to}>{tree}</SchemeRoot>);
+  const fresh = paintOf(text, to);
+  cleanup();
+  render(<SchemeRoot initial={from}>{tree}</SchemeRoot>);
+  act(() => flipScheme(to));
+  expect(paintOf(text, to)).toEqual(fresh);
+}
+
+describe("FZ-9608 MPO-447: an outlined solid-palette Button's ink follows a scheme flip", () => {
+  for (const [from, to] of FLIPS) {
+    for (const variant of VARIANTS) {
+      for (const textAccent of TEXT_ACCENTS) {
+        for (const state of STATES) {
+          const tree = onHost(
+            { textAccent, disabledStyle: "dimWhole" },
+            <Button {...variant.props} disabled={state.disabled}>
+              Sign in
+            </Button>,
+          );
+          const label = `${from} -> ${to} ${variant.name} textAccent ${textAccent} ${state.name}`;
+
+          it(`${label}: a flip that never re-renders it paints what a fresh ${to} mount paints`, () => {
+            expectFlipFollows(from, to, tree, "Sign in");
+          });
+
+          it(`${label}: a provider flip paints what a fresh ${to} mount paints`, () => {
+            expectProviderFlipFollows(from, to, tree, "Sign in");
+          });
+        }
+      }
+    }
+  }
+});
+
+describe("FZ-9608 MPO-447: the default textAccent inks the label with the host's accentOnSurface", () => {
+  for (const [scheme] of FLIPS) {
+    for (const variant of VARIANTS) {
+      it(`${scheme} ${variant.name}`, () => {
+        render(
+          <SchemeRoot initial={scheme}>
+            {onHost({ textAccent: "high" }, <Button {...variant.props}>Sign in</Button>)}
+          </SchemeRoot>,
+        );
+        const host = houseThemes[scheme]?.accentOnSurface;
+        expect(host).toMatch(/^#|^rgb|^hsl/);
+        const paint = paintOf("Sign in", scheme);
+        expect(paint.ink).toBe(host);
+        expect(paint.frameInk).toBe(host);
+      });
+    }
+  }
+});
+
+const KNOB_SPACE = {
+  fillStyle: ["filled", "outlined"],
+  borderRadius: ["none", "small", "medium", "large", "full"],
+  borderWidth: ["none", "small", "medium", "large"],
+  elevation: ["none", "small", "medium", "large"],
+  textAccent: ["low", "medium", "high"],
+  disabledStyle: ["keepLabel", "dimWhole"],
+} as const;
+
+function knobFuzz(seed: number, count: number): Partial<Knobs>[] {
+  let state = seed;
+  const next = () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let t = Math.imul(state ^ (state >>> 15), 1 | state);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+  return Array.from(
+    { length: count },
+    () =>
+      Object.fromEntries(
+        Object.entries(KNOB_SPACE).map(([knob, values]) => [
+          knob,
+          values[Math.floor(next() * values.length)],
+        ]),
+      ) as Partial<Knobs>,
+  );
+}
+
+describe('FZ-9608: seeded knob draws of a theme="accent" Button follow a flip with no re-render', () => {
+  for (const knobs of knobFuzz(9608, 3)) {
+    for (const [from, to] of FLIPS) {
+      for (const state of STATES) {
+        it(`${from} -> ${to} ${state.name.split(" ").pop()} ${JSON.stringify(knobs)}`, () => {
+          expectFlipFollows(
+            from,
+            to,
+            onHost(
+              knobs,
+              <Button theme="accent" disabled={state.disabled}>
+                Sign in
+              </Button>,
+            ),
+            "Sign in",
+          );
+        });
+      }
+    }
+  }
+});
+
+describe("FZ-9608: a focused outlined solid-palette Button keeps its node and focus", () => {
+  for (const variant of VARIANTS) {
+    it(`${variant.name}: across a scheme flip and when it turns disabled`, () => {
+      const view = (disabled: boolean) => (
+        <SchemeRoot initial="light">
+          {onHost(
+            { disabledStyle: "dimWhole" },
+            <Button {...variant.props} disabled={disabled}>
+              Go
+            </Button>,
+          )}
+        </SchemeRoot>
+      );
+      const { rerender } = render(view(false));
+      const frame = screen.getByText("Go").closest("[role=button]") as HTMLElement;
+      frame.focus();
+      act(() => flipScheme("dark"));
+      expect(screen.getByText("Go").closest("[role=button]")).toBe(frame);
+      expect(document.activeElement).toBe(frame);
+      rerender(view(true));
+      expect(screen.getByText("Go").closest("[role=button]")).toBe(frame);
+      expect(document.activeElement).toBe(frame);
+    });
+  }
+});