@multiplatform.one/forms 7.45.1 → 7.47.0

package/src/Button/Button.borderLadder.spec.tsx

@@ -4,9 +4,9 @@
  * MPO-134: the borderWidth knob reaches an outlined Button. The frame's
  * `outlined` styled variant used to hard-set `borderWidth: 1`, which beat
  * `borderWidth={resolvedBorderWidth}` on Tamagui prop order and pinned every
- * outlined Button at 1px while a filled one walked 0 / 0.5 / 1 / 2. The
+ * outlined Button at 1px while a filled one walked 0 / hairline / 1 / 2. The
  * resolver owns the floor (DG-BOR-01): `none` under `fillStyle: outlined`
- * is the 0.5 hairline, and `large` is 2 for filled and outlined alike, so the
+ * is the hairline (1px on web, LC-148), and `large` is 2 for filled and outlined alike, so the
  * two keep the box parity the frame's comment promises.
  *
  * jsdom cannot cascade Tamagui CSS — assertions read the atomic border-width
@@ -14,13 +14,16 @@
  */
 
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
-import { cleanup, screen } from "@testing-library/react";
+import { createDefaultThemeConfig, Preset } from "@multiplatform.one/theme";
+import { cleanup, render, screen } from "@testing-library/react";
+import { TamaguiProvider } from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
 import { Button } from "./index";
 
 afterEach(cleanup);
 
