@multiplatform.one/forms 7.21.0 → 7.23.0

package/src/FloatingPanel/index.tsx

@@ -8,6 +8,7 @@ import {
   useSyncExternalStore,
 } from "react";
 import {
+  OVERLAY_ANCHOR_GAP,
   OVERLAY_ATTACH_GAP,
   OVERLAY_BREAKPOINT,
   useResolvedKnobs,
@@ -24,6 +25,14 @@ import type { PanelWidthMode } from "./useFloatingPanel";
 import { zIndex } from "../shared/zIndex";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
 import { PanelPortal } from "./PanelPortal";
+import {
+  contextMenuPoint,
+  pointOpensUp,
+  pointPanelLeft,
+  referenceCornerPoint,
+  type ContextMenuEventLike,
+  type PanelPoint,
+} from "./pointAnchor";
 
 type PointerOpenEvent = PanelActionEvent & { button?: number; target?: unknown };
 
@@ -152,7 +161,10 @@ export interface FloatingPanelProps {
    * How the trigger opens the panel. `"press"` (default) is click/tap.
    * `"contextmenu"` is the ContextMenu gesture: web `contextmenu` (right-click
    * / Shift+F10), native long-press. Primary click does not open. Same overlay
-   * stack — not a second positioning engine.
+   * stack — not a second positioning engine. The floating panel opens AT the
+   * gesture's point as a free overlay (`OVERLAY_ANCHOR_GAP` from it, flipping
+   * at the viewport edges); a keyboard open has no point and opens from the
+   * trigger's bottom start corner.
    */
   openOn?: "press" | "contextmenu";
 }
@@ -202,15 +214,15 @@ function useKeyboardFocusIntoPanel(
 }
 
 /**
- * Viewport y of the box a `position: fixed` panel is laid out against. The
- * top math above is in viewport coordinates, which is only right while that
+ * Viewport origin of the box a `position: fixed` panel is laid out against.
+ * The top/left math is in viewport coordinates, which is only right while that
  * box is the viewport. An ancestor with a transform, filter, perspective,
  * paint containment or container query becomes the containing block instead.
  * PanelPortal lifts the panel out of scroll views, but a panel hosted in a
  * transformed dialog still lays out against that dialog. A `display: contents`
  * node has no box, so its computed `contain` (Tamagui's theme span) is ignored.
  */
