@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/AdaptivePopup/index.tsx

@@ -1,3 +1,5 @@
+import { transitionProps } from "@multiplatform.one/theme";
+import { DialogContent, DialogOverlay } from "@multiplatform.one/theme";
 import { useCallback, useRef, type ReactNode } from "react";
 import {
   OVERLAY_BREAKPOINT,
@@ -17,11 +19,7 @@ import {
 } from "tamagui";
 import { X } from "@tamagui/lucide-icons-2";
 import { formCommonColors } from "../shared/colorRamps";
-import {
-  DialogShowFocus,
-  useReturnFocusOnClose,
-  useSheetModalFocus,
-} from "../shared/focusManagement";
+import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
 import { t } from "../shared/t";
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
 import { zIndex } from "../shared/zIndex";
@@ -125,7 +123,7 @@ const overlayFrameFocus = {
  * of the glyph the user reads as the control.
  */
 function PopupCloseButton({ onPress }: { onPress: () => void }) {
-  const { knobProps } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs({ painted: false });
   const { px, hitSlop, ...box } = knobProps.nestedControl;
   const glyph = Math.max(12, Math.round(px * 0.5));
   const onKeyDown = (e: { key?: string; preventDefault?: () => void }) => {
@@ -186,8 +184,8 @@ export function AdaptivePopup({
   footer,
   disabled,
 }: AdaptivePopupProps) {
-  const { knobProps } = useResolvedKnobs();
-  const { knobProps: nestedKnobs } = useResolvedKnobs({ compact: true });
+  const { knobProps } = useResolvedKnobs({ painted: false });
+  const { knobProps: nestedKnobs } = useResolvedKnobs();
   const media = useMedia();
   const viewportGtSm = useViewportGtSm();
   // `media.sm` = v5 minWidth 640 (`gtSm` died with the v5 media map,
@@ -308,11 +306,11 @@ export function AdaptivePopup({
           snapPointsMode={size === "fullscreen" ? "percent" : "fit"}
           snapPoints={size === "fullscreen" ? [92] : undefined}
           zIndex={zIndex.sheet}
-          transition={knobProps.transition}
+          {...transitionProps(knobProps.motion.slide)}
         >
           <Sheet.Overlay
             backgroundColor="$shadow6"
-            transition={knobProps.transition}
+            {...transitionProps(knobProps.motion.scrim)}
             enterStyle={{ opacity: 0 }}
             exitStyle={{ opacity: 0 }}
           />
@@ -337,7 +335,7 @@ export function AdaptivePopup({
             borderBottomRightRadius={0}
             {...overlayFrameFocus}
             {...knobProps.panelPadding}
-            transition={knobProps.transition}
+            {...transitionProps(knobProps.motion.overlay)}
           >
             {body}
           </Sheet.Frame>
@@ -372,16 +370,14 @@ export function AdaptivePopup({
         )}
 
         <Dialog.Portal zIndex={zIndex.dropdown}>
-          <Dialog.Overlay
+          <DialogOverlay
             key="overlay"
-            backgroundColor="$shadow6"
-            transition={knobProps.transition}
+            {...transitionProps(knobProps.motion.scrim)}
             enterStyle={{ opacity: 0 }}
             exitStyle={{ opacity: 0 }}
           />
-          <Dialog.Content
+          <DialogContent
             key="content"
-            unstyled
             position="fixed"
             top={0}
             bottom={0}
@@ -396,23 +392,16 @@ export function AdaptivePopup({
             tabIndex={-1}
             data-testid="adaptive-popup-surface"
             data-adaptive-popup-mode="drawer"
-            data-popup-ground="$background"
+            data-popup-ground={knobProps.elevatedSurface.backgroundColor}
             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}
-            backgroundColor="$background"
-            {...overlayFrameFocus}
-            transition={knobProps.transition}
-            animateOnly={["transform", "opacity"]}
+            {...transitionProps(knobProps.motion.slide)}
             enterStyle={{ opacity: 0, x: slideFromEnd }}
             exitStyle={{ opacity: 0, x: slideFromEnd }}
-            {...knobProps.panelPadding}
             onOpenAutoFocus={focusFirstField}
             onCloseAutoFocus={(event) => {
               // LC-48: Dialog.Trigger is the wrapper View (tabIndex -1), not
@@ -422,8 +411,7 @@ export function AdaptivePopup({
             }}
           >
             {body}
-            <DialogShowFocus onOpenAutoFocus={focusFirstField} />
-          </Dialog.Content>
+          </DialogContent>
         </Dialog.Portal>
       </Dialog>
     );
@@ -438,35 +426,25 @@ export function AdaptivePopup({
       )}
 
       <Dialog.Portal zIndex={zIndex.dropdown}>
-        <Dialog.Overlay
+        <DialogOverlay
           key="overlay"
-          backgroundColor="$shadow6"
-          transition={knobProps.transition}
+          {...transitionProps(knobProps.motion.scrim)}
           enterStyle={{ opacity: 0 }}
           exitStyle={{ opacity: 0 }}
         />
-        <Dialog.Content
+        <DialogContent
           key="content"
-          // Dialog.Content's styled base bakes in `elevate: true` (plus its
-          // own bg/border/radius/padding); `unstyled` drops that so the
-          // elevatedSurface knob recipe (SF-OVERLAY/E-OVERLAY) is the only
-          // surface source and elevation `none` actually flattens.
-          unstyled
           position="relative"
           pointerEvents="auto"
           tabIndex={-1}
           data-testid="adaptive-popup-surface"
           data-adaptive-popup-mode="dialog"
-          {...knobProps.elevatedSurface}
-          {...overlayFrameFocus}
-          transition={knobProps.transition}
-          animateOnly={["transform", "opacity"]}
+          {...transitionProps(knobProps.motion.overlay)}
           enterStyle={{ opacity: 0, scale: 0.96, y: -10 }}
           exitStyle={{ opacity: 0, scale: 0.96, y: -10 }}
           maxWidth={maxWidth}
           maxHeight={maxHeight}
           width="90vw"
-          {...knobProps.panelPadding}
           onOpenAutoFocus={focusFirstField}
           onCloseAutoFocus={(event) => {
             // LC-48: Dialog.Trigger is the wrapper View (tabIndex -1), not
@@ -476,8 +454,7 @@ export function AdaptivePopup({
           }}
         >
           {body}
-          <DialogShowFocus onOpenAutoFocus={focusFirstField} />
-        </Dialog.Content>
+        </DialogContent>
       </Dialog.Portal>
     </Dialog>
   );

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

@@ -21,9 +21,13 @@ import {
   defaultBaseTheme,
   defaultBuilderOptions,
   measureContrast,
+  getPresetNames,
+  getPreset,
+  Preset,
 } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it } from "vitest";
-import { TamaguiProvider, YStack } from "tamagui";
+import { getVariableValue, TamaguiProvider, YStack } from "tamagui";
+import { themeOptions } from "../../../../packages/themes/options";
 import { Button, type ButtonProps } from "./index";
 
 afterEach(cleanup);
@@ -132,3 +136,58 @@ describe("Button disabledReason ink (MPO-431 / T-HELPER)", () => {
     }
   }
 });
+
+const presetConfig = createDefaultThemeConfig(themeOptions);
+const presetNames = ["default", ...getPresetNames()];
+const variants: { name: string; themeName?: string; props: Partial<ButtonProps> }[] = [
+  { name: "plain", props: {} },
+  { name: "primary", props: { actionRole: "primary" } },
+  ...CHANNELS,
+];
+
+describe("FZ-7624 disabled reasons across registered presets", () => {
+  for (const presetName of presetNames) {
+    const hostTheme = getPreset(presetName)?.theme;
+    for (const scheme of SCHEMES) {
+      const hostKey = hostTheme ? `${scheme}_${hostTheme}` : scheme;
+      for (const placement of PLACEMENTS) {
+        it.each(variants)(`${presetName} ${scheme} ${placement}: $name`, ({ props, themeName }) => {
+          render(
+            <TamaguiProvider config={presetConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+              <Preset preset={presetName} theme={hostTheme}>
+                <YStack backgroundColor="$background">
+                  <Button
+                    {...props}
+                    disabled
+                    disabledReason="Complete the draft"
+                    disabledReasonPlacement={placement}
+                  >
+                    Save
+                  </Button>
+                </YStack>
+              </Preset>
+            </TamaguiProvider>,
+          );
+          const reason = screen.getByText("Complete the draft");
+          const token = reason.className.match(/(?:^|\s)_col-(\w+)(?:\s|$)/)?.[1];
+          expect(token).toBeTruthy();
+          const reasonKey = scopeThemeKey(reason, scheme);
+          expect(reasonKey).toBe(hostKey);
+          const themes = presetConfig.tamagui.themes as Record<string, Record<string, unknown>>;
+          const ink = String(getVariableValue(themes[reasonKey][token!]));
+          for (const surface of [...PAGE_SURFACES, "color3"]) {
+            const ground = String(getVariableValue(themes[hostKey][surface]));
+            const label = `${presetName} ${hostKey}.${token} on ${surface}`;
+            expect(
+              measureContrast({ foreground: ink, background: ground, label }).ratio,
+              label,
+            ).toBeGreaterThanOrEqual(aaTextContrastRatio);
+          }
+          const button = screen.getByRole("button");
+          expect(button.getAttribute("aria-describedby")).toBe(reason.id);
+          if (themeName) expect(button.closest(`.t_${themeName}`)).toBeTruthy();
+        });
+      }
+    }
+  }
+});

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

@@ -58,7 +58,7 @@ describe("Button MPO-19 filled border is transparent", () => {
     const filled = frame();
     expect(filled.className).toMatch(/_btc-transparent\b/);
     expect(atoms(filled, "_btw-")).toEqual(["_btw-1px"]);
-    expect(filled.className).toMatch(/_h-44px\b/);
+    expect(filled.className).toMatch(/_h-40px\b/);
     cleanup();
 
     renderWithProviders(
@@ -69,6 +69,6 @@ describe("Button MPO-19 filled border is transparent", () => {
     const outlined = frame();
     expect(outlined.className).toMatch(/_btc-borderColor\b/);
     expect(atoms(outlined, "_btw-")).toEqual(["_btw-1px"]);
-    expect(outlined.className).toMatch(/_h-44px\b/);
+    expect(outlined.className).toMatch(/_h-40px\b/);
   });
 });

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

@@ -1,17 +1,10 @@
 /**
  * @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).
+ * MPO-40: outlined intent labels need `$color11` on the text node;
+ * solid labels need `$color` paired with their Button fill.
+ * jsdom cannot cascade Tamagui CSS, so DOM assertions inspect atomic
+ * classes and contrast assertions use the built theme values.
  */
 
 import { render, cleanup, screen } from "@testing-library/react";
@@ -39,15 +32,7 @@ const houseThemes = createThemesBuilder(
 
 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;
+const PAGE_SURFACES = ["background", "color1"] as const;
 
 function houseRender(ui: React.ReactElement, theme: "light" | "dark" = "light") {
   return render(
@@ -129,22 +114,21 @@ describe("Button MPO-40 outlined intent label ink", () => {
     }
   });
 
-  it("intent $color11 clears 4.5:1 on the white page surfaces in both schemes; on-fill $color never does", () => {
+  it("intent labels clear 4.5:1 on page surfaces when outlined and Button fills when solid", () => {
     for (const scheme of SCHEMES) {
       for (const intent of INTENTS) {
         const ink = houseThemes[`${scheme}_${intent}`].color11;
-        for (const surface of WHITE_PAGE_SURFACES) {
+        for (const surface of 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;
+        const button = houseThemes[`${scheme}_${intent}_Button`];
         expect(
-          pageRatio(onFill, ground, `${scheme}_${intent}_Button.color`),
-          `${scheme}_${intent}_Button.color is the on-fill foreground`,
-        ).toBeLessThan(2);
+          pageRatio(button.color, button.background, `${scheme}_${intent}_Button.color`),
+          `${scheme}_${intent}_Button.color on its solid fill`,
+        ).toBeGreaterThanOrEqual(aaTextContrastRatio);
       }
     }
   });
@@ -168,7 +152,7 @@ describe("Button MPO-40 outlined intent label ink", () => {
   // stepping the palette should break it rather than be re-baselined away.
   //
   // The palette stepped: `intentInkFloor` in theme/createThemes.ts darkens
-  // light yellow-11 (#9e6c00 -> #996900) and green-11 (#218358 -> #1c8257)
+  // light yellow-11 (#9e6c00 -> #986801) and green-11 (#218358 -> #1d8156)
   // by the smallest hue-holding amount that clears the floor here. So the
   // assertion is inverted rather than deleted — the ground and the exact
   // ratios stay pinned, because $color2 is the STRICTEST base surface and a
@@ -189,9 +173,9 @@ describe("Button MPO-40 outlined intent label ink", () => {
       Object.entries(measured).map(([intent, ratio]) => [intent, Math.round(ratio * 100) / 100]),
     );
     expect(displayed, `light.color2 is ${ground}`).toEqual({
-      error: 4.95,
-      warning: 4.56,
-      success: 4.55,
+      error: 4.87,
+      warning: 4.54,
+      success: 4.53,
     });
     for (const intent of INTENTS) {
       expect(measured[intent], `light_${intent} on light.color2`).toBeGreaterThanOrEqual(

package/src/Button/Button.lc18.spec.tsx

@@ -3,7 +3,7 @@
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Surface } from "@multiplatform.one/theme";
 import { cleanup, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 import { Button } from "./index";
@@ -100,19 +100,19 @@ describe("Button LC-18 KNOB-TOTALITY — borderRadius knob", () => {
 describe("Button LC-18 KNOB-TOTALITY — size and elevation fragments", () => {
   it("size knob drives the recipe height (not the Tamagui token box)", () => {
     renderWithProviders(
-      <Preset overrides={{ size: "small" }}>
+      <Surface size="$3">
         <Button>Save</Button>
-      </Preset>,
+      </Surface>,
     );
-    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("36");
+    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("32");
     cleanup();
 
     renderWithProviders(
-      <Preset overrides={{ size: "large" }}>
+      <Surface size="$5">
         <Button>Save</Button>
-      </Preset>,
+      </Surface>,
     );
-    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("52");
+    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("48");
   });
 
   it("elevation knob reaches the frame (was dropped: styled(View) had no elevation variant)", () => {

package/src/Button/Button.lc71.spec.tsx

@@ -4,80 +4,67 @@
 
 import { cleanup, fireEvent, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Surface } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { Button, buttonDensityFamily, buttonSizeRecipes, resolveButtonSizeRecipe } from "./index";
+import { Button, buttonSizeRecipes, resolveButtonSizeRecipe } from "./index";
 
 afterEach(cleanup);
 
 describe("Button size recipes", () => {
-  it("medium is the measured 44 / 18 / 14 / 16 / 9 (tamagui.dev $4 — MPO-13)", () => {
-    // Generated from recipeFamilies.control (LC-80): fontSize is the recipe's
-    // px number (md 14), no longer a drifted font token ("$3" = 13).
+  it("medium is 40 / 16 / 15 / 16 / 8 from the default scale", () => {
     expect(buttonSizeRecipes.$4).toEqual({
-      height: 44,
-      paddingHorizontal: 18,
-      fontSize: 14,
+      height: 40,
+      paddingHorizontal: 16,
+      fontSize: 15,
       iconSize: 16,
-      gap: 9,
+      gap: 8,
     });
-    expect(resolveButtonSizeRecipe("$true").height).toBe(44);
-    expect(resolveButtonSizeRecipe("$3").height).toBe(36);
-    expect(resolveButtonSizeRecipe("$5").height).toBe(52);
+    expect(resolveButtonSizeRecipe("$true").height).toBe(40);
+    expect(resolveButtonSizeRecipe("$3").height).toBe(32);
+    expect(resolveButtonSizeRecipe("$5").height).toBe(48);
   });
 
-  it("medium meets the 44 floor natively — no slop, no minHeight", () => {
+  it("medium paints 40 and restores the press floor with slop", () => {
     renderWithProviders(<Button>Save</Button>);
     const frame = screen.getByRole("button");
-    expect(frame.getAttribute("data-mp-button-height")).toBe("44");
-    expect(frame.getAttribute("data-mp-press-slop")).toBeNull();
+    expect(frame.getAttribute("data-mp-button-height")).toBe("40");
+    expect(frame.getAttribute("data-mp-press-slop")).toBe("2");
     expect((frame as HTMLElement).style.minHeight).not.toBe("44px");
   });
 
   it("sub-44 sizes restore the floor with slop, not minHeight", () => {
     renderWithProviders(<Button size="$2">Save</Button>);
     const frame = screen.getByRole("button");
-    expect(frame.getAttribute("data-mp-button-height")).toBe("28");
-    expect(frame.getAttribute("data-mp-press-slop")).toBe("8");
+    expect(frame.getAttribute("data-mp-button-height")).toBe("26");
+    expect(frame.getAttribute("data-mp-press-slop")).toBe("9");
     expect((frame as HTMLElement).style.minHeight).not.toBe("44px");
   });
 
-  it("large paints 52 — already past the floor, no slop", () => {
+  it("large paints 48 — already past the floor, no slop", () => {
     renderWithProviders(<Button size="$5">Save</Button>);
     const frame = screen.getByRole("button");
-    expect(frame.getAttribute("data-mp-button-height")).toBe("52");
+    expect(frame.getAttribute("data-mp-button-height")).toBe("48");
     expect(frame.getAttribute("data-mp-press-slop")).toBeNull();
   });
 });
 
-describe("Button density ≠ size", () => {
-  it("compact tightens pad without shrinking recipe height", () => {
-    // Density picks the FAMILY; it never subtracts from the recipe (LC-79).
-    expect(buttonDensityFamily("control", true)).toBe("controlCompact");
-    expect(buttonDensityFamily("control", false)).toBe("control");
-    expect(resolveButtonSizeRecipe("$4", "controlCompact").paddingHorizontal).toBeLessThan(
+describe("Button size comes from the token, not a density step", () => {
+  it("the chip family tightens pad without shrinking recipe height", () => {
+    expect(resolveButtonSizeRecipe("$4", "chip").paddingHorizontal).toBeLessThan(
       resolveButtonSizeRecipe("$4", "control").paddingHorizontal,
     );
-    expect(resolveButtonSizeRecipe("$4", "controlCompact").height).toBe(
+    expect(resolveButtonSizeRecipe("$4", "chip").height).toBe(
       resolveButtonSizeRecipe("$4", "control").height,
     );
-    renderWithProviders(
-      <Button compact size="$4">
-        Save
-      </Button>,
-    );
-    const frame = screen.getByRole("button");
-    expect(frame.getAttribute("data-mp-button-height")).toBe("44");
-    expect(frame.getAttribute("data-mp-density")).toBe("compact");
   });
 
-  it("size large + compact density stays large chrome", () => {
+  it("a $5 Surface renders large chrome", () => {
     renderWithProviders(
-      <Preset overrides={{ size: "large" }}>
-        <Button compact>Save</Button>
-      </Preset>,
+      <Surface size="$5">
+        <Button>Save</Button>
+      </Surface>,
     );
-    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("52");
+    expect(screen.getByRole("button").getAttribute("data-mp-button-height")).toBe("48");
   });
 });
 
@@ -89,13 +76,13 @@ describe("Button nested scale (LC-73)", () => {
       </Button>,
     );
     const frame = screen.getByRole("button");
-    expect(frame.getAttribute("data-nested-px")).toBe("32");
-    expect(frame.getAttribute("data-mp-button-height")).toBe("32");
-    expect(frame.getAttribute("data-mp-press-slop")).toBe("6");
+    expect(frame.getAttribute("data-nested-px")).toBe("29");
+    expect(frame.getAttribute("data-mp-button-height")).toBe("29");
+    expect(frame.getAttribute("data-mp-press-slop")).toBe("8");
     expect(frame.getAttribute("style") ?? "").not.toMatch(/width:\s*44px/);
   });
 
-  it("pads a nested circle 0, so its label fits the 32px box (MPO-371)", () => {
+  it("pads a nested circle 0, so its label fits the nested token box (MPO-371)", () => {
     renderWithProviders(
       <>
         <Button nested circular aria-label="day">
@@ -106,10 +93,10 @@ describe("Button nested scale (LC-73)", () => {
     );
     const [circle, pill] = screen.getAllByRole("button");
     const circleAtoms = (circle.getAttribute("class") ?? "").split(/\s+/);
-    expect(circleAtoms).toEqual(expect.arrayContaining(["_w-32px", "_h-32px", "_btlr-100000px"]));
+    expect(circleAtoms).toEqual(expect.arrayContaining(["_w-29px", "_h-29px", "_btlr-100000px"]));
     expect(circleAtoms).toEqual(expect.arrayContaining(["_pl-0px", "_pr-0px"]));
-    expect(circleAtoms).not.toContain("_pl-18px");
-    expect((pill.getAttribute("class") ?? "").split(/\s+/)).toContain("_pl-18px");
+    expect(circleAtoms).not.toContain("_pl-16px");
+    expect((pill.getAttribute("class") ?? "").split(/\s+/)).toContain("_pl-16px");
   });
 });
 

package/src/Button/Button.loading.spec.tsx

@@ -0,0 +1,87 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { cleanup } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Button } from "./index";
+
+/**
+ * WP-c2: a loading Button renders the ONE Skeleton (forms, re-exported by
+ * components) at the button's recipe height, and the bone stops pulsing for a
+ * user who asked for reduced motion.
+ */
+
+let reduced = false;
+let originalMatchMedia: typeof window.matchMedia;
+
+beforeEach(() => {
+  originalMatchMedia = window.matchMedia;
+  window.matchMedia = vi.fn((query: string) => ({
+    matches: query.includes("prefers-reduced-motion") ? reduced : false,
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+  })) as unknown as typeof window.matchMedia;
+});
+
+afterEach(() => {
+  cleanup();
+  window.matchMedia = originalMatchMedia;
+  reduced = false;
+});
+
+function bone(container: HTMLElement): HTMLElement {
+  const el = container.querySelector("[data-button-loading] [data-skeleton]");
+  if (!el) throw new Error("no skeleton bone in the loading button");
+  return el as HTMLElement;
+}
+
+describe("Button loading (WP-c2 one Skeleton)", () => {
+  it("renders the shared rounded Skeleton at the recipe height in the label slot", () => {
+    const { container, getByRole } = renderWithProviders(
+      <Button loading size="$3">
+        Save
+      </Button>,
+    );
+    const el = bone(container);
+    expect(el.getAttribute("data-skeleton-variant")).toBe("rounded");
+    expect(el.getAttribute("data-height")).toBe(String(sizeRecipeForToken("$3").height));
+    expect(el.getAttribute("aria-hidden")).toBe("true");
+    const button = getByRole("button");
+    expect(button.getAttribute("aria-busy")).toBe("true");
+    // The label is swapped out for the bone (busy, not narrated).
+    expect(button.textContent).not.toContain("Save");
+  });
+
+  it("pulses with the animation knob on", () => {
+    const { container } = renderWithProviders(<Button loading>Save</Button>);
+    const el = bone(container);
+    expect(el.getAttribute("data-animate")).toBe("true");
+    expect(el.className).toMatch(/mp-skeleton-pulse/);
+    expect(el.style.animation).toContain("mp-skeleton-pulse");
+  });
+
+  it("respects prefers-reduced-motion: the bone goes static", () => {
+    reduced = true;
+    const { container } = renderWithProviders(<Button loading>Save</Button>);
+    const el = bone(container);
+    expect(el.getAttribute("data-animate")).toBe("false");
+    expect(el.className).toMatch(/mp-skeleton-static/);
+    expect(el.style.animation).toBe("");
+  });
+
+  it("mounts one keyframe sheet that also stops motion under reduced motion", () => {
+    renderWithProviders(
+      <>
+        <Button loading>One</Button>
+        <Button loading>Two</Button>
+      </>,
+    );
+    const sheets = document.querySelectorAll("#__mp-skeleton-pulse");
+    expect(sheets).toHaveLength(1);
+    const css = sheets[0]?.textContent ?? "";
+    expect(css.match(/@keyframes/g)).toHaveLength(1);
+    expect(css).toContain("prefers-reduced-motion:reduce");
+  });
+});