@multiplatform.one/forms 7.45.1 → 7.47.0

package/src/FormGrid.stories.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { FieldGroup } from "./FieldGroup";
 import { FormGrid } from "./FormGrid";
 import { FormSection, FormSectionStack } from "./FormSection";
 import { Input } from "./fields/Input";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof FormGrid> = {
   title: "Forms/FormGrid",

package/src/FormGrid.tsx

@@ -115,6 +115,7 @@ function FormGridWeb({
     update(el.getBoundingClientRect().width);
 
     if (typeof ResizeObserver === "undefined") {
+      if (typeof window === "undefined" || typeof window.addEventListener !== "function") return;
       const onResize = () => update(el.getBoundingClientRect().width);
       window.addEventListener("resize", onResize);
       return () => window.removeEventListener("resize", onResize);

package/src/FormsIntegration.stories.tsx

@@ -1,15 +1,9 @@
 import { action } from "@multiplatform.one/storybook";
-import {
-  EnvelopeIcon,
-  KeyIcon,
-  MagnifyingGlassIcon,
-  EyeIcon,
-  EyeSlashIcon,
-} from "@phosphor-icons/react";
+import { EnvelopeIcon, KeyIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Paragraph, ScrollView, Separator, View, YStack } from "tamagui";
+import { ScrollView, Separator, View, YStack } from "tamagui";
 import {
   Button,
   Checkbox,
@@ -26,6 +20,7 @@ import {
   useFocusManagement,
 } from "./index";
 import type { AnyFormApi } from "./types";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Form> = {
   title: "Forms/FormsIntegration",
@@ -266,8 +261,6 @@ export const multiStepRegistration: Story = {
 
 export const inputComposition: Story = {
   render: function InputComposition() {
-    const [showPassword, setShowPassword] = useState(false);
-
     return (
       <ScrollView>
         <View padding="$4" maxWidth={600} alignSelf="center">
@@ -283,15 +276,8 @@ export const inputComposition: Story = {
               <Input
                 label="Password"
                 placeholder="Enter password"
-                secureTextEntry={!showPassword}
+                secureTextEntry
                 leftIcon={<KeyIcon />}
-                rightIcon={
-                  showPassword ? (
-                    <EyeSlashIcon cursor="pointer" onClick={() => setShowPassword(false)} />
-                  ) : (
-                    <EyeIcon cursor="pointer" onClick={() => setShowPassword(true)} />
-                  )
-                }
               />
 
               <Input label="Required Field" placeholder="This field is required" required />

package/src/InputParts/InputParts.stories.tsx

@@ -3,12 +3,14 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import {
   EnvelopeIcon,
   EyeIcon,
+  EyeSlashIcon,
   MagnifyingGlassIcon,
   WarningCircleIcon,
 } from "@phosphor-icons/react";
 import { useState } from "react";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Input as InputParts } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof InputParts> = {
   title: "Forms/InputParts",
@@ -107,8 +109,9 @@ export const Adornments: Story = {
 };
 
 /**
- * `InputParts.Button` is the pressable end-cap — a reveal toggle, a clear, a
- * copy. It squares off to the control height so the frame stays rectangular.
+ * `InputParts.Action` is the field's own action (LC-149): a reveal toggle, a
+ * clear, a copy. A chromeless glyph that squares off to the control height
+ * inside the frame, never a bordered button beside it.
  */
 export const TrailingButton: Story = {
   render: () => {
@@ -124,19 +127,16 @@ export const TrailingButton: Story = {
               secureTextEntry={secure}
               onChangeText={action("onChangeText")}
             />
-            <InputParts.Button
-              glyphRing
-              type="button"
-              aria-label={secure ? "Show password" : "Hide password"}
+            <InputParts.Action
+              label={secure ? "Show password" : "Hide password"}
+              pressed={!secure}
               onPress={() => {
                 setSecure((prev) => !prev);
                 action("togglePasswordVisibility")(!secure);
               }}
             >
-              <InputParts.Icon aria-hidden>
-                <EyeIcon />
-              </InputParts.Icon>
-            </InputParts.Button>
+              {secure ? <EyeIcon /> : <EyeSlashIcon />}
+            </InputParts.Action>
           </InputParts.Box>
           <InputParts.Meta helperText={secure ? "Hidden" : "Visible"} />
         </InputParts>

package/src/InputParts/PasswordReveal.tsx

@@ -0,0 +1,94 @@
+import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
+import type { RefObject } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import type { FontSizeTokens, SizeTokens } from "tamagui";
+import { Input } from "./index";
+
+export const SHOW_PASSWORD = "Show password";
+export const HIDE_PASSWORD = "Hide password";
+
+type Selection = { start: number; end: number };
+
+function domInput(node: unknown, id?: string): HTMLInputElement | null {
+  const fromRef = node as { setSelectionRange?: unknown } | null;
+  if (fromRef && typeof fromRef.setSelectionRange === "function") {
+    return fromRef as HTMLInputElement;
+  }
+  if (typeof document === "undefined" || !id) return null;
+  return document.getElementById(id) as HTMLInputElement | null;
+}
+
+function readSelection(node: unknown, id?: string): Selection | null {
+  const el = domInput(node, id);
+  if (!el || typeof el.selectionStart !== "number") return null;
+  return { start: el.selectionStart, end: el.selectionEnd ?? el.selectionStart };
+}
+
+/**
+ * Reveal state for a masked field. Toggling keeps focus and the caret where
+ * they were (web swaps the input type, which would otherwise drop both), and
+ * an emptied field goes back to masked.
+ */
+export function usePasswordReveal({
+  inputRef,
+  id,
+  text,
+}: {
+  inputRef: RefObject<unknown>;
+  id?: string;
+  text: string;
+}) {
+  const [revealed, setRevealed] = useState(false);
+  const pendingSelection = useRef<Selection | null>(null);
+
+  useEffect(() => {
+    if (!text) setRevealed(false);
+  }, [text]);
+
+  useLayoutEffect(() => {
+    const selection = pendingSelection.current;
+    if (!selection) return;
+    pendingSelection.current = null;
+    const el = domInput(inputRef.current, id);
+    el?.focus();
+    el?.setSelectionRange(selection.start, selection.end);
+  }, [id, inputRef, revealed]);
+
+  const toggle = useCallback(() => {
+    pendingSelection.current = readSelection(inputRef.current, id);
+    setRevealed((open) => !open);
+  }, [id, inputRef]);
+
+  return { revealed, toggle };
+}
+
+export interface PasswordRevealProps {
+  revealed: boolean;
+  onToggle: () => void;
+  /** id of the masked input. */
+  controls?: string;
+  disabled?: boolean;
+  size?: SizeTokens | FontSizeTokens;
+}
+
+/** LC-149: the reveal is the field's trailing action, eye / eye-slash. */
+export function PasswordReveal({
+  revealed,
+  onToggle,
+  controls,
+  disabled,
+  size,
+}: PasswordRevealProps) {
+  return (
+    <Input.Action
+      label={revealed ? HIDE_PASSWORD : SHOW_PASSWORD}
+      pressed={revealed}
+      controls={controls}
+      disabled={disabled}
+      size={size}
+      onPress={onToggle}
+    >
+      {revealed ? <EyeSlashIcon /> : <EyeIcon />}
+    </Input.Action>
+  );
+}

package/src/InputParts/index.tsx

@@ -1,7 +1,15 @@
 import { transitionProps } from "@multiplatform.one/theme";
 import { getFontSized } from "@tamagui/get-font-sized";
 import type { SizeVariantSpreadFunction } from "@tamagui/web";
-import { useCallback, useEffect, useState, type ReactNode } from "react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
 import type { ComponentProps, Ref, RefObject } from "react";
 import { Pressable as RNPressable } from "react-native";
 import type {
@@ -51,6 +59,7 @@ import {
 import { formButtonColors, formCommonColors, formInputColors } from "../shared/colorRamps";
 import { useControlGrouped } from "../shared/groupContext";
 import { nativeAutoFocus } from "../shared/nativeAutoFocus";
+import { pressSlopProps } from "../shared/pressSlopProps";
 import { useIsInTableCell } from "../shared/tableCellContext";
 import { useFieldA11y, useFieldDescribedBy } from "../fieldLayout";
 
@@ -286,6 +295,27 @@ const InputGroupFrame = styled(XGroup, {
   },
 });
 
+/**
+ * LC-149 FIELD-TRAILING-ACTION: true while a field's trigger has an action
+ * overlaid on its trailing edge from outside the Box (FloatingPanel
+ * `triggerEnd`). The Box then keeps that end cap empty for it.
+ */
+const FieldTrailingOverlayContext = createContext(false);
+
+export function FieldTrailingOverlay({
+  active,
+  children,
+}: {
+  active: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <FieldTrailingOverlayContext.Provider value={active}>
+      {children}
+    </FieldTrailingOverlayContext.Provider>
+  );
+}
+
 /**
  * Fabric + Tamagui XGroup often claims the responder without firing `onPress`,
  * so Select/Date/Combobox triggers look tappable but never open. On native,
@@ -440,6 +470,21 @@ const InputGroupImpl = InputGroupFrame.styleable<{
     (typeof paddingHorizontalProp !== "number" && paddingHorizontalProp != null)
       ? undefined
       : { paddingHorizontal: fieldInset };
+  // LC-149: an action overlaid from outside the Box (a picker's native clear,
+  // which must sit outside the trigger's press capture) still lands in the
+  // trailing slot. The Box reserves the end cap and drops its end inset so
+  // the overlay reads as part of the field.
+  const trailingOverlay = useContext(FieldTrailingOverlayContext);
+  const trailingSlot = trailingOverlay ? (
+    <View
+      aria-hidden
+      data-field-action-slot=""
+      width={familyRecipe.height}
+      flexShrink={0}
+      pointerEvents="none"
+    />
+  ) : null;
+  const trailingPadProps = trailingOverlay ? { paddingInlineEnd: 0 } : undefined;
 
   // Chromeless rendering inside table cells
   if (inTableCell) {
@@ -472,12 +517,14 @@ const InputGroupImpl = InputGroupFrame.styleable<{
             {...controlFragment}
             {...passthroughSizeProps}
             {...insetPadProps}
+            {...trailingPadProps}
             {...sizeRecipeEscapeOverride}
             {...framePressProps}
             {...boxRingAttrs}
             overflow={boxOverflow}
           >
             {children}
+            {trailingSlot}
           </InputGroupFrame>,
         )}
       </FocusContext.Provider>
@@ -537,6 +584,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           {...props}
           {...passthroughSizeProps}
           {...insetPadProps}
+          {...trailingPadProps}
           {...sizeRecipeEscapeOverride}
           {...framePressProps}
           {...boxRingAttrs}
@@ -554,6 +602,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           overflow={boxOverflow}
         >
           {children}
+          {trailingSlot}
         </InputGroupFrame>,
       )}
     </FocusContext.Provider>
@@ -969,7 +1018,11 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
     // knob's: a $2 field inside a $4 knob would otherwise ship a 44px stop
     // on a 32px frame. LC-77 keeps the sub-floor case pressable via the
     // caller's hitSlop, never by inflating the cap.
-    const square = sizeRecipeForToken(String(size ?? "$true"), { touch: hydrationTouch }).height;
+    const measured = (props as { height?: unknown }).height;
+    const square =
+      typeof measured === "number"
+        ? measured
+        : sizeRecipeForToken(String(size ?? "$true"), { touch: hydrationTouch }).height;
     const disabled = (props as { disabled?: boolean }).disabled === true;
     if (isWeb) ensureCompositeFocusRing();
     return (
@@ -1026,6 +1079,94 @@ const InputButtonImpl = InputButton.styleable<{ glyphRing?: boolean }>((buttonPr
   );
 });
 
+// ---------------------------------------------------------------------------
+// Input.Action
+// ---------------------------------------------------------------------------
+
+export interface InputActionProps {
+  /** Accessible name; the glyph is decorative. */
+  label: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  /** Toggle state for a two-state action (reveal). Web announces aria-pressed. */
+  pressed?: boolean;
+  /** id of the input this action drives (aria-controls). */
+  controls?: string;
+  size?: SizeTokens | FontSizeTokens;
+  /**
+   * The field's measured height, when the action sits outside the Box (a
+   * picker clear overlaid from FloatingPanel `triggerEnd`). Inside a Box the
+   * square comes from `size`.
+   */
+  height?: number;
+  tabIndex?: number;
+  testID?: string;
+  /** Web: swallow the mousedown a picker trigger would open on. */
+  onMouseDown?: (e: { stopPropagation: () => void; preventDefault: () => void }) => void;
+  [data: `data-${string}`]: string | undefined;
+  children: ReactNode;
+}
+
+/**
+ * LC-149 FIELD-TRAILING-ACTION: the field's own action (reveal, clear, copy,
+ * eyedropper) is a chromeless glyph on the Box's trailing edge, never a
+ * bordered button beside the field. It squares off the field height and pads
+ * its press target to MIN_PRESS_TARGET when the field is shorter. It is the
+ * field's second tab stop and rings its glyph (the `glyphRing` end cap).
+ */
+const InputActionImpl = forwardRef<TamaguiElement, InputActionProps>(function InputAction(
+  { label, onPress, disabled, pressed, controls, size, height, tabIndex, children, ...rest },
+  ref,
+) {
+  const { size: contextSize } = InputContext.useStyledContext();
+  const hydrationTouch = useTouchSurface();
+  const token = (size ?? contextSize ?? "$true") as FontSizeTokens;
+  const square = height ?? sizeRecipeForToken(String(token), { touch: hydrationTouch }).height;
+  const activate = () => {
+    if (!disabled) onPress?.();
+  };
+  return (
+    <InputButtonImpl
+      ref={ref as never}
+      glyphRing
+      size={token}
+      disabled={disabled}
+      tabIndex={tabIndex}
+      aria-label={label}
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: !!disabled }}
+      {...(isWeb && pressed !== undefined ? { "aria-pressed": pressed } : undefined)}
+      {...(controls ? { "aria-controls": controls } : undefined)}
+      height={square}
+      width={square}
+      {...pressSlopProps(square, true)}
+      data-field-action="trailing"
+      onPress={
+        disabled
+          ? undefined
+          : (e?: { stopPropagation?: () => void }) => {
+              e?.stopPropagation?.();
+              activate();
+            }
+      }
+      onKeyDown={
+        ((e: KeyboardEvent) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          e.preventDefault();
+          e.stopPropagation();
+          activate();
+        }) as unknown as () => void
+      }
+      {...rest}
+    >
+      <InputIcon aria-hidden color={formCommonColors.muted}>
+        {children}
+      </InputIcon>
+    </InputButtonImpl>
+  );
+});
+
 // ---------------------------------------------------------------------------
 // Input.Icon
 // ---------------------------------------------------------------------------
@@ -1321,6 +1462,7 @@ const InputCompound = Object.assign(InputContainerImpl, {
   TextArea: FocusWiredTextArea,
   Section: InputSection,
   Button: InputButtonImpl,
+  Action: InputActionImpl,
   Icon: InputIcon,
   Info: InputInfo,
   Meta: InputFieldMeta,

package/src/InputParts/inputPartsStories.spec.tsx

@@ -74,10 +74,12 @@ describe("Forms/InputParts stories", () => {
     expect(placeholders).toEqual(["Leading icon", "Trailing icon", "Both ends"]);
   });
 
-  it("TrailingButton exposes a labelled reveal toggle beside the field", () => {
+  it("TrailingButton puts a labelled reveal toggle inside the field (LC-149)", () => {
     const { container } = mount(TrailingButton as StoryLike);
     const button = container.querySelector("[aria-label='Show password']");
     expect(button).toBeTruthy();
+    expect(button?.getAttribute("data-field-action")).toBe("trailing");
+    expect(button?.closest("[data-mp-input-box]")).toBeTruthy();
     expect(container.querySelector("#parts-password")).toBeTruthy();
   });
 

package/src/Skeleton/Skeleton.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Preset } from "@multiplatform.one/theme";
-import { Paragraph, XStack, YStack } from "tamagui";
+import { Preset, Paragraph } from "@multiplatform.one/theme";
+import { XStack, YStack } from "tamagui";
 import { Skeleton, SkeletonCircle, SkeletonText } from "./index";
 
 const meta: Meta<typeof Skeleton> = {

package/src/Spinner/Spinner.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { Preset, Surface } from "@multiplatform.one/theme";
-import { XStack, YStack, Paragraph } from "tamagui";
+import { Preset, Surface, Paragraph } from "@multiplatform.one/theme";
+import { XStack, YStack } from "tamagui";
 import { Button } from "../Button";
 import { Spinner } from "./index";
 

package/src/Wheel/Wheel.stories.tsx

@@ -1,8 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Paragraph } from "@multiplatform.one/theme";
 import { useState } from "react";
-import { Paragraph, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { Wheel } from "./index";
 
 const numbers = Array.from({ length: 24 }, (_, i) => i);

package/src/fieldTrailingAction.spec.tsx

@@ -0,0 +1,188 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { fireEvent } from "@testing-library/react";
+import { inspectDesign } from "@multiplatform.one/config/design-lint";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { FloatingPanel } from "./FloatingPanel";
+import { Input } from "./fields/Input";
+import { Input as InputParts } from "./InputParts";
+
+const src = join(process.cwd(), "src");
+
+function sources(dir: string): string[] {
+  return readdirSync(dir).flatMap((entry) => {
+    const path = join(dir, entry);
+    if (statSync(path).isDirectory()) return sources(path);
+    return /\.tsx?$/.test(entry) && !/\.(spec|stories|test)\./.test(entry) ? [path] : [];
+  });
+}
+
+function revealOf(container: HTMLElement) {
+  return container.querySelector(
+    "[aria-label='Show password'], [aria-label='Hide password']",
+  ) as HTMLElement | null;
+}
+
+describe("LC-149 FIELD-TRAILING-ACTION", () => {
+  describe("password reveal", () => {
+    it("is a chromeless trailing action inside the field, not a button beside it", () => {
+      const result = renderWithProviders(
+        <Input label="Password" secureTextEntry defaultValue="hunter22" />,
+      );
+      const box = result.container.querySelector("[data-mp-input-box]") as HTMLElement;
+      const reveal = revealOf(result.container);
+      if (!box || !reveal) throw new Error("box or reveal missing");
+      expect(box.contains(reveal)).toBe(true);
+      expect(reveal.getAttribute("data-field-action")).toBe("trailing");
+      expect(reveal.getAttribute("data-end-cap")).toBe(box.getAttribute("data-visual-height"));
+      expect(reveal.className).toMatch(/mp-chip-dismiss/);
+      expect(box.lastElementChild?.contains(reveal)).toBe(true);
+    });
+
+    it("toggles eye / eye-slash with Show password / Hide password", () => {
+      const result = renderWithProviders(
+        <Input label="Password" secureTextEntry defaultValue="hunter22" />,
+      );
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      const reveal = revealOf(result.container);
+      if (!input || !reveal) throw new Error("anatomy missing");
+      expect(input.getAttribute("type")).toBe("password");
+      expect(reveal.getAttribute("aria-label")).toBe("Show password");
+      expect(reveal.getAttribute("aria-pressed")).toBe("false");
+      const maskedGlyph = reveal.querySelector("svg")?.innerHTML;
+
+      fireEvent.click(reveal);
+      const shown = revealOf(result.container);
+      if (!shown) throw new Error("reveal missing after toggle");
+      expect(input.getAttribute("type")).not.toBe("password");
+      expect(shown.getAttribute("aria-label")).toBe("Hide password");
+      expect(shown.getAttribute("aria-pressed")).toBe("true");
+      expect(shown.querySelector("svg")?.innerHTML).not.toBe(maskedGlyph);
+
+      fireEvent.click(shown);
+      expect(input.getAttribute("type")).toBe("password");
+      expect(revealOf(result.container)?.getAttribute("aria-label")).toBe("Show password");
+    });
+
+    it("rides inputProps.secureTextEntry too, and reveal={false} drops it", () => {
+      const viaProps = renderWithProviders(
+        <Input label="Password" inputProps={{ secureTextEntry: true }} />,
+      );
+      expect(revealOf(viaProps.container)).not.toBeNull();
+      const opted = renderWithProviders(<Input label="PIN" secureTextEntry reveal={false} />);
+      expect(revealOf(opted.container)).toBeNull();
+    });
+  });
+
+  describe("error with a trailing action", () => {
+    it("shows the message and no in-field glyph when an action owns the slot", () => {
+      const result = renderWithProviders(
+        <Input label="Password" secureTextEntry error="Passwords do not match" />,
+      );
+      expect(result.container.querySelector("[data-field-error-glyph]")).toBeNull();
+      expect(revealOf(result.container)).not.toBeNull();
+      expect(result.findTextElement("Passwords do not match")).toBeDefined();
+      const input = result.container.querySelector("input") as HTMLInputElement;
+      expect(input.getAttribute("aria-invalid")).toBe("true");
+    });
+
+    it("drops the glyph for the copy action too", () => {
+      const result = renderWithProviders(
+        <Input label="Token" readOnly copy value="mpo_live" error="Token expired" />,
+      );
+      expect(result.container.querySelector("[data-field-error-glyph]")).toBeNull();
+    });
+
+    it("keeps the glyph when the trailing slot is empty", () => {
+      const result = renderWithProviders(<Input label="Name" error="Enter your name" />);
+      expect(result.container.querySelector("[data-field-error-glyph]")).not.toBeNull();
+    });
+  });
+
+  describe("picker clears overlaid from outside the trigger", () => {
+    it("land in the Box's trailing end cap, which the Box keeps empty for them", () => {
+      const result = renderWithProviders(
+        <FloatingPanel
+          open={false}
+          onOpenChange={() => {}}
+          sheet
+          trigger={
+            <InputParts size="$4">
+              <InputParts.Box>
+                <InputParts.Area value="2026-10-25" readOnly />
+              </InputParts.Box>
+            </InputParts>
+          }
+          triggerEnd={
+            <InputParts.Action label="Clear date" onPress={() => {}}>
+              <svg />
+            </InputParts.Action>
+          }
+        >
+          <span />
+        </FloatingPanel>,
+      );
+      const box = result.container.querySelector("[data-mp-input-box]") as HTMLElement;
+      const slot = box?.querySelector("[data-field-action-slot]") as HTMLElement | null;
+      const overlay = result.container.querySelector("[data-field-action-overlay]");
+      const clear = result.container.querySelector("[aria-label='Clear date']");
+      expect(slot).not.toBeNull();
+      expect(overlay?.contains(clear)).toBe(true);
+      expect(box.contains(clear)).toBe(false);
+    });
+
+    it("leave the Box alone when there is nothing to overlay", () => {
+      const result = renderWithProviders(
+        <FloatingPanel
+          open={false}
+          onOpenChange={() => {}}
+          sheet
+          trigger={
+            <InputParts size="$4">
+              <InputParts.Box>
+                <InputParts.Area value="" readOnly />
+              </InputParts.Box>
+            </InputParts>
+          }
+        >
+          <span />
+        </FloatingPanel>,
+      );
+      expect(result.container.querySelector("[data-field-action-slot]")).toBeNull();
+      expect(result.container.querySelector("[data-field-action-overlay]")).toBeNull();
+    });
+  });
+
+  describe("every MPO field keeps its own action in the trailing slot", () => {
+    const files = [
+      ...sources(join(src, "fields")),
+      ...sources(join(src, "InputParts")),
+      ...sources(join(src, "FloatingPanel")),
+      ...sources(join(src, "..", "..", "frappe-ui", "src", "fields")),
+      ...sources(join(src, "..", "..", "components", "src", "CopyField")),
+    ];
+
+    it("no field renders its action as a sibling button", () => {
+      const hits = files.flatMap((file) =>
+        (inspectDesign(readFileSync(file, "utf8"), file) as string[]).filter((error) =>
+          error.includes("[field-action]"),
+        ),
+      );
+      expect(hits).toEqual([]);
+    });
+
+    it("the detector flags an icon button beside a field", () => {
+      const sibling = inspectDesign(
+        `const x = (
+          <XStack>
+            <Input label="Password" secureTextEntry />
+            <Button icon={<EyeIcon />} aria-label="Show password" />
+          </XStack>
+        );`,
+        "Sibling.tsx",
+      ) as string[];
+      expect(sibling.join("\n")).toMatch(/\[field-action\]/);
+    });
+  });
+});