@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/fields/DatePicker/DatetimePicker.catalog.tsx

@@ -67,8 +67,6 @@ export type DatetimePickerProps<
     inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
     /** When true, renders a skeleton placeholder instead of the datetime picker */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
     /** Standalone controlled value (Date or ISO string). Ignored when used inside a form. */
     value?: Date | string | null;
     /**
@@ -373,12 +371,11 @@ export function DatetimePicker<
     minuteStep = 5,
     showSeconds = false,
     skeleton,
-    compact,
     id: idProp,
     ..._restProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
 
   const [open, setOpen] = useState(false);
@@ -456,7 +453,6 @@ export function DatetimePicker<
       open={open}
       onReset={() => handleClearDatetime(fieldChange)}
       onButtonPress={openPicker}
-      error={!!hasError}
       id={id}
       aria-label={label ? undefined : t("Date and time")}
       aria-required={required || undefined}
@@ -538,7 +534,12 @@ export function DatetimePicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderPopover(!!errorProp)}</InputParts>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
+          {renderPopover(!!errorProp)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -572,7 +573,10 @@ export function DatetimePicker<
               // LC-40: see standalone branch — FieldLayout carries dimWhole.
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderPopover(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", _onBlur),

package/src/fields/DatePicker/DatetimePicker.native.tsx

@@ -52,7 +52,6 @@ export type DatetimePickerProps<
     minuteStep?: number;
     showSeconds?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     value?: Date | string | null;
     onChange?: (value: Date | null) => void;
     onValueChange?: (value: Date | null) => void;
@@ -105,13 +104,12 @@ export function DatetimePicker<
     readOnly,
     onBlur,
     skeleton,
-    compact,
     timeFormat = "12h",
     showSeconds = false,
     id: idProp,
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const hasLabel = Boolean(label);
   const [open, setOpen] = useState(false);
@@ -175,7 +173,6 @@ export function DatetimePicker<
             open={open}
             onReset={() => commit(null, fieldChange)}
             onButtonPress={() => {}}
-            error={!!hasError}
             id={id}
             aria-label={hasLabel ? undefined : t("Date and time")}
             aria-required={required || undefined}
@@ -223,7 +220,12 @@ export function DatetimePicker<
         onBlur={onBlur}
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderControl(!!errorProp)}</InputParts>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
+          {renderControl(!!errorProp)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -253,7 +255,10 @@ export function DatetimePicker<
               knobProps={knobProps}
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderControl(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", onBlur),

package/src/fields/DatePicker/DatetimePicker.stories.tsx

@@ -28,7 +28,6 @@ const meta: Meta<typeof DatetimePicker> = {
     disabled: { control: "boolean", description: "Disable the picker" },
     readOnly: { control: "boolean", description: "Read-only display" },
     skeleton: { control: "boolean", description: "Render a skeleton placeholder" },
-    compact: { control: "boolean", description: "Use compact density (tighter layout gaps)" },
     timeFormat: { control: "select", options: ["12h", "24h"], description: "Clock format" },
     minuteStep: { control: "number", description: "Minute increment" },
     showSeconds: { control: "boolean", description: "Show a seconds column" },
@@ -108,7 +107,7 @@ export const SkeletonState: Story = {
 };
 
 export const Compact: Story = {
-  args: { compact: true, helperText: "Compact sizing" },
+  args: { size: "$3", helperText: "Size $3" },
 };
 
 export const ControlledRejection: Story = {

package/src/fields/DatePicker/MonthPicker.stories.tsx

@@ -26,7 +26,6 @@ const meta: Meta<typeof MonthPicker> = {
     disabled: { control: "boolean", description: "Disable the picker" },
     readOnly: { control: "boolean", description: "Read-only display" },
     skeleton: { control: "boolean", description: "Render a skeleton placeholder" },
-    compact: { control: "boolean", description: "Use compact density (tighter layout gaps)" },
     minYear: { control: "number", description: "Minimum selectable year" },
     maxYear: { control: "number", description: "Maximum selectable year" },
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
@@ -79,7 +78,7 @@ export const SkeletonState: Story = {
 };
 
 export const Compact: Story = {
-  args: { compact: true, helperText: "Compact sizing" },
+  args: { size: "$3", helperText: "Size $3" },
 };
 
 export const FormBound: Story = {

package/src/fields/DatePicker/MonthPicker.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { ChevronLeft, ChevronRight } from "@tamagui/lucide-icons-2";
 import { type ComponentProps, useCallback, useEffect, useRef, useState } from "react";
@@ -61,8 +62,6 @@ export type MonthPickerProps<
     readOnly?: boolean;
     /** When true, render a non-interactive skeleton instead of the picker. */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
     placeholder?: string;
     disabled?: boolean;
     minYear?: number;
