@multiplatform.one/components 7.5.0 → 7.6.0

package/src/ProgressSteps/index.tsx

@@ -53,6 +53,13 @@ export interface ProgressStepsProps extends Omit<GetProps<typeof StepsRoot>, "ch
   linear?: boolean;
   /** Compact markers + type (density compact override). */
   compact?: boolean;
+  /**
+   * Rail label treatment. `"hidden"` keeps markers (and a11y names) and
+   * drops the visible per-step label — the 390 wizard treatment; the
+   * current step's name rides the wizard legend as "Step n of m — X".
+   * @default "visible"
+   */
+  labels?: "visible" | "hidden";
 }
 
 type StepState = "completed" | "current" | "upcoming";
@@ -130,6 +137,7 @@ export function ProgressSteps({
   allowJump = true,
   linear = true,
   compact,
+  labels = "visible",
   ...props
 }: ProgressStepsProps) {
   const { t } = useTranslation();
@@ -155,7 +163,13 @@ export function ProgressSteps({
   const gapToken = knobProps.gap.gap;
 
   return (
-    <StepsRoot role="list" aria-label={t("Progress")} data-density={knobProps.density} {...props}>
+    <StepsRoot
+      role="list"
+      aria-label={t("Progress")}
+      data-density={knobProps.density}
+      data-labels={labels}
+      {...props}
+    >
       <XStack
         flexDirection={horizontal ? "row" : "column"}
         alignItems={horizontal ? "flex-start" : "stretch"}
@@ -310,10 +324,11 @@ export function ProgressSteps({
             />
           ) : null;
 
+          const showLabels = labels !== "hidden";
           const body = horizontal ? (
             <YStack alignItems="center" flexShrink={0}>
               {markerTarget}
-              {labelBlock}
+              {showLabels ? labelBlock : null}
             </YStack>
           ) : (
             <XStack alignItems="stretch" gap={gapToken} minHeight={MIN_PRESS_TARGET}>
@@ -321,7 +336,7 @@ export function ProgressSteps({
                 {markerTarget}
                 {verticalConnector}
               </YStack>
-              {labelBlock}
+              {showLabels ? labelBlock : null}
             </XStack>
           );
 

package/src/Separator/Separator.spec.tsx

@@ -3,17 +3,25 @@
  *
  * MPO-47 — Separator paints a line.
  *
- * The defect this locks against: 96 of 96 separators measured height 1px,
- * background-color rgba(0,0,0,0), border-top-width 0px — the box was there,
- * the PAINT was not. Asserting height and never colour is exactly why that
- * shipped, so this spec asserts the painted colour first.
+ * What this locks: the house rule paints, at 1 CSS px, in $borderColor, in
+ * both schemes, and cannot flex-grow (DG-OVF-07 — the raw primitive it
+ * replaced declares `flex: 1`). Asserting a separator's height and never its
+ * colour is how a transparent rule ships, so this spec asserts the painted
+ * colour first.
  *
- * jsdom cannot cascade Tamagui's class-based CSS, so paint is asserted the
- * house way (Button LC-18 / DotIndicator technique): read the atomic classes
- * the style emits. `_bg-borderColor` is the background atom bound to the
- * `$borderColor` theme token — one token, resolved per scheme — and the
- * both-schemes arm additionally asserts the token's light AND dark values are
- * real, non-transparent colours in the active config.
+ * (The ticket's "96 of 96 paint nothing" reading was a probe artefact — it
+ * read borderTopWidth on a primitive that paints borderBottomWidth. See the
+ * component header. The assertions below are unaffected: they are about what
+ * the HOUSE rule paints, not about what the raw one did.)
+ *
+ * jsdom cannot CASCADE Tamagui's class-based CSS, so `getComputedStyle` on the
+ * element reads nothing — but Tamagui does INJECT its atomic rules into
+ * `document.styleSheets`, so the declaration behind each of the element's own
+ * atoms is readable and is what this spec asserts. That is deliberate: the
+ * first version of this file matched atom NAMES (`/_o-0d0t5/`), the encoder
+ * emits `_o-0--5`, and the quiet test was red from the day it merged without
+ * anyone seeing it — CI runs `turbo run build` only (MPO-78). A declaration is
+ * the law; an atom name is an implementation detail of the encoder.
  */
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup } from "@testing-library/react";
@@ -29,6 +37,39 @@ function getSeparator(container: HTMLElement): HTMLElement {
   return el as HTMLElement;
 }
 
+const escapeForRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\-]/g, "\\$&");
+
+/**
+ * Every value Tamagui declared for `property` through one of THIS element's
+ * atomic classes. Empty means the element does not carry that property at all.
+ */
+function declared(el: HTMLElement, property: string): string[] {
+  const atoms = el.className.split(/\s+/).filter(Boolean);
+  const values: string[] = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRuleList | undefined;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue; // cross-origin sheet; nothing of ours lives there
+    }
+    for (const rule of Array.from(rules ?? [])) {
+      const parsed = (rule.cssText ?? "").match(/^([^{]+)\{([^}]*)\}$/);
+      if (!parsed) continue;
+      const [, selector, body] = parsed;
+      const mine = atoms.some((atom) =>
+        new RegExp(`\\.${escapeForRegExp(atom)}(?![\\w-])`).test(selector),
+      );
+      if (!mine) continue;
+      const decl = body.match(
+        new RegExp(`(?:^|[;\\s])${escapeForRegExp(property)}\\s*:\\s*([^;]+)`),
+      );
+      if (decl) values.push(decl[1].trim());
+    }
+  }
+  return values;
+}
+
 /** Resolve a theme colour Variable to its raw value string. */
 function themeColorVal(scheme: "light" | "dark", key: string): string {
   const themes = getConfig().themes as Record<string, Record<string, { val?: unknown }>>;
@@ -47,14 +88,10 @@ describe("Separator — painted colour (the regression this component exists for
   it("paints its 1px box with the $borderColor token, not a transparent box", () => {
     const { container } = renderWithProviders(<Separator />);
     const separator = getSeparator(container);
-    // PAINT: the background atom is bound to the borderColor token.
-    expect(separator.className).toMatch(/_bg-borderColo/);
-    // Nothing re-zeroes the paint: no transparent background atom.
-    expect(separator.className).not.toMatch(/_bg-transparent/);
+    // PAINT: the declared background is the borderColor token, not transparent.
+    expect(declared(separator, "background-color")).toEqual(["var(--borderColor)"]);
     // GEOMETRY: exactly 1 CSS px tall — never 0.5 (§7.3: "1px is the value").
-    expect(separator.className).toMatch(/_h-1px/);
-    expect(separator.className).not.toMatch(/_h-0d0t5px/);
-    expect(separator.className).not.toMatch(/_mah-0d0t5px/);
+    expect(declared(separator, "height")).toEqual(["1px"]);
   });
 
   it("carries a visible $borderColor in BOTH schemes (token values are real colours)", () => {
@@ -69,15 +106,15 @@ describe("Separator — painted colour (the regression this component exists for
     }
   });
 
-  it("paints the same token atom under an explicit dark theme subtree", () => {
+  it("paints the same token under an explicit dark theme subtree", () => {
     const { container } = renderWithProviders(
       <Theme name="dark">
         <Separator />
       </Theme>,
     );
     const separator = getSeparator(container);
-    expect(separator.className).toMatch(/_bg-borderColo/);
-    expect(separator.className).toMatch(/_h-1px/);
+    expect(declared(separator, "background-color")).toEqual(["var(--borderColor)"]);
+    expect(declared(separator, "height")).toEqual(["1px"]);
   });
 });
 
@@ -85,14 +122,14 @@ describe("Separator — quiet variant (§7.3: opacity 0.5, never a lighter colou
   it("dims with opacity 0.5 and keeps the exact same paint token", () => {
     const { container } = renderWithProviders(<Separator quiet />);
     const separator = getSeparator(container);
-    expect(separator.className).toMatch(/_o-0d0t5/);
-    // Never a lighter colour: the background atom is unchanged from default.
-    expect(separator.className).toMatch(/_bg-borderColo/);
+    expect(declared(separator, "opacity")).toEqual(["0.5"]);
+    // Never a lighter colour: the paint token is unchanged from the default.
+    expect(declared(separator, "background-color")).toEqual(["var(--borderColor)"]);
   });
 
   it("default separator carries no opacity dim", () => {
     const { container } = renderWithProviders(<Separator />);
-    expect(getSeparator(container).className).not.toMatch(/_o-0d0t5/);
+    expect(declared(getSeparator(container), "opacity")).toEqual([]);
   });
 });
 
@@ -100,8 +137,8 @@ describe("Separator — vertical (§7.3: vertical separators are 1px wide)", ()
   it("is 1px wide, releases the horizontal height, and declares its orientation", () => {
     const { container } = renderWithProviders(<Separator vertical />);
     const separator = getSeparator(container);
-    expect(separator.className).toMatch(/_w-1px/);
-    expect(separator.className).not.toMatch(/_w-0d0t5px/);
+    expect(declared(separator, "width")).toEqual(["1px"]);
+    expect(declared(separator, "height")).toEqual(["auto"]);
     expect(separator.getAttribute("aria-orientation")).toBe("vertical");
   });
 
@@ -115,10 +152,10 @@ describe("Separator — DG-OVF-07: never leftover space", () => {
   it("cannot grow or shrink (flex: none discipline on the painting edge)", () => {
     const { container } = renderWithProviders(<Separator />);
     const separator = getSeparator(container);
-    expect(separator.className).toMatch(/_fg-0/);
-    expect(separator.className).toMatch(/_fs-0/);
-    // The raw primitive was a `flex: 1` item — the defect DG-OVF-07 measured.
-    expect(separator.className).not.toMatch(/_fg-1/);
+    // The raw primitive it replaced declares `flex: 1` — the defect DG-OVF-07
+    // measures — so both ends of the flex story are pinned here.
+    expect(declared(separator, "flex-grow")).toEqual(["0"]);
+    expect(declared(separator, "flex-shrink")).toEqual(["0"]);
   });
 });
 
@@ -126,7 +163,6 @@ describe("Separator — consumer eject stays the last word (STD-EJECT-LAST)", ()
   it("an explicit backgroundColor prop wins over the house paint", () => {
     const { container } = renderWithProviders(<Separator backgroundColor="$red9" />);
     const separator = getSeparator(container);
-    expect(separator.className).toMatch(/_bg-red9/);
-    expect(separator.className).not.toMatch(/_bg-borderColo/);
+    expect(declared(separator, "background-color")).toEqual(["var(--red9)"]);
   });
 });

package/src/Separator/index.tsx

@@ -1,15 +1,33 @@
 /**
- * House Separator — a rule that actually paints (MPO-47).
+ * House Separator — the catalog rule (MPO-47).
  *
  * The raw tamagui Separator rode the curated re-export as a "layout primitive
- * with no house replacement" and painted NOTHING on every measured board:
- * 96 of 96 separators across the action-and-feedback gallery measured
- * height 1px, background-color rgba(0,0,0,0), border-top-width 0px — a 1px
- * gap where a line should be. LC-45 / LC-70 forbid a raw primitive behind a
- * bare catalog name; this is the house implementation. The paint recipe is
- * lifted from DropdownMenu's proven private SeparatorLine (a FILLED line, not
- * a border — Blink floors sub-1px borders and drops 0-height bordered boxes
- * out of paint entirely, which is how the raw one shipped invisible).
+ * with no house replacement". Two measured reasons it may not:
+ *
+ * - LC-45 / LC-70: a bare name a house barrel exports is a catalog part, and
+ *   this one resolved to a raw primitive.
+ * - DG-OVF-07: the raw primitive declares `flex: 1`
+ *   (@tamagui/separator@2.7.6 Separator.tsx), so the rule is CAPABLE of
+ *   absorbing free space — the exact defect DG-OVF-07 names.
+ *
+ * The paint recipe is lifted from DropdownMenu's proven private
+ * SeparatorLine: a FILLED line rather than a border, because Blink floors
+ * sub-1px border widths and a filled fractional height is crisp in every
+ * engine.
+ *
+ * MEASUREMENT CORRECTION (2026-09-01). MPO-47's headline — "96 of 96
+ * separators paint nothing: height 1px, background rgba(0,0,0,0),
+ * border-top-width 0px" — was a PROBE ARTEFACT, not a defect. The gallery
+ * probe computed `paints = backgroundColor.alpha > 0 || borderTopWidth > 0`,
+ * while tamagui's Separator paints with borderBOTTOMWidth (horizontal) and
+ * borderRIGHTWidth (vertical), so the expression was structurally blind to
+ * the one primitive it audited. The shots that reading produced carry the
+ * painted 1px $borderColor rules in their own pixels, in both schemes; a
+ * pixel audit of all 52 action-and-feedback shots finds at least as many
+ * painted 1px $borderColor rules as the sidecar called blank, on every
+ * board. The raw rule did paint. It was still the wrong thing behind a
+ * catalog name, and it could still flex-grow — which is why this component
+ * stands.
  *
  * Measured law (tamagui-rendered-reference.md §7.3):
  * - 1 CSS px, never 0.5px. Vertical separators are 1px wide.

package/src/Text.native.spec.tsx

@@ -0,0 +1,144 @@
+/**
+ * House Text knob wiring, NATIVE arm (MPO-20). Sibling of
+ * ./Heading.native.spec.tsx — see its header for WHY the arm is a separate
+ * file (the `vi.resetModules()` version returned a split module graph and
+ * proved nothing) and for what a `.native` spec can and cannot claim.
+ */
+import { cleanup, screen } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Paragraph, SizableText, Text } from "./Text";
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  isWeb: false,
+  isNative: true,
+}));
+
+afterEach(cleanup);
+
+const LABEL = "Measure the text node";
+
+function classesByPrefix(el: Element, prefixes: string[]): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+/** Tamagui font-scope class on the TEXT NODE (`font_body` / `font_mono` / …). */
+function fontScopeClass(el: Element): string {
+  return (
+    String((el as HTMLElement).className || "")
+      .split(" ")
+      .find((c) => c.startsWith("font_")) ?? ""
+  );
+}
+
+/** Render, read the TEXT NODE's prefixed classes, clean up. */
+function renderTextClasses(node: React.ReactElement, prefixes: string[]): string[] {
+  renderWithProviders(node);
+  const textNode = screen.getByText(LABEL);
+  const classes = classesByPrefix(textNode, prefixes);
+  cleanup();
+  return classes;
+}
+
+describe("house Text — NATIVE environment (isWeb false)", () => {
+  it("really is running with the native platform flags", async () => {
+    const platform = await import("@multiplatform.one/platform");
+    expect(platform.isWeb).toBe(false);
+    expect(platform.isNative).toBe(true);
+  });
+
+  it("changes colour on a textAccent flip", () => {
+    const high = renderTextClasses(
+      <Preset overrides={{ textAccent: "high" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    const low = renderTextClasses(
+      <Preset overrides={{ textAccent: "low" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_col-"],
+    );
+    expect(high).not.toHaveLength(0);
+    expect(high).not.toEqual(low);
+  });
+
+  it("changes weight on a fontWeight flip, pinned to the 400/700 label law", () => {
+    const regular = renderTextClasses(
+      <Preset overrides={{ fontWeight: "regular" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    const bold = renderTextClasses(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    const explicit400 = renderTextClasses(<Text fontWeight="400">{LABEL}</Text>, ["_fow-"]);
+    const explicit700 = renderTextClasses(<Text fontWeight="700">{LABEL}</Text>, ["_fow-"]);
+    expect(regular).not.toHaveLength(0);
+    expect(regular).not.toEqual(bold);
+    expect(regular).toEqual(explicit400);
+    expect(bold).toEqual(explicit700);
+  });
+
+  it("changes family on a bodyFont flip — the props channel, not the CSS rescue", () => {
+    const scope = (node: React.ReactElement) => {
+      renderWithProviders(node);
+      const cls = fontScopeClass(screen.getByText(LABEL));
+      cleanup();
+      return cls;
+    };
+    const sans = scope(
+      <Preset overrides={{ bodyFont: "sans-serif" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+    );
+    const mono = scope(
+      <Preset overrides={{ bodyFont: "mono" }}>
+        <Text>{LABEL}</Text>
+      </Preset>,
+    );
+    expect(sans).not.toBe("");
+    expect(sans).not.toBe(mono);
+    expect(mono).toBe("font_mono");
+  });
+
+  it("carries the same knobs on the sibling body voices", () => {
+    for (const Voice of [SizableText, Paragraph]) {
+      const high = renderTextClasses(
+        <Preset overrides={{ textAccent: "high" }}>
+          <Voice>{LABEL}</Voice>
+        </Preset>,
+        ["_col-"],
+      );
+      const low = renderTextClasses(
+        <Preset overrides={{ textAccent: "low" }}>
+          <Voice>{LABEL}</Voice>
+        </Preset>,
+        ["_col-"],
+      );
+      expect(high).not.toHaveLength(0);
+      expect(high).not.toEqual(low);
+    }
+  });
+
+  it("explicit consumer props still eject (STD-EJECT-LAST)", () => {
+    const ejected = renderTextClasses(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <Text fontWeight="400">{LABEL}</Text>
+      </Preset>,
+      ["_fow-"],
+    );
+    const explicit400 = renderTextClasses(<Text fontWeight="400">{LABEL}</Text>, ["_fow-"]);
+    expect(ejected).toEqual(explicit400);
+  });
+});

package/src/Text.spec.tsx

@@ -12,19 +12,18 @@
  * family. Between knob flips and against explicit-prop renders of the
  * same value. Hashed class names are compared by identity only.
  *
- * WEB arm: the default module graph (isWeb true).
- * NATIVE arm: `@multiplatform.one/platform` mocked to isWeb:false on a fresh
- * module graph (the resolveKnobs.spec.ts elevation-native pattern), with
- * Preset/render/Text all imported from that same graph. FontKnobStyles'
- * CSS-variable rescue is absent in BOTH arms (renderWithProviders mounts no
- * theme provider), so a flip that reaches the node proves the PROPS channel
- * — the only channel native has.
+ * This file is the WEB arm (the default module graph, isWeb true). The NATIVE
+ * arm is ./Text.native.spec.tsx, a separate FILE so that a file-scoped
+ * `vi.mock` gives it one coherent module graph. FontKnobStyles' CSS-variable
+ * rescue is absent in BOTH arms (renderWithProviders mounts no theme
+ * provider), so a flip that reaches the node proves the PROPS channel — the
+ * only channel native has.
  */
 import { cleanup, screen } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset } from "@multiplatform.one/theme";
 import { XStack } from "tamagui";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it } from "vitest";
 import { Text } from "./Text";
 
 afterEach(cleanup);
@@ -182,65 +181,8 @@ describe("house Text — fontWeight and bodyFont reach the text node", () => {
   });
 });
 
-describe("house Text — NATIVE environment (isWeb false, fresh module graph)", () => {
-  it("textAccent and fontWeight flips still reach the text node", async () => {
-    vi.resetModules();
-    vi.doMock("@multiplatform.one/platform", async (importOriginal) => ({
-      ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
-      isWeb: false,
-      isNative: true,
-    }));
-    try {
-      // Everything must come from the SAME fresh graph: a Preset from the
-      // old graph would provide a context the fresh Text never reads.
-      const [{ Text: NativeText }, { Preset: NativePreset }, testUtils, testingLibrary] =
-        await Promise.all([
-          import("./Text"),
-          import("@multiplatform.one/theme"),
-          import("@multiplatform.one/test-utils"),
-          import("@testing-library/react"),
-        ]);
-
-      const renderNative = (node: React.ReactElement, prefixes: string[]): string[] => {
-        testUtils.renderWithProviders(node);
-        const el = testingLibrary.screen.getByText(LABEL);
-        const classes = classesByPrefix(el, prefixes);
-        testingLibrary.cleanup();
-        return classes;
-      };
-
-      const high = renderNative(
-        <NativePreset overrides={{ textAccent: "high" }}>
-          <NativeText>{LABEL}</NativeText>
-        </NativePreset>,
-        ["_col-"],
-      );
-      const low = renderNative(
-        <NativePreset overrides={{ textAccent: "low" }}>
-          <NativeText>{LABEL}</NativeText>
-        </NativePreset>,
-        ["_col-"],
-      );
-      expect(high).not.toHaveLength(0);
-      expect(high).not.toEqual(low);
-
-      const regular = renderNative(
-        <NativePreset overrides={{ fontWeight: "regular" }}>
-          <NativeText>{LABEL}</NativeText>
-        </NativePreset>,
-        ["_fow-"],
-      );
-      const bold = renderNative(
-        <NativePreset overrides={{ fontWeight: "bold" }}>
-          <NativeText>{LABEL}</NativeText>
-        </NativePreset>,
-        ["_fow-"],
-      );
-      expect(regular).not.toHaveLength(0);
-      expect(regular).not.toEqual(bold);
-    } finally {
-      vi.doUnmock("@multiplatform.one/platform");
-      vi.resetModules();
-    }
-  });
-});
+// 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
+// threw "Missing theme." instead of measuring anything. A file-scoped
+// `vi.mock` in its own spec file is one coherent graph.

package/src/Tooltip/tooltipGapContract.spec.ts

@@ -0,0 +1,54 @@
+/**
+ * MPO-38 AC-7, the source half: Tooltip owns no gap constant of its own.
+ *
+ * The runtime value is asserted where it lives — `layoutTokens.spec.ts` pins
+ * `OVERLAY_ANCHOR_GAP` at 4. Asserting that number again from a Tooltip spec
+ * proves nothing about Tooltip: it passes just as happily if this component
+ * goes back to a hardcoded `offset={4}`, which is exactly the drift the AC
+ * was written to close.
+ *
+ * So this is the source half, in the shape of `panelWidthContract.spec.ts`.
+ * A Tooltip is a FREE overlay — no trigger to attach to — so it is one of the
+ * few overlays `OVERLAY_ANCHOR_GAP` still governs after the cover ruling
+ * (`OVERLAY_ATTACH_GAP = 0`). It must READ that token rather than restate its
+ * value under a second name (LC-16 ONE-IMPLEMENTATION).
+ *
+ * Both twins are checked. The web/native split is where a duplicate constant
+ * survives longest: fixing one file and leaving the other still renders the
+ * right gap on the platform anyone happened to look at.
+ */
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+const tooltipDir = dirname(fileURLToPath(import.meta.url));
+
+/** The web twin, the native twin, and the module they share. */
+const tooltipSources = ["index.tsx", "index.native.tsx", "tooltipShared.tsx"];
+
+function read(relative: string): string {
+  return readFileSync(resolve(tooltipDir, relative), "utf8");
+}
+
+describe("Tooltip gap contract (MPO-38 AC-7)", () => {
+  it.each(tooltipSources)("%s declares no gap constant of its own", (relative) => {
+    // Named for the constant this AC deleted, but the assertion is the rule,
+    // not the name: any local OFFSET/GAP constant is the same drift again.
+    expect(read(relative)).not.toMatch(/\b(?:const|let|var)\s+\w*(?:OFFSET|GAP)\w*\s*=/);
+  });
+
+  it.each(["index.tsx", "index.native.tsx"])(
+    "%s positions the bubble with the shared FREE-overlay token",
+    (relative) => {
+      const source = read(relative);
+      expect(source).toMatch(
+        /import\s*\{[^}]*\bOVERLAY_ANCHOR_GAP\b[^}]*\}\s*from\s*"@multiplatform\.one\/theme"/s,
+      );
+      expect(source).toContain("offset={OVERLAY_ANCHOR_GAP}");
+      // A literal offset is the regression: it renders the same 4px today and
+      // silently stops tracking the token the moment the house rule moves.
+      expect(source).not.toMatch(/offset=\{\s*\d/);
+    },
+  );
+});

package/src/Wizard/Wizard.spec.tsx

@@ -1,8 +1,9 @@
 import { Form, Input, Switch, useFormContext } from "@multiplatform.one/forms";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { __resetDevWarnSeen } from "@multiplatform.one/theme";
 import { act, fireEvent } from "@testing-library/react";
 import { useEffect } from "react";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { Wizard, useWizard, type WizardFormLike, type WizardStep } from "./index";
 
 const STEPS: WizardStep[] = [
@@ -214,6 +215,27 @@ describe("Wizard LC-63 / DG-VAL", () => {
   });
 });
 
+describe("Wizard LC-57 guardrail-clean at rest", () => {
+  it("a ready wizard at rest emits zero [theme] guardrail warnings", async () => {
+    __resetDevWarnSeen();
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => undefined);
+    const error = vi.spyOn(console, "error").mockImplementation(() => undefined);
+    try {
+      renderWizard();
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+      const themeWarns = [...warn.mock.calls, ...error.mock.calls]
+        .map((args) => String(args[0]))
+        .filter((msg) => msg.startsWith("[theme]"));
+      expect(themeWarns).toEqual([]);
+    } finally {
+      warn.mockRestore();
+      error.mockRestore();
+    }
+  });
+});
+
 describe("Wizard states", () => {
   it("draws loading, empty, and error shells", () => {
     const loading = renderWithProviders(

package/src/Wizard/index.tsx

@@ -521,17 +521,10 @@ function WizardRoot({
         {...props}
       >
         <YStack data-wizard-rail="" width="100%">
-          {/*
-           * MPO-81: no `labels` prop here. ProgressStepsProps does not declare
-           * one and ProgressSteps reads no such prop, so passing it was inert
-           * at runtime and failed the build with TS2322. `hideLabels` still
-           * drives the per-step caption below, which is where it has always
-           * had a real effect. Re-add the pass in the same change that gives
-           * ProgressSteps a labels prop it actually honours.
-           */}
           <ProgressSteps
             steps={railSteps}
             current={current}
+            labels={hideLabels ? "hidden" : "visible"}
             compact={compact}
             linear
             onStepChange={(index) => {

package/src/code/CodeBlock/CodeBlock.spec.tsx

@@ -85,19 +85,19 @@ function greet() {
 describe("CodeBlock", () => {
   it("keeps the copy action reachable at the 44px press floor", () => {
     renderWithProviders(<CodeBlock>const x = 1;</CodeBlock>);
-    const button = screen.getByLabelText("Copy code to clipboard");
+    const button = screen.getByLabelText("Copy to clipboard");
     expect(button).toBeTruthy();
     expect(button.getAttribute("data-press-min")).toBe(String(MIN_PRESS_TARGET));
+    // Default knob: the glyph-ring end-cap square itself meets the floor
+    // (44). Smaller size steps keep the floor by spilling hitSlop instead
+    // (CodeBlock.copy.spec covers the 36/52 cap geometry).
+    expect(Number(button.getAttribute("data-end-cap"))).toBeGreaterThanOrEqual(MIN_PRESS_TARGET);
     const style = getComputedStyle(button);
     expect(style.display).not.toBe("none");
-    const minWidth = Number.parseFloat(style.minWidth);
-    const minHeight = Number.parseFloat(style.minHeight);
-    if (!Number.isNaN(minWidth)) expect(minWidth).toBeGreaterThanOrEqual(MIN_PRESS_TARGET);
-    if (!Number.isNaN(minHeight)) expect(minHeight).toBeGreaterThanOrEqual(MIN_PRESS_TARGET);
   });
 
   it("hides the copy action only when disableCopy is set", () => {
     renderWithProviders(<CodeBlock disableCopy>const x = 1;</CodeBlock>);
-    expect(screen.queryByLabelText("Copy code to clipboard")).toBeNull();
+    expect(screen.queryByLabelText("Copy to clipboard")).toBeNull();
   });
 });