@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/FloatingPanel/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import type { ReactNode, RefObject, UIEvent } from "react";
 import {
   useCallback,
@@ -11,6 +12,7 @@ import {
   OVERLAY_ANCHOR_GAP,
   OVERLAY_ATTACH_GAP,
   OVERLAY_BREAKPOINT,
+  Surface,
   useResolvedKnobs,
   wasKeyboardFocus,
   ensureKeyboardModalityTracking,
@@ -20,7 +22,7 @@ import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import { ScrollArrow } from "../shared/floatingList";
 import { useReturnFocusOnClose, useSheetModalFocus } from "../shared/focusManagement";
 import { useSheetEscapeDismiss } from "../shared/useSheetEscapeDismiss";
-import { useFloatingPanel, panelTransition, panelViewportPadding } from "./useFloatingPanel";
+import { useFloatingPanel, panelViewportPadding } from "./useFloatingPanel";
 import type { PanelWidthMode } from "./useFloatingPanel";
 import { zIndex } from "../shared/zIndex";
 import { isNestedPanelAction, type PanelActionEvent } from "./nestedAction";
@@ -64,6 +66,7 @@ export interface FloatingPanelProps {
   /** Suppress delayed trigger focus when a consumer handles close focus itself. Web only. */
   skipReturnFocusRef?: RefObject<boolean>;
   trigger: ReactNode;
+  triggerEcho?: boolean;
   /**
    * Optional control rendered beside the trigger but OUTSIDE the native press
    * capture (e.g. DatePicker/ColorPicker clear). On native the trigger subtree
@@ -117,12 +120,6 @@ export interface FloatingPanelProps {
    * that handle their own internal spacing.
    */
   contentPadding?: "none" | "default";
-  /**
-   * The content sits one density step below the page (LC-73), as the
-   * calendar does. The web panel's radius caps at that step's padding
-   * (CONTAINER-CAP), since a `contentPadding="none"` widget pads itself there.
-   */
-  compact?: boolean;
   /**
    * Tamagui transition token for sheet/overlay animations.
    */
@@ -167,6 +164,14 @@ export interface FloatingPanelProps {
    * trigger's bottom start corner.
    */
   openOn?: "press" | "contextmenu";
+  /**
+   * COVER-TRIGGER (LC-105): the panel's top edge sits on the trigger's TOP
+   * edge instead of attaching below it, so the trigger becomes the panel's
+   * first row by default. Set triggerEcho=false for a custom first row. The panel scales from
+   * the trigger's top start corner. Dropping up, the bottom edges coincide.
+   * Enabled by default. Web float only; the native and narrow-web sheet is unchanged.
+   */
+  cover?: boolean;
 }
 
 /** Inner stops a keyboard-open should land on. House Button is a
@@ -196,7 +201,10 @@ function useKeyboardFocusIntoPanel(
       if (!wasKeyboardFocus() && !keyboardOpenRef?.current) return;
       const active = document.activeElement;
       if (active instanceof HTMLElement && frame.contains(active) && active !== frame) return;
-      const first = frame.querySelector<HTMLElement>(PANEL_FOCUSABLE);
+      // The trigger echo row is presentation only (inert): skip its controls.
+      const first = Array.from(frame.querySelectorAll<HTMLElement>(PANEL_FOCUSABLE)).find(
+        (el) => !el.closest("[data-fp-trigger-row]"),
+      );
       if (!first || first === frame) return;
       first.focus({ preventScroll: true, focusVisible: true } as FocusOptions);
     };
@@ -262,6 +270,71 @@ function panelTransformOrigin(placement: string): string {
   return `${originY} ${originX}`;
 }
 
+// ── Trigger echo (cover ruling) ───────────────────────────────
+
+const ECHO_STRIPPED_ATTRIBUTES = [
+  "id",
+  "for",
+  "name",
+  "data-testid",
+  "aria-label",
+  "aria-controls",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-activedescendant",
+];
+
+/**
+ * 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
+ * trigger grown open. It is a DOM snapshot of the live trigger, never a
+ * second React render: a re-rendered trigger element would share the
+ * consumer's refs and steal them from the real control. The snapshot is
+ * inert and hidden from assistive tech, with ids, names, test ids and tab
+ * 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({
+  sourceRef,
+  onPress,
+}: {
+  sourceRef: RefObject<HTMLElement | null>;
+  onPress: () => void;
+}) {
+  const rowRef = useRef<HTMLElement | null>(null);
+  useLayoutEffect(() => {
+    const row = rowRef.current;
+    const source = sourceRef.current;
+    if (!row || !source || typeof source.cloneNode !== "function") return;
+    const snapshot = source.cloneNode(true) as HTMLElement;
+    const sourceFields = source.querySelectorAll<HTMLInputElement>("input, textarea");
+    const snapshotFields = snapshot.querySelectorAll<HTMLInputElement>("input, textarea");
+    sourceFields.forEach((field, index) => {
+      const copy = snapshotFields[index];
+      if (copy) copy.value = field.value;
+    });
+    for (const node of [snapshot, ...Array.from(snapshot.querySelectorAll<HTMLElement>("*"))]) {
+      for (const name of ECHO_STRIPPED_ATTRIBUTES) node.removeAttribute(name);
+      if (node.hasAttribute("tabindex") || node.matches("input, textarea, button, a, select")) {
+        node.setAttribute("tabindex", "-1");
+      }
+    }
+    snapshot.setAttribute("inert", "");
+    row.replaceChildren(snapshot);
+  });
+  return (
+    <View
+      ref={rowRef as any}
+      data-fp-trigger-row=""
+      aria-hidden
+      cursor="pointer"
+      onPress={onPress}
+      flexShrink={0}
+      pointerEvents="auto"
+    />
+  );
+}
+
 // ── FloatingPanel ─────────────────────────────────────────────
 
 // Canonical float↔sheet pivot (theme `layoutBreakpoints.medium` = Tamagui
@@ -298,9 +371,12 @@ export function FloatingPanel(props: FloatingPanelProps) {
   // SSR and the hydration render use the same sheet structure. The viewport
   // snapshot switches to floating after hydration when the browser is wide.
   const shouldUseSheet = props.sheet ?? (!isWeb || !viewportGtSm);
+  // The panel floats over the page: its content never sits on a painted
+  // ancestor, so a Card inside it paints as top-level.
+  const panelProps = { ...props, children: <Surface painted={false}>{props.children}</Surface> };
 
-  if (shouldUseSheet) return <FloatingPanelSheet {...props} />;
-  return <FloatingPanelWeb {...props} />;
+  if (shouldUseSheet) return <FloatingPanelSheet {...panelProps} />;
+  return <FloatingPanelWeb {...panelProps} />;
 }
 
 // ── Sheet (mobile / native / forced) ──────────────────────────
@@ -341,9 +417,16 @@ function FloatingPanelSheet({
   scrollViewProps,
   openOn = "press",
 }: FloatingPanelProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ painted: false });
   // LC-24 / A-ENTEREXIT: honor animation=none (undefined) — do not hardcode "medium".
-  const transition = transitionProp ?? knobProps.transition;
+  const slideMotion = {
+    ...knobProps.motion.slide,
+    transition: transitionProp ?? knobProps.motion.slide.transition,
+  };
+  const scrimMotion = {
+    ...knobProps.motion.scrim,
+    transition: transitionProp ?? knobProps.motion.scrim.transition,
+  };
   const [position, setPosition] = useState(0);
 
   const handleOpenChange = (next: boolean) => {
@@ -428,10 +511,10 @@ function FloatingPanelSheet({
         position={position}
         onPositionChange={setPosition}
         zIndex={zIndex.sheet}
-        transition={transition}
+        {...transitionProps(slideMotion)}
       >
         <Sheet.Overlay
-          transition={transition}
+          {...transitionProps(scrimMotion)}
           backgroundColor="$shadow6"
           enterStyle={{ opacity: 0 }}
           exitStyle={{ opacity: 0 }}
@@ -475,9 +558,10 @@ function FloatingPanelWeb({
   sizing = "grow",
   widthMode,
   fitContent,
-  compact,
   contentPadding = "default",
   openOn = "press",
+  cover = true,
+  triggerEcho = true,
 }: FloatingPanelProps) {
   const isFill = sizing === "fill";
   const isContextMenu = openOn === "contextmenu";
@@ -514,8 +598,8 @@ function FloatingPanelWeb({
     wheelGrowRef: isFill ? undefined : grownRef,
     widthMode: widthMode ?? (isContextMenu && fitContent === undefined ? "fit-content" : undefined),
     fitContent,
-    compact,
     freeOverlay: isContextMenu,
+    cover,
     onBeforeOpen: resetPosition,
   });
 
@@ -554,7 +638,7 @@ function FloatingPanelWeb({
     const totalBorderWidth = borderTopWidth + borderBottomWidth;
     const scrollContentHeight = dropdownElement.scrollHeight;
     const totalContentHeight = scrollContentHeight + totalBorderWidth;
-    const liveTransition = panel.knobProps.transition ? panelTransition : "none";
+    const liveTransition = panel.panelTransition;
     const containingBlock = fixedContainingBlockOrigin(dropdownElement);
 
     let isDropup = panel.placement.startsWith("top");
@@ -588,8 +672,11 @@ function FloatingPanelWeb({
     // 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;
+    // COVER-TRIGGER (LC-105): a covering panel starts ON the trigger — its
+    // top edge is the trigger's top edge (bottom on bottom when dropping up).
+    const covers = cover && !point;
+    const belowTop = covers ? triggerBounds.top : triggerBounds.bottom + gap;
+    const aboveBottom = covers ? triggerBounds.bottom : triggerBounds.top - gap;
 
     if (isFill) {
       const available = isDropup
@@ -706,11 +793,12 @@ function FloatingPanelWeb({
   }, [
     isFill,
     isContextMenu,
+    cover,
     panel.placement,
     panel.refs,
     panel.triggerRef,
     panel.updateArrows,
-    panel.knobProps.transition,
+    panel.panelTransition,
   ]);
 
   repositionFnRef.current = repositionOverlay;
@@ -788,8 +876,7 @@ function FloatingPanelWeb({
     [isFill, panel.updateArrows],
   );
 
-  // animation=none → no CSS tween (same contract as knobProps.transition === undefined)
-  const webTransition = panel.knobProps.transition ? panelTransition : "none";
+  const webTransition = panel.panelTransition;
 
   // `elevatedSurface` carries a web-only `style: { boxShadow }` (MPO-69,
   // d326cc0c2). Two `style` props on one element do NOT merge — the later
@@ -954,6 +1041,9 @@ function FloatingPanelWeb({
             borderRadius={panel.dropdownRadius}
             paddingVertical={0}
           >
+            {isContextMenu || !cover || !triggerEcho ? null : (
+              <TriggerEchoRow sourceRef={panel.triggerRef} onPress={() => onOpenChange(false)} />
+            )}
             <ScrollArrow
               direction="up"
               scrollRef={panel.refs.floating}

package/src/FloatingPanel/touchRecipeHydration.spec.tsx

@@ -2,12 +2,16 @@
 import { act } from "react";
 import { renderToString } from "react-dom/server";
 import { hydrateRoot } from "react-dom/client";
-import { TestProviders } from "@multiplatform.one/test-utils";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { createTamagui, TamaguiProvider } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { TextArea } from "../fields/TextArea";
 import { Input as InputParts } from "../InputParts";
 import { Input } from "../fields/Input";
 import { SearchInput } from "../fields/SearchInput";
+import { Button, resolveButtonSizeRecipe } from "../Button";
+import { defaultScaleInputs, generateScale, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { Select } from "../fields/Select";
 import { Combobox } from "../fields/Combobox";
 const modality = vi.hoisted(() => ({ touch: true }));
@@ -17,10 +21,31 @@ vi.mock("@multiplatform.one/platform", async (original) => ({
     return modality.touch && typeof window !== "undefined";
   },
 }));
+const config = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  tokens: generateScale(defaultScaleInputs).tokens,
+});
 const options = ["Alpha", "Beta", "Gamma", "Delta"].map((label) => ({ label, value: label }));
 function Fixture() {
   return (
-    <TestProviders>
+    <TamaguiProvider config={config} defaultTheme="light" disableInjectCSS>
+      <Button aria-label="Default button" icon={<span>Icon</span>}>
+        Save
+      </Button>
+      <Button size="$5" aria-label="Large button">
+        Save
+      </Button>
+      <Button size={30} aria-label="Numeric button">
+        Save
+      </Button>
+      <Button circular size="$3" aria-label="Circular button">
+        +
+      </Button>
+      <Button nested circular aria-label="Nested button">
+        +
+      </Button>
+      <Button skeleton data-testid="skeleton-button" />
       <Input aria-label="Input" />
       <TextArea aria-label="Area" />
       <InputParts>
@@ -35,10 +60,20 @@ function Fixture() {
       <SearchInput aria-label="Search" />
       <Select aria-label="Select" options={options} defaultValue="Alpha" />
       <Combobox aria-label="Combobox" options={options} defaultValue="Alpha" />
-    </TestProviders>
+    </TamaguiProvider>
   );
 }
 describe("touch recipe hydration", () => {
+  it("the Button helper preserves numeric escapes and adopts each family's touch row", () => {
+    for (const family of ["control", "chip"] as const) {
+      expect(resolveButtonSizeRecipe("$4", family, true)).toEqual(
+        sizeRecipeForToken("$4", { family, touch: true }),
+      );
+      expect(resolveButtonSizeRecipe(30, family, true)).toEqual(
+        resolveButtonSizeRecipe(30, family, false),
+      );
+    }
+  });
   it.each([true, false, true])(
     "hydrates actual controls on repeated coarse mount %s",
     async (touch) => {
@@ -71,7 +106,30 @@ describe("touch recipe hydration", () => {
         );
         expect(container.querySelector("[touch]")).toBeNull();
         expect(heights.length).toBeGreaterThanOrEqual(2);
-        expect(heights.every((height) => height >= 44)).toBe(true);
+        expect(heights.every((height) => height === (touch ? 44 : 40))).toBe(true);
+        const buttonHeight = (label: string) =>
+          Number(
+            container
+              .querySelector(`[aria-label="${label}"]`)
+              ?.getAttribute("data-mp-button-height"),
+          );
+        expect(buttonHeight("Default button")).toBe(touch ? 44 : 40);
+        expect(buttonHeight("Large button")).toBe(48);
+        expect(buttonHeight("Numeric button")).toBe(30);
+        expect(buttonHeight("Circular button")).toBe(touch ? 44 : 32);
+        expect(buttonHeight("Nested button")).toBe(29);
+        const circular = container.querySelector('[aria-label="Circular button"]')!;
+        expect(circular.className).toContain(`_miw-${touch ? 44 : 32}px`);
+        expect(circular.className).toContain(`_mih-${touch ? 44 : 32}px`);
+        const button = container.querySelector('[aria-label="Default button"]')!;
+        expect(button.className).toContain(`_h-${touch ? 44 : 40}px`);
+        expect(button.className).toContain("_gap-8px");
+        expect(button.className).toMatch(/_btlr-(8px|[tc]-radius-4)/);
+        expect(button.innerHTML).toContain("_fos-15px");
+
+        expect(container.querySelector('[data-testid="skeleton-button"]')?.className).toContain(
+          `_h-${touch ? 44 : 40}px`,
+        );
       } finally {
         await act(async () => root?.unmount());
         spy.mockRestore();

package/src/FloatingPanel/useFloatingPanel.spec.tsx

@@ -1,3 +1,4 @@
+import { getTokens, getVariableValue } from "tamagui";
 /**
  * The FloatingPanel family's anchoring and width contract (MPO-38, Clay's
  * ruling 2026-08-28).
@@ -13,7 +14,11 @@
  * content) — the floor that keeps a panel from coming out narrower than the
  * control that opened it.
  */
-import { waitFor } from "@testing-library/react";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { Text } from "tamagui";
+import { Button } from "../Button";
+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";
@@ -21,6 +26,7 @@ import {
   type PanelWidthMode,
   measureDrawnRadius,
   panelAnchorOffset,
+  panelCoverOffset,
   resolvePanelWidthMode,
   useFloatingPanel,
 } from "./useFloatingPanel";
@@ -85,22 +91,86 @@ async function openAgainstTrigger(
 const trigger = { x: 16, y: 16, width: 240, height: 44 };
 
 describe("FloatingPanel anchoring (MPO-38 cover ruling)", () => {
-  it("attaches to the trigger with no gap", () => {
-    // The house token IS the contract; a member cannot opt back into 4px
-    // without changing the token every member reads.
+  // Clay, 2026-10-23: "That's not how it works it goes over the trigger".
+  // The family opens OVER its trigger like Select: the panel's top edge sits
+  // on the trigger's top edge, never on its bottom edge and never 4px clear.
+  it("has no gap of its own: the cover offset is minus the trigger's height", () => {
     expect(panelAnchorOffset).toBe(0);
+    expect(panelCoverOffset(44)).toBe(-44);
   });
 
-  it("places the panel top on the trigger's bottom edge, not 4px below it", async () => {
+  it("places the panel's top edge on the trigger's top edge", async () => {
     const result = await openAgainstTrigger({}, trigger);
     await waitFor(() => {
       const y = Number(result.getByTestId("anchor-floating").dataset.panelY);
-      // trigger.bottom = 16 + 44 = 60. Anything larger is daylight.
-      expect(y).toBe(60);
+      // trigger.top = 16. 60 (trigger.bottom) was the old attach-below rule.
+      expect(y).toBe(trigger.y);
     });
   });
 });
 
+describe("FloatingPanel and DropdownMenu open over their trigger (MPO-38 cover ruling)", () => {
+  // DropdownMenu IS FloatingPanel with its cover contract (at-least-trigger,
+  // contentPadding none); forms cannot import components, so the menu's
+  // panel is exercised through the exact props it passes. The components
+  // DropdownMenu spec measures the real menu the same way.
+  const coverTrigger = { x: 120, y: 200, width: 180, height: 36 };
+
+  function PanelHarness(props: {
+    widthMode?: PanelWidthMode;
+    contentPadding?: "default" | "none";
+  }) {
+    const [open, setOpen] = useState(false);
+    return (
+      <FloatingPanel
+        open={open}
+        onOpenChange={setOpen}
+        trigger={<Button>Actions</Button>}
+        {...props}
+      >
+        <Text>Rename</Text>
+        <Text>Delete</Text>
+      </FloatingPanel>
+    );
+  }
+
+  async function openPanel(props: Parameters<typeof PanelHarness>[0]) {
+    const result = renderWithProviders(<PanelHarness {...props} />);
+    const reference = result.container.querySelector("[data-fp-reference]") as HTMLElement;
+    mockRect(reference, coverTrigger);
+    const button = result.container.querySelector("[role='button']") as HTMLElement;
+    fireEvent.mouseDown(button, { detail: 1 });
+    fireEvent.mouseUp(button, { detail: 1 });
+    fireEvent.click(button, { detail: 1 });
+    await waitFor(() => {
+      expect(document.querySelector('[data-testid="floating-panel-viewport"]')).toBeTruthy();
+    });
+    return document.querySelector('[data-testid="floating-panel-viewport"]') as HTMLElement;
+  }
+
+  it.each([
+    ["FloatingPanel", {}],
+    ["DropdownMenu", { widthMode: "at-least-trigger", contentPadding: "none" }],
+  ] as const)("%s: the panel's top edge equals the trigger's top edge", async (_name, props) => {
+    const viewport = await openPanel(props);
+    await waitFor(() => expect(viewport.style.top).toBe(`${coverTrigger.y}px`));
+    // It grows out of the trigger: the transform origin is the trigger's edge.
+    expect(viewport.style.transformOrigin.startsWith("top")).toBe(true);
+  });
+
+  it("the trigger's own label is the panel's first row, presentation only", async () => {
+    const viewport = await openPanel({});
+    const echo = viewport.querySelector("[data-fp-trigger-row]") as HTMLElement;
+    expect(echo).toBeTruthy();
+    expect(echo.textContent).toContain("Actions");
+    expect(echo.getAttribute("aria-hidden")).toBe("true");
+    const firstRow = Array.from(viewport.children).find((el) =>
+      (el as HTMLElement).textContent?.trim(),
+    );
+    expect(firstRow).toBe(echo);
+  });
+});
+
 describe("FloatingPanel width modes (MPO-38)", () => {
   it("resolves the deprecated boolean onto the three modes", () => {
     expect(resolvePanelWidthMode(undefined, undefined)).toBe("at-least-trigger");
@@ -371,8 +441,8 @@ describe("FloatingPanel drawn radius (MPO-129)", () => {
  * class value on the panel's own padding is the ceiling, and the trigger's
  * drawn arc (above) only ever lowers it.
  */
-function RadiusHarness({ open, compact }: { open: boolean; compact?: boolean }) {
-  const panel = useFloatingPanel({ open, onOpenChange: () => {}, useAutoUpdate: false, compact });
+function RadiusHarness({ open }: { open: boolean }) {
+  const panel = useFloatingPanel({ open, onOpenChange: () => {}, useAutoUpdate: false });
   return (
     <div
       data-testid="radius-trigger"
@@ -382,10 +452,10 @@ function RadiusHarness({ open, compact }: { open: boolean; compact?: boolean })
   );
 }
 
-function panelRadius(overrides: Partial<Knobs>, compact?: boolean) {
+function panelRadius(overrides: Partial<Knobs>) {
   const result = renderWithProviders(
     <Preset overrides={overrides}>
-      <RadiusHarness open={false} compact={compact} />
+      <RadiusHarness open={false} />
     </Preset>,
   );
   const radius = result.getByTestId("radius-trigger").getAttribute("data-radius");
@@ -394,26 +464,23 @@ function panelRadius(overrides: Partial<Knobs>, compact?: boolean) {
 }
 
 describe("FloatingPanel radius is CONTAINER-CAP on its padding (DG-RAD-04, MPO-56)", () => {
-  it("takes the token while it fits the padding", () => {
+  it("takes the larger container key until it reaches the padding cap", () => {
     expect(panelRadius({ borderRadius: "none" })).toBe("0");
-    expect(panelRadius({ borderRadius: "medium", space: "medium" })).toBe("9");
-    expect(panelRadius({ borderRadius: "large", space: "medium" })).toBe("16");
-  });
-
-  it("caps full at the padding, and large under space small", () => {
-    expect(panelRadius({ borderRadius: "full", space: "medium" })).toBe("18");
-    expect(panelRadius({ borderRadius: "full", space: "large" })).toBe("32");
-    expect(panelRadius({ borderRadius: "large", space: "small" })).toBe("13");
+    expect(panelRadius({ borderRadius: "medium" })).toBe("14");
+    expect(panelRadius({ borderRadius: "large" })).toBe(
+      String(getVariableValue(getTokens().space.$4)),
+    );
   });
 
-  it("caps at the compact step's padding for a compact panel", () => {
-    expect(panelRadius({ borderRadius: "full", space: "medium" }, true)).toBe("13");
-    expect(panelRadius({ borderRadius: "large", space: "medium" }, true)).toBe("13");
+  it("caps full at the panelPadding role", () => {
+    expect(panelRadius({ borderRadius: "full" })).toBe(
+      String(getVariableValue(getTokens().space.$4)),
+    );
   });
 
   it("keeps a smaller drawn trigger arc once open, never a larger one", async () => {
     const result = renderWithProviders(
-      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+      <Preset overrides={{ borderRadius: "full" }}>
         <RadiusHarness open={false} />
       </Preset>,
     );
@@ -424,7 +491,7 @@ describe("FloatingPanel radius is CONTAINER-CAP on its padding (DG-RAD-04, MPO-5
       backgroundColor: "rgb(255, 255, 255)",
     });
     result.rerender(
-      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+      <Preset overrides={{ borderRadius: "full" }}>
         <RadiusHarness open />
       </Preset>,
     );
@@ -433,12 +500,12 @@ describe("FloatingPanel radius is CONTAINER-CAP on its padding (DG-RAD-04, MPO-5
     Object.assign(anchor.style, { borderTopLeftRadius: "50px" });
     mockRect(anchor, { x: 0, y: 0, width: 240, height: 44 });
     result.rerender(
-      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+      <Preset overrides={{ borderRadius: "full" }}>
         <RadiusHarness open={false} />
       </Preset>,
     );
     result.rerender(
-      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+      <Preset overrides={{ borderRadius: "full" }}>
         <RadiusHarness open />
       </Preset>,
     );