@multiplatform.one/forms 6.4.2 → 6.6.0

package/src/fields/Geolocation/GeolocationMap.native.tsx

@@ -36,10 +36,10 @@ function MapFallback({ lat, lng, minHeight }: { lat: number; lng: number; minHei
       backgroundColor="$backgroundHover"
       gap="$1"
     >
-      <Text color="$colorSubtle" fontSize="$2">
+      <Text color="$color11" fontSize="$2">
         {t("Map preview unavailable — requires expo-maps")}
       </Text>
-      <Text color="$colorSubtle" fontSize="$1">
+      <Text color="$color11" fontSize="$1">
         {`${lat.toFixed(4)}, ${lng.toFixed(4)}`}
       </Text>
     </YStack>

package/src/fields/ImageField/ImageField.stories.tsx

@@ -135,7 +135,8 @@ export const ReadOnly: Story = {
 export const WithError: Story = {
   args: {
     label: "Required Image",
-    error: "Please upload an image",
+    // DG-COPY-02: error copy states the rule broken — never "please"/"invalid"/"error".
+    error: "An image is required",
     required: true,
     imageWidth: 64,
     imageHeight: 64,

package/src/fields/Input/Input.stories.tsx

@@ -115,7 +115,26 @@ export const SkeletonState: Story = {
   args: { label: "Full name", skeleton: true },
 };
 
+/**
+ * FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY): the right column renders the
+ * RAW tamagui Input beside the house Input strictly so the difference stays
+ * visible. Raw primitives here are by design and labeled — knob/contrast probes
+ * skip this story via `parameters.foreignContrastSpecimen`.
+ */
 export const Comparison: StoryObj = {
+  name: "Foreign contrast specimen (raw tamagui)",
+  parameters: {
+    // Machine-readable exemption for knob/contrast probes and the LC-56 linter arm.
+    foreignContrastSpecimen: true,
+    docs: {
+      description: {
+        story:
+          "FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY). The right column is the raw " +
+          "tamagui Input, rendered for contrast only: it ignores house knobs and field " +
+          "recipes by design. Probes asserting house rendering must skip this story.",
+      },
+    },
+  },
   render: () => {
     const ComparisonExample = () => {
       const [customVal, setCustomVal] = useState("");

package/src/fields/Progress/Progress.stories.tsx

@@ -169,7 +169,26 @@ export const Interactive: Story = {
   },
 };
 
+/**
+ * FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY): the right column renders the
+ * RAW tamagui Progress beside the house Progress strictly so the difference
+ * stays visible. Raw primitives here are by design and labeled — knob/contrast
+ * probes skip this story via `parameters.foreignContrastSpecimen`.
+ */
 export const Comparison: Story = {
+  name: "Foreign contrast specimen (raw tamagui)",
+  parameters: {
+    // Machine-readable exemption for knob/contrast probes and the LC-56 linter arm.
+    foreignContrastSpecimen: true,
+    docs: {
+      description: {
+        story:
+          "FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY). The right column is the raw " +
+          "tamagui Progress, rendered for contrast only: it ignores house knobs and " +
+          "recipes by design. Probes asserting house rendering must skip this story.",
+      },
+    },
+  },
   render: () => (
     <XStack gap="$6" alignItems="flex-start" padding="$4">
       <YStack gap="$3" width={300}>

package/src/fields/RadioGroup/RadioGroup.spec.tsx

@@ -1,8 +1,16 @@
 import { useForm } from "@tanstack/react-form";
-import { act, fireEvent, waitFor } from "@testing-library/react";
-import { YStack } from "tamagui";
+import { act, fireEvent, render, waitFor } from "@testing-library/react";
+import { TamaguiProvider, YStack, createTamagui } from "tamagui";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { RadioGroup } from "./index";
@@ -13,6 +21,21 @@ const mockOptions = [
   { label: "Option 3", value: "option3" },
 ];
 
+// House builder themes for LC-05 mark assertions — created at MODULE scope:
+// tamagui registers a config's theme variables globally at createTamagui
+// time, and a config created after the first render (inside a test body)
+// never resolves its tokens (Progress.spec pattern).
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as any,
+});
+
 let consoleErrorSpy: ReturnType<typeof vi.spyOn> | null = null;
 beforeEach(() => {
   consoleErrorSpy = vi.spyOn(console, "error").mockImplementation((...args: unknown[]) => {
@@ -266,6 +289,95 @@ describe("RadioGroup Components", () => {
       });
     });
 
+    describe("late-arriving value display (create-mode seeding)", () => {
+      // The non-card variant fed the current value into tamagui as mount-only
+      // `defaultValue`, so a value applied AFTER first paint (create-mode
+      // engine seeding lands once meta loads) never displayed. The group must
+      // render controlled — and adopting a programmatic value must not emit
+      // onChange (LC-14: a seeded value is not a user edit).
+      const getRadioByValue = (container: ParentNode, value: string) =>
+        [...container.querySelectorAll("[role='radio']")].find((radio) =>
+          radio.id.endsWith(`-${value}`),
+        );
+
+      it("standalone controlled: a value arriving after mount renders checked, without onChange", async () => {
+        const onChange = vi.fn();
+        const onValueChange = vi.fn();
+        const result = renderWithProviders(
+          <RadioGroup
+            label="Status"
+            value=""
+            options={mockOptions}
+            onChange={onChange}
+            onValueChange={onValueChange}
+          />,
+        );
+        for (const radio of result.container.querySelectorAll("[role='radio']")) {
+          expect(radio.getAttribute("aria-checked")).not.toBe("true");
+        }
+
+        // Late seed: the upstream doc value arrives after first paint.
+        result.rerender(
+          <RadioGroup
+            label="Status"
+            value="option2"
+            options={mockOptions}
+            onChange={onChange}
+            onValueChange={onValueChange}
+          />,
+        );
+        await waitFor(() => {
+          expect(getRadioByValue(result.container, "option2")?.getAttribute("aria-checked")).toBe(
+            "true",
+          );
+        });
+        expect(onChange).not.toHaveBeenCalled();
+        expect(onValueChange).not.toHaveBeenCalled();
+      });
+
+      it("form-integrated: a field value set after mount renders checked, without onChange", async () => {
+        const onChange = vi.fn();
+        let formApi: { setFieldValue: (name: "option", value: string) => void } | undefined;
+        const TestComponent = () => {
+          const form = useForm({ defaultValues: { option: "" } });
+          formApi = form as unknown as typeof formApi;
+          return (
+            <Form form={form}>
+              <RadioGroup label="Status" name="option" options={mockOptions} onChange={onChange} />
+            </Form>
+          );
+        };
+        const result = renderWithProviders(<TestComponent />);
+
+        await act(async () => {
+          formApi?.setFieldValue("option", "option3");
+        });
+        await waitFor(() => {
+          expect(getRadioByValue(result.container, "option3")?.getAttribute("aria-checked")).toBe(
+            "true",
+          );
+        });
+        expect(onChange).not.toHaveBeenCalled();
+      });
+
+      it("still emits exactly once for a real click after a late seed", async () => {
+        const onChange = vi.fn();
+        const result = renderWithProviders(
+          <RadioGroup label="Status" value="" options={mockOptions} onChange={onChange} />,
+        );
+        result.rerender(
+          <RadioGroup label="Status" value="option1" options={mockOptions} onChange={onChange} />,
+        );
+        const radio = getRadioByValue(result.container, "option2");
+        expect(radio).toBeTruthy();
+        await act(async () => {
+          if (radio) fireEvent.click(radio);
+        });
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith("option2");
+      });
+    });
+
     describe("card mode (LC-22 SELECTION-CARD)", () => {
       const cardOptions = [
         { label: "Card A", value: "a", description: "Description for A" },
@@ -326,5 +438,30 @@ describe("RadioGroup Components", () => {
         expect(new Set(ids).size).toBe(2);
       });
     });
+
+    describe("selected mark (LC-05 ONE-EMPHASIS / D-01)", () => {
+      it("paints the checked radio's indicator dot with the accent mark, never ink", () => {
+        const { container } = render(
+          <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+            <RadioGroup label="Choose" value="option2" options={mockOptions} />
+          </TamaguiProvider>,
+        );
+        const checked = container.querySelector('[role="radio"][aria-checked="true"]');
+        expect(checked).toBeTruthy();
+        // The indicator dot is the selection mark: it fills with the shared
+        // accent mark token ($accentBackground), not the ink/label tier.
+        const marked = Array.from(checked!.querySelectorAll("*")).filter((el) =>
+          (el as HTMLElement).className?.toString().includes("_bg-accentBackg"),
+        );
+        expect(marked.length).toBeGreaterThan(0);
+        // Unchecked radios render no accent mark.
+        const unchecked = container.querySelector('[role="radio"][aria-checked="false"]');
+        expect(unchecked).toBeTruthy();
+        const uncheckedMarked = Array.from(unchecked!.querySelectorAll("*")).filter((el) =>
+          (el as HTMLElement).className?.toString().includes("_bg-accentBackg"),
+        );
+        expect(uncheckedMarked.length).toBe(0);
+      });
+    });
   });
 });

package/src/fields/RadioGroup/index.tsx

@@ -280,7 +280,7 @@ export function RadioGroup({
         borderWidth={radioRingWidth(knobProps.borderRadius.borderWidth)}
         borderRadius={itemRadius}
         outlined={knobProps.outlined}
-        {...(knobProps.transition ? { animation: knobProps.transition } : undefined)}
+        {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
       >
         <RadioIndicatorFrame
           borderRadius={indicatorRadius}
@@ -288,7 +288,7 @@ export function RadioGroup({
           // accent — `textAccentColor` is the LABEL ink tier ($color/$color11)
           // and made the checked radio read as ink, not as chosen (D-01).
           backgroundColor={formSelectedColors.mark}
-          {...(knobProps.transition ? { animation: knobProps.transition } : undefined)}
+          {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
         />
       </RadioGlyph>
     );

package/src/fields/Rating/Rating.spec.tsx

@@ -1,6 +1,15 @@
 import { describe, expect, it, vi } from "vitest";
-import { fireEvent } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { TamaguiProvider, createTamagui } from "tamagui";
 import { Form } from "../../Form";
 import { Rating } from "./index";
 
@@ -8,6 +17,21 @@ const MockStarIcon = ({ size, weight, color }: { size: number; weight: string; c
   <span data-testid="star" data-size={size} data-weight={weight} data-color={color} />
 );
 
+// House builder themes for the LC-05 mark assertion — created at MODULE
+// scope: tamagui registers a config's theme variables globally at
+// createTamagui time, and a config created after the first render (inside a
+// test body) never resolves its tokens (Progress.spec pattern).
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as any,
+});
+
 describe("Rating", () => {
   describe("without form context", () => {
     it("renders with label", () => {
@@ -97,6 +121,24 @@ describe("Rating", () => {
         expect(star.getAttribute("aria-disabled")).toBe("true");
       }
     });
+
+    // LC-05 ONE-EMPHASIS / D-01: the FILLED star is the selection mark, so it
+    // resolves the shared accent mark token; the empty star stays neutral
+    // chrome. Stock test themes carry no $accentBackground, so mount the
+    // house builder themes for real resolution.
+    it("fills selected stars with the accent mark and empty stars with neutral chrome", () => {
+      const { container } = render(
+        <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+          <Rating label="Rate" value={0.6} starIcon={MockStarIcon} />
+        </TamaguiProvider>,
+      );
+      const filled = container.querySelector("[data-rating-star='filled'] [data-testid='star']");
+      const empty = container.querySelector("[data-rating-star='empty'] [data-testid='star']");
+      expect(filled).toBeTruthy();
+      expect(empty).toBeTruthy();
+      expect(filled!.getAttribute("data-color")).toContain("accentBackground");
+      expect(empty!.getAttribute("data-color")).not.toContain("accentBackground");
+    });
   });
 
   describe("with form context", () => {

package/src/fields/Rating/index.tsx

@@ -49,7 +49,10 @@ function PointyStar({
     <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
       <Path
         d={d}
-        fill={weight === "fill" ? color : "none"}
+        // `transparent` rather than `none`: an empty->filled star has to
+        // interpolate its fill (LC-25), and `none` is not a colour so it can
+        // only jump. Paints identically.
+        fill={weight === "fill" ? color : "transparent"}
         stroke={color}
         strokeWidth={1.5}
         strokeLinejoin="miter"
@@ -80,6 +83,32 @@ function getTransitionStyle(transition: TransitionProp | undefined, live: boolea
   };
 }
 
+// LC-25, star ink: the visible change is the SVG `fill`/`stroke` of the glyph
+// CHILD, and `transition` does not inherit — a declaration on the wrapper can
+// never reach it, while the swappable `starIcon` contract ({ size, weight,
+// color }) has no style passthrough to declare it on. A one-shot descendant
+// stylesheet (Spinner/Wheel pattern) arms the tween on whatever glyph the
+// contract renders, so the contract itself stays untouched.
+const INK_STYLE_ID = "mp1-rating-ink";
+const inkClassName = (token: string) => `mp1-rating-ink-${token}`;
+function ensureRatingInkStyles() {
+  if (!isWeb || typeof document === "undefined") return;
+  if (document.getElementById(INK_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = INK_STYLE_ID;
+  // Shape elements only, never the <svg> root: a Phosphor-shaped glyph paints
+  // the root's `fill` and the shape INHERITS it, so arming both would leave
+  // the shape chasing an already-animating value and stretch the tween well
+  // past the token.
+  style.textContent = Object.entries(cssTimings)
+    .map(
+      ([token, timing]) =>
+        `.${inkClassName(token)} svg * { transition: fill ${timing}, stroke ${timing}; }`,
+    )
+    .join("\n");
+  document.head.appendChild(style);
+}
+
 const StarWrapper = styled(View, {
   variants: {
     filled: {
@@ -124,10 +153,19 @@ function StarRow({
   const [scrubFilled, setScrubFilled] = useState<number | null>(null);
   const scrubbing = scrubFilled != null;
   const displayFilled = scrubFilled ?? filledStars;
-  // LC-25: discrete star jumps tween via knob transition (default "quick").
-  // During pointer scrub, omit transition so fill tracks the pointer 1:1.
-  const motionTransition = (knobProps.transition as TransitionProp | undefined) || "quick";
+  // LC-25: discrete star jumps tween via knob transition. During pointer
+  // scrub, omit transition so fill tracks the pointer 1:1. `transition` is
+  // undefined exactly at animation="none" (which prefers-reduced-motion maps
+  // onto), and Axiom 3 says that position is NO motion — not a default one.
+  const motionTransition = knobProps.transition as TransitionProp | undefined;
   const live = scrubbing;
+  ensureRatingInkStyles();
+  const inkToken =
+    isWeb && !live && motionTransition
+      ? (motionTransition as string) in cssTimings
+        ? (motionTransition as string)
+        : "quick"
+      : undefined;
 
   // DG-A11Y keyboard operability: one roving tab stop (ToggleGroup pattern —
   // a group of N buttons is one Tab entry, arrows move within). The stop
@@ -227,6 +265,7 @@ function StarRow({
             data-rating-star={isFilled ? "filled" : "empty"}
             data-rating-index={starNumber}
             {...(!isWeb && !live ? { transition: motionTransition } : {})}
+            {...(inkToken ? { className: inkClassName(inkToken) } : undefined)}
             style={getTransitionStyle(live ? undefined : motionTransition, live)}
           >
             <StarIcon

package/src/fields/SearchInput/SearchInput.spec.tsx

@@ -21,6 +21,17 @@ describe("SearchInput", () => {
     expect(result.container.querySelector("svg")).toBeTruthy();
   });
 
+  it("bidi-isolates the default placeholder (LC-58) and passes explicit ones through", () => {
+    // Default: FSI…PDI framing so the trailing "..." cannot reorder to
+    // "…Search" under RTL; the visible run stays byte-identical inside.
+    const result = renderWithProviders(<SearchInput />);
+    const input = result.container.querySelector("input");
+    expect(input?.getAttribute("placeholder")).toBe("\u2068Search...\u2069");
+    // Explicit placeholders are the consumer's interpolation site — the
+    // component must not double-wrap or mutate them (asserted above too).
+    expect(input?.getAttribute("placeholder")?.slice(1, -1)).toBe("Search...");
+  });
+
   it("fires onChange per keystroke and onSearch after debounce", () => {
     const onChange = vi.fn();
     const onSearch = vi.fn();

package/src/fields/SearchInput/index.tsx

@@ -12,7 +12,7 @@ import type { ReactNode } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { SizeTokens } from "tamagui";
 import { View } from "tamagui";
-import { t } from "../../shared/t";
+import { bidiIsolate, t } from "../../shared/t";
 import { Input } from "../Input";
 import type { InputProps } from "../Input";
 
@@ -60,7 +60,11 @@ export function SearchInput({
   onSearch,
   onClear,
   debounceMs = 300,
-  placeholder = t("Search..."),
+  // Bidi-isolated at the interpolation site (LC-58): under RTL the trailing
+  // weak "..." otherwise reorders to the start ("…Search"). First-strong
+  // isolation keeps a translated RTL placeholder rendering RTL. Consumer
+  // placeholders are the consumer's interpolation site — passed through.
+  placeholder = bidiIsolate(t("Search...")),
   clearable = true,
   disabled,
   size,

package/src/fields/Select/Select.stories.tsx

@@ -303,7 +303,26 @@ export const DynamicOptions: StoryObj<typeof Select> = {
   },
 };
 
+/**
+ * FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY): the right column renders the
+ * RAW tamagui Select beside the house Select strictly so the difference stays
+ * visible. Raw primitives here are by design and labeled — knob/contrast probes
+ * skip this story via `parameters.foreignContrastSpecimen`.
+ */
 export const Comparison: StoryObj<typeof Select> = {
+  name: "Foreign contrast specimen (raw tamagui)",
+  parameters: {
+    // Machine-readable exemption for knob/contrast probes and the LC-56 linter arm.
+    foreignContrastSpecimen: true,
+    docs: {
+      description: {
+        story:
+          "FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY). The right column is the raw " +
+          "tamagui Select, rendered for contrast only: it ignores house knobs and control " +
+          "recipes by design. Probes asserting house rendering must skip this story.",
+      },
+    },
+  },
   render: () => {
     const ComparisonExample = () => {
       const [customValue, setCustomValue] = useState<string>();

package/src/fields/Select/index.tsx

@@ -311,7 +311,7 @@ const SelectItem = memo(function SelectItem({
                 : formInputColors.background.focus,
             },
           })}
-      {...(ctx.knobProps.transition ? { animation: ctx.knobProps.transition } : undefined)}
+      {...(ctx.knobProps.transition ? { transition: ctx.knobProps.transition } : undefined)}
     >
       <Text
         fontFamily={ctx.knobProps.body.fontFamily}
@@ -839,9 +839,14 @@ function FloatingSelectCore({
         cursor="pointer"
         disabled={disabled}
         size={knobProps.sizeToken}
+        // LC-54 PRESS-FLOOR: the size knob may shrink chrome (compact → $3
+        // = 36px) but the trigger's press target never drops below 44 —
+        // same minHeight floor the house Button holds. Without it a compact
+        // Select sat 36px beside 44px Inputs/Buttons in one control row.
+        minHeight={44}
         {...(inTableCell
-          ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-            { minHeight: 44 }
+          ? // Chromeless in cells (the floor above still applies).
+            {}
           : {
               borderRadius: knobProps.borderRadius.borderRadius,
               borderWidth: knobProps.borderRadius.borderWidth,
@@ -1257,9 +1262,11 @@ function NativeSelectCore({
         <InputParts.Box
           disabled={disabled}
           size={knobProps.sizeToken}
+          // LC-54 PRESS-FLOOR: ≥44px trigger target at every size (matches
+          // the web trigger branch above).
+          minHeight={44}
           {...(inTableCell
-            ? // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
-              { minHeight: 44 }
+            ? {}
             : {
                 borderRadius: knobProps.borderRadius.borderRadius,
                 borderWidth: knobProps.borderRadius.borderWidth,

package/src/fields/Signature/index.tsx

@@ -454,7 +454,7 @@ function SignatureCanvasImpl({
       opacity={disabled ? 0.6 : 1}
       aspectRatio={aspectRatio}
       minHeight={minHeightPx}
-      {...(knobProps.transition ? { animation: knobProps.transition } : undefined)}
+      {...(knobProps.transition ? { transition: knobProps.transition } : undefined)}
       aria-required={required || undefined}
       aria-invalid={hasError || undefined}
     >

package/src/fields/Slider/Slider.spec.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, renderHook, waitFor } from "@testing-library/react";
 import { getSize } from "@tamagui/get-token";
@@ -205,6 +206,76 @@ describe("Slider", () => {
     });
   });
 
+  describe("late-arriving value display (create-mode seeding)", () => {
+    // The upstream value was fed into tamagui as mount-only `defaultValue`,
+    // so a value applied AFTER first paint (create-mode engine seeding,
+    // form.setFieldValue, live server merge) never moved the thumb. The
+    // slider must run controlled when an upstream value drives it — and
+    // adopting a programmatic value must not emit onChange (LC-14: a seeded
+    // value is not a user edit).
+    const getThumb = (container: ParentNode) =>
+      container.querySelector('[role="slider"]') as HTMLElement | null;
+
+    it("standalone controlled: a value arriving after mount renders, without onChange", async () => {
+      const onChange = vi.fn();
+      const onValueChange = vi.fn();
+      const result = renderWithProviders(
+        <Slider label="Progress" value={[25]} onChange={onChange} onValueChange={onValueChange} />,
+      );
+      expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("25");
+
+      // Late seed: the upstream doc value arrives after first paint.
+      result.rerender(
+        <Slider label="Progress" value={[75]} onChange={onChange} onValueChange={onValueChange} />,
+      );
+      await waitFor(() => {
+        expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("75");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+      expect(onValueChange).not.toHaveBeenCalled();
+    });
+
+    it("form-integrated: a field value set after mount renders, without onChange", async () => {
+      const onChange = vi.fn();
+      let formApi: { setFieldValue: (name: "volume", value: number[]) => void } | undefined;
+      const TestComponent = () => {
+        const form = useForm({ defaultValues: { volume: [10] } });
+        formApi = form as unknown as typeof formApi;
+        return (
+          <Form form={form}>
+            <Slider label="Volume" name="volume" onChange={onChange} />
+          </Form>
+        );
+      };
+      const result = renderWithProviders(<TestComponent />);
+      expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("10");
+
+      await act(async () => {
+        formApi?.setFieldValue("volume", [60]);
+      });
+      await waitFor(() => {
+        expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("60");
+      });
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it("uncontrolled standalone (defaultValue only) still moves on keyboard input", async () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(
+        <Slider label="Free" defaultValue={[40]} onChange={onChange} />,
+      );
+      const thumb = getThumb(result.container);
+      expect(thumb?.getAttribute("aria-valuenow")).toBe("40");
+      await act(async () => {
+        if (thumb) fireEvent.keyDown(thumb, { key: "ArrowRight" });
+      });
+      await waitFor(() => {
+        expect(getThumb(result.container)?.getAttribute("aria-valuenow")).toBe("41");
+      });
+      expect(onChange).toHaveBeenCalledWith([41]);
+    });
+  });
+
   describe("field integration", () => {
     it("should render error text when provided", () => {
       const result = renderWithProviders(
@@ -688,10 +759,24 @@ describe("Slider", () => {
       });
 
       it("track click arms the left/transform tween then disarms after the jump window", async () => {
-        const result = renderWithProviders(
-          // min > 0 so the degenerate unmeasured-layout pointer value stays truthy
-          <Slider label="Jump" name="jump" value={[60]} min={10} max={110} />,
-        );
+        // Controlled slider with the standard feedback loop (value + onChange
+        // echoing back) — a bare static `value` is a frozen controlled input
+        // now that the upstream value really drives tamagui.
+        const JumpExample = () => {
+          const [values, setValues] = useState([60]);
+          return (
+            // min > 0 so the degenerate unmeasured-layout pointer value stays truthy
+            <Slider
+              label="Jump"
+              name="jump"
+              value={values}
+              onChange={setValues}
+              min={10}
+              max={110}
+            />
+          );
+        };
+        const result = renderWithProviders(<JumpExample />);
         const thumb = result.container.querySelector('[role="slider"]') as HTMLElement;
         const track = getTrack(result.container, thumb);
         expect(track).toBeDefined();

package/src/fields/Slider/Slider.stories.tsx

@@ -199,7 +199,26 @@ export const Interactive: Story = {
   },
 };
 
+/**
+ * FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY): the right column renders the
+ * RAW tamagui Slider beside the house Slider strictly so the difference stays
+ * visible. Raw primitives here are by design and labeled — knob/contrast probes
+ * skip this story via `parameters.foreignContrastSpecimen`.
+ */
 export const Comparison: Story = {
+  name: "Foreign contrast specimen (raw tamagui)",
+  parameters: {
+    // Machine-readable exemption for knob/contrast probes and the LC-56 linter arm.
+    foreignContrastSpecimen: true,
+    docs: {
+      description: {
+        story:
+          "FOREIGN CONTRAST SPECIMEN (LC-56 STORY-HONESTY). The right column is the raw " +
+          "tamagui Slider, rendered for contrast only: it ignores house knobs and control " +
+          "recipes by design. Probes asserting house rendering must skip this story.",
+      },
+    },
+  },
   render: () => {
     const ComparisonExample = () => {
       const [customVal, setCustomVal] = useState([50]);