@multiplatform.one/forms 7.77.0 → 7.77.2

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

@@ -9,7 +9,13 @@ import { PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useState, type ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Text, XStack, YStack, getTokens, getVariableValue } from "tamagui";
+import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
 import { Button } from "../Button";
+import {
+  IconButtonGroupSurfaceContext,
+  type IconButtonGroupPlate,
+  type IconButtonGroupSurface,
+} from "../Button/iconButtonGroupContext";
 import { Input as InputParts } from "../InputParts";
 import { OverlayStackProvider } from "../shared/overlayStack";
 import { MENU_MIN_WIDTH, type CompactFace } from "./compactFace";
@@ -540,3 +546,101 @@ describe("LC-112 icon trigger echo on native (FZ-8480, rv_2607879d3bdaf9bf)", ()
     expect(glyphPath(iconEcho())).not.toBe(glyphPath(live));
   });
 });
+
+const capsuleSurface = (plate: IconButtonGroupPlate): IconButtonGroupSurface => ({
+  measure: (callback) => callback(plate),
+});
+
+describe("LC-112 grouped glass capsule on native (FZ-8550, Round 37 second pass)", () => {
+  const plate = { x: 200, y: 50, width: 174, height: 44, radius: 22 };
+
+  it("covers the whole capsule from context at its radius; only the pressed trigger shows, as its X", () => {
+    trigger = { x: 330, y: 50, width: 44, height: 44 };
+    const result = renderWithProviders(
+      <IconButtonGroupSurfaceContext.Provider value={capsuleSurface(plate)}>
+        <EchoMenu kind="menu" />
+      </IconButtonGroupSurfaceContext.Provider>,
+    );
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    const panel = menu() as HTMLElement;
+    layout(panel, MENU_MIN_WIDTH, 180);
+    const left = parseFloat(panel.style.left);
+    const top = parseFloat(panel.style.top);
+    // The panel's frame contains the capsule's: same top edge, both ends.
+    expect(top).toBe(plate.y);
+    expect(left).toBeLessThanOrEqual(plate.x);
+    expect(left + MENU_MIN_WIDTH).toBeGreaterThanOrEqual(plate.x + plate.width);
+    expect(left).toBe(plate.x + plate.width - MENU_MIN_WIDTH);
+    expect(corners(frame() as HTMLElement)).toEqual(radiusAtoms(plate.radius));
+    // The band is the capsule's height; the X keeps the trigger's own box.
+    const band = iconBand() as HTMLElement;
+    expect(band.style.height).toBe(`${plate.height}px`);
+    const box = band.firstElementChild as HTMLElement;
+    expect(box.style.width).toBe(`${trigger.width}px`);
+    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(`${trigger.x - left}px`);
+    // Only the pressed trigger shows, as an X; nothing else of the group.
+    const echoes = document.querySelectorAll('[data-testid="floating-panel-icon-echo"]');
+    expect(echoes).toHaveLength(1);
+    const x = render(<XIcon weight="bold" />);
+    expect(glyphPath(echoes[0] as Element)).toBe(glyphPath(x.container));
+    x.unmount();
+  });
+
+  it("takes the capsule's width as its floor when the capsule is wider than the menu", () => {
+    const wide = { x: 16, y: 50, width: 358, height: 44, radius: 22 };
+    trigger = { x: 330, y: 50, width: 44, height: 44 };
+    const result = renderWithProviders(
+      <IconButtonGroupSurfaceContext.Provider value={capsuleSurface(wide)}>
+        <EchoMenu kind="menu" />
+      </IconButtonGroupSurfaceContext.Provider>,
+    );
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    const panel = menu() as HTMLElement;
+    expect(panel.style.minWidth).toBe(`${wide.width}px`);
+    layout(panel, wide.width, 180);
+    expect(panel.style.left).toBe(`${wide.x}px`);
+  });
+
+  it("waits for the capsule before it shows, so it never opens on the button alone first", () => {
+    trigger = { x: 330, y: 50, width: 44, height: 44 };
+    let answer: ((plate: IconButtonGroupPlate | null) => void) | null = null;
+    const result = renderWithProviders(
+      <IconButtonGroupSurfaceContext.Provider
+        value={{
+          measure: (callback) => {
+            answer = callback;
+          },
+        }}
+      >
+        <EchoMenu kind="menu" />
+      </IconButtonGroupSurfaceContext.Provider>,
+    );
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    const panel = menu() as HTMLElement;
+    layout(panel, MENU_MIN_WIDTH, 180);
+    expect(panel.style.opacity).toBe("0");
+    act(() => answer?.(plate));
+    expect(panel.style.opacity).toBe("1");
+    expect(panel.style.left).toBe(`${plate.x + plate.width - MENU_MIN_WIDTH}px`);
+  });
+
+  it("covers a 32pt avatar at its 44pt target, so its centre is the row-icon column (FZ-8480)", () => {
+    trigger = { x: 100, y: 56, width: 32, height: 32 };
+    const result = renderWithProviders(<EchoMenu kind="menu" />);
+    tap(result.getAllByRole("button", { name: "Add node" })[0]!);
+    const panel = menu() as HTMLElement;
+    layout(panel, MENU_MIN_WIDTH, 180);
+    const inset = (MIN_PRESS_TARGET - trigger.width) / 2;
+    expect(panel.style.left).toBe(`${trigger.x - inset}px`);
+    expect(panel.style.top).toBe(`${trigger.y - inset}px`);
+    const band = iconBand() as HTMLElement;
+    expect(band.style.height).toBe(`${MIN_PRESS_TARGET}px`);
+    const box = band.firstElementChild as HTMLElement;
+    expect(box.style.width).toBe(`${trigger.width}px`);
+    expect(box.style.marginTop).toBe(`${inset}px`);
+    expect(box.style.marginInlineStart || box.style.marginLeft).toBe(`${inset}px`);
+    // The X's centre sits half a press target in: where a row's leading
+    // glyph centres (row inset plus half its 18pt slot, on the frame border).
+    expect(inset + trigger.width / 2).toBe(MIN_PRESS_TARGET / 2);
+  });
+});

