@multiplatform.one/forms 7.68.0 → 7.69.0

package/src/Button/IconButtonGroup.tsx

@@ -0,0 +1,87 @@
+import { radiusClassProps, useBarSurface } from "@multiplatform.one/theme";
+import { useState, type ReactNode } from "react";
+import { isWeb, Theme, View, XStack, type XStackProps } from "tamagui";
+import { loadGlassView } from "./glass";
+import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate";
+import { IconButtonGroupContext } from "./iconButtonGroupContext";
+
+/**
+ * LC-176: how far apart two Liquid Glass circles may sit and still merge. Half
+ * the 44pt target, so neighbours on the bar's gap always join.
+ */
+export const ICON_BUTTON_GLASS_MERGE_PX = 22;
+
+export interface IconButtonGroupProps extends XStackProps {
+  /** Over imagery or video: the group shares one material capsule. */
+  plate?: "media";
+  children?: ReactNode;
+}
+
+/**
+ * LC-176: icon buttons that sit side by side. Grounds merge, they never stand
+ * as a row of separate circles: on iOS 26 the bar's group is one Liquid Glass
+ * capsule, as the system draws a bar's item group (merging each circle through
+ * the glass container left a waist between them, FZ-8158); over media the
+ * group shares one material capsule; a bare row stays bare. A lone button
+ * keeps its own circle.
+ */
+export function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupProps) {
+  const bar = useBarSurface();
+  const [capsuleHeight, setCapsuleHeight] = useState(0);
+  if (plate === "media") {
+    return (
+      <IconButtonGroupContext.Provider value="media">
+        <Theme name="dark">
+          <XStack
+            alignItems="center"
+            alignSelf="flex-start"
+            borderRadius={100000}
+            backgroundColor="$shadow4"
+            overflow="hidden"
+            data-mp-icon-button-group="media"
+            {...radiusClassProps("R-IDENTITY", "icon button plate")}
+            {...(isWeb ? { style: MEDIA_PLATE_WEB_STYLE } : undefined)}
+            {...rest}
+          >
+            {children}
+          </XStack>
+        </Theme>
+      </IconButtonGroupContext.Provider>
+    );
+  }
+  const GlassView = bar ? loadGlassView() : null;
+  const row = (
+    <XStack
+      alignItems="center"
+      data-mp-icon-button-group={GlassView ? "glass" : bar ? "bar" : "row"}
+      {...rest}
+    >
+      {children}
+    </XStack>
+  );
+  if (!GlassView) return row;
+  return (
+    <IconButtonGroupContext.Provider value="glass">
+      <View
+        position="relative"
+        flexShrink={1}
+        minWidth={0}
+        onLayout={(event) => setCapsuleHeight(event.nativeEvent.layout.height)}
+      >
+        <GlassView
+          glassEffectStyle="regular"
+          pointerEvents="none"
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            borderRadius: capsuleHeight / 2,
+          }}
+        />
+        {row}
+      </View>
+    </IconButtonGroupContext.Provider>
+  );
+}

package/src/Button/glass.native.ts

@@ -1,8 +1,9 @@
-import type { GlassViewComponent } from "./glass";
+import type { GlassContainerComponent, GlassViewComponent } from "./glass";
 
-export type { GlassViewComponent } from "./glass";
+export type { GlassContainerComponent, GlassViewComponent } from "./glass";
 
 let cachedGlassView: GlassViewComponent | null | undefined;
+let cachedGlassContainer: GlassContainerComponent | null | undefined;
 
 /**
  * LC-176: expo-glass-effect's `GlassView`, when this binary links its native
@@ -21,6 +22,7 @@ export function loadGlassView(): GlassViewComponent | null {
     if (core.requireOptionalNativeModule?.("ExpoGlassEffect") == null) return cachedGlassView;
     const glass = require("expo-glass-effect") as {
       GlassView?: GlassViewComponent;
+      GlassContainer?: GlassContainerComponent;
       isLiquidGlassAvailable?: () => boolean;
       isGlassEffectAPIAvailable?: () => boolean;
     };
@@ -30,9 +32,20 @@ export function loadGlassView(): GlassViewComponent | null {
       glass.isGlassEffectAPIAvailable?.()
     ) {
       cachedGlassView = glass.GlassView;
+      cachedGlassContainer = glass.GlassContainer ?? null;
     }
   } catch {
     cachedGlassView = null;
   }
   return cachedGlassView;
 }
+
+/**
+ * LC-176: expo-glass-effect's `GlassContainer`, present exactly when
+ * `loadGlassView` found Liquid Glass. A binary whose module predates the
+ * container keeps separate circles rather than throwing.
+ */
+export function loadGlassContainer(): GlassContainerComponent | null {
+  if (cachedGlassView === undefined) loadGlassView();
+  return cachedGlassContainer ?? null;
+}

