@multiplatform.one/forms 7.34.3 → 7.35.0

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>
   ),

package/src/fields/RadioGroup/index.tsx

@@ -4,6 +4,7 @@ import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
   radiusClassProps,
+  labelFontSizeFor,
   useReadableTextOn,
   wasKeyboardFocus,
   type ControlStateProps,
@@ -13,7 +14,7 @@ import {
   transitionProps,
 } from "@multiplatform.one/theme";
 import type { AnyFormApi } from "../../types";
-import type { FontSizeTokens, LabelProps, SizeTokens, TamaguiElement } from "tamagui";
+import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
 import {
   Label,
   type RadioGroupProps as TamaguiRadioGroupProps,
@@ -180,8 +181,6 @@ export interface RadioGroupProps {
   pointy?: boolean;
   /** When true, renders a skeleton placeholder instead of the radio group */
   skeleton?: boolean;
-  /** When true, uses compact sizing */
-  compact?: boolean;
   /**
    * When true, renders each option as a selection card (LC-22): radio in a
    * leading slot, bold label to its right, muted `option.description` under
@@ -284,12 +283,12 @@ function RadioOptionItem({
       borderColor={selected ? formSelectedColors.mark : formControlColors.boundary}
       {...(kbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 as const })}
       data-radio-kb-focus={kbFocus ? "true" : "false"}
-      {...transitionProps(knobProps.transition)}
+      {...transitionProps(knobProps.motion.control)}
     >
       <RadioIndicatorFrame
         borderRadius={radioDiscRadius}
         backgroundColor={onMark ?? "$color1"}
-        {...transitionProps(knobProps.transition)}
+        {...transitionProps(knobProps.motion.control)}
       />
     </RadioGlyph>
   );
@@ -304,7 +303,7 @@ function RadioOptionItem({
       // none is checked) stays in the page tab order; arrows move + select.
       {...(isWeb && isTabStop !== undefined ? { tabIndex: isTabStop ? 0 : -1 } : undefined)}
       borderRadius={radioDiscRadius}
-      transition={knobProps.transition}
+      {...transitionProps(knobProps.motion.control, ["borderWidth"])}
       disabled={groupDisabled || option.disabled}
       // LC-40 DISABLED-VISIBLE: ring is text-free chrome — dim it while the
       // sibling label stays readable (read-only never dims).
@@ -383,7 +382,6 @@ export function RadioGroup({
   radioGroupProps,
   children,
   skeleton,
-  compact,
   card,
   accessibilityLabel,
   accessibilityHint,
@@ -410,7 +408,6 @@ export function RadioGroup({
   const { resolvedForm, knobProps, control, text, elevation, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
@@ -523,7 +520,7 @@ export function RadioGroup({
       checkedEnabled >= 0 ? checkedEnabled : options.findIndex((o) => !(disabled || o.disabled));
 
     if (card) {
-      const layout = getCheckboxCardLayout(knobProps.space);
+      const layout = getCheckboxCardLayout(knobProps.sizeToken);
       const descriptionSize = getCardDescriptionSize(size || knobProps.sizeToken);
       return (
         <Container gap="$2">
@@ -562,12 +559,9 @@ export function RadioGroup({
                   index === tabStopIndex,
                 )}
                 <CheckboxCardContent>
-                  {/* fontWeight after size: the size variant's font weight
-                      would otherwise override the styled bold default */}
                   <CheckboxCardLabel
                     id={labelId}
-                    size={(size || knobProps.sizeToken) as FontSizeTokens}
-                    fontWeight="600"
+                    size={labelFontSizeFor(String(size || knobProps.sizeToken))}
                   >
                     {option.label}
                   </CheckboxCardLabel>
@@ -608,7 +602,7 @@ export function RadioGroup({
                       importantForAccessibility: "no-hide-descendants" as const,
                     }
                   : undefined)}
-                size={(size || knobProps.sizeToken) as FontSizeTokens}
+                size={labelFontSizeFor(String(size || knobProps.sizeToken))}
                 {...knobProps.body}
                 color={knobProps.textAccentColor}
                 hoverStyle={{ color: knobProps.textAccentColor, ...text.hoverKnobProps }}

package/src/fields/Rating/Rating.spec.tsx

@@ -139,10 +139,7 @@ describe("Rating", () => {
       expect(empty).toBeTruthy();
       expect(filled!.getAttribute("data-color")).toContain("accentBackground");
       expect(empty!.getAttribute("data-color")).not.toContain("accentBackground");
-      // DF-06 / WCAG 1.4.11: empty stars are graphical objects — $color7 is
-      // below the 3:1 boundary floor; the empty ring uses the same boundary
-      // token as Radio.
-      expect(empty!.getAttribute("data-color")).toContain("color10");
+      expect(empty!.getAttribute("data-color")).toContain("boundaryColor");
     });
 
     // Material Rating is a radio group: one checked value, stars 1..N fill as

