@astryxdesign/core 0.7.7-canary.449486f → 0.7.7-canary.45cc3fe

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AA6B9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAyKX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAoab;yBApbe,MAAM"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAMhD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,SAAS,CAAC;AA+B9C;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,gBAAgB,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzD,4EAA4E;AAC5E,UAAU,mBAAmB;IAC3B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,mBAAmB;IACzD,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yEAAyE;IACzE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAuBD,2FAA2F;AAC3F,eAAO,MAAM,uCAAuC;;;;;;;;;;;CAW1C,CAAC;AAyKX;;;;;;;;;GASG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc;;;;;EAUpE;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE3C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEpC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,QAAgB,EAChB,YAAY,EACZ,KAAW,EACX,SAAmB,EACnB,QAAQ,EACR,OAAoB,EACpB,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,sCAgbb;yBAhce,MAAM"}

package/dist/Dialog/Dialog.js

@@ -42,6 +42,7 @@ import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
 import { layerClickBoundary } from "../Layer/layerClickBoundary.js";
 import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
 import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
+import { useBackdropPress } from "../Layer/useBackdropPress.js";
 import { useModalOutlet } from "../Layer/modalOutlet.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, durationVars, easeVars, shadowVars, spacingVars } from "../theme/tokens.stylex.js";
@@ -57,12 +58,12 @@ import { useInteractionModalityTracking } from "../utils/interactionModality.js"
 import { focusForLastInput, isFocusLost } from "../utils/focusReturn.js";
 import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Calculate a directional translate offset for dialog entry animation.
  * Returns a normalized vector from the trigger element toward the viewport
  * center, scaled to the given distance.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 function getDialogDirection(triggerEl, distance = 16) {
   const rect = triggerEl.getBoundingClientRect();
   // The trigger's own window: its rect is measured in that window's viewport,
@@ -538,16 +539,13 @@ export function Dialog({
     }
   }, [isOpen, isInline, hasConsumerName, titleId]);
 
-  // Handle backdrop click — when the user clicks the ::backdrop pseudo-element,
-  // the event target is the <dialog> element itself; clicks on child content
-  // always target the child. This avoids false positives from native browser
+  // A press on the ::backdrop targets the <dialog> itself, so native browser
   // popups (date pickers, selects, color pickers) that render outside the
-  // dialog's bounding rect.
-  const handleClick = event => {
-    if (event.target === event.currentTarget && allowBackdropClick) {
-      onOpenChange(false);
-    }
-  };
+  // dialog's rect never count. The press must start and end there.
+  const handleBackdropPress = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const backdropPress = useBackdropPress(handleBackdropPress, allowBackdropClick);
 
   // The native `cancel` event is the browser's own close-watcher firing: an
   // Android back gesture, or a close request the stack never saw a press for.
@@ -638,8 +636,11 @@ export function Dialog({
     })(), isFullscreen && styles.fullscreen, isFullscreen && isOpen && styles.fullscreenOpen, opensSettled && styles.openSettled, xstyle), className, style),
     ...layerClickBoundary({
       ...safeProps,
-      onClick: chainEventHandlers(handleClick, onClickProp)
+      onClick: chainEventHandlers(backdropPress.onClick, onClickProp)
     }),
+    onPointerDownCapture: chainEventHandlers(backdropPress.onPointerDownCapture, safeProps.onPointerDownCapture),
+    onPointerUpCapture: chainEventHandlers(backdropPress.onPointerUpCapture, safeProps.onPointerUpCapture),
+    onPointerCancelCapture: chainEventHandlers(backdropPress.onPointerCancelCapture, safeProps.onPointerCancelCapture),
     onCancel: handleCancel,
     "aria-modal": isHydrating ? undefined : 'true'
     // The default aria-labelledby (from a DialogHeader title) is set