package/src/Button/glass.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from "react";
+import type { ComponentType, ReactNode } from "react";
 
 /** The slice of expo-glass-effect's `GlassView` an icon button draws. */
 export type GlassViewComponent = ComponentType<{
@@ -8,6 +8,13 @@ export type GlassViewComponent = ComponentType<{
   pointerEvents?: "none" | "auto" | "box-none" | "box-only";
 }>;
 
+/** The slice of expo-glass-effect's `GlassContainer` an icon button group draws. */
+export type GlassContainerComponent = ComponentType<{
+  spacing?: number;
+  style?: unknown;
+  children?: ReactNode;
+}>;
+
 /**
  * LC-176: the iOS 26 Liquid Glass material an icon button floats on in a bar.
  * Only iOS has it (`glass.native.ts`; the native module is Apple-only, so Android probes null); web, Android and GNOME draw the bare
@@ -16,3 +23,11 @@ export type GlassViewComponent = ComponentType<{
 export function loadGlassView(): GlassViewComponent | null {
   return null;
 }
+
+/**
+ * LC-176: the container that merges neighbouring Liquid Glass circles into one
+ * shape, as iOS 26 groups bar buttons. Only iOS has it.
+ */
+export function loadGlassContainer(): GlassContainerComponent | null {
+  return null;
+}

package/src/Button/iconButtonGroupContext.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+
+/**
+ * LC-176: the ground an `IconButtonGroup` paints under its buttons. `media`
+ * is one shared material capsule and `glass` one shared Liquid Glass capsule,
+ * so a button inside draws its bare glyph instead of its own circle.
+ */
+export type IconButtonGroupGround = "media" | "glass" | null;
+
+export const IconButtonGroupContext = createContext<IconButtonGroupGround>(null);
+
+export function useIconButtonGroupGround(): IconButtonGroupGround {
+  return useContext(IconButtonGroupContext);
+}

package/src/Button/index.tsx

@@ -73,6 +73,8 @@ import { formButtonColors, formCommonColors } from "../shared/colorRamps";
 import { warnBareDisabled, warnPositiveTabIndex, warnSizeRecipeEscape } from "../shared/devWarn";
 import { useControlGrouped } from "../shared/groupContext";
 import { loadGlassView } from "./glass";
+import { MEDIA_PLATE_WEB_STYLE } from "./mediaPlate";
+import { useIconButtonGroupGround } from "./iconButtonGroupContext";
 
 /**
  * Coordinated size recipe (Polaris slim/medium/large, Primer s/m/l, Linear
@@ -409,17 +411,36 @@ export interface ButtonProps extends Omit<
 export const ICON_BUTTON_PRESS_OPACITY = 0.35;
 
 /**
- * LC-176: a bar or row icon button's glyph floor (HIG 22-24pt in a 44pt
- * target). A bare glyph carries its own weight, so it never shrinks to the
- * label-icon size of a small control.
+ * LC-176: an icon button's glyph floor. The glyph itself is sized to its row
+ * (`iconButtonGlyphPx`), so it is never smaller than a 44pt target's glyph.
  */
-export const ICON_BUTTON_GLYPH_PX = 22;
+export const ICON_BUTTON_GLYPH_PX = 24;
+
+/** LC-176: the content glyph's floor; the same bold, row-sized glyph. */
+export const ICON_BUTTON_NEUTRAL_GLYPH_PX = 24;
 
 /**
- * LC-176: a neutral icon button (content, no intent: no tint to carry it) is
- * a bold monochrome glyph at 24pt or more, the Instagram / Threads weight.
+ * Phosphor draws a glyph's ink across about 208 of its 256 units, so a glyph
+ * whose ink is as tall as a text line is that line over this ratio.
  */
-export const ICON_BUTTON_NEUTRAL_GLYPH_PX = 24;
+const PHOSPHOR_INK_RATIO = 208 / 256;
+
+/**
+ * LC-176: an icon button's glyph is as tall in ink as the row's text line
+ * (YouTube's and the Phone app's bar glyphs), never a small glyph in a big
+ * target.
+ */
+export function iconButtonGlyphPx(rowLinePx: number | undefined): number {
+  if (rowLinePx === undefined) return ICON_BUTTON_GLYPH_PX;
+  return Math.max(ICON_BUTTON_GLYPH_PX, Math.round(rowLinePx / PHOSPHOR_INK_RATIO));
+}
+
+/**
+ * LC-176: a glyph on a circle the caller asked for (`circular`, `outlined`)
+ * fills this share of the circle, the iOS Settings and Contacts leading-icon
+ * ratio, never a small glyph lost in a big plate.
+ */
+export const ICON_BUTTON_CIRCLE_GLYPH_RATIO = 0.58;
 
 /** LC-176: an inline glyph is the text's size; Phosphor's 256 grid pads ~12%. */
 const INLINE_GLYPH_RATIO = 1.2;
@@ -465,7 +486,7 @@ export function Button({
   iconAfter,
   selected,
   nested = false,
-  circular,
+  circular: circularProp,
   chromeless,
   edge,
   accentInk,
@@ -556,7 +577,12 @@ export function Button({
   // (`outlined`, `circular`, `chromeless={false}`) or a segment owns it.
   const labelled = verb != null || (children != null && children !== false && children !== "");
   const iconOnly = !labelled && Boolean(icon || iconAfter);
-  const mediaPlate = iconOnly && plate === "media";
+  // LC-176: `circular chromeless` paints no plate, so an icon-only one is an
+  // icon button like any other (the SHC console's add and copy buttons).
+  const circular = circularProp && !(iconOnly && chromeless === true && plate == null);
+  // LC-176: inside a group's shared capsule a button draws its glyph alone.
+  const groupGround = useIconButtonGroupGround();
+  const mediaPlate = iconOnly && plate === "media" && groupGround !== "media";
   const confirmPlate = iconOnly && primaryPlate;
   const iconButton =
     iconOnly &&
@@ -575,12 +601,16 @@ export function Button({
   // LC-176: the context picks the icon button's treatment, never the app. In a
   // bar it takes the bar tint (the accent, on Liquid Glass where iOS draws
   // it); in content, with no intent, it is a bold glyph in the text colour.
-  const neutralGlyph = iconButton && !(theme ?? intent) && !barSurface && accentInk == null;
+  // An action inline with a value (copy beside an address) is tinted like a
+  // link, so it reads as the one pressable thing on the line.
+  const neutralGlyph =
+    iconButton && !(theme ?? intent) && !barSurface && accentInk == null && inline !== true;
   if (iconButton) {
     chromeless = true;
-    accentInk = accentInk ?? (!(theme ?? intent) && barSurface);
+    accentInk = accentInk ?? (!(theme ?? intent) && (barSurface || inline === true));
   }
-  const resolvedGlyphWeight = glyphWeight ?? (neutralGlyph ? "bold" : "regular");
+  // LC-176: a glyph that is the whole button is bold, so it reads as one.
+  const resolvedGlyphWeight = glyphWeight ?? (iconOnly ? "bold" : "regular");
   const elevatedGround = useElevatedSurface();
   const darkScheme = isDarkThemeName(useThemeName());
   const resolvedSize = typeof sizeProp === "number" ? sizeProp : knobProps.sizeToken;
@@ -773,34 +803,43 @@ export function Button({
   const barGlyph =
     ((iconButton || mediaPlate || confirmPlate) && !nested) ||
     (labelled && chromeless && accentInk === true && edge === "start");
-  const glyphFloor =
-    neutralGlyph && !inlineGlyph ? ICON_BUTTON_NEUTRAL_GLYPH_PX : ICON_BUTTON_GLYPH_PX;
+  const labelLine = labelLinePx(knobProps.body.fontFamily);
+  const glyphFloor = iconButtonGlyphPx(labelLine);
   // LC-176: on iOS 26 a bar's icon button floats on Liquid Glass, the native
   // bar button. Elsewhere, and on a binary without the module, it stays the
   // bare tinted glyph.
+  const glassGroup = groupGround === "glass";
   const GlassView =
-    iconButton && !inlineGlyph && !nested && accentInk && barSurface && !selectedFill
+    iconButton && !inlineGlyph && !nested && accentInk && barSurface && !selectedFill && !glassGroup
       ? loadGlassView()
       : null;
+  const framedCircle = iconOnly && Boolean(circular) && !nested && !mediaPlate && !confirmPlate;
+  const framedCirclePx =
+    touch && typeof sizeProp !== "number"
+      ? Math.max(sizeTokenPx(resolvedSize), MIN_PRESS_TARGET)
+      : sizeTokenPx(resolvedSize);
   const iconSize = nested
     ? Math.min(recipe.iconSize, Math.max(12, Math.round(knobProps.nestedControl.px * 0.45)))
-    : inlineGlyph
-      ? Math.round(recipe.fontSize * INLINE_GLYPH_RATIO)
-      : barGlyph
-        ? touch
-          ? Math.max(glyphFloor, resolveButtonSizeRecipe("$6", recipeFamily, touch).iconSize)
-          : // A pointer toolbar keeps its token box (LC-54); the glyph fills it
-            // up to the same floor.
-            Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 8))
-        : recipe.iconSize;
+    : framedCircle
+      ? Math.round(framedCirclePx * ICON_BUTTON_CIRCLE_GLYPH_RATIO)
+      : inlineGlyph
+        ? Math.round(recipe.fontSize * INLINE_GLYPH_RATIO)
+        : barGlyph
+          ? touch
+            ? Math.max(glyphFloor, resolveButtonSizeRecipe("$6", recipeFamily, touch).iconSize)
+            : // A pointer toolbar keeps its token box (LC-54); the glyph fills it
+              // up to the same floor.
+              Math.max(recipe.iconSize, Math.min(glyphFloor, recipe.height - 8))
+          : recipe.iconSize;
   const glyph =
-    barGlyph || inlineGlyph ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight) : icon;
+    barGlyph || inlineGlyph || framedCircle
+      ? withGlyphWeight(icon, iconSize, resolvedGlyphWeight)
+      : icon;
 
   // LC-158: the frame keeps its recipe height under Dynamic Type, so the
   // label grows only as far as that height holds: its em and its line, which
   // React Native scales by the same multiplier.
   const labelBoxPx = nested ? knobProps.nestedControl.px : recipe.height;
-  const labelLine = labelLinePx(knobProps.body.fontFamily);
   const labelMaxFontScale = Math.min(
     maxFontScaleToFit(
       labelBoxPx,
@@ -879,7 +918,7 @@ export function Button({
     </View>
   ) : null;
   const glyphAfter =
-    iconAfter && (barGlyph || inlineGlyph)
+    iconAfter && (barGlyph || inlineGlyph || framedCircle)
       ? withGlyphWeight(iconAfter, iconSize, resolvedGlyphWeight)
       : iconAfter;
   const iconAfterElement = glyphAfter ? (
@@ -994,11 +1033,8 @@ export function Button({
       : undefined;
   // A square box, so an `edge` pull puts the glyph itself on the gutter.
   // On glass the circle, not the glyph, sits on the margin.
-  const glyphEdgePull = GlassView
-    ? 0
-    : iconButton
-      ? -Math.max(0, (visualPx - iconSize) / 2)
-      : edgePull;
+  const glyphEdgePull =
+    GlassView || glassGroup ? 0 : iconButton ? -Math.max(0, (visualPx - iconSize) / 2) : edgePull;
   const buttonElement = (
     <ButtonFrame
       // DG-ST-03: an explained disable is aria-disabled (focusable, press
@@ -1046,20 +1082,14 @@ export function Button({
         ? { width: visualPx, minWidth: visualPx, paddingHorizontal: 0 }
         : undefined)}
       {...(inlineGlyph ? { marginInlineStart: "$2" as const } : undefined)}
-      {...(GlassView ? { borderRadius: 100000, overflow: "hidden" as const } : undefined)}
+      // The glass rounds itself, unclipped.
+      {...(GlassView ? { borderRadius: 100000 } : undefined)}
       {...(confirmPlate ? { borderRadius: 100000 } : undefined)}
       {...(mediaPlate
         ? {
             borderRadius: 100000,
             backgroundColor: "$shadow4",
-            ...(isWeb
-              ? {
-                  style: {
-                    backdropFilter: "blur(16px) saturate(180%)",
-                    WebkitBackdropFilter: "blur(16px) saturate(180%)",
-                  },
-                }
-              : undefined),
+            ...(isWeb ? { style: MEDIA_PLATE_WEB_STYLE } : undefined),
           }
         : undefined)}
       {...(edge && !inlineGlyph && chromeless && !selectedFill && !isCircular
@@ -1221,7 +1251,14 @@ export function Button({
           glassEffectStyle="regular"
           isInteractive
           pointerEvents="none"
-          style={{ position: "absolute", top: 0, right: 0, bottom: 0, left: 0 }}
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0,
+            borderRadius: visualPx / 2,
+          }}
         />
       ) : null}
       {iconElement}
@@ -1292,3 +1329,6 @@ export interface IconButtonProps extends Omit<
 export function IconButton(props: IconButtonProps) {
   return <Button {...props} />;
 }
+
+export { IconButtonGroup, ICON_BUTTON_GLASS_MERGE_PX } from "./IconButtonGroup";
+export type { IconButtonGroupProps } from "./IconButtonGroup";

package/src/Button/mediaPlate.ts

@@ -0,0 +1,9 @@
+/**
+ * LC-176: the media plate's material on web, where a blur behind the plate is
+ * the platform's material; native keeps the translucent ground alone. One
+ * copy, shared by a lone plate and a group's capsule.
+ */
+export const MEDIA_PLATE_WEB_STYLE = {
+  backdropFilter: "blur(16px) saturate(180%)",
+  WebkitBackdropFilter: "blur(16px) saturate(180%)",
+} as const;

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/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/fields/FileUpload/FileUpload.spec.tsx

@@ -67,11 +67,15 @@ describe("FileUpload", () => {
     const result = renderWithProviders(
       <FileUpload existing={{ src: "/files/sprite.png" }} onExistingRemove={remove} />,
     );
-    // LC-260: Replace and Remove are glyphs on the media plate over the image.
+    // 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(
-      actions?.querySelector('[aria-label="Replace"]')?.getAttribute("data-mp-icon-button"),
-    ).toBe("media");
+      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");
@@ -349,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, bare ✕ remove (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 />,
     );
@@ -372,13 +376,13 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(sizeLine).toBeTruthy();
     expect(sizeLine.className).toMatch(/_fow-700/);
 
-    // Remove: LC-176's bare ✕, no fill or border, painted at nestedControl
-    // (29) with hitSlop restoring the 44 floor (data-mp-press-slop 8 → 45).
-    // The filled $color12 disc it replaced read as a plate on plain content.
+    // 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-transparent/);
     expect(remove.className).not.toMatch(/_bg-color12/);
     expect(remove.querySelector("svg")).toBeTruthy();
     // The caption is dropped once files exist; the CTA stays.

package/src/fields/FileUpload/index.tsx

@@ -5,7 +5,7 @@ import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { type DragEvent, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { useMedia, useProps, type SizeTokens } from "tamagui";
 import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
-import { Button, IconButton } from "../../Button";
+import { Button, IconButton, IconButtonGroup } from "../../Button";
 import { standardActions } from "../../standardActions";
 import { Field, FieldLayout } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
@@ -1092,7 +1092,9 @@ export function FileUpload<
                         zIndex={1}
                         {...knobProps.gap}
                       >
-                        {previewActions(true, onValueChange)}
+                        <IconButtonGroup plate="media">
+                          {previewActions(true, onValueChange)}
+                        </IconButtonGroup>
                       </XStack>
                     ) : null}
                   </YStack>

package/src/index.ts

@@ -115,11 +115,19 @@ export type { ActionLabelParts } from "./actionLabel";
 export {
   Button,
   IconButton,
+  IconButtonGroup,
+  iconButtonGlyphPx,
+  ICON_BUTTON_GLASS_MERGE_PX,
   ICON_BUTTON_GLYPH_PX,
   ICON_BUTTON_NEUTRAL_GLYPH_PX,
   ICON_BUTTON_PRESS_OPACITY,
 } from "./Button";
-export type { ButtonProps, ButtonActionRole, IconButtonProps } from "./Button";
+export type {
+  ButtonProps,
+  ButtonActionRole,
+  IconButtonGroupProps,
+  IconButtonProps,
+} from "./Button";
 
 export { Input } from "./fields/Input";
 export type { InputProps } from "./fields/Input";

package/types/Button/IconButtonGroup.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import { type XStackProps } from "tamagui";
+/**
+ * LC-176: how far apart two Liquid Glass circles may sit and still merge. Half
+ * the 44pt target, so neighbours on the bar's gap always join.
+ */
+export declare const ICON_BUTTON_GLASS_MERGE_PX = 22;
+export interface IconButtonGroupProps extends XStackProps {
+    /** Over imagery or video: the group shares one material capsule. */
+    plate?: "media";
+    children?: ReactNode;
+}
+/**
+ * LC-176: icon buttons that sit side by side. Grounds merge, they never stand
+ * as a row of separate circles: on iOS 26 the bar's group is one Liquid Glass
+ * capsule, as the system draws a bar's item group (merging each circle through
+ * the glass container left a waist between them, FZ-8158); over media the
+ * group shares one material capsule; a bare row stays bare. A lone button
+ * keeps its own circle.
+ */
+export declare function IconButtonGroup({ plate, children, ...rest }: IconButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconButtonGroup.d.ts.map

package/types/Button/IconButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonGroup.d.ts","sourceRoot":"","sources":["../../src/Button/IconButtonGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAA8B,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAKvE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAE7C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,oEAAoE;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CA2DjF"}