-function fixedContainingBlockTop(element: HTMLElement): number {
+function fixedContainingBlockOrigin(element: HTMLElement): { top: number; left: number } {
   for (let node = element.parentElement; node; node = node.parentElement) {
     const cs = getComputedStyle(node);
     if (cs.display === "contents") continue;
@@ -223,16 +235,27 @@ function fixedContainingBlockTop(element: HTMLElement): number {
       set(cs.containerType, "normal") ||
       /transform|perspective|filter/.test(cs.willChange) ||
       /paint|layout|strict|content/.test(cs.contain);
-    if (captures) return node.getBoundingClientRect().top + node.clientTop - node.scrollTop;
+    if (captures) {
+      const rect = node.getBoundingClientRect();
+      return {
+        top: rect.top + node.clientTop - node.scrollTop,
+        left: rect.left + node.clientLeft - node.scrollLeft,
+      };
+    }
   }
-  return 0;
+  return { top: 0, left: 0 };
 }
 
-function panelTransformOrigin(placement: string): string {
-  const rtl =
+function isRtl(): boolean {
+  return (
     isWeb &&
     typeof document !== "undefined" &&
-    document.documentElement.getAttribute("dir") === "rtl";
+    document.documentElement.getAttribute("dir") === "rtl"
+  );
+}
+
+function panelTransformOrigin(placement: string): string {
+  const rtl = isRtl();
   const atStart = !placement.endsWith("end");
   const originX = atStart === !rtl ? "left" : "right";
   const originY = placement.startsWith("top") ? "bottom" : "top";
@@ -457,7 +480,8 @@ function FloatingPanelWeb({
   openOn = "press",
 }: FloatingPanelProps) {
   const isFill = sizing === "fill";
-  const overlayStyleRef = useRef<{ top: number; maxHeight: number } | null>(null);
+  const isContextMenu = openOn === "contextmenu";
+  const overlayStyleRef = useRef<{ top: number; left?: number; maxHeight: number } | null>(null);
   const pinnedTopRef = useRef(0);
   const pinnedHeightRef = useRef(0);
   const grownRef = useRef(false);
@@ -466,27 +490,33 @@ function FloatingPanelWeb({
   const lastScrollTopRef = useRef(0);
   const keyboardOpenRef = useRef(false);
   const contentRef = useRef<HTMLElement | null>(null);
+  const anchorPointRef = useRef<PanelPoint | null>(null);
+  const pointPlacementRef = useRef<{ dropup: boolean; alignEnd: boolean } | null>(null);
 
   const repositionFnRef = useRef<(() => void) | null>(null);
 
+  const resetPosition = () => {
+    overlayStyleRef.current = null;
+    pinnedTopRef.current = 0;
+    pinnedHeightRef.current = 0;
+    grownRef.current = false;
+    growUpOnlyRef.current = false;
+    growDownOnlyRef.current = false;
+    lastScrollTopRef.current = 0;
+    pointPlacementRef.current = null;
+  };
+
   const panel = useFloatingPanel({
     open,
     onOpenChange,
     disabled,
     repositionRef: repositionFnRef,
     wheelGrowRef: isFill ? undefined : grownRef,
-    widthMode,
+    widthMode: widthMode ?? (isContextMenu && fitContent === undefined ? "fit-content" : undefined),
     fitContent,
     compact,
-    onBeforeOpen: () => {
-      overlayStyleRef.current = null;
-      pinnedTopRef.current = 0;
-      pinnedHeightRef.current = 0;
-      grownRef.current = false;
-      growUpOnlyRef.current = false;
-      growDownOnlyRef.current = false;
-      lastScrollTopRef.current = 0;
-    },
+    freeOverlay: isContextMenu,
+    onBeforeOpen: resetPosition,
   });
 
   // DG-A11Y-04 / Axiom 7: floating-ui useDismiss has no focus manager — when
@@ -496,7 +526,9 @@ function FloatingPanelWeb({
   useReturnFocusOnClose(open, skipReturnFocusRef);
   useKeyboardFocusIntoPanel(open && panel.mounted, panel.refs.floating, keyboardOpenRef);
   useEffect(() => {
-    if (!open) keyboardOpenRef.current = false;
+    if (open) return;
+    keyboardOpenRef.current = false;
+    anchorPointRef.current = null;
   }, [open]);
 
   const repositionOverlay = useCallback(() => {
@@ -511,7 +543,10 @@ function FloatingPanelWeb({
       dropdownElement.scrollTop = 0;
     }
 
-    const triggerBounds = trig.getBoundingClientRect();
+    const point = isContextMenu
+      ? (anchorPointRef.current ?? referenceCornerPoint(trig, isRtl()))
+      : null;
+    const triggerBounds = point ? { top: point.y, bottom: point.y } : trig.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
     const cs = getComputedStyle(dropdownElement);
     const borderTopWidth = parseFloat(cs.borderTopWidth) || 0;
@@ -520,13 +555,39 @@ function FloatingPanelWeb({
     const scrollContentHeight = dropdownElement.scrollHeight;
     const totalContentHeight = scrollContentHeight + totalBorderWidth;
     const liveTransition = panel.knobProps.transition ? panelTransition : "none";
-
-    const isDropup = panel.placement.startsWith("top");
+    const containingBlock = fixedContainingBlockOrigin(dropdownElement);
+
+    let isDropup = panel.placement.startsWith("top");
+    let cssLeft: number | undefined;
+    if (point) {
+      const bounds = {
+        top: panelViewportPadding,
+        left: panelViewportPadding,
+        right: (document.documentElement.clientWidth || window.innerWidth) - panelViewportPadding,
+        bottom: viewportHeight - panelViewportPadding,
+      };
+      // Measured at the viewport's left edge: a fixed box near the right edge
+      // shrinks to the room left of it, and that is not the menu's width.
+      // offsetWidth, not the client rect: the opening frame is scaled 0.96.
+      dropdownElement.style.left = `${-containingBlock.left}px`;
+      const width = dropdownElement.offsetWidth;
+      const { left, alignEnd } = pointPanelLeft(point, width, bounds, isRtl());
+      cssLeft = left - containingBlock.left;
+      dropdownElement.style.left = `${cssLeft}px`;
+      pointPlacementRef.current = {
+        dropup:
+          pointPlacementRef.current?.dropup ??
+          pointOpensUp(point, totalContentHeight, bounds, OVERLAY_ANCHOR_GAP),
+        alignEnd,
+      };
+      isDropup = pointPlacementRef.current.dropup;
+    }
     // Cover ruling (MPO-38): the panel ATTACHES to the trigger it was opened
     // from. `OVERLAY_ATTACH_GAP` is 0, so the panel's top edge coincides with
     // the trigger's bottom edge (and its bottom with the trigger's top when
-    // dropping up) instead of floating 4px clear of it.
-    const gap = OVERLAY_ATTACH_GAP;
+    // dropping up) instead of floating 4px clear of it. A context menu opened
+    // at a point is a FREE overlay and keeps `OVERLAY_ANCHOR_GAP` from it.
+    const gap = point ? OVERLAY_ANCHOR_GAP : OVERLAY_ATTACH_GAP;
     const belowTop = triggerBounds.bottom + gap;
     const aboveBottom = triggerBounds.top - gap;
 
@@ -537,14 +598,19 @@ function FloatingPanelWeb({
       let height = Math.min(totalContentHeight, Math.max(0, available));
       height = Math.max(Math.min(120, Math.max(0, available)), height);
       const top = isDropup ? aboveBottom - height : belowTop;
-      const cssTop = top - fixedContainingBlockTop(dropdownElement);
+      const cssTop = top - containingBlock.top;
 
       const cached = overlayStyleRef.current;
-      if (!cached || cached.top !== cssTop || cached.maxHeight !== height) {
+      if (
+        !cached ||
+        cached.top !== cssTop ||
+        cached.left !== cssLeft ||
+        cached.maxHeight !== height
+      ) {
         dropdownElement.style.top = `${cssTop}px`;
         dropdownElement.style.maxHeight = `${height}px`;
         dropdownElement.style.height = "";
-        overlayStyleRef.current = { top: cssTop, maxHeight: height };
+        overlayStyleRef.current = { top: cssTop, left: cssLeft, maxHeight: height };
         void dropdownElement.offsetHeight;
       }
 
@@ -611,13 +677,18 @@ function FloatingPanelWeb({
       }
     }
 
-    const cssTop = top - fixedContainingBlockTop(dropdownElement);
+    const cssTop = top - containingBlock.top;
     const cached = overlayStyleRef.current;
-    if (!cached || cached.top !== cssTop || cached.maxHeight !== height) {
+    if (
+      !cached ||
+      cached.top !== cssTop ||
+      cached.left !== cssLeft ||
+      cached.maxHeight !== height
+    ) {
       dropdownElement.style.top = `${cssTop}px`;
       dropdownElement.style.maxHeight = `${height}px`;
       dropdownElement.style.height = "";
-      overlayStyleRef.current = { top: cssTop, maxHeight: height };
+      overlayStyleRef.current = { top: cssTop, left: cssLeft, maxHeight: height };
       void dropdownElement.offsetHeight;
     }
 
@@ -634,6 +705,7 @@ function FloatingPanelWeb({
     });
   }, [
     isFill,
+    isContextMenu,
     panel.placement,
     panel.refs,
     panel.triggerRef,
@@ -643,7 +715,6 @@ function FloatingPanelWeb({
 
   repositionFnRef.current = repositionOverlay;
 
-  const isContextMenu = openOn === "contextmenu";
   const click = useClick(panel.context, {
     event: "mousedown",
     enabled: !isContextMenu,
@@ -756,14 +827,27 @@ function FloatingPanelWeb({
     [disabled, isContextMenu, onOpenChange],
   );
 
-  const openFromContextMenu = useCallback(
-    (event: { preventDefault: () => void }) => {
-      event.preventDefault();
-      if (disabled) return;
-      onOpenChange(true);
+  const openFromContextMenu = (
+    event: ContextMenuEventLike & {
+      preventDefault: () => void;
+      nativeEvent?: ContextMenuEventLike;
     },
-    [disabled, onOpenChange],
-  );
+  ) => {
+    event.preventDefault();
+    if (disabled) return;
+    anchorPointRef.current = contextMenuPoint(
+      event.nativeEvent ?? event,
+      panel.triggerRef.current,
+      isRtl(),
+    );
+    if (!open) {
+      onOpenChange(true);
+      return;
+    }
+    resetPosition();
+    panel.initializingRef.current = true;
+    repositionOverlay();
+  };
 
   // useClick's mousedown opener calls preventDefault, so a pointer open never
   // focuses the trigger the way a pressed button is focused. The render that
@@ -827,7 +911,7 @@ function FloatingPanelWeb({
                 ...elevatedSurfaceStyle,
                 position: panel.strategy,
                 top: overlayStyleRef.current?.top ?? panel.y ?? 0,
-                left: panel.x ?? 0,
+                left: overlayStyleRef.current?.left ?? panel.x ?? 0,
                 scrollbarWidth: "none" as any,
                 zIndex: zIndex.dropdown,
                 overflow: "auto",
@@ -841,7 +925,11 @@ function FloatingPanelWeb({
                 // then positions against this box and is clipped by its scroll.
                 transform: panel.visible ? "none" : "scale(0.96)",
                 transition: webTransition,
-                transformOrigin: panelTransformOrigin(panel.placement),
+                transformOrigin: panelTransformOrigin(
+                  pointPlacementRef.current
+                    ? `${pointPlacementRef.current.dropup ? "top" : "bottom"}-${pointPlacementRef.current.alignEnd ? "end" : "start"}`
+                    : panel.placement,
+                ),
               },
               onScroll: handleScroll,
               onTransitionEnd: (event) => {

package/src/FloatingPanel/pointAnchor.spec.ts

@@ -0,0 +1,141 @@
+import { OVERLAY_ANCHOR_GAP } from "@multiplatform.one/theme";
+import { describe, expect, it } from "vitest";
+import {
+  contextMenuPoint,
+  placeAtPoint,
+  pointOpensUp,
+  pointPanelLeft,
+  type PanelBounds,
+} from "./pointAnchor";
+
+const bounds: PanelBounds = { top: 10, left: 10, right: 1014, bottom: 758 };
+const gap = OVERLAY_ANCHOR_GAP;
+
+describe("pointPanelLeft", () => {
+  it("puts the panel's start edge on the point when it fits", () => {
+    expect(pointPanelLeft({ x: 300, y: 0 }, 200, bounds)).toEqual({ left: 300, alignEnd: false });
+  });
+
+  it("flips to open toward the start when the end side would overflow", () => {
+    expect(pointPanelLeft({ x: 900, y: 0 }, 200, bounds)).toEqual({ left: 700, alignEnd: true });
+  });
+
+  it("clamps into the bounds when neither side fits", () => {
+    const narrow: PanelBounds = { top: 10, left: 10, right: 310, bottom: 758 };
+    expect(pointPanelLeft({ x: 200, y: 0 }, 250, narrow)).toEqual({ left: 60, alignEnd: false });
+  });
+
+  it("pins to the start bound when the panel is wider than the bounds", () => {
+    const narrow: PanelBounds = { top: 10, left: 10, right: 110, bottom: 758 };
+    expect(pointPanelLeft({ x: 50, y: 0 }, 400, narrow).left).toBe(10);
+  });
+
+  it("opens toward the left from the point in RTL and flips right at the left edge", () => {
+    expect(pointPanelLeft({ x: 600, y: 0 }, 200, bounds, true)).toEqual({
+      left: 400,
+      alignEnd: false,
+    });
+    expect(pointPanelLeft({ x: 100, y: 0 }, 200, bounds, true)).toEqual({
+      left: 100,
+      alignEnd: true,
+    });
+  });
+});
+
+describe("pointOpensUp", () => {
+  it("opens down whenever the panel fits below the point", () => {
+    expect(pointOpensUp({ x: 0, y: 600 }, 150, bounds, gap)).toBe(false);
+  });
+
+  it("flips up when only the space above fits", () => {
+    expect(pointOpensUp({ x: 0, y: 700 }, 150, bounds, gap)).toBe(true);
+  });
+
+  it("takes the roomier side when neither fits", () => {
+    expect(pointOpensUp({ x: 0, y: 300 }, 700, bounds, gap)).toBe(false);
+    expect(pointOpensUp({ x: 0, y: 500 }, 700, bounds, gap)).toBe(true);
+  });
+});
+
+describe("placeAtPoint", () => {
+  it("sits OVERLAY_ANCHOR_GAP below the point, start edge on the point", () => {
+    expect(
+      placeAtPoint({ point: { x: 300, y: 200 }, width: 180, height: 120, bounds, gap }),
+    ).toEqual({
+      left: 300,
+      top: 200 + gap,
+      maxHeight: 758 - (200 + gap),
+      dropup: false,
+      alignEnd: false,
+    });
+  });
+
+  it("flips both ways in the bottom-right corner, bottom edge gap above the point", () => {
+    const placement = placeAtPoint({
+      point: { x: 1000, y: 740 },
+      width: 180,
+      height: 120,
+      bounds,
+      gap,
+    });
+    expect(placement.left).toBe(1000 - 180);
+    expect(placement.top).toBe(740 - gap - 120);
+    expect(placement.dropup).toBe(true);
+    expect(placement.alignEnd).toBe(true);
+  });
+
+  it("caps the height at the chosen side's room, so a tall menu scrolls inside the bounds", () => {
+    const placement = placeAtPoint({
+      point: { x: 300, y: 500 },
+      width: 180,
+      height: 900,
+      bounds,
+      gap,
+    });
+    expect(placement.dropup).toBe(true);
+    expect(placement.maxHeight).toBe(500 - gap - 10);
+    expect(placement.top).toBe(10);
+  });
+});
+
+describe("contextMenuPoint", () => {
+  const reference = {
+    getBoundingClientRect: () => ({ left: 40, right: 240, top: 100, bottom: 144 }),
+  };
+
+  it("takes the pointer's viewport coordinates from a mouse right-click", () => {
+    expect(
+      contextMenuPoint({ clientX: 120, clientY: 130, button: 2, pointerType: "mouse" }, reference),
+    ).toEqual({ x: 120, y: 130 });
+  });
+
+  it("takes the press point from a touch long-press", () => {
+    expect(
+      contextMenuPoint({ clientX: 90, clientY: 110, button: 0, pointerType: "touch" }, reference),
+    ).toEqual({ x: 90, y: 110 });
+  });
+
+  it("takes a right-click's coordinates when the event is a plain MouseEvent", () => {
+    expect(contextMenuPoint({ clientX: 150, clientY: 120, button: 2 }, reference)).toEqual({
+      x: 150,
+      y: 120,
+    });
+  });
+
+  it("anchors a keyboard open (Shift+F10, the Menu key) to the target's bottom start corner", () => {
+    expect(
+      contextMenuPoint({ clientX: 0, clientY: 0, button: 0, pointerType: "" }, reference),
+    ).toEqual({ x: 40, y: 144 });
+    expect(contextMenuPoint({ clientX: 0, clientY: 0, button: 0 }, reference)).toEqual({
+      x: 40,
+      y: 144,
+    });
+    expect(
+      contextMenuPoint({ clientX: 0, clientY: 0, button: 0, pointerType: "" }, reference, true),
+    ).toEqual({ x: 240, y: 144 });
+  });
+
+  it("has no point without a pointer or a reference", () => {
+    expect(contextMenuPoint({ clientX: 0, clientY: 0, button: 0 }, null)).toBeNull();
+  });
+});

package/src/FloatingPanel/pointAnchor.ts

@@ -0,0 +1,122 @@
+import { OVERLAY_ANCHOR_GAP } from "@multiplatform.one/theme";
+
+/**
+ * A panel opened at a POINT rather than from a trigger's box: the ContextMenu
+ * gesture (MPO-21 G5). layoutTokens.ts files a pointer-positioned context menu
+ * as a FREE overlay: content-sized, `OVERLAY_ANCHOR_GAP` from its anchor,
+ * flipping at the viewport edges instead of overflowing. The anchor here is a
+ * zero-size box at the point, so "start-aligned to the anchor" puts the
+ * panel's start edge on the pointer's x.
+ */
+export interface PanelPoint {
+  x: number;
+  y: number;
+}
+
+/** The box a panel must stay inside, already inset by padding and safe area. */
+export interface PanelBounds {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export function pointPanelLeft(
+  point: PanelPoint,
+  width: number,
+  bounds: PanelBounds,
+  rtl = false,
+): { left: number; alignEnd: boolean } {
+  const towardEnd = rtl ? point.x - width : point.x;
+  const towardStart = rtl ? point.x : point.x - width;
+  const fits = (left: number) => left >= bounds.left && left + width <= bounds.right;
+  const alignEnd = !fits(towardEnd) && fits(towardStart);
+  const raw = alignEnd ? towardStart : towardEnd;
+  return { left: Math.max(bounds.left, Math.min(raw, bounds.right - width)), alignEnd };
+}
+
+/** Below when it fits, above when only that fits, else the roomier side. */
+export function pointOpensUp(
+  point: PanelPoint,
+  height: number,
+  bounds: PanelBounds,
+  gap: number = OVERLAY_ANCHOR_GAP,
+): boolean {
+  const below = bounds.bottom - (point.y + gap);
+  const above = point.y - gap - bounds.top;
+  if (height <= below) return false;
+  if (height <= above) return true;
+  return above > below;
+}
+
+export interface PointPlacement {
+  left: number;
+  top: number;
+  maxHeight: number;
+  dropup: boolean;
+  alignEnd: boolean;
+}
+
+export function placeAtPoint({
+  point,
+  width,
+  height,
+  bounds,
+  gap = OVERLAY_ANCHOR_GAP,
+  rtl = false,
+}: {
+  point: PanelPoint;
+  width: number;
+  height: number;
+  bounds: PanelBounds;
+  gap?: number;
+  rtl?: boolean;
+}): PointPlacement {
+  const { left, alignEnd } = pointPanelLeft(point, width, bounds, rtl);
+  const dropup = pointOpensUp(point, height, bounds, gap);
+  const maxHeight = Math.max(
+    0,
+    dropup ? point.y - gap - bounds.top : bounds.bottom - (point.y + gap),
+  );
+  const top = dropup ? point.y - gap - Math.min(height, maxHeight) : point.y + gap;
+  return { left, top, maxHeight, dropup, alignEnd };
+}
+
+export interface ContextMenuEventLike {
+  clientX: number;
+  clientY: number;
+  button?: number;
+  pointerType?: string;
+}
+
+/**
+ * Where a `contextmenu` event asks the menu to open. A mouse right-click or a
+ * touch long-press carries the pointer's viewport coordinates. A keyboard open
+ * (Shift+F10, the Menu key) has no pointer: Chromium sends a PointerEvent with
+ * an empty `pointerType` aimed at the focused element's centre
+ * (`EventHandler::ShowNonLocatedContextMenu`). It opens from the target's
+ * bottom start corner. A plain MouseEvent counts as a pointer only when it is
+ * a right-click or carries coordinates.
+ */
+export function contextMenuPoint(
+  event: ContextMenuEventLike,
+  reference: PointReference | null,
+  rtl = false,
+): PanelPoint | null {
+  const fromPointer =
+    event.pointerType !== undefined
+      ? event.pointerType !== ""
+      : event.button === 2 || event.clientX !== 0 || event.clientY !== 0;
+  if (fromPointer) return { x: event.clientX, y: event.clientY };
+  return reference ? referenceCornerPoint(reference, rtl) : null;
+}
+
+export interface PointReference {
+  getBoundingClientRect(): { left: number; right: number; bottom: number };
+}
+
+/** The target's bottom start corner: where a menu with no pointer opens. */
+export function referenceCornerPoint(reference: PointReference, rtl = false): PanelPoint {
+  const rect = reference.getBoundingClientRect();
+  return { x: rtl ? rect.right : rect.left, y: rect.bottom };
+}

package/src/FloatingPanel/useFloatingPanel.ts

@@ -104,6 +104,12 @@ export interface UseFloatingPanelOptions {
    * at the compact space step.
    */
   compact?: boolean;
+  /**
+   * The panel opens at a point, not from the trigger's box (ContextMenu). It
+   * shares no corner with the trigger, so its radius stays the CONTAINER-CAP
+   * value instead of dropping to the trigger's drawn arc.
+   */
+  freeOverlay?: boolean;
 }
 
 /** One place that resolves the deprecated boolean onto the three modes, so
@@ -225,6 +231,7 @@ export function useFloatingPanel({
   widthMode: widthModeProp,
   fitContent,
   compact,
+  freeOverlay = false,
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
   const widthMode = resolvePanelWidthMode(widthModeProp, fitContent);
   const { knobProps } = useResolvedKnobs({ compact });
@@ -295,14 +302,14 @@ export function useFloatingPanel({
   const setupForOpen = useCallback(() => {
     computePlacement();
     if (canUseDom && triggerRef.current) {
-      setMeasuredRadius(measureDrawnRadius(triggerRef.current));
+      setMeasuredRadius(freeOverlay ? null : measureDrawnRadius(triggerRef.current));
     }
     onBeforeOpenRef.current?.();
     if (closingTimerRef.current) clearTimeout(closingTimerRef.current);
     floatingStyleRef.current = {};
     initializingRef.current = true;
     setMounted(true);
-  }, [computePlacement]);
+  }, [computePlacement, freeOverlay]);
 
   // ── Lifecycle effect ──────────────────────────────────────
 

package/src/InputParts/index.tsx

@@ -32,7 +32,9 @@ import {
   useTouchSurface,
   isTouchSurface,
   recipeFamilies,
+  resolveControlRadius,
   resolveGlyphPaint,
+  SIZE_RECIPE_RADIUS_TOKEN_TO_STOP,
   sizeRecipeBoxVariants,
   sizeRecipeForToken,
   sizeRecipeIconVariants,
@@ -493,13 +495,29 @@ const InputGroupImpl = InputGroupFrame.styleable<{
     family: recipeFamily,
   });
   const controlFragment =
-    recipeFamily === "control"
+    recipeFamily === "control" && sizeToken === knobProps.sizeToken
       ? knobProps.control
       : {
           height: familyRecipe.height,
           paddingHorizontal: familyRecipe.paddingHorizontal,
           gap: familyRecipe.gap,
         };
+  const radiusToken = knobProps.borderRadius.borderRadius;
+  const radiusStop =
+    typeof radiusToken === "string"
+      ? SIZE_RECIPE_RADIUS_TOKEN_TO_STOP[
+          radiusToken as keyof typeof SIZE_RECIPE_RADIUS_TOKEN_TO_STOP
+        ]
+      : undefined;
+  const sizeTableRadius =
+    radiusStop === "medium" || radiusStop == null
+      ? {
+          borderRadius: resolveControlRadius(
+            sizeRecipeForToken(sizeToken, { family: recipeFamily }),
+            "medium",
+          ).radius,
+        }
+      : undefined;
   const sizeRecipeEscaped =
     typeof sizeRecipeEscape === "string" && sizeRecipeEscape.trim().length > 0;
   const sizeRecipeEscapeOverride = sizeRecipeEscaped
@@ -623,6 +641,7 @@ const InputGroupImpl = InputGroupFrame.styleable<{
           backgroundColor={knobProps.inputBackground}
           {...(knobProps.elevation == null ? { elevation: undefined } : knobProps.elevationChrome)}
           {...knobProps.borderRadius}
+          {...sizeTableRadius}
           {...getInputFrameTransitionProps(
             typeof knobProps.transition === "string" ? knobProps.transition : undefined,
           )}