@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/ContextualSaveBar/ContextualSaveBar.spec.tsx

@@ -315,7 +315,7 @@ describe("ContextualSaveBar", () => {
 
   it("CONTAINER-CAP on the top pair only; bottom pair pinned 0 (bottom-docked sheet)", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ borderRadius: "full", space: "medium" }}>
+      <Preset overrides={{ borderRadius: "full" }}>
         <Form formOptions={{ defaultValues: { name: "x" } }}>
           <Input name="name" label="Name" />
           <ContextualSaveBar forceVisible />
@@ -326,7 +326,7 @@ describe("ContextualSaveBar", () => {
     expect(bar).toBeTruthy();
     expect(bar?.getAttribute("data-mp-savebar-radius-class")).toBe("CONTAINER-CAP");
     expect(bar?.getAttribute("data-mp-savebar-dock")).toBe("bottom");
-    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("18");
+    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("16");
     expect(bar?.getAttribute("data-mp-savebar-bottom-radius")).toBe("0");
     const cls = String(bar?.className ?? "");
     expect(cls).not.toMatch(/t-radius-12/);
@@ -335,9 +335,9 @@ describe("ContextualSaveBar", () => {
     expect(cs?.borderBottomRightRadius === "0px" || cs?.borderBottomRightRadius === "0").toBe(true);
   });
 
-  it("large under space=small caps the top pair at pad 13; bottoms stay 0", () => {
+  it("large caps at the 16px panelPadding; bottoms stay 0", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ borderRadius: "large", space: "small" }}>
+      <Preset overrides={{ borderRadius: "large" }}>
         <Form formOptions={{ defaultValues: { name: "x" } }}>
           <Input name="name" label="Name" />
           <ContextualSaveBar forceVisible />
@@ -345,7 +345,7 @@ describe("ContextualSaveBar", () => {
       </Preset>,
     );
     const bar = savebar(result.container);
-    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("13");
+    expect(bar?.getAttribute("data-mp-savebar-top-radius")).toBe("16");
     expect(bar?.getAttribute("data-mp-savebar-bottom-radius")).toBe("0");
   });
 

package/src/ContextualSaveBar/UnsavedChangesDialog.tsx

@@ -1,3 +1,4 @@
+import { DialogContent, DialogOverlay } from "@multiplatform.one/theme";
 import {
   ensureKeyboardModalityTracking,
   useResolvedKnobs,
@@ -8,7 +9,7 @@ import { useEffect } from "react";
 import { Dialog, Paragraph, XStack } from "tamagui";
 import { Button } from "../Button";
 import { formCommonColors } from "../shared/colorRamps";
-import { DialogShowFocus, useReturnFocusOnClose } from "../shared/focusManagement";
+import { useReturnFocusOnClose } from "../shared/focusManagement";
 import { t } from "../shared/t";
 
 export interface UnsavedChangesDialogProps {
@@ -67,31 +68,14 @@ export function UnsavedChangesDialog({
   return (
     <Dialog modal open={open} onOpenChange={handleOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay
-          key="overlay"
-          backgroundColor="$background"
-          opacity={0.5}
-          transition={knobProps.transition}
-          enterStyle={knobProps.transition ? { opacity: 0 } : undefined}
-          exitStyle={knobProps.transition ? { opacity: 0 } : undefined}
-        />
-        <Dialog.Content
+        <DialogOverlay key="overlay" />
+        <DialogContent
           key="content"
           role="alertdialog"
           tabIndex={-1}
           width="90%"
           maxWidth={440}
-          padding="$4"
           gap="$4"
-          {...knobProps.elevatedSurface}
-          elevate={false}
-          backgroundColor="$background"
-          borderColor="$borderColor"
-          borderWidth={1}
-          {...knobProps.containerRadius}
-          outlineWidth={0}
-          focusStyle={{ outlineWidth: 0 }}
-          focusVisibleStyle={{ outlineWidth: 0 }}
           data-mp-savebar-guard=""
           onPointerDownOutside={(e) => e.preventDefault()}
           onInteractOutside={(e) => e.preventDefault()}
@@ -126,8 +110,7 @@ export function UnsavedChangesDialog({
               {t("Discard changes")}
             </Button>
           </XStack>
-          <DialogShowFocus onOpenAutoFocus={focusKeepEditing} />
-        </Dialog.Content>
+        </DialogContent>
       </Dialog.Portal>
     </Dialog>
   );

package/src/ContextualSaveBar/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import { useResolvedKnobs, warnCancelDisabled, type KnobProps } from "@multiplatform.one/theme";
 import { Store, useStore } from "@tanstack/react-store";
 import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
@@ -227,7 +228,7 @@ export function ContextualSaveBar({
   const elevationProps = getElevationWrapperProps(knobProps, elevation);
   const { className: smoothClass, rest: smoothRest } = containerRadiusRest(knobProps);
   const topRadius = knobProps.containerRadius.borderRadius;
-  const transition = knobProps.transition;
+  const transition = knobProps.motion.overlay.transition;
 
   return (
     <>
@@ -262,7 +263,7 @@ export function ContextualSaveBar({
             {...smoothRest}
             className={smoothClass}
             {...knobProps.gap}
-            transition={transition}
+            {...transitionProps(knobProps.motion.overlay)}
             enterStyle={transition ? { y: 12, opacity: 0 } : undefined}
             exitStyle={transition ? { y: 12, opacity: 0 } : undefined}
             {...elevationProps}

package/src/ControlGroup/index.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import {
   Children,
   isValidElement,
@@ -16,7 +17,7 @@ import {
   hairline,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import { FocusContext, getInputFrameTransitionProps, InputContext } from "../InputParts";
+import { FocusContext, InputContext } from "../InputParts";
 import { formCommonColors, formControlColors, formInputColors } from "../shared/colorRamps";
 import { getElevationWrapperProps } from "../shared/utils";
 import { ControlGroupCtx } from "../shared/groupContext";
@@ -232,9 +233,13 @@ function ControlGroupImpl({ children, orientation = "horizontal", ...props }: Co
           {...knobProps.inputSurface}
           {...knobProps.borderRadius}
           {...elevationWrapperProps}
-          {...getInputFrameTransitionProps(
-            typeof knobProps.transition === "string" ? knobProps.transition : undefined,
-          )}
+          {...transitionProps(knobProps.motion.control, [
+            "borderRadius",
+            "borderWidth",
+            "boxShadow",
+            "shadowOpacity",
+            "shadowRadius",
+          ])}
           {...(control.focusKnobProps
             ? {
                 focusStyle: {

package/src/DescriptionList/DescriptionList.spec.tsx

@@ -243,15 +243,23 @@ describe("DescriptionList", () => {
     expect(list(result.container)?.getAttribute("data-stacked")).toBe("true");
   });
 
-  it("compact density marks the list", () => {
+  it("a size token below $true takes the tight rhythm", () => {
     const result = renderWithProviders(
       <DescriptionList
-        compact
+        size="$3"
         placement="top"
         items={[{ term: "A", field: "input", value: "1" }]}
       />,
     );
-    expect(list(result.container)?.getAttribute("data-compact")).toBe("true");
+    expect(list(result.container)?.getAttribute("data-rhythm")).toBe("tight");
+    expect(list(result.container)?.getAttribute("data-size-token")).toBe("$3");
+  });
+
+  it("the default token keeps the regular rhythm", () => {
+    const result = renderWithProviders(
+      <DescriptionList placement="top" items={[{ term: "A", field: "input", value: "1" }]} />,
+    );
+    expect(list(result.container)?.getAttribute("data-rhythm")).toBe("regular");
   });
 
   it("side rows share the list stacked flag (native host measures via onLayout)", () => {

package/src/DescriptionList/DescriptionList.stories.tsx

@@ -10,13 +10,11 @@ const meta: Meta<typeof DescriptionList> = {
   parameters: { status: { type: "stable" } },
   argTypes: {
     placement: { control: "radio", options: ["side", "top"] },
-    compact: { control: "boolean" },
     framed: { control: "boolean" },
     quiet: { control: "boolean" },
   },
   args: {
     placement: "side",
-    compact: false,
     framed: false,
     quiet: false,
   },
@@ -244,5 +242,5 @@ export const Slots: Story = {
 };
 
 export const Compact: Story = {
-  render: () => <DescriptionList compact placement="side" items={HOST.slice(0, 3)} />,
+  render: () => <DescriptionList size="$3" placement="side" items={HOST.slice(0, 3)} />,
 };

package/src/DescriptionList/index.tsx

@@ -25,8 +25,8 @@ import {
   type ReactNode,
   type Ref,
 } from "react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { Text, View, XStack, YStack, isWeb } from "tamagui";
+import { compareSizeTokens, useResolvedKnobs } from "@multiplatform.one/theme";
+import { type SizeTokens, Text, View, XStack, YStack, isWeb } from "tamagui";
 import { Button } from "../Button";
 import { FORM_GRID_COLLAPSE_WIDTH } from "../FormGrid";
 import { LABEL_COLUMN_MAX_CH, LABEL_COLUMN_WIDTH } from "../fieldDefaults";
@@ -67,8 +67,6 @@ export interface DescriptionListProps {
    * not apply to a read face. Explicit prop ejects.
    */
   placement?: DescriptionListPlacement;
-  /** Nested scale (LC-73 / LC-76) — space one stop; type and the 32 action stay. */
-  compact?: boolean;
   /** Card frame (paints, so it earns the inset — LC-39). */
   framed?: boolean;
   /** Same 1px `$borderColor` rule at opacity 0.5 — never a lighter colour. */
@@ -80,6 +78,11 @@ export interface DescriptionListProps {
   maxWidth?: number | "fluid";
   /** Eject the shared term column track. Default {@link LABEL_COLUMN_WIDTH}. */
   labelColumnWidth?: string;
+  /**
+   * Row size token (Tamagui's own `size`). Below `$true` the rows take the
+   * tight rhythm (shorter rows, `gapSm` columns).
+   */
+  size?: SizeTokens;
   testID?: string;
 }
 
@@ -96,14 +99,14 @@ function labelColumnGridTrack(width: string): string {
   return width;
 }
 
-function listItemRhythm(density: string) {
-  const compact = density === "compact";
+function listItemRhythm(sizeToken: string) {
+  const tight = compareSizeTokens(sizeToken, "$true") < 0;
   return {
-    compact,
-    padV: compact ? "$2" : "$2.5",
-    columnGap: compact ? "$2" : "$3",
-    stackGap: compact ? 4 : "$2",
-    minHeight: compact ? 39 : 45,
+    tight,
+    padV: tight ? "$2" : "$2.5",
+    columnGap: tight ? "$2" : "$3",
+    stackGap: tight ? 4 : "$2",
+    minHeight: tight ? 39 : 45,
   } as const;
 }
 
@@ -315,8 +318,7 @@ function DescriptionListWeb({
   rhythm,
   quiet,
   labelColumnWidth,
-  density,
-  size,
+  sizeToken,
   placement,
   framed,
 }: {
@@ -326,8 +328,7 @@ function DescriptionListWeb({
   rhythm: ReturnType<typeof listItemRhythm>;
   quiet?: boolean;
   labelColumnWidth: string;
-  density: string;
-  size: string;
+  sizeToken: string;
   placement: DescriptionListPlacement;
   framed: boolean;
 }) {
@@ -360,13 +361,12 @@ function DescriptionListWeb({
       data-mpo-description-list=""
       data-placement={placement}
       data-stacked={stacked ? "true" : "false"}
-      data-compact={rhythm.compact ? "true" : "false"}
+      data-rhythm={rhythm.tight ? "tight" : "regular"}
       data-framed={framed ? "true" : "false"}
       data-quiet={quiet ? "true" : "false"}
       data-has-action={hasAction ? "true" : "false"}
       data-label-column-width={labelColumnWidth}
-      data-density={density}
-      data-size={size}
+      data-size-token={sizeToken}
       style={style}
     >
       {rows.map((row, index) => (
@@ -438,16 +438,16 @@ export function DescriptionList({
   items,
   children,
   placement: placementProp,
-  compact,
   framed = false,
   quiet = false,
   maxWidth = formReadableMaxWidth,
   labelColumnWidth = LABEL_COLUMN_WIDTH,
+  size,
   testID,
 }: DescriptionListProps) {
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  const { knobProps } = useResolvedKnobs({ size });
   const placement = resolvePlacement(placementProp, knobProps.fieldLabelPlacement);
-  const rhythm = listItemRhythm(knobProps.density);
+  const rhythm = listItemRhythm(knobProps.sizeToken);
   const rows = useMemo(() => {
     const fromItems = (items ?? []).filter((row) => !row.hidden);
     if (fromItems.length) return fromItems;
@@ -468,8 +468,7 @@ export function DescriptionList({
           rhythm={rhythm}
           quiet={quiet}
           labelColumnWidth={labelColumnWidth}
-          density={knobProps.density}
-          size={knobProps.size}
+          sizeToken={knobProps.sizeToken}
           placement={placement}
           framed={framed}
         />
@@ -478,13 +477,12 @@ export function DescriptionList({
           data-mpo-description-list=""
           data-placement={placement}
           data-stacked={stacked ? "true" : "false"}
-          data-compact={rhythm.compact ? "true" : "false"}
+          data-rhythm={rhythm.tight ? "tight" : "regular"}
           data-framed={framed ? "true" : "false"}
           data-quiet={quiet ? "true" : "false"}
           data-has-action={hasAction ? "true" : "false"}
           data-label-column-width={labelColumnWidth}
-          data-density={knobProps.density}
-          data-size={knobProps.size}
+          data-size-token={knobProps.sizeToken}
           width="100%"
           minWidth={0}
         >

package/src/FieldDisplay/index.tsx

@@ -17,7 +17,12 @@
  */
 
 import { CheckIcon, FileIcon, ImageSquareIcon, StarIcon } from "@phosphor-icons/react";
-import { useReadableTextOn, useResolvedKnobs, type KnobProps } from "@multiplatform.one/theme";
+import {
+  sizeKeyBelow,
+  useReadableTextOn,
+  useResolvedKnobs,
+  type KnobProps,
+} from "@multiplatform.one/theme";
 import { getSize } from "@tamagui/get-token";
 import { createContext, useContext, useMemo, useState, type ReactNode } from "react";
 import type { SizeTokens } from "tamagui";
@@ -140,10 +145,9 @@ const INTENT_CHIP: Record<string, ChipColor> = {
   info: "blue",
 };
 
-function chipSizeFor(size: string): ChipSize {
-  if (size === "small") return "$2";
-  if (size === "large") return "$4";
-  return "$3";
+/** Display chips draw one `$size` key under the ambient control token. */
+function chipSizeFor(sizeToken: string): ChipSize {
+  return sizeKeyBelow(sizeToken) as ChipSize;
 }
 
 function resolveChipColor(
@@ -211,8 +215,7 @@ function DisplayFrame({ field, children }: { field: FieldDisplayType; children:
     <XStack
       data-component="FieldDisplay"
       data-field={field}
-      data-space={knobProps.space}
-      data-size={knobProps.size}
+      data-size-token={knobProps.sizeToken}
       alignItems="center"
       minWidth={0}
       width="100%"
@@ -394,7 +397,7 @@ function ChoiceDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<
   if (value == null || value === "") return <TextCell>{EMPTY}</TextCell>;
   const options: Array<{ label: string; value: any; color?: string; intent?: string }> =
     fieldProps?.options ?? [];
-  const size = chipSizeFor(knobProps.size);
+  const size = chipSizeFor(knobProps.sizeToken);
   const values = Array.isArray(value) ? value : [value];
   return (
     <XStack alignItems="center" flexWrap="wrap" minWidth={0} {...knobProps.gap}>
@@ -663,7 +666,7 @@ function RatingDisplay({ value, fieldProps }: { value: any; fieldProps?: Record<
   if (Number.isNaN(num)) return <TextCell>{asText(value)}</TextCell>;
   const maxStars = typeof fieldProps?.maxStars === "number" ? fieldProps.maxStars : 5;
   const filled = num > 1 ? Math.round(Math.min(maxStars, num)) : Math.round(num * maxStars);
-  const filledColor = theme.accentBackground?.val ?? theme.color10?.val;
+  const filledColor = theme[formSelectedColors.mark.slice(1)]?.val ?? theme.color10?.val;
   const emptyColor = theme.color8?.val;
   return (
     <XStack

package/src/FieldGroup.spec.tsx

@@ -2,7 +2,7 @@
  * @vitest-environment jsdom
  */
 
-import { Preset } from "@multiplatform.one/theme";
+import { Surface } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
@@ -36,28 +36,30 @@ describe("FieldGroup design-law (MPO-60)", () => {
     expect(["400", "normal"]).toContain(String(weight));
   });
 
-  it("field gap follows space, not sizeToken (density≠size)", () => {
+  it("field gap is the within-group role at any size token, never sizeToken", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ size: "large", space: "small" }}>
+      <Surface size="$5">
         <FieldGroup legend="Billing">
           <div>card</div>
         </FieldGroup>
-      </Preset>,
+      </Surface>,
     );
     const group = result.container.querySelector("[data-mpo-field-group]");
-    expect(group?.getAttribute("data-field-gap")).toBe("$2");
-    expect(group?.getAttribute("data-size")).toBe("large");
+    expect(group?.getAttribute("data-field-gap")).toBe("$3");
+    expect(group?.getAttribute("data-size-token")).toBe("$5");
   });
 
-  it("compact nested scale steps density without reading sizeToken as gap", () => {
+  it("has no compact switch: a smaller Surface changes the token, not the gap", () => {
     const result = renderWithProviders(
-      <FieldGroup legend="Compact" compact>
-        <div>field</div>
-      </FieldGroup>,
+      <Surface size="$3">
+        <FieldGroup legend="Small">
+          <div>field</div>
+        </FieldGroup>
+      </Surface>,
     );
     const group = result.container.querySelector("[data-mpo-field-group]");
-    expect(group?.getAttribute("data-density")).toBe("compact");
-    expect(group?.getAttribute("data-size")).toBe("medium");
-    expect(group?.getAttribute("data-field-gap")).toBe("$2");
+    expect(group?.getAttribute("data-size-token")).toBe("$3");
+    expect(group?.getAttribute("data-field-gap")).toBe("$3");
+    expect(group?.hasAttribute("data-density")).toBe(false);
   });
 });

package/src/FieldGroup.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { Preset, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { Text, YStack, isWeb } from "tamagui";
 import { FormGrid, type FormGridColumns } from "./FormGrid";
 
@@ -13,44 +13,40 @@ export interface FieldGroupProps {
    */
   columns?: FormGridColumns;
   /**
-   * Gap between fields. Defaults to the space recipe (`knobProps.gap`).
-   * Density/space, never `sizeToken`.
+   * Gap between fields. Defaults to the within-group role (`knobProps.gap`),
+   * never `sizeToken`.
    */
   gap?: number | string;
-  /** Nested scale (LC-73). Omit to inherit the nearest Preset density. */
-  compact?: boolean;
 }
 
 /**
  * Groups related fields with a legend (fieldset on web).
  *
  * Polaris FormLayout.Group / GOV.UK fieldset: related short fields only
- * (name, city/postcode). Field gap follows the space knob; nest inside
- * {@link FormSection} so section spacing stays larger than field spacing.
- * `compact` wraps descendants in a compact density Preset (LC-73) so nested
- * fields inherit the same gaps without a per-field prop.
+ * (name, city/postcode). Field gap is the within-group role; nest inside
+ * {@link FormSection} so section spacing (gapLg) stays larger than field
+ * spacing.
  */
-export function FieldGroup({ legend, children, columns = 1, gap, compact }: FieldGroupProps) {
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+export function FieldGroup({ legend, children, columns = 1, gap }: FieldGroupProps) {
+  const { knobProps } = useResolvedKnobs();
   const resolvedGap = gap ?? knobProps.gap.gap;
   const useFieldset = isWeb;
   const body =
     columns > 1 ? (
-      <FormGrid columns={columns} gap={resolvedGap} compact={compact}>
+      <FormGrid columns={columns} gap={resolvedGap}>
         {children}
       </FormGrid>
     ) : (
       children
     );
 
-  const group = (
+  return (
     <YStack
       {...(useFieldset ? { render: "fieldset" as const } : {})}
       data-mpo-field-group=""
       data-columns={columns}
       data-field-gap={String(resolvedGap)}
-      data-density={knobProps.density}
-      data-size={knobProps.size}
+      data-size-token={knobProps.sizeToken}
       gap={resolvedGap as never}
       width="100%"
       minWidth={0}
@@ -91,6 +87,4 @@ export function FieldGroup({ legend, children, columns = 1, gap, compact }: Fiel
       {body}
     </YStack>
   );
-
-  return compact ? <Preset overrides={{ density: "compact" }}>{group}</Preset> : group;
 }

package/src/FieldLayout.stories.tsx

@@ -41,7 +41,6 @@ const meta: Meta<typeof FieldLayout> = {
     helperText: { control: "text" },
     error: { control: "text" },
     required: { control: "boolean" },
-    compactSpacing: { control: "boolean" },
     size: { control: "select", options: ["$2", "$3", "$4", "$6"] },
     id: { control: "text" },
   },
@@ -140,12 +139,12 @@ export const AnatomyEdgeCases: Story = {
       <FieldLayout id="fl-required" label="Required field" required>
         <Control id="fl-required" />
       </FieldLayout>
-      <FieldLayout id="fl-nolabel" helperText="No label means compact $1 gap">
+      <FieldLayout
+        id="fl-nolabel"
+        helperText="No label: helper text sits a gapSm under the control"
+      >
         <Control id="fl-nolabel" />
       </FieldLayout>
-      <FieldLayout id="fl-compact" label="Compact spacing" compactSpacing helperText="Compact gap">
-        <Control id="fl-compact" />
-      </FieldLayout>
       <FieldLayout
         id="fl-node-label"
         label={

package/src/FloatingPanel/FloatingPanel.native.spec.tsx

@@ -1,3 +1,4 @@
+import { Preset, nativeAnimationConfig } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { act } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -57,6 +58,38 @@ function panel(open: boolean) {
 }
 
 describe("FloatingPanel native presentation lifecycle", () => {
+  it("keeps the open sheet position when animation speed changes", () => {
+    const example = (animation: "quick" | "slowest") => (
+      <Preset overrides={{ animation }}>{panel(true)}</Preset>
+    );
+    const result = renderWithProviders(example("quick"));
+    const translateY = vi.mocked(Animated.timing).mock.calls[0][0];
+    const writes = vi.spyOn(translateY, "setValue");
+    result.rerender(example("slowest"));
+    expect(Animated.timing).toHaveBeenCalledTimes(1);
+    expect(writes).not.toHaveBeenCalled();
+  });
+
+  it("uses the selected slide spring when dismissing", () => {
+    renderWithProviders(panel(true));
+    act(() => release());
+    expect(Animated.spring).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining(nativeAnimationConfig.medium),
+    );
+  });
+
+  it("enters and dismisses without spring motion at none", () => {
+    renderWithProviders(<Preset overrides={{ animation: "none" }}>{panel(true)}</Preset>);
+    expect(Animated.timing).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ duration: 0 }),
+    );
+    act(() => release());
+    expect(Animated.spring).not.toHaveBeenCalled();
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false);
+  });
+
   it("keeps full-field triggers stretched and allows content-sized composite adornments", () => {
     for (const triggerSizing of [undefined, "content"] as const) {
       const result = renderWithProviders(

package/src/FloatingPanel/FloatingPanel.spec.tsx

@@ -509,3 +509,65 @@ describe("FloatingPanel sheet — closed frame leaves the accessibility tree (MP
     expect((result.getByRole("textbox", { name: "Draft" }) as HTMLInputElement).value).toBe("acme");
   });
 });
+
+describe("FloatingPanel cover (LC-105 COVER-TRIGGER)", () => {
+  function CoverHarness({ cover }: { cover?: boolean }) {
+    const [open, setOpen] = useState(false);
+    return (
+      <FloatingPanel
+        open={open}
+        onOpenChange={setOpen}
+        cover={cover}
+        trigger={<Button>Scope</Button>}
+      >
+        <Text>panel body</Text>
+      </FloatingPanel>
+    );
+  }
+
+  const triggerRect = { top: 200, bottom: 232, left: 40, right: 160, width: 120, height: 32 };
+
+  function mockTriggerRect() {
+    const original = HTMLElement.prototype.getBoundingClientRect;
+    return vi
+      .spyOn(HTMLElement.prototype, "getBoundingClientRect")
+      .mockImplementation(function (this: HTMLElement) {
+        if (this.hasAttribute("data-fp-reference")) {
+          return { ...triggerRect, x: triggerRect.left, y: triggerRect.top, toJSON: () => ({}) };
+        }
+        return original.call(this);
+      });
+  }
+
+  it("puts the panel's top edge on the trigger's top edge and scales from its top corner", async () => {
+    const spy = mockTriggerRect();
+    const result = renderWithProviders(<CoverHarness cover />);
+    pointerPress(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(floatingViewport()).not.toBeNull());
+    const viewport = floatingViewport() as HTMLElement;
+    await waitFor(() => expect(viewport.style.top).toBe(`${triggerRect.top}px`));
+    expect(viewport.style.transformOrigin).toBe("top left");
+    spy.mockRestore();
+  });
+
+  it("covers the trigger by default (LC-105)", async () => {
+    const spy = mockTriggerRect();
+    const result = renderWithProviders(<CoverHarness />);
+    pointerPress(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(floatingViewport()).not.toBeNull());
+    const viewport = floatingViewport() as HTMLElement;
+    await waitFor(() => expect(viewport.style.top).toBe(`${triggerRect.top}px`));
+    spy.mockRestore();
+  });
+
+  it("supports an explicit non-cover panel without a trigger echo", async () => {
+    const spy = mockTriggerRect();
+    const result = renderWithProviders(<CoverHarness cover={false} />);
+    pointerPress(result.container.querySelector("[role='button']") as Element);
+    await waitFor(() => expect(floatingViewport()).not.toBeNull());
+    const viewport = floatingViewport() as HTMLElement;
+    await waitFor(() => expect(viewport.style.top).toBe(`${triggerRect.bottom}px`));
+    expect(viewport.querySelector("[data-fp-trigger-row]")).toBeNull();
+    spy.mockRestore();
+  });
+});