package/dist/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAkB7C,OAAO,KAAK,EAAC,WAAW,EAAe,MAAM,WAAW,CAAC;AA6MzD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE;QACb;;;;;;WAMG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IAEF;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,YAAY,EACZ,KAAK,EACL,QAAe,EACf,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAyMb;yBA3Ne,MAAM"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,WAAW,CAAC;AAoB7C,OAAO,KAAK,EAAC,WAAW,EAAe,MAAM,WAAW,CAAC;AA+MzD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC/D,iDAAiD;IACjD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAEvB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE;QACb;;;;;;WAMG;QACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B,CAAC;IAEF;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EAAE,UAAU,EAClB,YAAY,EACZ,IAAY,EACZ,KAAW,EACX,YAAY,EACZ,KAAK,EACL,QAAe,EACf,OAAgB,EAChB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAsNb;yBAxOe,MAAM"}

package/dist/Drawer/Drawer.js

@@ -70,13 +70,15 @@ import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
 import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
 import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
 import { useModalOutlet } from "../Layer/modalOutlet.js";
+import { useBackdropPress } from "../Layer/useBackdropPress.js";
 import { layerClickBoundary } from "../Layer/layerClickBoundary.js";
 import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
 import { composeEventHandlers, mergeProps, themeProps } from "../utils/index.js";
