@multiplatform.one/forms 7.7.6 → 7.8.0

package/src/fields/Icon/Icon.spec.tsx

@@ -1,7 +1,8 @@
 import { act, fireEvent, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Icon } from "./index";
+import { Theme } from "tamagui";
+import { DrawnIcon, Icon } from "./index";
 
 describe("Icon", () => {
   it("renders an icon control, not an unsupported-type string", () => {
@@ -56,6 +57,29 @@ describe("Icon", () => {
     });
   });
 
+  it("uses fixed glyph cells and keeps search and selection working", async () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Icon label="Workspace icon" value="mail" onChange={onChange} />,
+    );
+    const input = result.container.querySelector("input")!;
+    fireEvent.click(input);
+    await waitFor(() => expect(document.querySelector('[data-testid="icon-panel"]')).toBeTruthy());
+    for (const cell of document.querySelectorAll('[data-testid^="icon-option-"]')) {
+      // Tamagui extracts literal geometry into atomic classes in this test build.
+      expect(cell).toHaveClass("_w-64px");
+      expect(cell.firstElementChild).toHaveClass("_h-60px");
+    }
+    fireEvent.change(input, { target: { value: "chev" } });
+    await waitFor(() =>
+      expect(document.querySelectorAll('[data-testid^="icon-option-"]')).toHaveLength(4),
+    );
+    expect(input.value).toBe("chev");
+    fireEvent.click(document.querySelector('[data-testid="icon-option-chev-u"]')!);
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith("chev-u"));
+    expect(input.value).toBe("mail");
+  });
+
   it("does not paint typed icon glyphs in the trigger", () => {
     const result = renderWithProviders(<Icon label="Workspace icon" value="mail" />);
     const text = result.container.textContent ?? "";
@@ -64,4 +88,194 @@ describe("Icon", () => {
     }
     expect(result.container.querySelector("svg")).toBeTruthy();
   });
+
+  it("keeps desktop option semantics without adding a second search field", async () => {
+    const result = renderWithProviders(<Icon label="Workspace icon" value="mail" />);
+    fireEvent.click(result.container.querySelector("input")!);
+    await waitFor(() => expect(document.querySelector('[data-testid="icon-panel"]')).toBeTruthy());
+    expect(document.querySelector('[data-testid="icon-sheet-search"]')).toBeNull();
+    expect(document.querySelector('[data-testid="icon-option-mail"]')).toHaveAttribute(
+      "role",
+      "option",
+    );
+    expect(document.querySelector('[data-testid="icon-option-mail"]')).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+  });
+
+  it("lets a narrow sheet search, commit and reopen with a cleared query", async () => {
+    const width = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", { configurable: true, value: 500 });
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Icon label="Workspace icon" value="mail" onChange={onChange} />,
+    );
+    try {
+      const input = result.container.querySelector("input")!;
+      fireEvent.click(input);
+      const search = await waitFor(() => {
+        const element = document.querySelector<HTMLInputElement>(
+          '[data-testid="icon-sheet-search"]',
+        );
+        expect(element).toBeTruthy();
+        return element!;
+      });
+      fireEvent.change(search, { target: { value: "chev" } });
+      await waitFor(() =>
+        expect(document.querySelectorAll('[data-testid^="icon-option-"]')).toHaveLength(4),
+      );
+      fireEvent.click(document.querySelector('[data-testid="icon-option-chev-u"]')!);
+      await waitFor(() => expect(onChange).toHaveBeenCalledWith("chev-u"));
+      fireEvent.click(input);
+      await waitFor(() =>
+        expect(document.querySelectorAll('[data-testid^="icon-option-"]')).toHaveLength(16),
+      );
+      expect(
+        document.querySelector<HTMLInputElement>('[data-testid="icon-sheet-search"]')?.value,
+      ).toBe("");
+      fireEvent.click(result.getByLabelText("Clear icon"));
+      expect(onChange).toHaveBeenCalledWith("");
+    } finally {
+      result.unmount();
+      Object.defineProperty(window, "innerWidth", { configurable: true, value: width });
+    }
+  });
+
+  it("returns focus after a sheet pick without reopening and supports keyboard reopening", async () => {
+    const width = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", { configurable: true, value: 500 });
+    const onChange = vi.fn();
+    const result = renderWithProviders(<Icon label="Workspace icon" onChange={onChange} />);
+    try {
+      const input = result.container.querySelector("input")!;
+      await act(async () => input.focus());
+      const search = await waitFor(() => {
+        const element = document.querySelector<HTMLInputElement>(
+          '[data-testid="icon-sheet-search"]',
+        );
+        expect(element).toBeTruthy();
+        return element!;
+      });
+      await act(async () => search.focus());
+      fireEvent.change(search, { target: { value: "chev" } });
+      fireEvent.click(document.querySelector('[data-testid="icon-option-chev-u"]')!);
+      expect(onChange).toHaveBeenCalledWith("chev-u");
+      await act(async () => new Promise((resolve) => setTimeout(resolve, 400)));
+      expect(input).toHaveAttribute("aria-expanded", "false");
+      expect(document.activeElement).toBe(input);
+      fireEvent.keyDown(input, { key: "Enter" });
+      expect(input).toHaveAttribute("aria-expanded", "true");
+    } finally {
+      result.unmount();
+      Object.defineProperty(window, "innerWidth", { configurable: true, value: width });
+    }
+  });
+
+  it("returns desktop pick focus even when pointer capture opened before the input focused", async () => {
+    const result = renderWithProviders(<Icon label="Workspace icon" />);
+    const input = result.container.querySelector("input")!;
+    expect(document.activeElement).not.toBe(input);
+    fireEvent.click(input);
+    const option = await waitFor(() => {
+      const element = document.querySelector<HTMLElement>('[data-testid="icon-option-mail"]');
+      expect(element).toBeTruthy();
+      return element!;
+    });
+    fireEvent.click(option);
+    await act(async () => new Promise((resolve) => setTimeout(resolve, 400)));
+    expect(input).toHaveAttribute("aria-expanded", "false");
+    expect(document.activeElement).toBe(input);
+  });
+
+  it("does not reclaim focus after dismissal onto another field", async () => {
+    const result = renderWithProviders(
+      <>
+        <Icon label="Workspace icon" />
+        <input aria-label="Next field" />
+      </>,
+    );
+    const input = result.container.querySelector("input")!;
+    await act(async () => input.focus());
+    await waitFor(() => expect(document.querySelector('[data-testid="icon-panel"]')).toBeTruthy());
+    const next = result.getByLabelText("Next field");
+    await act(async () => next.focus());
+    fireEvent.pointerDown(next);
+    fireEvent.click(next);
+    await act(async () => new Promise((resolve) => setTimeout(resolve, 400)));
+    expect(input).toHaveAttribute("aria-expanded", "false");
+    expect(document.activeElement).toBe(next);
+  });
+
+  it("allows fresh focus entry after the restore window when the calendar clock is frozen", async () => {
+    const clock = vi.spyOn(Date, "now").mockReturnValue(1_768_478_400_000);
+    const result = renderWithProviders(<Icon label="Workspace icon" />);
+    try {
+      const input = result.container.querySelector("input")!;
+      fireEvent.click(input);
+      await waitFor(() =>
+        expect(document.querySelector('[data-testid="icon-option-mail"]')).toBeTruthy(),
+      );
+      fireEvent.click(document.querySelector('[data-testid="icon-option-mail"]')!);
+      await act(async () => new Promise((resolve) => setTimeout(resolve, 500)));
+      expect(input).toHaveAttribute("aria-expanded", "false");
+      await act(async () => input.blur());
+      await act(async () => input.focus());
+      expect(input).toHaveAttribute("aria-expanded", "true");
+    } finally {
+      result.unmount();
+      clock.mockRestore();
+    }
+  });
+
+  // MPO-72. A glyph outside InputParts.Icon has nothing injecting a colour, and
+  // `currentColor` does not cascade on react-native-svg: iOS resolved it to nil
+  // and Core Graphics then painted with whatever stroke was last in the
+  // context. Every paint has to leave here as a concrete value.
+  it("paints the readOnly glyph with a resolved colour, never currentColor", () => {
+    const result = renderWithProviders(<Icon label="Workspace icon" value="mail" readOnly />);
+    const svg = result.container.querySelector("svg");
+    expect(svg).toBeTruthy();
+    const color = svg?.getAttribute("color");
+    expect(color).toBeTruthy();
+    expect(color).not.toBe("currentColor");
+    // No token survives to the renderer either: "$color11" is not a paint.
+    expect(color?.startsWith("$")).toBe(false);
+    const strokes = Array.from(svg?.querySelectorAll("[stroke]") ?? []).map((el) =>
+      el.getAttribute("stroke"),
+    );
+    expect(strokes.length).toBeGreaterThan(0);
+    for (const stroke of strokes) {
+      expect(stroke).not.toBe("currentColor");
+      expect(stroke?.startsWith("$")).toBe(false);
+    }
+  });
+
+  for (const scheme of ["light", "dark"] as const) {
+    it(`${scheme} resolves default, token, and filled glyph paint`, () => {
+      const { container } = renderWithProviders(
+        <Theme name={scheme}>
+          <DrawnIcon name="mail" />
+          <DrawnIcon name="mail" color="$color11" />
+          <DrawnIcon name="mail" color="currentColor" />
+          <DrawnIcon name="grip" color="$unknownIconToken" />
+          <DrawnIcon name="mail" color="rebeccapurple" />
+        </Theme>,
+      );
+      const svgs = Array.from(container.querySelectorAll("svg"));
+      const ink = svgs[0].getAttribute("color");
+      expect(ink).toBeTruthy();
+      expect(ink).not.toMatch(/^(currentColor|\$)/);
+      for (const svg of svgs.slice(0, 4)) {
+        expect(svg.getAttribute("color")).toBe(ink);
+        for (const part of svg.querySelectorAll("[stroke], [fill]")) {
+          for (const attr of ["stroke", "fill"]) {
+            const paint = part.getAttribute(attr);
+            if (paint && paint !== "none") expect(paint).toBe(ink);
+          }
+        }
+      }
+      expect(svgs[4].getAttribute("color")).toBe("rebeccapurple");
+    });
+  }
 });

