@multiplatform.one/forms 7.34.4 → 7.36.0

package/src/fields/Input/index.tsx

@@ -67,8 +67,8 @@ export interface InputProps {
   readOnly?: boolean;
   linkResolver?: LinkResolver;
   /**
-   * Painted control height (Tamagui size token). Orthogonal to `compact`:
-   * density steps the knob sizeToken, `size` ejects the box height.
+   * Control size token (Tamagui's own `size`, e.g. `"$3"`), clamped to the
+   * nearest `<Surface size>` ceiling (LC-78). Omitted = the ambient token.
    */
   size?: SizeTokens;
   id?: string;
@@ -103,11 +103,6 @@ export interface InputProps {
   children?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the input */
   skeleton?: boolean;
-  /**
-   * Density override. Compact steps knob size+space down one level; it is
-   * not a `size` token. Default remains comfortable (44px painted box).
-   */
-  compact?: boolean;
   /** When true, renders without borders/background (for toolbar integration) */
   chromeless?: boolean;
   /**
@@ -156,7 +151,6 @@ export function Input({
   inputProps,
   children,
   skeleton,
-  compact,
   chromeless,
   copy,
   onCopyResult,
@@ -165,7 +159,7 @@ export function Input({
   const { resolvedForm, knobProps, control, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
+    size,
   });
   const inputRef = useRef<TamaguiElement>(null);
   const focusTrigger = useForwardFocus(inputRef);
@@ -177,9 +171,7 @@ export function Input({
   // autoComplete/keyboardType/inputProps below eject per key.
   const purposeInputProps = resolveFieldInputProps(purpose, autoComplete);
 
-  // density ≠ size: compact steps knobProps.sizeToken; an explicit `size`
-  // ejects only the painted box height and leaves density alone.
-  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const resolvedSize = knobProps.sizeToken as SizeTokens;
   const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
   const belowFloor = visualHeight < MIN_PRESS_TARGET;
   const visibleLabel = labelHidden ? undefined : label;
@@ -188,8 +180,7 @@ export function Input({
 
   const boxContract = {
     size: resolvedSize,
-    "data-density": knobProps.density,
-    "data-size": String(resolvedSize),
+    "data-size-token": String(resolvedSize),
     "data-visual-height": String(visualHeight),
     "data-press-floor": belowFloor ? "slop" : "box",
     "data-ring-target": "box",
@@ -321,6 +312,7 @@ export function Input({
           ) : (
             <InputParts.Area
               ref={inputRef}
+              size={resolvedSize}
               value={inputValue ?? ""}
               readOnly
               id={id}
@@ -334,6 +326,7 @@ export function Input({
         ) : (
           <InputParts.Area
             ref={inputRef}
+            size={resolvedSize}
             {...(purposeInputProps.inputMode !== undefined
               ? { inputMode: purposeInputProps.inputMode }
               : undefined)}

package/src/fields/MentionInput/MentionInput.spec.tsx

@@ -217,7 +217,7 @@ describe("MentionInput", () => {
     // LC-73: overlay rows paint nestedControl (32px at medium), not a raw 28.
     const slots = listbox.querySelectorAll("[data-media-slot]");
     expect(slots.length).toBe(2);
-    expect(slots[0]?.getAttribute("data-media-slot")).toBe("32");
+    expect(slots[0]?.getAttribute("data-media-slot")).toBe("29");
   });
 
   // Same contract every other FloatingPanel consumer honors, reached by a

package/src/fields/MentionInput/MentionInput.stories.tsx

@@ -28,7 +28,6 @@ const meta: Meta<typeof MentionInput> = {
     required: { control: "boolean", description: "Mark field as required" },
     disabled: { control: "boolean", description: "Disable the input" },
     readOnly: { control: "boolean", description: "Read-only display" },
-    compact: { control: "boolean", description: "Use compact density (tighter layout gaps)" },
     size: { control: "select", options: ["$2", "$3", "$4"], description: "Field size" },
     minHeight: { control: "number", description: "Minimum height of input" },
     maxHeight: { control: "number", description: "Maximum height of input" },
@@ -185,7 +184,7 @@ export const Sizes: Story = {
         placeholder="Type @ to mention"
       />
       <MentionInput
-        label="Medium (default)"
+        label="Medium ($3)"
         size="$3"
         mentions={[userMentions]}
         placeholder="Type @ to mention"

package/src/fields/MentionInput/index.tsx

@@ -24,7 +24,7 @@ import { formCommonColors, formInputColors } from "../../shared/colorRamps";
 import { ScrollArrow } from "../../shared/floatingList";
 import { Skeleton } from "../../Skeleton";
 import { zIndex } from "../../shared/zIndex";
-import { useFloatingPanel, panelTransition } from "../../FloatingPanel";
+import { useFloatingPanel } from "../../FloatingPanel";
 import { PanelPortal } from "../../FloatingPanel/PanelPortal";
 import { Field, FieldLayout } from "../../fieldLayout";
 import {
@@ -148,8 +148,6 @@ export type MentionInputProps<
     textAreaProps?: Record<string, any>;
     /** When true, renders a skeleton placeholder instead of the mention input */
     skeleton?: boolean;
-    /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-    compact?: boolean;
   };
 
 const blurCloseDelayMs = 150;
@@ -157,7 +155,7 @@ const zeroWidthSpace = "\u200b";
 
 // One fontSize step below the field size token \u2014 the T-HELPER register for the
 // secondary (role/description) line, matching the shared suggestion-row recipe.
-const helperFontSizeMap: Record<string, string> = { $3: "$2", $4: "$3", $5: "$4" };
+const helperFontSizeMap: Record<string, string> = { $3: "$2", $4: "$3", $true: "$3", $5: "$4" };
 
 // LC-01 SP-EDGE-MENU: the row spans the full menu width and owns ALL padding
 // (the overlay container owns only its border), so the active/hover highlight
@@ -269,12 +267,11 @@ export function MentionInput<
     size,
     onBlur,
     skeleton,
-    compact,
     id: idProp,
     value: valueProp,
   } = 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 resolvedSizeToken = (size || knobProps.sizeToken) as SizeTokens;
   const minHeight = minHeightProp ?? getFieldHeight(resolvedSizeToken, 3, hydrationTouch);