+const houseConfig = createDefaultThemeConfig();
+
 const STOPS = ["none", "small", "medium", "large"] as const;
 
 function widthAtoms(): string[] {
@@ -43,8 +46,8 @@ function renderAt(stop: (typeof STOPS)[number], outlined: boolean): string[] {
 
 describe("Button borderWidth ladder (MPO-134)", () => {
   it("outlined walks the ladder: hairline at none and small, 1 at medium, 2 at large", () => {
-    expect(renderAt("none", true)).toEqual(["_btw-0--5px"]);
-    expect(renderAt("small", true)).toEqual(["_btw-0--5px"]);
+    expect(renderAt("none", true)).toEqual(["_btw-1px"]);
+    expect(renderAt("small", true)).toEqual(["_btw-1px"]);
     expect(renderAt("medium", true)).toEqual(["_btw-1px"]);
     expect(renderAt("large", true)).toEqual(["_btw-2px"]);
   });
@@ -53,9 +56,31 @@ describe("Button borderWidth ladder (MPO-134)", () => {
     expect(renderAt("none", true)).not.toEqual(renderAt("large", true));
   });
 
+  it("outlined small paints the resolver's fainter edge, so it still reads apart from medium (LC-148)", () => {
+    const colourAtoms = (stop: (typeof STOPS)[number]) => {
+      render(
+        <TamaguiProvider config={houseConfig.tamagui} defaultTheme="light" disableInjectCSS>
+          <Preset overrides={{ fillStyle: "outlined", borderWidth: stop }}>
+            <Button>Restart</Button>
+          </Preset>
+        </TamaguiProvider>,
+      );
+      const atoms = String(screen.getByRole("button").className || "")
+        .split(/\s+/)
+        .filter((c) => c.startsWith("_btc-"));
+      cleanup();
+      return atoms;
+    };
+    // Tamagui hashes a long variable into the atom, so the hairline edge reads
+    // as `_btc-borderColor<hash>` beside medium's bare `_btc-borderColor`.
+    expect(colourAtoms("medium")).toContain("_btc-borderColor");
+    expect(colourAtoms("small")).not.toContain("_btc-borderColor");
+    expect(colourAtoms("small").some((c) => /^_btc-borderColor\d+$/.test(c))).toBe(true);
+  });
+
   it("filled walks the same ladder, chromeless at none", () => {
     expect(renderAt("none", false)).toEqual(["_btw-0px"]);
-    expect(renderAt("small", false)).toEqual(["_btw-0--5px"]);
+    expect(renderAt("small", false)).toEqual(["_btw-1px"]);
     expect(renderAt("medium", false)).toEqual(["_btw-1px"]);
     expect(renderAt("large", false)).toEqual(["_btw-2px"]);
   });

package/src/Button/Button.edge.spec.tsx

@@ -0,0 +1,68 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./index";
+
+/**
+ * LC-141 EDGE-CONTROL (FZ-7703): a chromeless Button at a container edge
+ * pulls out by its own horizontal padding, so its glyph sits on the gutter.
+ * A framed Button ignores `edge`: its frame is what aligns.
+ *
+ * jsdom cannot cascade Tamagui's atomic CSS, so these read the frame's
+ * logical-margin and padding atoms.
+ */
+
+afterEach(cleanup);
+
+function atoms(prefix: string): string[] {
+  return String(screen.getByRole("button").className || "")
+    .split(" ")
+    .filter((c) => c.startsWith(prefix));
+}
+
+/** The padding the frame paints, as the px a pull-out must cancel. */
+function paddingPx(): string {
+  const [pad] = atoms("_pl-");
+  if (!pad) throw new Error("frame paints no left padding");
+  return pad.slice("_pl-".length);
+}
+
+describe("Button edge (LC-141)", () => {
+  it("pulls a chromeless start-edge button out by its own padding", () => {
+    renderWithProviders(
+      <Button chromeless edge="start">
+        Back
+      </Button>,
+    );
+    expect(atoms("_marginInlineStart-")).toEqual([`_marginInlineStart--${paddingPx()}`]);
+    expect(atoms("_marginInlineEnd-")).toEqual([]);
+  });
+
+  it("pulls a chromeless end-edge button out on the trailing side", () => {
+    renderWithProviders(
+      <Button chromeless edge="end">
+        Done
+      </Button>,
+    );
+    expect(atoms("_marginInlineEnd-")).toEqual([`_marginInlineEnd--${paddingPx()}`]);
+    expect(atoms("_marginInlineStart-")).toEqual([]);
+  });
+
+  it("leaves a framed button on the gutter", () => {
+    renderWithProviders(
+      <Button outlined edge="start">
+        Back
+      </Button>,
+    );
+    expect(atoms("_marginInline")).toEqual([]);
+  });
+
+  it("does nothing without edge", () => {
+    renderWithProviders(<Button chromeless>Back</Button>);
+    expect(atoms("_marginInline")).toEqual([]);
+  });
+});

package/src/Button/Button.stories.tsx

@@ -5,8 +5,9 @@ import {
   FOCUS_RING_CLIPPED_OFFSET,
   FOCUS_RING_MIN_CONTRAST,
   ensureFocusVisibleRing,
+  Paragraph,
 } from "@multiplatform.one/theme";
-import { Button as TamaguiButton, Paragraph, XStack, YStack, useTheme } from "tamagui";
+import { Button as TamaguiButton, XStack, YStack, useTheme } from "tamagui";
 import { Button, type ButtonProps } from "./index";
 import { useState } from "react";
 

package/src/Button/index.tsx

@@ -1,5 +1,5 @@
 import { IconSlot } from "@multiplatform.one/theme";
-import { transitionProps } from "@multiplatform.one/theme";
+import { transitionProps, SizableText } from "@multiplatform.one/theme";
 import { pressSlopProps } from "../shared/pressSlopProps";
 import {
   Children,
@@ -37,7 +37,7 @@ import { useFormField } from "../shared/utils";
 import {
   Button as TamaguiButton,
   type ButtonProps as TamaguiButtonProps,
-  SizableText,
+  SizableText as TamaguiSizableText,
   View,
   XStack,
   YStack,
@@ -339,6 +339,14 @@ export interface ButtonProps extends Omit<
    * `control`.
    */
   recipeFamily?: RecipeFamilyName;
+  /**
+   * A chromeless button at a container edge (a toolbar's back button) pulls
+   * out by its own horizontal padding, so its glyph sits on the content
+   * gutter while the press target reaches into the margin (MUI IconButton
+   * `edge`, iOS / Material top-bar navigation icon). No effect on a button
+   * that paints a frame: the frame is what aligns there.
+   */
+  edge?: "start" | "end";
 }
 
 export function Button({
@@ -363,6 +371,7 @@ export function Button({
   nested = false,
   circular,
   chromeless,
+  edge,
   verb,
   noun,
   actionRole,
@@ -444,6 +453,14 @@ export function Button({
   const touch = useTouchSurface();
   const recipe = resolveButtonSizeRecipe(resolvedSize, recipeFamily, touch);
   const padX = recipe.paddingHorizontal;
+  // `edge` cancels the padding the frame actually paints: an escaped number,
+  // a passed-through space token, or the recipe's.
+  const edgePull =
+    sizeRecipeEscaped && typeof paddingHorizontalProp === "number"
+      ? -paddingHorizontalProp
+      : typeof paddingHorizontalProp === "string" && paddingHorizontalProp.startsWith("$")
+        ? (`$-${paddingHorizontalProp.slice(1)}` as "$4")
+        : -padX;
   const radiusToken = knobProps.borderRadius.borderRadius;
   const radiusStop: SizeRecipeRadiusStop | undefined =
     typeof radiusToken === "string"
@@ -523,6 +540,10 @@ export function Button({
   const isLow = knobProps.textAccent === "low";
   const isMedium = knobProps.textAccent === "medium";
   const resolvedBorderWidth = knobProps.borderRadius.borderWidth;
+  // Tamagui applies props in key order, and a JSX prop that repeats a spread
+  // key keeps the spread's slot: left in, the fragment's `borderColor` would
+  // sit before `outlined`, whose `$borderColor` then beats the LC-148 hairline.
+  const { borderColor: knobBorderColor, ...radiusFragment } = knobProps.borderRadius;
   const [hovering, setHovering] = useState(false);
   const [pressing, setPressing] = useState(false);
   const handlePressIn = useCallback(() => {
@@ -574,7 +595,7 @@ export function Button({
     : recipe.iconSize;
 
   const renderLabelText = (label: string | number, key?: string) => (
-    <SizableText
+    <TamaguiSizableText
       key={key}
       userSelect="none"
       flexGrow={0}
@@ -602,7 +623,7 @@ export function Button({
       {...transitionProps(knobProps.motion.control)}
     >
       {label}
-    </SizableText>
+    </TamaguiSizableText>
   );
   // LC-82 TEXT-RIDES-TEXT: wrap ALL bare string/number children — the
   // array path (coalesced runs), not just the singleton case.
@@ -734,16 +755,11 @@ export function Button({
       aria-busy={loading || undefined}
       opacity={1}
       {...transitionProps(knobProps.motion.control, ["borderRadius", "borderWidth"])}
-      {...knobProps.borderRadius}
+      {...radiusFragment}
       {...(radiusStop === "medium" || radiusStop == null
         ? { borderRadius: paintedRadius.radius }
         : undefined)}
       borderWidth={resolvedBorderWidth}
-      // MPO-19 X3: the borderRadius knob fragment carries `$borderColor` for
-      // bordered chrome, but a filled Button's edge is transparent by contract
-      // (reference §6.1) — same-width invisible border keeps filled and
-      // outlined boxes identical without the filled one showing a ring.
-      borderColor={outlined ? "$borderColor" : "transparent"}
       size={resolvedSize}
       {...(chromeless ? undefined : knobProps.elevationChrome)}
       elevation={knobProps.elevation}
@@ -753,6 +769,11 @@ export function Button({
       // knob-driven caller passes `knobProps.outlined`, which is a real
       // boolean, so this fired on most screens.
       outlined={outlined || undefined}
+      // MPO-19 X3: the borderRadius knob fragment carries `$borderColor` for
+      // bordered chrome, but a filled Button's edge is transparent by contract
+      // (reference §6.1) — same-width invisible border keeps filled and
+      // outlined boxes identical without the filled one showing a ring.
+      borderColor={outlined ? knobBorderColor : "transparent"}
       circular={!nested && isCircular ? true : undefined}
       chromeless={selectedFill ? false : chromeless}
       selected={selectedFill || undefined}
@@ -767,6 +788,11 @@ export function Button({
             minHeight: visualPx,
           }
         : undefined)}
+      {...(edge && chromeless && !selectedFill && !isCircular
+        ? edge === "start"
+          ? { marginInlineStart: edgePull }
+          : { marginInlineEnd: edgePull }
+        : undefined)}
       {...(restFill ? { backgroundColor: restFill } : undefined)}
       // Solid-intent sub-themes carry the on-fill foreground as `$color`
       // (LC-05); outlined frames sit on the page, so re-anchor inherited
@@ -940,4 +966,4 @@ export function Button({
 }
 
 Button.Icon = TamaguiButton.Icon;
-Button.Text = SizableText;
+Button.Text = TamaguiSizableText;

package/src/Chip/Chip.stories.tsx

@@ -2,8 +2,9 @@ import { action } from "@multiplatform.one/storybook";
 import { CheckIcon, LightningIcon, TagIcon } from "@phosphor-icons/react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { Text, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import { Chip, type ChipColor, type ChipSize, type ChipVariantProp } from "./index";
+import { Text } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof Chip> = {
   title: "Forms/Chip",

package/src/ContextualSaveBar/ContextualSaveBar.stories.tsx

@@ -1,7 +1,7 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { SizableText, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../Button";
 import { Checkbox } from "../fields/Checkbox";
 import { Input } from "../fields/Input";
@@ -9,6 +9,7 @@ import { RadioGroup } from "../fields/RadioGroup";
 import { Switch } from "../fields/Switch";
 import { Form } from "../Form";
 import { ContextualSaveBar } from "./index";
+import { SizableText } from "@multiplatform.one/theme";
 
 const fields = (
   <YStack gap="$4" width="100%" maxWidth={640} padding="$4" minHeight={360}>

package/src/ContextualSaveBar/UnsavedChangesDialog.stories.tsx

@@ -1,9 +1,10 @@
 import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useState } from "react";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../Button";
 import { UnsavedChangesDialog } from "./UnsavedChangesDialog";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof UnsavedChangesDialog> = {
   title: "Forms/ContextualSaveBar/UnsavedChangesDialog",

package/src/ControlGroup/ControlGroup.stories.tsx

@@ -1,9 +1,10 @@
 import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "../Button";
 import { Input } from "../InputParts";
 import { ControlGroup } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof ControlGroup> = {
   title: "Forms/ControlGroup",

package/src/DescriptionList/DescriptionList.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { FormGrid } from "../FormGrid";
 import { FormSection, FormSectionStack } from "../FormSection";
 import { DescriptionList, type DescriptionListItem } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof DescriptionList> = {
   title: "Forms/DescriptionList",

package/src/ErrorSummary.stories.tsx

@@ -2,13 +2,14 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Paragraph, YStack } from "tamagui";
+import { YStack } from "tamagui";
 import { Button } from "./Button";
 import { ErrorSummary, collectFormFieldErrors } from "./ErrorSummary";
 import { FieldLayout } from "./fieldLayout";
 import { Form } from "./Form";
 import { FormSection } from "./FormSection";
 import { Input as InputParts } from "./InputParts";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof ErrorSummary> = {
   title: "Forms/ErrorSummary",

package/src/ErrorSummary.tsx

@@ -1,7 +1,7 @@
-import { FOCUS_RING_HALO_OFFSET, useResolvedKnobs } from "@multiplatform.one/theme";
+import { FOCUS_RING_HALO_OFFSET, useResolvedKnobs, H4 } from "@multiplatform.one/theme";
 import { WarningCircleIcon } from "@phosphor-icons/react";
 import { type ReactNode, useEffect, useId, useRef } from "react";
-import { Anchor, H4, Paragraph, YStack, isWeb } from "tamagui";
+import { Anchor, Paragraph, YStack, isWeb } from "tamagui";
 import { formCommonColors } from "./shared/colorRamps";
 import { t } from "./shared/t";
 import { warnBannedErrorWords as warnBannedErrorWordsShared } from "./shared/devWarn";

package/src/FieldDisplay/FieldDisplay.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Paragraph, XStack, YStack } from "tamagui";
+import { XStack, YStack } from "tamagui";
 import type { FieldDisplayType } from "./index";
 import { FieldDisplay } from "./index";
+import { Paragraph } from "@multiplatform.one/theme";
 
 const meta: Meta<typeof FieldDisplay> = {
   title: "Forms/FieldDisplay",

package/src/FieldLayout.stories.tsx

@@ -2,8 +2,8 @@ import { action } from "@multiplatform.one/storybook";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
-import { Preset } from "@multiplatform.one/theme";
-import { Paragraph, YStack, XStack } from "tamagui";
+import { Preset, Paragraph } from "@multiplatform.one/theme";
+import { YStack, XStack } from "tamagui";
 import { Button } from "./Button";
 import { Form } from "./Form";
 import { Field, FieldLayout } from "./fieldLayout";

package/src/FloatingPanel/FloatingPanel.coverTrigger.spec.tsx

@@ -0,0 +1,184 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, waitFor, within } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { useState } from "react";
+import { Preset, defaultPreset, heroPreset, boldPreset } from "@multiplatform.one/theme";
+import { Button } from "../Button";
+import { FloatingPanel } from "./index";
+
+const triggerBounds = {
+  x: 80,
+  y: 240,
+  top: 240,
+  bottom: 280,
+  left: 80,
+  right: 200,
+  width: 120,
+  height: 40,
+};
+
+function measure(bounds = triggerBounds, panelWidth = 240, panelHeight = 180) {
+  const original = HTMLElement.prototype.getBoundingClientRect;
+  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+    function (this: HTMLElement) {
+      if (this.hasAttribute("data-fp-reference")) return { ...bounds, toJSON: () => ({}) };
+      return original.call(this);
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "offsetWidth", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return this.hasAttribute("data-fp-panel") ? panelWidth : 0;
+    },
+  );
+  vi.spyOn(HTMLElement.prototype, "scrollHeight", "get").mockImplementation(
+    function (this: HTMLElement) {
+      return this.hasAttribute("data-fp-panel") ? panelHeight : 0;
+    },
+  );
+}
+
+function Harness({ scrollable }: { scrollable?: boolean }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <FloatingPanel
+      open={open}
+      onOpenChange={setOpen}
+      anchorMode="cover-trigger"
+      scrollable={scrollable}
+      trigger={
+        <Button aria-label="Timeline filters">
+          <span aria-hidden="true">◇</span>Filters
+        </Button>
+      }
+    >
+      <Button>Assigned to me</Button>
+      <Button>All entries</Button>
+    </FloatingPanel>
+  );
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  document.documentElement.removeAttribute("dir");
+});
+
+describe("LC-112 exact cover-trigger placement", () => {
+  it("keeps an explicitly scrollable panel anchored when a full action row fits", async () => {
+    measure(triggerBounds, 240, 2000);
+    const result = renderWithProviders(<Harness scrollable />);
+    fireEvent.click(result.getByRole("button", { name: "Timeline filters" }), { detail: 0 });
+    const panel = await result.findByTestId("floating-panel-viewport");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+    expect(panel.style.top).toBe("240px");
+    const echo = within(panel).getByRole("button", { name: "Timeline filters" });
+    expect(echo.style.position).toBe("sticky");
+  });
+  it("keeps a menu floating when its visible trigger sits flush with the viewport", async () => {
+    measure({ ...triggerBounds, x: 0, left: 0, right: 120, y: 0, top: 0, bottom: 40 });
+    const result = renderWithProviders(<Harness />);
+    fireEvent.click(result.getByRole("button", { name: "Timeline filters" }), { detail: 0 });
+    const panel = await result.findByTestId("floating-panel-viewport");
+    expect(panel.style.top).toBe("0px");
+    expect(result.queryByTestId("floating-panel-sheet")).toBeNull();
+  });
+  for (const [name, preset] of Object.entries({
+    Default: defaultPreset,
+    Hero: heroPreset,
+    Bold: boldPreset,
+  })) {
+    for (const theme of ["light", "dark"] as const) {
+      it(`preserves the measured trigger row in ${name} ${theme}`, async () => {
+        measure();
+        const result = renderWithProviders(
+          <Preset overrides={preset.knobs} theme={theme}>
+            <Harness />
+          </Preset>,
+        );
+        fireEvent.click(result.getByRole("button", { name: "Timeline filters" }), { detail: 0 });
+        const panel = await result.findByTestId("floating-panel-viewport");
+        const echo = within(panel).getByRole("button", { name: "Timeline filters" });
+        expect(echo.style.width).toBe("120px");
+        expect(echo.style.height).toBe("40px");
+        expect(echo.getAttribute("aria-expanded")).toBe("true");
+        expect(echo.querySelector("[id]")).toBeNull();
+      });
+    }
+  }
+
+  it("keeps the measured first row over its trigger, exposes its name, and closes on activation", async () => {
+    measure();
+    const result = renderWithProviders(<Harness />);
+    const trigger = result.getByRole("button", { name: "Timeline filters" });
+    fireEvent.click(trigger, { detail: 0 });
+    const panel = await result.findByTestId("floating-panel-viewport");
+    await waitFor(() => expect(panel.style.top).toBe("240px"));
+    expect(panel.style.left).toBe("80px");
+    const echo = within(panel).getByRole("button", { name: "Timeline filters" });
+    expect(echo.style.width).toBe("120px");
+    expect(echo.style.height).toBe("40px");
+    expect(echo.textContent).toContain("◇");
+    await waitFor(() =>
+      expect(document.activeElement).toBe(result.getByRole("button", { name: "Assigned to me" })),
+    );
+    fireEvent.click(echo);
+    await waitFor(() => expect(result.queryByTestId("floating-panel-viewport")).toBeNull());
+  });
+
+  it("uses a bottom sheet at the bottom edge instead of moving the first row upward", async () => {
+    measure({ ...triggerBounds, y: 730, top: 730, bottom: 770 });
+    const result = renderWithProviders(<Harness />);
+    const trigger = result.getByRole("button", { name: "Timeline filters" });
+    trigger.focus();
+    const parentChildren = trigger.closest("[data-fp-reference]")?.parentElement?.children.length;
+    fireEvent.click(trigger, { detail: 0 });
+    await result.findByTestId("floating-panel-sheet");
+    expect(result.queryByTestId("floating-panel-viewport")).toBeNull();
+    expect(result.getByRole("button", { name: "Assigned to me" })).toBeTruthy();
+    expect(result.getByRole("button", { name: "Timeline filters" })).toBe(trigger);
+    expect(trigger.closest("[data-fp-reference]")?.parentElement?.children.length).toBe(
+      parentChildren,
+    );
+    fireEvent.keyDown(document, { key: "Escape" });
+    await waitFor(() => expect(document.activeElement).toBe(trigger));
+  });
+
+  it("closes the collision sheet on Escape while the trigger's tooltip is open", async () => {
+    measure({ ...triggerBounds, y: 730, top: 730, bottom: 770 });
+    const tooltipEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") event.stopPropagation();
+    };
+    document.addEventListener("keydown", tooltipEscape);
+    try {
+      const result = renderWithProviders(<Harness />);
+      const trigger = result.getByRole("button", { name: "Timeline filters" });
+      fireEvent.click(trigger, { detail: 0 });
+      await result.findByTestId("floating-panel-sheet");
+      fireEvent.keyDown(trigger, { key: "Escape" });
+      await waitFor(() => expect(result.queryByTestId("floating-panel-sheet")).toBeNull());
+    } finally {
+      document.removeEventListener("keydown", tooltipEscape);
+    }
+  });
+
+  it("uses a bottom sheet for horizontal collisions instead of shifting the trigger row", async () => {
+    measure({ ...triggerBounds, x: 900, left: 900, right: 1020 });
+    const result = renderWithProviders(<Harness />);
+    fireEvent.click(result.getByRole("button", { name: "Timeline filters" }), { detail: 0 });
+    await result.findByTestId("floating-panel-sheet");
+    expect(result.queryByTestId("floating-panel-viewport")).toBeNull();
+  });
+
+  it("aligns the trigger row at the logical start edge in RTL", async () => {
+    document.documentElement.dir = "rtl";
+    measure({ ...triggerBounds, x: 400, left: 400, right: 520 });
+    const result = renderWithProviders(<Harness />);
+    (result.container.querySelector("[data-fp-reference]") as HTMLElement).style.direction = "rtl";
+    fireEvent.click(result.getByRole("button", { name: "Timeline filters" }), { detail: 0 });
+    const panel = await result.findByTestId("floating-panel-viewport");
+    await waitFor(() => expect(panel.style.left).toBe("280px"));
+    expect(panel.style.transformOrigin).toBe("top right");
+    const echo = within(panel).getByRole("button", { name: "Timeline filters" });
+    expect(echo.style.alignSelf).toBe("flex-start");
+    expect(panel.dir).toBe("rtl");
+  });
+});

package/src/FloatingPanel/FloatingPanel.spec.tsx

@@ -4,7 +4,7 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { useState, type ReactNode } from "react";
 import { Text } from "tamagui";
 import { Button } from "../Button";
-import { FloatingPanel, panelViewportPadding } from "./index";
+import { FloatingPanel } from "./index";
 
 /**
  * The trigger contract, and why every case fires a REAL press rather than
@@ -436,9 +436,7 @@ describe("FloatingPanel nesting (MPO-221)", () => {
     await waitFor(() => expect(floatingViewport()).not.toBeNull());
     const viewport = floatingViewport() as HTMLElement;
     expect(scroller.contains(viewport)).toBe(false);
-    // jsdom puts everything at viewport y 0, so the panel pins to the
-    // viewport padding, now in viewport coordinates with no scroller offset.
-    await waitFor(() => expect(viewport.style.top).toBe(`${panelViewportPadding}px`));
+    await waitFor(() => expect(viewport.style.top).toBe("0px"));
   });
 
   it("offsets its top by a transformed dialog it stays inside", async () => {
@@ -459,7 +457,7 @@ describe("FloatingPanel nesting (MPO-221)", () => {
     expect(dialog.contains(viewport)).toBe(true);
     // Laid out against the dialog, whose content is scrolled 40px, its css
     // top must be 40px lower to land at the same viewport y.
-    await waitFor(() => expect(viewport.style.top).toBe(`${panelViewportPadding + 40}px`));
+    await waitFor(() => expect(viewport.style.top).toBe("40px"));
   });
 });
 

package/src/FloatingPanel/FloatingPanel.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { Preset } from "@multiplatform.one/theme";
-import { H4, Paragraph, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
+import { Preset, Paragraph, H4, Text } from "@multiplatform.one/theme";
+import { ScrollView, Separator, View, XStack, YStack } from "tamagui";
 import { FloatingPanel } from "./index";
 import { Button } from "../Button";
 import { Select } from "../fields/Select";
@@ -52,6 +52,32 @@ export const Basic: Story = {
   },
 };
 
+export const CoverTriggerEdges: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <YStack
+        height="100%"
+        minHeight="$20"
+        padding="$4"
+        justifyContent="flex-end"
+        alignItems="flex-end"
+      >
+        <FloatingPanel
+          open={open}
+          onOpenChange={setOpen}
+          anchorMode="cover-trigger"
+          triggerSizing="content"
+          trigger={<Button>Edge menu</Button>}
+        >
+          <Button onPress={() => setOpen(false)}>First action</Button>
+          <Button onPress={() => setOpen(false)}>Second action</Button>
+        </FloatingPanel>
+      </YStack>
+    );
+  },
+};
+
 export const ScrollableContent: Story = {
   render: () => {
     const [open, setOpen] = useState(false);