@multiplatform.one/forms 7.70.0 → 7.72.0

package/src/FloatingPanel/panelWidth.spec.ts

@@ -0,0 +1,158 @@
+/**
+ * LC-112 width setting (FZ-8438 r3, Clay on the desktop Date shot): "it can
+ * collapse to the content, it can be the full width of the initial input
+ * button, or it can open up to be the full width of the screen, or it can be
+ * a fixed size that it opens to."
+ */
+import { describe, expect, it } from "vitest";
+import { MENU_MIN_WIDTH } from "./compactFace";
+import {
+  echoOffset,
+  panelLeftForWidth,
+  panelWidthBox,
+  screenBounds,
+  slidesAlongScreen,
+} from "./panelWidth";
+
+describe("panelWidthBox", () => {
+  it('"content" floors at an echoed trigger and leaves the width to its rows', () => {
+    expect(panelWidthBox("content", { trigger: 240, available: 1000, echo: true })).toEqual({
+      minWidth: 240,
+      maxWidth: 1000,
+    });
+  });
+
+  it('"content" without an echo has no trigger floor', () => {
+    expect(panelWidthBox("content", { trigger: 44, available: 1000, echo: false }).minWidth).toBe(
+      0,
+    );
+  });
+
+  it('"content" keeps a platform floor (the native 250pt pull-down)', () => {
+    expect(
+      panelWidthBox("content", { trigger: 44, available: 370, echo: false, floor: MENU_MIN_WIDTH })
+        .minWidth,
+    ).toBe(MENU_MIN_WIDTH);
+    expect(
+      panelWidthBox("content", { trigger: 44, available: 220, echo: false, floor: MENU_MIN_WIDTH })
+        .minWidth,
+    ).toBe(220);
+  });
+
+  it('"trigger" pins min, width and max to the trigger', () => {
+    expect(panelWidthBox("trigger", { trigger: 240, available: 1000, echo: true })).toEqual({
+      minWidth: 240,
+      width: 240,
+      maxWidth: 240,
+    });
+  });
+
+  it('"screen" pins the box to the room between the margins', () => {
+    expect(panelWidthBox("screen", { trigger: 240, available: 370, echo: true })).toEqual({
+      minWidth: 370,
+      width: 370,
+      maxWidth: 370,
+    });
+  });
+
+  it("a number is that width, capped at the room", () => {
+    expect(panelWidthBox(320, { trigger: 240, available: 1000, echo: true }).width).toBe(320);
+    expect(panelWidthBox(180, { trigger: 240, available: 1000, echo: true }).width).toBe(180);
+    expect(panelWidthBox(600, { trigger: 240, available: 370, echo: true }).width).toBe(370);
+    expect(panelWidthBox(-5, { trigger: 240, available: 370, echo: true }).width).toBe(0);
+  });
+});
+
+describe("panelLeftForWidth", () => {
+  const bounds = { boundsLeft: 10, boundsRight: 1430 };
+
+  it("keeps the trigger's start edge while the panel fits", () => {
+    expect(panelLeftForWidth({ triggerLeft: 200, triggerRight: 440, width: 320, ...bounds })).toBe(
+      200,
+    );
+  });
+
+  it("slides back inside the end margin", () => {
+    expect(
+      panelLeftForWidth({ triggerLeft: 1300, triggerRight: 1420, width: 320, ...bounds }),
+    ).toBe(1110);
+  });
+
+  it("a screen-wide panel sits on the start margin", () => {
+    expect(panelLeftForWidth({ triggerLeft: 200, triggerRight: 440, width: 1420, ...bounds })).toBe(
+      10,
+    );
+  });
+
+  it("right to left keeps the trigger's right edge", () => {
+    expect(
+      panelLeftForWidth({
+        triggerLeft: 1000,
+        triggerRight: 1240,
+        width: 320,
+        rtl: true,
+        ...bounds,
+      }),
+    ).toBe(920);
+  });
+});
+
+describe("echoOffset", () => {
+  it("is the trigger's distance from the panel's start edge", () => {
+    expect(
+      echoOffset({ triggerLeft: 200, triggerRight: 440, panelLeft: 10, panelWidth: 1420 }),
+    ).toBe(190);
+    expect(
+      echoOffset({ triggerLeft: 200, triggerRight: 440, panelLeft: 200, panelWidth: 320 }),
+    ).toBe(0);
+  });
+
+  it("measures from the right edge in right to left", () => {
+    expect(
+      echoOffset({
+        triggerLeft: 1000,
+        triggerRight: 1240,
+        panelLeft: 10,
+        panelWidth: 1420,
+        rtl: true,
+      }),
+    ).toBe(190);
+  });
+});
+
+describe("slidesAlongScreen", () => {
+  it("is true only for the widths not tied to the trigger's start edge", () => {
+    expect(slidesAlongScreen("screen")).toBe(true);
+    expect(slidesAlongScreen(320)).toBe(true);
+    expect(slidesAlongScreen("content")).toBe(false);
+    expect(slidesAlongScreen("trigger")).toBe(false);
+    expect(slidesAlongScreen(undefined)).toBe(false);
+  });
+});
+
+describe("screenBounds", () => {
+  const bounds = { boundsLeft: 10, boundsRight: 1430 };
+
+  it("a trigger in the page gutter lends its inset to both sides", () => {
+    // Field at the 16pt gutter, margins at 10: the panel spans 16..1424, so
+    // its start edge is the trigger's and the rows line up under the echo.
+    expect(screenBounds({ triggerLeft: 16, triggerRight: 276, ...bounds })).toEqual({
+      left: 16,
+      right: 1424,
+    });
+  });
+
+  it("a trigger deep in the page keeps the safe margins", () => {
+    expect(screenBounds({ triggerLeft: 600, triggerRight: 860, ...bounds })).toEqual({
+      left: 10,
+      right: 1430,
+    });
+  });
+
+  it("right to left measures the gutter from the right edge", () => {
+    expect(screenBounds({ triggerLeft: 1164, triggerRight: 1414, rtl: true, ...bounds })).toEqual({
+      left: 26,
+      right: 1414,
+    });
+  });
+});

