@astryxdesign/core 0.7.7-canary.c0929c8 → 0.7.7-canary.c19ca12

package/src/Resizable/resizeGesture.ts

@@ -0,0 +1,368 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file resizeGesture.ts
+ * @input A handle element, a resize model (its state, and a gesture's start,
+ *   move, end and cancel), and the handle's axis, reversal and disabled state
+ * @output createResizeGesture: the window splitter's input in one place: a
+ *   pointer drag that holds its pointer, the arrow keys, Home, End and Enter,
+ *   and a double-click collapse; and the body's drag cursor
+ * @position Internal to the Resizable family. ResizeHandle forwards its React
+ *   events to it. No React, and no DOM work on import
+ */
+
+import type {ResizableDirection} from './resizableModel';
+
+/** Pixels an arrow key moves the separator; Shift moves it further. */
+export const KEYBOARD_STEP = 10;
+export const KEYBOARD_LARGE_STEP = 50;
+
+/** What a gesture reads from its region when an input arrives. */
+export interface ResizeGestureState {
+  /** The region's size in px, 0 while collapsed. */
+  readonly size: number;
+  readonly isCollapsed: boolean;
+  readonly minPx: number;
+  /** The configured maximum, Infinity when the region has none. */
+  readonly maxPx: number;
+  readonly snaps: ReadonlyArray<number>;
+  readonly collapsedSize: number;
+  readonly collapsible: boolean;
+}
+
+/** The region a gesture resizes. */
+export interface ResizeGestureModel {
+  state(): ResizeGestureState;
+  /** A gesture begins: the region holds its basis until it ends. */
+  start(): void;
+  /** The gesture has moved `delta` px from where it began. */
+  move(delta: number): void;
+  /** The gesture ends as completed. */
+  end(): void;
+  /** The gesture ends without completing. */
+  cancel(): void;
+  /**
+   * The region's own collapse and expand. They restore the size it had before
+   * it collapsed, as the APG window splitter's Enter does. Without them a
+   * toggle is a resize gesture to the minimum.
+   */
+  collapse?: () => void;
+  expand?: () => void;
+}
+
+/** The handle's configuration, read at each input. */
+export interface ResizeGestureConfig {
+  readonly direction: ResizableDirection;
+  readonly isReversed: boolean;
+  readonly isDisabled: boolean;
+}
+
+/** The fields of a pointer event the gesture reads (native or React). */
+export interface ResizeGesturePointerEvent {
+  readonly pointerId: number;
+  readonly clientX: number;
+  readonly clientY: number;
+  readonly currentTarget: EventTarget | null;
+  preventDefault(): void;
+  stopPropagation(): void;
+}
+
+/** The fields of a key event the gesture reads (native or React). */
+export interface ResizeGestureKeyEvent {
+  readonly key: string;
+  readonly shiftKey: boolean;
+  preventDefault(): void;
+}
+
+export interface ResizeGesture {
+  pointerDown(event: ResizeGesturePointerEvent): void;
+  pointerMove(event: ResizeGesturePointerEvent): void;
+  pointerUp(event: ResizeGesturePointerEvent): void;
+  /** A `pointercancel` or a `lostpointercapture`. */
+  pointerCancel(event: ResizeGesturePointerEvent): void;
+  keyDown(event: ResizeGestureKeyEvent): void;
+  doubleClick(): void;
+  /** Whether a pointer drag is in flight. */
+  readonly isDragging: boolean;
+  /**
+   * Ends a drag in flight as cancelled, for a handle that goes away mid-drag.
+   * It releases the pointer and the body's drag cursor, and tells the region
+   * that the gesture is over.
+   */
+  interrupt(): void;
+}
+
+/**
+ * Drag feedback lives on the page's `<body>`, not on the handle. During a
+ * drag the pointer moves over whatever the panels contain, and the resize
+ * cursor must hold there.
+ */
+function applyBodyDragStyles(isHorizontal: boolean): void {
+  document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+  document.body.style.userSelect = 'none';
+}
+
+function clearBodyDragStyles(): void {
+  document.body.style.cursor = '';
+  document.body.style.userSelect = '';
+}
+
+/**
+ * The snap point `count` points away from the region's current size in
+ * `direction` (+1 grows, -1 shrinks). A point beyond the minimum or the
+ * maximum counts as that bound. When fewer points remain, the nearest end
+ * point serves, or the current size when the region is already there.
+ */
+function adjacentSnapPoint(
+  state: ResizeGestureState,
+  direction: 1 | -1,
+  count: number,
+): number {
+  const points = [
+    ...new Set(
+      state.snaps.map(p => Math.min(state.maxPx, Math.max(state.minPx, p))),
+    ),
+  ].sort((a, b) => a - b);
+  const {size} = state;
+  const ahead =
+    direction > 0
+      ? points.filter(p => p > size)
+      : points.filter(p => p < size).reverse();
+  if (ahead.length === 0) {
+    return size;
+  }
+  return ahead[Math.min(count, ahead.length) - 1];
+}
+
+function step(model: ResizeGestureModel, delta: number): void {
+  model.start();
+  model.move(delta);
+  model.end();
+}
+
+/**
+ * Collapse an open pane, or restore a collapsed one to the size it had before
+ * it collapsed, with the region's own collapse and expand. A region without
+ * them falls back to a resize gesture to the minimum. That gesture cannot
+ * reopen a pane whose minimum sits below its collapse threshold.
+ */
+function toggleCollapse(model: ResizeGestureModel): void {
+  const state = model.state();
+  if (model.collapse != null && model.expand != null) {
+    if (state.isCollapsed) {
+      model.expand();
+    } else {
+      model.collapse();
+    }
+    return;
+  }
+  step(model, state.isCollapsed ? state.minPx : -state.size);
+}
+
+/**
+ * The window splitter's input for one handle. A drag takes pointer capture
+ * on the element the press landed on. The rest of the gesture then goes to
+ * that element. Without capture, the browser hit-tests each move, and an
+ * embedded frame under the pointer takes the drag.
+ */
+export function createResizeGesture(
+  getHandle: () => Element | null,
+  model: ResizeGestureModel,
+  getConfig: () => ResizeGestureConfig,
+  onDraggingChange?: (isDragging: boolean) => void,
+): ResizeGesture {
+  let drag: {
+    pointerId: number;
+    startPos: number;
+    rtl: number;
+    target: Element | null;
+  } | null = null;
+
+  const rtlMultiplier = (): number => {
+    const handle = getHandle();
+    if (handle == null) {
+      return 1;
+    }
+    const view = handle.ownerDocument.defaultView;
+    return view?.getComputedStyle(handle).direction === 'rtl' ? -1 : 1;
+  };
+
+  const clearDrag = () => {
+    const ending = drag;
+    drag = null;
+    const target = ending?.target;
+    if (
+      ending != null &&
+      target != null &&
+      target.hasPointerCapture?.(ending.pointerId) === true
+    ) {
+      target.releasePointerCapture(ending.pointerId);
+    }
+    if (ending != null) {
+      clearBodyDragStyles();
+    }
+    onDraggingChange?.(false);
+  };
+
+  return {
+    get isDragging() {
+      return drag != null;
+    },
+
+    pointerDown(event) {
+      const config = getConfig();
+      if (config.isDisabled || drag != null) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      // An element from another document (an iframe, a popup) is not an
+      // instance of this page's Element, so test for the capture API itself.
+      const current = event.currentTarget as Element | null;
+      const target =
+        typeof current?.setPointerCapture === 'function' ? current : null;
+      target?.setPointerCapture?.(event.pointerId);
+      const isHorizontal = config.direction === 'horizontal';
+      drag = {
+        pointerId: event.pointerId,
+        startPos: isHorizontal ? event.clientX : event.clientY,
+        rtl: isHorizontal ? rtlMultiplier() : 1,
+        target,
+      };
+      onDraggingChange?.(true);
+      model.start();
+      applyBodyDragStyles(isHorizontal);
+    },
+
+    pointerMove(event) {
+      if (drag == null || drag.pointerId !== event.pointerId) {
+        return;
+      }
+      const config = getConfig();
+      const position =
+        config.direction === 'horizontal' ? event.clientX : event.clientY;
+      const sign = config.isReversed ? -1 : 1;
+      model.move((position - drag.startPos) * drag.rtl * sign);
+    },
+
+    pointerUp(event) {
+      if (drag?.pointerId !== event.pointerId) {
+        return;
+      }
+      clearDrag();
+      model.end();
+    },
+
+    // Serves pointercancel and lostpointercapture alike: an interrupted drag
+    // ends without a resize end. The implicit release after every pointerup
+    // or pointercancel also fires lostpointercapture. By then the drag is
+    // already cleared, and this is a no-op.
+    pointerCancel(event) {
+      if (drag?.pointerId !== event.pointerId) {
+        return;
+      }
+      clearDrag();
+      model.cancel();
+    },
+
+    interrupt() {
+      if (drag == null) {
+        return;
+      }
+      clearDrag();
+      model.cancel();
+    },
+
+    keyDown(event) {
+      const config = getConfig();
+      if (config.isDisabled) {
+        return;
+      }
+      const state = model.state();
+      const isHorizontal = config.direction === 'horizontal';
+      const sign = config.isReversed ? -1 : 1;
+      const keyStep = event.shiftKey ? KEYBOARD_LARGE_STEP : KEYBOARD_STEP;
+      const rtl = isHorizontal ? rtlMultiplier() : 1;
+
+      // The pane's grow direction on this key: ArrowRight/Down grow unless the
+      // layout is reversed or, on the inline axis, right-to-left.
+      const grows = (key: string) =>
+        (key === 'ArrowRight' || key === 'ArrowDown'
+          ? 1
+          : key === 'ArrowLeft' || key === 'ArrowUp'
+            ? -1
+            : 0) *
+          (isHorizontal ? rtl : 1) *
+          sign >
+        0;
+
+      switch (event.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+        case 'ArrowLeft':
+        case 'ArrowUp': {
+          event.preventDefault();
+          if (state.isCollapsed) {
+            // A collapsed pane answers only the grow arrow. It opens one step
+            // above its minimum, the value the separator announces while
+            // collapsed. If the collapse threshold is larger, it opens there.
+            // A bare step would stay below the threshold and leave the pane
+            // closed. The shrink arrow is a no-op.
+            if (grows(event.key)) {
+              step(model, Math.max(state.minPx + keyStep, state.collapsedSize));
+            }
+            break;
+          }
+          if (state.snaps.length > 0) {
+            // With snap points the region rests only on a point, so a pixel
+            // step would snap straight back. The arrow moves to the adjacent
+            // point in its direction instead, two points with Shift, within
+            // the bounds.
+            step(
+              model,
+              adjacentSnapPoint(
+                state,
+                grows(event.key) ? 1 : -1,
+                event.shiftKey ? 2 : 1,
+              ) - state.size,
+            );
+            break;
+          }
+          const direction =
+            event.key === 'ArrowRight' || event.key === 'ArrowDown' ? 1 : -1;
+          step(model, direction * keyStep * (isHorizontal ? rtl : 1) * sign);
+          break;
+        }
+        case 'Home': {
+          event.preventDefault();
+          step(model, state.minPx - state.size);
+          break;
+        }
+        case 'End': {
+          event.preventDefault();
+          // Only a configured maximum is the region's own limit. The reported
+          // stand-in for an unbounded region is where the pane could reach,
+          // not where End may move it.
+          if (state.maxPx !== Infinity) {
+            step(model, state.maxPx - state.size);
+          }
+          break;
+        }
+        case 'Enter': {
+          event.preventDefault();
+          if (state.collapsible) {
+            toggleCollapse(model);
+          }
+          break;
+        }
+      }
+    },
+
+    doubleClick() {
+      if (getConfig().isDisabled || !model.state().collapsible) {
+        return;
+      }
+      toggleCollapse(model);
+    },
+  };
+}

