@astryxdesign/core 0.7.7-canary.ae97fa8 → 0.7.7-canary.b377b21

package/dist/Resizable/ResizeHandle.js

@@ -8,25 +8,8 @@
  * @output Styled drag handle with WAI-ARIA separator role and keyboard support
  * @position Between resizable panels; consumed directly by builders
  *
- * 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.
+ * A drag takes pointer capture on the element it starts on, so moves over an
+ * embedded frame still arrive.
  */
 import { useEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -53,28 +36,6 @@ function resolveEffectiveSide(pillPlacement, isReversed, isCollapsed) {
   }
   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) {
-  if (effectiveSide === 'center') {
-    return null;
-  }
-  return effectiveSide === 'start' ? -1 : 1;
-}
 const styles = {
   handle: {
     kVAEAm: "x1n2onr6",
@@ -108,6 +69,14 @@ const styles = {
     kZKoxP: "x5kfih4",
     $$css: true
   },
+  overlayHorizontalOnShortPane: {
+    kzqmXN: "x1a4a7d3",
+    $$css: true
+  },
+  overlayVerticalOnShortPane: {
+    kZKoxP: "xcuarzx",
+    $$css: true
+  },
   horizontal: {
     kzqmXN: "x1i1rx1s",
     kZKoxP: "x5yr21d",
@@ -169,10 +138,19 @@ const styles = {
     k3aq6I: "x1cb1t30",
     $$css: true
   },
+  hitAreaWithinHandleX: {
+    kzqmXN: "x5wh7xo",
+    $$css: true
+  },
+  hitAreaWithinHandleY: {
+    kZKoxP: "x1tvnn7s",
+    $$css: true
+  },
   pill: {
     kVAEAm: "x10l6tqk",
     kY2c9j: "xhtitgo",
-    kfzvcC: "x47corl",
+    kFalU9: "x5ve5x3",
+    kfSwDN: "x87ps6o",
     kaIpWk: "xjspbzw",
     kWkggS: "x1m4xfpy",
     k1ekBW: "x1wbls7o",
@@ -181,6 +159,14 @@ const styles = {
     k87sOh: "xwa60dl",
     $$css: true
   },
+  pillGrabHorizontal: {
+    kkrTdU: "xicojor x16khyan",
+    $$css: true
+  },
+  pillGrabVertical: {
+    kkrTdU: "xyozgr7 x16khyan",
+    $$css: true
+  },
   pillHorizontal: {
     kzqmXN: "x1g8rjiy",
     kZKoxP: "x18to7ep",
@@ -193,6 +179,7 @@ const styles = {
   },
   pillHidden: {
     kSiTet: "xg01cxk",
+    kfzvcC: "x47corl",
     $$css: true
   },
   pillVisible: {
@@ -201,26 +188,58 @@ const styles = {
   },
   pillHover: {
     kSiTet: "x1hc1fzr",
+    kfzvcC: "x67bb7w",
     kWkggS: "x1m4xfpy",
     $$css: true
   },
   pillActive: {
     kSiTet: "x1hc1fzr",
+    kfzvcC: "x67bb7w",
     kWkggS: "x7njt3n",
     $$css: true
+  },
+  pillBridgeRight: {
+    kgeoSG: "x1cpjm7i",
+    kEoFBp: "x1hmns74",
+    kGOzcv: "x1nc033x",
+    kSJ0CW: "x1682cnc x7my30s",
+    koaPKo: "x5ig7ga x3k25x4",
+    $$css: true
+  },
+  pillBridgeLeft: {
+    kgeoSG: "x1cpjm7i",
+    kEoFBp: "x1hmns74",
+    kGOzcv: "x1nc033x",
+    kSJ0CW: "x1vl71nl xnx00js",
+    koaPKo: "xtyp5od x17kcdp5",
+    $$css: true
+  },
+  pillBridgeDown: {
+    kgeoSG: "x1cpjm7i",
+    kEoFBp: "x1hmns74",
+    kpsdNU: "xm4btww",
+    k96MEf: "x1y3wzot",
+    k5Ofw7: "xxgnp13",
+    $$css: true
+  },
+  pillBridgeUp: {
+    kgeoSG: "x1cpjm7i",
+    kEoFBp: "x1hmns74",
+    kpsdNU: "xm4btww",
+    k96MEf: "x1phjwh8",
+    k5Ofw7: "xhq5o37",
+    $$css: true
   }
 };
 
 // Dynamic styles — avoids inline style overrides.
 // Each axis gets its own function since StyleX requires static structure.
 const _temp = {
-  kLqNvP: "x1o0tod",
-  k3aq6I: "x11wx31z " + "x75qhwu",
+  kzqmXN: "x5lhr3w",
   "$$css": true
 };
 const _temp2 = {
-  k87sOh: "x13vifvy",
-  k3aq6I: "xsqj5wx",
+  kZKoxP: "x16ye13r",
   "$$css": true
 };
 const _temp3 = {
@@ -234,12 +253,11 @@ const _temp4 = {
   "$$css": true
 };
 const dynamicStyles = {
-  hitAreaOffsetX: dir => [_temp, {
-    "--x-qthpiu": `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))` != null ? `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))` : undefined,
-    "--x-sj6hyi": `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px))` != null ? `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px))` : undefined
+  hitAreaLengthX: pane => [_temp, {
+    "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`min(${spacingVars['--spacing-4']}, ${pane}px)`)
   }],
-  hitAreaOffsetY: dir => [_temp2, {
-    "--x-transform": `translateY(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))` != null ? `translateY(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) - 6.5px))` : undefined
+  hitAreaLengthY: pane => [_temp2, {
+    "--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`min(${spacingVars['--spacing-4']}, ${pane}px)`)
   }],
   pillOffsetX: dir => [_temp3, {
     "--x-transform": `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)` != null ? `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)` : undefined
@@ -358,9 +376,11 @@ export function ResizeHandle({
   const gesture = resizable != null ? regionGesture : null;
   const isCollapsed = resizable?._isCollapsed ?? false;
   const effectiveSide = resolveEffectiveSide(pillPlacement, isReversed, isCollapsed);
-  // 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);
+  // 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;
   const isInteracting = isHovered || isFocused;
 
   // A handle whose axis disagrees with its region drags along one axis while
@@ -402,6 +422,26 @@ export function ResizeHandle({
   const effectiveMax = resizable ? getEffectiveMaxPx(resizable) ?? (resizable._maxSizePx !== Infinity ? resizable._maxSizePx : undefined) : undefined;
   const ariaValueMax = effectiveMax != null && Number.isFinite(effectiveMax) ? effectiveMax : undefined;
   const ariaValueText = resizable != null && isCollapsed ? 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 = {
+    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 /*#__PURE__*/_jsxs("div", {
     ref: useMergedRefs(ref, handleRef),
     role: "separator",
@@ -421,7 +461,7 @@ export function ResizeHandle({
     onFocus: () => setIsFocused(true),
     onBlur: () => setIsFocused(false),
     "data-resizing": isDragging || undefined,
-    ...mergeProps(themeProps('resize-handle'), focusOutlineProps.focusVisible(styles.handle, isOverlay && styles.overlay, isOverlay && (isHorizontal ? styles.overlayHorizontal : styles.overlayVertical), !isOverlay && (isHorizontal ? styles.horizontal : styles.vertical), !isOverlay && !hasDivider && (isHorizontal ? styles.noDividerHorizontal : styles.noDividerVertical), !isOverlay && hasDivider && isInteracting && !isDragging && styles.handleHover, !isOverlay && hasDivider && isDragging && styles.handleActive, isDisabled && styles.disabled, xstyle), className),
+    ...mergeProps(themeProps('resize-handle'), focusOutlineProps.focusVisible(styles.handle, 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 && (isHorizontal ? styles.noDividerHorizontal : styles.noDividerVertical), !isOverlay && hasDivider && isInteracting && !isDragging && styles.handleHover, !isOverlay && hasDivider && isDragging && styles.handleActive, isDisabled && styles.disabled, xstyle), className),
     ...props,
     // Keyboard resizing must fire from the focusable separator, not a child:
     // keydown fires on the focused element and bubbles up, so a handler on a
@@ -435,29 +475,11 @@ export function ResizeHandle({
       }
     },
     children: [/*#__PURE__*/_jsx("div", {
-      ...stylex.props(styles.hitArea, isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical,
-      // 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),
-      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);
-        }
-      }
+      ...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)), isDisabled && styles.disabled),
+      ...grabHandlers
     }), children ?? /*#__PURE__*/_jsx("div", {
-      ...mergeProps(themeProps('resize-handle-pill'), stylex.props(styles.pill, isHorizontal ? styles.pillHorizontal : styles.pillVertical, effectiveSide === 'center' ? rtlStyles.centerInline('-50%') : isHorizontal ? dynamicStyles.pillOffsetX(effectiveSide === 'start' ? -1 : 1) : dynamicStyles.pillOffsetY(effectiveSide === 'start' ? -1 : 1), isAlwaysVisible ? styles.pillVisible : styles.pillHidden, isInteracting && !isDragging && styles.pillHover, isDragging && styles.pillActive))
+      ...mergeProps(themeProps('resize-handle-pill'), stylex.props(styles.pill, isHorizontal ? styles.pillHorizontal : styles.pillVertical, effectiveSide === 'center' ? rtlStyles.centerInline('-50%') : isHorizontal ? dynamicStyles.pillOffsetX(effectiveSide === 'start' ? -1 : 1) : 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
     })]
   });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"useSegmentedSelectionMotion.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/useSegmentedSelectionMotion.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSegmentedSelectionMotion.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/useSegmentedSelectionMotion.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAKL,KAAK,WAAW,EAChB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAGL,KAAK,QAAQ,EAKd,MAAM,oBAAoB,CAAC;AAa5B,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,iCAA+B,CAAC;AAS7D,6EAA6E;AAC7E,eAAO,MAAM,kBAAkB,EAAE,aAAa,CAAC,MAAM,CA2BpD,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAErC,wDAAwD;AACxD,eAAO,MAAM,cAAc,EAAE,aAAa,CAAC,MAAM,CAMhD,CAAC;AAEF,6EAA6E;AAC7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEpE;AA6SD,sDAAsD;AACtD,MAAM,WAAW,kBAAkB;IACjC;;;;OAIG;IACH,QAAQ,CAAC,UAAU,EAAE,MAAM,OAAO,CAAC;IACnC,8EAA8E;IAC9E,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,+BAA+B;IAC9C,oFAAoF;IACpF,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,MAAM,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,QAAQ,CAAC;CACnC;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBAAa,wBAAwB;IA4DjC,OAAO,CAAC,QAAQ,CAAC,QAAQ;IA3D3B,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,OAAO,CAAwB;IACvC;;;;;;OAMG;IACH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA0B;IACpD,qEAAqE;IACrE,OAAO,CAAC,YAAY,CAA4B;IAChD,6EAA6E;IAC7E,OAAO,CAAC,SAAS,CAAuB;IACxC,2DAA2D;IAC3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0B;IACxD,2CAA2C;IAC3C,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA2B;IACnD,4EAA4E;IAC5E,OAAO,CAAC,MAAM,CAAS;IACvB;;;;;OAKG;IACH,OAAO,CAAC,YAAY,CAAQ;IAC5B;;;OAGG;IACH,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAqD;IAC7E,gFAAgF;IAChF,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,KAAK,CAAsB;IACnC;;;OAGG;IACH,OAAO,CAAC,SAAS,CAAuB;IACxC;;;OAGG;IACH,OAAO,CAAC,eAAe,CAAS;IAChC,mEAAmE;IACnE,OAAO,CAAC,OAAO,CAAwB;IACvC,sEAAsE;IACtE,OAAO,CAAC,gBAAgB,CAAQ;IAChC,8DAA8D;IAC9D,OAAO,CAAC,cAAc,CAAS;IAC/B,yEAAyE;IACzE,OAAO,CAAC,OAAO,CAAK;IAEpB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAe;IACnC,gEAAgE;IAChE,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAW;gBAGd,QAAQ,GAAE,QAEzB,EACF,OAAO,GAAE,+BAAoC;IAgB/C,kFAAkF;IAClF,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI;IAS9C,wDAAwD;IACxD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,kFAAkF;IAClF,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED;;;;;OAKG;IACH,OAAO,CAAC,YAAY,EAAE,OAAO,GAAG,IAAI;IAQpC,8DAA8D;IAC9D,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAMjE,2EAA2E;IAC3E,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI;IA8D1D;;;OAGG;IACH,OAAO,CAAC,aAAa;IAIrB;;;;OAIG;IACH,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,UAAO,GAAG,IAAI;IA8B5E;;;;OAIG;IACH,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAa3B;;;;OAIG;IACH,OAAO,CAAC,IAAI;IAaZ;;;;;;OAMG;IACH,OAAO,CAAC,UAAU;IAkDlB,6DAA6D;IAC7D,OAAO,CAAC,KAAK;IA6Bb;;;;;OAKG;IACH,OAAO,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI;IAkElD;;;;OAIG;IACH,OAAO,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,GAAG,IAAI;IAuBtE;;;;;OAKG;IACH,OAAO,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAwBhD,wEAAwE;IACxE,MAAM,IAAI,IAAI;IAiBd,oEAAoE;IACpE,MAAM,IAAI,IAAI;IAyBd;;;;;;OAMG;IACH,OAAO,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAiBjC;;;;OAIG;IACH,IAAI,IAAI,IAAI;IAgBZ;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAiBxB;;;OAGG;IACH,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,kBAAkB;IAW1B,qDAAqD;IACrD,OAAO,CAAC,UAAU;IAQlB;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAqBpB;;;;OAIG;IACH,OAAO,CAAC,KAAK;IAYb;;;;;;OAMG;IACH,OAAO,CAAC,KAAK;IAsEb,uEAAuE;IACvE,OAAO,CAAC,QAAQ,CAA0D;IAE1E,0EAA0E;IAC1E,OAAO,CAAC,UAAU;IAsBlB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAqBlB,wCAAwC;IACxC,OAAO,CAAC,UAAU;IAQlB,+DAA+D;IAC/D,OAAO,CAAC,SAAS;IAWjB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAyBlB;;;OAGG;IACH,OAAO,CAAC,OAAO;IA8Bf;;;;;;;OAOG;IACH,OAAO,CAAC,WAAW;IAsDnB;;;OAGG;IACH,OAAO,CAAC,KAAK;IAkBb;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,UAAU;IAYlB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAkBnB;;;OAGG;IACH,OAAO,CAAC,UAAU;IAyBlB;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAKhB,wCAAwC;IACxC,OAAO,CAAC,UAAU;CAOnB;AAED;;;;;GAKG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACvC,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,OAAO,EACrB,UAAU,EAAE,OAAO,GAClB;IACD,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC;IACvC,4EAA4E;IAC5E,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;CAChD,CAsDA"}

package/dist/SegmentedControl/useSegmentedSelectionMotion.js

@@ -16,7 +16,7 @@
  * - /packages/core/src/SegmentedControl/useSegmentedTouchTracking.ts
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { createAnimator } from "../motion/animator.js";
+import { createMotionAnimator } from "../motion/animator.js";
 import { registerSegmentedTable, segmentedControl } from "../motion/uikit/segmented.js";
 import { registerSpringsTable, springs } from "../motion/uikit/springs.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
@@ -361,7 +361,7 @@ export class SegmentedSelectionMotion {
 
   /** The ::after: the surface fading out under Reduced Motion. */
 
-  constructor(animator = createAnimator(null, {
+  constructor(animator = createMotionAnimator(null, {
     pseudoElement: '::before'
   }), options = {}) {
     this.animator = animator;
@@ -371,7 +371,7 @@ export class SegmentedSelectionMotion {
     registerSpringsTable();
     registerSegmentedTable();
     this.now = options.now ?? defaultNow;
-    this.after = options.afterAnimator ?? createAnimator(null, {
+    this.after = options.afterAnimator ?? createMotionAnimator(null, {
       pseudoElement: '::after',
       initial: {
         opacity: 0

package/dist/Slider/sliderTouchController.js

@@ -21,7 +21,7 @@ import { PRESS_PROFILES, createPressTracker } from "../gestures/PressTracker.js"
 import { lockSelection } from "../gestures/selectionLock.js";
 import { TapGestureRecognizer } from "../gestures/TapGestureRecognizer.js";
 import { isRtlElement } from "../hooks/isRtlElement.js";
-import { createAnimator } from "../motion/animator.js";
+import { createMotionAnimator } from "../motion/animator.js";
 import { projectDistance } from "../motion/projection.js";
 import { resolveMotion } from "../motion/resolveMotion.js";
 import { solveSpring, toSpring } from "../motion/spring.js";
@@ -995,7 +995,7 @@ export class SliderTouchController {
   animatorFor(element) {
     let animator = this.animators.get(element);
     if (animator == null) {
-      animator = createAnimator(element);
+      animator = createMotionAnimator(element);
       this.animators.set(element, animator);
     }
     return animator;

package/dist/Spinner/Spinner.d.ts

@@ -6,7 +6,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Spinner/Spinner.doc.mjs
- * - /packages/core/src/Spinner/Spinner.test.tsx
+ * - /packages/core/src/Spinner/Spinner.test.tsx and __tests__/SpinnerMotion.a11y.chromium.spec.ts (rotor timing)
  * - /packages/core/src/Spinner/index.ts
  * - /apps/storybook/stories/Spinner.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Spinner/ (showcase blocks)

package/dist/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AA4XF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,SAAS,EACb,EAAE,YAAY,+BAyHd;yBApIe,OAAO"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAQ,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA6B5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AA8XF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,SAAS,CAAC,eAAe,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAW,EACX,KAAiB,EACjB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,GAAG,SAAS,EACb,EAAE,YAAY,+BAqId;yBAhJe,OAAO"}

package/dist/Spinner/Spinner.js

@@ -10,7 +10,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Spinner/Spinner.doc.mjs
- * - /packages/core/src/Spinner/Spinner.test.tsx
+ * - /packages/core/src/Spinner/Spinner.test.tsx and __tests__/SpinnerMotion.a11y.chromium.spec.ts (rotor timing)
  * - /packages/core/src/Spinner/index.ts
  * - /apps/storybook/stories/Spinner.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Spinner/ (showcase blocks)
@@ -156,59 +156,54 @@ function registerSpinnerVars() {
 registerSpinnerVars();
 
 /**
- * Pin every ring's dash motion to the document timeline's origin instead of
- * its own start time, so spinners mounted seconds apart stay in phase.
+ * Pin every ring's rotation to the document timeline's origin instead of its
+ * own start time, so spinners mounted seconds apart stay in phase.
  *
- * Setting `startTime` is exact where arithmetic on a clock read is not: a
+ * Setting `startTime` is exact where arithmetic on a clock read is not. A
  * negative `animation-delay` computed at mount is only as good as the gap
- * between reading the clock and the frame the animation starts in, which at
- * 10x CPU throttling measured 116deg of drift (from when this animated a
- * literal rotation; the same drift risk applies to the dash offset now).
+ * between the clock read and the frame the animation starts in. At 10x CPU
+ * throttling that gap measured 116 degrees of drift.
  *
- * Rings are collected and pinned in one frame because `getAnimations()`
- * resolves style and `startTime` dirties it again, so pinning them one at a
- * time makes each mount re-force what the previous one invalidated — 53 style
- * recalcs for 38 spinners against 19 batched.
+ * Rotors are collected and pinned in one frame. `getAnimations()` resolves
+ * style, and `startTime` dirties it again. So pinning them one at a time makes
+ * each mount re-force what the previous one invalidated: 53 style recalcs for
+ * 38 spinners, against 19 batched.
  */
-const pendingRings = new Set();
+const pendingRotors = new Set();
 let flushScheduled = false;
-function pinRingsToTimelineOrigin() {
+function pinRotorsToTimelineOrigin() {
   flushScheduled = false;
   const animations = [];
-  for (const svg of pendingRings) {
-    // The animation now runs on the arc <circle>, a descendant of the ring
-    // this ref sits on (#6253), so it needs subtree:true to be found here.
-    animations.push(...svg.getAnimations({
-      subtree: true
-    }));
+  for (const rotor of pendingRotors) {
+    animations.push(...rotor.getAnimations());
   }
-  pendingRings.clear();
+  pendingRotors.clear();
   for (const animation of animations) {
     animation.startTime = 0;
   }
 }
 
 /**
- * Ref callback for the ring: the one place a mounted ring touches the DOM.
+ * Ref callback for the rotor: the one place a mounted ring touches the DOM.
  *
  * It reads nothing back — the geometry is resolved by the cascade, not in JS.
  */
-function syncRotationPhase(svg) {
-  if (svg == null) {
+function syncRotationPhase(rotor) {
+  if (rotor == null) {
     return undefined;
   }
   // jsdom implements no Web Animations, and this runs in every consumer's
   // component tests.
-  if (typeof svg.getAnimations !== 'function') {
+  if (typeof rotor.getAnimations !== 'function') {
     return undefined;
   }
-  pendingRings.add(svg);
+  pendingRotors.add(rotor);
   if (!flushScheduled) {
     flushScheduled = true;
-    requestAnimationFrame(pinRingsToTimelineOrigin);
+    requestAnimationFrame(pinRotorsToTimelineOrigin);
   }
   return () => {
-    pendingRings.delete(svg);
+    pendingRotors.delete(rotor);
   };
 }
 
@@ -217,17 +212,11 @@ function syncRotationPhase(svg) {
 // =============================================================================
 
 /**
- * Moves the dash around a stationary circle instead of rotating the whole
- * ring. WebKit re-antialiases a rotating stroked shape's rounded cap
- * (`strokeLinecap: 'round'`, below) slightly differently at each intermediate
- * angle, which reads as a visible wobble on iOS Safari independent of
- * compositing (#6253) — confirmed by a real-device test against this exact
- * fix, since `willChange`/layer promotion alone (the earlier fix for #3617)
- * only smooths the rotation's motion, not the per-frame stroke rasterization.
- * A static circle with an animated `stroke-dashoffset` never rotates, so
- * WebKit never re-rasterizes the cap at an intermediate angle at all.
+ * A `transform` animation runs on the compositor, so the ring keeps turning
+ * while a script runs. A `stroke-dashoffset` animation would repaint the arc
+ * on the main thread every frame, so it would stop while a script runs.
  */
-const dashMotion = "x1wbvqyn-B";
+const rotation = "xqng64z-B";
 
 // =============================================================================
 // Styles
@@ -412,7 +401,7 @@ export function Spinner({
   // localized default. The fallback is AT-facing text, so it goes through the
   // translation runtime like visible text does.
   const resolvedAriaLabel = ariaLabel ?? (typeof label === 'string' ? label : undefined) ?? t('@astryx.spinner.loading');
-  const spinner = /*#__PURE__*/_jsx("span", {
+  const spinner = /*#__PURE__*/_jsxs("span", {
     ref: hasLabel ? undefined : ref,
     role: "status",
     "aria-label": namedByVisibleLabel ? undefined : resolvedAriaLabel,
@@ -441,35 +430,48 @@ export function Spinner({
       width: `var(${BOX_SIZE}, ${frameSize}px)`,
       height: `var(${BOX_SIZE}, ${frameSize}px)`
     }),
-    children: /*#__PURE__*/_jsxs("svg", {
-      ref: syncRotationPhase,
-      width: frameSize,
-      height: frameSize,
+    children: [/*#__PURE__*/_jsx("svg", {
+      width: 0,
+      height: 0,
       "aria-hidden": "true",
       ...{
-        className: "xlp1x4z x1lliihq x6v0vjy x7yyq19 x1rea2x4"
+        className: "xlp1x4z x1lliihq x15r89dc x6v0vjy x7yyq19 x1rea2x4"
       },
-      children: [/*#__PURE__*/_jsx("circle", {
+      children: /*#__PURE__*/_jsx("circle", {
         cx: "50%",
         cy: "50%",
         r: diameter / 2,
         strokeWidth: border,
         ...stylex.props(styles.circle, styles.track, trackOpacityStyles[shade])
-      }), /*#__PURE__*/_jsx("circle", {
-        cx: "50%",
-        cy: "50%",
-        r: diameter / 2,
-        strokeWidth: border
-        // The size's own dash, for the render with no stylesheet. The rule
-        // above composes the same lengths from the resolved diameter, so a
-        // themed ring keeps this fraction of arc rather than this length.
-        ,
-        strokeDasharray: `${arcLength} ${circumference - arcLength}`,
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      ref: syncRotationPhase,
+      "aria-hidden": "true",
+      ...{
+        className: "x1lliihq x15r89dc x6v0vjy x7yyq19 x1so62im x1qcljrn xnh0sag xa4qsjk x1ka1v4i x1esw782"
+      },
+      children: /*#__PURE__*/_jsx("svg", {
+        width: frameSize,
+        height: frameSize,
         ...{
-          className: "xbh8q5q x1764fhq x1g0ag68 x1owpc8m xio8zfp xgw3ha0 x1qcljrn xnh0sag xa4qsjk x1nlxm0d x1esw782 xtve3lm x9tu13d xdv9ggb"
-        }
-      })]
-    })
+          className: "xlp1x4z x1lliihq x15r89dc x6v0vjy x7yyq19 x1rea2x4"
+        },
+        children: /*#__PURE__*/_jsx("circle", {
+          cx: "50%",
+          cy: "50%",
+          r: diameter / 2,
+          strokeWidth: border
+          // The size's own dash, for the render with no stylesheet. The rule
+          // above composes the same lengths from the resolved diameter, so a
+          // themed ring keeps this fraction of arc rather than this length.
+          ,
+          strokeDasharray: `${arcLength} ${circumference - arcLength}`,
+          ...{
+            className: "xbh8q5q x1764fhq x1g0ag68 x1owpc8m xio8zfp xgw3ha0 xtve3lm x9tu13d xdv9ggb"
+          }
+        })
+      })
+    })]
   });
   if (!hasLabel) {
     return spinner;

package/dist/Switch/useSwitchTouch.js

@@ -20,7 +20,7 @@ import { getGestureHost } from "../gestures/GestureHost.js";
 import { createPressTracker } from "../gestures/PressTracker.js";
 import { isRtlElement } from "../hooks/isRtlElement.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
-import { createAnimator } from "../motion/animator.js";
+import { createMotionAnimator } from "../motion/animator.js";
 import { solveSpring, toSpring } from "../motion/spring.js";
 import { UIKIT_GESTURES } from "../motion/uikit/gestures.js";
 import { registerSwitchTable, switchControl } from "../motion/uikit/switch.js";
@@ -203,10 +203,10 @@ export class SwitchTouchController {
       return;
     }
     registerSwitchTable();
-    this.thumb = createAnimator(elements.thumb);
+    this.thumb = createMotionAnimator(elements.thumb);
     // The layer rests clear (its class's opacity 0) while the visuals show
     // the value; from here its opacity is the animator's.
-    this.fade = createAnimator(elements.track, {
+    this.fade = createMotionAnimator(elements.track, {
       pseudoElement: '::after',
       initial: {
         opacity: 0
@@ -215,7 +215,7 @@ export class SwitchTouchController {
     this.fade.set({
       opacity: 0
     });
-    this.shadow = createAnimator(elements.thumb, {
+    this.shadow = createMotionAnimator(elements.thumb, {
       pseudoElement: '::after',
       initial: {
         opacity: 0

package/dist/Table/BaseTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAe,KAAK,YAAY,EAAkB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAIhF,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AAunBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}
+{"version":3,"file":"BaseTable.d.ts","sourceRoot":"","sources":["../../src/Table/BaseTable.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AAEH,OAAO,EAIL,KAAK,YAAY,EAEjB,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,cAAc,EAYf,MAAM,SAAS,CAAC;AAkpBjB;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC3E,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAC,KACrD,YAAY,CAAC"}