package/src/FloatingPanel/panelWidth.ts

@@ -0,0 +1,122 @@
+/**
+ * How wide a panel opens over its trigger (LC-112, FZ-8438 r3). One setting
+ * for every picker and menu, on the web and native:
+ *
+ * - `"content"`: the panel hugs its content. While it echoes its trigger it
+ *   is never narrower than the trigger, so the echo keeps its box.
+ * - `"trigger"`: exactly the trigger's width. Content wraps or scrolls.
+ * - `"screen"`: the room between the screen's safe margins. The top edge
+ *   still sits on the trigger's top edge.
+ * - a number: that many points, capped at the room between the margins.
+ */
+export type PanelWidth = "content" | "trigger" | "screen" | number;
+
+export interface PanelWidthBox {
+  minWidth: number;
+  /** Set for every mode but `"content"`, which leaves the width to its rows. */
+  width?: number;
+  maxWidth: number;
+}
+
+export function panelWidthBox(
+  panelWidth: PanelWidth,
+  {
+    trigger,
+    available,
+    echo,
+    floor = 0,
+  }: {
+    /** The trigger's width. */
+    trigger: number;
+    /** The room between the screen's safe margins. */
+    available: number;
+    /** The panel's first row repeats the trigger. */
+    echo: boolean;
+    /** A platform minimum for `"content"` (the native pull-down's 250pt). */
+    floor?: number;
+  },
+): PanelWidthBox {
+  const room = Math.max(0, available);
+  const pinned = (width: number) => {
+    const w = Math.max(0, Math.min(width, room));
+    return { minWidth: w, width: w, maxWidth: w };
+  };
+  if (panelWidth === "trigger") return pinned(trigger);
+  if (panelWidth === "screen") return pinned(room);
+  if (typeof panelWidth === "number") return pinned(panelWidth);
+  return { minWidth: Math.min(Math.max(echo ? trigger : 0, floor), room), maxWidth: room };
+}
+
+/**
+ * A panel whose width is not tied to its trigger's box (`"screen"`, or a fixed
+ * width wider than the room from the trigger's start edge) slides along the
+ * screen to stay inside the margins. Its echo row is moved back over the
+ * trigger by the returned offset, so the trigger's content stays in place.
+ */
+export function panelLeftForWidth({
+  triggerLeft,
+  triggerRight,
+  width,
+  boundsLeft,
+  boundsRight,
+  rtl = false,
+}: {
+  triggerLeft: number;
+  triggerRight: number;
+  width: number;
+  boundsLeft: number;
+  boundsRight: number;
+  rtl?: boolean;
+}): number {
+  const want = rtl ? triggerRight - width : triggerLeft;
+  return Math.max(boundsLeft, Math.min(want, boundsRight - width));
+}
+
+/** How far the echo row moves from the panel's start edge to sit on its trigger. */
+export function echoOffset({
+  triggerLeft,
+  triggerRight,
+  panelLeft,
+  panelWidth,
+  rtl = false,
+}: {
+  triggerLeft: number;
+  triggerRight: number;
+  panelLeft: number;
+  panelWidth: number;
+  rtl?: boolean;
+}): number {
+  return rtl ? panelLeft + panelWidth - triggerRight : triggerLeft - panelLeft;
+}
+
+/** True for the widths that are not tied to the trigger's start edge. */
+export function slidesAlongScreen(panelWidth: PanelWidth | undefined): boolean {
+  return panelWidth === "screen" || typeof panelWidth === "number";
+}
+
+/**
+ * The bounds a `"screen"` panel spans. A trigger that sits in the page's start
+ * gutter, up to `gutter` points inside the safe margins, lends that inset to
+ * both sides, so the panel's start edge stays on the trigger's start edge and
+ * the rows line up under the echo. A trigger deeper in the page gets the safe
+ * margins as they are.
+ */
+export function screenBounds({
+  triggerLeft,
+  triggerRight,
+  boundsLeft,
+  boundsRight,
+  rtl = false,
+  gutter = 32,
+}: {
+  triggerLeft: number;
+  triggerRight: number;
+  boundsLeft: number;
+  boundsRight: number;
+  rtl?: boolean;
+  gutter?: number;
+}): { left: number; right: number } {
+  const inset = rtl ? boundsRight - triggerRight : triggerLeft - boundsLeft;
+  const margin = inset > 0 && inset <= gutter ? inset : 0;
+  return { left: boundsLeft + margin, right: boundsRight - margin };
+}

