@multiplatform.one/forms 7.34.3 → 7.35.0

package/src/fields/Select/Select.stories.tsx

@@ -1,3 +1,4 @@
+import { transitionProps } from "@multiplatform.one/theme";
 import React, { useState } from "react";
 import { action } from "@multiplatform.one/storybook";
 import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
@@ -219,14 +220,14 @@ export const WithError: Story = {
 export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
-      <Select label="Small" size="$2" options={sampleOptions} placeholder="Small select" />
+      <Select label="Small" size="$3" options={sampleOptions} placeholder="Small select" />
       <Select
         label="Medium (default)"
-        size="$3"
+        size="$4"
         options={sampleOptions}
         placeholder="Medium select"
       />
-      <Select label="Large" size="$4" options={sampleOptions} placeholder="Large select" />
+      <Select label="Large" size="$5" options={sampleOptions} placeholder="Large select" />
     </YStack>
   ),
 };
@@ -375,7 +376,7 @@ export const Comparison: StoryObj<typeof Select> = {
       );
       return (
         <XStack gap="$4" alignItems="flex-start" padding="$4">
-          <YStack gap="$2" width={320}>
+          <YStack gap="$2" width={320} maxWidth="100%">
             <Paragraph size="$2" color="$placeholderColor">
               Custom Select
             </Paragraph>
@@ -391,7 +392,7 @@ export const Comparison: StoryObj<typeof Select> = {
             />
           </YStack>
 
-          <YStack gap="$2" width={320}>
+          <YStack gap="$2" width={320} maxWidth="100%">
             <Paragraph size="$2" color="$placeholderColor">
               Tamagui Select
             </Paragraph>
@@ -406,12 +407,12 @@ export const Comparison: StoryObj<typeof Select> = {
                 <TamaguiSelect.Value placeholder="Select an option" />
               </TamaguiSelect.Trigger>
               {!isDesktop ? (
-                <Sheet modal dismissOnSnapToBottom transition={knobProps.transition}>
+                <Sheet modal dismissOnSnapToBottom {...transitionProps(knobProps.motion.slide)}>
                   <Sheet.Frame>
                     <Sheet.ScrollView>{selectItems}</Sheet.ScrollView>
                   </Sheet.Frame>
                   <Sheet.Overlay
-                    transition={knobProps.transition}
+                    {...transitionProps(knobProps.motion.scrim)}
                     enterStyle={{ opacity: 0 }}
                     exitStyle={{ opacity: 0 }}
                   />

package/src/fields/Select/index.tsx

@@ -49,7 +49,6 @@ import { ScrollArrow } from "../../shared/floatingList";
 import {
   FloatingPanel,
   useFloatingPanel,
-  panelTransition,
   panelViewportPadding,
   useViewportGtSm,
 } from "../../FloatingPanel";
@@ -111,8 +110,6 @@ export interface SelectProps {
   /** When true, renders a skeleton placeholder instead of the select */
   skeleton?: boolean;
   "aria-label"?: string;
-  /** When true, uses compact sizing */
-  compact?: boolean;
   /**
    * Opt into the OS picker on iOS (ActionSheet). Ignored on web, when
    * `multiple` is set, and on Android (the catalog sheet stays). Default false.
@@ -295,13 +292,13 @@ function selectItemRingProps(isActive: boolean, kbNav: boolean) {
 /**
  * Resolve the LC-05 selected-mark token to a real paint (MPO-63).
  *
- * MPO-65 put `formSelectedColors.mark` ("$accentBackground") on the tick, but a
+ * MPO-65 put `formSelectedColors.mark` (the accent solid) on the tick, but a
  * phosphor glyph is NOT a Tamagui styled component: its IconBase writes the
- * prop straight into `<svg fill>`. On web "$accentBackground" is not a valid
+ * prop straight into `<svg fill>`. On web a `$token` string is not a valid
  * paint, so the declaration is dropped and `fill` falls back to its initial
  * value — an opaque BLACK tick, measured 1.19:1 against the `$color2` selected
  * row. On native the shim can only resolve a token the theme in scope actually
- * carries, and the component sub-themes carry no `accentBackground` at all.
+ * carries, and the component sub-themes carry no accent solid at all.
  * Resolve it here, where the value becomes a paint — the same shape as
  * `mutedColor` in Combobox. Keyed off the ramp constant so the token stays
  * declared once in colorRamps, and degrading to `$color` ink rather than black
@@ -432,8 +429,8 @@ const SelectItem = memo(function SelectItem({
       active={isActive}
       aria-selected={isSelected}
       data-state={isSelected ? "active" : "inactive"}
-      height={ctx.knobProps.control.height}
-      // LC-18 KNOB-TOTALITY (UX-021): menu rows re-rhythm with the space knob —
+      height={ctx.knobProps.menuRow.minHeight}
+      // LC-18 KNOB-TOTALITY (UX-021): menu rows re-rhythm with the spacing roles —
       // horizontal inset from the panelPadding token (SP-EDGE, sidebar-row
       // precedent) over menuRowFrame's static $3; in-row gap rides the gap
       // fragment.
@@ -457,7 +454,7 @@ const SelectItem = memo(function SelectItem({
                 : formInputColors.background.focus,
             },
           })}
-      {...transitionProps(ctx.knobProps.transition)}
+      {...transitionProps(ctx.knobProps.motion.control)}
     >
       <Text
         fontFamily={ctx.knobProps.body.fontFamily}
@@ -509,6 +506,7 @@ function FloatingSelectCore({
   selectedOrder,
   dismissible,
 }: FloatingSelectCoreProps) {
+  const { style: elevatedSurfaceStyle, ...elevatedSurfaceProps } = knobProps.elevatedSurface;
   const hydrationTouch = useTouchSurface();
   const inTableCell = useIsInTableCell();
   const describedBy = useFieldDescribedBy();
@@ -768,7 +766,7 @@ function FloatingSelectCore({
     panel.initializingRef.current = false;
 
     void dropdownElement.offsetHeight;
-    if (isInitial) dropdownElement.style.transition = panelTransition;
+    if (isInitial) dropdownElement.style.transition = panel.panelTransition;
     requestAnimationFrame(() => {
       if (dropdownElement) {
         panel.updateArrows(dropdownElement);
@@ -777,7 +775,14 @@ function FloatingSelectCore({
         });
       }
     });
-  }, [selectedIndex, panel.refs, panel.updateArrows, panel.placement, options.length]);
+  }, [
+    selectedIndex,
+    panel.refs,
+    panel.updateArrows,
+    panel.placement,
+    panel.panelTransition,
+    options.length,
+  ]);
 
   repositionRef.current = repositionOverlay;
 
@@ -1106,10 +1111,10 @@ function FloatingSelectCore({
                   overflow: "auto",
                   ...panel.floatingStyleRef.current,
                   ...(overlayStyle.current ? { maxHeight: overlayStyle.current.maxHeight } : {}),
-                  boxShadow: "0px 8px 28px rgba(0,0,0,0.12), 0px 2px 6px rgba(0,0,0,0.04)",
+                  ...elevatedSurfaceStyle,
                   opacity: panel.visible ? 1 : 0,
                   transform: panel.visible ? "scale(1)" : "scale(0.96)",
-                  transition: panelTransition,
+                  transition: panel.panelTransition,
                   transformOrigin: panel.placement.startsWith("top") ? "bottom left" : "top left",
                   ...dragProps.style,
                 },
@@ -1147,10 +1152,8 @@ function FloatingSelectCore({
                 },
                 onScroll: handleScroll,
               })}
-              backgroundColor="$background"
+              {...elevatedSurfaceProps}
               borderRadius={panel.dropdownRadius}
-              borderWidth={panel.hasBorder ? knobProps.borderRadius.borderWidth : 0}
-              borderColor={panel.hasBorder ? formInputColors.border.focus : "transparent"}
               data-testid="select-dropdown"
               paddingVertical={0}
             >
@@ -1289,7 +1292,6 @@ function NativeSelectCore({
 
   const textColor = knobProps.textAccentColor;
   const markColor = useSelectedMarkColor();
-  const sheetTransition = knobProps.transition ?? "medium";
   const hasScrollableContent = displayOptions.length > 6;
 
   const selectedIndex = displayOptions.findIndex((o) => o.value === value);
@@ -1402,11 +1404,11 @@ function NativeSelectCore({
             flexDirection="row"
             alignItems="center"
             borderRadius={0}
-            // LC-18 (UX-021): sheet rows ride the space knob like the floating
+            // LC-18 (UX-021): sheet rows ride the spacing roles like the floating
             // menu rows — panelPadding inset + gap fragment.
             {...knobProps.gap}
             paddingHorizontal={knobProps.panelPadding.padding}
-            height={knobProps.control.height}
+            height={knobProps.menuRow.minHeight}
             onPress={isWeb ? () => handleSelect(option.value) : undefined}
             onMouseEnter={() => setActiveIndex(i)}
             onPointerDown={isWeb ? () => setKbNav(false) : undefined}
@@ -1659,7 +1661,6 @@ function NativeSelectCore({
       scrollable={hasScrollableContent}
       disabled={disabled}
       contentPadding="none"
-      transition={typeof sheetTransition === "string" ? sheetTransition : "medium"}
     >
       {listContent}
     </FloatingPanel>
@@ -1693,7 +1694,6 @@ export function Select({
   selectedOrder,
   dismissible,
   skeleton,
-  compact,
   native,
   "aria-label": ariaLabel,
   ...rest
@@ -1707,7 +1707,6 @@ export function Select({
   const { resolvedForm, knobProps, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
     size: sizeProp,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);

package/src/fields/Signature/index.tsx

@@ -540,7 +540,7 @@ function SignatureCanvasImpl({
         borderColor: error ? formCommonColors.error : formInputColors.border.focus,
       })}
       {...frameRing}
-      {...transitionProps(knobProps.transition)}
+      {...transitionProps(knobProps.motion.control)}
       focusable={canFocus}
       tabIndex={isWeb ? (canFocus ? 0 : -1) : undefined}
       onFocus={() => {
@@ -646,8 +646,6 @@ export interface SignatureProps {
   clearIcon?: ReactNode;
   /** When true, renders a skeleton placeholder instead of the signature pad */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
 }
 
 export function Signature({
@@ -673,13 +671,11 @@ export function Signature({
   backgroundColor: backgroundColorProp,
   clearIcon = defaultClearIcon,
   skeleton,
-  compact,
 }: SignatureProps) {
   const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const tamaguiTheme = useTamaguiTheme();

package/src/fields/Slider/Slider.spec.tsx

@@ -8,7 +8,7 @@ import { Preset, resolveRadiusClass, type BorderRadius } from "@multiplatform.on
 import * as Theme from "@multiplatform.one/theme";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
-import { Slider } from "./index";
+import { SLIDER_TRACK_HEIGHT, Slider, sliderThumbToken } from "./index";
 import {
   INSTANT_X_TRANSITION,
   JUMP_RELEASE_THRESHOLD_PX,
@@ -25,7 +25,6 @@ import {
   useSliderJumpMotion,
 } from "./jumpMotion";
 
-/** The repo's `quick` motion token physics (theme animationConfig). */
 const QUICK_SPRING = { type: "spring", damping: 20, mass: 1.2, stiffness: 250 } as const;
 
 describe("Slider", () => {
@@ -456,14 +455,14 @@ describe("Slider", () => {
       });
 
       it("resolves the RENDERED thumb size from the size recipe height", () => {
-        // LC-65: thumb diameter is recipe.height ($1.5 → 24, $4 → 44 since
+        // LC-65: thumb diameter is recipe.height ($1.5 → 22, $4 → 40 after
         // MPO-13 pinned the recipe table to the Tamagui $size ramp), not
         // getSize(token, { shift: -1 }) and not the unshifted size ramp.
         // Circular vs square does not change diameter (radius is the knob).
-        expect(getSliderThumbRenderSize("$1.5", true)).toBe(24);
-        expect(getSliderThumbRenderSize("$1.5", false)).toBe(24);
-        expect(getSliderThumbRenderSize("$4", true)).toBe(44);
-        expect(getSliderThumbRenderSize("$true", false)).toBe(44);
+        expect(getSliderThumbRenderSize("$1.5", true)).toBe(22);
+        expect(getSliderThumbRenderSize("$1.5", false)).toBe(22);
+        expect(getSliderThumbRenderSize("$4", true)).toBe(40);
+        expect(getSliderThumbRenderSize("$true", false)).toBe(40);
       });
 
       it("adjusts values with tamagui's snap/sort/min-steps semantics (a11y actions)", () => {
@@ -797,7 +796,7 @@ describe("Slider", () => {
         "large",
         "full",
       ] as const satisfies readonly BorderRadius[];
-      const RAIL_HEIGHT = 6;
+      const RAIL_HEIGHT = SLIDER_TRACK_HEIGHT;
       const THUMB_HEIGHT = getSliderThumbRenderSize("$1.5");
 
       function part(container: HTMLElement, name: "rail" | "fill" | "thumb"): HTMLElement {
@@ -824,6 +823,23 @@ describe("Slider", () => {
         return Number.NaN;
       }
 
+      it("is a stock thin-track slider: a 4px rail, a filled range and a token-sized thumb", () => {
+        expect(SLIDER_TRACK_HEIGHT).toBe(4);
+        const thumbAt = (size: "$3" | "$5") => {
+          const result = renderWithProviders(<Slider label="Size" size={size} value={[40]} />);
+          const thumb = part(result.container, "thumb");
+          expect(part(result.container, "fill")).toBeTruthy();
+          const atom = String(thumb.className)
+            .split(/\s+/)
+            .find((c) => /^_w-\d+px$/.test(c));
+          result.unmount();
+          return Number(atom?.match(/\d+/)?.[0]);
+        };
+        expect(thumbAt("$3")).toBe(getSliderThumbRenderSize(sliderThumbToken("$3")));
+        expect(thumbAt("$5")).toBe(getSliderThumbRenderSize(sliderThumbToken("$5")));
+        expect(thumbAt("$3")).toBeLessThan(thumbAt("$5"));
+      });
+
       it("rail, fill and thumb each measure 0 at none and height/2 at every other stop", () => {
         for (const stop of RADIUS_STOPS) {
           const result = renderWithProviders(
@@ -858,6 +874,25 @@ describe("Slider", () => {
         expect(Array.from(thumb.classList)).toContain("_transition-none");
       });
 
+      it("keeps track clicks instantaneous when the animation knob is none", async () => {
+        const JumpExample = () => {
+          const [values, setValues] = useState([60]);
+          return (
+            <Preset overrides={{ animation: "none" }}>
+              <Slider label="Still" value={values} onChange={setValues} min={10} max={110} />
+            </Preset>
+          );
+        };
+        const result = renderWithProviders(<JumpExample />);
+        const thumb = result.container.querySelector('[role="slider"]') as HTMLElement;
+        const track = getTrack(result.container, thumb);
+        await act(async () => {
+          fireEvent.mouseDown(track);
+        });
+        expect(thumb.getAttribute("aria-valuenow")).toBe("10");
+        expect(thumb.style.transition).toBe("");
+      });
+
       it("track click arms the left/transform tween then disarms after the jump window", async () => {
         // Controlled slider with the standard feedback loop (value + onChange
         // echoing back) — a bare static `value` is a frozen controlled input

package/src/fields/Slider/Slider.stories.tsx

@@ -179,7 +179,7 @@ export const Sizes: Story = {
   render: () => (
     <YStack gap="$4" maxWidth={400}>
       <Slider label="Small" size="$2" value={[30]} min={0} max={100} />
-      <Slider label="Medium (default)" size="$3" value={[50]} min={0} max={100} />
+      <Slider label="Medium ($3)" size="$3" value={[50]} min={0} max={100} />
       <Slider label="Large" size="$4" value={[70]} min={0} max={100} />
     </YStack>
   ),
@@ -226,7 +226,7 @@ export const Comparison: Story = {
       const [tamaguiVal, setTamaguiVal] = useState([50]);
       return (
         <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 Slider
             </Paragraph>
@@ -241,7 +241,7 @@ export const Comparison: Story = {
             />
           </YStack>
 
-          <YStack gap="$3" width={300}>
+          <YStack gap="$3" width={300} maxWidth="100%">
             <Paragraph size="$2" color="$placeholderColor">
               Tamagui Slider
             </Paragraph>

package/src/fields/Slider/index.tsx

@@ -1,3 +1,5 @@
+import { transitionOrInstant } from "../../shared/instantMotion";
+import { transitionProps, motionRoleProperties, motionSettleMs } from "@multiplatform.one/theme";
 import { useTouchSurface, isTouchSurface } from "@multiplatform.one/theme";
 import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
 import type { AnyFormApi } from "../../types";
@@ -44,11 +46,12 @@ import {
 } from "./jumpMotion";
 
 /**
- * Visual rail height. Spectrum ~3px, Apple ~4pt; Material's 16dp track is a
- * density class of its own. House skeleton already paints 6px — match it so
- * loading and loaded share one rail.
+ * Visual rail height: the stock Tamagui v5 slider's thin track (Spectrum
+ * ~3px, Apple ~4pt). The loading skeleton paints the same rail, so loading
+ * and loaded share one line.
  */
-const TRACK_HEIGHT = 6;
+export const SLIDER_TRACK_HEIGHT = 4;
+const TRACK_HEIGHT = SLIDER_TRACK_HEIGHT;
 
 function radiusStopFromToken(token: number | string): BorderRadius {
   if (token === 0 || token === "$0") return "none";
@@ -76,6 +79,24 @@ const getTrackProps = (outlined: boolean | undefined, borderRadius: number) => (
 
 /** Single source for the thumb size: styled default + native jump-delta math. */
 const THUMB_SIZE_TOKEN = "$1.5";
+
+/**
+ * The thumb is token-sized from the slider's own size key (stock Tamagui
+ * pairs a `$4` slider with a small thumb token): two and a half keys below,
+ * so `$true` keeps the `$1.5` handle, `$3` gets `$1`, `$5` gets `$2`.
+ */
+const thumbTokenForSize: Record<string, string> = {
+  $2: "$1",
+  $3: "$1",
+  $4: THUMB_SIZE_TOKEN,
+  $true: THUMB_SIZE_TOKEN,
+  $5: "$2",
+  $6: "$2.5",
+};
+
+export function sliderThumbToken(sizeToken: string): string {
+  return thumbTokenForSize[sizeToken] ?? THUMB_SIZE_TOKEN;
+}
 const THUMB_RENDER_SIZE = getSliderThumbRenderSize(
   THUMB_SIZE_TOKEN,
   undefined,
@@ -92,18 +113,7 @@ const SliderThumbFrame = styled(TamaguiSlider.Thumb, {
   // instance so the inverse SliderThumb sub-theme cannot restore a ring.
   borderWidth: 0,
   borderColor: "transparent",
-  ...(isWeb
-    ? {
-        cursor: "grab",
-        boxShadow: "0 1px 2px rgba(0,0,0,0.18), 0 0 1px rgba(0,0,0,0.12)",
-      }
-    : {
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.15,
-        shadowRadius: 2,
-        elevation: 2,
-      }),
+  ...(isWeb ? { cursor: "grab" } : {}),
 });
 
 function formatSliderOutput(values: number[], step: number): string {
@@ -124,9 +134,6 @@ const JUMP_KEYS = new Set([
   "ArrowDown",
 ]);
 
-/** Clear jump-tween shortly after the transition window so later layout does not re-tween. */
-const JUMP_MOTION_MS = 180;
-
 /** VoiceOver adjustable actions (native): swipe up/down steps the value. */
 const A11Y_ADJUSTABLE_ACTIONS = [{ name: "increment" }, { name: "decrement" }] as const;
 
@@ -168,8 +175,6 @@ export interface SliderProps {
   >;
   /** When true, renders a skeleton placeholder instead of the slider */
   skeleton?: boolean;
-  /** When true, applies compact density (tighter layout gaps; control size unchanged) */
-  compact?: boolean;
   "aria-label"?: string;
 }
 
@@ -198,7 +203,7 @@ type SliderControlProps = {
   sizeToken: SizeTokens;
   outlined?: boolean;
   borderRadius: number | string;
-  transitionToken: string;
+  transitionToken: string | undefined;
   elevationWrapperProps: ReturnType<typeof getElevationWrapperProps>;
   sliderProps?: SliderProps["sliderProps"];
   onChangeValues?: (values: number[]) => void;
@@ -235,7 +240,7 @@ function SliderControl({
   onBlur,
 }: SliderControlProps) {
   const describedBy = useFieldDescribedBy();
-  const { disabledState } = useResolvedKnobs();
+  const { disabledState, knobProps } = useResolvedKnobs();
   if (isWeb) ensureKeyboardModalityTracking();
   // DG-A11Y-01: the thumb renders inside tamagui's t_SliderThumb component
   // sub-theme, an INVERSE template whose `$outlineColor` clears 3:1 against
@@ -251,7 +256,7 @@ function SliderControl({
     outlineOffset: FOCUS_RING_HALO_OFFSET,
   });
   // Apple/Material/Spectrum: the filled rail is the value (accent). Pin the
-  // literal so Tamagui's SliderActive sub-theme cannot remap `$accentBackground`
+  // literal so Tamagui's SliderActive sub-theme cannot remap `formSelectedColors.mark`
   // onto a gray that matches the inactive track (the before-state defect).
   const fillToken = hasError ? formCommonColors.error : formSelectedColors.mark;
   const fillKey = fillToken.startsWith("$") ? fillToken.slice(1) : fillToken;
@@ -286,15 +291,22 @@ function SliderControl({
   // getSliderThumbRenderSize). Using the shifted token here put the base-x
   // replica 1-4pt off the true rendered position.
   const hydrationTouch = useTouchSurface();
-  const thumbSize = getSliderThumbRenderSize(THUMB_SIZE_TOKEN, undefined, hydrationTouch);
+  const thumbSize = getSliderThumbRenderSize(
+    sliderThumbToken(String(sizeToken)),
+    undefined,
+    hydrationTouch,
+  );
   const jumpMotionEnabled =
-    !isWeb && sliderProps?.orientation !== "vertical" && sliderProps?.dir !== "rtl";
+    Boolean(transitionToken) &&
+    !isWeb &&
+    sliderProps?.orientation !== "vertical" &&
+    sliderProps?.dir !== "rtl";
   const jumpMotion = useSliderJumpMotion({
     enabled: jumpMotionEnabled,
     min,
     max,
     step,
-    transitionToken,
+    transitionToken: transitionToken ?? "0ms",
     initialValues: sliderValue,
     minStepsBetweenThumbs: sliderProps?.minStepsBetweenThumbs ?? 0,
     getTrackWidth: () => trackWidthRef.current,
@@ -346,6 +358,7 @@ function SliderControl({
   };
 
   const armJump = () => {
+    if (!transitionToken) return;
     sessionRef.current = "jump";
     setAnimateJump(true);
     clearJumpTimer();
@@ -355,7 +368,7 @@ function SliderControl({
         setAnimateJump(false);
       }
       jumpClearRef.current = null;
-    }, JUMP_MOTION_MS);
+    }, motionSettleMs(transitionToken));
   };
 
   useEffect(() => () => clearJumpTimer(), []);
@@ -390,12 +403,11 @@ function SliderControl({
     heightPx: thumbSize,
   });
 
-  // `"none"` (not omitted): Tamagui styled defaults / animateOnly can leave a
-  // residual tween if the prop is absent after a jump session. This string
+  // An explicit stop overrides styled defaults that otherwise keep tweening. This string
   // session drives web thumbs + TrackActive; native thumbs use jumpMotion
   // (TrackActive edges are layout props the RN driver cannot animate, so the
   // fill snaps on native — the gliding thumb is the perceptual anchor).
-  const transitionProp = motionTransition ?? "none";
+  const transitionProp = transitionOrInstant(motionTransition);
 
   const trackActive = (
     <TamaguiSlider.TrackActive
@@ -406,7 +418,10 @@ function SliderControl({
       borderRadius={railRadius}
       style={{ borderRadius: railRadius }}
       data-slider-part="fill"
-      transition={transitionProp}
+      {...transitionProps(
+        { transition: transitionProp, animateOnly: motionRoleProperties.control },
+        ["left", "right", "top", "bottom"],
+      )}
     />
   );
   const hitHeight = size || sizeToken;
@@ -580,7 +595,10 @@ function SliderControl({
             // Native: per-property transform transition + FLIP `x` override.
             const thumbMotionProps = jumpMotionEnabled
               ? (jumpMotion.getThumbMotionProps(thumbIndex) as Record<string, unknown>)
-              : { transition: transitionProp };
+              : transitionProps(
+                  { transition: transitionProp, animateOnly: motionRoleProperties.control },
+                  ["left", "right", "top", "bottom"],
+                );
             // The elevation wrapper is WEB-ONLY: on iOS the wrapper is a
             // zero-height flow view (the thumb inside is absolutely positioned),
             // and iOS accessibility culls the entire subtree under a zero-rect
@@ -619,12 +637,13 @@ function SliderControl({
             return elevationWrapperProps.elevation && isWeb ? (
               <View key={thumbIndex} {...elevationWrapperProps} borderRadius={thumbRadius}>
                 <SliderThumbFrame
+                  {...knobProps.thumbShadow}
                   width={thumbSize}
                   height={thumbSize}
                   index={thumbIndex}
                   circular={false}
                   borderRadius={thumbRadius}
-                  style={{ borderRadius: thumbRadius }}
+                  style={{ ...knobProps.thumbShadow.style, borderRadius: thumbRadius }}
                   data-slider-part="thumb"
                   {...thumbRingProps}
                   {...thumbMotionProps}
@@ -634,13 +653,14 @@ function SliderControl({
               </View>
             ) : (
               <SliderThumbFrame
+                {...knobProps.thumbShadow}
                 width={thumbSize}
                 height={thumbSize}
                 key={thumbIndex}
                 index={thumbIndex}
                 circular={false}
                 borderRadius={thumbRadius}
-                style={{ borderRadius: thumbRadius }}
+                style={{ ...knobProps.thumbShadow.style, borderRadius: thumbRadius }}
                 data-slider-part="thumb"
                 {...thumbRingProps}
                 {...thumbMotionProps}
@@ -687,7 +707,6 @@ export function Slider({
   step = 1,
   sliderProps,
   skeleton,
-  compact,
   "aria-label": ariaLabel,
 }: SliderProps) {
   // Canonical `onChange` and the alias `onValueChange` both fire from the
@@ -699,12 +718,12 @@ export function Slider({
   const { resolvedForm, knobProps, elevation, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
+    size,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const hasLabel = Boolean(label);
   const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
-  const transitionToken = (knobProps.transition as string | undefined) || "quick";
+  const transitionToken = knobProps.motion.control.transition as string | undefined;
 
   // Render skeleton placeholder
   if (skeleton) {

package/src/fields/Stepper/Stepper.spec.tsx

@@ -8,6 +8,26 @@ import { Button } from "../../Button";
 import { Stepper } from "./index";
 
 describe("Stepper", () => {
+  it.each([{ showButtons: false }, { readOnly: true }])(
+    "aligns a plain number like a text field when buttons are absent: %j",
+    (props) => {
+      const result = renderWithProviders(<Stepper defaultValue={10} {...props} />);
+      expect(getComputedStyle(result.getInput()!).textAlign).toBe("left");
+    },
+  );
+
+  it("keeps a segmented stepper centered", () => {
+    const result = renderWithProviders(<Stepper defaultValue={10} />);
+    expect(getComputedStyle(result.getInput()!).textAlign).toBe("center");
+  });
+
+  it("preserves amount alignment and explicit input overrides", () => {
+    const result = renderWithProviders(<Stepper defaultValue={10} currency="USD" readOnly />);
+    expect(getComputedStyle(result.getInput()!).textAlign).toBe("right");
+    result.rerender(<Stepper defaultValue={10} readOnly inputProps={{ textAlign: "right" }} />);
+    expect(getComputedStyle(result.getInput()!).textAlign).toBe("right");
+  });
+
   describe("without form context", () => {
     it("should render with label and helper text correctly", () => {
       const result = renderWithProviders(
@@ -342,11 +362,11 @@ describe("Stepper currency (MPO-221)", () => {
     expect(glyph(container)?.textContent).toBe("₹");
   });
 
-  it("without a currency the value stays centred and no glyph renders", () => {
+  it("without a currency the buttonless value aligns with text fields and no glyph renders", () => {
     const { container } = renderWithProviders(
       <Stepper aria-label="Qty" defaultValue={12} showButtons={false} />,
     );
     expect(glyph(container)).toBeNull();
-    expect(input(container).className).toMatch(/_ta-center/);
+    expect(getComputedStyle(input(container)).textAlign).toBe("left");
   });
 });

package/src/fields/Stepper/Stepper.stories.tsx

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