@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/FloatingPanel/useFloatingPanel.ts

@@ -1,6 +1,9 @@
+import { motionDurationMs, motionFor } from "@multiplatform.one/theme";
+import { cssAnimationConfig } from "@multiplatform.one/theme";
 import type { Middleware, Placement } from "@floating-ui/react";
 import { autoUpdate, offset, shift, size, useFloating } from "@floating-ui/react";
 import {
+  OVERLAY_ANCHOR_GAP,
   OVERLAY_ATTACH_GAP,
   radiusStopFromToken,
   resolveRadiusClass,
@@ -16,7 +19,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { getTokenValue } from "tamagui";
+import { getTokenValue, type TransitionProp } from "tamagui";
 import { clampDropdownRadius, scrollArrowThreshold } from "../shared/floatingList";
 import { containsAcrossPanels } from "../shared/panelPortal";
 
@@ -37,15 +40,25 @@ function roundToDevicePixel(value: number): number {
   return Math.round(value * dpr) / dpr;
 }
 
-export const panelAnimationDuration = 180;
-export const panelGrowDuration = 200;
+export const panelAnimationDuration = motionDurationMs(motionFor("quick").overlay.transition);
+export const panelGrowDuration = panelAnimationDuration;
 export const panelViewportPadding = 10;
-/** Gap between trigger and panel. Clay's cover ruling (MPO-38) makes this
- * ZERO for the FloatingPanel family: the panel attaches to the trigger it
- * was opened from. Aliased to the house token so there is one source
- * (Axiom 5); `OVERLAY_ANCHOR_GAP` still governs FREE overlays. */
+/** Gap between trigger and panel: ZERO for the FloatingPanel family (one
+ * source, Axiom 5); `OVERLAY_ANCHOR_GAP` still governs FREE overlays. */
 export const panelAnchorOffset = OVERLAY_ATTACH_GAP;
 
+/**
+ * Cover ruling (Clay, 2026-10-23: "it goes over the trigger"). A panel opened
+ * from a control opens OVER it, like Select: its top edge sits on the
+ * trigger's top edge (a drop-up's bottom edge on the trigger's bottom), the
+ * trigger's own label/value is the panel's first row, and it grows out of the
+ * trigger. Expressed as floating-ui's main-axis offset: minus the trigger's
+ * height, plus the attach gap (0). Free overlays keep their gap instead.
+ */
+export function panelCoverOffset(referenceHeight: number): number {
+  return panelAnchorOffset - referenceHeight;
+}
+
 /**
  * How a panel's width relates to the trigger it opened from (MPO-38).
  * Three declared modes, not a boolean:
@@ -58,7 +71,16 @@ export const panelAnchorOffset = OVERLAY_ATTACH_GAP;
  *   narrower than the control you clicked is not reachable.
  */
 export type PanelWidthMode = "fit-content" | "match-trigger" | "at-least-trigger";
-export const panelTransition = `opacity ${panelAnimationDuration}ms ease-out, transform ${panelAnimationDuration}ms ease-out, top ${panelGrowDuration}ms ease-out, max-height ${panelGrowDuration}ms ease-out, height ${panelGrowDuration}ms ease-out`;
+export function panelTransitionFor(transition: TransitionProp | undefined): string {
+  if (!transition) return "none";
+  const timing =
+    cssAnimationConfig[transition as keyof typeof cssAnimationConfig] ?? cssAnimationConfig.medium;
+  return ["opacity", "transform", "top", "max-height", "height"]
+    .map((property) => `${property} ${timing}`)
+    .join(", ");
+}
+
+export const panelTransition = panelTransitionFor(motionFor("quick").overlay.transition);
 
 // ── Options ───────────────────────────────────────────────────
 
@@ -98,18 +120,13 @@ export interface UseFloatingPanelOptions {
    * An explicit `widthMode` always wins.
    */
   fitContent?: boolean;
-  /**
-   * The panel's content sits one density step below the page (LC-73), as
-   * the calendar does. Its padding, and so its CONTAINER-CAP radius, resolve
-   * at the compact space step.
-   */
-  compact?: boolean;
   /**
    * The panel opens at a point, not from the trigger's box (ContextMenu). It
    * shares no corner with the trigger, so its radius stays the CONTAINER-CAP
    * value instead of dropping to the trigger's drawn arc.
    */
   freeOverlay?: boolean;
+  cover?: boolean;
 }
 
 /** One place that resolves the deprecated boolean onto the three modes, so
@@ -155,6 +172,7 @@ export interface UseFloatingPanelReturn {
    */
   dropdownRadius: string | number;
   hasBorder: boolean;
+  panelTransition: string;
   knobProps: ReturnType<typeof useResolvedKnobs>["knobProps"];
 }
 