package/src/FloatingPanel/coverRect.ts

@@ -0,0 +1,42 @@
+import { MIN_PRESS_TARGET } from "@multiplatform.one/theme";
+import type { TriggerRect } from "./pointAnchor";
+
+/**
+ * The 44pt box an icon trigger is pressed in, centred on the trigger
+ * (LC-176). A trigger drawn smaller than its target (a 32pt avatar) is
+ * covered at its target, so the panel's row-icon column, which centres on
+ * a 44pt start inset, runs through the trigger's centre and the X drawn on
+ * it (FZ-8480 GAP). A trigger at least that big is its own box.
+ */
+export function pressTargetRect(trigger: TriggerRect, min = MIN_PRESS_TARGET): TriggerRect {
+  const width = Math.max(trigger.width, min);
+  const height = Math.max(trigger.height, min);
+  return {
+    x: trigger.x - (width - trigger.width) / 2,
+    y: trigger.y - (height - trigger.height) / 2,
+    width,
+    height,
+  };
+}
+
+/**
+ * The surface a panel opened from an icon trigger covers (LC-112, FZ-8480
+ * Round 37): the plate the trigger sits on. In a grouped glass capsule
+ * that is the capsule (FZ-8550); a lone trigger is its press target.
+ */
+export function iconCoverRect(trigger: TriggerRect, group: TriggerRect | null): TriggerRect {
+  return group ?? pressTargetRect(trigger);
+}
+
+/**
+ * Where the trigger sits inside the surface its panel covers: the X box's
+ * offset from the cover's top, and the band's height. Null when the cover is
+ * the trigger itself.
+ */
+export function echoInCover(
+  trigger: TriggerRect,
+  cover: TriggerRect,
+): { top: number; height: number } | null {
+  if (cover.y === trigger.y && cover.height === trigger.height) return null;
+  return { top: trigger.y - cover.y, height: cover.height };
+}

package/src/FloatingPanel/iconEcho.tsx

