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

package/dist/Resizable/resizeGesture.js

@@ -0,0 +1,251 @@
+// 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
+ */
+
+/** 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. */
+
+/** The region a gesture resizes. */
+
+/** The handle's configuration, read at each input. */
+
+/** The fields of a pointer event the gesture reads (native or React). */
+
+/** The fields of a key event the gesture reads (native or React). */
+
+/**
+ * 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) {
+  document.body.style.cursor = isHorizontal ? 'col-resize' : 'row-resize';
+  document.body.style.userSelect = 'none';
+}
+function clearBodyDragStyles() {
+  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, direction, count) {
+  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, delta) {
+  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) {
+  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, model, getConfig, onDraggingChange) {
+  let drag = null;
+  const rtlMultiplier = () => {
+    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;
+      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 => (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/dist/SegmentedControl/SegmentedControl.d.ts

@@ -1,6 +1,7 @@
 /**
  * @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
  *
@@ -8,6 +9,7 @@
  * - /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, { type ReactNode } from 'react';

package/dist/SegmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAuB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQlE,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AAInC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AA0DD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,eAAe,EACf,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,IAAI,EACR,EAAE,qBAAqB,qBAoJvB;yBAtKe,gBAAgB"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAA+B,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1E,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,2BAA2B,CAAC;AAInC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,cAAc,CAAC,EACzB,UAAU,CACX;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAqMD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,QAAQ,EACd,MAAc,EACd,UAAkB,EAClB,eAAe,EACf,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,SAAS,EAAE,aAAa,EACxB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,IAAI,EACR,EAAE,qBAAqB,qBAkLvB;yBApMe,gBAAgB"}

package/dist/SegmentedControl/SegmentedControl.js

@@ -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,9 +13,10 @@
  * - /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 } from 'react';
+import React, { useMemo, useCallback, useRef } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars } from "../theme/tokens.stylex.js";
@@ -28,6 +30,8 @@ import { joinAriaIDs } from "../utils/inputAria.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { useTouchPresentation } from "../utils/touchPresentation.js";
+import { useSegmentedSelectionMotion } from "./useSegmentedSelectionMotion.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 // =============================================================================
 // Styles
@@ -35,6 +39,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const styles = {
   container: {
+    kVAEAm: "x1n2onr6",
+    kHBbk8: "xc8icb0",
     k1xSpc: "x3nfvp2",
     kGNEyG: "x6s0dn4",
     kzqmXN: "xeq5yr9",
@@ -54,6 +60,87 @@ const styles = {
   disabled: {
     kSiTet: "xbyyjgo",
     $$css: true
+  },
+  lens: {
+    kgeoSG: "x1cpjm7i",
+    kEoFBp: "x1hmns74",
+    kxmVGU: "xy5mcqj",
+    k75S9Q: "x1h6x5ug",
+    k96MEf: "x319kzk",
+    kOlAkY: "xj84cd",
+    kgzTxl: "xlxjeq7",
+    kQmYQc: "xtql2tq",
+    kEdqc7: "x1xm9zrc",
+    km8f2m: "xkk1bqk",
+    ktHQil: "x1e91tbo",
+    kSdLuy: "xwrs98t",
+    ku0W4C: "x13rwrtk",
+    kLkRvE: "x1nk0e2p",
+    k3DiCg: "x19ph129",
+    kuPSpR: "xkyjh71",
+    k836YN: "xai7mxl",
+    kTP8oX: "xzr6j9d",
+    khXQ3S: "x1mz0nwo",
+    k2irxo: "xtojb3y",
+    ktNmms: "x19rx9s5",
+    kGBI9E: "x1gz1ewn",
+    ks091d: "xirquxt",
+    k9BEaU: "x1rj83xg",
+    kLSKZI: "x1gp8cmm",
+    kg8CZY: "x267z7u",
+    kgb78d: "xu7nluz",
+    kTJRYx: "xaki043",
+    kUmSqE: "x131tjkd",
+    k2L7bE: "x10hoewy",
+    krR4Wo: "x1rimih4",
+    kjBTDo: "xjmzqq9",
+    ktumvE: "xymdich",
+    kwknyK: "x1l1ofoh",
+    kSMQRv: "x1whvb6r",
+    k1cwP5: "xg5vybf",
+    k6d8aP: "x1j47n5p",
+    klC6Y0: "x11t1reg",
+    kFbLEI: "x1icymkt",
+    k5JduY: "x1s928wv",
+    kwXMNM: "x1j6awrg",
+    kDVEDD: "xi4xitw",
+    kH8cDV: "x1ggeerv",
+    k3foIR: "x3g43gi",
+    kkgrvl: "x1l8h5kv",
+    k4zj60: "x1fv2pxm",
+    kWgvks: "xx38sju",
+    k51VwD: "x8ihlwz",
+    kloYau: "x2q1x1w",
+    kMEsQN: "x1631zco",
+    kWkaDd: "x1y8idqa",
+    kU8QeM: "xwnwc82",
+    ks3ayO: "x1wb6yj0",
+    kNctxI: "x10e6nnj",
+    kgUb28: "x1d269y",
+    kakxe6: "x1pxrrzi",
+    kIWj2l: "x19crzk3",
+    kJM1pu: "x17as9s2",
+    kM2ZXO: "x54l34w",
+    kbMawA: "x1tmynux",
+    kgFEc0: "x13ob3d2",
+    kDH5la: "xbn9yse",
+    kBNLoZ: "x1icybqf",
+    kskBYc: "xk12vn8",
+    k9Mpue: "xsbnptc",
+    k6OB6z: "x1n4cxts",
+    kHSQhd: "x11at6vl",
+    kFO5lE: "x1t5rpqk",
+    kRcv9L: "x1ff385h",
+    kHi7i2: "x1tili5q",
+    kh0EW9: "xe87dmk",
+    kjCSS1: "x3sz45y",
+    kfzc6R: "x18pjm2d",
+    kc1AQg: "xa4st9h",
+    kvRJ0G: "x1tqw9ds",
+    kcGwG1: "x1pgdhoo",
+    kR8tOf: "xc4c6yy",
+    kxzRJW: "xt64kwx",
+    $$css: true
   }
 };
 const sizeStyles = {
@@ -107,6 +194,18 @@ export function SegmentedControl({
   ...rest
 }) {
   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(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
@@ -145,13 +244,14 @@ export function SegmentedControl({
     isEnabled: !isDisabled
   });
   const handleContainerKeyDown = useCallback(e => {
+    selection.keyPressed();
     onKeyDownProp?.(e);
     if (e.defaultPrevented) {
       return;
     }
     hint.onKeyDown(e);
     handleKeyDown(e);
-  }, [onKeyDownProp, hint, handleKeyDown]);
+  }, [selection, onKeyDownProp, hint, handleKeyDown]);
 
   // Selection-follows-focus (APG radiogroup): useListFocus only *moves* focus,
   // so whenever it lands focus on a new radio (arrow/Home/End, or a click) we
@@ -179,6 +279,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?.closest('[role="radio"][data-value]');
     if (!focused || focused.getAttribute('aria-disabled') === 'true') {
       return;
@@ -187,19 +293,20 @@ export function SegmentedControl({
     if (nextValue != null && nextValue !== value) {
       onChange(nextValue);
     }
-  }, [onFocusProp, hint, handleFocus, isDisabled, onChange, value]);
+  }, [onFocusProp, hint, handleFocus, isDisabled, onChange, selection, value]);
   const contextValue = useMemo(() => ({
     value,
     onChange,
     size,
     layout,
     isDisabled,
-    disabledReasonID: showsDisabledMessage ? disabledMessageTooltip.describedBy : undefined
-  }), [value, onChange, size, layout, isDisabled, showsDisabledMessage, disabledMessageTooltip.describedBy]);
+    disabledReasonID: showsDisabledMessage ? disabledMessageTooltip.describedBy : undefined,
+    isTouchPresentation
+  }), [value, onChange, size, layout, isDisabled, showsDisabledMessage, disabledMessageTooltip.describedBy, isTouchPresentation]);
   return /*#__PURE__*/_jsxs(SegmentedControlContext, {
     value: contextValue,
     children: [/*#__PURE__*/_jsxs("div", {
-      ref: useMergedRefs(ref, listRef, disabledMessageTooltip.ref),
+      ref: useMergedRefs(ref, listRef, trackRef, attachTrack, disabledMessageTooltip.ref),
       ...rest,
       role: "radiogroup",
       "aria-label": label,
@@ -212,7 +319,7 @@ export function SegmentedControl({
       onBlur: composeEventHandlers(onBlurProp, hint.onBlur),
       ...mergeProps(themeProps('segmented-control', {
         size
-      }), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, isDisabled && styles.disabled, xstyle), className, style),
+      }), stylex.props(styles.container, sizeStyles[size], layout === 'fill' && styles.fill, (isTouchPresentation || !isDisabled) && styles.lens, isDisabled && styles.disabled, xstyle), className, style),
       children: [children, hint.hintElement]
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });

package/dist/SegmentedControl/SegmentedControlContext.d.ts

@@ -12,6 +12,12 @@ export interface SegmentedControlContextValue {
      * described by the reason (spec:AST-085 FR5).
      */
     disabledReasonID?: string;
+    /**
+     * True in the touch presentation (under a finger, `useTouchPresentation`):
+     * the control animates selection changes itself (the surface slides), so
+     * segments drop their CSS transitions.
+     */
+    isTouchPresentation?: boolean;
 }
 export declare const SegmentedControlContext: import("react").Context<SegmentedControlContextValue | null>;
 export declare function useSegmentedControlContext(): SegmentedControlContextValue;

package/dist/SegmentedControl/SegmentedControlContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlContext.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,uBAAuB,8DACsB,CAAC;AAG3D,wBAAgB,0BAA0B,IAAI,4BAA4B,CASzE"}
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlContext.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,MAAM,MAAM,sBAAsB,GAAG,KAAK,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,4BAA4B;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,MAAM,EAAE,sBAAsB,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,uBAAuB,8DACsB,CAAC;AAG3D,wBAAgB,0BAA0B,IAAI,4BAA4B,CASzE"}

package/dist/SegmentedControl/SegmentedControlItem.d.ts

@@ -5,6 +5,7 @@
  * @position Child item; renders as a radio button within the segmented control
  *
  * SYNC: When modified, update:
+ * - /packages/core/src/SegmentedControl/useSegmentedSelectionMotion.ts (the title marker)
  * - /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
  * - /packages/core/src/SegmentedControl/index.ts
  * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx

package/dist/SegmentedControl/SegmentedControlItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAiB5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAgHD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,IAAI,EACR,EAAE,yBAAyB,qBA2E3B;yBAtFe,oBAAoB"}
+{"version":3,"file":"SegmentedControlItem.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControlItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAkB5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,yBAA0B,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC7E,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAsHD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,UAAkB,EAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,IAAI,EACR,EAAE,yBAAyB,qBA8E3B;yBAzFe,oBAAoB"}

package/dist/SegmentedControl/SegmentedControlItem.js

@@ -9,6 +9,7 @@
  * @position Child item; renders as a radio button within the segmented control
  *
  * SYNC: When modified, update:
+ * - /packages/core/src/SegmentedControl/useSegmentedSelectionMotion.ts (the title marker)
  * - /packages/core/src/SegmentedControl/SegmentedControl.doc.mjs
  * - /packages/core/src/SegmentedControl/index.ts
  * - /packages/core/src/SegmentedControl/SegmentedControl.test.tsx
@@ -17,6 +18,7 @@
 import React from 'react';
 import { joinAriaIDs } from "../utils/inputAria.js";
 import { segmentDisabledProps } from "../privateAttributes/segmentDisabled.stylex.js";
+import { segmentTitleProps } from "../privateAttributes/segmentTitle.stylex.js";
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, sizeVars, durationVars, easeVars, fontWeightVars, shadowVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -85,6 +87,10 @@ const styles = {
     kjj79g: "xl56j7k",
     kmuXW: "x2lah0s",
     $$css: true
+  },
+  touchPresentation: {
+    k1ekBW: "x13b0p5u",
+    $$css: true
   }
 };
 const CONCENTRIC_RADIUS = 'max(0px, calc(var(--_segmented-control-radius) - var(--_segmented-control-padding)))';
@@ -198,8 +204,9 @@ export function SegmentedControlItem({
     }), focusOutlineProps.focusVisible(styles.base, sizeStyles[size], isFill && styles.fill, isLabelHidden && styles.iconOnly, isSelected && styles.selected,
     // The shared hover and pressed overlay, on the segments a press can
     // change: the selected segment keeps its raised surface as it is.
-    !isSelected && !isItemDisabled && interactionOverlayStyles.backgroundColor, isItemDisabled && styles.disabled, xstyle)),
+    !isSelected && !isItemDisabled && interactionOverlayStyles.backgroundColor, isItemDisabled && styles.disabled, ctx.isTouchPresentation === true && styles.touchPresentation, xstyle)),
     children: [iconElement, !isLabelHidden && /*#__PURE__*/_jsx("span", {
+      ...segmentTitleProps,
       ...{
         className: "xb3r6kr xlyipyv xeuugli"
       },