package/src/SegmentedControl/SegmentedControl.doc.mjs

@@ -168,7 +168,7 @@ function WorkspaceCard() {
   usage: {
     anatomy,
     description:
-      'A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation.',
+      'A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation. Under a finger, on a touch device (a coarse primary pointer), the selection slides to the new segment, whether a tap, an arrow key or a new value moved it; with Reduce Motion nothing travels: the old selection fades out as the new one fades in. There, dragging the selected segment carries the selection along with the selected label’s colour following it, and the segment under the finger is chosen when it lets go (letting go outside the control selects nothing); a tap selects through the browser’s click; a pressed segment shows the shared pressed overlay, and nothing lifts or dims. With a mouse or a pen every change, a click included, slides on the theme’s duration and easing, and dragging the selected segment carries it as a finger does.',
     accessibility: [
       {
         name: 'Text label',
@@ -240,7 +240,7 @@ export const docsZh = {
   usage: {
     anatomy,
     description:
-      'A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation.',
+      'A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation. Under a finger, on a touch device (a coarse primary pointer), the selection slides to the new segment, whether a tap, an arrow key or a new value moved it; with Reduce Motion nothing travels: the old selection fades out as the new one fades in. There, dragging the selected segment carries the selection along with the selected label’s colour following it, and the segment under the finger is chosen when it lets go (letting go outside the control selects nothing); a tap selects through the browser’s click; a pressed segment shows the shared pressed overlay, and nothing lifts or dims. With a mouse or a pen every change, a click included, slides on the theme’s duration and easing, and dragging the selected segment carries it as a finger does.',
     bestPractices: [
       {guidance: true, description: 'Use for switching between 2–5 mutually exclusive views or modes where all options should be visible.'},
       {guidance: true, description: 'Provide a descriptive label for the control to ensure the group is accessible to screen readers.'},
@@ -256,7 +256,7 @@ export const docsDense = {
   usage: {
     anatomy,
     description:
-      'A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation.',
+      'A segmented button group that allows users to make a single selection from a small set of mutually exclusive options. Use SegmentedControl when all options should be visible at once and the selection controls a value or mode, not page navigation. Under a finger, on a touch device (a coarse primary pointer), the selection slides to the new segment, whether a tap, an arrow key or a new value moved it; with Reduce Motion nothing travels: the old selection fades out as the new one fades in. There, dragging the selected segment carries the selection along with the selected label’s colour following it, and the segment under the finger is chosen when it lets go (letting go outside the control selects nothing); a tap selects through the browser’s click; a pressed segment shows the shared pressed overlay, and nothing lifts or dims. With a mouse or a pen every change, a click included, slides on the theme’s duration and easing, and dragging the selected segment carries it as a finger does.',
     bestPractices: [
       {guidance: true, description: 'Use for switching between 2–5 mutually exclusive views or modes where all options should be visible.'},
       {guidance: true, description: 'Provide a descriptive label for the control to ensure the group is accessible to screen readers.'},

package/src/SegmentedControl/SegmentedControl.tsx

@@ -4,7 +4,8 @@
 
 /**
  * @file SegmentedControl.tsx
- * @input Uses React, StyleX, SegmentedControlContext, useListFocus, useKeyboardHint
+ * @input Uses React, StyleX, SegmentedControlContext, useListFocus,
+ *   useKeyboardHint, useTouchPresentation, useSegmentedSelectionMotion
  * @output Exports SegmentedControl component and SegmentedControlProps type
  * @position Container wrapper; provides context to SegmentedControlItem children
  *
@@ -12,10 +13,11 @@
  * - /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
  * - /packages/core/src/SegmentedControl/index.ts
  * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
+ * - /packages/core/src/SegmentedControl/useSegmentedSelectionMotion.ts
  * - /packages/cli/assets/templates/blocks/components/SegmentedControl/ (showcase blocks)
  */
 
-import React, {useMemo, useCallback, type ReactNode} from 'react';
+import React, {useMemo, useCallback, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {colorVars, spacingVars, radiusVars} from '../theme/tokens.stylex';
 import {SegmentedControlContext} from './SegmentedControlContext';
@@ -34,6 +36,9 @@ import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
+import {useTouchPresentation} from '../utils/touchPresentation';
+import {useSegmentedSelectionMotion} from './useSegmentedSelectionMotion';
+
 export interface SegmentedControlProps extends Omit<
   BaseProps<HTMLDivElement>,
   'onChange'
@@ -94,6 +99,11 @@ export interface SegmentedControlProps extends Omit<
 
 const styles = stylex.create({
   container: {
+    // The lens's containing block and stacking context. The lens sits at
+    // z-index -1 inside it: above the track's own background, below every
+    // segment.
+    position: 'relative',
+    isolation: 'isolate',
     display: 'inline-flex',
     alignItems: 'center',
     width: 'fit-content',
@@ -127,6 +137,140 @@ const styles = stylex.create({
   disabled: {
     opacity: 0.5,
   },
+  // The lens uses the radiogroup's own pseudo-elements, so it adds no
+  // element. ::before carries the selected surface. Under Reduced Motion,
+  // ::after is the old surface that fades out in place. Both are hidden at
+  // rest. A negative z-index keeps them under every segment's content, inside
+  // the stacking context the container's isolation makes. Above the segments,
+  // a moving lens could paint over their titles. WebKit's overlap test can
+  // miss what a moving layer covers.
+  lens: {
+    '::before': {
+      content: '""',
+      position: 'absolute',
+      zIndex: -1,
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: laid out on a segment's box measured from client rects (useSegmentedSelectionMotion), in both directions.
+      left: 'var(--_segmented-lens-left, 0px)',
+      top: 'var(--_segmented-lens-top, 0px)',
+      width: 'var(--_segmented-lens-width, 0px)',
+      height: 'var(--_segmented-lens-height, 0px)',
+      boxSizing: 'border-box',
+      // Scales around its center: the lens's position and size are separate.
+      transformOrigin: '50% 50%',
+      pointerEvents: 'none',
+      visibility: 'var(--_segmented-lens-visibility, hidden)',
+      willChange: 'var(--astryx-motion-will-change-before, auto)',
+      // It carries a copy of an already resolved surface, forced colors
+      // included (Highlight), so the UA must not remap it again.
+      forcedColorAdjust: 'none',
+      backgroundColor: 'var(--_segmented-lens-background-color, transparent)',
+      backgroundImage: 'var(--_segmented-lens-background-image, none)',
+      backgroundPosition: 'var(--_segmented-lens-background-position, 0% 0%)',
+      backgroundSize: 'var(--_segmented-lens-background-size, auto)',
+      backgroundRepeat: 'var(--_segmented-lens-background-repeat, repeat)',
+      backgroundOrigin: 'var(--_segmented-lens-background-origin, padding-box)',
+      backgroundClip: 'var(--_segmented-lens-background-clip, border-box)',
+      boxShadow: 'var(--_segmented-lens-box-shadow, none)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderTopLeftRadius: 'var(--_segmented-lens-border-top-left-radius, 0px)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderTopRightRadius:
+        'var(--_segmented-lens-border-top-right-radius, 0px)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderBottomRightRadius:
+        'var(--_segmented-lens-border-bottom-right-radius, 0px)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderBottomLeftRadius:
+        'var(--_segmented-lens-border-bottom-left-radius, 0px)',
+      borderTopWidth: 'var(--_segmented-lens-border-top-width, 0px)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderRightWidth: 'var(--_segmented-lens-border-right-width, 0px)',
+      borderBottomWidth: 'var(--_segmented-lens-border-bottom-width, 0px)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderLeftWidth: 'var(--_segmented-lens-border-left-width, 0px)',
+      borderTopStyle: 'var(--_segmented-lens-border-top-style, none)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderRightStyle: 'var(--_segmented-lens-border-right-style, none)',
+      borderBottomStyle: 'var(--_segmented-lens-border-bottom-style, none)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderLeftStyle: 'var(--_segmented-lens-border-left-style, none)',
+      borderTopColor: 'var(--_segmented-lens-border-top-color, currentcolor)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderRightColor:
+        'var(--_segmented-lens-border-right-color, currentcolor)',
+      borderBottomColor:
+        'var(--_segmented-lens-border-bottom-color, currentcolor)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderLeftColor: 'var(--_segmented-lens-border-left-color, currentcolor)',
+      backdropFilter: 'var(--_segmented-lens-backdrop-filter, none)',
+      WebkitBackdropFilter:
+        'var(--_segmented-lens-webkit-backdrop-filter, none)',
+    },
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      zIndex: -1,
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: laid out on a segment's box measured from client rects (useSegmentedSelectionMotion), in both directions.
+      left: 'var(--_segmented-after-left, 0px)',
+      top: 'var(--_segmented-after-top, 0px)',
+      width: 'var(--_segmented-after-width, 0px)',
+      height: 'var(--_segmented-after-height, 0px)',
+      boxSizing: 'border-box',
+      // Scales around its center: the lens's position and size are separate.
+      transformOrigin: '50% 50%',
+      pointerEvents: 'none',
+      visibility: 'var(--_segmented-after-visibility, hidden)',
+      willChange: 'var(--astryx-motion-will-change-after, auto)',
+      // It carries a copy of an already resolved surface, forced colors
+      // included (Highlight), so the UA must not remap it again.
+      forcedColorAdjust: 'none',
+      backgroundColor: 'var(--_segmented-after-background-color, transparent)',
+      backgroundImage: 'var(--_segmented-after-background-image, none)',
+      backgroundPosition: 'var(--_segmented-after-background-position, 0% 0%)',
+      backgroundSize: 'var(--_segmented-after-background-size, auto)',
+      backgroundRepeat: 'var(--_segmented-after-background-repeat, repeat)',
+      backgroundOrigin:
+        'var(--_segmented-after-background-origin, padding-box)',
+      backgroundClip: 'var(--_segmented-after-background-clip, border-box)',
+      boxShadow: 'var(--_segmented-after-box-shadow, none)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderTopLeftRadius:
+        'var(--_segmented-after-border-top-left-radius, 0px)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderTopRightRadius:
+        'var(--_segmented-after-border-top-right-radius, 0px)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderBottomRightRadius:
+        'var(--_segmented-after-border-bottom-right-radius, 0px)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderBottomLeftRadius:
+        'var(--_segmented-after-border-bottom-left-radius, 0px)',
+      borderTopWidth: 'var(--_segmented-after-border-top-width, 0px)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderRightWidth: 'var(--_segmented-after-border-right-width, 0px)',
+      borderBottomWidth: 'var(--_segmented-after-border-bottom-width, 0px)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderLeftWidth: 'var(--_segmented-after-border-left-width, 0px)',
+      borderTopStyle: 'var(--_segmented-after-border-top-style, none)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderRightStyle: 'var(--_segmented-after-border-right-style, none)',
+      borderBottomStyle: 'var(--_segmented-after-border-bottom-style, none)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderLeftStyle: 'var(--_segmented-after-border-left-style, none)',
+      borderTopColor: 'var(--_segmented-after-border-top-color, currentcolor)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderRightColor:
+        'var(--_segmented-after-border-right-color, currentcolor)',
+      borderBottomColor:
+        'var(--_segmented-after-border-bottom-color, currentcolor)',
+      // eslint-disable-next-line @astryx/no-physical-properties -- intentional: a copy of the segment's computed (physical) surface.
+      borderLeftColor:
+        'var(--_segmented-after-border-left-color, currentcolor)',
+      backdropFilter: 'var(--_segmented-after-backdrop-filter, none)',
+      WebkitBackdropFilter:
+        'var(--_segmented-after-webkit-backdrop-filter, none)',
+    },
+  },
 });
 
 const sizeStyles = stylex.create({
@@ -177,6 +321,20 @@ export function SegmentedControl({
   ...rest
 }: SegmentedControlProps) {
   const size = useSize(sizeProp, 'md');
+  // A touch device (a coarse primary pointer) gets UIKit's motion: the
+  // selection slides on a spring. Under a mouse it slides on the theme's
+  // duration and easing.
+  const isTouchPresentation = useTouchPresentation().isTouch;
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  // Every pointer's press is tracked. A drag from the selected segment
+  // carries the lens, and the lift commits the segment nearest the pointer.
+  // A lift outside the control commits nothing.
+  const {selection, attachTrack} = useSegmentedSelectionMotion(
+    trackRef,
+    value,
+    isTouchPresentation,
+    !isDisabled,
+  );
 
   // Disabled-reason tooltip. Applies to the whole-group disabled state. The
   // tooltip listeners attach to the radiogroup container, which keeps pointer
@@ -215,6 +373,7 @@ export function SegmentedControl({
 
   const handleContainerKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
+      selection.keyPressed();
       onKeyDownProp?.(e);
       if (e.defaultPrevented) {
         return;
@@ -222,7 +381,7 @@ export function SegmentedControl({
       hint.onKeyDown(e);
       handleKeyDown(e);
     },
-    [onKeyDownProp, hint, handleKeyDown],
+    [selection, onKeyDownProp, hint, handleKeyDown],
   );
 
   // Selection-follows-focus (APG radiogroup): useListFocus only *moves* focus,
@@ -252,6 +411,12 @@ export function SegmentedControl({
       if (!e.currentTarget.contains(e.relatedTarget)) {
         return;
       }
+      // A mouse or pen press moves focus at pointerdown. A finger moves it
+      // after the lift, before the tap's click. The press commits through
+      // that click, so this focus move selects nothing.
+      if (selection.isPressing()) {
+        return;
+      }
       const focused = (e.target as HTMLElement | null)?.closest<HTMLElement>(
         '[role="radio"][data-value]',
       );
@@ -263,7 +428,7 @@ export function SegmentedControl({
         onChange(nextValue);
       }
     },
-    [onFocusProp, hint, handleFocus, isDisabled, onChange, value],
+    [onFocusProp, hint, handleFocus, isDisabled, onChange, selection, value],
   );
 
   const contextValue = useMemo(
@@ -276,6 +441,7 @@ export function SegmentedControl({
       disabledReasonID: showsDisabledMessage
         ? disabledMessageTooltip.describedBy
         : undefined,
+      isTouchPresentation,
     }),
     [
       value,
@@ -285,13 +451,20 @@ export function SegmentedControl({
       isDisabled,
       showsDisabledMessage,
       disabledMessageTooltip.describedBy,
+      isTouchPresentation,
     ],
   );
 
   return (
     <SegmentedControlContext value={contextValue}>
       <div
-        ref={useMergedRefs(ref, listRef, disabledMessageTooltip.ref)}
+        ref={useMergedRefs(
+          ref,
+          listRef,
+          trackRef,
+          attachTrack,
+          disabledMessageTooltip.ref,
+        )}
         {...rest}
         role="radiogroup"
         aria-label={label}
@@ -310,6 +483,7 @@ export function SegmentedControl({
             styles.container,
             sizeStyles[size],
             layout === 'fill' && styles.fill,
+            (isTouchPresentation || !isDisabled) && styles.lens,
             isDisabled && styles.disabled,
             xstyle,
           ),