@multiplatform.one/forms 7.34.4 → 7.36.0

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

package/src/fields/Stepper/index.tsx

@@ -1,3 +1,5 @@
+import { motionDurationMs } from "@multiplatform.one/theme";
+import { cssAnimationConfig } from "@multiplatform.one/theme";
 import { useTouchSurface } from "@multiplatform.one/theme";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
 import { CaretDownIcon, CaretUpIcon, MinusIcon, PlusIcon } from "@phosphor-icons/react";
@@ -38,18 +40,10 @@ const repeatDelay = 400;
 const repeatInterval = 80;
 const boundCaptionDuration = 2000;
 const LARGE_STEP_FACTOR = 10;
+/** A hugging stepper reserves room for at least this many characters. */
+const hugMinChars = 4;
 
 /** CSS timings for discrete value motion (mirrors theme animationConfig). */
-const stepperCssTimings: 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",
-};
 
 const noButtonRing = {
   outlineWidth: 0,
@@ -132,6 +126,16 @@ export type StepperProps<
      * (end) alignment.
      */
     currency?: string;
+    /**
+     * Unit written after the value ("kg", "dm"). The value aligns to the
+     * end beside it, the way the currency glyph does.
+     */
+    unit?: string;
+    /**
+     * The field hugs its value: the input is as wide as the longest value
+     * the bounds allow (or a short default), not the column.
+     */
+    hug?: boolean;
     allowEmpty?: boolean;
     placeholder?: string;
     inputProps?: Omit<InputProps, "value" | "onChangeText" | "ref">;
@@ -141,8 +145,6 @@ export type StepperProps<
     value?: number | null;
     /** When true, renders a skeleton placeholder instead of the stepper */
     skeleton?: boolean;
-    /** When true, uses compact sizing */
-    compact?: boolean;
   };
 
 function StepperSpinButton({
@@ -269,6 +271,11 @@ function StepperSpinButton({
   );
 }
 
+/** Native has no `ch`: a digit is about half the control's type size wide. */
+function hugNativeCharPx(controlSize: unknown): number {
+  return Math.ceil(sizeRecipeForToken(String(controlSize)).fontSize * 0.62);
+}
+
 export function Stepper<
   TParentData,
   TName extends DeepKeys<TParentData>,
@@ -306,16 +313,17 @@ export function Stepper<
     onChange,
     value: valueProp,
     skeleton,
-    compact,
     id: idProp,
     currency,
+    unit,
+    hug = false,
     ...restProps
   } = useProps(props);
 
-  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp, compact });
-  const affix = currencyAffix(currency);
+  const { resolvedForm, knobProps, id } = useFormField({ form, id: idProp });
+  const affix = unit ? { glyph: unit, position: "trailing" as const } : currencyAffix(currency);
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
-  const motionTransition = knobProps.transition as string | undefined;
+  const motionTransition = knobProps.motion.control.transition as string | undefined;
   const controlSize = size || knobProps.sizeToken;
   // +/- glyphs are control-internal icons: the recipe's icon channel (LC-79).
   const iconPx = sizeRecipeForToken(String(controlSize)).iconSize;
@@ -331,6 +339,17 @@ export function Stepper<
     }
     return "";
   });
+  const hugChars = hug
+    ? Math.max(
+        inputValue.length,
+        Math.max(
+          hugMinChars,
+          ...[min, max]
+            .filter((bound): bound is number => typeof bound === "number" && Number.isFinite(bound))
+            .map((bound) => String(Math.trunc(Math.abs(bound))).length + 1),
+        ) + (precision > 0 ? precision + 1 : 0),
+      )
+    : 0;
   // LC-25: discrete +/- taps tween the value chrome; hold-repeat / typing stay live.
   // Opacity (not transform) — Tamagui Input owns transform internally on web.
   const [valueFlash, setValueFlash] = useState(false);
@@ -372,8 +391,8 @@ export function Stepper<
     if (!motionTransition) return;
     setValueFlash(true);
     // Hold the dipped opacity long enough for the CSS transition to paint
-    // intermediates (quick = 100ms).
-    setTimeout(() => setValueFlash(false), 90);
+    // intermediates before restoring the resting opacity.
+    setTimeout(() => setValueFlash(false), motionDurationMs(motionTransition));
   }, [motionTransition]);
 
   const repeatIncrement = useRepeatAction(() => incrementRef.current(), repeatingRef);
@@ -572,7 +591,8 @@ export function Stepper<
     const atMax = currentValue !== null && boundsHi !== undefined && currentValue >= boundsHi;
     const live = repeatingRef.current || typingRef.current;
     const timing = motionTransition
-      ? (stepperCssTimings[motionTransition] ?? stepperCssTimings.quick)
+      ? (cssAnimationConfig[motionTransition as keyof typeof cssAnimationConfig] ??
+        cssAnimationConfig.quick)
       : undefined;
     // Prefer explicit CSS opacity transition — Tamagui `transition` on Input can
     // compile to `all` and fight focus rings; scoped opacity is enough for LC-25.
@@ -678,7 +698,12 @@ export function Stepper<
         data-stepper-live={live ? "true" : undefined}
         data-stepper-flash={valueFlash ? "true" : undefined}
         onChangeText={readOnly ? undefined : handleInputChange}
-        textAlign={affix ? "right" : "center"}
+        textAlign={affix ? "right" : showSpin ? "center" : "left"}
+        {...(hug
+          ? isWeb
+            ? { flexGrow: 0, flexShrink: 0 }
+            : { flexGrow: 0, flexShrink: 0, width: hugChars * hugNativeCharPx(controlSize) }
+          : undefined)}
         opacity={valueMotionStyle.opacity}
         // LC-25 native value tween intentionally disabled: Tamagui's RN
         // animation driver crashes Hermes ("Cannot add new property