@@ -176,7 +175,7 @@ function MonthPickerBody({
         {...knobProps.gap}
         width={px * 7}
         {...animation}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.slide)}
       >
         <View flexDirection="row" width={px * 7} alignItems="center" justifyContent="space-between">
           <CalendarChromeButton
@@ -251,12 +250,11 @@ export function MonthPicker<
     onBlur: _onBlur,
     onChange,
     skeleton,
-    compact,
     id: idProp,
     ..._restProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
 
   const [open, setOpen] = useState(false);
@@ -364,7 +362,6 @@ export function MonthPicker<
             open={open}
             onReset={() => handleClear(fieldChange)}
             onButtonPress={() => setOpen(true)}
-            error={!!hasError}
             // SB-KS-04: without the field id the sibling FieldLayout label's
             // `htmlFor` resolves to nothing — a dangling label and a control
             // with no accessible name. Carrying it also lets the Label wire
@@ -407,7 +404,12 @@ export function MonthPicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderPopover(!!errorProp)}</InputParts>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
+          {renderPopover(!!errorProp)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -441,7 +443,10 @@ export function MonthPicker<
               // LC-40: see standalone branch — FieldLayout carries dimWhole.
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderPopover(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", _onBlur),

package/src/fields/DatePicker/MultiDatePicker.stories.tsx

@@ -28,7 +28,6 @@ const meta: Meta<typeof MultiDatePicker> = {
     disabled: { control: "boolean", description: "Disable the picker" },
     readOnly: { control: "boolean", description: "Read-only display" },
     skeleton: { control: "boolean", description: "Render a skeleton placeholder" },
-    compact: { control: "boolean", description: "Use compact density (tighter layout gaps)" },
     limit: { control: "number", description: "Max number of selectable dates" },
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
   },
@@ -63,7 +62,7 @@ export const SkeletonState: Story = {
 };
 
 export const Compact: Story = {
-  args: { compact: true, helperText: "Compact sizing" },
+  args: { size: "$3", helperText: "Size $3" },
 };
 
 export const LimitOne: Story = {

package/src/fields/DatePicker/MultiDatePicker.tsx

@@ -68,8 +68,6 @@ export type MultiDatePickerProps<
     inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
     /** When true, renders a skeleton placeholder instead of the multi-date picker */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
   };
 
 // ---------------------------------------------------------------------------
@@ -332,12 +330,11 @@ export function MultiDatePicker<
     size,
     onBlur: _onBlur,
     skeleton,
-    compact,
     id: idProp,
     ..._restProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name, isEmptyDates);
   const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
   const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
@@ -459,7 +456,6 @@ export function MultiDatePicker<
             open={open}
             onReset={() => handleClear(fieldChange)}
             onButtonPress={openPicker}
-            error={!!hasError}
             // SB-KS-04: without the field id the sibling FieldLayout label's
             // `htmlFor` resolves to nothing — a dangling label and a control
             // with no accessible name.
@@ -507,7 +503,10 @@ export function MultiDatePicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
           {renderPopover(!!errorProp, undefined, onChange)}
         </InputParts>
       </FieldLayout>
@@ -543,7 +542,10 @@ export function MultiDatePicker<
               // LC-40: see standalone branch — FieldLayout carries dimWhole.
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderPopover(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", _onBlur),

package/src/fields/DatePicker/catalog.tsx

@@ -66,8 +66,6 @@ export type DatePickerProps<
     inputProps?: Omit<ComponentProps<typeof InputParts.Area>, "value" | "onChangeText" | "ref">;
     /** When true, renders a skeleton placeholder instead of the date picker */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
     /** Standalone controlled value (Date or ISO string). Ignored when used inside a form. */
     value?: Date | string | null;
     /**
@@ -205,12 +203,11 @@ export function DatePicker<
     readOnly,
     onBlur,
     skeleton,
-    compact,
     id: idProp,
     ..._restProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const hasLabel = Boolean(label);
 
@@ -338,7 +335,6 @@ export function DatePicker<
               if (selectedDate) setDisplayDate(selectedDate);
               setOpen(true);
             }}
-            error={!!hasError}
             id={id}
             // Labelled: FieldLayout's Label wires `aria-labelledby` onto this
             // id itself — naming it here too doubles the spoken name.
@@ -388,7 +384,12 @@ export function DatePicker<
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderPopover(!!errorProp)}</InputParts>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
+          {renderPopover(!!errorProp)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -422,7 +423,10 @@ export function DatePicker<
               // LC-40: see standalone branch — FieldLayout carries dimWhole.
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderPopover(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", onBlur),

package/src/fields/DatePicker/index.native.tsx

@@ -50,7 +50,6 @@ export type DatePickerProps<
     maxDate?: Date;
     disabled?: boolean;
     skeleton?: boolean;
-    compact?: boolean;
     value?: Date | string | null;
     onChange?: (value: Date | null) => void;
     onValueChange?: (value: Date | null) => void;
@@ -106,11 +105,10 @@ export function DatePicker<
     readOnly,
     onBlur,
     skeleton,
-    compact,
     id: idProp,
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const hasLabel = Boolean(label);
   const [open, setOpen] = useState(false);
@@ -169,7 +167,6 @@ export function DatePicker<
             open={open}
             onReset={() => commit(null, fieldChange)}
             onButtonPress={() => {}}
-            error={!!hasError}
             id={id}
             aria-label={hasLabel ? undefined : t("Date")}
             aria-required={required || undefined}
@@ -217,7 +214,12 @@ export function DatePicker<
         onBlur={onBlur}
         disabled={disabled}
       >
-        <InputParts size={size || knobProps.sizeToken}>{renderControl(!!errorProp)}</InputParts>
+        <InputParts
+          size={size || knobProps.sizeToken}
+          {...(errorProp ? { theme: "error" } : undefined)}
+        >
+          {renderControl(!!errorProp)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -247,7 +249,10 @@ export function DatePicker<
               knobProps={knobProps}
               disabled={disabled}
             >
-              <InputParts size={size || knobProps.sizeToken}>
+              <InputParts
+                size={size || knobProps.sizeToken}
+                {...(resolvedError ? { theme: "error" } : undefined)}
+              >
                 {renderControl(
                   !!resolvedError,
                   mergeFieldHandler(field, "handleBlur", onBlur),

package/src/fields/DatePicker/parts.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import {
   CalendarBlankIcon,
   CaretLeftIcon,
@@ -22,7 +23,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { AnimatePresence, Text, View, isWeb } from "tamagui";
+import { AnimatePresence, SizableText, Text, View, isWeb } from "tamagui";
 
 import { FloatingPanel, floatingPanelActionProps, isNestedPanelAction } from "../../FloatingPanel";
 import type { PanelActionEvent } from "../../FloatingPanel/nestedAction";
@@ -190,7 +191,7 @@ export function dayCellRadius(knobProps: { pointy?: boolean }): {
 
 /** Calendar chrome sits one density step below the page (LC-73). */
 export function useCalendarKnobs() {
-  return useResolvedKnobs({ compact: true });
+  return useResolvedKnobs();
 }
 
 /** Overlay/dialog calendar frame: compact padding + a 7-cell content width. */
@@ -487,7 +488,7 @@ export function CalendarDays({
   return (
     <AnimatePresence key={animationKey}>
       <View
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.slide)}
         {...animation}
         alignSelf="center"
         gap="$1"
@@ -639,9 +640,9 @@ export function CalendarHeader({
 
       <View flexDirection="row" alignItems="center" {...knobProps.gap}>
         <CalendarTextButton onPress={onMonthPress}>
-          <Text color="$color" {...knobProps.label} {...knobProps.textWeight} fontWeight="600">
+          <SizableText color="$color" size={knobProps.label.fontSize} {...knobProps.heading}>
             {monthName}
-          </Text>
+          </SizableText>
         </CalendarTextButton>
         <CalendarTextButton onPress={onYearPress}>
           <Text color={formCommonColors.muted} {...knobProps.label} {...knobProps.textWeight}>
@@ -681,7 +682,7 @@ export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGr
     <AnimatePresence key={animationKey}>
       <View
         {...animation}
-        transition={knobProps.transition}
+        {...transitionProps(knobProps.motion.slide)}
         flexDirection="row"
         flexWrap="wrap"
         width={px * 7}
@@ -786,7 +787,7 @@ export function YearGrid({
       <AnimatePresence key={animationKey}>
         <View
           {...animation}
-          transition={knobProps.transition}
+          {...transitionProps(knobProps.motion.slide)}
           flexDirection="row"
           flexWrap="wrap"
           width={px * 7}
@@ -852,7 +853,6 @@ interface DatePickerInputTriggerProps {
   open?: boolean;
   onReset: () => void;
   onButtonPress: () => void;
-  error?: boolean;
   id?: string;
   /** Empty-state glyph. Datetime uses calendar; TimePicker uses clock. */
   glyph?: "calendar" | "clock";
@@ -896,7 +896,6 @@ export function DatePickerInputTrigger({
   onReset,
   disabled,
   placeholder,
-  error,
   id,
   open,
   glyph = "calendar",
@@ -938,7 +937,6 @@ export function DatePickerInputTrigger({
       pointerEvents={isWeb ? undefined : "none"}
     >
       <InputParts.Box
-        theme={error ? "error" : undefined}
         // Yoga has no intrinsic TextInput width to size this row child.
         {...(isWeb ? undefined : { flex: 1, minWidth: 0 })}
         // Elevation is an overlay recipe: it belongs on the open panel, never
@@ -1033,7 +1031,6 @@ export function DatePickerPopoverShell({
       disabled={disabled}
       sizing="grow"
       contentPadding="none"
-      compact
       widthMode="fit-content"
       triggerA11y={triggerA11y}
     >

package/src/fields/Duration/Duration.spec.tsx

@@ -165,9 +165,9 @@ describe("Duration", () => {
       if (boxH > 0 && inputH > 0) expect(inputH).toBeLessThanOrEqual(boxH + 0.5);
     });
 
-    it("pins six default preset chips at the $2 / 28px family", () => {
+    it("pins six default preset chips at the $2 / 26px family", () => {
       expect(DURATION_PRESET_SIZE).toBe("$2");
-      expect(sizeRecipeForToken(DURATION_PRESET_SIZE).height).toBe(28);
+      expect(sizeRecipeForToken(DURATION_PRESET_SIZE).height).toBe(26);
       const result = renderWithProviders(<Duration label="P" value={0} />);
       const chips = result.container.querySelectorAll("[data-duration-preset]");
       expect(chips).toHaveLength(6);

package/src/fields/Duration/Duration.stories.tsx

@@ -29,7 +29,6 @@ const meta: Meta<typeof Duration> = {
     showSeconds: { control: "boolean", description: "Show seconds segment" },
     hideDays: { control: "boolean", description: "Fold days into hours" },
     readOnly: { control: "boolean" },
-    compact: { control: "boolean" },
     clockIcon: { control: false, description: "Leading clock; pass null to hide" },
     skeleton: { control: "boolean" },
     placeholder: { control: "text" },
@@ -211,8 +210,8 @@ export const HideClock: Story = {
 
 export const Compact: Story = {
   args: {
+    size: "$3",
     label: "Compact",
     value: 1800,
-    compact: true,
   },
 };

package/src/fields/Duration/index.tsx

@@ -52,7 +52,7 @@ const defaultPresets: DurationPreset[] = [
   { label: "8h", seconds: 28800 },
 ];
 
-/** Preset chips stay on the $2 row (28px). The field size knob does not reach them. */
+/** Preset chips stay on the $2 row (28px). The field size token does not reach them. */
 export const DURATION_PRESET_SIZE = "$2" as const;
 
 function DurationSegment({
@@ -231,9 +231,8 @@ function DurationControl({
   );
 
   return (
-    <InputParts size={size || knobProps.sizeToken}>
+    <InputParts size={size || knobProps.sizeToken} {...(hasError ? { theme: "error" } : undefined)}>
       <InputParts.Box
-        theme={hasError ? "error" : undefined}
         elevation={undefined}
         disabled={disabled}
         role="group"
@@ -356,7 +355,6 @@ function DurationPresets({
         return (
           <Button
             key={preset.seconds}
-            compact
             size={DURATION_PRESET_SIZE}
             outlined={!selected}
             accent={selected}
@@ -406,8 +404,6 @@ export interface DurationProps {
   clockIcon?: ReactNode | null;
   /** When true, renders a skeleton placeholder instead of the duration picker */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
 }
 
 export function Duration({
@@ -433,13 +429,11 @@ export function Duration({
   placeholder = t("Select duration"),
   clockIcon,
   skeleton,
-  compact,
 }: DurationProps) {
   const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const isControlled = value !== undefined;

package/src/fields/FileUpload/FileUpload.spec.tsx

@@ -269,15 +269,15 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     },
   );
 
-  it("renders no standalone glyph — the CTA carries the upload mark inside the 44 control", () => {
+  it("renders no standalone glyph — the CTA carries the upload mark inside the 40 control", () => {
     const { container } = renderWithHouseThemes(
       <FileUpload label="Attachment" name="attachment" />,
     );
     const zone = getZone(container);
-    // The CTA is the house 44 control (held exception: Bento draws 36/$3).
+    // The CTA is the house 40 control (held exception: Bento draws 36).
     const cta = zone.querySelector("[data-mp-button-height]") as HTMLElement;
     expect(cta).toBeTruthy();
-    expect(cta.getAttribute("data-mp-button-height")).toBe("44");
+    expect(cta.getAttribute("data-mp-button-height")).toBe("40");
     // Every svg in the empty zone lives INSIDE the CTA — no standalone glyph.
     const svgs = Array.from(zone.querySelectorAll("svg"));
     expect(svgs.length).toBeGreaterThan(0);
@@ -288,7 +288,7 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(zone.textContent).toContain("Drag a file into this area");
   });
 
-  it("renders picked files as in-zone rows: name, bold size line, filled $color12 remove disc (32 painted, hitSlop 44)", async () => {
+  it("renders picked files as in-zone rows: name, bold size line, filled $color12 remove disc (29 painted, hitSlop 44)", async () => {
     const { container } = renderWithHouseThemes(
       <FileUpload label="Attachment" name="attachment" />,
     );
@@ -311,12 +311,12 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(sizeLine).toBeTruthy();
     expect(sizeLine.className).toMatch(/_fow-700/);
 
-    // Remove: a circular filled $color12 disc painted at nestedControl (32)
-    // with hitSlop restoring the 44 floor (data-mp-press-slop 6 → 32+12=44).
+    // Remove: a circular filled $color12 disc painted at nestedControl (29)
+    // with hitSlop restoring the 44 floor (data-mp-press-slop 8 → 29+16=45).
     const remove = flist.querySelector('[aria-label="Remove hello.txt"]') as HTMLElement;
     expect(remove).toBeTruthy();
-    expect(remove.getAttribute("data-nested-px")).toBe("32");
-    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
+    expect(remove.getAttribute("data-nested-px")).toBe("29");
+    expect(remove.getAttribute("data-mp-press-slop")).toBe("8");
     expect(remove.className).toMatch(/_bg-color12/);
     // The inverse ✕ rides inside the disc.
     expect(remove.querySelector("svg")).toBeTruthy();
@@ -346,20 +346,6 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     }
   });
 
-  it("keeps compact a space-only dial — CTA stays 44 and remove stays nested 32 (LC-76)", async () => {
-    const { container } = renderWithHouseThemes(
-      <FileUpload label="Attachment" name="attachment" compact />,
-    );
-    const zone = getZone(container);
-    const cta = zone.querySelector("[data-mp-button-height]") as HTMLElement;
-    expect(cta.getAttribute("data-mp-button-height")).toBe("44");
-
-    await pickFile(container, new File(["hello"], "hello.txt", { type: "text/plain" }));
-    const remove = zone.querySelector('[aria-label="Remove hello.txt"]') as HTMLElement;
-    expect(remove.getAttribute("data-nested-px")).toBe("32");
-    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
-  });
-
   it("renders image picks with an in-zone preview thumb at the nested-chrome step", async () => {
     if (typeof URL.createObjectURL !== "function") {
       (URL as any).createObjectURL = () => "blob:mock";
@@ -380,7 +366,7 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     // AC-4 image clause (Bento Image Picker): an image pick is a TILE in the
     // in-zone grid, not a row — the thumb IS the tile, and the remove disc
     // rides its top-right corner (absolute, negative inset) instead of
-    // trailing on a row. Same 32/hitSlop-44 disc the rows carry.
+    // trailing on a row. Same 29/hitSlop-44 disc the rows carry.
     const grid = flist.querySelector('[data-file-upload="tiles"]') as HTMLElement;
     expect(grid).toBeTruthy();
     const tile = grid.querySelector('[data-file-upload="tile"]') as HTMLElement;
@@ -388,8 +374,8 @@ describe("FileUpload bento-derived dropzone (MPO-57)", () => {
     expect(tile.contains(thumb)).toBe(true);
     const remove = tile.querySelector('[aria-label="Remove diagram.png"]') as HTMLElement;
     expect(remove).toBeTruthy();
-    expect(remove.getAttribute("data-nested-px")).toBe("32");
-    expect(remove.getAttribute("data-mp-press-slop")).toBe("6");
+    expect(remove.getAttribute("data-nested-px")).toBe("29");
+    expect(remove.getAttribute("data-mp-press-slop")).toBe("8");
     const corner = tile.querySelector('[data-file-upload="tile-remove"]') as HTMLElement;
     expect(corner).toBeTruthy();
     expect(corner.contains(remove)).toBe(true);