+import { chainEventHandlers } from "../utils/chainEventHandlers.js";
 import { container, overlayPaddingReset } from "../Layout/index.js";
 import { containerPaddingBlockEndVarStyles, containerPaddingBlockStartVarStyles, containerPaddingInlineVarStyles, paddingStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
 import { useDrawerDialogPresence } from "./useDrawerDialogPresence.js";
-
+import { jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -84,7 +86,6 @@ import { useDrawerDialogPresence } from "./useDrawerDialogPresence.js";
 // Below this viewport width the drawer preserves a fixed reveal of the page
 // behind instead of growing proportionally with the viewport. 640px is the
 // repo's mobile breakpoint.
-import { jsx as _jsx } from "react/jsx-runtime";
 const MOBILE_BREAKPOINT = 640;
 
 // Material's established mobile drawer pattern leaves a 56dp reveal. Using
@@ -347,13 +348,12 @@ export function Drawer({
     }
   }, [allowEscape, handleDismiss, shouldDismissOnCloseRequest]);
 
-  // Clicks on the ::backdrop target the <dialog> element itself; clicks on
-  // drawer content always target a child (the content area fills the panel).
-  const handleClick = useCallback(event => {
-    if (event.target === event.currentTarget && hasScrim && allowScrimClick) {
-      onOpenChange(false);
-    }
-  }, [allowScrimClick, hasScrim, onOpenChange]);
+  // A press on the ::backdrop targets the <dialog> itself (the content area
+  // fills the panel). The press must start and end there.
+  const handleScrimPress = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const scrimPress = useBackdropPress(handleScrimPress, hasScrim && allowScrimClick);
   const widthValue = typeof width === 'number' ? `${width}px` : width;
   const isFullWidthOnMobile = experimental?.isFullWidthOnMobile ?? false;
   const mobileWidth = isFullWidthOnMobile ? MOBILE_WIDTH_FULL : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;
@@ -391,8 +391,13 @@ export function Drawer({
     } : undefined),
     ...layerClickBoundary({
       ...safeProps,
-      onClick: composeEventHandlers(onClickProp, handleClick)
+      onClick: composeEventHandlers(onClickProp, scrimPress.onClick)
     }),
+    // The hook records where the press started first. The caller's capture
+    // handler then runs, also when a child prevented default.
+    onPointerDownCapture: chainEventHandlers(scrimPress.onPointerDownCapture, safeProps.onPointerDownCapture),
+    onPointerUpCapture: chainEventHandlers(scrimPress.onPointerUpCapture, safeProps.onPointerUpCapture),
+    onPointerCancelCapture: chainEventHandlers(scrimPress.onPointerCancelCapture, safeProps.onPointerCancelCapture),
     onKeyDown: onKeyDownProp,
     onCancel: handleCancel,
     children: /*#__PURE__*/_jsx(ModalAnnounceProvider, {

package/dist/Layer/useBackdropPress.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @file useBackdropPress.ts
+ * @input A modal layer's backdrop dismissal and whether it is allowed now
+ * @output Capture-phase pointer handlers and a click handler for the layer's
+ *   <dialog> root
+ * @position Shared backdrop-press rule for Dialog and Drawer
+ */
+import { type PointerEvent, type MouseEvent } from 'react';
+export interface BackdropPressHandlers {
+    onPointerDownCapture: (event: PointerEvent<HTMLElement>) => void;
+    onPointerUpCapture: (event: PointerEvent<HTMLElement>) => void;
+    onPointerCancelCapture: (event: PointerEvent<HTMLElement>) => void;
+    onClick: (event: MouseEvent<HTMLElement>) => void;
+}
+/**
+ * A press on a modal layer's backdrop targets the <dialog> root itself. A
+ * click there is also what the browser sends when a press starts on one side
+ * of the layer's edge and ends on the other (it goes to the nearest common
+ * ancestor), so a backdrop press dismisses only when its pointer-down and its
+ * pointer-up both landed on the backdrop. A cancelled pointer ends the press.
+ *
+ * The pointer handlers run in the capture phase. A nested layer, such as a
+ * popover open in the dialog, stops its presses at its own root, so a
+ * bubble-phase handler here does not see them.
+ */
+export declare function useBackdropPress(onBackdropPress: () => void, isEnabled: boolean): BackdropPressHandlers;
+//# sourceMappingURL=useBackdropPress.d.ts.map

package/dist/Layer/useBackdropPress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBackdropPress.d.ts","sourceRoot":"","sources":["../../src/Layer/useBackdropPress.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,UAAU,EAAC,MAAM,OAAO,CAAC;AAE9E,MAAM,WAAW,qBAAqB;IACpC,oBAAoB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACjE,kBAAkB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,sBAAsB,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnE,OAAO,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC9B,eAAe,EAAE,MAAM,IAAI,EAC3B,SAAS,EAAE,OAAO,GACjB,qBAAqB,CA6CvB"}

package/dist/Layer/useBackdropPress.js

@@ -0,0 +1,53 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useBackdropPress.ts
+ * @input A modal layer's backdrop dismissal and whether it is allowed now
+ * @output Capture-phase pointer handlers and a click handler for the layer's
+ *   <dialog> root
+ * @position Shared backdrop-press rule for Dialog and Drawer
+ */
+import { useCallback, useRef } from 'react';
+/**
+ * A press on a modal layer's backdrop targets the <dialog> root itself. A
+ * click there is also what the browser sends when a press starts on one side
+ * of the layer's edge and ends on the other (it goes to the nearest common
+ * ancestor), so a backdrop press dismisses only when its pointer-down and its
+ * pointer-up both landed on the backdrop. A cancelled pointer ends the press.
+ *
+ * The pointer handlers run in the capture phase. A nested layer, such as a
+ * popover open in the dialog, stops its presses at its own root, so a
+ * bubble-phase handler here does not see them.
+ */
+export function useBackdropPress(onBackdropPress, isEnabled) {
+  const startedOnBackdropRef = useRef(false);
+  const endedOnBackdropRef = useRef(false);
+  const onPointerDownCapture = useCallback(event => {
+    startedOnBackdropRef.current = event.target === event.currentTarget;
+    endedOnBackdropRef.current = false;
+  }, []);
+  const onPointerUpCapture = useCallback(event => {
+    endedOnBackdropRef.current = startedOnBackdropRef.current && event.target === event.currentTarget;
+    startedOnBackdropRef.current = false;
+  }, []);
+  const onPointerCancelCapture = useCallback(() => {
+    startedOnBackdropRef.current = false;
+    endedOnBackdropRef.current = false;
+  }, []);
+  const onClick = useCallback(event => {
+    const pressWasOnBackdrop = endedOnBackdropRef.current;
+    startedOnBackdropRef.current = false;
+    endedOnBackdropRef.current = false;
+    if (isEnabled && pressWasOnBackdrop && event.target === event.currentTarget) {
+      onBackdropPress();
+    }
+  }, [isEnabled, onBackdropPress]);
+  return {
+    onPointerDownCapture,
+    onPointerUpCapture,
+    onPointerCancelCapture,
+    onClick
+  };
+}

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"
       },