@@ -815,7 +812,7 @@ export function MentionInput<
             overflow: "auto",
             opacity: panel.visible ? 1 : 0,
             transform: panel.visible ? "scale(1)" : "scale(0.96)",
-            transition: panel.knobProps.transition ? panelTransition : "none",
+            transition: panel.panelTransition,
             transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
           },
           onScroll: (e: any) => panel.updateArrows(e.target as HTMLElement),
@@ -944,7 +941,6 @@ export function MentionInput<
       helperText={helperText}
       required={required}
       size={size}
-      compact={compact}
       onBlur={(...args: any[]) => {
         handleBlurInternal(...args);
         if (fieldBlurHandler) {

package/src/fields/OTPInput/OtpInput.spec.tsx

@@ -680,7 +680,7 @@ describe("OTPInput", () => {
       "large",
       "full",
     ] as const satisfies readonly BorderRadius[];
-    const TOKEN_SCALE = { none: 0, small: 5, medium: 9, large: 16 } as const;
+    const TOKEN_SCALE = { none: 0, small: 4, medium: 8, large: 14 } as const;
 
     function paintedRadiusPx(el: Element): number {
       const inline = (el as HTMLElement).style.borderRadius;
@@ -716,7 +716,7 @@ describe("OTPInput", () => {
     it("cell measures height/2 at full and 0 at none, riding the token scale between", () => {
       // the cell's own painted edge — `height={cellSize}` is the `$size` token,
       // so the circle is that token halved. Reading the recipe here instead would
-      // pass on a desktop run and lie on a touch one (recipe $4 = 48 vs token 44).
+      // pass on a desktop run and lie when touch grows a smaller control.
       const heightPx = getVariableValue(getSize("$4" as SizeTokens)) as number;
       for (const stop of RADIUS_STOPS) {
         const result = renderWithProviders(
@@ -741,11 +741,11 @@ describe("OTPInput", () => {
       for (const token of ["$2", "$3", "$4", "$6"] as const) {
         const painted = getVariableValue(getSize(token as SizeTokens)) as number;
         expect(otpCellHeightPx(token), `painted height @ ${token}`).toBe(painted);
-        // The recipe's touch column is a different number at EVERY step (44/44/48/68
-        // against 28/36/44/64). Halving it puts the radius past the cell's own edge,
-        // and the engine clamps it back — the browser clamp MPO-56 exists to kill.
         const touchHeight = sizeRecipeForToken(token, { touch: true }).height;
-        expect(touchHeight, `touch recipe @ ${token}`).not.toBe(painted);
+        expect(touchHeight, `touch recipe @ ${token}`).toBe(
+          Math.max(sizeRecipeForToken(token).height, 44),
+        );
+        if (token === "$2" || token === "$3") expect(touchHeight).not.toBe(painted);
         expect(
           resolveRadiusClass("CIRCULAR-AT-FULL", "full", { heightPx: otpCellHeightPx(token) }),
           `full @ ${token}`,

package/src/fields/OTPInput/OtpInput.stories.tsx

@@ -155,7 +155,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <OTPInput label="Small" size="$2" length={6} />
-      <OTPInput label="Medium (default)" size="$3" length={6} />
+      <OTPInput label="Medium ($3)" size="$3" length={6} />
       <OTPInput label="Large" size="$4" length={6} />
     </YStack>
   ),

package/src/fields/OTPInput/index.tsx

@@ -66,8 +66,6 @@ export type OTPInputProps<
     inputProps?: Omit<ComponentProps<typeof Input>, "value" | "onChangeText" | "ref">;
     /** When true, renders a skeleton placeholder instead of the OTP input */
     skeleton?: boolean;
-    /** When true, uses compact sizing */
-    compact?: boolean;
   };
 
 type OTPType = "numeric" | "alphanumeric" | "password";
@@ -282,7 +280,9 @@ const OTPDigitInput = memo(function OTPDigitInput({
       {...(isWeb
         ? {
             tabIndex: -1,
-            className: knobProps.transition ? "mp-otp-cell" : "mp-otp-cell mp-otp-motion-none",
+            className: knobProps.motion.control.transition
+              ? "mp-otp-cell"
+              : "mp-otp-cell mp-otp-motion-none",
             style: { boxShadow: "none", borderRadius: cellRadius },
           }
         : {})}
@@ -731,13 +731,12 @@ export function OTPInput<
     disabled,
     readOnly,
     skeleton,
-    compact,
     id: idProp,
     ...fieldProps
   } = useProps(props);
 
   const hydrationTouch = useTouchSurface();
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
   const resolvedValidators = useResolvedValidators(
     fieldProps.required,
     validators,

package/src/fields/OTPInput/otpCellHeightTouch.spec.ts

@@ -5,7 +5,7 @@ import { describe, expect, it, vi } from "vitest";
  * surface probe is module-level state: `getFieldHeight` reads `isTouchSurface()`
  * on every call, and a desktop run cannot tell the painted token from the recipe
  * height (they are the same number there). Only on a touch surface do the two
- * ladders separate — 28/36/44/64 painted against 44/44/48/68 recipe — which is
+ * heights separate below the touch floor, which is
  * where a resolver fed the wrong one hands the circle back to the engine clamp.
  */
 vi.mock("@multiplatform.one/theme", async () => {
@@ -24,10 +24,11 @@ import { otpCellHeightPx } from "./index";
 const tokens = ["$2", "$3", "$4", "$6"] as const;
 
 describe("OTP cell geometry on a touch surface (DG-RAD-02)", () => {
-  it("the two ladders really do separate, or this file proves nothing", () => {
-    for (const token of tokens) {
+  it("touch grows smaller controls beyond the cell they would paint", () => {
+    for (const token of ["$2", "$3"] as const) {
       const painted = getVariableValue(getSize(token as SizeTokens)) as number;
-      expect(getFieldHeight(token as SizeTokens), `recipe height @ ${token}`).not.toBe(painted);
+      expect(painted).toBeLessThan(44);
+      expect(getFieldHeight(token as SizeTokens), `recipe height @ ${token}`).toBe(44);
     }
   });
 

package/src/fields/PhoneInput/PhoneInput.spec.tsx

@@ -460,12 +460,9 @@ describe("PhoneInput", () => {
       expect(dial?.textContent).toMatch(/^\+\d+/);
     });
 
-    it("compact and size still mount without throwing (LC-76)", () => {
-      expect(() => renderWithProviders(<PhoneInput label="Phone" compact />)).not.toThrow();
+    it("a size token mounts without throwing (LC-100)", () => {
+      expect(() => renderWithProviders(<PhoneInput label="Phone" size="$3" />)).not.toThrow();
       expect(() => renderWithProviders(<PhoneInput label="Phone" size="$5" />)).not.toThrow();
-      expect(() =>
-        renderWithProviders(<PhoneInput label="Phone" compact size="$5" />),
-      ).not.toThrow();
     });
 
     it("skeleton keeps flag+number bones and hides the field (LC-20)", () => {

package/src/fields/PhoneInput/PhoneInput.stories.tsx

@@ -138,7 +138,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <PhoneInput label="Small" size="$2" defaultCountry="US" />
-      <PhoneInput label="Medium (default)" size="$3" defaultCountry="US" />
+      <PhoneInput label="Medium ($3)" size="$3" defaultCountry="US" />
       <PhoneInput label="Large" size="$4" defaultCountry="US" />
     </YStack>
   ),

package/src/fields/PhoneInput/index.tsx

@@ -90,7 +90,6 @@ export type PhoneInputProps<
     value?: string;
     onChange?: (value: string) => void;
     skeleton?: boolean;
-    compact?: boolean;
   };
 
 interface PhoneInputFieldRendererProps<TData> {
@@ -206,12 +205,11 @@ export function PhoneInput<
     onChange,
     value: valueProp,
     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 inTableCell = useIsInTableCell();
   const countryOptions = useMemo(() => getCountryOptions(), []);

package/src/fields/Progress/Progress.spec.tsx

@@ -3,6 +3,9 @@ import { render } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import {
   Preset,
+  contrastRatio,
+  normalizeToHex,
+  relativeLuminance,
   createThemesBuilder,
   defaultAccentTheme,
   defaultBaseTheme,
@@ -33,9 +36,9 @@ const houseConfig = createTamagui({
   themes: houseThemes as any,
 });
 
-function renderWithHouseThemes(ui: ReactElement) {
+function renderWithHouseThemes(ui: ReactElement, scheme: "light" | "dark" = "light") {
   return render(
-    <TamaguiProvider config={houseConfig} defaultTheme="light" disableInjectCSS>
+    <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
       {ui}
     </TamaguiProvider>,
   );
@@ -101,21 +104,35 @@ describe("Progress", () => {
   });
 
   describe("intent", () => {
-    it("default keeps the gray form ramp: no intent theme scope, no intent fill token", () => {
-      const { container } = renderWithHouseThemes(<Progress label="Default" name="d" value={50} />);
-      const bar = container.querySelector("[role='progressbar']") as Element;
-      const indicator = getIndicator(container) as Element;
-      expect(indicator).toBeTruthy();
-      // No intent sub-theme scope anywhere inside the bar
-      for (const scope of [".t_accent", ".t_error", ".t_warning", ".t_success"]) {
-        expect(bar.querySelector(scope)).toBeNull();
-      }
-      // Fill stays on the ProgressIndicator component theme's gray form ramp
-      // (the pre-intent default) — not an intent token.
-      expect(indicator.className).toContain("_bg-background");
-      expect(indicator.className).not.toContain("_bg-color9");
-      expect(indicator.className).not.toContain("_bg-accentBackg");
-    });
+    it.each(["light", "dark"] as const)(
+      "%s default indicator resolves boundaryColor and holds 3:1 on track and page",
+      (scheme) => {
+        const { container } = renderWithHouseThemes(
+          <Progress label="Default" value={50} />,
+          scheme,
+        );
+        const bar = container.querySelector("[role='progressbar']") as Element;
+        const indicator = getIndicator(container) as Element;
+        expect(indicator).toBeTruthy();
+        expect(indicator.className).toContain("_bg-boundaryCol");
+        expect(bar.className).toContain("_bg-color5");
+        for (const scope of [".t_accent", ".t_error", ".t_warning", ".t_success"]) {
+          expect(bar.querySelector(scope)).toBeNull();
+        }
+        const fill = houseConfig.themes[`${scheme}_ProgressIndicator`].boundaryColor?.val;
+        expect(fill).toBe(houseThemes[scheme].boundaryColor);
+        expect(fill).toBeTruthy();
+        const fillHex = normalizeToHex(String(fill));
+        expect(fillHex).toBeTruthy();
+        for (const surface of [houseThemes[scheme].color5, houseThemes[scheme].background]) {
+          const surfaceHex = normalizeToHex(surface);
+          expect(surfaceHex).toBeTruthy();
+          expect(
+            contrastRatio(relativeLuminance(fillHex!), relativeLuminance(surfaceHex!)),
+          ).toBeGreaterThanOrEqual(3);
+        }
+      },
+    );
 
     it("accent fills from the base theme's $accentBackground without a sub-theme scope", () => {
       const { container } = renderWithHouseThemes(
@@ -140,10 +157,6 @@ describe("Progress", () => {
         const indicator = getIndicator(container) as Element;
         // The Intent wrapper scopes the hue sub-theme around the indicator...
         expect(bar.querySelector(`.t_${intent}`)).toBeTruthy();
-        // ...and the fill is the hue sub-theme's $color9 — captured as a
-        // concrete value from the Intent scope, so Tamagui's auto-applied
-        // ProgressIndicator COMPONENT theme (whose re-ramped color9 is a
-        // pale wash, not the solid) cannot re-resolve it.
         const hueSolid = houseThemes[`light_${intent}`].color9;
         expect(hueSolid).toBeTruthy();
         expect(indicator.className).toContain(`_bg-hsla${hslDigits(hueSolid)}`);

package/src/fields/Progress/Progress.stories.tsx

@@ -19,7 +19,6 @@ const meta: Meta<typeof Progress> = {
     required: { control: "boolean", description: "Mark field as required" },
     readOnly: { control: "boolean", description: "Read-only semantics (display-only)" },
     skeleton: { control: "boolean", description: "Render a skeleton placeholder" },
-    compact: { control: "boolean", description: "Use compact sizing" },
     showValue: {
       control: "boolean",
       description: "Show the percent beside the track (defaults on when labeled)",
@@ -111,9 +110,8 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <Progress label="Small" size="$2" value={40} max={100} />
-      <Progress label="Medium (default)" size="$3" value={60} max={100} />
+      <Progress label="Medium ($3)" size="$3" value={60} max={100} />
       <Progress label="Large" size="$4" value={80} max={100} />
-      <Progress label="Compact density" compact value={55} max={100} />
     </YStack>
   ),
 };
@@ -198,14 +196,14 @@ export const Comparison: Story = {
   },
   render: () => (
     <XStack gap="$6" alignItems="flex-start" padding="$4">
-      <YStack gap="$3" width={300}>
+      <YStack gap="$3" width={300} maxWidth="100%">
         <Paragraph size="$2" color="$placeholderColor">
           Custom Progress
         </Paragraph>
         <Progress value={67} max={100} />
       </YStack>
 
-      <YStack gap="$3" width={300}>
+      <YStack gap="$3" width={300} maxWidth="100%">
         <Paragraph size="$2" color="$placeholderColor">
           Tamagui Progress
         </Paragraph>

package/src/fields/Progress/index.tsx

@@ -1,6 +1,7 @@
+import { transitionOrInstant } from "../../shared/instantMotion";
 import type { ReactNode } from "react";
 import type { AnyFormApi } from "../../types";
-import { Intent } from "@multiplatform.one/theme";
+import { Intent, transitionProps, type MotionRole } from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import { getSize } from "@tamagui/get-token";
 import type { LabelProps, SizeTokens } from "tamagui";
@@ -17,7 +18,7 @@ import {
 } from "tamagui";
 import { Field, FieldLayout, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
-import { formControlColors } from "../../shared/colorRamps";
+import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { bidiIsolate, t } from "../../shared/t";
 import {
@@ -41,7 +42,7 @@ const ProgressFrame = styled(TamaguiProgress, {
 });
 
 const ProgressIndicator = styled(TamaguiProgress.Indicator, {
-  backgroundColor: formControlColors.border,
+  backgroundColor: formControlColors.boundary,
 });
 
 /** Semantic indicator intent — matches the theme's Intent union. */
@@ -72,12 +73,8 @@ function clampProgress(value: unknown, max: number): number {
   return Math.min(max, Math.max(0, n));
 }
 
-function indicatorMotion(transition: KnobProps["transition"]) {
-  // `transition` only — the tamagui 1.x `animation` prop is silently dropped
-  // on 2.x (convention lint). Named motion rides the knob; `none` is an
-  // explicit stop so Tamagui's Indicator default cannot keep tweening (LC-32).
-  if (!transition) return { transition: "none" as const };
-  return { transition };
+function indicatorMotion(role: MotionRole) {
+  return transitionProps({ ...role, transition: transitionOrInstant(role.transition) });
 }
 
 /**
@@ -86,17 +83,16 @@ function indicatorMotion(transition: KnobProps["transition"]) {
  * the hue sub-theme. Captured as a concrete value (Button focus-ring
  * precedent) rather than passed as a token: a `$color9` token on the
  * indicator itself would re-resolve inside Tamagui's auto-applied
- * `ProgressIndicator` COMPONENT sub-theme, whose re-ramped `color9` is a
- * pale wash — not the hue solid. useTheme() subscribes, so scheme changes
- * stay live.
+ * `ProgressIndicator` component sub-theme. Capturing here keeps the hue
+ * scope explicit. useTheme() subscribes, so scheme changes stay live.
  */
-function HueFillIndicator({ transition }: { transition: KnobProps["transition"] }) {
+function HueFillIndicator({ motion }: { motion: MotionRole }) {
   const theme = useTheme();
   const fill = theme.color9?.val;
   return (
     <ProgressIndicator
       {...(fill ? { backgroundColor: fill as any } : undefined)}
-      {...indicatorMotion(transition)}
+      {...indicatorMotion(motion)}
     />
   );
 }
@@ -126,15 +122,13 @@ export interface ProgressProps {
   progressProps?: Omit<TamaguiProgressProps, "value" | "max" | "id" | "children">;
   /**
    * Semantic indicator fill resolved via the theme ramps (LC-05): `accent`
-   * fills with the base theme's `$accentBackground`; `error`/`warning`/
-   * `success` ride their hue sub-theme's `$color9`. Omit to keep the gray
-   * form ramp.
+   * fills with the shared accent mark; `error`/`warning`/
+   * `success` ride their hue sub-theme's `$color9`. Omit for the build-held
+   * `$boundaryColor` fill.
    */
   intent?: ProgressIntent;
   /** When true, renders a skeleton placeholder instead of the progress bar */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
   /**
    * Visible percent beside the track (Primer / Polaris text pairing).
    * Defaults on when a field label is present; unlabeled embeds and table
@@ -181,7 +175,7 @@ function ProgressTrack({
   const describedBy = useFieldDescribedBy();
   const trackSize = size ?? sizeToken;
   const percent = Math.round((progressValue / max) * 100);
-  const motion = indicatorMotion(knobProps.transition);
+  const motion = indicatorMotion(knobProps.motion.slide);
   const name = typeof label === "string" && label ? label : t("Progress");
 
   const progressElement = (
@@ -209,15 +203,15 @@ function ProgressTrack({
     >
       {intent && intent !== "accent" ? (
         <Intent name={intent}>
-          <HueFillIndicator transition={knobProps.transition} />
+          <HueFillIndicator motion={knobProps.motion.slide} />
         </Intent>
       ) : (
-        // `accent` rides the base theme's `$accentBackground` — the exact
-        // fill the bespoke XP bar used (the "accent" sub-theme is the SOLID
-        // ramp, wrong for a fill; same reasoning as Gantt bars / Toast).
-        // undefined keeps the styled default (gray form ramp) untouched.
+        // Accent fills use the mark channel without a solid sub-theme scope.
+        // The default fill must hold 3:1 against both the track and page (DF-06).
         <ProgressIndicator
-          backgroundColor={intent === "accent" ? "$accentBackground" : undefined}
+          backgroundColor={
+            intent === "accent" ? formSelectedColors.mark : formControlColors.boundary
+          }
           {...motion}
         />
       )}
@@ -281,13 +275,11 @@ export function Progress({
   progressProps,
   intent,
   skeleton,
-  compact,
   showValue: showValueProp,
 }: ProgressProps) {
   const { resolvedForm, knobProps, elevation, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const resolvedMax = resolveMax(max);

package/src/fields/RadioGroup/RadioGroup.stories.tsx

@@ -264,7 +264,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <RadioGroup label="Small" size="$2" options={sampleOptions} />
-      <RadioGroup label="Medium (default)" size="$3" options={sampleOptions} />
+      <RadioGroup label="Medium ($3)" size="$3" options={sampleOptions} />
       <RadioGroup label="Large" size="$4" options={sampleOptions} />
     </YStack>
   ),