@multiplatform.one/forms 7.71.0 → 7.73.0

package/src/FloatingPanel/index.tsx

@@ -15,24 +15,40 @@ import {
   OVERLAY_ATTACH_GAP,
   OVERLAY_BREAKPOINT,
   Surface,
+  SurfaceContext,
   useResolvedKnobs,
   wasKeyboardFocus,
   ensureKeyboardModalityTracking,
   motionDurationMs,
 } from "@multiplatform.one/theme";
-import { isWeb, Sheet, View, YStack } from "tamagui";
+import { isWeb, Sheet, Theme, View, YStack } from "tamagui";
 import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { ScrollArrow } from "../shared/floatingList";
 import { TrailingActionOverlay, TriggerWithTrailingAction } from "./trailingAction";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
-import { useFloatingPanel, panelViewportPadding } from "./useFloatingPanel";
+import { useFloatingPanel, panelViewportPadding, paintedCornerBox } from "./useFloatingPanel";
+import { fixedContainingBlockOrigin } from "./containingBlock";
 import type { PanelWidthMode } from "./useFloatingPanel";
+import {
+  echoOffset,
+  type PanelWidth,
+  panelLeftForWidth,
+  screenBounds,
+  slidesAlongScreen,
+} from "./panelWidth";
 import { OverlayStackProvider, useInsideOverlay, useOverlayZIndex } from "../shared/overlayStack";
 import { resolveCompactFace, type CompactFace } from "./compactFace";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
