@multiplatform.one/forms 7.34.4 → 7.35.0

package/src/fields/SearchInput/index.tsx

@@ -21,8 +21,8 @@ import {
   pressTargetHitSlop,
   sizeRecipeForToken,
 } from "@multiplatform.one/theme";
-import type { ComponentProps, ReactNode, RefObject } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import type { ComponentProps, ReactNode, Ref, RefObject } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import type { LabelProps, SizeTokens, TamaguiElement } from "tamagui";
 import { View, isWeb } from "tamagui";
 import { Skeleton } from "../../Skeleton";
@@ -41,6 +41,11 @@ import {
 
 type AreaProps = ComponentProps<typeof InputParts.Area>;
 
+export interface SearchInputHandle {
+  focus(): void;
+  blur(): void;
+}
+
 export interface SearchInputProps {
   name?: string;
   form?: AnyFormApi;
@@ -61,13 +66,12 @@ export interface SearchInputProps {
   /** Show the clear (X) button when there is text. Escape always clears. */
   clearable?: boolean;
   disabled?: boolean;
+  autoFocus?: boolean;
   readOnly?: boolean;
   required?: boolean;
   helperText?: string;
   error?: string | boolean;
   size?: SizeTokens;
-  /** Compact density (toolbar embedding). Orthogonal to `size`. */
-  compact?: boolean;
   /** Borderless/background-less (flush toolbar bands). */
   chromeless?: boolean;
   skeleton?: boolean;
@@ -77,7 +81,7 @@ export interface SearchInputProps {
   "aria-label"?: string;
   /** Leading icon size in px. Defaults from the size token. */
   iconSize?: number;
-  inputProps?: Omit<AreaProps, "value" | "id" | "onChange" | "onChangeText">;
+  inputProps?: Omit<AreaProps, "value" | "id" | "onChange" | "onChangeText" | "ref">;
 }
 
 const SEARCH_STYLE_ID = "mp-search-input-chrome";
@@ -115,47 +119,50 @@ function focusArea(ref: RefObject<TamaguiElement | null>) {
   (ref.current as { focus?: () => void } | null)?.focus?.();
 }
 
-export function SearchInput({
-  name,
-  form: formProp,
-  validators,
-  value,
-  defaultValue,
-  onChange,
-  onSearch,
-  onClear,
-  onBlur,
-  debounceMs = 300,
-  // Bidi-isolated at the interpolation site (LC-58): under RTL the trailing
-  // weak "..." otherwise reorders to the start ("…Search"). First-strong
-  // isolation keeps a translated RTL placeholder rendering RTL. Consumer
-  // placeholders are the consumer's interpolation site — passed through.
-  placeholder = bidiIsolate(t("Search...")),
-  clearable = true,
-  disabled,
-  readOnly,
-  required,
-  helperText,
-  error,
-  size,
-  compact,
-  chromeless,
-  skeleton,
-  label,
-  labelProps,
-  id: idProp,
-  "aria-label": ariaLabel,
-  iconSize,
-  inputProps,
-}: SearchInputProps) {
+function SearchInputImpl(
+  {
+    name,
+    form: formProp,
+    validators,
+    value,
+    defaultValue,
+    onChange,
+    onSearch,
+    onClear,
+    onBlur,
+    debounceMs = 300,
+    // Bidi-isolated at the interpolation site (LC-58): under RTL the trailing
+    // weak "..." otherwise reorders to the start ("…Search"). First-strong
+    // isolation keeps a translated RTL placeholder rendering RTL. Consumer
+    // placeholders are the consumer's interpolation site — passed through.
+    placeholder = bidiIsolate(t("Search...")),
+    clearable = true,
+    disabled,
+    autoFocus,
+    readOnly,
+    required,
+    helperText,
+    error,
+    size,
+    chromeless,
+    skeleton,
+    label,
+    labelProps,
+    id: idProp,
+    "aria-label": ariaLabel,
+    iconSize,
+    inputProps,
+  }: SearchInputProps,
+  ref: Ref<SearchInputHandle>,
+) {
   const hydrationTouch = useTouchSurface();
   const { resolvedForm, knobProps, control, id } = useFormField({
     form: formProp,
     id: idProp,
-    compact,
+    size,
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const resolvedSize = (size ?? knobProps.sizeToken) as SizeTokens;
+  const resolvedSize = knobProps.sizeToken as SizeTokens;
   const recipe = sizeRecipeForToken(String(resolvedSize), { touch: hydrationTouch });
   const visualHeight = getFieldHeight(resolvedSize, 1, hydrationTouch);
   const belowFloor = visualHeight < MIN_PRESS_TARGET;
@@ -163,6 +170,16 @@ export function SearchInput({
   const [internalText, setInternalText] = useState(defaultValue ?? "");
   const standaloneText = isControlled ? value : internalText;
   const inputRef = useRef<TamaguiElement>(null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => {
+        if (!disabled) focusArea(inputRef);
+      },
+      blur: () => inputRef.current?.blur?.(),
+    }),
+    [disabled],
+  );
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   const onSearchRef = useRef(onSearch);
@@ -224,8 +241,7 @@ export function SearchInput({
   const resolvedIconSize = iconSize ?? recipe.iconSize;
   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",
@@ -294,6 +310,7 @@ export function SearchInput({
       enterKeyHint: "search",
       value: current,
       disabled,
+      autoFocus,
       readOnly,
       placeholder,
       // T-VALUE (knob-laws § textAccent › entered text): full ramp, never
@@ -332,12 +349,7 @@ export function SearchInput({
     } as unknown as AreaProps;
 
     return (
-      <InputParts.Box
-        {...boxContract}
-        disabled={disabled}
-        {...chromelessProps}
-        {...(hasError ? { theme: "error" } : undefined)}
-      >
+      <InputParts.Box {...boxContract} disabled={disabled} {...chromelessProps}>
         <InputParts.Icon
           adornment="leading"
           color={formCommonColors.muted}
@@ -409,7 +421,9 @@ export function SearchInput({
   if (!resolvedForm || !name) {
     return (
       <FieldLayout {...layoutBind} error={error} onBlur={onBlur}>
-        <InputParts size={resolvedSize}>{renderBox(standaloneText, undefined, !!error)}</InputParts>
+        <InputParts size={resolvedSize} {...(error ? { theme: "error" } : undefined)}>
+          {renderBox(standaloneText, undefined, !!error)}
+        </InputParts>
       </FieldLayout>
     );
   }
@@ -442,3 +456,5 @@ export function SearchInput({
     </Field>
   );
 }
+
+export const SearchInput = forwardRef<SearchInputHandle, SearchInputProps>(SearchInputImpl);

package/src/fields/Select/Select.spec.tsx

@@ -1,8 +1,11 @@
+import { defaultKnobs, resolveKnobs } from "@multiplatform.one/theme";
 import { useForm } from "@tanstack/react-form";
 import { act, fireEvent, waitFor, within } from "@testing-library/react";
 import { YStack } from "tamagui";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getSizeRecipeFamily } from "@multiplatform.one/theme";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { sizeRecipeForToken } from "@multiplatform.one/theme";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
 import { __resetDevWarnSeen } from "../../shared/devWarn";
@@ -302,6 +305,15 @@ describe("Select Components", () => {
       });
     });
 
+    it("paints the elevated surface shadow on the open listbox", async () => {
+      const result = renderWithProviders(<Select options={many} />);
+      fireEvent.keyDown(result.getByTestId("select-trigger"), { key: "Enter" });
+      const dropdown = await result.findByTestId("select-dropdown");
+      expect(dropdown.style.boxShadow).toBe(
+        resolveKnobs(defaultKnobs).knobProps.elevatedSurface.style?.boxShadow,
+      );
+    });
+
     it("does not ring the trigger or a row on mouse open", async () => {
       const result = renderWithProviders(<Select options={many} placeholder="Pick" />);
       const trigger = result.baseElement.querySelector(
@@ -320,6 +332,24 @@ describe("Select Components", () => {
       }
     });
 
+    it("pitches every row at the menuRow family height, not the control height", async () => {
+      const result = renderWithProviders(<Select options={many} placeholder="Pick" />);
+      const trigger = result.baseElement.querySelector(
+        '[data-testid="select-trigger"]',
+      ) as HTMLElement;
+      fireEvent.pointerDown(trigger);
+      fireEvent.mouseDown(trigger);
+      fireEvent.click(trigger);
+      await waitFor(() => {
+        expect(result.baseElement.querySelector('[role="option"]')).toBeTruthy();
+      });
+      const pitch = getSizeRecipeFamily("menuRow").heights.$true;
+      expect(pitch).toBe(36);
+      for (const opt of result.baseElement.querySelectorAll('[role="option"]')) {
+        expect(opt.className).toMatch(new RegExp(`_h-${pitch}px`));
+      }
+    });
+
     it("paints an inset ring on the keyboard-active row; rows stay square", async () => {
       const result = renderWithProviders(<Select options={many} placeholder="Pick" />);
       const trigger = result.baseElement.querySelector(
@@ -395,3 +425,38 @@ describe("Select pointer intent", () => {
     expect(onChange).toHaveBeenCalledExactlyOnceWith(["option1"]);
   });
 });
+
+describe("Select size forwarding (WP-c2)", () => {
+  const many: SelectOption[] = Array.from({ length: 6 }, (_, i) => ({
+    value: `v${i}`,
+    label: `Label ${i}`,
+  }));
+
+  beforeEach(() => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+  });
+
+  it('size="$3" reaches the InputParts trigger and every listbox row', async () => {
+    const recipe = sizeRecipeForToken("$3");
+    const rowRecipe = getSizeRecipeFamily("menuRow").recipes.$3;
+    const result = renderWithProviders(<Select options={many} placeholder="Pick" size="$3" />);
+    const trigger = result.baseElement.querySelector(
+      '[data-testid="select-trigger"]',
+    ) as HTMLElement;
+    const box = trigger.closest("[class*='_h-']") ?? trigger;
+    expect(String(box.className)).toContain(`_h-${recipe.height}px`);
+    fireEvent.pointerDown(trigger);
+    fireEvent.mouseDown(trigger);
+    fireEvent.click(trigger);
+    await waitFor(() => {
+      expect(result.baseElement.querySelector('[role="option"]')).toBeTruthy();
+    });
+    for (const row of result.baseElement.querySelectorAll('[role="option"]')) {
+      expect(String(row.className)).toContain(`_h-${rowRecipe.height}px`);
+    }
+  });
+});

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>