@multiplatform.one/components 7.11.0 → 7.16.0

package/src/SheetModal/index.native.tsx

@@ -10,7 +10,15 @@
  * height with a large-detent cap. LC-71: the frame is not a control.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Animated,
   Easing,
@@ -23,6 +31,7 @@ import {
   View as RNView,
   useWindowDimensions,
 } from "react-native";
+import { SafeAreaInsetsContext, initialWindowMetrics } from "react-native-safe-area-context";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { minSheetHeight, resolveSheetDetents } from "./detents";
 import { useTranslation } from "../shared/i18n";
@@ -62,6 +71,7 @@ export function SheetModal({
   const { knobProps } = useResolvedKnobs();
   const { height: windowHeight } = useWindowDimensions();
   const keyboardInset = useKeyboardInset();
+  const topInset = useContext(SafeAreaInsetsContext)?.top ?? initialWindowMetrics?.insets.top ?? 0;
   const [backdropArmed, setBackdropArmed] = useState(false);
   const armTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -71,11 +81,12 @@ export function SheetModal({
     if (backdropArmed) close();
   }, [backdropArmed, close]);
 
-  // MPO-64: the sheet ends above the keyboard rather than running under it.
+  // MPO-64: the sheet ends above the keyboard rather than running under it,
+  // and below the status bar with a strip of backdrop still showing.
   const available = Math.max(0, windowHeight - keyboardInset);
   const maxHeight = Math.max(
     minSheetHeight,
-    Math.round(Math.min(windowHeight * sheetMaxHeightRatio, available - backdropStrip)),
+    Math.round(Math.min(windowHeight * sheetMaxHeightRatio, available - topInset - backdropStrip)),
   );
 
   /*
@@ -127,8 +138,59 @@ export function SheetModal({
   const presentationRef = useRef(0);
   const activeRef = useRef(false);
 
+  /*
+   * MPO-68 / MPO-299: a sheet at rest below full height is LAID OUT at that
+   * height. Translating a full-height frame down pushed its bottom off the
+   * screen, or under the keyboard, and the scroll owner inside still measured
+   * the full height, so the tail could never be scrolled into view.
+   *
+   * `frameCap` rides the same Animated.View as `translateY`, so the swap
+   * between "full height, translated" and "detent height, at 0" lands in one
+   * commit and the top edge does not move. `restHeightRef` is null at full
+   * height; a gesture always runs uncapped, in `travel` coordinates.
+   */
+  const frameCap = useRef(new Animated.Value(maxHeight)).current;
+  const maxHeightRef = useRef(maxHeight);
+  const restHeightRef = useRef<number | null>(null);
+  // The last uncapped layout, and whether it filled the max height. A capped
+  // frame measures only its cap, so when the keyboard moves the max height
+  // under a resting sheet, its full height is re-derived from these.
+  const naturalRef = useRef(0);
+  const filledRef = useRef(false);
+
+  useLayoutEffect(() => {
+    maxHeightRef.current = maxHeight;
+    const rest = restHeightRef.current;
+    frameCap.setValue(rest === null ? maxHeight : Math.min(maxHeight, rest));
+    if (rest !== null && naturalRef.current > 0) {
+      setMeasuredHeight(filledRef.current ? maxHeight : Math.min(naturalRef.current, maxHeight));
+    }
+  }, [frameCap, maxHeight]);
+
+  const restAt = useCallback(
+    (height: number) => {
+      restHeightRef.current = height;
+      frameCap.setValue(Math.min(maxHeightRef.current, height));
+      restRef.current = 0;
+      translateY.setValue(0);
+    },
+    [frameCap, translateY],
+  );
+
+  const releaseRest = useCallback(() => {
+    const rest = restHeightRef.current;
+    if (rest === null) return;
+    restHeightRef.current = null;
+    const offset = Math.max(0, travelRef.current - Math.min(maxHeightRef.current, rest));
+    frameCap.setValue(maxHeightRef.current);
+    restRef.current = offset;
+    translateY.setValue(offset);
+  }, [frameCap, translateY]);
+
   const settleTo = useCallback(
-    (toValue: number, velocity = 0) => {
+    (height: number, velocity = 0) => {
+      const presentation = presentationRef.current;
+      const toValue = Math.max(0, travelRef.current - height);
       restRef.current = toValue;
       Animated.spring(translateY, {
         toValue,
@@ -141,9 +203,12 @@ export function SheetModal({
         // Modal does not advance on the New Architecture, and the drag path
         // already writes this value from JS.
         useNativeDriver: false,
-      }).start();
+      }).start(({ finished }) => {
+        if (!finished || toValue === 0) return;
+        if (activeRef.current && presentation === presentationRef.current) restAt(height);
+      });
     },
-    [translateY],
+    [restAt, translateY],
   );
 
   const dismiss = useCallback(
@@ -171,10 +236,15 @@ export function SheetModal({
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_evt, g) => Math.abs(g.dy) > 2,
+        // Lifting a rest cap can scroll the list inside, and a scroll lets
+        // any ancestor ScrollView the finger started under claim the touch,
+        // ending the drag and blurring a focused input on release.
+        onPanResponderTerminationRequest: () => false,
         onPanResponderGrant: () => {
           translateY.stopAnimation((value) => {
             if (typeof value === "number" && Number.isFinite(value)) restRef.current = value;
           });
+          releaseRest();
         },
         onPanResponderMove: (_evt, g) => {
           const next = restRef.current + g.dy;
@@ -199,11 +269,11 @@ export function SheetModal({
               best = height;
             }
           }
-          settleTo(tvl - best, g.vy);
+          settleTo(best, g.vy);
         },
-        onPanResponderTerminate: () => settleTo(restRef.current),
+        onPanResponderTerminate: () => settleTo(travelRef.current - restRef.current),
       }),
-    [dismiss, settleTo, translateY],
+    [dismiss, releaseRest, settleTo, translateY],
   );
 
   /*
@@ -246,6 +316,8 @@ export function SheetModal({
   useEffect(() => {
     presentationRef.current += 1;
     activeRef.current = open;
+    restHeightRef.current = null;
+    frameCap.setValue(maxHeightRef.current);
     if (open) {
       enter();
     } else {
@@ -265,7 +337,7 @@ export function SheetModal({
       }
       translateY.stopAnimation();
     };
-  }, [open, enter, translateY]);
+  }, [open, enter, frameCap, translateY]);
 
   return (
     <Modal
@@ -287,8 +359,12 @@ export function SheetModal({
         </Pressable>
         <Animated.View
           onLayout={(e) => {
+            if (restHeightRef.current !== null) return;
             const h = Math.round(e.nativeEvent.layout.height);
-            if (h > 0 && h !== measuredHeight) setMeasuredHeight(h);
+            if (h <= 0) return;
+            naturalRef.current = h;
+            filledRef.current = h >= maxHeightRef.current - 1;
+            if (h !== measuredHeight) setMeasuredHeight(h);
           }}
           testID="sheet-modal-frame"
           style={{
@@ -296,10 +372,10 @@ export function SheetModal({
             // the sheet cannot give way to the keyboard.
             flexShrink: 1,
             minHeight: 0,
-            maxHeight,
+            maxHeight: frameCap,
             // The cap is already keyboard- and window-aware; fill only asks
             // for it as a definite height rather than an upper bound.
-            ...(fill ? { height: maxHeight } : null),
+            ...(fill ? { height: frameCap } : null),
             transform: [{ translateY }],
           }}
         >
@@ -311,13 +387,15 @@ export function SheetModal({
             borderBottomRightRadius={0}
             elevation={knobProps.elevation}
             maxHeight={maxHeight}
-            {...(fill ? { ...fillSlot, flexShrink: 1 } : null)}
+            flexShrink={1}
+            minHeight={0}
+            {...(fill ? fillSlot : null)}
             paddingTop="$2"
             paddingBottom={keyboardInset > 0 ? 8 : bottomInset}
             overflow="hidden"
-            outlineWidth={0}
-            focusStyle={{ outlineWidth: 0 }}
-            focusVisibleStyle={{ outlineWidth: 0 }}
+            // No focus or press pseudo on this surface: on native tamagui
+            // turns one into a touch-responder claim, and a responder here
+            // takes every drag from the ScrollView inside (MPO-299).
             accessibilityViewIsModal
             onAccessibilityEscape={close}
           >

package/src/Skeleton/Skeleton.spec.tsx

@@ -108,14 +108,14 @@ describe("Skeleton — LC-20 / LC-61 announcer and motion", () => {
 });
 
 describe("Skeleton — radius classes (LC-20 / LC-60)", () => {
-  it("text bones go square at radius:none and clamp at full (R-CLAMP)", () => {
+  it("text bones ride DEFAULT: square at radius:none, the token at full (MPO-56)", () => {
     const none = renderWithProviders(
       <Preset overrides={{ borderRadius: "none" }}>
         <Skeleton variant="text" width={120} />
       </Preset>,
     );
     expect(radiusClasses(none.container.querySelector("[data-skeleton]") as Element)).toEqual([
-      "_btlr-0px",
+      "_btlr-t-radius-0",
     ]);
     cleanup();
 
@@ -125,7 +125,7 @@ describe("Skeleton — radius classes (LC-20 / LC-60)", () => {
       </Preset>,
     );
     expect(radiusClasses(full.container.querySelector("[data-skeleton]") as Element)).toEqual([
-      "_btlr-t-radius-2",
+      "_btlr-t-radius-12",
     ]);
   });
 

package/src/Skeleton/index.tsx

@@ -4,16 +4,6 @@ import { radiusClassProps, sizeRecipeForToken, useResolvedKnobs } from "@multipl
 import type { GetProps } from "tamagui";
 import { View, styled, isWeb } from "tamagui";
 
-function clampTextRadius(radiusToken: string | undefined) {
-  if (!radiusToken) return "$2";
-  if (radiusToken === "$0") return 0;
-  if (radiusToken.startsWith("$")) {
-    const num = Number.parseInt(radiusToken.slice(1), 10);
-    return Number.isFinite(num) && num > 2 ? "$2" : radiusToken;
-  }
-  return radiusToken;
-}
-
 export type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
 export type SkeletonTextSize = "body" | "display";
 
@@ -106,7 +96,7 @@ export function Skeleton({
   if (isWeb) ensureShimmerStyles();
 
   const decorative = props["aria-hidden"] === true || !shouldAnnounce;
-  // Corner-smoothing is an R-SCALE/R-CLAMP arc. Circular is R-PILL (a
+  // Corner-smoothing is an R-SCALE arc. Circular is R-PILL (a
   // squircle would break 1:1); rectangular is square by variant.
   const smoothingClass =
     variant === "text" || variant === "rounded" ? knobProps.borderRadius.className : undefined;
@@ -119,15 +109,12 @@ export function Skeleton({
     .filter(Boolean)
     .join(" ");
 
-  const textRadius = knobProps.pointy ? 0 : clampTextRadius(knobProps.borderRadius.borderRadius);
   const radiusProps =
     variant === "circular"
       ? { borderRadius: 1000, ...radiusClassProps("R-PILL", "SkeletonCircle") }
       : variant === "rectangular"
         ? { borderRadius: 0 }
-        : variant === "rounded"
-          ? { borderRadius: knobProps.borderRadius.borderRadius }
-          : { borderRadius: textRadius };
+        : { borderRadius: knobProps.borderRadius.borderRadius };
 
   return (
     <SkeletonFrame

package/src/Tabs/Tabs.hydration.spec.tsx

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+/**
+ * MPO-279: on touch mobile web the server cannot know the device, so it renders
+ * pointer-sized tabs. Hydration has to reproduce that markup, then adopt the
+ * touch floor; a first client render at touch size is an attribute mismatch
+ * React never patches.
+ */
+import { TestProviders } from "@multiplatform.one/test-utils";
+import { act } from "react";
+import { hydrateRoot, type Root } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Tabs } from "./index";
+
+const host = vi.hoisted(() => {
+  vi.stubGlobal("matchMedia", () => ({
+    matches: false,
+    addEventListener() {},
+    removeEventListener() {},
+    addListener() {},
+    removeListener() {},
+  }));
+  return { web: true, touch: false };
+});
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  get isWeb() {
+    return host.web;
+  },
+  get isTouchable() {
+    return !host.web && host.touch;
+  },
+  get isWebTouchable() {
+    return host.web && host.touch;
+  },
+}));
+
+const items = [
+  { value: "address", label: "Address & Contact", content: <>address panel</> },
+  { value: "settings", label: "Settings", content: <>settings panel</> },
+];
+
+function Fixture() {
+  return (
+    <TestProviders>
+      <Tabs items={items} defaultValue="address" />
+    </TestProviders>
+  );
+}
+
+/** Every `_h-` height atom painted inside each tab, in document order. */
+function tabHeights(root: ParentNode): string[][] {
+  return [...root.querySelectorAll('[role="tab"]')].map((tab) =>
+    [tab, ...tab.querySelectorAll("*")].flatMap((node) =>
+      [...node.classList].filter((name) => /^_h-\d/.test(name)),
+    ),
+  );
+}
+
+let container: HTMLDivElement;
+let root: Root | undefined;
+let errors: unknown[];
+
+beforeEach(() => {
+  host.web = true;
+  host.touch = false;
+  errors = [];
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  vi.spyOn(console, "error").mockImplementation((...args) => errors.push(args));
+  container = document.createElement("div");
+  document.body.append(container);
+});
+
+afterEach(async () => {
+  if (root) await act(async () => root?.unmount());
+  root = undefined;
+  container.remove();
+  vi.restoreAllMocks();
+});
+
+async function hydrate() {
+  await act(async () => {
+    root = hydrateRoot(container, <Fixture />, {
+      onRecoverableError: (error) => errors.push(error),
+    });
+  });
+}
+
+const hydrationErrors = () =>
+  errors.filter((error) => /hydration|hydrated|didn't match/i.test(String(error)));
+
+describe("Tabs sizing through hydration (MPO-279)", () => {
+  it("keeps the server's pointer-sized tabs through hydration, then adopts the touch floor", async () => {
+    container.innerHTML = renderToString(<Fixture />);
+    const serverTabs = [...container.querySelectorAll('[role="tab"]')];
+    const serverHeights = tabHeights(container);
+    expect(serverHeights.flat()).not.toHaveLength(0);
+
+    host.touch = true;
+    await hydrate();
+
+    expect(hydrationErrors()).toEqual([]);
+    expect([...container.querySelectorAll('[role="tab"]')]).toEqual(serverTabs);
+    const clientHeights = tabHeights(container);
+    expect(clientHeights).not.toEqual(serverHeights);
+    for (const heights of clientHeights) expect(heights).toContain("_h-48px");
+  });
+
+  it("leaves pointer sizing alone on a pointer device", async () => {
+    container.innerHTML = renderToString(<Fixture />);
+    const serverHeights = tabHeights(container);
+    await hydrate();
+    expect(hydrationErrors()).toEqual([]);
+    expect(tabHeights(container)).toEqual(serverHeights);
+  });
+
+  it("sizes native tabs to the touch floor on the first render", () => {
+    host.web = false;
+    host.touch = true;
+    container.innerHTML = renderToString(<Fixture />);
+    for (const heights of tabHeights(container)) expect(heights).toContain("_h-48px");
+  });
+});

package/src/Tabs/index.tsx

@@ -37,6 +37,7 @@ import {
   useResolvedKnobs,
   wasKeyboardFocus,
   type GroupPosition,
+  transitionProps,
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import React from "react";
@@ -45,7 +46,6 @@ import { useTranslation } from "../shared/i18n";
 import { wrapBareTextChildren } from "../shared/textRidesText";
 import type { GetProps, ThemeName } from "tamagui";
 import {
-  ScrollView,
   Tabs as TamaguiTabs,
   Text,
   Theme,
@@ -56,6 +56,7 @@ import {
   withStaticProperties,
 } from "tamagui";
 import { componentColors } from "../componentColors";
+import { ScrollView } from "../ScrollView";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -492,7 +493,7 @@ function TabsRoot({
             x={activeLayout.x}
             width={activeLayout.width}
             data-tabs-indicator="underline"
-            {...(transition ? { transition } : undefined)}
+            {...transitionProps(transition)}
           />
         </Theme>
       ) : (
@@ -508,7 +509,7 @@ function TabsRoot({
             {...(knobProps.elevation !== undefined
               ? { elevation: knobProps.elevation }
               : undefined)}
-            {...(transition ? { transition } : undefined)}
+            {...transitionProps(transition)}
           />
         </Theme>
       )

package/src/Text.spec.tsx

@@ -21,10 +21,10 @@
  */
 import { cleanup, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, useAccentOnSurface } from "@multiplatform.one/theme";
 import { XStack } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
-import { Text } from "./Text";
+import { Anchor, Text } from "./Text";
 
 afterEach(cleanup);
 
@@ -181,6 +181,36 @@ describe("house Text — fontWeight and bodyFont reach the text node", () => {
   });
 });
 
+describe("house Anchor — link chrome is house Text's, in the accent (MPO-21 G11-A)", () => {
+  function AccentProbe({ onInk }: { onInk: (ink: string) => void }) {
+    onInk(useAccentOnSurface());
+    return null;
+  }
+
+  it("paints the AA-safe accent ink, not tamagui's link colour", () => {
+    let ink = "";
+    const anchor = renderTextClasses(
+      <>
+        <AccentProbe onInk={(value) => (ink = value)} />
+        <Anchor href="#">{LABEL}</Anchor>
+      </>,
+      ["_col-"],
+    );
+    expect(ink).not.toBe("");
+    const accented = renderTextClasses(<Anchor color={ink as never}>{LABEL}</Anchor>, ["_col-"]);
+    const body = renderTextClasses(<Text>{LABEL}</Text>, ["_col-"]);
+    expect(anchor).not.toHaveLength(0);
+    expect(anchor).toEqual(accented);
+    expect(anchor).not.toEqual(body);
+  });
+
+  it("a consumer colour still ejects (STD-EJECT-LAST)", () => {
+    const ejected = renderTextClasses(<Anchor color="$color9">{LABEL}</Anchor>, ["_col-"]);
+    const explicit = renderTextClasses(<Text color="$color9">{LABEL}</Text>, ["_col-"]);
+    expect(ejected).toEqual(explicit);
+  });
+});
+
 // The NATIVE arm lives in ./Text.native.spec.tsx. It used to sit here as a
 // `vi.resetModules()` + dynamic-import block, but that returned a SPLIT module
 // graph — a fresh `renderWithProviders` over a stale `useResolvedKnobs` — and

package/src/Text.tsx

@@ -24,10 +24,10 @@
  *    500/600 are not label weights; see tamagui-rendered-reference.md §9)
  *  - textAccent → knobProps.textAccentColor  (high $color / medium+low
  *    $color11, the AA legibility floor) on Text/SizableText/Paragraph.
- *    Anchor keeps tamagui's link ink: link chrome has no owning LC rule yet
- *    (the former registry row's ADJUDICATION-CANDIDATE stands, tracked in
- *    the MR), and painting body accent over it would silently restyle every
- *    link before that adjudication.
+ *  - link ink → Anchor paints the accent, as the most chromatic step of the
+ *    theme's accent ramp that still clears AA on both page surfaces
+ *    (`useAccentOnSurface`). House Text owns link chrome (Clay 2026-09-26,
+ *    MPO-21 G11-A); a consumer `color` still ejects.
  *
  * Default body/label ramp (tamagui-rendered-reference.md §9, the $4 / $true
  * stop): 14px / 25px / 400. createInterFont's size+10 table yields 14/24;
@@ -38,7 +38,7 @@
  * Raw primitives stay reachable as TamaguiText / TamaguiSizableText /
  * TamaguiParagraph / TamaguiAnchor (./tamagui.ts escape hatches, LC-45).
  */
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useAccentOnSurface, useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   Anchor as RawAnchor,
   type AnchorProps,
@@ -81,5 +81,6 @@ export function Paragraph(props: ParagraphProps) {
 
 export function Anchor(props: AnchorProps) {
   const { knobProps } = useResolvedKnobs();
-  return <RawAnchor {...knobProps.body} {...props} />;
+  const linkInk = useAccentOnSurface();
+  return <RawAnchor {...knobProps.body} color={linkInk} {...props} />;
 }

package/src/Toast/Toast.spec.tsx

@@ -735,6 +735,56 @@ describe("Toast data attributes reach the DOM", () => {
   });
 });
 
+describe("Toast density moves padX and gap on the host (MPO-42)", () => {
+  afterEach(cleanup);
+
+  const padX = ["_px-", "_pl-", "_pr-"];
+  const gap = ["_gap-"];
+
+  function hostAtoms(node: ReactElement) {
+    renderWithProviders(node);
+    const host = screen.getByTestId("toast");
+    const measured = {
+      density: host.getAttribute("data-density"),
+      padX: classesByPrefix(host, padX),
+      gap: classesByPrefix(host, gap),
+    };
+    cleanup();
+    return measured;
+  }
+
+  it("the density knob changes padX and gap between the two stops", () => {
+    const comfortable = hostAtoms(
+      <Preset overrides={{ density: "comfortable" }}>
+        <Toast title="Saved" onDismiss={() => {}} />
+      </Preset>,
+    );
+    const compact = hostAtoms(
+      <Preset overrides={{ density: "compact" }}>
+        <Toast title="Saved" onDismiss={() => {}} />
+      </Preset>,
+    );
+    expect(comfortable.density).toBe("comfortable");
+    expect(compact.density).toBe("compact");
+    expect(comfortable.padX.length).toBeGreaterThan(0);
+    expect(comfortable.gap.length).toBeGreaterThan(0);
+    expect(compact.padX).not.toEqual(comfortable.padX);
+    expect(compact.gap).not.toEqual(comfortable.gap);
+  });
+
+  it("the compact prop lands the same padX and gap as the density knob", () => {
+    const knob = hostAtoms(
+      <Preset overrides={{ density: "compact" }}>
+        <Toast title="Saved" onDismiss={() => {}} />
+      </Preset>,
+    );
+    const prop = hostAtoms(<Toast compact title="Saved" onDismiss={() => {}} />);
+    expect(prop.density).toBe("compact");
+    expect(prop.padX).toEqual(knob.padX);
+    expect(prop.gap).toEqual(knob.gap);
+  });
+});
+
 describe("Toast action label weight and contrast (TEXT NODE)", () => {
   it("Undo is weight 400 on the TEXT NODE, never 600 (R7 / §6.1)", () => {
     const action = renderActionWeight(

package/src/Tooltip/Tooltip.spec.tsx

@@ -2,8 +2,8 @@
  * @vitest-environment jsdom
  */
 
-import { fireEvent } from "@testing-library/react";
-import { OVERLAY_ANCHOR_GAP, __resetDevWarnSeen } from "@multiplatform.one/theme";
+import { act, fireEvent } from "@testing-library/react";
+import { OVERLAY_ANCHOR_GAP, Preset, __resetDevWarnSeen } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Button } from "@multiplatform.one/forms";
@@ -99,6 +99,59 @@ describe("Tooltip interaction", () => {
   });
 });
 
+describe("Tooltip content rides the border, elevation and animation knobs", () => {
+  const stops = [
+    { borderWidth: "none", elevation: "none", animation: "none" },
+    { borderWidth: "small", elevation: "small", animation: "quick" },
+    { borderWidth: "large", elevation: "large", animation: "slow" },
+  ] as const;
+
+  async function measure(stop: (typeof stops)[number]) {
+    const result = renderWithProviders(
+      <Preset overrides={stop}>
+        <Tooltip content="Hint" open>
+          <Button>Edit</Button>
+        </Tooltip>
+      </Preset>,
+    );
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+    });
+    const content = document.querySelector<HTMLElement>("[data-tooltip='content']");
+    const classes = content?.className.split(/\s+/) ?? [];
+    const measured = {
+      mounted: content !== null,
+      border: classes.find((c) => c.startsWith("_btw-")),
+      shadow: classes.find((c) => c.startsWith("_bxsh-"))?.match(/^_bxsh-\d+px\d+px\d+px/)?.[0],
+      transition: content?.style.transition.match(/^all \d+ms/)?.[0],
+    };
+    result.unmount();
+    return measured;
+  }
+
+  it("follows each stop on the mounted bubble, and none carries no border, shadow or motion", async () => {
+    const none = await measure(stops[0]);
+    const small = await measure(stops[1]);
+    const large = await measure(stops[2]);
+    expect(none).toEqual({
+      mounted: true,
+      border: "_btw-0px",
+      shadow: undefined,
+      transition: undefined,
+    });
+    expect(small).toMatchObject({
+      mounted: true,
+      border: "_btw-0--5px",
+      shadow: "_bxsh-0px3px6px",
+    });
+    // Overlay large is the ladder's own $5 dialog stop, not the control $4 (MPO-99).
+    expect(large).toMatchObject({ mounted: true, border: "_btw-2px", shadow: "_bxsh-0px12px24px" });
+    expect(small.transition).toMatch(/^all \d+ms$/);
+    expect(large.transition).toMatch(/^all \d+ms$/);
+    expect(large.transition).not.toBe(small.transition);
+  });
+});
+
 describe("Tooltip native long-press open path", () => {
   beforeEach(() => {
     vi.useFakeTimers();