@astryxdesign/core 0.7.8 → 0.7.9-canary.0200dfe

package/dist/SideNav/SideNav.js

@@ -30,7 +30,7 @@ import { SideNavCollapseContext } from "./SideNavCollapseContext.js";
 import { SideNavCollapseButton } from "./SideNavCollapseButton.js";
 import { useSideNavRenderMode } from "./SideNavRenderContext.js";
 import { MobileNav } from "../MobileNav/MobileNav.js";
-import { useResizable } from "../Resizable/useResizable.js";
+import { isResizableRegion, useResizable } from "../Resizable/useResizable.js";
 import { ResizeHandle } from "../Resizable/ResizeHandle.js";
 import { themeProps } from "../utils/themeProps.js";
 import { SizeProvider } from "../SizeContext/SizeContext.js";
@@ -93,6 +93,33 @@ function describeCollapseConflict(collapsible, resizable) {
   return `${collapsibleKeys.map(key => `collapsible.${key}`).join(', ')} and ` + `${resizableKeys.map(key => `resizable.${key}`).join(', ')} address the ` + `same collapse state. resizable wins; the collapsible ` + `${collapsibleKeys.length === 1 ? 'value is' : 'values are'} ignored.`;
 }
 
+/**
+ * The collapse config when `resizable` is useResizable's output. The region
+ * owns the collapse state and decides whether the rail collapses. A
+ * `collapsible` prop that sets state or disagrees is ignored and named in a
+ * development warning.
+ */
+function resolveRegionCollapseConfig(collapsible, region) {
+  const fromCollapsible = typeof collapsible === 'object' ? collapsible : {};
+  const ignoredKeys = [fromCollapsible.defaultIsCollapsed !== undefined && 'defaultIsCollapsed', fromCollapsible.isCollapsed !== undefined && 'isCollapsed', fromCollapsible.onCollapsedChange !== undefined && 'onCollapsedChange'].filter(key => key !== false);
+  // The region's own `collapsible` option decides whether the rail collapses.
+  const isRegionCollapsible = region.props._collapsible ?? false;
+  const conflicts = [];
+  if (ignoredKeys.length > 0) {
+    conflicts.push(`\`collapsible\` sets ${ignoredKeys.map(key => `\`${key}\``).join(', ')}, ` + 'which the rail ignores: it follows the region.');
+  }
+  if (collapsible !== undefined && Boolean(collapsible) !== isRegionCollapsible) {
+    conflicts.push(isRegionCollapsible ? '`collapsible` is false, but the region is collapsible, so the rail still collapses.' : '`collapsible` turns collapse on, but the region is not collapsible, so the rail never collapses.');
+  }
+  return {
+    isCollapsible: isRegionCollapsible,
+    defaultIsCollapsed: region.isCollapsed,
+    isCollapsed: undefined,
+    onCollapsedChange: undefined,
+    conflict: conflicts.length === 0 ? null : "`resizable` is useResizable's output, which owns the collapse " + `state and decides whether the rail collapses. ${conflicts.join(' ')}`
+  };
+}
+
 // =============================================================================
 // Styles
 // =============================================================================
@@ -178,7 +205,7 @@ export function SideNav({
   children,
   footer,
   footerIcons,
-  collapsible = false,
+  collapsible: collapsibleProp,
   resizable = false,
   xstyle,
   className,
@@ -189,14 +216,19 @@ export function SideNav({
   ...props
 }) {
   const t = useComponentTranslator();
+  // Only a left-out `collapsible` becomes false, as before; `??` would also
+  // turn null into false.
+  const collapsible = collapsibleProp === undefined ? false : collapsibleProp;
   // Parse collapsible prop
   const collapsibleConfig = typeof collapsible === 'object' ? collapsible : {};
   const hasCollapseButton = collapsibleConfig.hasButton ?? true;
 
+  // useResizable's output: the caller's region owns the width and collapse.
+  const ownerRegion = isResizableRegion(resizable) ? resizable : null;
   // Resizable config
-  const resizableConfig = typeof resizable === 'object' ? resizable : {};
+  const resizableConfig = typeof resizable === 'object' && !isResizableRegion(resizable) ? resizable : {};
   const isResizable = !!resizable;
-  const collapseConfig = resolveCollapseConfig(collapsible, resizable);
+  const collapseConfig = ownerRegion == null ? resolveCollapseConfig(collapsible, isResizableRegion(resizable) ? false : resizable) : resolveRegionCollapseConfig(collapsibleProp, ownerRegion);
   const {
     isCollapsible,
     onCollapsedChange
@@ -236,6 +268,8 @@ export function SideNav({
 
   // useResizable is the sole collapse owner in every SideNav mode. Keeping that
   // owner mounted when resize is toggled preserves the current collapse state.
+  // Given the hook's output, the caller's region is the owner, and this one
+  // stays idle.
   const resizableHook = useResizable({
     defaultSize: resizableConfig.defaultWidth ?? 260,
     minSize: resizableConfig.minWidth ?? 180,
@@ -248,7 +282,8 @@ export function SideNav({
     onSizeChange: resizableConfig.onWidthChange,
     onCollapseChange: onCollapsedChange
   });
-  const collapsed = resizableHook.isCollapsed;
+  const region = ownerRegion ?? resizableHook;
+  const collapsed = region.isCollapsed;
 
   // A collapse or expand plays the rail's motion, except an app's change
   // before the rail's first paint. It is measured in the commit before the
@@ -404,11 +439,11 @@ export function SideNav({
       isCollapsed: next
     };
     if (next) {
-      resizableHook.collapse();
+      region.collapse();
     } else {
-      resizableHook.expand();
+      region.expand();
     }
-  }, [collapsed, resizableHook]);
+  }, [collapsed, region]);
   const showResizeHandle = isResizable && !collapsed;
   collapseStateRef.current = {
     isCollapsed: collapsed,
@@ -515,7 +550,7 @@ export function SideNav({
   // When resizable, override the nav width via inline style
   const resizableNavStyle = isResizable ? {
     ...(style ?? {}),
-    width: collapsed ? undefined : resizableHook.size
+    width: collapsed ? undefined : region.size
   } : style;
   const navElement = /*#__PURE__*/_jsxs("nav", {
     ref: mergedNavRef,
@@ -613,7 +648,7 @@ export function SideNav({
       pillPlacement: "end",
       isAlwaysVisible: false,
       xstyle: styles.resizableHandle,
-      resizable: resizableHook.props,
+      resizable: ownerRegion ?? resizableHook.props,
       label: t('@astryx.sideNav.resizeSidebar'),
       "aria-controls": navId
     })]

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 { createMotionAnimator } from "../motion/animator.js";
+import { createMotionEngine } 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 = createMotionAnimator(element);
+      animator = createMotionEngine(element);
       this.animators.set(element, animator);
     }
     return animator;

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;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"}
+{"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;AA8B5C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;CAKV,CAAC;AA2SF,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

@@ -18,12 +18,13 @@
 import { useId } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, durationVars, spacingVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
 import { Text } from "../Text/Text.js";
 import { mergeProps } from "../utils/mergeProps.js";
 import { themeProps } from "../utils/themeProps.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Spinner/Spinner.generated.js";
+import { spinnerRotorStyles, syncRotationPhase } from "./spinnerRotor.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 registerEnglishFallback(english);
 
@@ -32,13 +33,13 @@ registerEnglishFallback(english);
 // =============================================================================
 
 /**
- * Default fraction of the ring the moving arc covers. The canvas ring this
- * replaces swept 135deg, not the 270deg its constant's comment claimed.
+ * The fraction of the ring the arc covers: SPINNER_ARC_FRACTION. StyleX reads
+ * only a literal in this file, and a test pins the two together.
  *
  * Themeable via `--spinner-arc-fraction`, declared alongside the other public
  * vars in `sizeStyles` below. Only the inline `strokeDasharray` attribute
- * (the pre-stylesheet render — see its own comment) still reads this
- * constant directly; the CSS side composes the dash from the live var.
+ * (the pre-stylesheet render) still reads the constant directly; the CSS side
+ * composes the dash from the live var.
  */
 const ARC_FRACTION = 0.375;
 const PI = 3.141592653589793;
@@ -155,69 +156,6 @@ function registerSpinnerVars() {
 // elide.
 registerSpinnerVars();
 
-/**
- * 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
- * negative `animation-delay` computed at mount is only as good as the gap
- * between the clock read and the frame the animation starts in. At 10x CPU
- * throttling that gap measured 116 degrees of drift.
- *
- * 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 pendingRotors = new Set();
-let flushScheduled = false;
-function pinRotorsToTimelineOrigin() {
-  flushScheduled = false;
-  const animations = [];
-  for (const rotor of pendingRotors) {
-    animations.push(...rotor.getAnimations());
-  }
-  pendingRotors.clear();
-  for (const animation of animations) {
-    animation.startTime = 0;
-  }
-}
-
-/**
- * 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(rotor) {
-  if (rotor == null) {
-    return undefined;
-  }
-  // jsdom implements no Web Animations, and this runs in every consumer's
-  // component tests.
-  if (typeof rotor.getAnimations !== 'function') {
-    return undefined;
-  }
-  pendingRotors.add(rotor);
-  if (!flushScheduled) {
-    flushScheduled = true;
-    requestAnimationFrame(pinRotorsToTimelineOrigin);
-  }
-  return () => {
-    pendingRotors.delete(rotor);
-  };
-}
-
-// =============================================================================
-// Animation
-// =============================================================================
-
-/**
- * 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 rotation = "xqng64z-B";
-
 // =============================================================================
 // Styles
 // =============================================================================
@@ -240,6 +178,13 @@ const styles = {
     kmuXW: "x2lah0s",
     $$css: true
   },
+  rotor: {
+    k1xSpc: "x1lliihq",
+    kJuA4N: "x15r89dc",
+    kzqmXN: "x6v0vjy",
+    kZKoxP: "x7yyq19",
+    $$css: true
+  },
   circle: {
     kDwRjp: "xbh8q5q",
     kR8GR0: "x1764fhq",
@@ -447,9 +392,7 @@ export function Spinner({
     }), /*#__PURE__*/_jsx("span", {
       ref: syncRotationPhase,
       "aria-hidden": "true",
-      ...{
-        className: "x1lliihq x15r89dc x6v0vjy x7yyq19 x1so62im x1qcljrn xnh0sag xa4qsjk x1ka1v4i x1esw782"
-      },
+      ...stylex.props(styles.rotor, spinnerRotorStyles.turn),
       children: /*#__PURE__*/_jsx("svg", {
         width: frameSize,
         height: frameSize,

package/dist/Spinner/index.d.ts

@@ -7,5 +7,5 @@
  * SYNC: When modified, update this header and /packages/core/src/Spinner/Spinner.doc.mjs
  */
 export { Spinner } from './Spinner.js';
-export type { SpinnerProps, SpinnerSize, SpinnerShade, } from './Spinner.js';
+export type { SpinnerProps, SpinnerSize, SpinnerShade } from './Spinner.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Spinner/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EACV,YAAY,EACZ,WAAW,EACX,YAAY,GACb,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Spinner/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAC,MAAM,WAAW,CAAC"}

package/dist/Spinner/spinnerRotor.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @file spinnerRotor.ts
+ * @input StyleX keyframes and the slow-min duration token
+ * @output The one turning arc: SPINNER_ARC_FRACTION, spinnerRotorStyles.turn
+ *   and syncRotationPhase
+ * @position Spinner's rotor, shared by Spinner and Lab's indeterminate
+ *   CircularProgress (through `@astryxdesign/core/internal/spinner-rotor`), so
+ *   both rings turn the same way on the compositor.
+ */
+import * as stylex from '@stylexjs/stylex';
+/** The fraction of the ring the arc covers: 135°. */
+export declare const SPINNER_ARC_FRACTION = 0.375;
+export declare const spinnerRotorStyles: Readonly<{
+    readonly turn: Readonly<{
+        readonly willChange: stylex.StyleXClassNameFor<"willChange", "transform">;
+        readonly animationDuration: stylex.StyleXClassNameFor<"animationDuration", `calc(var(--_astryx-pre-tempo-duration-slow-min, ${stylex.StyleXVar<"730ms">}) * 100)` | "calc(3s * 100)">;
+        readonly animationIterationCount: stylex.StyleXClassNameFor<"animationIterationCount", "infinite">;
+        readonly animationName: stylex.StyleXClassNameFor<"animationName", string>;
+        readonly animationTimingFunction: stylex.StyleXClassNameFor<"animationTimingFunction", "linear">;
+    }>;
+}>;
+/**
+ * Ref callback for a rotor: the one place a mounted ring touches the DOM.
+ *
+ * It reads nothing back — the geometry is resolved by the cascade, not in JS.
+ */
+export declare function syncRotationPhase(rotor: Element | null): (() => void) | undefined;
+//# sourceMappingURL=spinnerRotor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinnerRotor.d.ts","sourceRoot":"","sources":["../../src/Spinner/spinnerRotor.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAG3C,qDAAqD;AACrD,eAAO,MAAM,oBAAoB,QAAQ,CAAC;AAsB1C,eAAO,MAAM,kBAAkB;;;;;;;;EAiB7B,CAAC;AA+BH;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,OAAO,GAAG,IAAI,GACpB,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAiB1B"}

package/dist/Spinner/spinnerRotor.js

@@ -0,0 +1,98 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file spinnerRotor.ts
+ * @input StyleX keyframes and the slow-min duration token
+ * @output The one turning arc: SPINNER_ARC_FRACTION, spinnerRotorStyles.turn
+ *   and syncRotationPhase
+ * @position Spinner's rotor, shared by Spinner and Lab's indeterminate
+ *   CircularProgress (through `@astryxdesign/core/internal/spinner-rotor`), so
+ *   both rings turn the same way on the compositor.
+ */
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { durationVars } from "../theme/tokens.stylex.js";
+
+/** The fraction of the ring the arc covers: 135°. */
+export const SPINNER_ARC_FRACTION = 0.375;
+
+/**
+ * Full turns in one iteration of the rotation.
+ *
+ * Chromium wakes the main thread at each iteration boundary while the
+ * document listens for `animationiteration`. React listens for it on every
+ * root. One iteration holds 100 turns, so the wake comes once in 100 turns.
+ * Each turn is 360 degrees, so the ring looks the same.
+ */
+const TURNS_PER_ITERATION = 100;
+
+/**
+ * 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 rotation = "x11cqc53-B";
+export const spinnerRotorStyles = {
+  turn: {
+    k6sLGO: "x1so62im",
+    k44tkh: "xidn0ey x14hxw50",
+    ko0y90: "xa4qsjk",
+    kKVMdj: "x129v4ae",
+    kyAemX: "x1esw782",
+    $$css: true
+  }
+};
+
+/**
+ * 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
+ * negative `animation-delay` computed at mount is only as good as the gap
+ * between the clock read and the frame the animation starts in. At 10x CPU
+ * throttling that gap measured 116 degrees of drift.
+ *
+ * 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 pendingRotors = new Set();
+let flushScheduled = false;
+function pinRotorsToTimelineOrigin() {
+  flushScheduled = false;
+  const animations = [];
+  for (const rotor of pendingRotors) {
+    animations.push(...rotor.getAnimations());
+  }
+  pendingRotors.clear();
+  for (const animation of animations) {
+    animation.startTime = 0;
+  }
+}
+
+/**
+ * Ref callback for a rotor: the one place a mounted ring touches the DOM.
+ *
+ * It reads nothing back — the geometry is resolved by the cascade, not in JS.
+ */
+export function syncRotationPhase(rotor) {
+  if (rotor == null) {
+    return undefined;
+  }
+  // jsdom implements no Web Animations, and this runs in every consumer's
+  // component tests.
+  if (typeof rotor.getAnimations !== 'function') {
+    return undefined;
+  }
+  pendingRotors.add(rotor);
+  if (!flushScheduled) {
+    flushScheduled = true;
+    requestAnimationFrame(pinRotorsToTimelineOrigin);
+  }
+  return () => {
+    pendingRotors.delete(rotor);
+  };
+}

package/dist/Stack/StackItem.d.ts

@@ -1,8 +1,10 @@
 /**
  * @file StackItem.tsx
- * @input Uses React, ElementType, stackItem utility
+ * @input Uses React, ElementType, stackItem utility, StackItemScrollRegion
  * @output Exports StackItem polymorphic component and StackItemProps
- * @position Layout/Stack component; uses stackItem.stylex.ts
+ * @position Layout/Stack component; uses stackItem.stylex.ts. A scrollable
+ *   `div` or `span` item renders through StackItemScrollRegion, which names
+ *   it while it scrolls.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Stack/Stack.doc.mjs
@@ -34,7 +36,9 @@ export interface StackItemProps extends BaseProps<HTMLElement> {
      * reset, so `<StackItem size="fill" isScrollable>` is a complete scroll
      * region — it grows to fill the stack and scrolls its own overflow with
      * no extra style plumbing. Matches `isScrollable` on `LayoutContent`
-     * and `LayoutPanel`.
+     * and `LayoutPanel`. While its content overflows, a `div` or `span` item
+     * is a group named by the caller's `aria-label`, or by a translated
+     * "Content". Another element keeps its own role.
      * @default false
      */
     isScrollable?: boolean;
@@ -62,7 +66,7 @@ export interface StackItemProps extends BaseProps<HTMLElement> {
  * </HStack>
  * ```
  */
-export declare function StackItem({ crossAlignSelf, size, isScrollable, as: element, xstyle, className, style, children, ref, ...props }: StackItemProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare function StackItem({ crossAlignSelf, size, isScrollable, as: element, xstyle, className, style, children, ref, ...props }: StackItemProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").FunctionComponentElement<import("../hooks/StackItemScrollRegion.js").StackItemScrollRegionProps>;
 export declare namespace StackItem {
     var displayName: string;
 }

package/dist/Stack/StackItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../src/Stack/StackItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAU5B,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,uBAAuB,CAAC;IAEzC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,EAAE,EAAE,OAAe,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,0FAqBhB;yBAhCe,SAAS"}
+{"version":3,"file":"StackItem.d.ts","sourceRoot":"","sources":["../../src/Stack/StackItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAW5B,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,uBAAuB,CAAC;IAEzC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,EAAE,EAAE,OAAe,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,0MA8BhB;yBAzCe,SAAS"}

package/dist/Stack/StackItem.js

@@ -2,9 +2,11 @@
 
 /**
  * @file StackItem.tsx
- * @input Uses React, ElementType, stackItem utility
+ * @input Uses React, ElementType, stackItem utility, StackItemScrollRegion
  * @output Exports StackItem polymorphic component and StackItemProps
- * @position Layout/Stack component; uses stackItem.stylex.ts
+ * @position Layout/Stack component; uses stackItem.stylex.ts. A scrollable
+ *   `div` or `span` item renders through StackItemScrollRegion, which names
+ *   it while it scrolls.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Stack/Stack.doc.mjs
@@ -16,6 +18,7 @@ import * as stylex from '@stylexjs/stylex';
 import { stackItem } from "./stackItem.stylex.js";
 import { mergeProps } from "../utils/mergeProps.js";
 import { themeProps } from "../utils/themeProps.js";
+import { StackItemScrollRegion } from "../hooks/StackItemScrollRegion.js";
 const overflowStyles = {
   scrollable: {
     kVQacm: "xysyzu8",
@@ -52,12 +55,22 @@ export function StackItem({
     crossAlignSelf,
     size
   }), isScrollable && overflowStyles.scrollable, xstyle);
-  return /*#__PURE__*/createElement(element, {
-    ref: ref,
+  const elementProps = {
     ...mergeProps(themeProps('stack-item', {
       size
     }), stylexProps, className, style),
     ...props
+  };
+  if (isScrollable && (element === 'div' || element === 'span')) {
+    return /*#__PURE__*/createElement(StackItemScrollRegion, {
+      as: element,
+      ref,
+      elementProps
+    }, children);
+  }
+  return /*#__PURE__*/createElement(element, {
+    ref: ref,
+    ...elementProps
   }, children);
 }
 StackItem.displayName = 'StackItem';

package/dist/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":"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"}

package/dist/Switch/Switch.js

@@ -33,8 +33,10 @@ import { usePressFeedback } from "../hooks/usePressFeedback.js";
 import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
 import english from "../i18n/generated-english/Switch/Switch.generated.js";
 registerEnglishFallback(english);
+import "../motion/reducedMotion.stylex.js";
+import { reducedMotionFadeConsts } from "../motion/reducedMotion.stylex.js";
 import "../utils/interactionOverlay.stylex.js";
-import { interactionOverlayStyles, pressConsts, pressVars } from "../utils/interactionOverlay.stylex.js";
+import { interactionOverlayStyles, pressVars } from "../utils/interactionOverlay.stylex.js";
 import { pressHoldsDragProps } from "../privateAttributes/pressHoldsDrag.stylex.js";
 import { useSwitchTouch } from "./useSwitchTouch.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
@@ -65,14 +67,15 @@ const PRESS_FADING = '[data-astryx-press="fading"]';
 
 /**
  * The shared press release, for the press layers the switch fades on the
- * compositor. The clock scales by the theme's tempo, and the curve is the
- * controller's own. Switch.test.tsx compares the two.
+ * compositor: the theme's exit motion tokens, no longer than the Reduce
+ * Motion fade under Reduce Motion. Switch.test.tsx compares them with
+ * the overlay's.
  * SYNC: utils/interactionOverlay.stylex.ts PRESS_RELEASE_DURATION,
  * PRESS_RELEASE_DURATION_REDUCED and RELEASE_EASE.
  */
-const PRESS_RELEASE_DURATION = `calc(${pressConsts.releaseMs}ms * min(var(--_astryx-motion-tempo, 1), 1.5))`;
-const PRESS_RELEASE_DURATION_REDUCED = `min(${pressConsts.releaseMs}ms, calc(${pressConsts.releaseMs}ms * var(--_astryx-motion-tempo, 1)))`;
-const PRESS_RELEASE_EASE = 'cubic-bezier(0, 0, 0.2, 1)';
+const PRESS_RELEASE_DURATION = durationVars['--duration-exit'];
+const PRESS_RELEASE_DURATION_REDUCED = `min(${durationVars['--duration-exit']}, ${reducedMotionFadeConsts.duration})`;
+const PRESS_RELEASE_EASE = easeVars['--ease-exit'];
 
 // The measured hit insets (utils/hitArea), 0 until measured.
 const HIT_TOP = 'var(--astryx-hit-inset-top, 0px)';
@@ -262,8 +265,8 @@ const styles = {
     kLkRvE: "x1my3e5g",
     k5QlbN: "x2huugr x1ccaw7f",
     k7EzDT: "xxhzo2e",
-    kQZAMR: "xvym4rz xigdn9b",
-    kZiNAr: "xgq6fxe",
+    kQZAMR: "xs8z9ty x1e7l4zx",
+    kZiNAr: "x15baseh",
     k8Tatv: "xq2jpp1",
     k5JduY: "x1s928wv",
     kc3QkE: "x1h1zc6f x1ep27e9",
@@ -320,8 +323,8 @@ const styles = {
     kLkRvE: "x1my3e5g",
     k5QlbN: "x2huugr x1ccaw7f",
     k7EzDT: "xxhzo2e",
-    kQZAMR: "xvym4rz xigdn9b",
-    kZiNAr: "xgq6fxe",
+    kQZAMR: "xs8z9ty x1e7l4zx",
+    kZiNAr: "x15baseh",
     k8Tatv: "xq2jpp1",
     k5JduY: "x1s928wv",
     kc3QkE: "x1h1zc6f x1ep27e9",

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 { createMotionAnimator } from "../motion/animator.js";
+import { createMotionEngine } 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 = createMotionAnimator(elements.thumb);
+    this.thumb = createMotionEngine(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 = createMotionAnimator(elements.track, {
+    this.fade = createMotionEngine(elements.track, {
       pseudoElement: '::after',
       initial: {
         opacity: 0
@@ -215,7 +215,7 @@ export class SwitchTouchController {
     this.fade.set({
       opacity: 0
     });
-    this.shadow = createMotionAnimator(elements.thumb, {
+    this.shadow = createMotionEngine(elements.thumb, {
       pseudoElement: '::after',
       initial: {
         opacity: 0

package/dist/TabList/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAQrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,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;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AA2KD;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,SAAS,EACb,EAAE,QAAQ,qBAoLV;yBApMe,GAAG"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../src/TabList/Tab.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AASrD,MAAM,WAAW,QAAS,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC5D;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB,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;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AA2KD;;;;;;;;;;;GAWG;AACH,wBAAgB,GAAG,CAAC,EAClB,EAAE,EACF,GAAG,EACH,KAAK,EACL,KAAK,EACL,aAAqB,EACrB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,SAAS,EACb,EAAE,QAAQ,qBAuLV;yBAvMe,GAAG"}

package/dist/TabList/Tab.js

@@ -28,6 +28,7 @@ import { usePressFeedback } from "../hooks/usePressFeedback.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps } from "../utils/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
+import { withholdCallerHandlers } from "../utils/disabledInteraction.js";
 import { EDGE_COMP_ATTR } from "../Layout/edgeCompensation.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
@@ -216,7 +217,10 @@ export function Tab({
     children: displayIcon
   }) : null;
   const sharedProps = {
-    ...restProps,
+    // A disabled tab keeps its tab stop, so the browser still sends it events.
+    // It runs no caller handler other than `onFocus` and `onBlur`, as a natively
+    // disabled control runs none. `onClick` is guarded in `handleSelect`.
+    ...withholdCallerHandlers(restProps, isDisabled),
     ...pressable,
     ...(isLabelHidden ? {
       'aria-label': label

package/dist/Table/plugins/sortable/useTableSortable.js

@@ -223,7 +223,7 @@ function SortHeaderButton({
         })
       }), rank != null && /*#__PURE__*/_jsx("span", {
         ...{
-          className: "x1k6wstc xo5v014 xqwr325"
+          className: "x1k6wstc xo5v014 xjse4m1"
         },
         "aria-hidden": "true",
         children: rank