package/src/FloatingPanel/panelWidthContract.spec.ts

@@ -7,9 +7,10 @@
  * DatePicker measured 262px of calendar under a 289px trigger purely because
  * the call site said `fitContent`.
  *
- * Calendar grids take fit-content (MPO-262): a full-width field wrapper is
- * unrelated to seven day columns and must not create a mostly empty popup.
- * Text listboxes retain at-least-trigger; icon/button launchers may also hug.
+ * Calendar grids opened from a field are the field grown open (LC-112
+ * seamless cover, FZ-8438): at least the field's width, superseding MPO-262's
+ * fit-content. Text listboxes retain at-least-trigger; icon/button launchers
+ * may hug.
  * The Icon glyph grid pins to its field exactly (match-trigger): fixed 64px
  * cells wrap into more columns on a wider field instead of stretching.
  */
@@ -21,13 +22,16 @@ import { describe, expect, it } from "vitest";
 const fieldsDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "fields");
 
 /** Pickers whose trigger is a form FIELD: the panel may never be narrower. */
-const fieldShapedPickers = ["TimePicker/catalog.tsx", "ColorPicker/parts.tsx"];
+const fieldShapedPickers = [
+  "TimePicker/catalog.tsx",
+  "ColorPicker/parts.tsx",
+  "DatePicker/parts.tsx",
+  "DatePicker/DatetimePicker.catalog.tsx",
+];
 
 /** Field-triggered pickers pinned to the field's width exactly. */
 const matchTriggerPickers = ["Icon/index.tsx"];
 
-const intrinsicGridPickers = ["DatePicker/parts.tsx", "DatePicker/DatetimePicker.catalog.tsx"];
-
 /** Panels opened from an icon/button trigger, where fit-content is correct. */
 const buttonShapedPickers = ["Geolocation/index.tsx"];
 
