@astryxdesign/core 0.7.6 → 0.7.7-canary.0eb44a2

package/src/Switch/Switch.tsx

@@ -17,7 +17,9 @@
  */
 
 import {
+  Fragment,
   useId,
+  useMemo,
   useOptimistic,
   useTransition,
   useEffect,
@@ -36,6 +38,7 @@ import {
   typographyVars,
   typeScaleVars,
   focusVars,
+  shadowVars,
 } from '../theme/tokens.stylex';
 import {FieldLabel} from '../Field/FieldLabel';
 import {FieldStatus} from '../FieldStatus/FieldStatus';
@@ -45,7 +48,6 @@ import {Spinner} from '../Spinner';
 import {useTooltip} from '../Tooltip';
 import {mergeProps, mergeRefs, rtlStyles} from '../utils';
 import {switchFocusInput, switchScope} from './switch.markers.stylex';
-import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import type {BaseProps} from '../BaseProps';
 import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
@@ -61,18 +63,53 @@ import {
 import english from '../i18n/generated-english/Switch/Switch.generated';
 
 registerEnglishFallback(english);
-const wrapperSizeStyles = stylex.create({
-  sm: {
-    width: 32,
-    height: 20,
-  },
-  md: {
-    width: 40,
-    height: 24,
-  },
-});
+import {
+  interactionOverlayStyles,
+  pressConsts,
+  pressVars,
+} from '../utils/interactionOverlay.stylex';
+import {pressHoldsDragProps} from '../privateAttributes/pressHoldsDrag.stylex';
+import {useSwitchTouch, type SwitchTouchParts} from './useSwitchTouch';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
+import {watchHitArea, writeHitInsets} from '../utils/hitArea';
+
+/**
+ * The track box of each size, px (width × height), for the touch
+ * presentation's thumb geometry.
+ * SYNC: wrapperSizeStyles and trackSizeStyles below.
+ */
+const TRACK_SIZE = {sm: [32, 20], md: [40, 24]} as const;
 
-const inputSizeStyles = stylex.create({
+/**
+ * A finger: utils/touchPresentation.ts's TOUCH_QUERY. The touch presentation
+ * is one model on every touch device: the lift, tracking, flip rule and
+ * springs sit under it alone.
+ * SYNC: utils/touchPresentation.ts TOUCH_QUERY.
+ */
+const TOUCH = '@media (pointer: coarse)';
+
+/** The press controller's two states on the row it writes to. */
+const PRESS_ON = '[data-astryx-press="on"]';
+const PRESS_FADING = '[data-astryx-press="fading"]';
+
+/**
+ * The shared press release, for the press layers the switch fades on the
+ * compositor. The clock scales by the theme's tempo, and the curve is the
+ * controller's own. Switch.test.tsx compares the two.
+ * SYNC: utils/interactionOverlay.stylex.ts PRESS_RELEASE_DURATION,
+ * PRESS_RELEASE_DURATION_REDUCED and RELEASE_EASE.
+ */
+const PRESS_RELEASE_DURATION = `calc(${pressConsts.releaseMs}ms * min(var(--_astryx-motion-tempo, 1), 1.5))`;
+const PRESS_RELEASE_DURATION_REDUCED = `min(${pressConsts.releaseMs}ms, calc(${pressConsts.releaseMs}ms * var(--_astryx-motion-tempo, 1)))`;
+const PRESS_RELEASE_EASE = 'cubic-bezier(0, 0, 0.2, 1)';
+
+// The measured hit insets (utils/hitArea), 0 until measured.
+const HIT_TOP = 'var(--astryx-hit-inset-top, 0px)';
+const HIT_RIGHT = 'var(--astryx-hit-inset-right, 0px)';
+const HIT_BOTTOM = 'var(--astryx-hit-inset-bottom, 0px)';
+const HIT_LEFT = 'var(--astryx-hit-inset-left, 0px)';
+
+const wrapperSizeStyles = stylex.create({
   sm: {
     width: 32,
     height: 20,
@@ -83,6 +120,9 @@ const inputSizeStyles = stylex.create({
   },
 });
 
+// Every touch value sits in the same property as the mouse value, as a
+// nested condition, never in a later style. A later style that names a
+// property replaces all of it, mouse value included.
 const trackSizeStyles = stylex.create({
   sm: {
     width: 32,
@@ -96,16 +136,28 @@ const trackSizeStyles = stylex.create({
   },
 });
 
+// The thumb is one circle under any pointer, at each state's size. Under a
+// finger it rests by insets instead of a transform, centered in the track's
+// height at each end. So the compositor moves and lifts it with translate and
+// scale alone; useSwitchTouch measures the box it renders.
 const thumbOffSizeStyles = stylex.create({
   sm: {
     width: 14,
     height: 14,
-    transform: 'translateX(0)',
+    insetInlineStart: {default: null, [TOUCH]: 3},
+    transform: {
+      default: 'translateX(0)',
+      [TOUCH]: 'none',
+    },
   },
   md: {
     width: 16,
     height: 16,
-    transform: 'translateX(0)',
+    insetInlineStart: {default: null, [TOUCH]: 4},
+    transform: {
+      default: 'translateX(0)',
+      [TOUCH]: 'none',
+    },
   },
 });
 
@@ -113,6 +165,8 @@ const thumbOnSizeStyles = stylex.create({
   sm: {
     width: 16,
     height: 16,
+    insetInlineStart: {default: null, [TOUCH]: 'auto'},
+    insetInlineEnd: {default: null, [TOUCH]: 2},
     // The thumb rests at the inline-start edge (flex-start, which flexbox
     // already mirrors under RTL). The on-state travel toward the inline-end
     // edge is a physical translateX, so it must flip sign under RTL — right
@@ -120,15 +174,25 @@ const thumbOnSizeStyles = stylex.create({
     // iOS): off-thumb on the reading-start side, on-thumb on the reading-end.
     transform: {
       default: 'translateX(12px)',
-      ':is([dir="rtl"] *)': 'translateX(-12px)',
+      ':is([dir="rtl"] *)': {
+        default: 'translateX(-12px)',
+        [TOUCH]: 'none',
+      },
+      [TOUCH]: 'none',
     },
   },
   md: {
     width: 20,
     height: 20,
+    insetInlineStart: {default: null, [TOUCH]: 'auto'},
+    insetInlineEnd: {default: null, [TOUCH]: 2},
     transform: {
       default: 'translateX(14px)',
-      ':is([dir="rtl"] *)': 'translateX(-14px)',
+      ':is([dir="rtl"] *)': {
+        default: 'translateX(-14px)',
+        [TOUCH]: 'none',
+      },
+      [TOUCH]: 'none',
     },
   },
 });
@@ -141,11 +205,43 @@ const thumbOnSizeStyles = stylex.create({
 // hover tint already is: pressing the input, the track or the label all
 // activate the row.
 const pressedImage = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
-// The touch press's paint, declared by the shared overlay styles on the
-// element the controller writes to (`pressedAlpha`) at the press's strength,
-// 1 while on and 1 → 0 over the release, and inherited resolved by the layer
-// that paints it. See interactionOverlay.stylex.ts.
-const pressedOverlayImage = 'var(--_press-paint-image)';
+
+/** The touch press's release on the press layer: opacity 1 → 0. */
+const pressLayerRelease = stylex.keyframes({
+  from: {opacity: 1},
+  to: {opacity: 0},
+});
+
+const PRESS_ALPHA = pressVars['--astryx-press-alpha'];
+
+/**
+ * The shared strength's release, restated so a fine pointer keeps it: the
+ * same keyframes, so the same animation.
+ */
+const pressStrengthRelease = stylex.keyframes({
+  from: {[PRESS_ALPHA]: 1},
+  to: {[PRESS_ALPHA]: 0},
+});
+
+const pressOwnerStyles = stylex.create({
+  /**
+   * Composed after `interactionOverlayStyles.pressedAlpha` on the row. Under
+   * a coarse primary pointer the track's and thumb's layers fade the press.
+   * So the strength holds through the release, not animated on the main
+   * thread. With any other pointer the row keeps `pressedAlpha`'s release.
+   */
+  pressedAlphaLayered: {
+    animationName: {
+      default: null,
+      [PRESS_FADING]: {
+        default: pressStrengthRelease,
+        '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+          'none',
+        '@media (pointer: coarse)': 'none',
+      },
+    },
+  },
+});
 
 const labelWrapperSizeStyles = stylex.create({
   sm: {
@@ -182,6 +278,13 @@ const styles = stylex.create({
     flexShrink: 0,
     isolation: 'isolate',
   },
+  // Horizontal touch moves are the switch's drag and vertical ones the page's
+  // scroll, under any primary pointer. A touchscreen laptop's finger counts
+  // too. It is set in CSS so it holds before hydration. A disabled or loading
+  // switch takes no drag, so it leaves every move to the page.
+  switchWrapperInteractive: {
+    touchAction: 'pan-y pinch-zoom',
+  },
   input: {
     position: 'absolute',
     top: '50%',
@@ -194,10 +297,24 @@ const styles = stylex.create({
     },
     zIndex: 1,
   },
+  // The invisible input covers the track. Under a coarse pointer it is the
+  // hit area a finger needs. It grows toward 44 × 44 px by the insets
+  // utils/hitArea measures, each side stopping at half the gap to a
+  // neighbouring target. Its center moves with any uneven side, and nothing
+  // visible grows. The insets are 0 until measured. Physical left and
+  // translate, as centerInline: the insets are physical sides.
   inputCoarse: {
-    '@media (pointer: coarse)': {
-      minInlineSize: 24,
-      minBlockSize: 24,
+    width: {
+      default: '100%',
+      '@media (pointer: coarse)': `calc(100% + ${HIT_LEFT} + ${HIT_RIGHT})`,
+    },
+    height: {
+      default: '100%',
+      '@media (pointer: coarse)': `calc(100% + ${HIT_TOP} + ${HIT_BOTTOM})`,
+    },
+    transform: {
+      default: 'translate(-50%, -50%)',
+      '@media (pointer: coarse)': `translate(calc(-50% + (${HIT_RIGHT} - ${HIT_LEFT}) / 2), calc(-50% + (${HIT_BOTTOM} - ${HIT_TOP}) / 2))`,
     },
   },
   inputDisabled: {
@@ -209,11 +326,22 @@ const styles = stylex.create({
   track: {
     display: 'flex',
     alignItems: 'center',
+    // Under a finger the press layer (::before), the colour fade (::after)
+    // and the thumb sit in the track, in a stacking context of its own.
+    position: {default: null, [TOUCH]: 'relative'},
+    isolation: {default: null, [TOUCH]: 'isolate'},
     borderRadius: radiusVars['--radius-full'],
     transitionProperty: 'background-color',
+    // Under a finger the track's fill changes at once and the fade layer
+    // crossfades it on the compositor. Reduced motion comes last so it holds
+    // everywhere: under a finger the fade layer
+    // carries the colour, and with a mouse the change is immediate.
     transitionDuration: {
       default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
+      [TOUCH]: '0s',
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': '0s',
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        '0s',
     },
     transitionTimingFunction: easeVars['--ease-standard'],
     boxSizing: 'border-box',
@@ -240,28 +368,102 @@ const styles = stylex.create({
         default: null,
         '@media (forced-colors: none)': {
           default: pressedImage,
-          // Under a coarse pointer the touch press model writes `data-astryx-press`
-          // on the row instead; see interactionOverlay.stylex.ts.
+          // Under a coarse pointer the touch press controller writes
+          // `data-astryx-press` on the row instead, and the press layer
+          // (::before) paints it.
           '@media (pointer: coarse)': 'none',
         },
       },
-      // Nested in the same media as the arm above so it outranks the drop: an
-      // ancestor-scoped attribute selector gets no priority of its own.
-      [stylex.when.ancestor('[data-astryx-press="on"]', switchScope)]: {
+    },
+    // The press, under a finger: a layer over the track's fill and colour
+    // fade and under the thumb. It exists only while the row is pressed or
+    // releasing. Its opacity is the press: on at once, then the shared
+    // release's clock and curve. The release runs on the compositor, so the
+    // press never sticks while the main thread is busy.
+    '::before': {
+      content: {
         default: null,
-        '@media (forced-colors: none)': {
+        [stylex.when.ancestor(PRESS_ON, switchScope)]: {
           default: null,
-          '@media (pointer: coarse)': pressedOverlayImage,
+          [TOUCH]: '""',
+        },
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
+          default: null,
+          [TOUCH]: '""',
         },
       },
-      [stylex.when.ancestor('[data-astryx-press="fading"]', switchScope)]: {
+      position: 'absolute',
+      inset: 0,
+      zIndex: 1,
+      borderRadius: 'inherit',
+      pointerEvents: 'none',
+      backgroundColor: {
         default: null,
-        '@media (forced-colors: none)': {
+        '@media (forced-colors: none)': colorVars['--color-overlay-pressed'],
+      },
+      opacity: {
+        default: null,
+        [stylex.when.ancestor(PRESS_ON, switchScope)]: {
+          default: null,
+          [TOUCH]: 1,
+        },
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
+          default: null,
+          [TOUCH]: 0,
+        },
+      },
+      animationName: {
+        default: null,
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
           default: null,
-          '@media (pointer: coarse)': pressedOverlayImage,
+          [TOUCH]: pressLayerRelease,
+        },
+      },
+      animationDuration: {
+        default: null,
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
+          default: null,
+          [TOUCH]: {
+            default: PRESS_RELEASE_DURATION,
+            '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+              PRESS_RELEASE_DURATION_REDUCED,
+          },
+        },
+      },
+      animationTimingFunction: {
+        default: null,
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
+          default: null,
+          [TOUCH]: PRESS_RELEASE_EASE,
+        },
+      },
+      animationFillMode: {
+        default: null,
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
+          default: null,
+          [TOUCH]: 'both',
         },
       },
     },
+    // The colour fade, under a finger: a layer over the track's own fill. It
+    // shows the fill the track is leaving, or mid-drag the one it heads to,
+    // and fades it on the compositor. Its colour is the theme's, read from
+    // the track (switchFill.ts). The animator owns its opacity, and at rest it
+    // is clear.
+    '::after': {
+      content: '""',
+      display: {default: 'none', [TOUCH]: 'block'},
+      position: 'absolute',
+      inset: 0,
+      zIndex: 0,
+      borderRadius: 'inherit',
+      pointerEvents: 'none',
+      opacity: 0,
+      backgroundColor: 'var(--_switch-fade-fill, transparent)',
+      // Its own compositing layer from the start, so its fade runs off the
+      // main thread (iOS Safari otherwise animates it on the main thread).
+      willChange: {default: null, [TOUCH]: 'opacity'},
+    },
   },
   // The one ring in the system not drawn by focusOutlineStyles. The focusable
   // input is the track's preceding sibling, so the condition reads that input
@@ -329,38 +531,117 @@ const styles = stylex.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: radiusVars['--radius-full'],
-    transitionProperty: 'transform, width, height',
+    // Under a finger it sits in the track, centered in its height, above the
+    // colour fade (::after) and the press layer (::before). useSwitchTouch
+    // moves and lifts it on the compositor: nothing of its own transitions.
+    position: {default: null, [TOUCH]: 'absolute'},
+    insetBlock: {default: null, [TOUCH]: 0},
+    marginBlock: {default: null, [TOUCH]: 'auto'},
+    zIndex: {default: null, [TOUCH]: 2},
+    pointerEvents: {default: null, [TOUCH]: 'none'},
+    transitionProperty: {
+      default: 'transform, width, height',
+      [TOUCH]: 'none',
+    },
+    // Under reduced motion nothing slides: under a finger the thumb
+    // cross-fades through the animator, and with a mouse it moves at once.
     transitionDuration: {
       default: durationVars['--duration-fast'],
-      '@media (prefers-reduced-motion: reduce)': '0s',
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': '0s',
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        '0s',
     },
     transitionTimingFunction: easeVars['--ease-standard'],
-    // Pressed: the same overlay as the track, so the whole control darkens
-    // under the finger rather than the thumb standing out against a darker
-    // track.
-    backgroundImage: {
-      default: null,
-      [stylex.when.ancestor(':active', switchScope)]: {
+    // The lifted shadow, under a finger: the theme's elevation on a layer the
+    // thumb's size. It fades in with the lift on the compositor, and at rest
+    // it is clear. The press on the thumb too, under a finger: the same layer
+    // as the track's, over the thumb's fill.
+    '::before': {
+      content: {
         default: null,
-        '@media (forced-colors: none)': {
-          default: pressedImage,
-          '@media (pointer: coarse)': 'none',
+        [stylex.when.ancestor(PRESS_ON, switchScope)]: {
+          default: null,
+          [TOUCH]: '""',
+        },
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
+          default: null,
+          [TOUCH]: '""',
         },
       },
-      // Nested in the same media as the arm above so it outranks the drop: an
-      // ancestor-scoped attribute selector gets no priority of its own.
-      [stylex.when.ancestor('[data-astryx-press="on"]', switchScope)]: {
+      position: 'absolute',
+      inset: 0,
+      borderRadius: 'inherit',
+      pointerEvents: 'none',
+      backgroundColor: {
         default: null,
-        '@media (forced-colors: none)': {
+        '@media (forced-colors: none)': colorVars['--color-overlay-pressed'],
+      },
+      opacity: {
+        default: null,
+        [stylex.when.ancestor(PRESS_ON, switchScope)]: {
+          default: null,
+          [TOUCH]: 1,
+        },
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
           default: null,
-          '@media (pointer: coarse)': pressedOverlayImage,
+          [TOUCH]: 0,
         },
       },
-      [stylex.when.ancestor('[data-astryx-press="fading"]', switchScope)]: {
+      animationName: {
         default: null,
-        '@media (forced-colors: none)': {
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
           default: null,
-          '@media (pointer: coarse)': pressedOverlayImage,
+          [TOUCH]: pressLayerRelease,
+        },
+      },
+      animationDuration: {
+        default: null,
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
+          default: null,
+          [TOUCH]: {
+            default: PRESS_RELEASE_DURATION,
+            '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+              PRESS_RELEASE_DURATION_REDUCED,
+          },
+        },
+      },
+      animationTimingFunction: {
+        default: null,
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
+          default: null,
+          [TOUCH]: PRESS_RELEASE_EASE,
+        },
+      },
+      animationFillMode: {
+        default: null,
+        [stylex.when.ancestor(PRESS_FADING, switchScope)]: {
+          default: null,
+          [TOUCH]: 'both',
+        },
+      },
+    },
+    '::after': {
+      content: '""',
+      display: {default: 'none', [TOUCH]: 'block'},
+      position: 'absolute',
+      inset: 0,
+      borderRadius: 'inherit',
+      pointerEvents: 'none',
+      opacity: 0,
+      boxShadow: shadowVars['--shadow-low'],
+      willChange: {default: null, [TOUCH]: 'opacity'},
+    },
+    // Pressed with a mouse: the same overlay as the track, so the whole
+    // control darkens rather than the thumb standing out against a darker
+    // track. Under a finger the track's press layer paints under the thumb,
+    // which lifts.
+    backgroundImage: {
+      default: null,
+      [stylex.when.ancestor(':active', switchScope)]: {
+        default: null,
+        '@media (forced-colors: none)': {
+          default: pressedImage,
+          '@media (pointer: coarse)': 'none',
         },
       },
     },
@@ -519,7 +800,7 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
   status?: InputStatus;
   /**
    * Size variant controlling track and thumb dimensions.
-   * - 'sm': 34x20px (matches sm checkbox/radio vertical rhythm)
+   * - 'sm': 32x20px (matches sm checkbox/radio vertical rhythm)
    * - 'md': 40x24px (default, matches md checkbox/radio vertical rhythm)
    * @default 'md'
    */
@@ -649,10 +930,68 @@ export function Switch({
   const ariaDescribedBy =
     describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
 
+  // The touch presentation (coarse pointer): its parts are always rendered;
+  // CSS shows them under a finger and the hook animates and listens there.
+  const surfaceRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const thumbRef = useRef<HTMLDivElement>(null);
+  const trackRef = useRef<HTMLDivElement>(null);
+  const touchParts = useMemo<SwitchTouchParts>(
+    () => ({
+      surface: surfaceRef,
+      input: inputRef,
+      thumb: thumbRef,
+      track: trackRef,
+    }),
+    [],
+  );
+  // The track in a state: its theme target and fill. The other state's, for
+  // the fade layer's colour (switchFill.ts).
+  const trackPropsFor = (on: boolean) =>
+    mergeProps(
+      themeProps('switch', {
+        checked: on ? 'checked' : null,
+        disabled: isDisabled ? 'disabled' : null,
+        size,
+      }),
+      stylex.props(
+        styles.track,
+        trackSizeStyles[size],
+        on ? styles.trackOn : styles.trackOff,
+        styles.trackFocus,
+        isDisabled && styles.trackDisabled,
+        isDisabled && !on && styles.trackDisabledOff,
+      ),
+    );
+  // Syncs the hit area's insets with the layout around the switch, through
+  // utils/hitArea's observers. Under a coarse pointer they grow toward 44 px,
+  // stopping at half the gap to each neighbouring target. A disabled switch
+  // watches nothing.
+  useIsomorphicLayoutEffect(() => {
+    const surface = surfaceRef.current;
+    if (surface == null || isDisabled) {
+      return;
+    }
+    return watchHitArea(surface, insets => writeHitInsets(surface, insets));
+  }, [isDisabled]);
+  useSwitchTouch(touchParts, {
+    isOn,
+    isInteractive: !isDisabled && !isBusy,
+    isDisabled,
+    trackSize: TRACK_SIZE[size],
+    otherTrackProps: trackPropsFor(!isOn),
+  });
+
   const switchElement = (
-    <div {...stylex.props(styles.switchWrapper, wrapperSizeStyles[size])}>
+    <div
+      ref={surfaceRef}
+      {...stylex.props(
+        styles.switchWrapper,
+        wrapperSizeStyles[size],
+        !isDisabled && !isBusy && styles.switchWrapperInteractive,
+      )}>
       <input
-        ref={useMergedRefs(ref, disabledMessageTooltip.positionRef)}
+        ref={useMergedRefs(ref, disabledMessageTooltip.positionRef, inputRef)}
         id={id}
         type="checkbox"
         role="switch"
@@ -695,30 +1034,14 @@ export function Switch({
           styles.input,
           rtlStyles.centerInline('-50%'),
           styles.inputCoarse,
-          inputSizeStyles[size],
           isDisabled && styles.inputDisabled,
           isBusy && styles.inputBusy,
           switchFocusInput,
         )}
       />
-      <div
-        aria-hidden="true"
-        {...mergeProps(
-          themeProps('switch', {
-            checked: isOn ? 'checked' : null,
-            disabled: isDisabled ? 'disabled' : null,
-            size,
-          }),
-          stylex.props(
-            styles.track,
-            trackSizeStyles[size],
-            isOn ? styles.trackOn : styles.trackOff,
-            styles.trackFocus,
-            isDisabled && styles.trackDisabled,
-            isDisabled && !isOn && styles.trackDisabledOff,
-          ),
-        )}>
+      <div ref={trackRef} aria-hidden="true" {...trackPropsFor(isOn)}>
         <div
+          ref={thumbRef}
           {...mergeProps(
             themeProps('switch-thumb', {
               checked: isOn ? 'checked' : null,
@@ -785,6 +1108,7 @@ export function Switch({
           disabledMessageTooltip.interactionRef(el);
         }}
         {...(isDisabled ? undefined : pressable)}
+        {...pressHoldsDragProps(!isDisabled)}
         {...stylex.props(
           styles.container,
           isLabelHidden && styles.containerLabelHidden,
@@ -793,19 +1117,21 @@ export function Switch({
           // The touch press's strength and release live on the row the
           // controller writes to; the track and thumb inherit and paint it.
           !isDisabled && interactionOverlayStyles.pressedAlpha,
+          !isDisabled && pressOwnerStyles.pressedAlphaLayered,
         )}>
         {' '}
-        {labelPosition === 'start' ? (
-          <>
-            {labelElement}
-            {switchElement}
-          </>
-        ) : (
-          <>
-            {switchElement}
-            {labelElement}
-          </>
-        )}
+        {/* Keyed, so a labelPosition change moves the nodes instead of
+            rebuilding them: the touch controller stays on the input, track
+            and thumb it attached to. */}
+        {labelPosition === 'start'
+          ? [
+              <Fragment key="label">{labelElement}</Fragment>,
+              <Fragment key="switch">{switchElement}</Fragment>,
+            ]
+          : [
+              <Fragment key="switch">{switchElement}</Fragment>,
+              <Fragment key="label">{labelElement}</Fragment>,
+            ]}
       </div>
       {status?.message && (
         <FieldStatus