@multiplatform.one/forms 6.0.4 → 6.3.0

package/src/fields/Switch/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { AnyFormApi } from "../../types";
 import type { ColorTokens, FontSizeTokens, LabelProps, SizeTokens } from "tamagui";
 import {
@@ -20,9 +20,15 @@ import {
   withStaticProperties,
 } from "tamagui";
 import { getSize } from "@tamagui/get-token";
+import {
+  contrastRatio,
+  normalizeToHex,
+  relativeLuminance,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import { Skeleton } from "../../Skeleton";
 import { Field, FieldLayout } from "../../fieldLayout";
-import { formCommonColors, formControlColors } from "../../shared/colorRamps";
+import { formCommonColors, formControlColors, formSwitchColors } from "../../shared/colorRamps";
 import {
   getElevationWrapperProps,
   getFieldError,
@@ -31,6 +37,13 @@ import {
   useFormField,
   useResolvedValidators,
 } from "../../shared/utils";
+import { useIsInTableCell } from "../../shared/tableCellContext";
+
+/** Pointer travel (px) before a gesture counts as thumb-drag instead of click. */
+const SWITCH_DRAG_INTENT_PX = 10;
+
+/** Minimum pressable height for the switch inside table cells (SP-FIXED). */
+const SWITCH_CELL_TARGET_HEIGHT = 44;
 
 // ─── Switch internals ─────────────────────────────────────────────────────────
 
@@ -58,19 +71,25 @@ const SwitchThumbStyled = styled(View, {
     unstyled: {
       false: {
         size: "$true",
-        backgroundColor: formControlColors.thumb.base,
+        backgroundColor: formSwitchColors.thumb,
+        // The thumb is a solid physical handle — it gets its definition from a
+        // subtle drop shadow (iOS/Material convention), NOT a flat gray ring.
+        // A visible border reads as an outline/defect; the shadow lifts the
+        // thumb off the track on every side and survives light-thumb-on-light-
+        // track without a hard edge.
+        borderWidth: 0,
         borderRadius: 1000,
         justifyContent: "center",
         alignItems: "center",
-        ...(!isWeb
-          ? {
+        ...(isWeb
+          ? { 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,
-            }
-          : undefined),
+            }),
       },
     },
 
@@ -100,15 +119,11 @@ const SwitchFrameStyled = styled(View, {
       false: {
         position: "relative",
         borderRadius: 1000,
-        backgroundColor: formControlColors.background,
+        backgroundColor: formSwitchColors.track.off,
         borderWidth: 1,
         borderColor: formControlColors.border,
 
-        hoverStyle: { borderColor: formControlColors.border },
-        pressStyle: { borderColor: formControlColors.border },
-        focusStyle: { borderColor: formControlColors.border },
         focusVisibleStyle: {
-          borderColor: formControlColors.border,
           outlineColor: "$outlineColor",
           outlineStyle: "solid",
           outlineWidth: 2,
@@ -118,11 +133,11 @@ const SwitchFrameStyled = styled(View, {
 
     checked: {
       true: {
-        backgroundColor: formControlColors.border,
-        borderColor: formControlColors.border,
+        backgroundColor: formSwitchColors.track.on,
+        borderColor: formSwitchColors.track.on,
       },
       false: {
-        backgroundColor: formControlColors.background,
+        backgroundColor: formSwitchColors.track.off,
         borderColor: formControlColors.border,
       },
     },
@@ -198,6 +213,292 @@ const StyledSwitch = withStaticProperties(SwitchComp, {
   Icon: SwitchIcon,
 });
 
+// ─── Thumb drag (Tamagui Switch is click-only) ─────────────────────────────────
+//
+// createSwitch toggles on press only — `Switch.draggable-tmp` in @tamagui/switch
+// is unfinished. We own thumb `x` + press+drag so the knob can be dragged on/off
+// while click/toggle and pointy radius stay intact.
+
+type SwitchDragSession = {
+  pointerId: number;
+  startX: number;
+  originChecked: boolean;
+  moved: boolean;
+};
+
+/**
+ * DF-05 / Axiom 15 — the handle color is luminance-COMPUTED from the actual
+ * track fill, never assumed from a scheme token. The thumb's styled token
+ * (`formSwitchColors.thumb`) resolves through the inverted sub-theme tamagui
+ * applies to switch thumbs, landing on scheme ink — measured 2.59:1 against
+ * the checked accent track in light (non-text state floor is 3:1), and
+ * flipping thumb polarity across schemes for no semantic reason. Candidates
+ * are the scheme's paper (color1) and ink (color12) anchors; whichever
+ * carries more contrast on the fill the thumb is riding wins. Returned as a
+ * concrete resolved value so no sub-theme can flip it; returns undefined
+ * (keep the styled default) when any color fails to parse.
+ */
+function useLuminanceThumbColor(displayChecked: boolean): string | undefined {
+  const theme = useTheme();
+  const trackToken = (
+    displayChecked ? formSwitchColors.track.on : formSwitchColors.track.off
+  ).slice(1);
+  const trackRaw = String((theme as any)[trackToken]?.val ?? "");
+  const paperRaw = String(theme.color1?.val ?? "");
+  const inkRaw = String(theme.color12?.val ?? "");
+  const track = trackRaw ? normalizeToHex(trackRaw) : null;
+  const paper = paperRaw ? normalizeToHex(paperRaw) : null;
+  const ink = inkRaw ? normalizeToHex(inkRaw) : null;
+  if (!track || !paper || !ink) return undefined;
+  const trackLum = relativeLuminance(track);
+  return contrastRatio(relativeLuminance(paper), trackLum) >=
+    contrastRatio(relativeLuminance(ink), trackLum)
+    ? paperRaw
+    : inkRaw;
+}
+
+type SwitchControlProps = {
+  checked: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  onBlur?: (...args: any[]) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  hasError?: boolean;
+  id: string;
+  sizeToken: SizeTokens;
+  thumbHeight: number;
+  thumbRadius: number;
+  transition?: string;
+  frameProps: Record<string, any>;
+  switchProps?: Omit<
+    TamaguiSwitchProps,
+    "checked" | "defaultChecked" | "id" | "onCheckedChange" | "children"
+  >;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  inputSurface: Record<string, any>;
+  hoverStyle?: Record<string, any>;
+  pressStyle?: Record<string, any>;
+  focusStyle?: Record<string, any>;
+  focusVisibleStyle?: Record<string, any>;
+  /** Native VoiceOver/TalkBack name (label text) — htmlFor is web-only. */
+  accessibilityLabel?: string;
+  /** Native VoiceOver/TalkBack hint (error or helper text). */
+  accessibilityHint?: string;
+  /**
+   * Grown-target mode (SP-FIXED): when set, the role=switch frame is a
+   * `frameHeight`-tall transparent target (44px in table cells) and the
+   * visible track renders as this inner view, so the touch target grows
+   * without changing the track's visual size.
+   */
+  cellTrack?: { height: number; borderRadius: number; borderWidth: number; frameHeight: number };
+};
+
+function SwitchControl({
+  checked,
+  onCheckedChange,
+  onBlur,
+  disabled,
+  readOnly,
+  required,
+  hasError,
+  id,
+  sizeToken,
+  thumbHeight,
+  thumbRadius,
+  transition,
+  frameProps,
+  switchProps,
+  leftIcon,
+  rightIcon,
+  inputSurface,
+  hoverStyle,
+  pressStyle,
+  focusStyle,
+  focusVisibleStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  cellTrack,
+}: SwitchControlProps) {
+  const { disabledState } = useResolvedKnobs();
+  // Travel distance for a 2:1 track (inner width − thumb ≈ thumb height).
+  const dragDistance = thumbHeight;
+  const [dragX, setDragX] = useState<number | null>(null);
+  // Hold snapped thumb until the controlled `checked` prop catches up (avoids flash).
+  const [snapChecked, setSnapChecked] = useState<boolean | null>(null);
+  const sessionRef = useRef<SwitchDragSession | null>(null);
+  const suppressClickToggleRef = useRef(false);
+  const checkedRef = useRef(checked);
+  const dragDistanceRef = useRef(dragDistance);
+  const onCheckedChangeRef = useRef(onCheckedChange);
+  checkedRef.current = checked;
+  dragDistanceRef.current = dragDistance;
+  onCheckedChangeRef.current = onCheckedChange;
+
+  useEffect(() => {
+    if (snapChecked == null) return;
+    if (checked === snapChecked) setSnapChecked(null);
+  }, [checked, snapChecked]);
+
+  useEffect(() => {
+    if (!isWeb) return;
+
+    const onMove = (e: PointerEvent) => {
+      const session = sessionRef.current;
+      if (!session || e.pointerId !== session.pointerId) return;
+      const dist = dragDistanceRef.current;
+      const originX = session.originChecked ? dist : 0;
+      const nextX = Math.max(0, Math.min(dist, originX + (e.clientX - session.startX)));
+      if (Math.abs(e.clientX - session.startX) >= SWITCH_DRAG_INTENT_PX) {
+        session.moved = true;
+      }
+      // Only track dragX after drag intent: setting it earlier snaps the thumb
+      // to the origin endpoint and kills the transition, teleporting any
+      // in-flight toggle animation (interruptibility, spec Axiom 4).
+      if (session.moved) setDragX(nextX);
+    };
+
+    const endDrag = (e: PointerEvent) => {
+      const session = sessionRef.current;
+      if (!session || e.pointerId !== session.pointerId) return;
+      const dist = dragDistanceRef.current;
+      const originX = session.originChecked ? dist : 0;
+      const nextX = Math.max(0, Math.min(dist, originX + (e.clientX - session.startX)));
+      sessionRef.current = null;
+
+      if (!session.moved) {
+        setDragX(null);
+        return;
+      }
+
+      // Intentional drag: snap by midpoint and block the click toggle that follows.
+      suppressClickToggleRef.current = true;
+      const nextChecked = nextX >= dist / 2;
+      setDragX(null);
+      if (nextChecked !== checkedRef.current) {
+        setSnapChecked(nextChecked);
+        onCheckedChangeRef.current?.(nextChecked);
+      }
+    };
+
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", endDrag);
+    document.addEventListener("pointercancel", endDrag);
+    return () => {
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", endDrag);
+      document.removeEventListener("pointercancel", endDrag);
+    };
+  }, []);
+
+  const displayChecked = snapChecked ?? checked;
+  const thumbHandleColor = useLuminanceThumbColor(displayChecked);
+  const restingX = displayChecked ? dragDistance : 0;
+  const thumbX = dragX != null ? dragX : restingX;
+  const canDrag = isWeb && !disabled && !readOnly;
+  const {
+    onPointerDown: switchPointerDown,
+    onPress: switchPress,
+    ...restSwitchProps
+  } = (switchProps || {}) as Record<string, any>;
+
+  return (
+    <StyledSwitch
+      {...inputSurface}
+      transition={transition || "quick"}
+      size={sizeToken}
+      {...(hoverStyle && { hoverStyle })}
+      {...(pressStyle && { pressStyle })}
+      {...(focusStyle && { focusStyle })}
+      {...(focusVisibleStyle && { focusVisibleStyle })}
+      activeStyle={{
+        backgroundColor: formSwitchColors.track.on,
+        borderColor: formSwitchColors.track.on,
+      }}
+      // DF-23 / LC-40 DISABLED-VISIBLE: the track is text-free control
+      // chrome — under `keepLabel` it opacity-dims via the resolved recipe
+      // while the sibling label/helper stay readable; `dimWhole` leaves the
+      // single dim to the FieldLayout assembly.
+      {...(disabled ? disabledState.chromeKnobProps : undefined)}
+      {...frameProps}
+      {...restSwitchProps}
+      disabled={disabled}
+      id={id}
+      checked={checked}
+      // iOS: bare styled Views are not accessibility elements — without this
+      // block the switch is invisible to VoiceOver (no name, role, or state).
+      {...(!isWeb && {
+        accessible: true,
+        accessibilityRole: "switch" as const,
+        accessibilityState: { disabled: !!disabled, checked },
+        ...(accessibilityLabel ? { accessibilityLabel } : undefined),
+        ...(accessibilityHint ? { accessibilityHint } : undefined),
+      })}
+      {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
+      {...(readOnly ? { "aria-readonly": true } : undefined)}
+      aria-required={required || undefined}
+      aria-invalid={hasError || undefined}
+      onCheckedChange={(val) => {
+        if (disabled || readOnly) return;
+        // After a drag, Tamagui still fires press→toggle; ignore that flip.
+        if (suppressClickToggleRef.current) {
+          suppressClickToggleRef.current = false;
+          return;
+        }
+        onCheckedChange?.(val);
+      }}
+      {...(onBlur ? { onBlur } : undefined)}
+      onPointerDown={(e: any) => {
+        switchPointerDown?.(e);
+        if (!canDrag) return;
+        if (typeof e.button === "number" && e.button !== 0) return;
+        sessionRef.current = {
+          pointerId: e.pointerId ?? 0,
+          startX: e.clientX,
+          originChecked: checkedRef.current,
+          moved: false,
+        };
+        setSnapChecked(null);
+        // Do NOT setDragX here — dragX starts only once drag intent is
+        // confirmed in onMove, so a plain click (or mid-flight retarget)
+        // never freezes/teleports the thumb.
+      }}
+      {...(switchPress ? { onPress: switchPress } : undefined)}
+    >
+      {cellTrack && (
+        <View
+          position="absolute"
+          left={0}
+          right={0}
+          top="50%"
+          y={-cellTrack.height / 2}
+          height={cellTrack.height}
+          borderRadius={cellTrack.borderRadius}
+          borderWidth={cellTrack.borderWidth}
+          borderColor={displayChecked ? formSwitchColors.track.on : formControlColors.border}
+          backgroundColor={displayChecked ? formSwitchColors.track.on : formSwitchColors.track.off}
+          transition={transition || "quick"}
+          pointerEvents="none"
+        />
+      )}
+      {leftIcon && <StyledSwitch.Icon placement="left">{leftIcon}</StyledSwitch.Icon>}
+      {rightIcon && <StyledSwitch.Icon placement="right">{rightIcon}</StyledSwitch.Icon>}
+      <StyledSwitch.Thumb
+        borderRadius={thumbRadius}
+        // Own position so drag can override Tamagui's initialChecked alignSelf/x math.
+        alignSelf="flex-start"
+        x={thumbX + (cellTrack ? cellTrack.borderWidth : 0)}
+        {...(cellTrack && {
+          y: (cellTrack.frameHeight - thumbHeight) / 2,
+        })}
+        {...(thumbHandleColor ? { backgroundColor: thumbHandleColor } : undefined)}
+        transition={dragX != null ? "none" : transition || "quick"}
+      />
+    </StyledSwitch>
+  );
+}
+
 // ─── Form-aware Switch ────────────────────────────────────────────────────────
 
 export interface SwitchProps {
@@ -215,6 +516,12 @@ export interface SwitchProps {
   id?: string;
   checked?: boolean;
   defaultValue?: boolean;
+  /**
+   * Canonical change handler, consistent with the rest of the field family
+   * (Input/Select/Checkbox all use `onChange`). Prefer this. `onCheckedChange`
+   * is kept as an alias for callers used to the tamagui/Radix name.
+   */
+  onChange?: (checked: boolean) => void;
   onCheckedChange?: (checked: boolean) => void;
   onBlur?: (...args: any[]) => void;
   leftIcon?: ReactNode;
@@ -229,6 +536,13 @@ export interface SwitchProps {
   skeleton?: boolean;
   /** When true, uses compact sizing */
   compact?: boolean;
+  /**
+   * Touch-target floor (SP-FIXED): grows the pressable role=switch frame to
+   * at least this many px (invisible — the visible track keeps its normal
+   * size, centered inside), the same mechanism table cells use at 44px.
+   * Dense toggle lists pass 44 so every toggle is individually hittable.
+   */
+  minTargetHeight?: number;
 }
 
 export function Switch({
@@ -246,6 +560,7 @@ export function Switch({
   id: idProp,
   checked,
   defaultValue,
+  onChange,
   onCheckedChange,
   onBlur,
   leftIcon,
@@ -254,7 +569,14 @@ export function Switch({
   pointy,
   skeleton,
   compact,
+  minTargetHeight,
 }: SwitchProps) {
+  // Canonical `onChange` and the alias `onCheckedChange` both fire; standalone
+  // (formless) callers get real toggling from either name.
+  const handleValueChange = (val: boolean) => {
+    onChange?.(val);
+    onCheckedChange?.(val);
+  };
   const { resolvedForm, knobProps, control, text, elevation, id } = useFormField({
     form: formProp,
     id: idProp,
@@ -262,6 +584,7 @@ export function Switch({
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name, (v) => !v);
   const elevationWrapperProps = getElevationWrapperProps(knobProps, elevation);
+  const inTableCell = useIsInTableCell();
 
   const [internalChecked, setInternalChecked] = useState(defaultValue ?? false);
 
@@ -271,20 +594,37 @@ export function Switch({
     }
   }, [defaultValue, checked]);
 
+  // Coordinated geometry (LC-10): ONE size token drives the control (track,
+  // thumb) AND the row slot, so an explicit `size` prop can never make the
+  // control outgrow its own row.
+  const sizeToken = (size ?? knobProps.sizeToken) as SizeTokens;
+  const borderWidth = knobProps.borderRadius.borderWidth ?? 1;
+  const thumbHeight = getSwitchHeight(sizeToken);
+  const trackHeight = thumbHeight + borderWidth * 2;
+  // Grown-target mode (SP-FIXED): table cells always grow the pressable
+  // frame to 44px; standalone consumers opt in via `minTargetHeight`. The
+  // row slot floors at the frame height so grown targets never overlap
+  // sibling rows.
+  const targetHeight = inTableCell
+    ? SWITCH_CELL_TARGET_HEIGHT
+    : minTargetHeight !== undefined
+      ? Math.max(minTargetHeight, trackHeight)
+      : undefined;
+  const grownTarget = targetHeight !== undefined;
+  const rowMinHeight = !inTableCell && grownTarget ? targetHeight : undefined;
+
   const renderSwitch = (
     switchChecked: boolean,
     handleChange?: (val: boolean) => void,
     handleBlur?: (...args: any[]) => void,
     hasError?: boolean,
+    errorMessage?: string,
   ) => {
     const resolvedPointy = pointy ?? knobProps.pointy;
     const knobRadius = knobProps.borderRadius.borderRadius;
     const isSquare = resolvedPointy || knobRadius === "$0";
     const overrideRadius = (switchProps as any)?.borderRadius;
 
-    const borderWidth = knobProps.borderRadius.borderWidth ?? 1;
-    const thumbHeight = getSwitchHeight(knobProps.sizeToken as SizeTokens);
-
     let frameProps: Record<string, any> = {};
     let thumbRadius = 1000;
 
@@ -312,65 +652,97 @@ export function Switch({
       };
     }
 
+    // Grown-target mode (SP-FIXED): grow the pressable frame (44px in cells,
+    // `minTargetHeight` floor standalone) and strip its chrome; the visible
+    // track renders inside SwitchControl at its normal size, so visual
+    // density is unchanged. Track radius follows the thumb radius
+    // (override / square / pill), already resolved above.
+    const cellTrack = grownTarget
+      ? {
+          height: trackHeight,
+          borderRadius: thumbRadius,
+          borderWidth,
+          frameHeight: targetHeight,
+        }
+      : undefined;
+    if (grownTarget) {
+      frameProps = {
+        ...frameProps,
+        height: targetHeight,
+        minHeight: targetHeight,
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        borderColor: "transparent",
+        // createSwitch spreads activeStyle last when checked — keep the
+        // (invisible) grown frame transparent in the checked state too.
+        activeStyle: { backgroundColor: "transparent", borderColor: "transparent" },
+      };
+    }
+
+    // Checked tracks keep the accent fill AND border through hover/press/
+    // focus — the control knobs' neutral state-layer ($backgroundHover/
+    // $backgroundPress) must never paint over the active accent track
+    // (LC-05 ONE-EMPHASIS), so the checked fill is re-applied last.
+    const stateBorderColor = switchChecked ? formSwitchColors.track.on : formControlColors.border;
+    const checkedTrackFill = switchChecked
+      ? {
+          backgroundColor: formSwitchColors.track.on,
+          borderColor: formSwitchColors.track.on,
+        }
+      : undefined;
+    const hoverKnob = stripRadiusFromStateProps(control.hoverKnobProps);
+    const pressKnob = stripRadiusFromStateProps(control.pressKnobProps);
+    const focusKnob = stripRadiusFromStateProps(control.focusKnobProps);
+    const focusVisibleKnob = stripRadiusFromStateProps(control.focusVisibleKnobProps);
+
     const switchElement = (
-      <StyledSwitch
-        {...knobProps.inputSurface}
-        transition={knobProps.transition || "quick"}
-        size={knobProps.sizeToken}
-        {...(stripRadiusFromStateProps(control.hoverKnobProps) && {
-          hoverStyle: {
-            borderColor: formControlColors.border,
-            ...stripRadiusFromStateProps(control.hoverKnobProps),
-          },
+      <SwitchControl
+        checked={switchChecked}
+        onCheckedChange={(val) => {
+          if (disabled || readOnly) return;
+          handleChange?.(val);
+          handleValueChange(val);
+        }}
+        onBlur={handleBlur}
+        disabled={disabled}
+        readOnly={readOnly}
+        required={required}
+        hasError={hasError}
+        id={id}
+        sizeToken={sizeToken}
+        thumbHeight={thumbHeight}
+        thumbRadius={thumbRadius}
+        transition={(knobProps.transition as string | undefined) || "quick"}
+        frameProps={frameProps}
+        switchProps={switchProps}
+        leftIcon={leftIcon}
+        rightIcon={rightIcon}
+        inputSurface={grownTarget ? {} : knobProps.inputSurface}
+        cellTrack={cellTrack}
+        accessibilityLabel={
+          typeof label === "string" ? `${label}${required ? " *" : ""}` : undefined
+        }
+        accessibilityHint={errorMessage ?? helperText}
+        {...(hoverKnob && {
+          hoverStyle: { borderColor: stateBorderColor, ...hoverKnob, ...checkedTrackFill },
         })}
-        {...(stripRadiusFromStateProps(control.pressKnobProps) && {
-          pressStyle: {
-            borderColor: formControlColors.border,
-            ...stripRadiusFromStateProps(control.pressKnobProps),
-          },
+        {...(pressKnob && {
+          pressStyle: { borderColor: stateBorderColor, ...pressKnob, ...checkedTrackFill },
         })}
-        {...(stripRadiusFromStateProps(control.focusKnobProps) && {
-          focusStyle: {
-            borderColor: formControlColors.border,
-            ...stripRadiusFromStateProps(control.focusKnobProps),
-          },
+        {...(focusKnob && {
+          focusStyle: { borderColor: stateBorderColor, ...focusKnob, ...checkedTrackFill },
         })}
-        {...(stripRadiusFromStateProps(control.focusVisibleKnobProps) && {
+        {...(focusVisibleKnob && {
           focusVisibleStyle: {
-            borderColor: formControlColors.border,
-            ...stripRadiusFromStateProps(control.focusVisibleKnobProps),
+            borderColor: stateBorderColor,
+            ...focusVisibleKnob,
+            ...checkedTrackFill,
           },
         })}
-        activeStyle={{
-          backgroundColor: formControlColors.border,
-          borderColor: formControlColors.border,
-        }}
-        {...frameProps}
-        {...switchProps}
-        disabled={disabled}
-        id={id}
-        checked={switchChecked}
-        {...(readOnly ? { pointerEvents: "none" as const } : undefined)}
-        {...(readOnly ? { "aria-readonly": true } : undefined)}
-        aria-required={required || undefined}
-        aria-invalid={hasError || undefined}
-        onCheckedChange={(val) => {
-          if (disabled || readOnly) return;
-          handleChange?.(val);
-          onCheckedChange?.(val);
-        }}
-        {...(handleBlur ? { onBlur: handleBlur } : undefined)}
-      >
-        {leftIcon && <StyledSwitch.Icon placement="left">{leftIcon}</StyledSwitch.Icon>}
-        {rightIcon && <StyledSwitch.Icon placement="right">{rightIcon}</StyledSwitch.Icon>}
-        <StyledSwitch.Thumb
-          borderRadius={thumbRadius}
-          transition={knobProps.transition || "quick"}
-        />
-      </StyledSwitch>
+      />
     );
 
-    if (elevationWrapperProps.elevation) {
+    if (elevationWrapperProps.elevation && !grownTarget) {
       return (
         <View {...elevationWrapperProps} borderRadius={isSquare ? 0 : 1000}>
           {switchElement}
@@ -383,11 +755,24 @@ export function Switch({
 
   // Render skeleton placeholder
   if (skeleton) {
+    // Mirror the real anatomy (LC-20 SKELETON-MIRRORS-ANATOMY): same track
+    // size as renderSwitch, pill (1000) or square (0) radius matching the
+    // real control, and a deterministic px label width — never % inside this
+    // auto-width row (%-width collapses and overflows the next sibling).
+    const resolvedPointy = pointy ?? knobProps.pointy;
+    const knobRadius = knobProps.borderRadius.borderRadius;
+    const isSquare = resolvedPointy || knobRadius === "$0";
+    const trackWidth = thumbHeight * 2 + borderWidth * 2;
     return (
       <FieldLayout id={id} size={size} knobProps={knobProps} compactSpacing>
-        <XStack gap="$2" alignItems="center" height={size || knobProps.sizeToken}>
-          <Skeleton variant="rounded" width={44} height={24} />
-          {label && <Skeleton variant="text" width="40%" height={14} />}
+        <XStack {...knobProps.gap} alignItems="center" height={sizeToken}>
+          <Skeleton
+            variant="rounded"
+            width={trackWidth}
+            height={trackHeight}
+            borderRadius={isSquare ? 0 : 1000}
+          />
+          {label && <Skeleton variant="text" width={96} height={14} />}
         </XStack>
       </FieldLayout>
     );
@@ -396,13 +781,28 @@ export function Switch({
   if (!resolvedForm || !name) {
     const resolvedChecked = checked !== undefined ? checked : internalChecked;
     return (
-      <FieldLayout id={id} error={error} helperText={helperText} size={size} knobProps={knobProps}>
-        <XStack {...knobProps.gap} alignItems="center" height={size || knobProps.sizeToken}>
+      <FieldLayout
+        id={id}
+        error={error}
+        helperText={helperText}
+        size={size}
+        knobProps={knobProps}
+        // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
+        // the sibling label/helper readable) — it needs the disabled state.
+        disabled={disabled}
+      >
+        <XStack
+          {...knobProps.gap}
+          alignItems="center"
+          height={sizeToken}
+          {...(rowMinHeight !== undefined && { minHeight: rowMinHeight })}
+        >
           {renderSwitch(
             resolvedChecked,
             checked === undefined ? (val) => setInternalChecked(val) : undefined,
             onBlur,
             !!error,
+            typeof error === "string" && error ? error : undefined,
           )}
           {label && (
             <Label
@@ -417,7 +817,7 @@ export function Switch({
                 color: knobProps.textAccentColor,
                 ...text.focusVisibleKnobProps,
               }}
-              paddingRight="$1"
+              paddingInlineEnd="$1"
               {...labelProps}
             >
               {label}
@@ -446,13 +846,21 @@ export function Switch({
             helperText={helperText}
             size={size}
             knobProps={knobProps}
+            // LC-40: see standalone branch — FieldLayout carries dimWhole.
+            disabled={disabled}
           >
-            <XStack {...knobProps.gap} alignItems="center" height={size || knobProps.sizeToken}>
+            <XStack
+              {...knobProps.gap}
+              alignItems="center"
+              height={sizeToken}
+              {...(rowMinHeight !== undefined && { minHeight: rowMinHeight })}
+            >
               {renderSwitch(
                 checked !== undefined ? checked : Boolean(field.state.value),
                 (val) => field.handleChange(val as any),
                 mergeFieldHandler(field, "handleBlur", onBlur),
                 !!resolvedError,
+                typeof resolvedError === "string" && resolvedError ? resolvedError : undefined,
               )}
               {label && (
                 <Label
@@ -464,7 +872,7 @@ export function Switch({
                   pressStyle={{ color: formLabelColor, ...text.pressKnobProps }}
                   focusStyle={{ color: formLabelColor, ...text.focusKnobProps }}
                   focusVisibleStyle={{ color: formLabelColor, ...text.focusVisibleKnobProps }}
-                  paddingRight="$1"
+                  paddingInlineEnd="$1"
                   {...labelProps}
                 >
                   {label}