@multiplatform.one/forms 7.67.0 → 7.69.0

package/src/FieldLayout.stories.tsx

@@ -10,6 +10,7 @@ import { Field, FieldLayout } from "./fieldLayout";
 import { Input } from "./fields/Input";
 import { Input as InputParts } from "./InputParts";
 import { Checkbox } from "./fields/Checkbox";
+import { ActionButton } from "@multiplatform.one/components";
 
 /**
  * FieldLayout wraps a CONTROL, so these stories cannot mount the house `Input`
@@ -196,7 +197,7 @@ export const FieldWrapper: Story = {
               )}
             </Field>
             <XStack gap="$2">
-              <Button action="submit">Submit</Button>
+              <ActionButton kind="submit" formAction="submit" />
               <Button onPress={() => form.reset()}>Reset</Button>
             </XStack>
           </YStack>
@@ -237,7 +238,7 @@ export const FieldRequiredValidator: Story = {
                 </FieldLayout>
               )}
             </Field>
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/FloatingPanel/FloatingPanel.pointMenu.native.spec.tsx

@@ -124,3 +124,72 @@ describe("FloatingPanel native ContextMenu at the long-press point", () => {
     expect(sheet()).toBeNull();
   });
 });
+
+function Glyph(_: { onPress: () => void; "aria-label": string }) {
+  return <Text>◐</Text>;
+}
+
+function GlyphPanel({ onPress, anchored = false }: { onPress: () => void; anchored?: boolean }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      openOn="contextmenu"
+      triggerSizing="content"
+      {...(anchored
+        ? { compactFace: "menu" as const, anchorMode: "attach" as const, triggerEcho: false }
+        : null)}
+      trigger={<Glyph onPress={onPress} aria-label="Appearance" />}
+    >
+      <Text>Dark</Text>
+    </FloatingPanel>
+  );
+}
+
+function tap(target: Element) {
+  act(() => {
+    target.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, button: 0 }));
+    vi.advanceTimersByTime(100);
+    target.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, button: 0 }));
+    target.dispatchEvent(new MouseEvent("click", { bubbles: true, button: 0 }));
+  });
+}
+
+describe("FloatingPanel native ContextMenu keeps its trigger's tap (FZ-8158)", () => {
+  it("runs the trigger's own onPress on a tap and names the button after it", () => {
+    screen.width = 390;
+    screen.height = 844;
+    const onPress = vi.fn();
+    const result = renderWithProviders(<GlyphPanel onPress={onPress} />);
+    tap(result.getByRole("button", { name: "Appearance" }));
+    expect(onPress).toHaveBeenCalledTimes(1);
+    expect(sheet()).toBeNull();
+  });
+
+  it("opens the menu on a long-press without running the tap", () => {
+    screen.width = 390;
+    screen.height = 844;
+    const onPress = vi.fn();
+    const result = renderWithProviders(<GlyphPanel onPress={onPress} />);
+    longPress(result.getByRole("button", { name: "Appearance" }), 200, 300);
+    expect(sheet()).not.toBeNull();
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it("opens as the pull-down under its trigger on a phone when menu-faced, never a sheet (FZ-8158 r5)", () => {
+    screen.width = 390;
+    screen.height = 844;
+    const onPress = vi.fn();
+    const result = renderWithProviders(<GlyphPanel onPress={onPress} anchored />);
+    longPress(result.getByRole("button", { name: "Appearance" }), 200, 300);
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(document.querySelector('[data-testid="floating-panel-menu"]')).not.toBeNull();
+    expect(document.querySelector('[data-testid="floating-panel-menu-echo"]')).toBeNull();
+    expect(sheet()).toBeNull();
+    expect(pointPanel()).toBeNull();
+    expect(onPress).not.toHaveBeenCalled();
+  });
+});

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Preset, Paragraph, H4, Text } from "@multiplatform.one/theme";
-import { ScrollView, Separator, View, XStack, YStack } from "tamagui";
+import { Preset, Paragraph, Text } from "@multiplatform.one/theme";
+import { ScrollView, View, XStack, YStack } from "tamagui";
+import { OverlayHeader } from "@multiplatform.one/components";
 import { FloatingPanel } from "./index";
 import { Button } from "../Button";
 import { Select } from "../fields/Select";
@@ -38,13 +39,11 @@ export const Basic: Story = {
           trigger={<Button>{open ? "Panel is open" : "Click to open panel"}</Button>}
         >
           <YStack gap="$3">
-            <H4>Panel Content</H4>
+            <OverlayHeader title="Panel Content" onClose={() => setOpen(false)} />
             <Paragraph>
               Opens over its trigger: the top edge sits on the trigger's top edge and the trigger is
               the first row. Escape or an outside click dismisses and returns focus.
             </Paragraph>
-            <Separator />
-            <Button onPress={() => setOpen(false)}>Close</Button>
           </YStack>
         </FloatingPanel>
       </YStack>
@@ -185,9 +184,8 @@ export const ForceSheet: Story = {
           trigger={<Button>{open ? "Sheet open" : "Click for Sheet (forced)"}</Button>}
         >
           <YStack gap="$3">
-            <H4>Forced Sheet</H4>
+            <OverlayHeader title="Forced Sheet" onClose={() => setOpen(false)} />
             <Paragraph>This panel always uses Sheet, even on large screens.</Paragraph>
-            <Button onPress={() => setOpen(false)}>Close</Button>
           </YStack>
         </FloatingPanel>
       </YStack>
@@ -224,13 +222,11 @@ function ScrollClipPair({ where }: { where: string }) {
         trigger={<Button>{`FloatingPanel (${where})`}</Button>}
       >
         <YStack gap="$3" data-testid={`scroll-clip-panel-${where}`}>
-          <H4>Panel {where}</H4>
+          <OverlayHeader title={`Panel ${where}`} onClose={() => setOpen(false)} />
           <Paragraph>
             This body is taller than the space left in the scroll view, so a clipped panel loses its
             lower half.
           </Paragraph>
-          <Separator />
-          <Button onPress={() => setOpen(false)}>Close</Button>
         </YStack>
       </FloatingPanel>
     </YStack>

package/src/FloatingPanel/index.native.tsx

@@ -54,7 +54,8 @@
  * ContextMenu (`openOn="contextmenu"`): long-press opens it. On a window wider
  * than OVERLAY_BREAKPOINT (a tablet) it opens at the long-press point, the
  * same free overlay the web draws at the pointer; a phone keeps the sheet,
- * as web does at ≤640.
+ * as web does at ≤640. With `compactFace="menu"` it opens as the pull-down at
+ * its trigger instead, at every width (a bar button's long-press, FZ-8158).
  *
  * Regular width (FZ-8116, LC-266): on an iPad or any window wider than
  * OVERLAY_BREAKPOINT the sheet is the wrong form. The panel opens over its
@@ -64,6 +65,7 @@
 
 import { nativeAnimationConfig, type MotionStop } from "@multiplatform.one/theme";
 import {
+  isValidElement,
   type ReactNode,
   useCallback,
   useContext,
@@ -208,10 +210,25 @@ export function FloatingPanel({
     [disabled, onOpenChange],
   );
   const isContextMenu = openOn === "contextmenu";
+  // A long-press menu never eats its trigger's tap: the web lets the primary
+  // click through to the trigger, so here the Pressable that owns the gesture
+  // runs the trigger's own onPress and carries its name.
+  const triggerOwn =
+    isContextMenu && isValidElement(trigger)
+      ? (trigger.props as {
+          onPress?: (event: GestureResponderEvent) => void;
+          "aria-label"?: string;
+          accessibilityLabel?: string;
+        })
+      : undefined;
+  const triggerLabel =
+    triggerA11y?.label ?? triggerOwn?.["aria-label"] ?? triggerOwn?.accessibilityLabel;
   const regular = overlaySizeClass(windowWidth) === "regular";
   const atPoint = isContextMenu && pressPoint !== null && regular;
   const insideOverlay = useInsideOverlay();
-  const asMenu = !isContextMenu && resolveCompactFace(compactFace, insideOverlay) === "menu";
+  const asMenu = isContextMenu
+    ? compactFace === "menu"
+    : resolveCompactFace(compactFace, insideOverlay) === "menu";
   const asRegular = regular && !asMenu && !isContextMenu && sheet !== true;
   const anchored = asMenu || asRegular;
   const triggerRef = useRef<RNView | null>(null);
@@ -543,12 +560,16 @@ export function FloatingPanel({
       >
         <Pressable
           {...(isContextMenu
-            ? { onLongPress: handleTriggerLongPress, delayLongPress: 500 }
+            ? {
+                onLongPress: handleTriggerLongPress,
+                delayLongPress: 500,
+                ...(triggerOwn?.onPress && !disabled ? { onPress: triggerOwn.onPress } : undefined),
+              }
             : { onPress: handleTriggerPress })}
           disabled={disabled}
           accessibilityRole="button"
           accessibilityState={{ disabled: !!disabled, expanded: !!open }}
-          {...(triggerA11y?.label ? { accessibilityLabel: triggerA11y.label } : undefined)}
+          {...(triggerLabel ? { accessibilityLabel: triggerLabel } : undefined)}
           {...(triggerA11y?.value
             ? { accessibilityValue: { text: triggerA11y.value } }
             : undefined)}

package/src/Form/Form.stories.tsx

@@ -53,6 +53,7 @@ import { formatFieldError } from "../ErrorSummary";
 import type { AnyFormApi } from "../types";
 import { Form, FormActions } from "./index";
 import { H3 } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Form> = {
   title: "Forms/Form",
@@ -95,7 +96,7 @@ export const Basic = () => (
     <Input label="Username" name="username" required />
     <Input label="Email" name="email" required />
     <FormActions>
-      <Button action="submit">Submit</Button>
+      <ActionButton kind="submit" formAction="submit" />
     </FormActions>
   </Form>
 );
@@ -292,7 +293,7 @@ export const DynamicFields = () => {
       })()}
 
       <FormActions>
-        <Button action="submit">Submit</Button>
+        <ActionButton kind="submit" formAction="submit" />
       </FormActions>
     </Form>
   );
@@ -313,7 +314,7 @@ export const ReadOnlyAndDisabledSubmit = () => (
     <Input label="Read Only" name="readOnlyField" readOnly />
     <Input label="Disabled" name="disabledField" disabled />
     <FormActions>
-      <Button action="submit">Submit</Button>
+      <ActionButton kind="submit" formAction="submit" />
     </FormActions>
   </Form>
 );
@@ -342,7 +343,7 @@ export const InputWithLinkResolver = () => (
       linkResolver={(v) => (v ? (`/items/${String(v)}` as any) : null)}
     />
     <FormActions>
-      <Button action="submit">Submit</Button>
+      <ActionButton kind="submit" formAction="submit" />
     </FormActions>
   </Form>
 );
@@ -999,7 +1000,7 @@ export const Layout = () => (
       </FormSection>
     </FormSectionStack>
     <FormActions>
-      <Button action="submit">Save</Button>
+      <ActionButton kind="save" formAction="submit" />
     </FormActions>
   </Form>
 );

package/src/errorSummaryStories.spec.tsx

@@ -86,17 +86,17 @@ describe("Forms/ErrorSummary stories", () => {
   });
 
   it("FocusesTheFieldOnPress starts clean and raises the summary on submit", () => {
-    const { container, getByText } = mount(FocusesTheFieldOnPress as StoryLike);
+    const { container, getByRole } = mount(FocusesTheFieldOnPress as StoryLike);
     expect(container.querySelector("[data-testid='error-summary']")).toBeNull();
-    fireEvent.click(getByText("Submit"));
+    fireEvent.click(getByRole("button", { name: "Submit" }));
     const summary = container.querySelector("[data-testid='error-summary']");
     expect(summary).toBeTruthy();
     expect(container.querySelectorAll("a").length).toBe(2);
   });
 
   it("FocusesTheFieldOnPress links target the ids its fields actually carry", () => {
-    const { container, getByText } = mount(FocusesTheFieldOnPress as StoryLike);
-    fireEvent.click(getByText("Submit"));
+    const { container, getByRole } = mount(FocusesTheFieldOnPress as StoryLike);
+    fireEvent.click(getByRole("button", { name: "Submit" }));
     const hrefs = Array.from(container.querySelectorAll("a")).map((a) => a.getAttribute("href"));
     expect(hrefs).toEqual(["#email", "#password"]);
     expect(container.querySelector("#email")).toBeTruthy();

package/src/fields/Barcode/BarcodeScanner.native.tsx

@@ -2,7 +2,8 @@ import { Camera, CameraView, useCameraPermissions } from "expo-camera";
 import { useEffect, useRef, useState } from "react";
 import { StyleSheet } from "react-native";
 import { Text, View, XStack, YStack } from "tamagui";
-import { Button } from "../../Button";
+import { Button, IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { BarcodeScannerProps, CameraPreflightResult } from "./scannerTypes";
@@ -95,8 +96,8 @@ export function BarcodeScanner({
             {t("Camera permission denied. Please allow camera access.")}
           </Text>
           <XStack gap="$2">
-            <Button
-              size={knobProps.sizeToken}
+            <IconButton
+              icon={standardActions.retry.icon}
               onPress={() => {
                 setDenied(false);
                 requestPermission().then((res) => {
@@ -104,12 +105,12 @@ export function BarcodeScanner({
                 });
               }}
               aria-label={t("Retry camera")}
-            >
-              {t("Retry")}
-            </Button>
-            <Button size={knobProps.sizeToken} onPress={onClose} aria-label={t("Close scanner")}>
-              {t("Close")}
-            </Button>
+            />
+            <IconButton
+              icon={standardActions.close.icon}
+              onPress={onClose}
+              aria-label={t("Close scanner")}
+            />
           </XStack>
         </YStack>
       ) : !permission?.granted ? (

package/src/fields/Barcode/BarcodeScanner.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { Text, View, XStack, YStack, isWeb } from "tamagui";
-import { Button } from "../../Button";
+import { Button, IconButton } from "../../Button";
+import { standardActions } from "../../standardActions";
 import { queryPermissionState } from "../../shared/capabilityPreflight";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
@@ -173,16 +174,16 @@ export function BarcodeScanner({
             {errorMessage}
           </Text>
           <XStack gap="$2">
-            <Button
-              size={knobProps.sizeToken}
+            <IconButton
+              icon={standardActions.retry.icon}
               onPress={() => setAttempt((a) => a + 1)}
               aria-label={t("Retry camera")}
-            >
-              {t("Retry")}
-            </Button>
-            <Button size={knobProps.sizeToken} onPress={onClose} aria-label={t("Close scanner")}>
-              {t("Close")}
-            </Button>
+            />
+            <IconButton
+              icon={standardActions.close.icon}
+              onPress={onClose}
+              aria-label={t("Close scanner")}
+            />
           </XStack>
         </YStack>
       ) : (

package/src/fields/Checkbox/Checkbox.stories.tsx

@@ -6,10 +6,10 @@ import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { Checkbox as TamaguiCheckbox, XStack, YStack } from "tamagui";
 import { Label } from "../../Label";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Checkbox, Checkboxes, CheckboxGroup } from "./index";
 import { Paragraph } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Checkbox> = {
   title: "Forms/Checkbox",
@@ -54,7 +54,7 @@ export const Main: Story = {
             validators={{ onChange: ({ value }) => (!value ? "Terms are required" : undefined) }}
           />
           <Checkbox label="Subscribe to newsletter" name="newsletter" />
-          <Button action="submit">Submit</Button>
+          <ActionButton kind="submit" formAction="submit" />
         </Form>
       );
     };
@@ -274,7 +274,7 @@ export const CheckboxGroupWithForm: StoryObj = {
               helperText="Select required permissions"
               required
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/Checkbox/CheckboxGroup.stories.tsx

@@ -3,9 +3,9 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { Preset, Paragraph } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { CheckboxGroup } from "./CheckboxGroup";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof CheckboxGroup> = {
   title: "Forms/CheckboxGroup",
@@ -255,7 +255,7 @@ export const RequiredForm: Story = {
               ]}
               helperText="Submit empty to trigger required error"
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/ColorPicker/ColorPicker.stories.tsx

@@ -4,9 +4,9 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { ColorPicker } from "./index";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof ColorPicker> = {
   title: "Forms/ColorPicker",
@@ -69,7 +69,7 @@ export const Main: Story = {
               helperText="Choose background color"
             />
             <ColorPicker label="Text Color" name="textColor" helperText="Choose text color" />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/Combobox/Combobox.stories.tsx

@@ -4,11 +4,11 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { XStack, YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { Combobox, type ComboboxOption } from "./index";
 import { authorOptions } from "./authorOptions";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof Combobox> = {
   title: "Forms/Combobox",
@@ -117,7 +117,7 @@ export const Main: StoryObj<typeof Combobox> = {
               searchPlaceholder="Type to search..."
             />
 
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/DatePicker/DatePicker.stories.tsx

@@ -14,6 +14,7 @@ import { MonthPicker } from "./MonthPicker";
 import { MultiDatePicker } from "./MultiDatePicker";
 import { DatePicker } from "./index";
 import { formatCalendarDate, Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 import { TimePicker } from "../TimePicker";
 
 const meta: Meta<typeof DatePicker> = {
@@ -86,7 +87,7 @@ export const Main: Story = {
               name={"endDate" as any}
               helperText="Select project end date"
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/DatePicker/DateRangePicker.stories.tsx

@@ -4,10 +4,10 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { DateRangePicker } from "./DateRangePicker";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof DateRangePicker> = {
   title: "Forms/DateRangePicker",
@@ -103,7 +103,7 @@ export const FormBound: Story = {
             <FormSubscribe selector={(s: any) => [s.values.range]}>
               {([range]: any[]) => <Text>{`form-value:${JSON.stringify(range)}`}</Text>}
             </FormSubscribe>
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/DatePicker/DatetimePicker.stories.tsx

@@ -8,6 +8,7 @@ import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { DatetimePicker } from "./DatetimePicker";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof DatetimePicker> = {
   title: "Forms/DatetimePicker",
@@ -170,7 +171,7 @@ export const FormBound: Story = {
                 </Text>
               )}
             </FormSubscribe>
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/DatePicker/MonthPicker.stories.tsx

@@ -2,10 +2,10 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { MonthPicker } from "./MonthPicker";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof MonthPicker> = {
   title: "Forms/MonthPicker",
@@ -104,7 +104,7 @@ export const FormBound: Story = {
             <FormSubscribe selector={(s: any) => [s.values.period]}>
               {([period]: any[]) => <Text>{`form-value:${JSON.stringify(period)}`}</Text>}
             </FormSubscribe>
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/DatePicker/MultiDatePicker.stories.tsx

@@ -4,10 +4,10 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { MultiDatePicker } from "./MultiDatePicker";
 import { Text } from "@multiplatform.one/theme";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof MultiDatePicker> = {
   title: "Forms/MultiDatePicker",
@@ -115,7 +115,7 @@ export const FormBound: Story = {
                 </Text>
               )}
             </FormSubscribe>
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -67,7 +67,16 @@ describe("FileUpload", () => {
     const result = renderWithProviders(
       <FileUpload existing={{ src: "/files/sprite.png" }} onExistingRemove={remove} />,
     );
-    expect(result.container.textContent).toContain("Replace");
+    // LC-260: Replace and Remove are glyphs over the image; LC-176 puts the
+    // pair in one shared media capsule, so the buttons draw glyphs alone.
+    const actions = result.container.querySelector('[data-file-upload="preview-actions"]');
+    const capsule = actions?.querySelector('[data-mp-icon-button-group="media"]');
+    expect(capsule?.querySelector('[aria-label="Replace"]')).toBeTruthy();
+    expect(capsule?.querySelector('[aria-label^="Remove"]')).toBeTruthy();
+    expect(
+      capsule?.querySelector('[aria-label="Replace"]')?.getAttribute("data-mp-icon-button"),
+    ).not.toBe("media");
+    expect(result.container.textContent).not.toContain("Replace");
     expect(result.container.textContent).not.toContain("Choose File");
     expect(result.container.textContent).not.toContain("Drag a file");
     expect(result.container.querySelector('[data-file-upload="preview"] img')).toBeTruthy();
@@ -344,7 +353,7 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(zone.textContent).toContain("Drag a file into this area");
   });
 
-  it("renders picked files as in-zone rows: name, bold size line, filled $color12 remove disc (29 painted, hitSlop 44)", async () => {
+  it("renders picked files as in-zone rows: name, bold size line, bare remove glyph (29 painted, hitSlop 44)", async () => {
     const { container } = renderWithHouseThemes(
       <FileUpload label="Attachment" name="attachment" multiple />,
     );
@@ -367,14 +376,14 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(sizeLine).toBeTruthy();
     expect(sizeLine.className).toMatch(/_fow-700/);
 
-    // Remove: a circular filled $color12 disc painted at nestedControl (29)
+    // Remove: LC-176 bare ✕, no disc or fill, painted at nestedControl (29)
     // with hitSlop restoring the 44 floor (data-mp-press-slop 8 → 29+16=45).
     const remove = flist.querySelector('[aria-label="Remove hello.txt"]') as HTMLElement;
     expect(remove).toBeTruthy();
     expect(remove.getAttribute("data-nested-px")).toBe("29");
     expect(remove.getAttribute("data-mp-press-slop")).toBe("8");
-    expect(remove.className).toMatch(/_bg-color12/);
-    // The inverse ✕ rides inside the disc.
+    expect(remove.className).toMatch(/_bg-transparent/);
+    expect(remove.className).not.toMatch(/_bg-color12/);
     expect(remove.querySelector("svg")).toBeTruthy();
     // The caption is dropped once files exist; the CTA stays.
     expect(zone.textContent).not.toContain("Drag a file into this area");

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

@@ -4,9 +4,9 @@ import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useEffect, useRef, useState } from "react";
 import { YStack } from "tamagui";
-import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { FileUpload } from "./index";
+import { ActionButton } from "@multiplatform.one/components";
 
 const meta: Meta<typeof FileUpload> = {
   title: "Forms/FileUpload",
@@ -80,7 +80,7 @@ export const Main: Story = {
                 helperText: "Upload multiple files",
               } as any)}
             />
-            <Button action="submit">Submit</Button>
+            <ActionButton kind="submit" formAction="submit" />
           </YStack>
         </Form>
       );