@@ -688,6 +713,7 @@ export function Stepper<
           ? {
               style: {
                 ...(inputProps as any)?.style,
+                ...(hug ? { width: `${hugChars}ch` } : undefined),
                 transition: valueMotionStyle.transition,
                 opacity: valueMotionStyle.opacity,
               },
@@ -742,6 +768,8 @@ export function Stepper<
         data-stepper="true"
         data-stepper-control="true"
         data-stepper-placement={placement}
+        data-stepper-hug={hug ? "true" : undefined}
+        {...(hug ? { alignSelf: "flex-start" as const } : undefined)}
         {...(showSpin
           ? {
               paddingHorizontal: 0,
@@ -762,7 +790,10 @@ export function Stepper<
     // Wrap with wheel handler on web
     if (isWeb && !disabled && !readOnly) {
       return (
-        <div {...wheelProps} style={{ minWidth: 0, width: "100%" }}>
+        <div
+          {...wheelProps}
+          style={hug ? { minWidth: 0, maxWidth: "100%" } : { minWidth: 0, width: "100%" }}
+        >
           {box}
         </div>
       );
@@ -797,6 +828,7 @@ export function Stepper<
         size={size}
         knobProps={knobProps}
         onBlur={onBlur}
+        hug={hug}
         // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
         // the sibling label/helper readable) — it needs the disabled state.
         disabled={disabled}
@@ -831,6 +863,7 @@ export function Stepper<
             readOnly,
             disabled,
             onBlur,
+            hug,
             ...restProps,
           }}
           id={id}
@@ -902,6 +935,7 @@ function StepperFieldRenderer<TData>({
       size={fieldProps.size}
       knobProps={knobProps}
       onBlur={mergeFieldHandler(field, "handleBlur", fieldProps.onBlur)}
+      hug={fieldProps.hug}
       // LC-40: see standalone branch — FieldLayout carries dimWhole.
       disabled={fieldProps.disabled}
     >

package/src/fields/Switch/Switch.footprint.native.spec.tsx

@@ -1,16 +1,12 @@
 /**
- * MPO-356 / LC-91 SWITCH-FOOTPRINT, native half. Clay's iPhone measured the
- * default track at about 85 × 43 pt; the track is UISwitch's 51 × 31, and the
- * thumb follows Tamagui's proportion, filling the track inside the 1 pt
- * hairline (29 pt) as it does on web. Mock tamagui's isWeb so the native
- * branch runs on the test host renderer (RadioGroup.native.spec pattern) and
- * read the painted track back.
+ * LC-91: native uses UISwitch's 51 × 31 pt at the scale's control.
+ * The thumb is inset 1 pt and the press target can grow independently.
  */
 
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
+import { Preset, Surface } from "@multiplatform.one/theme";
 import { Switch } from "./index";
 import { paintedBox, thumbOf, trackBox } from "../../../tests/switchFootprintProbe";
 
@@ -21,15 +17,19 @@ vi.mock("tamagui", async (importOriginal) => ({
 
 afterEach(cleanup);
 
-function mount(overrides: Record<string, unknown> = {}, minTargetHeight?: number) {
+const rowToken = { small: "$3", medium: "$4", large: "$5" } as const;
+
+function mount({ size }: { size?: keyof typeof rowToken } = {}, minTargetHeight?: number) {
   const result = renderWithProviders(
-    <Preset overrides={{ elevation: "none", ...overrides }}>
-      <Switch
-        name="sw"
-        defaultValue={false}
-        aria-label="Notifications"
-        {...(minTargetHeight !== undefined && { minTargetHeight })}
-      />
+    <Preset overrides={{ elevation: "none" }}>
+      <Surface size={size ? rowToken[size] : undefined}>
+        <Switch
+          name="sw"
+          defaultValue={false}
+          aria-label="Notifications"
+          {...(minTargetHeight !== undefined && { minTargetHeight })}
+        />
+      </Surface>
     </Preset>,
   );
   const frame = result.getSwitch() as HTMLElement;
@@ -38,7 +38,7 @@ function mount(overrides: Record<string, unknown> = {}, minTargetHeight?: number
 }
 
 describe("Switch footprint on native (MPO-356)", () => {
-  it("paints a UISwitch-sized 51 × 31 track with a 29 pt thumb at default knobs", () => {
+  it("paints a 51 × 31 track with a 29 pt thumb at default knobs", () => {
     const { track, thumb } = mount();
     expect(track).toEqual({ width: 51, height: 31 });
     expect(thumb).toEqual({ width: 29, height: 29 });
@@ -50,7 +50,7 @@ describe("Switch footprint on native (MPO-356)", () => {
     expect(track).toEqual({ width: 51, height: 31 });
   });
 
-  it("steps with the size knob at the UISwitch aspect", () => {
+  it("steps with the size token at the UISwitch aspect", () => {
     const small = mount({ size: "small" }).track;
     cleanup();
     const large = mount({ size: "large" }).track;
@@ -59,7 +59,7 @@ describe("Switch footprint on native (MPO-356)", () => {
   });
 
   for (const size of ["small", "medium", "large"] as const) {
-    it(`size ${size}: the thumb fills the track inside the 1 pt hairline, Tamagui's proportion`, () => {
+    it(`size ${size}: the thumb is inset 1 pt inside the borderless track`, () => {
       const { track, thumb } = mount({ size });
       expect(thumb).toEqual({ width: track.height - 2, height: track.height - 2 });
     });