@astryxdesign/core 0.7.7-canary.4a8a76e → 0.7.7-canary.4e495ec

package/src/SegmentedControl/SegmentedControlContext.ts

@@ -29,6 +29,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 const SegmentedControlContext =

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -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
@@ -18,6 +19,7 @@
 import React, {type ReactNode} from 'react';
 import {joinAriaIDs} from '../utils/inputAria';
 import {segmentDisabledProps} from '../privateAttributes/segmentDisabled.stylex';
+import {segmentTitleProps} from '../privateAttributes/segmentTitle.stylex';
 import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
@@ -147,6 +149,12 @@ const styles = stylex.create({
     textOverflow: 'ellipsis',
     minWidth: 0,
   },
+  // Under a finger, script animates the selection change, because the surface
+  // slides. A CSS transition would run a second, main-thread version of the
+  // same change.
+  touchPresentation: {
+    transitionProperty: 'none',
+  },
 });
 
 const CONCENTRIC_RADIUS =
@@ -263,12 +271,15 @@ export function SegmentedControlItem({
             !isItemDisabled &&
             interactionOverlayStyles.backgroundColor,
           isItemDisabled && styles.disabled,
+          ctx.isTouchPresentation === true && styles.touchPresentation,
           xstyle,
         ),
       )}>
       {iconElement}
       {!isLabelHidden && (
-        <span {...stylex.props(styles.labelText)}>{label}</span>
+        <span {...segmentTitleProps} {...stylex.props(styles.labelText)}>
+          {label}
+        </span>
       )}
     </button>
   );