@astryxdesign/core 0.7.7-canary.fc68123 → 0.7.7

package/src/RadioList/RadioListItem.tsx

@@ -26,14 +26,12 @@ import {RadioListContext} from './RadioList';
 import {RadioListReasonContext} from './RadioListReasonContext';
 import {joinAriaIDs} from '../utils/inputAria';
 import {colorVars, radiusVars} from '../theme/tokens.stylex';
-import {isRenderable} from '../utils/isRenderable';
-import {mergeProps} from '../utils/mergeProps';
-import {rtlStyles} from '../utils/rtlStyles';
+import {mergeProps, isRenderable, rtlStyles} from '../utils';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {usePressFeedback} from '../hooks/usePressFeedback';
-import {useIndicator} from '../Indicator/useIndicator';
-import {Item, type ItemAlign} from '../Item/Item';
+import {useIndicator} from '../Indicator';
+import {Item, type ItemAlign} from '../Item';
 import {themeProps} from '../utils/themeProps';
 
 // The touch press's paint, declared by the shared overlay styles on the

package/src/Resizable/Resizable.doc.mjs

@@ -12,13 +12,13 @@ const anatomy = [
     name: 'Grip pill',
     required: false,
     description:
-      'Default visible grip indicator; dragging it resizes, wherever it sits. Custom handle content can replace it.',
+      'Default visible grip indicator; custom handle content can replace it.',
   },
   {
     name: 'Grab zone',
     required: true,
     description:
-      'Invisible enlarged pointer region centred on the divider. An inline zone takes at most half of a pane shorter than it; an overlay handle takes at most half of its pane.',
+      'Invisible enlarged pointer region aligned with the grip or divider.',
   },
 ];
 
