@multiplatform.one/forms 6.4.3 → 6.6.0

package/src/fields/DatePicker/MultiDatePicker.tsx

@@ -32,6 +32,7 @@ import {
   useDateNavigation,
   yearPageSize,
 } from "./parts";
+import { FieldValueSync } from "./fieldValueSync";
 
 import type { ViewMode } from "./parts";
 
@@ -414,19 +415,25 @@ export function MultiDatePicker<
     setOpen(true);
   }, [setDisplayDate]);
 
-  // Keep standalone/controlled state in sync when the parent value changes.
-  // Skip setState when the calendar days are unchanged so a new array identity
-  // from the parent cannot force a render storm.
-  useEffect(() => {
-    if (valueProp === undefined) return;
-    const next = Array.isArray(valueProp) ? valueProp : [];
+  // Adopt an externally-applied value (controlled `value` prop or the live
+  // TanStack field value) into the display state without emitting onChange
+  // (LC-14). Skip setState when the calendar days are unchanged so a new
+  // array identity from the parent cannot force a render storm.
+  const adoptExternalValue = useCallback((raw: unknown) => {
+    const next = Array.isArray(raw) ? (raw as Date[]) : [];
     const prev = selectedDatesRef.current;
     const same =
       prev.length === next.length && prev.every((d, i) => next[i] != null && isSameDay(d, next[i]));
     if (same) return;
     selectedDatesRef.current = next;
     setSelectedDates(next);
-  }, [valueProp]);
+  }, []);
+
+  // Keep standalone/controlled state in sync when the parent value changes.
+  useEffect(() => {
+    if (valueProp === undefined) return;
+    adoptExternalValue(valueProp);
+  }, [valueProp, adoptExternalValue]);
 
   const handleToggleDate = useCallback(
     (date: Date, fieldChange?: (value: any) => void) => {
@@ -560,26 +567,31 @@ export function MultiDatePicker<
         const resolvedError = getFieldError(field, errorProp);
 
         return (
-          <FieldLayout
-            id={id}
-            label={label}
-            labelProps={labelProps}
-            error={resolvedError}
-            helperText={helperText}
-            required={required}
-            size={size}
-            knobProps={knobProps}
-            // LC-40: see standalone branch — FieldLayout carries dimWhole.
-            disabled={disabled}
-          >
-            <InputParts size={size || knobProps.sizeToken}>
-              {renderPopover(
-                !!resolvedError,
-                mergeFieldHandler(field, "handleBlur", _onBlur),
-                mergeFieldHandler(field, "handleChange"),
-              )}
-            </InputParts>
-          </FieldLayout>
+          <>
+            {/* Form branch displays from `selectedDates` — keep it synced to
+                the live field value (late seeds / programmatic updates). */}
+            <FieldValueSync value={field.state.value} onSync={adoptExternalValue} />
+            <FieldLayout
+              id={id}
+              label={label}
+              labelProps={labelProps}
+              error={resolvedError}
+              helperText={helperText}
+              required={required}
+              size={size}
+              knobProps={knobProps}
+              // LC-40: see standalone branch — FieldLayout carries dimWhole.
+              disabled={disabled}
+            >
+              <InputParts size={size || knobProps.sizeToken}>
+                {renderPopover(
+                  !!resolvedError,
+                  mergeFieldHandler(field, "handleBlur", _onBlur),
+                  mergeFieldHandler(field, "handleChange"),
+                )}
+              </InputParts>
+            </FieldLayout>
+          </>
         );
       }}
     </Field>

package/src/fields/DatePicker/fieldValueSync.tsx

@@ -32,3 +32,26 @@ export function DatePickerFieldValueSync({
   }, [value, onSync]);
   return null;
 }
+
+/**
+ * Shape-agnostic variant for pickers whose display state is not a single
+ * Date (MonthPicker's {month,year}, MultiDatePicker's Date[],
+ * DateRangePicker's {start,end}): mirrors the live TanStack field value into
+ * the picker's adoption callback whenever it changes (including mount, so a
+ * Field-level defaultValue displays too). Each picker's `onSync` owns its
+ * coercion + identity-preserving equality guard, and must never emit
+ * onChange from this path (LC-14 — a programmatic value application is not
+ * a user edit).
+ */
+export function FieldValueSync({
+  value,
+  onSync,
+}: {
+  value: unknown;
+  onSync: (value: unknown) => void;
+}) {
+  useEffect(() => {
+    onSync(value);
+  }, [value, onSync]);
+  return null;
+}

package/src/fields/FileUpload/FileUpload.stories.tsx

@@ -107,6 +107,15 @@ export const Basic: Story = {
 };
 
 export const Disabled: Story = {
+  parameters: {
+    // LC-57 allowlist: disabled-dial demo; FileUpload's internal upload Button
+    // has no disabledReason plumbing yet (component-contract follow-up).
+    guardrailSpecimen: {
+      warns: ["bare-disabled"],
+      reason:
+        "Disabled-dial specimen: FileUpload's internal upload Button has no disabledReason plumbing yet.",
+    },
+  },
   render: (args) => <FileUpload {...args} />,
   args: {
     label: "Disabled Upload",
@@ -119,7 +128,8 @@ export const WithError: Story = {
   render: (args) => <FileUpload {...args} />,
   args: {
     label: "Required File",
-    error: "Please upload a file",
+    // DG-COPY-02: error copy states the rule broken — never "please"/"invalid"/"error".
+    error: "A file is required",
     required: true,
   },
 };

package/src/fields/Geolocation/Geolocation.stories.tsx

@@ -95,6 +95,15 @@ export const Basic: Story = {
 };
 
 export const Disabled: Story = {
+  parameters: {
+    // LC-57 allowlist: disabled-dial demo; Geolocation's internal action
+    // Buttons have no disabledReason plumbing yet (component-contract follow-up).
+    guardrailSpecimen: {
+      warns: ["bare-disabled"],
+      reason:
+        "Disabled-dial specimen: Geolocation's internal action Buttons have no disabledReason plumbing yet.",
+    },
+  },
   args: {
     label: "Location",
     helperText: "This field is disabled",

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>();