@@ -230,11 +248,12 @@ export function useFloatingPanel({
   wheelGrowRef,
   widthMode: widthModeProp,
   fitContent,
-  compact,
   freeOverlay = false,
+  cover = true,
 }: UseFloatingPanelOptions): UseFloatingPanelReturn {
   const widthMode = resolvePanelWidthMode(widthModeProp, fitContent);
-  const { knobProps } = useResolvedKnobs({ compact });
+  // An overlay floats over the page: it never inherits a painted ancestor.
+  const { knobProps } = useResolvedKnobs({ painted: false });
   const hasBorder = knobProps.borderRadius.borderWidth > 0;
   // Part 2b files floating panels under CONTAINER-CAP, so the class value is
   // the ceiling. Below it the panel keeps the trigger's drawn arc (see
@@ -325,9 +344,9 @@ export function useFloatingPanel({
       if (closingTimerRef.current) clearTimeout(closingTimerRef.current);
       closingTimerRef.current = setTimeout(() => {
         setMounted(false);
-      }, panelAnimationDuration);
+      }, motionDurationMs(knobProps.motion.overlay.transition));
     }
-  }, [open, setupForOpen]);
+  }, [open, setupForOpen, knobProps.motion.overlay.transition]);
 
   useEffect(
     () => () => {
@@ -339,8 +358,15 @@ export function useFloatingPanel({
   // ── Floating UI setup ─────────────────────────────────────
 
   const defaultMiddleware: Middleware[] = [
-    // Cover ruling (MPO-38): the family ATTACHES to its trigger. Zero.
-    offset({ mainAxis: OVERLAY_ATTACH_GAP }),
+    // Cover ruling: the family opens OVER its trigger (top edge on the
+    // trigger's top edge). A free overlay keeps the anchor gap.
+    offset(({ rects }) =>
+      freeOverlay
+        ? OVERLAY_ANCHOR_GAP
+        : cover
+          ? panelCoverOffset(rects.reference.height)
+          : panelAnchorOffset,
+    ),
     // Horizontal collision handling: panels anchored near the right viewport
     // edge (e.g. a ColorPicker in the last table column) shift back into view
     // instead of clipping. Vertical placement is handled by computePlacement.
@@ -519,6 +545,7 @@ export function useFloatingPanel({
     setMounted,
     dropdownRadius,
     hasBorder,
+    panelTransition: panelTransitionFor(knobProps.motion.overlay.transition),
     knobProps,
   };
 }

package/src/Form/Form.stories.tsx

@@ -73,10 +73,6 @@ const meta: Meta<typeof Form> = {
       control: "number",
       description: "Debounce time for URL sync in milliseconds",
     },
-    compact: {
-      control: "boolean",
-      description: "Nested scale — compact density for dialogs/overlays (LC-73)",
-    },
   },
 };
 

package/src/Form/form.spec.tsx

@@ -3,9 +3,10 @@ import { act, fireEvent, waitFor } from "@testing-library/react";
 import { YStack } from "tamagui";
 import { describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { FORM_READABLE_WIDTH, Surface, sizeRecipeForToken } from "@multiplatform.one/theme";
 import { Button } from "../Button";
 import { Input } from "../fields/Input";
+import { Select } from "../fields/Select";
 import { Form, FormActions, useFormContext } from "./index";
 
 // Mock @multiplatform.one/router at top level
@@ -373,45 +374,91 @@ describe("Form", () => {
   });
 
   describe("layout recipes (DG-FORM-01/06, LC-73)", () => {
-    it("owns vertical rhythm from the space recipe, not sizeToken", () => {
+    it("owns vertical rhythm from the within-group role, not sizeToken", () => {
       const result = renderWithProviders(
-        <Preset overrides={{ size: "large", space: "small" }}>
+        <Surface size="$5">
           <Form onSubmit={vi.fn()} aria-label="Layout Form">
             <YStack>Content</YStack>
           </Form>
-        </Preset>,
+        </Surface>,
       );
       const layout = result.container.querySelector("[data-mpo-form-layout]");
-      expect(layout?.getAttribute("data-gap")).toBe("$2");
-      expect(layout?.getAttribute("data-size")).toBe("large");
-      expect(layout?.getAttribute("data-density")).toBe("comfortable");
+      expect(layout?.getAttribute("data-gap")).toBe("$3");
+      expect(layout?.getAttribute("data-size-token")).toBe("$5");
+      expect(layout?.hasAttribute("data-density")).toBe(false);
     });
 
-    it("compact nested scale steps space without changing size (density≠size)", () => {
+    it("size forwards a token to every field and keeps the rhythm on the role", () => {
       const result = renderWithProviders(
-        <Form compact onSubmit={vi.fn()}>
-          <YStack>Content</YStack>
+        <Form size="$3" onSubmit={vi.fn()}>
+          <Button action="submit" size="$5">
+            Save
+          </Button>
         </Form>,
       );
       const layout = result.container.querySelector("[data-mpo-form-layout]");
-      expect(layout?.getAttribute("data-nested")).toBe("true");
-      expect(layout?.getAttribute("data-density")).toBe("compact");
-      expect(layout?.getAttribute("data-size")).toBe("medium");
-      expect(layout?.getAttribute("data-gap")).toBe("$2");
+      expect(layout?.getAttribute("data-size-token")).toBe("$3");
+      expect(layout?.getAttribute("data-gap")).toBe("$3");
+      expect(result.getByRole("button").getAttribute("data-size-token")).toBe("$3");
+    });
+
+    it('<Form size="$3"> renders every Input, Select trigger and submit Button at the $3 recipe', () => {
+      const recipe = sizeRecipeForToken("$3");
+      const options = ["a", "b", "c", "d", "e"].map((value) => ({ label: value, value }));
+      const result = renderWithProviders(
+        <Form size="$3" onSubmit={vi.fn()}>
+          <Input label="Name" name="name" />
+          <Select label="Pick" name="pick" options={options} />
+          <Button action="submit">Save</Button>
+        </Form>,
+      );
+      const inputBox = result.container.querySelector("[data-ring-target='box']") as HTMLElement;
+      const input = result.container.querySelector("input") as HTMLElement;
+      const trigger = result.container.querySelector("[role='combobox']") as HTMLElement;
+      const submit = result.getByRole("button") as HTMLElement;
+      expect(inputBox.className).toContain(`_h-${recipe.height}px`);
+      expect(getComputedStyle(input).fontSize).toBe(`${recipe.fontSize}px`);
+      expect(trigger.className).toContain(`_h-${recipe.height}px`);
+      expect(submit.className).toContain(`_h-${recipe.height}px`);
+      expect(submit.className).toContain(`_pl-${recipe.paddingHorizontal}px`);
+    });
+
+    it("the form column is the readable width token and its actions hug their label", () => {
+      const result = renderWithProviders(
+        <Form onSubmit={vi.fn()}>
+          <Input label="Name" name="name" />
+          <Button action="submit">Save</Button>
+        </Form>,
+      );
+      const layout = result.container.querySelector("[data-mpo-form-layout]") as HTMLElement;
+      expect(FORM_READABLE_WIDTH).toBeGreaterThanOrEqual(480);
+      expect(FORM_READABLE_WIDTH).toBeLessThanOrEqual(640);
+      expect(layout.className).toContain(`_maw-${FORM_READABLE_WIDTH}px`);
+      const submit = result.getByRole("button") as HTMLElement;
+      expect(submit.className).toContain("_als-flex-start");
+    });
+
+    it("a Form maxWidth ejects the readable width", () => {
+      const result = renderWithProviders(
+        <Form onSubmit={vi.fn()} maxWidth="100%">
+          <YStack>Content</YStack>
+        </Form>,
+      );
+      const layout = result.container.querySelector("[data-mpo-form-layout]") as HTMLElement;
+      expect(layout.className).not.toContain(`_maw-${FORM_READABLE_WIDTH}px`);
     });
 
-    it("FormActions hugs content and uses the space recipe", () => {
+    it("FormActions hugs content and uses the within-group role", () => {
       const result = renderWithProviders(
-        <Preset overrides={{ space: "small", size: "large" }}>
+        <Surface size="$5">
           <FormActions>
             <Button action="submit">Save</Button>
           </FormActions>
-        </Preset>,
+        </Surface>,
       );
       const actions = result.container.querySelector("[data-mpo-form-actions]");
-      expect(actions?.getAttribute("data-gap")).toBe("$2");
-      expect(actions?.getAttribute("data-size")).toBe("large");
-      expect(actions?.getAttribute("data-density")).toBe("comfortable");
+      expect(actions?.getAttribute("data-gap")).toBe("$3");
+      expect(actions?.getAttribute("data-size-token")).toBe("$5");
     });
   });
 });

package/src/Form/index.tsx

@@ -1,5 +1,5 @@
 import { useUrlState } from "@multiplatform.one/router";
-import { Preset, useResolvedKnobs } from "@multiplatform.one/theme";
+import { FORM_READABLE_WIDTH, Surface, useResolvedKnobs } from "@multiplatform.one/theme";
 import { type FormApi, type FormOptions, useForm } from "@tanstack/react-form";
 import {
   type FormEvent,
@@ -13,6 +13,7 @@ import {
 import {
   Form as TamaguiForm,
   type FormProps as TamaguiFormProps,
+  type SizeTokens,
   XStack,
   YStack,
   isWeb,
@@ -86,7 +87,7 @@ export function useFormSaveMode(): FormSaveModeContextValue {
 
 export interface FormProps<TFormData, _TFormValidator = any> extends Omit<
   TamaguiFormProps,
-  "onSubmit"
+  "onSubmit" | "size"
 > {
   children: ReactNode;
   form?: FormApi<TFormData, any, any, any, any, any, any, any, any, any, any, any>;
@@ -111,12 +112,11 @@ export interface FormProps<TFormData, _TFormValidator = any> extends Omit<
    */
   validateOn?: FormValidateOn;
   /**
-   * Nested scale (LC-73). Steps space/density down one level and wraps
-   * descendants in a compact density Preset so fields inherit the same
-   * gaps without a per-field `compact` prop. Density/space still own
-   * gaps; size still owns control height (density≠size).
+   * Control size token every field in the form renders at (Tamagui's own
+   * `size`, e.g. `"$3"`), forwarded through a `<Surface>` ceiling (LC-78).
+   * Omitted = the ambient token. Spacing stays on the roles.
    */
-  compact?: boolean;
+  size?: SizeTokens;
   /**
    * Desk/record surfaces where the form IS the route (DG-ACT-06). Renders
    * {@link ContextualSaveBar} and puts fields in declarative save mode —
@@ -212,11 +212,11 @@ export function Form<TFormData extends Record<string, any>, TFormValidator = any
   showErrorSummary = true,
   errorSummaryTitle,
   validateOn = "submit",
-  compact,
+  size,
   saveBar,
   ...tamaguiFormProps
 }: FormProps<TFormData, TFormValidator>) {
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+  const { knobProps } = useResolvedKnobs(size === undefined ? undefined : { size });
   const requiredMarkMode = mapHouseRequiredMarking(knobProps.requiredMarking);
   const formAutofocusOn = knobProps.formAutofocus === "on";
 
@@ -324,11 +324,12 @@ export function Form<TFormData extends Record<string, any>, TFormValidator = any
               <YStack
                 data-mpo-form-layout=""
                 data-gap={knobProps.gap.gap}
-                data-density={knobProps.density}
-                data-size={knobProps.size}
-                data-nested={compact ? "true" : undefined}
+                data-size-token={knobProps.sizeToken}
                 width="100%"
                 minWidth={0}
+                // A readable column: fields and actions read as one group on a
+                // wide screen. `maxWidth` on the Form ejects (e.g. "100%").
+                maxWidth={(tamaguiFormProps.maxWidth as never) ?? FORM_READABLE_WIDTH}
                 {...knobProps.gap}
                 {...(tamaguiFormProps.flex != null ? { flex: tamaguiFormProps.flex as never } : {})}
               >
@@ -351,7 +352,7 @@ export function Form<TFormData extends Record<string, any>, TFormValidator = any
     </FormContext.Provider>
   );
 
-  return compact ? <Preset overrides={{ density: "compact" }}>{formNode}</Preset> : formNode;
+  return size === undefined ? formNode : <Surface size={size}>{formNode}</Surface>;
 }
 
 export interface FormActionsProps {
@@ -371,8 +372,7 @@ export function FormActions({ children, gap }: FormActionsProps) {
     <XStack
       data-mpo-form-actions=""
       data-gap={String(resolvedGap)}
-      data-density={knobProps.density}
-      data-size={knobProps.size}
+      data-size-token={knobProps.sizeToken}
       gap={resolvedGap as never}
       alignSelf="flex-start"
       alignItems="center"

package/src/FormGrid.spec.tsx

@@ -1,5 +1,5 @@
 import { act } from "@testing-library/react";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Surface } from "@multiplatform.one/theme";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { FieldGroup } from "./FieldGroup";
@@ -54,7 +54,7 @@ function stubContainerWidth(width: number) {
 
 describe("formSpacing tokens", () => {
   it("encodes section gap larger than field gap (DG-FORM-06)", () => {
-    expect(formFieldGap).toBe("$4");
+    expect(formFieldGap).toBe("$3");
     expect(formSectionGap).toBe("$8");
     expect(Number(formSectionGap.slice(1))).toBeGreaterThan(Number(formFieldGap.slice(1)));
   });
@@ -78,9 +78,8 @@ describe("FormGrid", () => {
     expect(grid?.getAttribute("data-columns")).toBe("1");
     expect(grid?.getAttribute("data-requested-columns")).toBe("1");
     expect(grid?.getAttribute("data-max-columns")).toBe("2");
-    expect(grid?.getAttribute("data-gap")).toBe("$4");
-    expect(grid?.getAttribute("data-density")).toBe("comfortable");
-    expect(grid?.getAttribute("data-size")).toBe("medium");
+    expect(grid?.getAttribute("data-gap")).toBe("$3");
+    expect(grid?.getAttribute("data-size-token")).toBe("$true");
   });
 
   it("caps columns at maxColumns", () => {
@@ -130,41 +129,43 @@ describe("FormGrid", () => {
     expect(grid.style.gridTemplateColumns).toBe("repeat(1, minmax(0, 1fr))");
   });
 
-  it("gap follows the space recipe, not sizeToken (density≠size)", () => {
+  it("gap is the within-group role at any size token, never sizeToken", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ size: "large", space: "small" }}>
+      <Surface size="$5">
         <FormGrid>
           <div>a</div>
         </FormGrid>
-      </Preset>,
+      </Surface>,
     );
     const grid = result.container.querySelector("[data-mpo-form-grid]");
-    expect(grid?.getAttribute("data-gap")).toBe("$2");
-    expect(grid?.getAttribute("data-size")).toBe("large");
+    expect(grid?.getAttribute("data-gap")).toBe("$3");
+    expect(grid?.getAttribute("data-size-token")).toBe("$5");
   });
 
-  it("compact steps space down without reading sizeToken as gap", () => {
+  it("has no compact switch and no density attribute", () => {
     const result = renderWithProviders(
-      <FormGrid compact>
-        <div>a</div>
-      </FormGrid>,
+      <Surface size="$3">
+        <FormGrid>
+          <div>a</div>
+        </FormGrid>
+      </Surface>,
     );
     const grid = result.container.querySelector("[data-mpo-form-grid]");
-    expect(grid?.getAttribute("data-density")).toBe("compact");
-    expect(grid?.getAttribute("data-size")).toBe("medium");
-    expect(grid?.getAttribute("data-gap")).toBe("$2");
+    expect(grid?.hasAttribute("data-density")).toBe(false);
+    expect(grid?.getAttribute("data-size-token")).toBe("$3");
+    expect(grid?.getAttribute("data-gap")).toBe("$3");
   });
 
-  it("spreads the space-recipe gap fragment (not a raw 16)", () => {
+  it("spreads the role gap fragment (not a raw 16)", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ space: "large" }}>
+      <Preset>
         <FormGrid>
           <div>a</div>
         </FormGrid>
       </Preset>,
     );
     const grid = result.container.querySelector("[data-mpo-form-grid]");
-    expect(grid?.getAttribute("data-gap")).toBe("$5");
+    expect(grid?.getAttribute("data-gap")).toBe("$3");
   });
 });
 
@@ -194,17 +195,17 @@ describe("FieldGroup", () => {
     ).toBe("2");
   });
 
-  it("field gap follows space, not size (density≠size)", () => {
+  it("field gap is the within-group role, not the size token", () => {
     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");
   });
 });
 
@@ -267,27 +268,27 @@ describe("FormSection semantic gaps (DG-FORM-06)", () => {
     const section = result.container.querySelector("[data-mpo-form-section]");
     const stack = result.container.querySelector("[data-mpo-form-section-stack]");
     // knob defaults: gap $4 (within-group), gapLg $5 (between-groups)
-    expect(section?.getAttribute("data-field-gap")).toBe("$4");
+    expect(section?.getAttribute("data-field-gap")).toBe("$3");
     expect(stack?.getAttribute("data-section-gap")).toBe("$5");
     const fieldStep = Number(section?.getAttribute("data-field-gap")?.slice(1));
     const sectionStep = Number(stack?.getAttribute("data-section-gap")?.slice(1));
     expect(sectionStep).toBeGreaterThan(fieldStep);
   });
 
-  it("space knob restyles both gaps while keeping section > field", () => {
+  it("a size token restyles neither gap: section > field stays on the roles", () => {
     const result = renderWithProviders(
-      <Preset overrides={{ space: "small" }}>
+      <Surface size="$3">
         <FormSectionStack>
           <FormSection label="A">
             <div>1</div>
           </FormSection>
         </FormSectionStack>
-      </Preset>,
+      </Surface>,
     );
     const section = result.container.querySelector("[data-mpo-form-section]");
     const stack = result.container.querySelector("[data-mpo-form-section-stack]");
-    expect(section?.getAttribute("data-field-gap")).toBe("$2");
-    expect(stack?.getAttribute("data-section-gap")).toBe("$3");
+    expect(section?.getAttribute("data-field-gap")).toBe("$3");
+    expect(stack?.getAttribute("data-section-gap")).toBe("$5");
   });
 
   it("explicit gap props eject from the knob defaults", () => {

package/src/FormGrid.stories.tsx

@@ -12,7 +12,6 @@ const meta: Meta<typeof FormGrid> = {
   argTypes: {
     columns: { control: { type: "number", min: 1, max: 2 } },
     maxColumns: { control: { type: "number", min: 1, max: 2 } },
-    compact: { control: "boolean" },
   },
   args: {
     columns: 1,

package/src/FormGrid.tsx

@@ -27,12 +27,10 @@ export interface FormGridProps {
    */
   maxColumns?: FormGridColumns;
   /**
-   * Gap between fields. Defaults to the space recipe (`knobProps.gap`) —
-   * density/space, never `sizeToken`. Number = px eject; token string allowed.
+   * Gap between fields. Defaults to the within-group role (`knobProps.gap`),
+   * never `sizeToken`. Number = px eject; token string allowed.
    */
   gap?: number | string;
-  /** Nested scale (LC-73). Omit to inherit the nearest Preset density. */
-  compact?: boolean;
   children: ReactNode;
 }
 
@@ -52,8 +50,8 @@ function resolveWideColumns(
  * the container is at least {@link FORM_GRID_COLLAPSE_WIDTH} wide (container measure
  * on web; viewport media on native).
  */
-export function FormGrid({ columns = 1, maxColumns = 2, gap, compact, children }: FormGridProps) {
-  const { knobProps } = useResolvedKnobs(compact === undefined ? undefined : { compact });
+export function FormGrid({ columns = 1, maxColumns = 2, gap, children }: FormGridProps) {
+  const { knobProps } = useResolvedKnobs();
   const gapFragment = gap === undefined ? knobProps.gap : { gap };
   const resolvedGap = gapFragment.gap;
   const wideColumns = resolveWideColumns(columns, maxColumns);
@@ -65,8 +63,7 @@ export function FormGrid({ columns = 1, maxColumns = 2, gap, compact, children }
         maxColumns={maxColumns}
         gap={resolvedGap}
         gapFragment={gapFragment}
-        density={knobProps.density}
-        size={knobProps.size}
+        sizeToken={knobProps.sizeToken}
       >
         {children}
       </FormGridWeb>
@@ -79,8 +76,7 @@ export function FormGrid({ columns = 1, maxColumns = 2, gap, compact, children }
       maxColumns={maxColumns}
       gap={resolvedGap}
       gapFragment={gapFragment}
-      density={knobProps.density}
-      size={knobProps.size}
+      sizeToken={knobProps.sizeToken}
     >
       {children}
     </FormGridNative>
@@ -92,16 +88,14 @@ function FormGridWeb({
   maxColumns,
   gap,
   gapFragment,
-  density,
-  size,
+  sizeToken,
   children,
 }: {
   columns: FormGridColumns;
   maxColumns: FormGridColumns;
   gap: number | string;
   gapFragment: { gap: number | string };
-  density: string;
-  size: string;
+  sizeToken: string;
   children: ReactNode;
 }) {
   const ref = useRef<HTMLDivElement>(null);
@@ -151,8 +145,7 @@ function FormGridWeb({
       data-max-columns={maxColumns}
       data-requested-columns={columns}
       data-gap={String(gap)}
-      data-density={density}
-      data-size={size}
+      data-size-token={sizeToken}
       {...gapFragment}
       width="100%"
       minWidth={0}
@@ -168,16 +161,14 @@ function FormGridNative({
   maxColumns,
   gap,
   gapFragment,
-  density,
-  size,
+  sizeToken,
   children,
 }: {
   columns: FormGridColumns;
   maxColumns: FormGridColumns;
   gap: number | string;
   gapFragment: { gap: number | string };
-  density: string;
-  size: string;
+  sizeToken: string;
   children: ReactNode;
 }) {
   const media = useMedia();
@@ -222,8 +213,7 @@ function FormGridNative({
       data-max-columns={maxColumns}
       data-requested-columns={columns}
       data-gap={String(gap)}
-      data-density={density}
-      data-size={size}
+      data-size-token={sizeToken}
     >
       {rows.map((row, rowIndex) => (
         <XStack key={rowIndex} {...gapFragment}>