@@ -224,8 +224,7 @@ const region = useResizable({
           description:
             'Which side of the divider the pill sits on. ' +
             'auto = content side (derived from isReversed), flips when collapsed. ' +
-            'start = left/top, end = right/bottom, center = centered on divider. ' +
-            'It moves only the pill, which a drag can still take wherever it sits; the grab zone stays centred on the divider.',
+            'start = left/top, end = right/bottom, center = centered on divider.',
           default: "'auto'",
         },
         {
@@ -318,7 +317,7 @@ export const docsDense = {
         isAlwaysVisible:
           'show pill grip at rest instead of only on hover. Use when discoverability important',
         pillPlacement:
-          'which side of divider pill sits on. auto = content side (derived from isReversed), flips when collapsed; start = left/top, end = right/bottom, center = centered on divider. Moves only the pill (still draggable); grab zone stays on the divider',
+          'which side of divider pill sits on. auto = content side (derived from isReversed), flips when collapsed; start = left/top, end = right/bottom, center = centered on divider',
         label: 'accessible label for separator',
         resizable: 'resize props from useResizable: connects handle to panel',
       },

package/src/Resizable/ResizeHandle.tsx

@@ -8,12 +8,29 @@
  * @output Styled drag handle with WAI-ARIA separator role and keyboard support
  * @position Between resizable panels; consumed directly by builders
  *
- * A drag takes pointer capture on the element it starts on, so moves over an
- * embedded frame still arrive.
+ * The handle element is 1px wide (the divider line itself), with an
+ * absolutely-positioned wider hit area for pointer interaction.
+ * Pill grip indicator can sit on either side of the divider (or centered)
+ * via pillPlacement. Default 'auto' places the pill on the panel side and
+ * flips when the panel collapses to 0px so it stays accessible.
+ *
+ * Pill placement uses a single stylex dynamic style that accepts a direction
+ * multiplier (-1 or 1). The pill element has its own themeProps
+ * ('resize-handle-pill') so themes can target size/shape directly.
+ *
+ * While the panel is collapsed, aria-valuenow is clamped to aria-valuemin
+ * (a value below the minimum is invalid per WCAG 4.1.2) and a localized
+ * "Collapsed" aria-valuetext announces the real state.
+ *
+ * The handle's input (the pointer drag, the keys, the double-click) is
+ * resizeGesture.ts. ResizeHandle forwards its React events to it, over the
+ * region its `resizable` prop describes. A drag takes pointer capture on the grab zone.
+ * The gesture's move, up and cancel events then go there, as in Slider, even
+ * over an embedded frame.
  */
 
 import {useEffect, useRef, useState} from 'react';
-import type {HTMLAttributes, ReactNode} from 'react';
+import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {
@@ -64,6 +81,30 @@ function resolveEffectiveSide(
   return panelSide;
 }
 
+/**
+ * Hit-area inline bias, expressed as a fraction of the pill's per-side offset.
+ *
+ * The visible pill is placed by `pillOffsetX`/`pillOffsetY`: anchored at the
+ * divider's inline-start edge and pushed one grip-width-plus-gap toward the
+ * panel side via a PHYSICAL translate (dir −1 = start, +1 = end). Because that
+ * offset is physical, the pill sits on the same physical side of the divider in
+ * both LTR and RTL. The grab zone must sit OVER that pill, so it has to use the
+ * exact same anchor + physical-offset construction as the pill (just wider) —
+ * anchoring the hit area at the divider centre (`insetInlineStart: 50%`) and
+ * biasing with a percentage translate mixes a logical anchor (which flips under
+ * RTL) with a physical translate (which doesn't), leaving the grab zone stranded
+ * to one side under RTL. Returning the pill's `dir` here lets the hit area reuse
+ * `pillOffsetX`/`pillOffsetY` so the two elements are positioned identically.
+ */
+function hitAreaBiasDir(
+  effectiveSide: 'start' | 'end' | 'center',
+): number | null {
+  if (effectiveSide === 'center') {
+    return null;
+  }
+  return effectiveSide === 'start' ? -1 : 1;
+}
+
 const styles = stylex.create({
   handle: {
     position: 'relative',
@@ -96,12 +137,6 @@ const styles = stylex.create({
     insetInlineEnd: 0,
     height: 'var(--resize-handle-hit-area, 16px)',
   },
-  overlayHorizontalOnShortPane: {
-    width: 'min(var(--resize-handle-hit-area, 16px), 50%)',
-  },
-  overlayVerticalOnShortPane: {
-    height: 'min(var(--resize-handle-hit-area, 16px), 50%)',
-  },
   horizontal: {
     width: 1,
     height: '100%',
@@ -161,27 +196,19 @@ const styles = stylex.create({
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
   },
-  // The grab zone sits centred on the Handle whatever `pillPlacement` says,
-  // which only places the pill. Inline centering comes from
-  // rtlStyles.centerInline at the call site (correct in LTR and RTL); this
-  // block owns only the block axis.
+  // Centered grab zone (pillPlacement 'center' / no bias): sit the hit area on
+  // the divider itself. Inline centering comes from rtlStyles.centerInline at
+  // the call site (correct in LTR and RTL); this block owns only the block axis.
   hitAreaCenteredY: {
     insetBlockStart: '50%',
     transform: 'translateY(-50%)',
   },
-  hitAreaWithinHandleX: {
-    width: `min(${spacingVars['--spacing-4']}, 100%)`,
-  },
-  hitAreaWithinHandleY: {
-    height: `min(${spacingVars['--spacing-4']}, 100%)`,
-  },
 
   // Pill base — themes target .astryx-resize-handle-pill for size/shape.
   pill: {
     position: 'absolute',
     zIndex: 2,
-    touchAction: 'none',
-    userSelect: 'none',
+    pointerEvents: 'none',
     borderRadius: radiusVars['--radius-full'],
     backgroundColor: colorVars['--color-border'],
     transitionProperty: 'opacity, background-color, transform',
@@ -189,18 +216,6 @@ const styles = stylex.create({
     transitionTimingFunction: easeVars['--ease-standard'],
     top: '50%',
   },
-  pillGrabHorizontal: {
-    cursor: {
-      default: 'col-resize',
-      ':is(:disabled,[aria-disabled="true"])': 'default',
-    },
-  },
-  pillGrabVertical: {
-    cursor: {
-      default: 'row-resize',
-      ':is(:disabled,[aria-disabled="true"])': 'default',
-    },
-  },
   pillHorizontal: {
     width: 3,
     height: spacingVars['--spacing-8'],
@@ -209,93 +224,59 @@ const styles = stylex.create({
     width: spacingVars['--spacing-8'],
     height: 3,
   },
-  // A hidden pill paints nothing, so it takes no pointer either.
-  pillHidden: {opacity: 0, pointerEvents: 'none'},
+  pillHidden: {opacity: 0},
   pillVisible: {opacity: 1},
   pillHover: {
     opacity: 1,
-    pointerEvents: 'auto',
     backgroundColor: colorVars['--color-border'],
   },
   pillActive: {
     opacity: 1,
-    pointerEvents: 'auto',
     backgroundColor: colorVars['--color-border-emphasized'],
   },
-  // A pill shown on hover can sit outside the Grab zone. This invisible
-  // extension spans the gap toward the Handle, so the pointer keeps the hover
-  // on its way to the pill. It reaches no further than the pill, and it takes
-  // the pointer only while the pill does. The pill's offset is a physical
-  // translate, so the side toward the Handle is physical too.
-  pillBridgeRight: {
-    '::before': {
-      content: '""',
-      position: 'absolute',
-      insetBlock: 0,
-      insetInlineStart: {
-        default: 0,
-        ':is([dir="rtl"] *)': `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
-      },
-      insetInlineEnd: {
-        default: `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
-        ':is([dir="rtl"] *)': 0,
-      },
-    },
-  },
-  pillBridgeLeft: {
-    '::before': {
-      content: '""',
-      position: 'absolute',
-      insetBlock: 0,
-      insetInlineStart: {
-        default: `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
-        ':is([dir="rtl"] *)': 0,
-      },
-      insetInlineEnd: {
-        default: 0,
-        ':is([dir="rtl"] *)': `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
-      },
-    },
-  },
-  pillBridgeDown: {
-    '::before': {
-      content: '""',
-      position: 'absolute',
-      insetInline: 0,
-      insetBlockStart: 0,
-      insetBlockEnd: `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
-    },
-  },
-  pillBridgeUp: {
-    '::before': {
-      content: '""',
-      position: 'absolute',
-      insetInline: 0,
-      insetBlockStart: `calc(-1 * ${spacingVars['--spacing-1']} - 1px)`,
-      insetBlockEnd: 0,
-    },
-  },
 });
 
 // Dynamic styles — avoids inline style overrides.
 // Each axis gets its own function since StyleX requires static structure.
 const dynamicStyles = stylex.create({
-  // An inline Handle's zone is centred on its line, so half of it reaches into
-  // the pane.
-  hitAreaLengthX: (pane: number) => ({
-    width: `min(${spacingVars['--spacing-4']}, ${pane}px)`,
+  // Hit-area inline offset — mirrors the pill's `pillOffsetX`/`pillOffsetY`
+  // construction so the grab zone sits centred on the visible pill in BOTH
+  // directions. Both anchor at the divider's inline-start edge
+  // (`insetInlineStart: 0`) and travel toward the panel side with the SAME
+  // physical translate `dir * (gripWidth + gap)`, so they share the pill's
+  // near edge. The hit area is wider, so it also shifts by half the width
+  // difference `(16px − 3px) / 2 = 6.5px` to align the two CENTRES. That
+  // centring shift is along the inline axis (a box grows from its inline-start
+  // edge toward inline-end), so it must flip physical sign under RTL — unlike
+  // the `dir * (...)` travel, which is physical and identical in both
+  // directions because the pill's own offset is physical. Mixing the previous
+  // divider-relative `50%` anchor with a percentage translate stranded the grab
+  // zone to one side under RTL; this construction keeps it on the pill.
+  //
+  // Only the offset axis is translated. Unlike the pill — a small box anchored
+  // at the divider's midpoint, so it needs a −50% self-shift to centre — the
+  // grab zone is STRETCHED along the handle by hitAreaHorizontal/Vertical's
+  // 0/0 insets, so it is already in place on that axis. A percentage there
+  // would displace it by half the handle's own length, growing with the panel.
+  hitAreaOffsetX: (dir: number) => ({
+    insetInlineStart: 0,
+    transform: {
+      default: `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))`,
+      ':is([dir="rtl"] *)': `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px))`,
+    },
   }),
-  hitAreaLengthY: (pane: number) => ({
-    height: `min(${spacingVars['--spacing-4']}, ${pane}px)`,
+  hitAreaOffsetY: (dir: number) => ({
+    insetBlockStart: 0,
+    transform: `translateY(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))`,
   }),
-  pillOffsetX: (dir: -1 | 1) => ({
+  pillOffsetX: (dir: number) => ({
     insetInlineStart: 0,
     transform: `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)`,
   }),
   // Vertical offset: no rotation — use explicit landscape dimensions.
   // Rotation + offset creates confusing coordinate math since translate
   // operates in pre-rotation local space.
-  pillOffsetY: (dir: -1 | 1) => ({
+  pillOffsetY: (dir: number) => ({
     top: 0,
     transform: `translate(-50%, calc(${dir} * (100% + ${spacingVars['--spacing-1']})))`,
   }),
@@ -352,8 +333,7 @@ export interface ResizeHandleProps extends Omit<
   isAlwaysVisible?: boolean;
 
   /**
-   * Which side of the divider line the pill sits on. It moves only the pill:
-   * the grab zone stays centred on the divider.
+   * Which side of the divider line the pill sits on.
    * - `'auto'` — panel side by default, flips when panel is collapsed to 0px
    * - `'start'` — left (horizontal) or top (vertical)
    * - `'end'` — right (horizontal) or bottom (vertical)
@@ -488,12 +468,9 @@ export function ResizeHandle({
     isReversed,
     isCollapsed,
   );
-  // An inline zone reaches at most half of the pane the Handle resizes. An
-  // overlay Handle takes at most half of it. A collapsed pane, or one at 0px,
-  // has nothing to protect and keeps the whole zone.
-  const paneSize = resizable?._size;
-  const paneLength =
-    isCollapsed || paneSize == null || paneSize <= 0 ? undefined : paneSize;
+  // Physical offset direction shared by the pill and the grab zone (null =
+  // centered / no bias). Keeps the two positioned identically in LTR and RTL.
+  const hitBiasDir = hitAreaBiasDir(effectiveSide);
   const isInteracting = isHovered || isFocused;
 
   // A handle whose axis disagrees with its region drags along one axis while
@@ -556,35 +533,6 @@ export function ResizeHandle({
       ? t('@astryx.resizable.collapsed')
       : undefined;
 
-  // The Grip pill takes the pointer as the Grab zone does, so a pill drawn
-  // outside the zone still resizes.
-  const grabHandlers: Pick<
-    HTMLAttributes<HTMLDivElement>,
-    | 'onPointerDown'
-    | 'onPointerMove'
-    | 'onPointerUp'
-    | 'onPointerCancel'
-    | 'onLostPointerCapture'
-    | 'onPointerEnter'
-    | 'onPointerLeave'
-  > = {
-    onPointerDown: e => {
-      if (!isDisabled) {
-        gesture?.pointerDown(e);
-      }
-    },
-    onPointerMove: e => gesture?.pointerMove(e),
-    onPointerUp: e => gesture?.pointerUp(e),
-    onPointerCancel: e => gesture?.pointerCancel(e),
-    onLostPointerCapture: e => gesture?.pointerCancel(e),
-    onPointerEnter: () => setIsHovered(true),
-    onPointerLeave: () => {
-      if (!isDragging) {
-        setIsHovered(false);
-      }
-    },
-  };
-
   return (
     <div
       ref={useMergedRefs(ref, handleRef)}
@@ -612,11 +560,6 @@ export function ResizeHandle({
           isOverlay && styles.overlay,
           isOverlay &&
             (isHorizontal ? styles.overlayHorizontal : styles.overlayVertical),
-          isOverlay &&
-            paneLength != null &&
-            (isHorizontal
-              ? styles.overlayHorizontalOnShortPane
-              : styles.overlayVerticalOnShortPane),
           !isOverlay && (isHorizontal ? styles.horizontal : styles.vertical),
           !isOverlay &&
             !hasDivider &&
@@ -651,21 +594,34 @@ export function ResizeHandle({
         {...stylex.props(
           styles.hitArea,
           isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical,
-          isHorizontal
-            ? rtlStyles.centerInline('0px')
-            : styles.hitAreaCenteredY,
-          isOverlay &&
-            (isHorizontal
-              ? styles.hitAreaWithinHandleX
-              : styles.hitAreaWithinHandleY),
-          !isOverlay &&
-            paneLength != null &&
-            (isHorizontal
-              ? dynamicStyles.hitAreaLengthX(paneLength)
-              : dynamicStyles.hitAreaLengthY(paneLength)),
+          // Bias the grab zone to sit over the visible pill. When the pill is
+          // centered (no bias) just center the hit area on the divider; when
+          // it's offset to a panel side, reuse the pill's physical-offset
+          // construction so the two stay aligned in LTR and RTL alike.
+          hitBiasDir == null
+            ? isHorizontal
+              ? rtlStyles.centerInline('0px')
+              : styles.hitAreaCenteredY
+            : isHorizontal
+              ? dynamicStyles.hitAreaOffsetX(hitBiasDir)
+              : dynamicStyles.hitAreaOffsetY(hitBiasDir),
           isDisabled && styles.disabled,
         )}
-        {...grabHandlers}
+        onPointerDown={e => {
+          if (!isDisabled) {
+            gesture?.pointerDown(e);
+          }
+        }}
+        onPointerMove={e => gesture?.pointerMove(e)}
+        onPointerUp={e => gesture?.pointerUp(e)}
+        onPointerCancel={e => gesture?.pointerCancel(e)}
+        onLostPointerCapture={e => gesture?.pointerCancel(e)}
+        onPointerEnter={() => setIsHovered(true)}
+        onPointerLeave={() => {
+          if (!isDragging) {
+            setIsHovered(false);
+          }
+        }}
       />
       {/* Pill grip indicator — themed via .astryx-resize-handle-pill */}
       {children ?? (
@@ -684,25 +640,11 @@ export function ResizeHandle({
                   : dynamicStyles.pillOffsetY(
                       effectiveSide === 'start' ? -1 : 1,
                     ),
-              isHorizontal
-                ? styles.pillGrabHorizontal
-                : styles.pillGrabVertical,
               isAlwaysVisible ? styles.pillVisible : styles.pillHidden,
-              !isAlwaysVisible &&
-                effectiveSide !== 'center' &&
-                (isHorizontal
-                  ? effectiveSide === 'start'
-                    ? styles.pillBridgeRight
-                    : styles.pillBridgeLeft
-                  : effectiveSide === 'start'
-                    ? styles.pillBridgeDown
-                    : styles.pillBridgeUp),
               isInteracting && !isDragging && styles.pillHover,
               isDragging && styles.pillActive,
-              isDisabled && styles.disabled,
             ),
           )}
-          {...grabHandlers}
         />
       )}
     </div>

package/src/SegmentedControl/useSegmentedSelectionMotion.ts

@@ -25,7 +25,7 @@ import {
   type RefObject,
 } from 'react';
 import {
-  createMotionAnimator,
+  createAnimator,
   type AnimateOptions,
   type Animator,
   type MotionCurve,
@@ -539,7 +539,7 @@ export class SegmentedSelectionMotion {
   private readonly after: Animator;
 
   constructor(
-    private readonly animator: Animator = createMotionAnimator(null, {
+    private readonly animator: Animator = createAnimator(null, {
       pseudoElement: '::before',
     }),
     options: SegmentedSelectionMotionOptions = {},
@@ -552,10 +552,7 @@ export class SegmentedSelectionMotion {
     this.now = options.now ?? defaultNow;
     this.after =
       options.afterAnimator ??
-      createMotionAnimator(null, {
-        pseudoElement: '::after',
-        initial: {opacity: 0},
-      });
+      createAnimator(null, {pseudoElement: '::after', initial: {opacity: 0}});
   }
 
   /** Attaches the radiogroup whose pseudo-elements are the lens (null detaches). */

package/src/Slider/sliderTouchController.ts

@@ -29,7 +29,7 @@ import {TapGestureRecognizer} from '../gestures/TapGestureRecognizer';
 import type {PointerKind} from '../gestures/types';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {
-  createMotionAnimator,
+  createAnimator,
   type Animator,
   type MotionCurve,
   type MotionHandle,
@@ -1186,7 +1186,7 @@ export class SliderTouchController {
   private animatorFor(element: HTMLElement): Animator {
     let animator = this.animators.get(element);
     if (animator == null) {
-      animator = createMotionAnimator(element);
+      animator = createAnimator(element);
       this.animators.set(element, animator);
     }
     return animator;