package/src/fields/Icon/Icon.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof Icon> = {
     docs: {
       description: {
         component:
-          "Icon picker over FloatingPanel. Options come from the DG-IDN-06 drawn set. Field-shaped panel uses widthMode at-least-trigger.",
+          "Icon picker over FloatingPanel. Options come from the DG-IDN-06 drawn set. The panel matches its field and wraps fixed-size glyph cells.",
       },
     },
   },
@@ -50,6 +50,14 @@ export const Empty: Story = {
   ),
 };
 
+export const Wide: Story = {
+  render: () => (
+    <YStack width={600} maxWidth="100%">
+      <Icon label="Workspace icon" value="mail" />
+    </YStack>
+  ),
+};
+
 export const ReadOnly: Story = {
   render: () => (
     <YStack width={320}>

package/src/fields/Icon/drawnSet.tsx

@@ -1,4 +1,5 @@
 import { Circle, Line, Path, Polyline, Rect, Svg } from "react-native-svg";
+import { useTheme } from "tamagui";
 
 /**
  * The DG-IDN-06 drawn set — geometries lifted from design-mockups-v3/iconset.py
@@ -197,19 +198,53 @@ export function filterDrawnIcons(
   return catalog.filter((name) => name.toLowerCase().includes(needle));
 }
 
+/**
+ * MPO-72 — the glyph paint is resolved here, never left as `currentColor`.
+ *
+ * react-native-svg has no CSS cascade. iOS resolves `currentColor` in
+ * RNSVGRenderable's getCurrentColor: self.color, else the parent Svg's color,
+ * else NIL. DrawnIcon passed no color to its own Svg, so the stroke arrived
+ * nil, CGContextSetStrokeColorWithColor kept whatever was last in the Core
+ * Graphics context, and the picker grid painted one glyph bright and the rest
+ * near-black by draw order.
+ *
+ * A Tamagui token fails one step earlier for the same reason: react-native-svg
+ * wants a color VALUE, so "$color11" would reach Core Graphics unparsed.
+ */
+const drawnIconInkToken = "color11";
+
+function useDrawnInk(color?: string): string | undefined {
+  const theme = useTheme() as unknown as Record<string, { val?: unknown } | undefined>;
+  const raw = !color || color === "currentColor" ? `$${drawnIconInkToken}` : color;
+  const val = raw.startsWith("$") ? theme[raw.slice(1)]?.val : raw;
+  // An unknown consumer token falls back to the active theme's readable ink.
+  const fallback = theme[drawnIconInkToken]?.val ?? theme.color?.val;
+  return typeof val === "string" ? val : typeof fallback === "string" ? fallback : undefined;
+}
+
 export function DrawnIcon({
   name,
   size = 16,
-  color = "currentColor",
+  color,
 }: {
   name: DrawnIconName;
   size?: number;
   color?: string;
 }) {
+  const ink = useDrawnInk(color);
   const geom = GEOM[name];
-  const stroke = geom.fillStroke ? color : "none";
+  const stroke = geom.fillStroke ? ink : "none";
   return (
-    <Svg width={size} height={size} viewBox="0 0 24 24" pointerEvents="none" aria-hidden>
+    <Svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      // Also the parent colour, so any nested `currentColor` resolves to ink
+      // instead of nil.
+      color={ink}
+      pointerEvents="none"
+      aria-hidden
+    >
       {geom.shapes.map((shape, index) => {
         const key = `${name}-${index}`;
         if (shape.kind === "polyline") {
@@ -277,7 +312,7 @@ export function DrawnIcon({
             cx={shape.cx}
             cy={shape.cy}
             r={shape.r}
-            fill={shape.filled ? color : "none"}
+            fill={shape.filled ? ink : "none"}
             stroke={shape.filled ? "none" : stroke}
             strokeWidth={shape.filled ? 0 : geom.strokeWidth}
           />

package/src/fields/Icon/index.tsx

@@ -1,13 +1,20 @@
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { ensureFocusVisibleRing, useResolvedKnobs } from "@multiplatform.one/theme";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+import { Pressable as RNPressable } from "react-native";
+import {
+  ensureFocusVisibleRing,
+  useAaSolidFill,
+  useReadableTextOn,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
+import { useCallback, useEffect, useMemo, useRef, useState, type ComponentRef } from "react";
 import { Text, View, XStack, YStack, isWeb, useProps } from "tamagui";
 import { Field, FieldLayout } from "../../fieldLayout";
 import type { FormFieldProps } from "../../fieldLayout";
 import { Input as InputParts } from "../../InputParts";
-import { FloatingPanel } from "../../FloatingPanel";
+import { FloatingPanel, useViewportGtSm } from "../../FloatingPanel";
 import { Skeleton } from "../../Skeleton";
-import { formCommonColors } from "../../shared/colorRamps";
+import { formCommonColors, formSelectedColors } from "../../shared/colorRamps";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import {
   getFieldError,
@@ -116,10 +123,20 @@ function IconControl({
   const { knobProps } = useResolvedKnobs();
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
+  const suppressFocusOpenUntilRef = useRef(0);
+  const triggerInputRef = useRef<ComponentRef<typeof InputParts.Area>>(null);
+  const viewportGtSm = useViewportGtSm();
+  const shouldUseSheet = !isWeb || !(typeof window !== "undefined" && viewportGtSm);
   const drawn = isDrawnIconName(value) ? value : undefined;
   const matches = useMemo(() => filterDrawnIcons(catalog, query), [catalog, query]);
+  // Ink that reads on the accent fill the selected cell carries (LC-05).
+  const markFill = useAaSolidFill(formSelectedColors.mark);
+  const onMark = useReadableTextOn(markFill);
 
   const closePanel = useCallback(() => {
+    // Focus restoration retries after 320ms in focusManagement.ts. Let that
+    // focus return without reopening; explicit pointer/key actions still open.
+    suppressFocusOpenUntilRef.current = performance.now() + 450;
     setOpen(false);
     setQuery("");
     onBlurControl?.();
@@ -129,6 +146,10 @@ function IconControl({
     (name: DrawnIconName) => {
       onValueChange(name);
       closePanel();
+      // Pointer capture can open before the trigger gets focus, leaving the
+      // shared restore target on body. A completed pick returns to its input.
+      // Other dismissals keep the user's chosen destination; native stays inert.
+      if (isWeb) triggerInputRef.current?.focus();
     },
     [closePanel, onValueChange],
   );
@@ -159,7 +180,12 @@ function IconControl({
         alignItems="center"
         justifyContent="center"
       >
-        {drawn ? <DrawnIcon name={drawn} size={16} /> : <EmptyGlyphWell />}
+        {/* Outside InputParts.Icon, which is what injects a colour. */}
+        {drawn ? (
+          <DrawnIcon name={drawn} size={16} color={formCommonColors.text} />
+        ) : (
+          <EmptyGlyphWell />
+        )}
       </View>
     );
   }
@@ -185,6 +211,7 @@ function IconControl({
           </InputParts.Icon>
           {!inTableCell && (
             <InputParts.Area
+              ref={triggerInputRef}
               id={id}
               value={displayValue}
               placeholder={placeholder}
@@ -202,12 +229,21 @@ function IconControl({
               spellCheck={false}
               onChangeText={open ? setQuery : undefined}
               onFocus={() => {
-                if (!disabled) setOpen(true);
+                if (!disabled && performance.now() > suppressFocusOpenUntilRef.current)
+                  setOpen(true);
+              }}
+              onKeyDown={(e) => {
+                if (open || disabled) return;
+                if (["Enter", " ", "ArrowDown", "ArrowUp"].includes(e.key) || e.code === "Space") {
+                  e.preventDefault();
+                  setOpen(true);
+                }
               }}
             />
           )}
-          {showClear ? (
+          {showClear && isWeb ? (
             <InputParts.Button
+              data-floating-panel-action="true"
               tabIndex={0}
               aria-label={t("Clear icon")}
               disabled={disabled}
@@ -231,15 +267,56 @@ function IconControl({
     </View>
   );
 
+  const sheetSearchHeader = shouldUseSheet ? (
+    <InputParts size={knobProps.sizeToken}>
+      <InputParts.Box>
+        <InputParts.Icon adornment="leading">
+          <MagnifyingGlassIcon size={16} />
+        </InputParts.Icon>
+        <InputParts.Area
+          testID="icon-sheet-search"
+          value={query}
+          placeholder={t("Search icons")}
+          accessibilityLabel={t("Search icons")}
+          aria-label={t("Search icons")}
+          fontFamily="$mono"
+          autoCapitalize="none"
+          autoCorrect={false}
+          returnKeyType="search"
+          onChangeText={setQuery}
+        />
+      </InputParts.Box>
+    </InputParts>
+  ) : undefined;
+  const nativeClear =
+    !isWeb && showClear ? (
+      <InputParts.Button
+        testID="icon-clear-native"
+        aria-label={t("Clear icon")}
+        accessibilityLabel={t("Clear icon")}
+        disabled={disabled}
+        onPress={(e) => {
+          e.stopPropagation();
+          handleClear();
+        }}
+      >
+        <InputParts.Icon>
+          <DrawnIcon name="x" size={16} />
+        </InputParts.Icon>
+      </InputParts.Button>
+    ) : undefined;
+
   return (
     <FloatingPanel
       open={open}
       onOpenChange={handleOpenChange}
       trigger={trigger}
+      triggerEnd={nativeClear}
+      header={sheetSearchHeader}
       disabled={disabled}
       scrollable
       sizing="fill"
-      widthMode="at-least-trigger"
+      widthMode="match-trigger"
       triggerA11y={{
         label: a11yLabel || t("Icon"),
         value: value || placeholder,
@@ -251,7 +328,6 @@ function IconControl({
         id={`${id ?? "icon"}-listbox`}
         {...({ role: "listbox" } as Record<string, unknown>)}
         aria-label={t("Icons")}
-        padding="$2"
       >
         {matches.length === 0 ? (
           <Text
@@ -267,16 +343,18 @@ function IconControl({
           <XStack flexWrap="wrap">
             {matches.map((name) => {
               const selected = name === value;
-              return (
+              const cellInk = (selected && onMark) || formCommonColors.text;
+              const cell = (
                 <View
                   key={name}
-                  role="option"
-                  aria-selected={selected}
+                  {...(isWeb
+                    ? ({ role: "option", "aria-selected": selected } as Record<string, unknown>)
+                    : { pointerEvents: "none" as const })}
                   testID={`icon-option-${name}`}
-                  width="33.333%"
+                  width={64}
                   padding="$1"
                   cursor="pointer"
-                  onPress={() => handlePick(name)}
+                  onPress={isWeb ? () => handlePick(name) : undefined}
                 >
                   <YStack
                     height={60}
@@ -284,16 +362,38 @@ function IconControl({
                     justifyContent="center"
                     gap="$1"
                     borderRadius="$3"
-                    backgroundColor={selected ? "$color3" : "transparent"}
-                    hoverStyle={{ backgroundColor: "$color3" }}
+                    // LC-05 ONE-EMPHASIS: the selected mark is the active
+                    // accent, never a neutral ramp step.
+                    backgroundColor={selected ? markFill : "transparent"}
+                    hoverStyle={selected ? undefined : { backgroundColor: "$color3" }}
                   >
-                    <DrawnIcon name={name} size={16} />
-                    <Text fontFamily="$mono" fontSize={11} color="$color10" numberOfLines={1}>
+                    {/* Outside InputParts.Icon, so the colour is passed here. */}
+                    <DrawnIcon name={name} size={16} color={cellInk} />
+                    <Text
+                      fontFamily="$mono"
+                      fontSize={11}
+                      // $color10 measures 3.95-4.36:1, under the 4.5:1 AA floor
+                      // colorRamps.ts records; step 11 is the lowest that passes.
+                      color={cellInk}
+                      numberOfLines={1}
+                    >
                       {name}
                     </Text>
                   </YStack>
                 </View>
               );
+              if (isWeb) return cell;
+              return (
+                <RNPressable
+                  key={name}
+                  onPress={() => handlePick(name)}
+                  accessibilityRole="button"
+                  accessibilityLabel={name}
+                  accessibilityState={{ selected }}
+                >
+                  {cell}
+                </RNPressable>
+              );
             })}
           </XStack>
         )}

package/src/fields/Input/Input.copy.spec.tsx

@@ -19,6 +19,7 @@ describe("Input copy (CopyField slot)", () => {
 
     expect(input.getAttribute("aria-readonly")).toBe("true");
     expect(copy.getAttribute("tabindex")).toBe("0");
+    expect(copy.getAttribute("aria-label")).toBe("Copy to clipboard");
     expect(copy.className).toMatch(/mp-chip-dismiss/);
     expect(copy.className).not.toMatch(/mp-chip-dismiss-ring/);
     const ring = copy.querySelector(".mp-chip-dismiss-ring");

package/src/fields/Input/Input.spec.tsx

@@ -1,4 +1,5 @@
 import { act, fireEvent, waitFor } from "@testing-library/react";
+import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset } from "@multiplatform.one/theme";
@@ -63,6 +64,55 @@ describe("Input", () => {
     });
   });
 
+  describe("standalone value ownership", () => {
+    it("reflects external controlled updates, including clearing, without remounting", () => {
+      const onChange = vi.fn();
+      const result = renderWithProviders(<Input label="Name" value="corp" onChange={onChange} />);
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      act(() => input.focus());
+      fireEvent.change(input, { target: { value: "edited" } });
+      expect(onChange).toHaveBeenCalledOnce();
+      result.rerender(<Input label="Name" value="external" onChange={onChange} />);
+      expect(input.value).toBe("external");
+      result.rerender(<Input label="Name" value="" onChange={onChange} />);
+      expect(input.value).toBe("");
+      expect(result.container.querySelector("input")).toBe(input);
+      expect(document.activeElement).toBe(input);
+    });
+
+    it("keeps uncontrolled edits when a new default arrives", () => {
+      const result = renderWithProviders(<Input label="Name" defaultValue="corp" />);
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "draft" } });
+      result.rerender(<Input label="Name" defaultValue="external" />);
+      expect(input.value).toBe("draft");
+    });
+
+    it.each(["onChange", "onChangeText"] as const)(
+      "round-trips controlled edits through %s",
+      (callback) => {
+        function ControlledInput() {
+          const [value, setValue] = useState("corp");
+          return (
+            <Input
+              label="Name"
+              value={value}
+              {...(callback === "onChange"
+                ? { onChange: (event) => setValue(event.target.value) }
+                : { onChangeText: setValue })}
+            />
+          );
+        }
+        const result = renderWithProviders(<ControlledInput />);
+        const input = result.container.querySelector("input") as HTMLInputElement;
+        fireEvent.change(input, { target: { value: "draft" } });
+        expect(input.value).toBe("draft");
+        fireEvent.change(input, { target: { value: "" } });
+        expect(input.value).toBe("");
+      },
+    );
+  });
+
   describe("purpose → keyboard/autofill (DG §32)", () => {
     it("purpose=email sets autocomplete + inputmode on the DOM input", () => {
       const result = renderWithProviders(<Input label="Email" name="email" purpose="email" />);

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

@@ -151,8 +151,8 @@ export const Chromeless: Story = {
     label: "Toolbar search",
     chromeless: true,
     placeholder: "Filter…",
-    leftIcon: <MagnifyingGlassIcon />,
   },
+  render: (args) => <Input leftIcon={<MagnifyingGlassIcon />} {...args} />,
 };
 
 /** Loading placeholder — the skeleton mirrors the field's anatomy (LC-20 / DG-ST-02). */