package/src/fields/Rating/index.tsx

@@ -1,3 +1,5 @@
+import { transitionProps } from "@multiplatform.one/theme";
+import { cssAnimationConfig } from "@multiplatform.one/theme";
 import type { KnobProps } from "@multiplatform.one/theme";
 import {
   ensureKeyboardModalityTracking,
@@ -95,22 +97,11 @@ function PointyStar({
   );
 }
 
-// CSS timing strings for web transitions (mirrors theme animation config)
-const cssTimings: Record<string, string> = {
-  bouncy: "ease-in 200ms",
-  lazy: "ease-in 600ms",
-  slow: "ease-in 500ms",
-  medium: "ease-in-out 250ms",
-  quick: "ease-in 100ms",
-  tooltip: "ease-in 400ms",
-  snappy: "ease-out 80ms",
-  gentle: "ease-in-out 450ms",
-};
-
 /** LC-25: discrete fill jumps tween; omit when animation knob is none or scrubbing. */
 function getTransitionStyle(transition: TransitionProp | undefined, live: boolean) {
   if (!isWeb || live || !transition) return undefined;
-  const timing = cssTimings[transition as string] ?? cssTimings.quick;
+  const timing =
+    cssAnimationConfig[transition as keyof typeof cssAnimationConfig] ?? cssAnimationConfig.quick;
   return {
     transition: [`transform ${timing}`, `opacity ${timing}`, `color ${timing}`].join(", "),
   };
@@ -137,7 +128,7 @@ function ensureRatingInkStyles() {
   // the root's `fill` and the shape INHERITS it, so arming both would leave
   // the shape chasing an already-animating value and stretch the tween well
   // past the token.
-  style.textContent = Object.entries(cssTimings)
+  style.textContent = Object.entries(cssAnimationConfig)
     .map(
       ([token, timing]) =>
         `.${inkClassName(token)} svg * { transition: fill ${timing}, stroke ${timing}; }`,
@@ -205,14 +196,14 @@ function StarRow({
   // scrub, omit transition so fill tracks the pointer 1:1. `transition` is
   // undefined exactly at animation="none" (which prefers-reduced-motion maps
   // onto), and Axiom 3 says that position is NO motion — not a default one.
-  const motionTransition = knobProps.transition as TransitionProp | undefined;
+  const motionTransition = knobProps.motion.control.transition as TransitionProp | undefined;
   const live = scrubbing;
   const allowMotion = Boolean(motionTransition);
   ensureRatingInkStyles();
   if (isWeb) ensureKeyboardModalityTracking();
   const inkToken =
     isWeb && !live && motionTransition
-      ? (motionTransition as string) in cssTimings
+      ? (motionTransition as string) in cssAnimationConfig
         ? (motionTransition as string)
         : "quick"
       : undefined;
@@ -393,7 +384,7 @@ function StarRow({
             {...(!isWeb ? { accessible: true } : {})}
             data-rating-star={isFilled ? "filled" : "empty"}
             data-rating-index={starNumber}
-            {...(!isWeb && !live ? { transition: motionTransition } : {})}
+            {...(!isWeb && !live ? transitionProps(knobProps.motion.control) : {})}
             {...(inkToken ? { className: inkClassName(inkToken) } : undefined)}
             style={getTransitionStyle(live ? undefined : motionTransition, live)}
           >
@@ -453,8 +444,6 @@ export interface RatingProps {
   pointy?: boolean;
   /** When true, renders a skeleton placeholder instead of the rating */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
 }
 
 export function Rating({
@@ -478,9 +467,8 @@ export function Rating({
   starIcon,
   pointy,
   skeleton,
-  compact,
 }: RatingProps) {
-  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp, compact });
+  const { resolvedForm, knobProps, id } = useFormField({ form: formProp, id: idProp });
   const inTableCell = useIsInTableCell();
   const resolvedPointy = pointy ?? knobProps.pointy;
   // Sane bare default (UX-009): an omitted starIcon renders the package star
@@ -502,8 +490,7 @@ export function Rating({
   const filledColor = getVariable(
     (theme as any)[markToken]?.get("web") ?? theme.color10?.get("web") ?? theme.color?.get("web"),
   );
-  // DF-06 / WCAG 1.4.11: empty stars are graphical objects. $color7 is below
-  // the 3:1 boundary floor; Radio's empty ring uses the same boundary token.
+  // DF-06 / WCAG 1.4.11: empty stars need the build-held 3:1 boundary ink.
   const emptyColor = getVariable(
     (theme as any)[emptyToken]?.get("web") ?? theme.color10?.get("web") ?? theme.color?.get("web"),
   );