-import { fixedContainingBlockOrigin } from "./containingBlock";
+import {
+  echoHeaderBox,
+  PanelIconEchoBoxContext,
+  sameEchoBox,
+  type PanelIconEchoBox,
+} from "./echoContext";
+import { iconEchoElement, iconEchoOverlays, type IconEcho } from "./iconEcho";
+import { groupSurfaceOf, paintedTriggerBox } from "./paintedBox";
 import {
   contextMenuPoint,
   placeOverTrigger,
@@ -77,6 +93,23 @@ export interface FloatingPanelProps {
   triggerRow?: ReactNode;
   anchorRect?: { x: number; y: number; width: number; height: number };
   triggerEcho?: boolean;
+  /**
+   * Which top corner of the trigger a covering panel opens from. `"start"`
+   * (default) keeps the echo row in place. `"auto"` is for an icon trigger
+   * (LC-112, FZ-8438): the trailing corner when the leading one would run off
+   * the end edge, and a vertical collision slides the menu up over its button
+   * instead of handing it to a sheet, the way an iOS menu grows out of it.
+   */
+  coverAlign?: "start" | "auto";
+  /**
+   * An icon-only trigger's covering panel draws the pressed button again in
+   * its own spot as an X, same size and plate, the way iOS morphs a + into an
+   * X (LC-112, FZ-8480 Round 37). `"close"` lays the X over the content's
+   * header row; `"menu"` gives it its own band above the rows. It closes the
+   * panel and reads "Close". The panel never slides off the button: it opens
+   * down from the button's top edge, or up from its bottom edge.
+   */
+  iconEcho?: IconEcho;
   /**
    * Optional control rendered beside the trigger but OUTSIDE the native press
    * capture (e.g. DatePicker/ColorPicker clear). On native the trigger subtree
@@ -127,6 +160,14 @@ export interface FloatingPanelProps {
    * anything opened from a field-shaped trigger takes the floor.
    */
   widthMode?: PanelWidthMode;
+  /**
+   * How wide the panel opens over its trigger (LC-112, FZ-8438 r3):
+   * `"content"` hugs the content (never narrower than an echoed trigger),
+   * `"trigger"` is the trigger's width, `"screen"` fills the room between the
+   * screen's safe margins with its top edge still on the trigger's, and a
+   * number is a fixed width. Unset keeps each component's own default.
+   */
+  panelWidth?: PanelWidth;
   /**
    * @deprecated Pass `widthMode` instead — the boolean cannot express
    * `"match-trigger"`. `true` → `"fit-content"`, `false`/undefined →
@@ -277,6 +318,41 @@ const ECHO_STRIPPED_ATTRIBUTES = [
   "aria-activedescendant",
 ];
 
+function childPath(root: Element, node: Element): number[] | null {
+  const path: number[] = [];
+  for (let at: Element | null = node; at && at !== root; at = at.parentElement) {
+    const parent: Element | null = at.parentElement;
+    if (!parent) return null;
+    path.unshift(Array.prototype.indexOf.call(parent.children, at));
+  }
+  return path;
+}
+
+function followPath(root: Element, path: number[]): HTMLElement | null {
+  let at: Element | undefined = root;
+  for (const index of path) at = at?.children[index];
+  return (at as HTMLElement | undefined) ?? null;
+}
+
+/**
+ * LC-112 seamless cover (FZ-8438): the echo keeps the trigger's geometry but
+ * not its chrome. Its frame's border, fill, shadow and outline go, so the
+ * panel's own edge and surface are the only ones drawn and nothing separates
+ * the echo from the body. Widths stay, so the content sits where it did.
+ */
+function dropEchoChrome(source: HTMLElement, snapshot: HTMLElement) {
+  const painted = paintedCornerBox(source);
+  const path = painted ? childPath(source, painted) : null;
+  const frame = path ? followPath(snapshot, path) : null;
+  if (!frame) return;
+  frame.style.setProperty("border-color", "transparent", "important");
+  frame.style.setProperty("background-color", "transparent", "important");
+  frame.style.setProperty("background-image", "none", "important");
+  frame.style.setProperty("box-shadow", "none", "important");
+  frame.style.setProperty("outline", "none", "important");
+  frame.setAttribute("data-fp-echo-frame", "");
+}
+
 /**
  * The panel's first row when it opens over its trigger: the trigger's own
  * label/value, drawn where the trigger sits, so the panel reads as the
@@ -287,18 +363,30 @@ const ECHO_STRIPPED_ATTRIBUTES = [
  * stops stripped so labels, forms and queries still resolve to the one real
  * trigger. Pressing it closes the panel, like pressing the trigger again.
  */
-function TriggerEchoRow({
+export function TriggerEchoRow({
   sourceRef,
   onPress,
   children,
   anchorRect,
   source,
+  presentational = false,
+  edge = "top",
 }: {
   sourceRef: RefObject<HTMLElement | null>;
   onPress: () => void;
   children?: ReactNode;
   anchorRect?: FloatingPanelProps["anchorRect"];
   source: ReactNode;
+  /**
+   * Inside a listbox (Select) the echo is pointer-only and hidden from
+   * 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);
@@ -320,17 +408,33 @@ function TriggerEchoRow({
         control?.textContent ||
         source.textContent ||
         "";
-      row.setAttribute("aria-label", label);
+      if (!presentational) row.setAttribute("aria-label", label);
       const rect = anchorRect ?? source.getBoundingClientRect();
-      row.style.width = `${rect.width}px`;
+      // A stretched echo (placeEchoOverTrigger) keeps its grown width.
+      const grown = Number(row.getAttribute("data-fp-echo-stretched")) || 0;
+      const stretched = grown > rect.width;
+      row.style.width = `${stretched ? grown : rect.width}px`;
       row.style.height = `${rect.height}px`;
       const rtl = isRtl(source);
       row.style.alignSelf = "flex-start";
       const frameStyle = row.parentElement ? getComputedStyle(row.parentElement) : null;
-      row.style.marginTop = `${-(parseFloat(frameStyle?.borderTopWidth || "0") || 0)}px`;
       row.style.position = "sticky";
-      row.style.top = row.style.marginTop;
+      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.zIndex = "1";
+      // Sticky over a scrolled body, so it carries the panel's own fill.
+      row.style.backgroundColor = frameStyle?.backgroundColor ?? "";
       row.style.marginLeft = rtl
         ? ""
         : `${-(parseFloat(frameStyle?.borderLeftWidth || "0") || 0)}px`;
@@ -352,8 +456,11 @@ function TriggerEchoRow({
           node.setAttribute("tabindex", "-1");
         }
       }
+      if (children == null) dropEchoChrome(source, snapshot);
       snapshot.setAttribute("inert", "");
       snapshot.setAttribute("aria-hidden", "true");
+      snapshot.style.width = stretched ? "100%" : "";
+      snapshot.style.maxWidth = stretched ? "none" : "";
       if (children == null) visualRef.current?.replaceChildren(snapshot);
     };
     sync();
@@ -361,13 +468,14 @@ function TriggerEchoRow({
     const observer = new ResizeObserver(sync);
     observer.observe(source);
     return () => observer.disconnect();
-  }, [sourceRef, source, children, anchorRect]);
+  }, [sourceRef, source, children, anchorRect, presentational, edge]);
   return (
     <View
       ref={rowRef as any}
       data-fp-trigger-row=""
-      role="button"
-      aria-expanded={true}
+      {...(presentational
+        ? { "aria-hidden": true }
+        : { role: "button" as const, "aria-expanded": true })}
       tabIndex={-1}
       cursor="pointer"
       onPress={onPress}
@@ -381,6 +489,151 @@ function TriggerEchoRow({
   );
 }
 
+const ECHO_FIELD = 'input, textarea, [role="combobox"], [aria-haspopup="listbox"]';
+
+/**
+ * Keep the echo row on its trigger when the panel's start edge is not the
+ * trigger's (a `"screen"` or fixed `panelWidth`, or a panel slid back on
+ * screen). `translate` leaves the row's own margins and the panel's scale
+ * transform alone.
+ *
+ * With `stretch` (a consumer set `panelWidth`), a field's echo grows from the
+ * field's start edge to the panel's end edge: the value stays where it was,
+ * the chevron rides the panel's end, and the value is no longer cut short
+ * above rows that show it whole (LC-112 r3). A button echo keeps its box, so
+ * a centred label never moves.
+ */
+export function placeEchoOverTrigger(
+  panelElement: HTMLElement,
+  geometry: Parameters<typeof echoOffset>[0],
+  { stretch = false }: { stretch?: boolean } = {},
+) {
+  const row = panelElement.querySelector<HTMLElement>("[data-fp-trigger-row]");
+  if (!row) return;
+  const offset = echoOffset(geometry);
+  const x = geometry.rtl ? -offset : offset;
+  row.style.translate = Math.abs(x) < 0.5 ? "" : `${x}px 0`;
+  const triggerWidth = geometry.triggerRight - geometry.triggerLeft;
+  const grown = geometry.panelWidth - offset;
+  const field = stretch && row.querySelector(ECHO_FIELD) != null;
+  const visual = row.firstElementChild as HTMLElement | null;
+  const snapshot = visual?.firstElementChild as HTMLElement | null;
+  if (field && grown > triggerWidth + 0.5) {
+    row.style.width = `${grown}px`;
+    row.setAttribute("data-fp-echo-stretched", String(grown));
+    for (const node of [visual, snapshot]) {
+      if (!node) continue;
+      node.style.width = "100%";
+      node.style.maxWidth = "none";
+    }
+  } else if (row.hasAttribute("data-fp-echo-stretched")) {
+    row.removeAttribute("data-fp-echo-stretched");
+    row.style.width = `${triggerWidth}px`;
+    for (const node of [visual, snapshot]) {
+      if (!node) continue;
+      node.style.width = "";
+      node.style.maxWidth = "";
+    }
+  }
+}
+
+/**
+ * The band an icon trigger's echo rides (LC-112, FZ-8480): as tall as the
+ * trigger, sticky on the panel's top edge (or its bottom edge when the panel
+ * opened upward), filled with the panel's surface so scrolled rows pass under
+ * it. It comes last in the document, so a keyboard open lands on the panel's
+ * content and the echo is the last tab stop; CSS order draws it first.
+ */
+function IconEchoRow({ children }: { children: ReactNode }) {
+  return (
+    <View
+      data-fp-icon-echo=""
+      flexShrink={0}
+      alignSelf="stretch"
+      pointerEvents="box-none"
+      style={{ order: -1, position: "sticky", zIndex: 1 }}
+    >
+      <View data-fp-icon-echo-box="" alignItems="flex-start" justifyContent="flex-start">
+        {children}
+      </View>
+    </View>
+  );
+}
+
+/**
+ * Lay the icon echo on the trigger's measured box: the band is the trigger's
+ * height on the edge the panel shares with it, and the box sits `offset` in
+ * from the panel's start edge, pulled back over the frame's border so the
+ * button lands exactly where the trigger is. An overlaid echo (an X) takes no
+ * height of its own and lets the content show beside it.
+ */
+function placeIconEcho(
+  panelElement: HTMLElement,
+  {
+    offset,
+    width,
+    height,
+    up,
+    overlay,
+    group = null,
+  }: {
+    offset: number;
+    width: number;
+    height: number;
+    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.
+     */
+    group?: { top: number; height: number } | null;
+  },
+) {
+  const row = panelElement.querySelector<HTMLElement>("[data-fp-icon-echo]");
+  const box = row?.querySelector<HTMLElement>("[data-fp-icon-echo-box]");
+  if (!row || !box) return;
+  const frame = getComputedStyle(panelElement);
+  const border = (side: "Top" | "Bottom" | "Left" | "Right") =>
+    parseFloat(frame[`border${side}Width`] || "0") || 0;
+  const rtl = panelElement.dir === "rtl";
+  row.style.order = up ? "1" : "-1";
+  row.style.height = `${height}px`;
+  row.style.backgroundColor = overlay ? "transparent" : frame.backgroundColor;
+  if (up) {
+    row.style.top = "";
+    row.style.marginTop = "";
+    row.style.marginBottom = `${-border("Bottom")}px`;
+    row.style.bottom = row.style.marginBottom;
+  } else {
+    row.style.bottom = "";
+    row.style.marginTop = `${-border("Top")}px`;
+    row.style.marginBottom = overlay ? `${-(height - border("Top"))}px` : "";
+    row.style.top = row.style.marginTop;
+  }
+  row.setAttribute("data-fp-icon-echo", overlay ? "overlay" : "band");
+  if (group) {
+    row.style.height = `${group.height}px`;
+    if (!up && overlay) row.style.marginBottom = `${-(group.height - border("Top"))}px`;
+  }
+  row.style.marginLeft = `${-border("Left")}px`;
+  row.style.marginRight = `${-border("Right")}px`;
+  box.style.width = `${width}px`;
+  box.style.height = `${height}px`;
+  box.style.marginLeft = rtl ? "" : `${offset}px`;
+  box.style.marginRight = rtl ? `${offset}px` : "";
+  box.style.alignSelf = "flex-start";
+  box.style.marginTop = group ? `${group.top}px` : "";
+  box.style.position = "relative";
+  box.style.zIndex = "1";
+}
+
+/** The box that lays an element out, past any `display: contents` wrappers. */
+function layoutParentOf(element: HTMLElement | null): HTMLElement | null {
+  let parent = element?.parentElement ?? null;
+  while (parent && getComputedStyle(parent).display === "contents") parent = parent.parentElement;
+  return parent;
+}
+
 // ── FloatingPanel ─────────────────────────────────────────────
 
 // Canonical float↔sheet pivot (theme `layoutBreakpoints.medium` = Tamagui
@@ -623,10 +876,13 @@ function FloatingPanelWeb({
   sizing = "grow",
   widthMode,
   fitContent,
+  panelWidth,
   contentPadding = "default",
   openOn = "press",
   cover = true,
   triggerEcho = true,
+  coverAlign = "start",
+  iconEcho,
   triggerRow,
   anchorRect,
   clampCollisions = false,
@@ -636,6 +892,13 @@ function FloatingPanelWeb({
   const [collisionSheet, setCollisionSheet] = useState(false);
   const isFill = sizing === "fill";
   const isContextMenu = openOn === "contextmenu";
+  // A context menu anchored on its trigger (a bar button's long-press menu)
+  // covers the trigger like any other menu; only a free one opens at the point.
+  const pointMenu = isContextMenu && sheetProps.anchorMode !== "cover-trigger";
+  const showIconEcho = cover && !pointMenu && iconEcho != null;
+  const triggerSurface = SurfaceContext.useStyledContext();
+  const iconEchoUpRef = useRef(false);
+  const [echoBox, setEchoBox] = useState<PanelIconEchoBox | null>(null);
   const overlayStyleRef = useRef<{ top: number; left?: number; maxHeight: number } | null>(null);
   const pinnedTopRef = useRef(0);
   const pinnedHeightRef = useRef(0);
@@ -647,6 +910,7 @@ function FloatingPanelWeb({
   const contentRef = useRef<HTMLElement | null>(null);
   const anchorPointRef = useRef<PanelPoint | null>(null);
   const pointPlacementRef = useRef<{ dropup: boolean; alignEnd: boolean } | null>(null);
+  const coverAlignEndRef = useRef(false);
 
   const repositionFnRef = useRef<(() => void) | null>(null);
 
@@ -669,8 +933,10 @@ function FloatingPanelWeb({
     wheelGrowRef: isFill ? undefined : grownRef,
     widthMode: widthMode ?? (isContextMenu && fitContent === undefined ? "fit-content" : undefined),
     fitContent,
-    freeOverlay: isContextMenu,
+    freeOverlay: pointMenu,
     cover,
+    panelWidth,
+    echo: cover && triggerEcho && !pointMenu,
     onBeforeOpen: resetPosition,
   });
 
@@ -711,7 +977,7 @@ function FloatingPanelWeb({
       dropdownElement.scrollTop = 0;
     }
 
-    const point = isContextMenu
+    const point = pointMenu
       ? (anchorPointRef.current ?? referenceCornerPoint(trig, isRtl()))
       : null;
     const measured = anchorRect
@@ -744,6 +1010,12 @@ function FloatingPanelWeb({
         (viewport?.width ?? (document.documentElement.clientWidth || window.innerWidth));
       const viewportBottom = viewportTop + (viewport?.height ?? window.innerHeight);
       dropdownElement.style.left = `${viewportLeft - containingBlock.left}px`;
+      // LC-112 (FZ-8480 Round 37): a grouped icon trigger's surface is the
+      // group's plate, so the panel covers the whole plate; only the pressed
+      // trigger shows, as its X.
+      const groupSurface = showIconEcho ? groupSurfaceOf(trig) : null;
+      const groupBox = groupSurface?.getBoundingClientRect() ?? null;
+      if (showIconEcho) dropdownElement.style.minWidth = groupBox ? `${groupBox.width}px` : "";
       const layoutStyle = getComputedStyle(dropdownElement);
       const scale =
         layoutStyle.transform &&
@@ -753,7 +1025,48 @@ function FloatingPanelWeb({
           : 1;
       const layoutWidth = dropdownElement.getBoundingClientRect().width / (scale || 1);
       const width = Math.max(layoutWidth || dropdownElement.offsetWidth, measured.width);
-      const left = rtl ? measured.right - width : measured.left;
+      const startLeft = rtl ? measured.right - width : measured.left;
+      const endLeft = rtl ? measured.left : measured.right - width;
+      // An icon trigger has no echo to keep in place, so its menu opens from
+      // whichever top corner keeps it on screen: the trailing one for a bar
+      // button at the end edge, the way an iOS menu grows out of its button.
+      // Only the free edge needs the padding; the aligned edge is the trigger's.
+      const iconCover = coverAlign === "auto";
+      const startFree = rtl
+        ? startLeft >= viewportLeft + panelViewportPadding
+        : startLeft + width <= viewportRight - panelViewportPadding;
+      const endFree = rtl
+        ? endLeft + width <= viewportRight - panelViewportPadding
+        : endLeft >= viewportLeft + panelViewportPadding;
+      let alignEnd = iconCover && !startFree && endFree;
+      // A screen-wide or fixed-width panel is not tied to the trigger's start
+      // edge: it slides inside the margins, and only its echo stays put.
+      const slides = slidesAlongScreen(panelWidth);
+      const margins = {
+        boundsLeft: viewportLeft + panelViewportPadding,
+        boundsRight: viewportRight - panelViewportPadding,
+      };
+      const room =
+        panelWidth === "screen"
+          ? screenBounds({
+              triggerLeft: measured.left,
+              triggerRight: measured.right,
+              ...margins,
+              rtl,
+            })
+          : { left: margins.boundsLeft, right: margins.boundsRight };
+      const left = slides
+        ? panelLeftForWidth({
+            triggerLeft: measured.left,
+            triggerRight: measured.right,
+            width,
+            boundsLeft: room.left,
+            boundsRight: room.right,
+            rtl,
+          })
+        : alignEnd
+          ? endLeft
+          : startLeft;
       const firstActionHeight =
         contentRef.current?.querySelector<HTMLElement>(PANEL_FOCUSABLE)?.getBoundingClientRect()
           .height ||
@@ -771,17 +1084,49 @@ function FloatingPanelWeb({
         : totalContentHeight;
       let placedTop = measured.top;
       let placedLeft = left;
-      if (
+      let placedMaxHeight: number | null = null;
+      iconEchoUpRef.current = false;
+      if (showIconEcho && 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,
+          },
+          width,
+          height: totalContentHeight,
+          bounds: {
+            top: viewportTop + panelViewportPadding,
+            left: viewportLeft + panelViewportPadding,
+            right: viewportRight - panelViewportPadding,
+            bottom: viewportBottom - panelViewportPadding,
+          },
+          rtl,
+          align: coverAlign,
+          pinned: true,
+        });
+        placedTop = placed.top;
+        if (!slides) placedLeft = placed.left;
+        alignEnd = placed.end;
+        placedMaxHeight = placed.maxHeight;
+        iconEchoUpRef.current = placed.up;
+      } else if (
         measured.width > 0 &&
         measured.height > 0 &&
-        (left < viewportLeft ||
-          left + width > Math.max(measured.right, viewportRight - panelViewportPadding) ||
+        ((!slides &&
+          (left < viewportLeft ||
+            left + width > Math.max(measured.right, viewportRight - panelViewportPadding))) ||
           measured.right > viewportRight ||
           measured.top < viewportTop ||
           measured.top + Math.max(neededHeight, measured.height) >
             viewportBottom - panelViewportPadding)
       ) {
-        if (!clampCollisions) {
+        if (!clampCollisions && !iconCover) {
           dropdownElement.style.visibility = "hidden";
           setCollisionSheet(true);
           return;
@@ -804,18 +1149,63 @@ function FloatingPanelWeb({
             bottom: viewportBottom - panelViewportPadding,
           },
           rtl,
+          align: coverAlign,
         });
         placedTop = placed.top;
-        placedLeft = placed.left;
+        if (!slides) placedLeft = placed.left;
+        alignEnd = placed.end;
       }
+      coverAlignEndRef.current = alignEnd;
+      const echoStart = echoOffset({
+        triggerLeft: measured.left,
+        triggerRight: measured.right,
+        panelLeft: placedLeft,
+        panelWidth: width,
+        rtl,
+      });
+      const echoOverlays = iconEcho != null && iconEchoOverlays(iconEcho, iconEchoUpRef.current);
+      const nextEchoBox =
+        showIconEcho && echoOverlays
+          ? echoHeaderBox({
+              offset: echoStart,
+              width: measured.width,
+              height: measured.height,
+              panelWidth: width,
+              rtl,
+            })
+          : null;
+      setEchoBox((previous) => (sameEchoBox(previous, nextEchoBox) ? previous : nextEchoBox));
+      placeIconEcho(dropdownElement, {
+        offset: echoStart,
+        width: measured.width,
+        height: measured.height,
+        up: iconEchoUpRef.current,
+        overlay: echoOverlays,
+        group:
+          groupSurface && groupBox
+            ? { top: measured.top - groupBox.top, height: groupBox.height }
+            : null,
+      });
+      placeEchoOverTrigger(
+        dropdownElement,
+        {
+          triggerLeft: measured.left,
+          triggerRight: measured.right,
+          panelLeft: placedLeft,
+          panelWidth: width,
+          rtl,
+        },
+        { stretch: panelWidth !== undefined },
+      );
       const top = placedTop - containingBlock.top;
       const cssLeft = placedLeft - containingBlock.left;
-      const maxHeight = Math.max(0, viewportBottom - panelViewportPadding - placedTop);
+      const maxHeight =
+        placedMaxHeight ?? Math.max(0, viewportBottom - panelViewportPadding - placedTop);
       dropdownElement.style.top = `${top}px`;
       dropdownElement.style.left = `${cssLeft}px`;
       dropdownElement.style.maxHeight = `${maxHeight}px`;
       dropdownElement.dir = rtl ? "rtl" : "ltr";
-      dropdownElement.style.transformOrigin = rtl ? "top right" : "top left";
+      dropdownElement.style.transformOrigin = `${iconEchoUpRef.current ? "bottom" : "top"} ${rtl !== alignEnd ? "right" : "left"}`;
       dropdownElement.style.visibility = "visible";
       overlayStyleRef.current = { top, left: cssLeft, maxHeight };
       panel.initializingRef.current = false;
@@ -975,10 +1365,14 @@ function FloatingPanelWeb({
   }, [
     isFill,
     isContextMenu,
+    pointMenu,
+    showIconEcho,
     cover,
     anchorRect,
     clampCollisions,
     sheetProps.scrollable,
+    triggerEcho,
+    coverAlign,
     panel.placement,
     panel.refs,
     panel.triggerRef,
@@ -1042,7 +1436,7 @@ function FloatingPanelWeb({
     (event: UIEvent) => {
       const el = event.target as HTMLElement;
       panel.updateArrows(el);
-      if (isFill || (cover && !isContextMenu)) return;
+      if (isFill || (cover && !pointMenu)) return;
       if (panel.initializingRef.current) {
         lastScrollTopRef.current = el.scrollTop;
         return;
@@ -1066,7 +1460,7 @@ function FloatingPanelWeb({
         repositionFnRef.current?.();
       }
     },
-    [isFill, cover, isContextMenu, panel.updateArrows],
+    [isFill, cover, pointMenu, panel.updateArrows],
   );
 
   const webTransition = panel.panelTransition;
@@ -1153,6 +1547,24 @@ function FloatingPanelWeb({
     onClickCapture: openFromSynthesizedClick,
     ...(isContextMenu ? { onContextMenu: openFromContextMenu } : {}),
   });
+  // A content-sized trigger hugs its button instead of stretching across its
+  // parent's cross axis. In a row that centres its items (a bar's capsule) it
+  // keeps that centring, so an avatar sits on the row's line with its
+  // neighbours (FZ-8480 Round 37).
+  const contentSized = sheetProps.triggerSizing === "content";
+  const [hugSelf, setHugSelf] = useState<"flex-start" | undefined>(
+    contentSized ? "flex-start" : undefined,
+  );
+  useLayoutEffect(() => {
+    if (!contentSized) {
+      setHugSelf(undefined);
+      return;
+    }
+    const parent = layoutParentOf(panel.triggerRef.current);
+    const align = parent ? getComputedStyle(parent).alignItems : "stretch";
+    setHugSelf(align === "stretch" || align === "normal" ? "flex-start" : undefined);
+  }, [contentSized, panel.triggerRef]);
+
   // Guard the composed floating-ui openers, after hook handlers are merged.
   // Declining leaves each action's own events and focus defaults intact.
   for (const name of ["onMouseDown", "onClick", "onKeyDown", "onKeyUp"] as const) {
@@ -1170,7 +1582,7 @@ function FloatingPanelWeb({
     <>
       <View
         {...referenceProps}
-        alignSelf={sheetProps.triggerSizing === "content" ? "flex-start" : undefined}
+        alignSelf={hugSelf}
         cursor={disabled ? "not-allowed" : "pointer"}
         opacity={disabled ? 0.5 : 1}
         // The cover contract is stated as a relation between the panel's top
@@ -1201,92 +1613,110 @@ function FloatingPanelWeb({
       )}
       {panel.mounted && !collisionSheet && (
         <PanelPortal anchor={panel.triggerRef.current}>
-          <YStack
-            {...getFloatingProps({
-              ref: panel.refs.setFloating,
-              style: {
-                ...elevatedSurfaceStyle,
-                position: panel.strategy,
-                top: overlayStyleRef.current?.top ?? panel.y ?? 0,
-                left: overlayStyleRef.current?.left ?? panel.x ?? 0,
-                scrollbarWidth: "none" as any,
-                zIndex: panelZIndex,
-                overflow: "auto",
-                ...(cover && !isContextMenu ? { overflowX: "hidden" as const } : {}),
-                ...panel.floatingStyleRef.current,
-                ...(overlayStyleRef.current
-                  ? { maxHeight: overlayStyleRef.current.maxHeight }
-                  : {}),
-                opacity: panel.visible ? 1 : 0,
-                // `none`, not scale(1): any transform makes this panel the
-                // containing block of a nested panel's `position: fixed`, which
-                // then positions against this box and is clipped by its scroll.
-                transform: panel.visible ? "none" : "scale(0.96)",
-                transition: webTransition,
-                transformOrigin:
-                  cover && !isContextMenu
-                    ? isRtl(panel.triggerRef.current)
-                      ? "top right"
-                      : "top left"
-                    : panelTransformOrigin(
-                        pointPlacementRef.current
-                          ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}`
-                          : panel.placement,
-                      ),
-              },
-              onScroll: handleScroll,
-              onTransitionEnd: (event) => {
-                if (
-                  event.target === event.currentTarget &&
-                  (event.propertyName === "height" || event.propertyName === "max-height")
-                ) {
-                  panel.updateArrows(event.currentTarget);
-                }
-              },
-            })}
-            data-testid="floating-panel-viewport"
-            data-fp-panel=""
-            {...panelChromeFocus}
-            pointerEvents={panel.visible ? "auto" : "none"}
-            {...elevatedSurfaceProps}
-            // Complete elevatedSurface fragment above is the ONLY surface source
-            // (SF-OVERLAY "including border and elevation", Round 2 docket).
-            // The one layered exception is anatomy, not surface: the dropdown
-            // radius clamp (same shape as Card's containerRadius over
-            // elevatedSurface) keeps list rows unclipped at large radius knobs.
-            borderRadius={panel.dropdownRadius}
-            paddingVertical={0}
-          >
-            {isContextMenu || !cover || !triggerEcho ? null : (
-              <TriggerEchoRow
-                sourceRef={panel.triggerRef}
-                source={trigger}
-                anchorRect={anchorRect}
-                onPress={() => onOpenChange(false)}
-              >
-                {triggerRow}
-              </TriggerEchoRow>
-            )}
-            <ScrollArrow
-              direction="up"
-              scrollRef={panel.refs.floating}
-              visible={panel.arrowUp}
-              arrowScrollDirRef={panel.arrowScrollDirRef}
-            />
-            <View
-              ref={contentRef as any}
-              {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
-              {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
+          {/* The grouped surface step (alt1), the one a field's own list already
+              opens on: a light menu reads white over the page instead of the
+              page's own grey, and a dark menu's hairlines clear its fill. */}
+          <Theme name="alt1">
+            <YStack
+              {...getFloatingProps({
+                ref: panel.refs.setFloating,
+                style: {
+                  ...elevatedSurfaceStyle,
+                  position: panel.strategy,
+                  top: overlayStyleRef.current?.top ?? panel.y ?? 0,
+                  left: overlayStyleRef.current?.left ?? panel.x ?? 0,
+                  scrollbarWidth: "none" as any,
+                  zIndex: panelZIndex,
+                  overflow: "auto",
+                  ...(cover && !pointMenu ? { overflowX: "hidden" as const } : {}),
+                  ...panel.floatingStyleRef.current,
+                  ...(overlayStyleRef.current
+                    ? { maxHeight: overlayStyleRef.current.maxHeight }
+                    : {}),
+                  opacity: panel.visible ? 1 : 0,
+                  // `none`, not scale(1): any transform makes this panel the
+                  // containing block of a nested panel's `position: fixed`, which
+                  // then positions against this box and is clipped by its scroll.
+                  transform: panel.visible ? "none" : "scale(0.96)",
+                  transition: webTransition,
+                  transformOrigin:
+                    cover && !pointMenu
+                      ? `${iconEchoUpRef.current ? "bottom" : "top"} ${
+                          isRtl(panel.triggerRef.current) !== coverAlignEndRef.current
+                            ? "right"
+                            : "left"
+                        }`
+                      : panelTransformOrigin(
+                          pointPlacementRef.current
+                            ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}`
+                            : panel.placement,
+                        ),
+                },
+                onScroll: handleScroll,
+                onTransitionEnd: (event) => {
+                  if (
+                    event.target === event.currentTarget &&
+                    (event.propertyName === "height" || event.propertyName === "max-height")
+                  ) {
+                    panel.updateArrows(event.currentTarget);
+                  }
+                },
+              })}
+              data-testid="floating-panel-viewport"
+              data-fp-panel=""
+              {...panelChromeFocus}
+              pointerEvents={panel.visible ? "auto" : "none"}
+              {...elevatedSurfaceProps}
+              // Complete elevatedSurface fragment above is the ONLY surface source
+              // (SF-OVERLAY "including border and elevation", Round 2 docket).
+              // The one layered exception is anatomy, not surface: the dropdown
+              // radius (Card's containerRadius shape over elevatedSurface). A
+              // covering panel takes its trigger's whole arc (LC-112 seamless
+              // cover); past the cap it insets its bottom so rows stay unclipped.
+              borderRadius={panel.dropdownRadius}
+              paddingVertical={0}
+              paddingBottom={panel.coverCornerInset || 0}
             >
-              <OverlayStackProvider zIndex={panelZIndex}>{children}</OverlayStackProvider>
-            </View>
-            <ScrollArrow
-              direction="down"
-              scrollRef={panel.refs.floating}
-              visible={panel.arrowDown}
-              arrowScrollDirRef={panel.arrowScrollDirRef}
-            />
-          </YStack>
+              {pointMenu || !cover || !triggerEcho || showIconEcho ? null : (
+                <TriggerEchoRow
+                  sourceRef={panel.triggerRef}
+                  source={trigger}
+                  anchorRect={anchorRect}
+                  onPress={() => onOpenChange(false)}
+                >
+                  {triggerRow}
+                </TriggerEchoRow>
+              )}
+              <ScrollArrow
+                direction="up"
+                scrollRef={panel.refs.floating}
+                visible={panel.arrowUp}
+                arrowScrollDirRef={panel.arrowScrollDirRef}
+              />
+              <View
+                ref={contentRef as any}
+                {...(contentPadding !== "none" ? panel.knobProps.panelPadding : undefined)}
+                {...(contentPadding !== "none" ? panel.knobProps.gapLg : undefined)}
+              >
+                <OverlayStackProvider zIndex={panelZIndex}>
+                  <PanelIconEchoBoxContext.Provider value={echoBox}>
+                    {children}
+                  </PanelIconEchoBoxContext.Provider>
+                </OverlayStackProvider>
+              </View>
+              <ScrollArrow
+                direction="down"
+                scrollRef={panel.refs.floating}
+                visible={panel.arrowDown}
+                arrowScrollDirRef={panel.arrowScrollDirRef}
+              />
+              {showIconEcho && iconEcho ? (
+                <IconEchoRow>
+                  {iconEchoElement(trigger, iconEcho, () => onOpenChange(false), triggerSurface)}
+                </IconEchoRow>
+              ) : null}
+            </YStack>
+          </Theme>
         </PanelPortal>
       )}
     </>