@@ -36,10 +40,6 @@ function read(relative: string): string {
 }
 
 describe("FloatingPanel width contract (MPO-38, MPO-262)", () => {
-  it.each(intrinsicGridPickers)("%s hugs its calendar grid", (relative) => {
-    expect(read(relative)).toContain('widthMode="fit-content"');
-  });
-
   it.each(fieldShapedPickers)("%s declares at-least-trigger", (relative) => {
     const source = read(relative);
     expect(source).toContain('widthMode="at-least-trigger"');

package/src/FloatingPanel/pointAnchor.spec.ts

@@ -154,7 +154,14 @@ describe("placeOverTrigger (FZ-7830, LC-112 where no sheet may take it)", () =>
       height: 180,
       bounds: phone,
     });
-    expect(placed).toEqual({ left: 20, top: 200, width: 200, maxHeight: 600, shifted: false });
+    expect(placed).toEqual({
+      left: 20,
+      top: 200,
+      width: 200,
+      maxHeight: 600,
+      shifted: false,
+      end: false,
+    });
   });
 
   it("is at least the trigger's width", () => {
@@ -209,6 +216,54 @@ describe("placeOverTrigger (FZ-7830, LC-112 where no sheet may take it)", () =>
     expect(placed.maxHeight).toBe(743);
   });
 
+  it("opens an icon menu from the trigger's top trailing corner at the end edge (FZ-8438)", () => {
+    const placed = placeOverTrigger({
+      trigger,
+      width: 200,
+      height: 180,
+      bounds: phone,
+      align: "auto",
+    });
+    expect(placed).toMatchObject({ left: 144, top: 200, end: true, shifted: false });
+  });
+
+  it("keeps a bar button's corner inside the viewport margin (FZ-8438)", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 342, y: 60, width: 44, height: 44 },
+      width: 250,
+      height: 180,
+      bounds: phone,
+      align: "auto",
+    });
+    expect(placed.left).toBe(342 + 44 - 250);
+    expect(placed.end).toBe(true);
+    expect(placed.shifted).toBe(false);
+  });
+
+  it("mirrors the icon menu in RTL: a leading-edge button opens from its left corner (FZ-8438)", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 4, y: 60, width: 44, height: 44 },
+      width: 250,
+      height: 180,
+      bounds: phone,
+      rtl: true,
+      align: "auto",
+    });
+    expect(placed.left).toBe(4);
+    expect(placed.end).toBe(true);
+  });
+
+  it("keeps the start corner for an icon menu that fits (FZ-8438)", () => {
+    const placed = placeOverTrigger({
+      trigger: { x: 20, y: 200, width: 44, height: 44 },
+      width: 200,
+      height: 180,
+      bounds: phone,
+      align: "auto",
+    });
+    expect(placed).toMatchObject({ left: 20, end: false, shifted: false });
+  });
+
   it("never grows wider than the bounds", () => {
     const placed = placeOverTrigger({
       trigger: { x: 20, y: 200, width: 120, height: 44 },
@@ -227,7 +282,14 @@ describe("placeBesideTrigger (FZ-7830 round 3, LC-262: beside the trigger, never
 
   it("opens under the trigger when it fits", () => {
     const placed = placeBesideTrigger({ trigger: field, width: 200, height: 180, bounds: phone });
-    expect(placed).toEqual({ left: 16, top: 344, width: 358, maxHeight: 180, shifted: false });
+    expect(placed).toEqual({
+      left: 16,
+      top: 344,
+      width: 358,
+      maxHeight: 180,
+      shifted: false,
+      end: false,
+    });
   });
 
   it("opens above the trigger when there is more room there, its bottom on the trigger's top", () => {

package/src/FloatingPanel/pointAnchor.ts

@@ -136,6 +136,8 @@ export interface TriggerPlacement {
   maxHeight: number;
   /** The menu moved off the trigger's top start corner to stay on screen. */
   shifted: boolean;
+  /** An `"auto"` menu took the trigger's top trailing corner instead. */
+  end: boolean;
 }
 
 /**
@@ -151,17 +153,32 @@ export function placeOverTrigger({
   height,
   bounds,
   rtl = false,
+  align = "start",
 }: {
   trigger: TriggerRect;
   width: number;
   height: number;
   bounds: PanelBounds;
   rtl?: boolean;
+  /**
+   * `"auto"` (a menu with no echo row) opens from the trailing top corner when
+   * the leading one would run off the end edge and the trailing one fits.
+   */
+  align?: "start" | "auto";
 }): TriggerPlacement {
   const room = Math.max(0, bounds.right - bounds.left);
   const w = Math.min(Math.max(width, trigger.width), room);
-  const wantLeft = rtl ? trigger.x + trigger.width - w : trigger.x;
-  const left = Math.max(bounds.left, Math.min(wantLeft, bounds.right - w));
+  const startLeft = rtl ? trigger.x + trigger.width - w : trigger.x;
+  const endLeft = rtl ? trigger.x : trigger.x + trigger.width - w;
+  // Only the free edge has to clear the padded bounds: the aligned edge is
+  // the trigger's own, so a bar button inside the margin keeps its corner.
+  const startFree = rtl ? startLeft >= bounds.left : startLeft + w <= bounds.right;
+  const endFree = rtl ? endLeft + w <= bounds.right : endLeft >= bounds.left;
+  const auto = align === "auto";
+  const end = auto && !startFree && endFree;
+  const wantLeft = end ? endLeft : startLeft;
+  const keep = auto && (end || startFree);
+  const left = keep ? wantLeft : Math.max(bounds.left, Math.min(wantLeft, bounds.right - w));
   const h = Math.min(height, Math.max(0, bounds.bottom - bounds.top));
   const top = Math.max(bounds.top, Math.min(trigger.y, bounds.bottom - h));
   return {
@@ -170,6 +187,7 @@ export function placeOverTrigger({
     width: w,
     maxHeight: Math.max(0, bounds.bottom - top),
     shifted: left !== wantLeft || top !== trigger.y,
+    end,
   };
 }
 
@@ -200,5 +218,12 @@ export function placeBesideTrigger({
   const opensUp = height > below && above > below;
   const maxHeight = Math.min(height, opensUp ? above : below);
   const top = opensUp ? trigger.y - maxHeight : trigger.y + trigger.height;
-  return { left, top, width: w, maxHeight, shifted: left !== wantLeft || opensUp };
+  return {
+    left,
+    top,
+    width: w,
+    maxHeight,
+    shifted: left !== wantLeft || opensUp,
+    end: false,
+  };
 }

package/src/FloatingPanel/useFloatingPanel.spec.tsx

@@ -22,11 +22,13 @@ import { FloatingPanel } from "./index";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { Preset, type Knobs } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it } from "vitest";
+import { type PanelWidth } from "./panelWidth";
 import {
   type PanelWidthMode,
   measureDrawnRadius,
   panelAnchorOffset,
   panelCoverOffset,
+  panelViewportPadding,
   resolvePanelWidthMode,
   useFloatingPanel,
 } from "./useFloatingPanel";
@@ -35,10 +37,14 @@ function Harness({
   open,
   fitContent,
   widthMode,
+  panelWidth,
+  echo,
 }: {
   open: boolean;
   fitContent?: boolean;
   widthMode?: PanelWidthMode;
+  panelWidth?: PanelWidth;
+  echo?: boolean;
 }) {
   const panel = useFloatingPanel({
     open,
@@ -46,6 +52,8 @@ function Harness({
     useAutoUpdate: false,
     fitContent,
     widthMode,
+    panelWidth,
+    echo,
   });
   return (
     <>
@@ -76,7 +84,12 @@ function mockRect(el: HTMLElement, rect: { x: number; y: number; width: number;
 /** Open the panel against a trigger of a known geometry and hand back the
  *  floating element once floating-ui has positioned it. */
 async function openAgainstTrigger(
-  props: { fitContent?: boolean; widthMode?: PanelWidthMode },
+  props: {
+    fitContent?: boolean;
+    widthMode?: PanelWidthMode;
+    panelWidth?: PanelWidth;
+    echo?: boolean;
+  },
   triggerRect: { x: number; y: number; width: number; height: number },
 ) {
   const result = renderWithProviders(<Harness open={false} {...props} />);
@@ -173,6 +186,90 @@ describe("FloatingPanel and DropdownMenu open over their trigger (MPO-38 cover r
   });
 });
 
+describe("FloatingPanel panelWidth setting (LC-112, FZ-8438 r3)", () => {
+  const room = () =>
+    (document.documentElement.clientWidth || window.innerWidth) - 2 * panelViewportPadding;
+
+  it('"content" hugs its rows but never drops below an echoed trigger', async () => {
+    const result = await openAgainstTrigger({ panelWidth: "content" }, trigger);
+    await waitFor(() => {
+      const el = result.getByTestId("anchor-floating");
+      expect(el.style.minWidth).toBe("240px");
+      expect(el.style.width).toBe("");
+      expect(el.style.maxWidth).toBe(`${room()}px`);
+    });
+  });
+
+  it('"content" without an echo (an icon trigger) has no trigger floor', async () => {
+    const result = await openAgainstTrigger({ panelWidth: "content", echo: false }, trigger);
+    await waitFor(() => {
+      const el = result.getByTestId("anchor-floating");
+      expect(el.style.minWidth).toBe("0px");
+      expect(el.style.width).toBe("");
+    });
+  });
+
+  it('"trigger" is exactly the trigger\'s width', async () => {
+    const result = await openAgainstTrigger({ panelWidth: "trigger" }, trigger);
+    await waitFor(() => {
+      const el = result.getByTestId("anchor-floating");
+      expect([el.style.minWidth, el.style.width, el.style.maxWidth]).toEqual([
+        "240px",
+        "240px",
+        "240px",
+      ]);
+    });
+  });
+
+  it('"screen" from a trigger in the page gutter spans the gutters, both sides', async () => {
+    // The trigger sits 16 in: the panel takes that inset at each end, so its
+    // start edge is the trigger's and its rows line up under the echo.
+    const result = await openAgainstTrigger({ panelWidth: "screen" }, trigger);
+    const gutters = (document.documentElement.clientWidth || window.innerWidth) - 2 * trigger.x;
+    await waitFor(() => {
+      const el = result.getByTestId("anchor-floating");
+      expect(el.style.width).toBe(`${gutters}px`);
+      expect(el.style.maxWidth).toBe(`${gutters}px`);
+    });
+  });
+
+  it('"screen" from a trigger deep in the page is the room between the safe margins', async () => {
+    const result = await openAgainstTrigger({ panelWidth: "screen" }, { ...trigger, x: 400 });
+    await waitFor(() => {
+      const el = result.getByTestId("anchor-floating");
+      expect(el.style.width).toBe(`${room()}px`);
+      expect(el.style.maxWidth).toBe(`${room()}px`);
+    });
+  });
+
+  it("a number is a fixed width, wider or narrower than the trigger", async () => {
+    const wide = await openAgainstTrigger({ panelWidth: 320 }, trigger);
+    await waitFor(() => {
+      expect(wide.getByTestId("anchor-floating").style.width).toBe("320px");
+    });
+    wide.unmount();
+    const narrow = await openAgainstTrigger({ panelWidth: 180 }, trigger);
+    await waitFor(() => {
+      const el = narrow.getByTestId("anchor-floating");
+      expect([el.style.minWidth, el.style.width, el.style.maxWidth]).toEqual([
+        "180px",
+        "180px",
+        "180px",
+      ]);
+    });
+  });
+
+  it("wins over widthMode when both are set", async () => {
+    const result = await openAgainstTrigger(
+      { widthMode: "fit-content", panelWidth: "trigger" },
+      trigger,
+    );
+    await waitFor(() => {
+      expect(result.getByTestId("anchor-floating").style.width).toBe("240px");
+    });
+  });
+});
+
 describe("FloatingPanel width modes (MPO-38)", () => {
   it("resolves the deprecated boolean onto the three modes", () => {
     expect(resolvePanelWidthMode(undefined, undefined)).toBe("at-least-trigger");
@@ -441,14 +538,15 @@ describe("FloatingPanel drawn radius (MPO-129)", () => {
 /**
  * CONTAINER-CAP (MPO-56). Part 2b files floating panels under DG-RAD-04: the
  * class value on the panel's own padding is the ceiling, and the trigger's
- * drawn arc (above) only ever lowers it.
+ * drawn arc (above) lowers it. A covering panel takes the arc whole (FZ-8438).
  */
-function RadiusHarness({ open }: { open: boolean }) {
-  const panel = useFloatingPanel({ open, onOpenChange: () => {}, useAutoUpdate: false });
+function RadiusHarness({ open, cover = false }: { open: boolean; cover?: boolean }) {
+  const panel = useFloatingPanel({ open, onOpenChange: () => {}, useAutoUpdate: false, cover });
   return (
     <div
       data-testid="radius-trigger"
       data-radius={String(panel.dropdownRadius)}
+      data-inset={String(panel.coverCornerInset)}
       ref={panel.setReferenceRef}
     />
   );
@@ -513,4 +611,26 @@ describe("FloatingPanel radius is CONTAINER-CAP on its padding (DG-RAD-04, MPO-5
     );
     await waitFor(() => expect(anchor.getAttribute("data-radius")).toBe("18"));
   });
+
+  it("a covering panel takes the trigger's drawn arc exactly, past the cap (LC-112, FZ-8438)", async () => {
+    const result = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <RadiusHarness open={false} cover />
+      </Preset>,
+    );
+    const anchor = result.getByTestId("radius-trigger");
+    Object.assign(anchor.style, {
+      borderTopLeftRadius: "50px",
+      backgroundColor: "rgb(255, 255, 255)",
+    });
+    mockRect(anchor, { x: 0, y: 0, width: 240, height: 44 });
+    result.rerender(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <RadiusHarness open cover />
+      </Preset>,
+    );
+    await waitFor(() => expect(anchor.getAttribute("data-radius")).toBe("22"));
+    // Past the cap, the bottom insets by the arc's sagitta at 45° so rows clear it.
+    expect(anchor.getAttribute("data-inset")).toBe(String(Math.ceil(22 * (1 - Math.SQRT1_2))));
+  });
 });