@multiplatform.one/forms 7.4.0 → 7.5.0

package/src/fields/Signature/index.tsx

@@ -9,6 +9,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import type { GestureResponderEvent, LayoutChangeEvent } from "react-native";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { isWeb, Text, XStack, YStack, useTheme as useTamaguiTheme } from "tamagui";
+import { EraserIcon } from "@phosphor-icons/react";
 import { getStroke } from "perfect-freehand";
 // Named import (not default): under tamagui 2.7.6 the vitest/vite pipeline
 // resolves this module's CJS build with node-style interop, so a default
@@ -209,14 +210,14 @@ function parseSignatureValue(value: string): Stroke[] {
  * @param value - The stored signature value (base64 JSON)
  * @param width - Output SVG width (default 500)
  * @param height - Output SVG height (default 200)
- * @param penColor - Stroke color (default "#000000")
+ * @param penColor - Stroke color (default currentColor so the host scheme tints ink)
  * @returns SVG string or empty string if no strokes
  */
 export function signatureValueToSvg(
   value: string,
   width = 500,
   height = 200,
-  penColor = "#000000",
+  penColor = "currentColor",
 ): string {
   const strokes = parseSignatureValue(value);
   if (strokes.length === 0) return "";
@@ -240,6 +241,9 @@ export function signatureValueToSvg(
 
 // Rows of field height for the signature pad (3x single-line input height)
 const signatureHeightRows = 3;
+/** Legal-pad aspect (width / height). Size token supplies the height; this keeps the ratio. */
+const signatureAspect = 2.5;
+const defaultClearIcon = <EraserIcon size={16} />;
 
 interface SignatureCanvasProps {
   id?: string;
@@ -499,7 +503,7 @@ function SignatureCanvasImpl({
       position="relative"
       onLayout={handleLayout}
       {...knobProps.inputSurface}
-      {...(backgroundColor ? { backgroundColor } : undefined)}
+      backgroundColor={backgroundColor ?? knobProps.inputBackground}
       {...(disabled ? disabledSurface : undefined)}
       borderRadius={cappedRadius}
       borderWidth={knobProps.borderRadius.borderWidth}
@@ -539,6 +543,7 @@ function SignatureCanvasImpl({
       aria-describedby={describedBy}
       aria-keyshortcuts={canDraw ? "Delete Backspace Escape" : undefined}
       data-signature="pad"
+      data-min-height={minHeightPx}
       data-signed={hasInk ? "true" : "false"}
       data-keyboard-ring={kbFocus ? "true" : undefined}
       {...(!hasLabel
@@ -549,19 +554,18 @@ function SignatureCanvasImpl({
       <XStack
         position="absolute"
         bottom="22%"
-        left="$3"
-        right="$3"
+        left={knobProps.control.paddingHorizontal}
+        right={knobProps.control.paddingHorizontal}
         alignItems="center"
-        gap="$2"
         pointerEvents="none"
         opacity={0.55}
+        {...knobProps.gap}
       >
         <Text
           color={formCommonColors.muted}
           fontStyle="italic"
-          fontWeight="700"
-          fontSize={18}
-          lineHeight={20}
+          {...knobProps.body}
+          {...knobProps.controlType}
         >
           {t("X")}
         </Text>
@@ -592,7 +596,7 @@ function SignatureCanvasImpl({
           justifyContent="flex-end"
         >
           <Button size="$2" onPress={handleClear} icon={clearIcon}>
-            <Button.Text>{t("Clear")}</Button.Text>
+            <Button.Text {...knobProps.body}>{t("Clear")}</Button.Text>
           </Button>
         </XStack>
       )}
@@ -618,9 +622,9 @@ export interface SignatureProps {
   onBlur?: (...args: any[]) => void;
   disabled?: boolean;
   readOnly?: boolean;
-  /** Canvas width in pixels for aspect ratio (default 500) */
+  /** Canvas width in pixels for aspect ratio (default: size-derived height × 2.5) */
   width?: number;
-  /** Canvas height in pixels for aspect ratio (default 200) */
+  /** Canvas height in pixels for aspect ratio (default: size-token field height × 3) */
   height?: number;
   /** Pen color (default derived from theme) */
   penColor?: string;
@@ -651,11 +655,11 @@ export function Signature({
   onBlur,
   disabled,
   readOnly,
-  width = 500,
-  height = 200,
+  width,
+  height,
   penColor: penColorProp,
   backgroundColor: backgroundColorProp,
-  clearIcon,
+  clearIcon = defaultClearIcon,
   skeleton,
   compact,
 }: SignatureProps) {
@@ -666,14 +670,17 @@ export function Signature({
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
   const tamaguiTheme = useTamaguiTheme();
+  const resolvedSizeToken = (size ?? knobProps.sizeToken) as SizeTokens;
+  const minHeightPx = getFieldHeight(resolvedSizeToken, signatureHeightRows);
+  const padHeight = height ?? minHeightPx;
+  const padWidth = width ?? Math.round(padHeight * signatureAspect);
 
   // Render skeleton placeholder
   if (skeleton) {
-    const resolvedSizeToken = (size ?? knobProps.sizeToken) as SizeTokens;
-    const minHeightPx = getFieldHeight(resolvedSizeToken, signatureHeightRows);
+    const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
     return (
       <FieldLayout id={id} label={label} size={size} knobProps={knobProps}>
-        <Skeleton variant="rounded" width="100%" height={minHeightPx} />
+        <Skeleton variant="rounded" width="100%" height={minHeightPx} borderRadius={cappedRadius} />
       </FieldLayout>
     );
   }
@@ -686,8 +693,8 @@ export function Signature({
     hasLabel: !!label,
     disabled: !!disabled,
     readOnly: !!readOnly,
-    width,
-    height,
+    width: padWidth,
+    height: padHeight,
     penColor,
     backgroundColor: backgroundColorProp,
     knobProps,

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

@@ -4,6 +4,7 @@ import { act, fireEvent, renderHook, waitFor } from "@testing-library/react";
 import { YStack } from "tamagui";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset, resolveRadiusClass, type BorderRadius } from "@multiplatform.one/theme";
 import * as Theme from "@multiplatform.one/theme";
 import { Button } from "../../Button";
 import { Form } from "../../Form";
@@ -788,6 +789,62 @@ describe("Slider", () => {
       });
     });
 
+    describe("BINARY radius (DG-RAD-03 / R2f)", () => {
+      const RADIUS_STOPS = [
+        "none",
+        "small",
+        "medium",
+        "large",
+        "full",
+      ] as const satisfies readonly BorderRadius[];
+      const RAIL_HEIGHT = 6;
+      const THUMB_HEIGHT = getSliderThumbRenderSize("$1.5");
+
+      function part(container: HTMLElement, name: "rail" | "fill" | "thumb"): HTMLElement {
+        const el = container.querySelector(`[data-slider-part="${name}"]`);
+        expect(el, `missing data-slider-part=${name}`).toBeTruthy();
+        return el as HTMLElement;
+      }
+
+      function paintedRadiusPx(el: Element): number {
+        const inline = (el as HTMLElement).style.borderRadius;
+        if (inline) return Number.parseFloat(inline) || 0;
+        const computed = getComputedStyle(el).borderTopLeftRadius;
+        if (computed && computed !== "") {
+          const n = Number.parseFloat(computed);
+          if (!Number.isNaN(n)) return n;
+        }
+        const atom = String((el as HTMLElement).className || "")
+          .split(/\s+/)
+          .find((c) => c.startsWith("_btlr-") || /^_br\d/.test(c));
+        if (!atom) return Number.NaN;
+        const px = atom.match(/(\d+(?:\.\d+)?)px$/);
+        if (px) return Number.parseFloat(px[1]);
+        if (atom.endsWith("-0") || atom === "_btlr-0") return 0;
+        return Number.NaN;
+      }
+
+      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(
+            <Preset overrides={{ borderRadius: stop }}>
+              <Slider label="Radius Slider" value={[40]} />
+            </Preset>,
+          );
+          const rail = part(result.container, "rail");
+          const fill = part(result.container, "fill");
+          const thumb = part(result.container, "thumb");
+          const railPx = resolveRadiusClass("BINARY", stop, { heightPx: RAIL_HEIGHT });
+          const thumbPx = resolveRadiusClass("BINARY", stop, { heightPx: THUMB_HEIGHT });
+          expect(railPx, stop).toBe(stop === "none" ? 0 : RAIL_HEIGHT / 2);
+          expect(thumbPx, stop).toBe(stop === "none" ? 0 : THUMB_HEIGHT / 2);
+          expect(paintedRadiusPx(rail), `rail @ ${stop}`).toBe(railPx);
+          expect(paintedRadiusPx(fill), `fill @ ${stop}`).toBe(railPx);
+          expect(paintedRadiusPx(thumb), `thumb @ ${stop}`).toBe(thumbPx);
+        }
+      });
+    });
+
     describe("web session (dom)", () => {
       const getTrack = (container: HTMLElement, thumb: Element) =>
         Array.from(container.querySelectorAll('[data-orientation="horizontal"]')).find(

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

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
 import { useState } from "react";
@@ -270,3 +271,30 @@ export const Comparison: Story = {
 export const SkeletonState: Story = {
   args: { label: "Volume", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: number };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: 80 },
+      { id: "2", label: "Beta", value: 35 },
+      { id: "3", label: "Gamma", value: 0 },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Slider",
+        field: "slider",
+        fieldProps: { min: 0, max: 100, step: 5 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/Slider/index.tsx

@@ -13,11 +13,14 @@ import {
 } from "tamagui";
 import {
   animationConfig,
+  borderRadiusMap,
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
+  resolveRadiusClass,
   useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
+  type BorderRadius,
 } from "@multiplatform.one/theme";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout";
@@ -45,8 +48,16 @@ import {
  */
 const TRACK_HEIGHT = 6;
 
+function radiusStopFromToken(token: number | string): BorderRadius {
+  if (token === 0 || token === "$0") return "none";
+  for (const stop of Object.keys(borderRadiusMap) as BorderRadius[]) {
+    if (borderRadiusMap[stop] === token) return stop;
+  }
+  throw new Error(`Slider: "${String(token)}" is not a radius token in borderRadiusMap`);
+}
+
 // Track styling helper - returns props to pass to TamaguiSlider.Track
-const getTrackProps = (outlined: boolean | undefined, borderRadius: number | string) => ({
+const getTrackProps = (outlined: boolean | undefined, borderRadius: number) => ({
   unstyled: false,
   height: TRACK_HEIGHT,
   width: "100%",
@@ -55,6 +66,10 @@ const getTrackProps = (outlined: boolean | undefined, borderRadius: number | str
   borderWidth: outlined ? 1 : 0,
   borderColor: outlined ? formControlColors.border : undefined,
   borderRadius,
+  // Inline so the BINARY px is the painted radius happy-dom can measure
+  // (Tamagui's atomic class does not cascade in the test environment).
+  style: { borderRadius },
+  "data-slider-part": "rail" as const,
 });
 
 /** Single source for the thumb size: styled default + native jump-delta math. */
@@ -177,7 +192,6 @@ type SliderControlProps = {
   sizeToken: SizeTokens;
   outlined?: boolean;
   borderRadius: number | string;
-  pointy?: boolean;
   transitionToken: string;
   elevationWrapperProps: ReturnType<typeof getElevationWrapperProps>;
   sliderProps?: SliderProps["sliderProps"];
@@ -208,7 +222,6 @@ function SliderControl({
   sizeToken,
   outlined,
   borderRadius,
-  pointy,
   transitionToken,
   elevationWrapperProps,
   sliderProps,
@@ -249,7 +262,11 @@ function SliderControl({
   /** After a drag ends, ignore the trailing controlled sync so it does not re-tween. */
   const ignoreJumpUntilRef = useRef(0);
 
-  const isSquare = pointy || borderRadius === "$0" || borderRadius === 0;
+  // DG-RAD-03 / R2f: rail, fill and thumb are one BINARY member — 0 at
+  // none, the part's own height/2 at every other stop. Tracks square
+  // with their thumbs (RULINGS-2026-08-28 §R2).
+  const radiusStop = radiusStopFromToken(borderRadius);
+  const railRadius = resolveRadiusClass("BINARY", radiusStop, { heightPx: TRACK_HEIGHT });
 
   // Native jump tween rides transform (FLIP) — the RN driver cannot animate
   // the thumb's `left` percent (see ./jumpMotion.ts). Web keeps the css
@@ -360,7 +377,9 @@ function SliderControl({
   }, [sliderValue]);
 
   const motionTransition = animateJump ? transitionToken : undefined;
-  const thumbRadius = isSquare ? 0 : 1000;
+  const thumbRadius = resolveRadiusClass("BINARY", radiusStop, {
+    heightPx: THUMB_RENDER_SIZE,
+  });
 
   // `"none"` (not omitted): Tamagui styled defaults / animateOnly can leave a
   // residual tween if the prop is absent after a jump session. This string
@@ -373,10 +392,11 @@ function SliderControl({
     <TamaguiSlider.TrackActive
       backgroundColor={fillLiteral}
       height="100%"
-      // The fill rides the same radius as the track it sits in: without it
-      // tamagui's default left a pill fill inside a square track at
-      // `borderRadius:none` — an undeclared knob-immune shape (D-09 / LC-60).
-      borderRadius={borderRadius}
+      // The fill rides the same BINARY radius as the rail it sits in
+      // (R2f / DG-RAD-03) — never a leftover pill inside a square track.
+      borderRadius={railRadius}
+      style={{ borderRadius: railRadius }}
+      data-slider-part="fill"
       transition={transitionProp}
     />
   );
@@ -479,13 +499,13 @@ function SliderControl({
           aria-describedby={describedBy}
         >
           {elevationWrapperProps.elevation ? (
-            <View {...elevationWrapperProps} width="100%" height="100%" borderRadius={borderRadius}>
-              <TamaguiSlider.Track {...getTrackProps(outlined, borderRadius)}>
+            <View {...elevationWrapperProps} width="100%" height="100%" borderRadius={railRadius}>
+              <TamaguiSlider.Track {...getTrackProps(outlined, railRadius)}>
                 {trackActive}
               </TamaguiSlider.Track>
             </View>
           ) : (
-            <TamaguiSlider.Track {...getTrackProps(outlined, borderRadius)}>
+            <TamaguiSlider.Track {...getTrackProps(outlined, railRadius)}>
               {trackActive}
             </TamaguiSlider.Track>
           )}
@@ -591,8 +611,10 @@ function SliderControl({
               <View key={thumbIndex} {...elevationWrapperProps} borderRadius={thumbRadius}>
                 <SliderThumbFrame
                   index={thumbIndex}
-                  circular={!isSquare}
+                  circular={false}
                   borderRadius={thumbRadius}
+                  style={{ borderRadius: thumbRadius }}
+                  data-slider-part="thumb"
                   {...thumbRingProps}
                   {...thumbMotionProps}
                   {...thumbA11y}
@@ -603,8 +625,10 @@ function SliderControl({
               <SliderThumbFrame
                 key={thumbIndex}
                 index={thumbIndex}
-                circular={!isSquare}
+                circular={false}
                 borderRadius={thumbRadius}
+                style={{ borderRadius: thumbRadius }}
+                data-slider-part="thumb"
                 {...thumbRingProps}
                 {...thumbMotionProps}
                 {...thumbA11y}
@@ -705,7 +729,6 @@ export function Slider({
       sizeToken={knobProps.sizeToken}
       outlined={knobProps.outlined}
       borderRadius={knobProps.borderRadius.borderRadius}
-      pointy={knobProps.pointy}
       transitionToken={transitionToken}
       elevationWrapperProps={elevationWrapperProps}
       sliderProps={sliderProps}

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

@@ -267,6 +267,14 @@ describe("Stepper", () => {
       expect(input?.value).toBe("1");
     });
 
+    it("defaults to minus|value|plus (both), not stacked carets (LC-84)", () => {
+      const result = renderWithProviders(<Stepper label="Quantity" defaultValue={5} />);
+      const box = result.container.querySelector("[data-stepper]");
+      expect(box?.getAttribute("data-stepper-placement")).toBe("both");
+      expect(result.container.querySelector('[aria-label="Decrease"]')).toBeTruthy();
+      expect(result.container.querySelector('[aria-label="Increase"]')).toBeTruthy();
+    });
+
     it("keeps plus and minus as segments of one control, not independent buttons", () => {
       const result = renderWithProviders(
         <Stepper label="Quantity" defaultValue={1} min={1} max={10} />,

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

@@ -1,4 +1,5 @@
 import { action } from "@multiplatform.one/storybook";
+import { DataTable, type DataTableColumn } from "@multiplatform.one/table";
 import type { GuardrailSpecimenParameter } from "@multiplatform.one/theme";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
 import { useForm } from "@tanstack/react-form";
@@ -159,3 +160,30 @@ export const Interactive: Story = {
 export const SkeletonState: Story = {
   args: { label: "Quantity", skeleton: true },
 };
+
+type InTableRow = { id: string; label: string; value: number | null };
+
+export const InTable: Story = {
+  name: "In table",
+  render: () => {
+    const [data, setData] = useState<InTableRow[]>([
+      { id: "1", label: "Alpha", value: 12 },
+      { id: "2", label: "Beta", value: 48 },
+      { id: "3", label: "Gamma", value: null },
+    ]);
+    const columns: DataTableColumn<InTableRow>[] = [
+      { accessorKey: "label", header: "Row" },
+      {
+        accessorKey: "value",
+        header: "Stepper",
+        field: "stepper",
+        fieldProps: { min: 0, max: 100, step: 1 },
+      },
+    ];
+    return (
+      <YStack width="100%" height={280}>
+        <DataTable data={data} columns={columns} enablePagination={false} onDataChange={setData} />
+      </YStack>
+    );
+  },
+};

package/src/fields/Stepper/index.tsx

@@ -11,7 +11,10 @@ import {
 } from "react";
 import { isWeb, useProps, View } from "tamagui";
 import { Input as TamaguiInput } from "tamagui";
-import { sizeRecipeForToken } from "@multiplatform.one/theme";
+import { isTouchSurface, sizeRecipeForToken, useGlyphColor } from "@multiplatform.one/theme";
+import { resolveStepperPlacement } from "./resolveStepperPlacement";
+
+export { resolveStepperPlacement, type StepperButtonPosition } from "./resolveStepperPlacement";
 
 type InputProps = ComponentProps<typeof TamaguiInput>;
 import { Skeleton } from "../../Skeleton";
@@ -115,9 +118,9 @@ export type StepperProps<
     precision?: number;
     showButtons?: boolean;
     /**
-     * Spin-button placement.
-     * `right`/`left` — Spectrum NumberField: stacked carets on that edge.
-     * `both` — Apple quantity stepper: minus | value | plus.
+     * Spin-button placement. Default `both` (minus | value | plus).
+     * `right`/`left` — Spectrum stacked carets on that edge (desktop eject;
+     * coerced to `both` on touch — LC-84).
      */
     buttonPosition?: "left" | "right" | "both";
     allowEmpty?: boolean;
@@ -204,8 +207,8 @@ export function Stepper<
     step = 1,
     precision = 0,
     showButtons = true,
-    // Spectrum NumberField default: stacked carets on the trailing edge.
-    buttonPosition = "right",
+    // LC-84: minus | value | plus. Stacked carets are a desktop eject.
+    buttonPosition,
     allowEmpty = false,
     placeholder,
     mode,
@@ -235,6 +238,8 @@ export function Stepper<
   const controlSize = size || knobProps.sizeToken;
   // +/- glyphs are control-internal icons: the recipe's icon channel (LC-79).
   const iconPx = sizeRecipeForToken(String(controlSize)).iconSize;
+  const glyphColor = useGlyphColor();
+  const placement = resolveStepperPlacement(buttonPosition, isTouchSurface());
   const isControlled = valueProp !== undefined && !name;
 
   // Initialize inputValue from defaultValue for standalone mode
@@ -432,7 +437,7 @@ export function Stepper<
           }
         : { opacity: 1 };
 
-    const stacked = buttonPosition === "left" || buttonPosition === "right";
+    const stacked = placement === "left" || placement === "right";
     const showSpin = showButtons && !readOnly;
     const decDisabled = !!(disabled || atMin);
     const incDisabled = !!(disabled || atMax);
@@ -442,15 +447,15 @@ export function Stepper<
         kind="decrement"
         disabled={decDisabled}
         stacked={stacked}
-        seam={buttonPosition === "both" ? "end" : undefined}
+        seam={placement === "both" ? "end" : undefined}
         onPressIn={repeatDecrement.onPressIn}
         onPressOut={repeatDecrement.onPressOut}
         onActivate={focusArea}
       >
         {stacked ? (
-          <CaretDownIcon size={iconPx} weight="bold" aria-hidden />
+          <CaretDownIcon size={iconPx} weight="bold" color={glyphColor} aria-hidden />
         ) : (
-          <MinusIcon size={iconPx} weight="bold" aria-hidden />
+          <MinusIcon size={iconPx} weight="bold" color={glyphColor} aria-hidden />
         )}
       </StepperSpinButton>
     );
@@ -459,15 +464,15 @@ export function Stepper<
         kind="increment"
         disabled={incDisabled}
         stacked={stacked}
-        seam={stacked ? "bottom" : buttonPosition === "both" ? "start" : undefined}
+        seam={stacked ? "bottom" : placement === "both" ? "start" : undefined}
         onPressIn={repeatIncrement.onPressIn}
         onPressOut={repeatIncrement.onPressOut}
         onActivate={focusArea}
       >
         {stacked ? (
-          <CaretUpIcon size={iconPx} weight="bold" aria-hidden />
+          <CaretUpIcon size={iconPx} weight="bold" color={glyphColor} aria-hidden />
         ) : (
-          <PlusIcon size={iconPx} weight="bold" aria-hidden />
+          <PlusIcon size={iconPx} weight="bold" color={glyphColor} aria-hidden />
         )}
       </StepperSpinButton>
     );
@@ -550,12 +555,17 @@ export function Stepper<
 
     // LC-71: ring rides Input.Box so +/− sit inside the perceived boundary.
     const box = (
-      <InputParts.Box size={controlSize} disabled={disabled} data-stepper="true">
-        {showSpin && buttonPosition === "both" ? decrementButton : null}
-        {showSpin && buttonPosition === "left" ? spinColumn("start") : null}
+      <InputParts.Box
+        size={controlSize}
+        disabled={disabled}
+        data-stepper="true"
+        data-stepper-placement={placement}
+      >
+        {showSpin && placement === "both" ? decrementButton : null}
+        {showSpin && placement === "left" ? spinColumn("start") : null}
         {area}
-        {showSpin && buttonPosition === "right" ? spinColumn("end") : null}
-        {showSpin && buttonPosition === "both" ? incrementButton : null}
+        {showSpin && placement === "right" ? spinColumn("end") : null}
+        {showSpin && placement === "both" ? incrementButton : null}
       </InputParts.Box>
     );
 

package/src/fields/Stepper/resolveStepperPlacement.spec.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+import { resolveStepperPlacement } from "./resolveStepperPlacement";
+
+describe("resolveStepperPlacement (LC-84)", () => {
+  it("defaults to both", () => {
+    expect(resolveStepperPlacement(undefined, false)).toBe("both");
+    expect(resolveStepperPlacement(undefined, true)).toBe("both");
+  });
+
+  it("keeps an explicit left/right on fine pointer", () => {
+    expect(resolveStepperPlacement("left", false)).toBe("left");
+    expect(resolveStepperPlacement("right", false)).toBe("right");
+    expect(resolveStepperPlacement("both", false)).toBe("both");
+  });
+
+  it("coerces left/right to both on touch", () => {
+    expect(resolveStepperPlacement("left", true)).toBe("both");
+    expect(resolveStepperPlacement("right", true)).toBe("both");
+    expect(resolveStepperPlacement("both", true)).toBe("both");
+  });
+});

package/src/fields/Stepper/resolveStepperPlacement.ts

@@ -0,0 +1,14 @@
+export type StepperButtonPosition = "left" | "right" | "both";
+
+/**
+ * LC-84 — default minus|value|plus. Stacked carets (left/right) are a desktop
+ * eject; on a touch surface they coerce to `both`.
+ */
+export function resolveStepperPlacement(
+  buttonPosition: StepperButtonPosition | undefined,
+  touch: boolean,
+): StepperButtonPosition {
+  const requested = buttonPosition ?? "both";
+  if (touch && requested !== "both") return "both";
+  return requested;
+}