@multiplatform.one/frappe-ui 7.67.0 → 7.69.0

package/src/FrappeDashboard.tsx

@@ -206,7 +206,6 @@ function LiveDashboardContent<TDoc extends { name: string; doctype: string }>({
                   `loading` (not bare `disabled`) is the derived busy state. */}
               <Button
                 size="$2"
-                circular
                 icon={ArrowsClockwiseIcon}
                 onPress={onRefresh}
                 loading={isRefreshing || isLiveLoading}
@@ -328,7 +327,6 @@ export function FrappeDashboard<TDoc extends { name: string; doctype: string }>(
               {/* LC-54: house Button, own-box floor (see the live-path refresh). */}
               <Button
                 size="$2"
-                circular
                 icon={ArrowsClockwiseIcon}
                 onPress={bumpRefresh}
                 loading={isRefreshing}

package/src/FrappeForm.connections.spec.tsx

@@ -128,13 +128,13 @@ describe("FrappeForm connections, schema mode", () => {
 
   it("a new record has no connections yet", async () => {
     renderForm({});
-    await waitFor(() => expect(screen.getByText("Save")).toBeTruthy());
+    await waitFor(() => expect(screen.getByLabelText("Save")).toBeTruthy());
     expect(screen.queryByText("Connections")).toBeNull();
   });
 
   it("showConnections={false} leaves the tab out", async () => {
     renderForm({ name: "bulbasaur", showConnections: false });
-    await waitFor(() => expect(screen.getByText("Save")).toBeTruthy());
+    await waitFor(() => expect(screen.getByLabelText("Save")).toBeTruthy());
     expect(screen.queryByText("Connections")).toBeNull();
   });
 });

package/src/FrappeForm.deskSemantics.spec.tsx

@@ -192,7 +192,7 @@ describe("FrappeForm resolves a doctype through the desk form engine", () => {
   it("save refuses an empty field that mandatory_depends_on made required", async () => {
     renderForm({ name: "LOAN-APPROVED", roles: ["Loan Officer"] });
     await expectProbe("status", "val=Approved");
-    fireEvent.click(screen.getByText("Save"));
+    fireEvent.click(screen.getByLabelText("Save"));
     await expectProbe("reason", "err=Reason is required");
   });
 
@@ -276,7 +276,7 @@ describe("FrappeForm resolves a doctype through the desk form engine", () => {
     renderForm();
     await screen.findByTestId("probe-status");
     expect(screen.getByText("Name")).toBeTruthy();
-    fireEvent.click(screen.getByText("Save"));
+    fireEvent.click(screen.getByLabelText("Save"));
     await waitFor(() => {
       expect(screen.getByText("Name is required")).toBeTruthy();
     });

package/src/FrappeForm.lifecycle.spec.tsx

@@ -132,7 +132,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     renderForm(fixtures, { name: "LOAN-DRAFT" });
     await expectProbe("employee_name", "val=Ada Lovelace");
     await expectStatus("draft");
-    expect(screen.queryByText("Save")).toBeNull();
+    expect(screen.queryByLabelText("Save")).toBeNull();
 
     fireEvent.click(screen.getByText("Submit"));
     await waitFor(() => expect(confirm).toHaveBeenCalledWith("Permanently Submit LOAN-DRAFT?"));
@@ -172,7 +172,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
 
     fireEvent.click(screen.getByTestId("set-remarks"));
     await expectStatus("notSaved");
-    expect(screen.getByText("Save")).toBeTruthy();
+    expect(screen.getByLabelText("Save")).toBeTruthy();
     expect(screen.queryByText("Submit")).toBeNull();
   });
 
@@ -185,8 +185,8 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
       onAmend: vi.fn(),
     });
     await expectStatus("submitted");
-    expect(screen.queryByText("Delete")).toBeNull();
-    expect(screen.getByText("Close")).toBeTruthy();
+    expect(screen.queryByLabelText("Delete")).toBeNull();
+    expect(screen.getByLabelText("Close")).toBeTruthy();
     expect(screen.getByTestId("frappe-form-cancel-document").textContent).toContain(
       "Cancel Document",
     );
@@ -196,7 +196,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     await expectStatus("cancelled");
     await waitFor(async () => expect(await docstatusOf(fixtures, "LOAN-SUBMITTED")).toBe(2));
     expect(screen.getByText("Amend")).toBeTruthy();
-    expect(screen.getByText("Delete")).toBeTruthy();
+    expect(screen.getByLabelText("Delete")).toBeTruthy();
   });
 
   it("an allow_on_submit edit turns Cancel into Update, which keeps the document submitted", async () => {
@@ -205,10 +205,10 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     await expectStatus("submitted");
 
     fireEvent.click(screen.getByTestId("set-remarks"));
-    await waitFor(() => expect(screen.getByText("Update")).toBeTruthy());
+    await waitFor(() => expect(screen.getByLabelText("Update")).toBeTruthy());
     expect(screen.queryByTestId("frappe-form-cancel-document")).toBeNull();
 
-    fireEvent.click(screen.getByText("Update"));
+    fireEvent.click(screen.getByLabelText("Update"));
     await waitFor(async () =>
       expect((await fixtures.getDoc("Asset Loan", "LOAN-SUBMITTED"))?.remarks).toBe("edited"),
     );
@@ -255,7 +255,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     await expectStatus("notSaved");
     await expectProbe("employee_name", "val=Katherine Johnson");
     await expectProbe("serial_no", "ro=false");
-    fireEvent.click(screen.getByText("Save"));
+    fireEvent.click(screen.getByLabelText("Save"));
     await waitFor(async () => {
       const amendments = await fixtures.getList("Asset Loan", {
         filters: { amended_from: "LOAN-CANCELLED" },
@@ -279,7 +279,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     renderForm(corpus(), { name: "LOAN-SUBMITTED", roles: ["Loan Officer"], onCancel: vi.fn() });
     await expectStatus("submitted");
     expect(screen.queryByTestId("frappe-form-cancel-document")).toBeNull();
-    expect(screen.getByText("Cancel")).toBeTruthy();
+    expect(screen.getByLabelText("Cancel")).toBeTruthy();
     cleanup();
 
     renderForm(corpus(), { name: "LOAN-CANCELLED", roles: ["Loan Officer"], onAmend: vi.fn() });
@@ -289,7 +289,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
 
     renderForm(corpus(), { name: "LOAN-DRAFT", roles: ["Loan Clerk"] });
     await expectStatus("draft");
-    expect(screen.getByText("Save")).toBeTruthy();
+    expect(screen.getByLabelText("Save")).toBeTruthy();
     expect(screen.queryByText("Submit")).toBeNull();
   });
 
@@ -305,7 +305,7 @@ describe("FrappeForm runs the desk docstatus lifecycle", () => {
     renderForm(corpus(), { name: "LOAN-SUBMITTED", roles: ["Auditor"], onCancel: vi.fn() });
     await expectStatus("submitted");
     expect(screen.queryByTestId("frappe-form-cancel-document")).toBeNull();
-    expect(screen.getByText("Cancel")).toBeTruthy();
+    expect(screen.getByLabelText("Cancel")).toBeTruthy();
     cleanup();
 
     renderForm(corpus(), { name: "LOAN-CANCELLED", roles: ["Auditor"], onAmend: vi.fn() });
@@ -326,11 +326,11 @@ describe("a read-only record view keeps desk's lifecycle beside Edit", () => {
     const onEdit = vi.fn();
     renderForm(fixtures, { name: "LOAN-DRAFT", onEdit, onCancel: vi.fn(), onDelete: vi.fn() });
     await expectStatus("draft");
-    expect(screen.queryByText("Save")).toBeNull();
-    expect(screen.queryByText("Cancel")).toBeNull();
-    expect(screen.getByText("Delete")).toBeTruthy();
+    expect(screen.queryByLabelText("Save")).toBeNull();
+    expect(screen.queryByLabelText("Cancel")).toBeNull();
+    expect(screen.getByLabelText("Delete")).toBeTruthy();
 
-    fireEvent.click(screen.getByText("Edit"));
+    fireEvent.click(screen.getByLabelText("Edit"));
     expect(onEdit).toHaveBeenCalledTimes(1);
 
     fireEvent.click(screen.getByText("Submit"));
@@ -338,30 +338,30 @@ describe("a read-only record view keeps desk's lifecycle beside Edit", () => {
     await waitFor(async () => expect(await docstatusOf(fixtures, "LOAN-DRAFT")).toBe(1));
     await expectStatus("submitted");
     expect(screen.getByText("Cancel Document")).toBeTruthy();
-    expect(screen.getByText("Edit")).toBeTruthy();
-    expect(screen.queryByText("Delete")).toBeNull();
+    expect(screen.getByLabelText("Edit")).toBeTruthy();
+    expect(screen.queryByLabelText("Delete")).toBeNull();
   });
 
   it("a submitted document offers Cancel Document, and its allow_on_submit field keeps Edit", async () => {
     const fixtures = corpus();
     renderForm(fixtures, { name: "LOAN-SUBMITTED", onEdit: vi.fn(), onCancel: vi.fn() });
     await expectStatus("submitted");
-    expect(screen.getByText("Edit")).toBeTruthy();
-    expect(screen.queryByText("Cancel")).toBeNull();
-    expect(screen.queryByText("Close")).toBeNull();
+    expect(screen.getByLabelText("Edit")).toBeTruthy();
+    expect(screen.queryByLabelText("Cancel")).toBeNull();
+    expect(screen.queryByLabelText("Close")).toBeNull();
 
     fireEvent.click(screen.getByText("Cancel Document"));
     await waitFor(() => expect(confirm).toHaveBeenCalledWith("Permanently Cancel LOAN-SUBMITTED?"));
     await waitFor(async () => expect(await docstatusOf(fixtures, "LOAN-SUBMITTED")).toBe(2));
     await expectStatus("cancelled");
-    expect(screen.queryByText("Edit")).toBeNull();
+    expect(screen.queryByLabelText("Edit")).toBeNull();
   });
 
   it("a cancelled document offers Amend and no Edit", async () => {
     const onAmend = vi.fn();
     renderForm(corpus(), { name: "LOAN-CANCELLED", onEdit: vi.fn(), onAmend });
     await expectStatus("cancelled");
-    expect(screen.queryByText("Edit")).toBeNull();
+    expect(screen.queryByLabelText("Edit")).toBeNull();
 
     fireEvent.click(screen.getByText("Amend"));
     await waitFor(() => expect(onAmend).toHaveBeenCalled());
@@ -374,7 +374,7 @@ describe("a submittable doctype's routed pages", () => {
     const pushed = renderPage(corpus(), "/loans/LOAN-DRAFT");
     await expectStatus("draft");
     expect(screen.getByText("Submit")).toBeTruthy();
-    expect(screen.queryByText("Save")).toBeNull();
+    expect(screen.queryByLabelText("Save")).toBeNull();
 
     // LC-145: Submit is the bar's one action, so Edit rides the "…" menu.
     fireEvent.click(screen.getByTestId("frappe-form-menu"));
@@ -386,14 +386,14 @@ describe("a submittable doctype's routed pages", () => {
     const pushed = renderPage(corpus(), "/loans/LOAN-DRAFT/edit");
     await expectStatus("draft");
     expect(screen.getByText("Submit")).toBeTruthy();
-    expect(screen.queryByText("Edit")).toBeNull();
+    expect(screen.queryByLabelText("Edit")).toBeNull();
 
     fireEvent.click(screen.getByTestId("set-remarks"));
     await expectStatus("notSaved");
-    expect(screen.getByText("Save")).toBeTruthy();
+    expect(screen.getByLabelText("Save")).toBeTruthy();
     expect(screen.queryByText("Submit")).toBeNull();
 
-    fireEvent.click(screen.getAllByText("Cancel")[0]);
+    fireEvent.click(screen.getAllByLabelText(/^(Cancel|Back to .+ list)$/)[0]!);
     expect(pushed).toEqual(["/loans/LOAN-DRAFT"]);
   });
 
@@ -449,7 +449,7 @@ describe("the leave button stays live while a write is in flight (LC-30)", () =>
     const onCancel = vi.fn();
     renderForm(fixtures, { name: "LOAN-SUBMITTED", onCancel });
     await expectStatus("submitted");
-    expect(screen.getByTestId("frappe-form-close").textContent).toContain("Close");
+    expect(screen.getByTestId("frappe-form-close").getAttribute("aria-label")).toBe("Close");
 
     fireEvent.click(screen.getByTestId("frappe-form-cancel-document"));
     await waitFor(() =>

package/src/FrappeForm.tsx

@@ -23,7 +23,7 @@ import type React from "react";
 import { useEffect, useMemo, useState } from "react";
 import type { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
-import { Button, Input, formCommonColors } from "@multiplatform.one/forms";
+import { IconButton, Input, formCommonColors, standardActions } from "@multiplatform.one/forms";
 import { Text as TamaguiText, XStack, YStack } from "tamagui";
 import { hairlineWidth, useResolvedKnobs } from "@multiplatform.one/theme";
 import { useFrappeConfig } from "./FrappeProvider";
@@ -677,13 +677,17 @@ function FrappeFormView<TDoc extends { name: string; doctype: string }>({
       <YStack flex={1} backgroundColor="$background" testID="frappe-form-route-editor">
         <XStack alignItems="center" gap="$2" paddingHorizontal="$2" paddingVertical="$1">
           <XStack flex={1} flexBasis={0} justifyContent="flex-start">
-            <Button
-              chromeless
+            <IconButton
+              icon={standardActions.cancel.icon}
+              edge="start"
+              data-mp-action="cancel"
               onPress={onCancel ? handleCancel : routePage.onBack}
-              aria-label={onCancel ? undefined : t("Back to {{doctype}} list", { doctype })}
-            >
-              {t("Cancel")}
-            </Button>
+              aria-label={
+                onCancel
+                  ? t(standardActions.cancel.label)
+                  : t("Back to {{doctype}} list", { doctype })
+              }
+            />
           </XStack>
           <Text
             flexShrink={1}

package/src/FrappeFormActions.tsx

@@ -1,4 +1,5 @@
 import {
+  ActionButton,
   Chip,
   DropdownMenu,
   PageMenuButton,
@@ -10,7 +11,6 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import {
   ArrowCounterClockwiseIcon,
   CheckCircleIcon,
-  FloppyDiskIcon,
   PencilSimpleIcon,
   ProhibitIcon,
   TrashIcon,
@@ -122,33 +122,27 @@ export function FrappeFormActions({
       )}
 
       {onDelete && (
-        <Button
-          outlined
+        <ActionButton
+          kind="delete"
           error
-          icon={TrashIcon}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onDelete}
-        >
-          {t("Delete")}
-        </Button>
+        />
       )}
 
       {onClose && (
-        <Button
-          outlined={!footer}
-          icon={footer ? undefined : XIcon}
+        <ActionButton
+          // A submitted document's own Cancel sits beside this button.
+          kind={action === "cancel" ? "close" : "cancel"}
           disabled={closeDisabled}
           disabledReason={closeDisabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onClose}
           testID="frappe-form-close"
-        >
-          {/* A submitted document's own Cancel sits beside this button. */}
-          {action === "cancel" ? t("Close") : t("Cancel")}
-        </Button>
+        />
       )}
 
       {action === "cancel" && (
@@ -169,18 +163,14 @@ export function FrappeFormActions({
       )}
 
       {onEdit && (
-        <Button
-          accent={action !== "submit"}
-          outlined={action === "submit"}
-          icon={PencilSimpleIcon}
+        <ActionButton
+          kind="edit"
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onEdit}
           testID="frappe-form-edit"
-        >
-          {t("Edit")}
-        </Button>
+        />
       )}
 
       {action === "amend" && onAmend && (
@@ -208,6 +198,7 @@ export function FrappeFormActions({
 
       {action === "submit" && (
         <Button
+          // action-word-escape: Frappe's docstatus Submit, a lifecycle step a check would hide
           accent
           icon={CheckCircleIcon}
           flex={footer ? 1 : undefined}
@@ -223,19 +214,16 @@ export function FrappeFormActions({
       )}
 
       {(action === "save" || action === "update") && (
-        <Button
-          accent
-          icon={footer ? undefined : FloppyDiskIcon}
-          flex={footer ? 1 : undefined}
+        <ActionButton
+          kind="save"
+          label={action === "update" ? t("Update") : undefined}
           loading={busy}
           disabled={disabled}
           disabledReason={disabled ? readOnlyReason : undefined}
           disabledReasonPlacement="inline"
           onPress={onSave}
           testID="frappe-form-save"
-        >
-          {busy ? t("Saving...") : action === "update" ? t("Update") : t("Save")}
-        </Button>
+        />
       )}
     </XStack>
   );
@@ -269,19 +257,19 @@ export function FrappeFormHeaderActions({
 
   const primary =
     action === "save" || action === "update" ? (
-      <Button
-        accent
+      <ActionButton
+        kind="save"
+        label={action === "update" ? t("Update") : undefined}
         loading={busy}
         disabled={disabled}
         disabledReason={disabled ? readOnlyReason : undefined}
         disabledReasonPlacement="inline"
         onPress={onSave}
         testID="frappe-form-save"
-      >
-        {busy ? t("Saving...") : action === "update" ? t("Update") : t("Save")}
-      </Button>
+      />
     ) : action === "submit" ? (
       <Button
+        // action-word-escape: Frappe's docstatus Submit, a lifecycle step a check would hide
         accent
         loading={busy}
         disabled={disabled}
@@ -312,16 +300,14 @@ export function FrappeFormHeaderActions({
         {t("Amend")}
       </Button>
     ) : onEdit ? (
-      <Button
-        accent
+      <ActionButton
+        kind="edit"
         disabled={disabled}
         disabledReason={disabled ? readOnlyReason : undefined}
         disabledReasonPlacement="inline"
         onPress={onEdit}
         testID="frappe-form-edit"
-      >
-        {t("Edit")}
-      </Button>
+      />
     ) : null;
 
   const lifecyclePrimary =

package/src/FrappeKanban.tsx

@@ -266,7 +266,6 @@ export function FrappeKanban<TDoc extends { name: string; doctype: string }>({
         {canQuickAdd && column.id !== "__unassigned__" && (
           <Button
             size="$2"
-            circular
             chromeless
             icon={PlusIcon}
             aria-label={t("Add card to {{column}}", { column: column.title })}

package/src/FrappeLikedBy.tsx

@@ -281,10 +281,10 @@ function FrappeLikedByBody({
         <XStack alignItems="center" gap="$2">
           <Button
             size="$2"
-            circular
             chromeless
             disabled={!canToggle}
             aria-pressed={liked}
+            selected={false}
             aria-label={liked ? t("Unlike") : t("Like")}
             onPress={handleToggle}
             icon={

package/src/FrappeListView.spec.tsx

@@ -130,10 +130,14 @@ describe("FrappeListView refresh press floor (LC-54 amendment)", () => {
     expect(refresh.className).not.toMatch(negativeMarginAtom);
     const token = refresh.getAttribute("data-size-token") as SizeTokens;
     const px = Number(getVariableValue(getSize(token)));
-    expect(refresh.className).toContain(`_mih-${px}px`);
-    expect(refresh.className).toContain(`_miw-${px}px`);
+    // LC-176: the bare glyph sits in a square box at its control height, inside
+    // the token box, and slop restores the 44pt press floor.
+    const box = Number(/(?:^| )_mih-(\d+)px/.exec(refresh.className)?.[1]);
+    expect(refresh.className).toContain(`_miw-${box}px`);
+    expect(box).toBeGreaterThan(0);
+    expect(box).toBeLessThanOrEqual(px);
     const slop = Number(refresh.getAttribute("data-mp-press-slop") ?? 0);
-    expect(px + slop * 2).toBeGreaterThanOrEqual(44);
+    expect(box + slop * 2).toBeGreaterThanOrEqual(44);
   });
 
   it("hover feedback rides the button's own in-slot box (house channel)", async () => {

package/src/FrappeListView.tsx

@@ -1202,7 +1202,6 @@ function FrappeListViewBody<TDoc extends { name: string; doctype: string }>({
               feedback stays inside its own layout slot. */}
           <Button
             size="$2"
-            circular
             chromeless
             icon={ArrowsClockwiseIcon}
             onPress={handleRefresh}

package/src/FrappeReportView.tsx

@@ -40,7 +40,7 @@
  * hidden where the web download pipeline does not exist.
  */
 import { AsyncBoundary, EmptyState } from "@multiplatform.one/components";
-import { Button, DatePicker, Spinner, formCommonColors } from "@multiplatform.one/forms";
+import { DatePicker, IconButton, Spinner, formCommonColors } from "@multiplatform.one/forms";
 import {
   DataTable,
   DataTableExport,
@@ -477,14 +477,11 @@ export function FrappeReportView({
             </XStack>
           )}
           {refreshShown && (
-            <Button
-              size="$2"
+            <IconButton
               icon={ArrowClockwiseIcon}
               onPress={refresh}
               aria-label={t("Refresh report")}
-            >
-              {t("Refresh")}
-            </Button>
+            />
           )}
           {exportEnabled && rows.length > 0 && (
             <DataTableExport

package/src/desk/DeskShell.tsx

@@ -157,7 +157,6 @@ export function DeskShell({
   const toggleButton = showMobileToggle ? (
     <Button
       chromeless
-      circular
       icon={mobileSidebarOpen ? XIcon : ListIcon}
       aria-label={t("Toggle sidebar")}
       aria-expanded={mobileSidebarOpen}

package/src/desk/deskDocumentRoutes.spec.tsx

@@ -21,9 +21,12 @@ vi.mock("../FrappeListView", () => ({
 }));
 vi.mock("../FrappeForm", () => ({
   FrappeForm: ({ onSave, name }: { onSave: (doc: { name: string }) => void; name?: string }) => (
-    <button onClick={() => onSave({ name: state.name })} data-testid="form" data-name={name}>
-      Save
-    </button>
+    <button
+      aria-label="Save"
+      onClick={() => onSave({ name: state.name })}
+      data-testid="form"
+      data-name={name}
+    />
   ),
 }));
 vi.mock("@multiplatform.one/components", () => ({
@@ -59,7 +62,7 @@ describe.each(["A/B", "A?B", "A#B", "A B", "Pokémon", "A%2FB"])("desk document
     state.name = name;
     const navigate = vi.fn();
     render(<DeskFormPage doctype="todo" onNavigate={navigate} />);
-    fireEvent.click(screen.getByText("Save"));
+    fireEvent.click(screen.getByLabelText("Save"));
     expect(navigate).toHaveBeenCalledWith(path);
   });
 });

package/src/fields/Date/typeParity.spec.tsx

@@ -119,10 +119,12 @@ async function pressText(root: ParentNode, text: string) {
   let target: Element | null = null;
   await waitFor(
     () => {
-      const node = Array.from(root.querySelectorAll("*")).find(
-        (el) => el.children.length === 0 && norm(el.textContent ?? "") === norm(text),
-      );
-      if (!node) throw new Error(`no element with text "${text}"`);
+      // LC-260: Next and Done are icon buttons, named by their label.
+      const node =
+        Array.from(root.querySelectorAll("*")).find(
+          (el) => el.children.length === 0 && norm(el.textContent ?? "") === norm(text),
+        ) ?? root.querySelector(`[aria-label="${text}"]`);
+      if (!node) throw new Error(`no element with text or label "${text}"`);
       target = node;
     },
     { timeout: 30_000 },

package/src/fields/FileUpload.spec.tsx

@@ -123,7 +123,7 @@ describe("FileUpload size gate", () => {
  * `aria-label` still fails. Recorded on MPO-123.
  */
 const buttonLabelled = (container: HTMLElement, prefix: string) =>
-  Array.from(container.querySelectorAll("button")).find((b) =>
+  Array.from(container.querySelectorAll('button, [role="button"]')).find((b) =>
     (b.getAttribute("aria-label") ?? "").startsWith(prefix),
   );
 
@@ -226,8 +226,9 @@ describe("FileUpload transfer", () => {
       /^Retry \S/,
     );
     expect(remove?.getAttribute("aria-label")).toMatch(/^Remove \S/);
-    // The visible text stays the short verb; the file name lives on the label.
-    expect(buttonLabelled(result.container, "Retry ")?.textContent).toContain("Retry");
+    // LC-260: the button shows only its glyph; the name lives on the label.
+    expect(buttonLabelled(result.container, "Retry ")?.textContent).toBe("");
+    expect(buttonLabelled(result.container, "Retry ")?.querySelector("svg")).toBeTruthy();
 
     await act(async () => {
       fireEvent.click(buttonLabelled(result.container, "Retry ") as Element);
@@ -292,6 +293,22 @@ describe("FileUpload with a value", () => {
     expect(onChange).toHaveBeenCalledWith("");
   });
 
+  it("an image's Replace and Remove are glyphs in one media capsule over it (LC-260, LC-176)", () => {
+    const result = renderWithProviders(
+      <FileUpload label="Photo" value="/files/sprite.png" isImage onChange={() => {}} />,
+    );
+    const actions = result.container.querySelector('[data-file-upload="preview-actions"]');
+    expect(actions).toBeTruthy();
+    const capsule = actions!.querySelector('[data-mp-icon-button-group="media"]');
+    expect(capsule).toBeTruthy();
+    const buttons = Array.from(capsule!.querySelectorAll("[data-mp-action]"));
+    expect(buttons.map((b) => b.getAttribute("aria-label"))).toEqual(["Replace", "Remove"]);
+    for (const button of buttons) {
+      expect(button.getAttribute("data-mp-icon-button")).not.toBe("media");
+      expect(button.textContent).toBe("");
+    }
+  });
+
   it("readOnly hides Replace and Remove — the value is visible, not editable", () => {
     const result = renderWithProviders(
       <FileUpload label="Attachment" value="/files/report.pdf" readOnly onChange={() => {}} />,