@@ -2,7 +2,7 @@ import { XIcon } from "@phosphor-icons/react";
 import { cloneElement, isValidElement, useState, type ReactElement, type ReactNode } from "react";
 import { SurfaceContext, type SurfaceIntent } from "@multiplatform.one/theme";
 import { useTheme, View } from "tamagui";
-import { ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "../Button/circleGlyph";
+import { boldStroke, ICON_BUTTON_CIRCLE_GLYPH_RATIO } from "../Button/circleGlyph";
 import { t } from "../shared/t";
 
 /**
@@ -83,10 +83,15 @@ const avatarPlate = "$selectedBackground";
 /** The X's glyph before the circle has measured itself. */
 const circleGlyphFallbackPx = 18;
 
-/** An X in a circle the size of the trigger it replaces (an avatar). */
+/**
+ * An X in a circle the size of the trigger it replaces (an avatar), stroked
+ * to the bar buttons' bold stem (LC-176), so every X in a bar reads at one
+ * weight.
+ */
 function CircleClose({ label, onClose }: { label: string; onClose: () => void }) {
   const theme = useTheme();
   const [side, setSide] = useState(0);
+  const ink = theme.selectedColor?.val ?? theme.color?.val;
   return (
     <View
       role="button"
@@ -110,7 +115,8 @@ function CircleClose({ label, onClose }: { label: string; onClose: () => void })
       <XIcon
         size={side > 0 ? Math.round(side * ICON_BUTTON_CIRCLE_GLYPH_RATIO) : circleGlyphFallbackPx}
         weight="bold"
-        color={theme.selectedColor?.val ?? theme.color?.val}
+        color={ink}
+        {...boldStroke("bold", typeof ink === "string" ? ink : undefined)}
         aria-hidden
       />
     </View>

package/src/FloatingPanel/index.native.tsx

@@ -123,6 +123,12 @@ import { RegularPanel } from "./RegularPanel";
 import { panelViewportPadding, resolvePanelWidthMode } from "./useFloatingPanel";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 import { iconEchoElement, iconEchoOverlays, type IconEcho } from "./iconEcho";
+import { echoInCover, iconCoverRect } from "./coverRect";
+import {
+  IconButtonGroupSurfaceContext,
+  useIconButtonGroupSurface,
+  type IconButtonGroupPlate,
+} from "../Button/iconButtonGroupContext";
 
 // Re-export the hook + constants so Select / Combobox / external consumers
 // resolve identically on native (their floating cores are unused on device
@@ -189,10 +195,13 @@ export function FloatingPanel({
   const { knobProps } = useResolvedKnobs({ painted: false });
   const triggerSurface = SurfaceContext.useStyledContext();
   const windowZIndex = useOverlayZIndex("sheet");
+  // A grouped trigger's capsule is its own: a panel's content never covers it.
   const children = (
-    <Surface painted={false} elevated>
-      {panelChildren}
-    </Surface>
+    <IconButtonGroupSurfaceContext.Provider value={null}>
+      <Surface painted={false} elevated>
+        {panelChildren}
+      </Surface>
+    </IconButtonGroupSurfaceContext.Provider>
   );
   const slideTransition = knobProps.motion.slide.transition;
   const enterDuration = motionDurationMs(slideTransition);
@@ -250,6 +259,10 @@ export function FloatingPanel({
   const anchored = asMenu || asRegular;
   const triggerRef = useRef<RNView | null>(null);
   const [anchor, setAnchor] = useState<TriggerRect | null>(null);
+  // LC-112 (FZ-8550): a trigger in a bar's glass capsule covers the capsule.
+  const groupSurface = useIconButtonGroupSurface();
+  // `undefined` while the capsule is still being measured.
+  const [group, setGroup] = useState<IconButtonGroupPlate | null | undefined>(null);
   const [triggerRadius, setTriggerRadius] = useState<number | null>(null);
   const reportTriggerRadius = useCallback(
     (radius: number) => setTriggerRadius((prev) => (prev === radius ? prev : radius)),
@@ -260,6 +273,7 @@ export function FloatingPanel({
   useLayoutEffect(() => {
     if (!anchored || !open) {
       setAnchor(null);
+      setGroup(null);
       return;
     }
     const node = triggerRef.current as
@@ -275,10 +289,18 @@ export function FloatingPanel({
     } else {
       setAnchor({ x: 0, y: 0, width: 0, height: 0 });
     }
+    if (iconEcho && anchorMode !== "attach" && groupSurface) {
+      setGroup(undefined);
+      groupSurface.measure((plate) => {
+        if (live) setGroup(plate);
+      });
+    } else {
+      setGroup(null);
+    }
     return () => {
       live = false;
     };
-  }, [anchored, open]);
+  }, [anchored, open, iconEcho, anchorMode, groupSurface]);
 
   const handleBackdropPress = useCallback(() => {
     if (backdropArmed) close();
@@ -636,7 +658,7 @@ export function FloatingPanel({
             <TriggerMenuPanel
               // An attached menu (an icon trigger, no echo row) opens under its
               // trigger instead of over it, the UIMenu pull-down (LC-262).
-              anchor={anchor}
+              anchor={group === undefined ? null : anchor}
               attach={anchorMode === "attach"}
               bounds={{
                 top: topInset + panelViewportPadding,
@@ -655,6 +677,7 @@ export function FloatingPanel({
                   : null
               }
               iconEchoKind={iconEcho}
+              group={iconEcho && anchorMode !== "attach" ? (group ?? null) : null}
               coverAlign={anchorMode === "attach" ? "start" : coverAlign}
               panelWidth={panelWidth}
               triggerRadius={anchorMode === "attach" ? null : triggerRadius}
@@ -824,6 +847,7 @@ function TriggerMenuPanel({
   echoLabel,
   iconEcho = null,
   iconEchoKind = "menu",
+  group = null,
   coverAlign,
   panelWidth,
   triggerRadius,
@@ -841,6 +865,8 @@ function TriggerMenuPanel({
   /** LC-112 (FZ-8480): the icon trigger drawn again in its own spot. */
   iconEcho?: ReactNode;
   iconEchoKind?: IconEcho;
+  /** LC-112 (FZ-8550): the glass capsule a grouped trigger sits on. */
+  group?: IconButtonGroupPlate | null;
   coverAlign: "start" | "auto";
   panelWidth: PanelWidth;
   triggerRadius: number | null;
@@ -852,6 +878,11 @@ function TriggerMenuPanel({
 }) {
   const { knobProps } = useResolvedKnobs({ painted: false });
   const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+  // LC-112 (FZ-8480, FZ-8550): an icon trigger's panel covers the surface the
+  // trigger is seen on, its capsule or its press target, and the X keeps the
+  // trigger's own box inside it.
+  const cover = anchor && iconEcho != null ? iconCoverRect(anchor, group) : anchor;
+  const echoCover = anchor && cover && iconEcho != null ? echoInCover(anchor, cover) : null;
   // LC-112 width setting (FZ-8438 r3). `"content"` keeps the iOS pull-down's
   // 250pt floor (FZ-8220), and no panel is narrower than an echoed trigger.
   const room =
@@ -871,12 +902,12 @@ function TriggerMenuPanel({
     trigger: anchor?.width ?? 0,
     available: room.right - room.left,
     echo: echo != null,
-    floor: Math.max(MENU_MIN_WIDTH, anchor?.width ?? 0),
+    floor: Math.max(MENU_MIN_WIDTH, cover?.width ?? 0),
   });
   const placement =
-    anchor && size
+    anchor && cover && size
       ? (attach ? placeBesideTrigger : placeOverTrigger)({
-          trigger: anchor,
+          trigger: cover,
           width: size.width,
           height: size.height,
           bounds: room,
@@ -888,13 +919,15 @@ function TriggerMenuPanel({
   // LC-112 seamless cover: the menu is its trigger grown open, so it draws the
   // trigger's corner arc at all four corners. A field reports its radius; an
   // icon button with no echo is a circle or capsule, half its short side.
-  const half = anchor ? Math.min(anchor.width, anchor.height) / 2 : undefined;
+  const half = cover ? Math.min(cover.width, cover.height) / 2 : undefined;
   const radius =
-    triggerRadius != null && half != null
-      ? Math.min(triggerRadius, half)
-      : coverAlign === "auto" && half
-        ? half
-        : undefined;
+    group != null && iconEcho != null
+      ? Math.min(group.radius, half ?? group.radius)
+      : triggerRadius != null && half != null
+        ? Math.min(triggerRadius, half)
+        : coverAlign === "auto" && half
+          ? half
+          : undefined;
   const borderWidth = Number(knobProps.elevatedSurface.borderWidth) || 0;
   const echoOverlays = iconEchoOverlays(iconEchoKind, placement?.up ?? false);
   // A panel slid along the screen (a `"screen"` or fixed width, or one pushed
@@ -981,7 +1014,13 @@ function TriggerMenuPanel({
               </Pressable>
             ) : null}
             {iconEcho != null && anchor && !placement?.up && !echoOverlays ? (
-              <IconEchoBand anchor={anchor} shift={echoShift} borderWidth={borderWidth} edge="top">
+              <IconEchoBand
+                anchor={anchor}
+                cover={echoCover}
+                shift={echoShift}
+                borderWidth={borderWidth}
+                edge="top"
+              >
                 {iconEcho}
               </IconEchoBand>
             ) : null}
@@ -996,7 +1035,7 @@ function TriggerMenuPanel({
                       ? echoHeaderBox({
                           offset: echoShift,
                           width: anchor.width,
-                          height: anchor.height,
+                          height: echoCover?.height ?? anchor.height,
                           panelWidth: placement.width,
                           rtl: I18nManager.isRTL,
                         })
@@ -1010,6 +1049,7 @@ function TriggerMenuPanel({
             {iconEcho != null && anchor && (placement?.up || echoOverlays) ? (
               <IconEchoBand
                 anchor={anchor}
+                cover={echoCover}
                 shift={echoShift}
                 borderWidth={borderWidth}
                 edge={echoOverlays ? "overlay" : "bottom"}
@@ -1032,18 +1072,22 @@ function TriggerMenuPanel({
  */
 function IconEchoBand({
   anchor,
+  cover = null,
   shift,
   borderWidth,
   edge,
   children,
 }: {
   anchor: TriggerRect;
+  /** The trigger's offset in, and the height of, a cover larger than it. */
+  cover?: { top: number; height: number } | null;
   shift: number;
   borderWidth: number;
   /** `"overlay"`: an X laid over the content's top corner, taking no height. */
   edge: "top" | "bottom" | "overlay";
   children: ReactNode;
 }) {
+  const bandHeight = cover?.height ?? anchor.height;
   return (
     <RNView
       testID="floating-panel-icon-echo-band"
@@ -1055,11 +1099,11 @@ function IconEchoBand({
               top: -borderWidth,
               start: -borderWidth,
               end: -borderWidth,
-              height: anchor.height,
+              height: bandHeight,
               zIndex: 1,
             }
           : {
-              height: anchor.height,
+              height: bandHeight,
               marginHorizontal: -borderWidth,
               ...(edge === "top" ? { marginTop: -borderWidth } : { marginBottom: -borderWidth }),
             }
@@ -1070,6 +1114,7 @@ function IconEchoBand({
           width: anchor.width,
           height: anchor.height,
           marginStart: shift,
+          marginTop: cover?.top ?? 0,
           alignItems: "flex-start",
           justifyContent: "flex-start",
         }}

package/src/FloatingPanel/index.tsx

@@ -48,6 +48,7 @@ import {
   type PanelIconEchoBox,
 } from "./echoContext";
 import { iconEchoElement, iconEchoOverlays, type IconEcho } from "./iconEcho";
+import { echoInCover, iconCoverRect } from "./coverRect";
 import { groupSurfaceOf, paintedTriggerBox } from "./paintedBox";
 import {
   contextMenuPoint,
@@ -370,7 +371,6 @@ export function TriggerEchoRow({
   anchorRect,
   source,
   presentational = false,
-  edge = "top",
 }: {
   sourceRef: RefObject<HTMLElement | null>;
   onPress: () => void;
@@ -382,11 +382,6 @@ export function TriggerEchoRow({
    * assistive tech: a button child would break the listbox's role contract.
    */
   presentational?: boolean;
-  /**
-   * `"bottom"` for a drop-up (FZ-8438 r3): the panel's bottom edge is the
-   * trigger's, so the echo is its last row, sticky at the bottom.
-   */
-  edge?: "top" | "bottom";
 }) {
   const rowRef = useRef<HTMLElement | null>(null);
   const visualRef = useRef<HTMLElement | null>(null);
@@ -419,19 +414,8 @@ export function TriggerEchoRow({
       row.style.alignSelf = "flex-start";
       const frameStyle = row.parentElement ? getComputedStyle(row.parentElement) : null;
       row.style.position = "sticky";
-      if (edge === "bottom") {
-        row.style.order = "1";
-        row.style.marginTop = "";
-        row.style.top = "";
-        row.style.marginBottom = `${-(parseFloat(frameStyle?.borderBottomWidth || "0") || 0)}px`;
-        row.style.bottom = row.style.marginBottom;
-      } else {
-        row.style.order = "";
-        row.style.marginBottom = "";
-        row.style.bottom = "";
-        row.style.marginTop = `${-(parseFloat(frameStyle?.borderTopWidth || "0") || 0)}px`;
-        row.style.top = row.style.marginTop;
-      }
+      row.style.marginTop = `${-(parseFloat(frameStyle?.borderTopWidth || "0") || 0)}px`;
+      row.style.top = row.style.marginTop;
       row.style.zIndex = "1";
       // Sticky over a scrolled body, so it carries the panel's own fill.
       row.style.backgroundColor = frameStyle?.backgroundColor ?? "";
@@ -468,7 +452,7 @@ export function TriggerEchoRow({
     const observer = new ResizeObserver(sync);
     observer.observe(source);
     return () => observer.disconnect();
-  }, [sourceRef, source, children, anchorRect, presentational, edge]);
+  }, [sourceRef, source, children, anchorRect, presentational]);
   return (
     <View
       ref={rowRef as any}
@@ -583,8 +567,9 @@ function placeIconEcho(
     up: boolean;
     overlay: boolean;
     /**
-     * The shared plate a grouped trigger sits on: the band covers all of it,
-     * and only the pressed trigger shows, at its own spot in the plate.
+     * The surface the panel covers when it is not the trigger's own box (a
+     * grouped capsule, or the 44pt target of a smaller avatar): the band
+     * covers all of it, and only the pressed trigger shows, at its own spot.
      */
     group?: { top: number; height: number } | null;
   },
@@ -1082,22 +1067,43 @@ function FloatingPanelWeb({
             measured.height + firstActionHeight + bodyPadding + totalBorderWidth,
           )
         : totalContentHeight;
+      // LC-112 (FZ-8480): an icon trigger's panel covers the surface the
+      // trigger is seen on: its capsule, else its press target.
+      const painted = showIconEcho ? paintedTriggerBox(trig, measured) : null;
+      const coverRect = painted
+        ? iconCoverRect(
+            {
+              x: painted.left,
+              y: measured.top,
+              width: painted.right - painted.left,
+              height: measured.height,
+            },
+            groupBox
+              ? {
+                  x: groupBox.left,
+                  y: groupBox.top,
+                  width: groupBox.width,
+                  height: groupBox.height,
+                }
+              : null,
+          )
+        : null;
+      const echoCover = coverRect
+        ? echoInCover(
+            { x: measured.left, y: measured.top, width: measured.width, height: measured.height },
+            coverRect,
+          )
+        : null;
       let placedTop = measured.top;
       let placedLeft = left;
       let placedMaxHeight: number | null = null;
       iconEchoUpRef.current = false;
-      if (showIconEcho && measured.width > 0 && measured.height > 0) {
+      if (coverRect && measured.width > 0 && measured.height > 0) {
         // LC-112 (FZ-8480): the button is drawn again in its own spot, so the
         // panel stays on it: down from its top edge, or up from its bottom.
         // It covers the button's plate and press box where they reach past it.
-        const painted = groupBox ?? paintedTriggerBox(trig, measured);
         const placed = placeOverTrigger({
-          trigger: {
-            x: painted.left,
-            y: groupBox ? groupBox.top : measured.top,
-            width: painted.right - painted.left,
-            height: groupBox ? groupBox.height : measured.height,
-          },
+          trigger: coverRect,
           width,
           height: totalContentHeight,
           bounds: {
@@ -1169,7 +1175,7 @@ function FloatingPanelWeb({
           ? echoHeaderBox({
               offset: echoStart,
               width: measured.width,
-              height: measured.height,
+              height: echoCover?.height ?? measured.height,
               panelWidth: width,
               rtl,
             })
@@ -1181,10 +1187,7 @@ function FloatingPanelWeb({
         height: measured.height,
         up: iconEchoUpRef.current,
         overlay: echoOverlays,
-        group:
-          groupSurface && groupBox
-            ? { top: measured.top - groupBox.top, height: groupBox.height }
-            : null,
+        group: echoCover,
       });
       placeEchoOverTrigger(
         dropdownElement,

package/src/InputParts/index.tsx

@@ -34,6 +34,7 @@ import {
   styled,
   useGetThemedIcon,
   useTheme,
+  useThemeName,
 } from "tamagui";
 import {
   ensureCompositeFocusRing,
@@ -64,6 +65,7 @@ import { pressSlopProps } from "../shared/pressSlopProps";
 import { useFieldRow } from "../shared/fieldRowContext";
 import { useIsInTableCell } from "../shared/tableCellContext";
 import { useInPanelEcho, usePanelTriggerRadiusReporter } from "../FloatingPanel/echoContext";
+import { keyboardAppearanceFor } from "./keyboardAppearance";
 import { useFieldA11y, useFieldDescribedBy } from "../fieldLayout";
 
 /**
@@ -857,6 +859,7 @@ const InputAreaImpl = InputFrame.styleable<{
   // field given `size` directly (no Surface) must not type at `$true`.
   const { knobProps } = useResolvedKnobs({ size: size as SizeTokens });
   const theme = useTheme();
+  const themeName = useThemeName();
   const fieldDescribedBy = useFieldDescribedBy();
   const nativeA11yProps = useNativeFieldA11yProps();
   const inTableCell = useIsInTableCell();
@@ -929,6 +932,9 @@ const InputAreaImpl = InputFrame.styleable<{
         paddingHorizontal={0}
         paddingVertical={0}
         keyboardType={resolvedKeyboardType}
+        // The iOS keyboard follows the OS appearance unless told, so a light
+        // app on a dark phone typed on a dark keypad (FZ-8111).
+        {...(isWeb ? undefined : { keyboardAppearance: keyboardAppearanceFor(themeName) })}
         textContentType={textContentType}
         inputMode={resolvedInputMode}
         autoComplete={

package/src/InputParts/keyboardAppearance.spec.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { keyboardAppearanceFor } from "./keyboardAppearance";
+
+describe("keyboardAppearanceFor (FZ-8111)", () => {
+  it("follows the app's scheme, not the phone's", () => {
+    expect(keyboardAppearanceFor("light")).toBe("light");
+    expect(keyboardAppearanceFor("light_accent")).toBe("light");
+    expect(keyboardAppearanceFor("dark")).toBe("dark");
+    expect(keyboardAppearanceFor("dark_accent")).toBe("dark");
+    expect(keyboardAppearanceFor(undefined)).toBe("light");
+  });
+});

package/src/InputParts/keyboardAppearance.ts

@@ -0,0 +1,4 @@
+/** The iOS keypad's appearance from the active theme, not the phone's setting. */
+export function keyboardAppearanceFor(themeName: string | undefined): "light" | "dark" {
+  return String(themeName ?? "").startsWith("dark") ? "dark" : "light";
+}