@astryxdesign/core 0.7.7-canary.fc68123 → 0.7.7

package/src/Spinner/Spinner.tsx

@@ -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 and __tests__/SpinnerMotion.a11y.chromium.spec.ts (rotor timing)
+ * - /packages/core/src/Spinner/Spinner.test.tsx
  * - /packages/core/src/Spinner/index.ts
  * - /apps/storybook/stories/Spinner.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/Spinner/ (showcase blocks)
@@ -153,57 +153,60 @@ function registerSpinnerVars(): void {
 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.
+ * 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.
  *
- * 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 the clock read and the frame the animation starts in. At 10x CPU
- * throttling that gap measured 116 degrees of drift.
+ * 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).
  *
- * 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.
+ * 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.
  */
-const pendingRotors = new Set<HTMLSpanElement>();
+const pendingRings = new Set<SVGSVGElement>();
 let flushScheduled = false;
 
-function pinRotorsToTimelineOrigin(): void {
+function pinRingsToTimelineOrigin(): void {
   flushScheduled = false;
   const animations: Animation[] = [];
-  for (const rotor of pendingRotors) {
-    animations.push(...rotor.getAnimations());
+  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}));
   }
-  pendingRotors.clear();
+  pendingRings.clear();
   for (const animation of animations) {
     animation.startTime = 0;
   }
 }
 
 /**
- * Ref callback for the rotor: the one place a mounted ring touches the DOM.
+ * Ref callback for the ring: 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: HTMLSpanElement | null,
+  svg: SVGSVGElement | null,
 ): (() => void) | undefined {
-  if (rotor == null) {
+  if (svg == null) {
     return undefined;
   }
   // jsdom implements no Web Animations, and this runs in every consumer's
   // component tests.
-  if (typeof rotor.getAnimations !== 'function') {
+  if (typeof svg.getAnimations !== 'function') {
     return undefined;
   }
-  pendingRotors.add(rotor);
+  pendingRings.add(svg);
   if (!flushScheduled) {
     flushScheduled = true;
-    requestAnimationFrame(pinRotorsToTimelineOrigin);
+    requestAnimationFrame(pinRingsToTimelineOrigin);
   }
   return () => {
-    pendingRotors.delete(rotor);
+    pendingRings.delete(svg);
   };
 }
 
@@ -212,13 +215,19 @@ function syncRotationPhase(
 // =============================================================================
 
 /**
- * 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.
+ * 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.
  */
-const rotation = stylex.keyframes({
-  '0%': {transform: 'rotate(0deg)'},
-  '100%': {transform: 'rotate(360deg)'},
+const dashMotion = stylex.keyframes({
+  '0%': {strokeDashoffset: '0px'},
+  '100%': {strokeDashoffset: `calc(var(${RESOLVED_DIAMETER}) * -${PI})`},
 });
 
 // =============================================================================
@@ -274,8 +283,6 @@ const styles = stylex.create({
   ring: {
     backfaceVisibility: 'hidden',
     display: 'block',
-    // The track and the rotor share the one grid cell, stacked and centred.
-    gridArea: '1 / 1',
     // The frame is the box, read from the same composed var the span is sized
     // from — not from the size constant, which a theme cannot reach, and not
     // from a percentage, which needs the grid area to be a definite size in
@@ -293,27 +300,6 @@ const styles = stylex.create({
     // which put the ring 1.5-3.3px off across the four sizes.
     overflow: 'visible',
   },
-  // The rotor is the frame's size, so it turns about the ring's centre.
-  rotor: {
-    display: 'block',
-    gridArea: '1 / 1',
-    width: `var(${BOX_SIZE})`,
-    height: `var(${BOX_SIZE})`,
-    // Mobile Safari keeps a re-timed animation off the main thread only on an
-    // element with its own layer. So the rotor declares one before the start
-    // time is set (see `pinRotorsToTimelineOrigin`).
-    willChange: 'transform',
-    // Reduced motion slows the turn but never stops it: a still ring reads as
-    // broken. The status role and its name still say that work is busy.
-    animationDuration: {
-      // The loop reads the duration before a theme's tempo scales it.
-      default: `var(--_astryx-pre-tempo-duration-slow-min, ${durationVars['--duration-slow-min']})`,
-      '@media (prefers-reduced-motion: reduce)': '3s',
-    },
-    animationIterationCount: 'infinite',
-    animationName: rotation,
-    animationTimingFunction: 'linear',
-  },
   circle: {
     fill: 'none',
     // The ring is centred on the box (cx/cy 50%), so the arc's start offset
@@ -350,6 +336,18 @@ const styles = stylex.create({
   // `0` the way the registered length pair guards against, so it needs no
   // registration.
   arc: {
+    // Slow the motion dramatically under reduced-motion rather than freezing
+    // it (a frozen spinner reads as broken), matching ProgressBar's approach.
+    // The role="status" + "Loading" label still convey busy state (obs-6).
+    animationDuration: {
+      // The loop reads the duration before a theme's tempo scales it
+      // (spec:AST-108 FR4).
+      default: `var(--_astryx-pre-tempo-duration-slow-min, ${durationVars['--duration-slow-min']})`,
+      '@media (prefers-reduced-motion: reduce)': '3s',
+    },
+    animationIterationCount: 'infinite',
+    animationName: dashMotion,
+    animationTimingFunction: 'linear',
     stroke: 'var(--spinner-color)',
     transform: 'rotate(-90deg)',
     strokeDasharray: `calc(var(${RESOLVED_DIAMETER}) * ${PI} * var(--spinner-arc-fraction)) calc(var(${RESOLVED_DIAMETER}) * ${PI} * (1 - var(--spinner-arc-fraction)))`,
@@ -571,12 +569,10 @@ export function Spinner({
           height: `var(${BOX_SIZE}, ${frameSize}px)`,
         },
       )}>
-      {/* The track is zero-sized by attribute. With no stylesheet, the
-          rotor's arc alone fills the box, instead of two discs side by side.
-          `ring` sizes both to the box. */}
       <svg
-        width={0}
-        height={0}
+        ref={syncRotationPhase}
+        width={frameSize}
+        height={frameSize}
         aria-hidden="true"
         {...stylex.props(styles.ring)}>
         <circle
@@ -590,28 +586,18 @@ export function Spinner({
             trackOpacityStyles[shade],
           )}
         />
+        <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}`}
+          {...stylex.props(styles.circle, styles.arc)}
+        />
       </svg>
-      <span
-        ref={syncRotationPhase}
-        aria-hidden="true"
-        {...stylex.props(styles.rotor)}>
-        <svg
-          width={frameSize}
-          height={frameSize}
-          {...stylex.props(styles.ring)}>
-          <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}`}
-            {...stylex.props(styles.circle, styles.arc)}
-          />
-        </svg>
-      </span>
     </span>
   );
 

package/src/Switch/useSwitchTouch.ts

@@ -23,7 +23,7 @@ import type {GestureTouch} from '../gestures/types';
 import {isRtlElement} from '../hooks/isRtlElement';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import {
-  createMotionAnimator,
+  createAnimator,
   type Animator,
   type MotionCurve,
 } from '../motion/animator';
@@ -282,15 +282,15 @@ export class SwitchTouchController {
       return;
     }
     registerSwitchTable();
-    this.thumb = createMotionAnimator(elements.thumb);
+    this.thumb = createAnimator(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 = createAnimator(elements.track, {
       pseudoElement: '::after',
       initial: {opacity: 0},
     });
     this.fade.set({opacity: 0});
-    this.shadow = createMotionAnimator(elements.thumb, {
+    this.shadow = createAnimator(elements.thumb, {
       pseudoElement: '::after',
       initial: {opacity: 0},
     });

package/src/Table/BaseTable.tsx

@@ -14,14 +14,7 @@
  * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
-import {
-  memo,
-  useId,
-  useRef,
-  type ReactElement,
-  type ReactNode,
-  type Ref,
-} from 'react';
+import {memo, useRef, type ReactElement, type ReactNode, type Ref} from 'react';
 import {isRenderable} from '../utils/isRenderable';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars} from '../theme/tokens.stylex';
@@ -430,7 +423,6 @@ function BaseTableInner<T extends Record<string, unknown>>({
   } satisfies TableRenderProps);
 
   // --- Plugin pipeline: header cells ---
-  const headerLabelIdBase = useId();
   const headerCells = resolvedColumns.map((col, columnIndex) => {
     const headerContent = col.header ?? col.key;
 
@@ -485,54 +477,28 @@ function BaseTableInner<T extends Record<string, unknown>>({
     const hasSlots =
       before != null || after != null || overlay != null || below != null;
 
-    const labelRow = isRenderable(after) ? (
-      <div {...stylex.props(styles.headerLabelRow)}>
-        {resolvedContent}
-        {after}
-      </div>
-    ) : (
-      resolvedContent
-    );
-
-    // The overlay is a control of its own. Keep its name and value out of the
-    // header's name.
-    const namesOwnHeader =
-      isRenderable(overlay) &&
-      mergedHtmlProps['aria-label'] == null &&
-      mergedHtmlProps['aria-labelledby'] == null;
-    const labelId = `${headerLabelIdBase}-label-${columnIndex}`;
-    const belowId = `${headerLabelIdBase}-below-${columnIndex}`;
-    const hasBelow = isRenderable(below);
-
-    const headerInner = !hasSlots ? (
-      resolvedContent
-    ) : namesOwnHeader ? (
-      <>
-        {/* Inline, so the cell's text-overflow still reaches the label. */}
-        <span id={labelId}>
-          {before}
-          {labelRow}
-        </span>
-        {overlay}
-        {hasBelow && <div id={belowId}>{below}</div>}
-      </>
-    ) : (
+    const headerInner = hasSlots ? (
       <>
         {before}
-        {labelRow}
+        {isRenderable(after) ? (
+          <div {...stylex.props(styles.headerLabelRow)}>
+            {resolvedContent}
+            {after}
+          </div>
+        ) : (
+          resolvedContent
+        )}
         {overlay}
         {below}
       </>
+    ) : (
+      resolvedContent
     );
-    const headerNameProps = namesOwnHeader
-      ? {'aria-labelledby': hasBelow ? `${labelId} ${belowId}` : labelId}
-      : {};
 
     return (
       <HeaderCellComponent
         key={col.key}
         {...mergedHtmlProps}
-        {...headerNameProps}
         {...headerTitleProp}
         contextMenuActions={cellRenderProps.contextMenuActions}
         xstyle={cellRenderProps.xstyle}>

package/src/TextInput/TextInput.tsx

@@ -35,22 +35,21 @@ import {
   typographyVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
-import {Field} from '../Field/Field';
-import {InputClearButton} from '../Field/InputClearButton';
 import {
+  Field,
+  InputClearButton,
+  type InputStatus,
   inputWrapperStyles,
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
-} from '../Field/inputStyles.stylex';
-import type {InputStatus} from '../Field/types';
-import {renderIconSlot, type IconType} from '../Icon/Icon';
+} from '../Field';
+import {renderIconSlot, type IconType} from '../Icon';
 import {isRenderable} from '../utils/isRenderable';
-import {Spinner} from '../Spinner/Spinner';
-import {useTooltip} from '../Tooltip/useTooltip';
-import {VisuallyHidden} from '../VisuallyHidden/VisuallyHidden';
-import {getInputARIA} from '../utils/inputAria';
-import {isImeKeyEvent} from '../utils/ime';
+import {Spinner} from '../Spinner';
+import {useTooltip} from '../Tooltip';
+import {VisuallyHidden} from '../VisuallyHidden';
+import {getInputARIA, isImeKeyEvent} from '../utils';
 import {
   textEntryTraitAttributes,
   type TextEntryTraitProps,
@@ -110,7 +109,7 @@ export type {
   InputStatus as TextInputStatus,
   InputStatusType as TextInputStatusType,
 } from '../Field';
-import {mergeProps} from '../utils/mergeProps';
+import {mergeProps} from '../utils';
 import {useSize} from '../SizeContext/SizeContext';
 import {useInputContainer} from '../hooks/useInputContainer';
 import {useInputStatusIcon} from '../hooks/useInputStatusIcon';

package/src/Toast/Toast.doc.mjs

@@ -89,7 +89,7 @@ export const docs = {
       name: 'renderContent',
       type: '(toast: ToastContentRenderProps) => ReactNode',
       description:
-        "Replaces the content of this toast's card with your own layout. Astryx keeps the card, its astryx-toast theme target and auto-hide behavior (inside a ToastViewport the viewport announces the toast, and while a modal hosts the viewport the card announces itself), then hands the renderer the message, endContent, resolved toast settings and a dismiss callback. The custom renderer owns every control in its layout: compose the control you want and call dismiss from it. Astryx does not inject a fallback close into custom content. Per-toast: an app shares one layout by wrapping useToast and passing it on every call, while a toast raised by library code that never passes it renders as an ordinary Astryx toast. The argument is {body, endContent, type, isAutoHide, autoHideDuration, dismiss}, where type is 'info' | 'error'.",
+        "Replaces the content of this toast's card with your own layout. Astryx keeps the card, its astryx-toast theme target, the live-region role and auto-hide behavior, then hands the renderer the message, endContent, resolved toast settings and a dismiss callback. The custom renderer owns every control in its layout: compose the control you want and call dismiss from it. Astryx does not inject a fallback close into custom content. Per-toast: an app shares one layout by wrapping useToast and passing it on every call, while a toast raised by library code that never passes it renders as an ordinary Astryx toast. The argument is {body, endContent, type, isAutoHide, autoHideDuration, dismiss}, where type is 'info' | 'error'.",
     },
   ],
   theming: {
@@ -211,7 +211,7 @@ export const docsZh = {
     collisionBehavior: '当已存在相同 uniqueID 的 toast 时的行为。',
     onHide: '当 toast 被移除时触发的回调。',
     renderContent:
-      "用你自己的布局替换该 toast 卡片内部的内容。Astryx 保留卡片本身、astryx-toast 主题目标和自动关闭行为（在 ToastViewport 中由视口播报该 toast；当模态框承载视口时由卡片自行播报），并把消息、endContent、解析后的 toast 设置和 dismiss 回调交给渲染函数。自定义渲染函数完全拥有布局中的控件：请组合所需的控件并通过它调用 dismiss。Astryx 不会向自定义内容注入后备关闭按钮。按 toast 单独设置：应用可通过封装 useToast 并在每次调用时传入来共享同一套布局；而由库代码发起、从不传入该参数的 toast 会渲染为普通的 Astryx toast。传入参数为 {body, endContent, type, isAutoHide, autoHideDuration, dismiss}，其中 type 为 'info' | 'error'。",
+      "用你自己的布局替换该 toast 卡片内部的内容。Astryx 保留卡片本身、astryx-toast 主题目标、实时区域角色和自动关闭行为，并把消息、endContent、解析后的 toast 设置和 dismiss 回调交给渲染函数。自定义渲染函数完全拥有布局中的控件：请组合所需的控件并通过它调用 dismiss。Astryx 不会向自定义内容注入后备关闭按钮。按 toast 单独设置：应用可通过封装 useToast 并在每次调用时传入来共享同一套布局；而由库代码发起、从不传入该参数的 toast 会渲染为普通的 Astryx toast。传入参数为 {body, endContent, type, isAutoHide, autoHideDuration, dismiss}，其中 type 为 'info' | 'error'。",
   },
   usage: {
     description:
@@ -328,7 +328,6 @@ export const docsDense = {
     uniqueID: 'unique id for dedup',
     collisionBehavior: 'behavior when matching uniqueID exists',
     onHide: 'callback when toast removed',
-    renderContent:
-      'custom inner layout; receives content, resolved settings + dismiss callback; no injected fallback control',
+    renderContent: 'custom inner layout; receives content, resolved settings + dismiss callback; no injected fallback control',
   },
 };

package/src/Toast/Toast.tsx

@@ -154,16 +154,6 @@ export interface ToastProps {
 
 interface ToastSurfaceProps extends ToastProps {
   gestureDirection: ToastGestureDirection;
-  /**
-   * Changes when a uniqueID overwrite updates this card in place: the new
-   * toast's auto-hide timer starts over.
-   */
-  timerKey?: string;
-  /**
-   * False when the viewport announces the toast: the card then carries no
-   * live region of its own, so an update in place is announced once.
-   */
-  isLiveRegion?: boolean;
 }
 
 /**
@@ -203,8 +193,6 @@ export function ToastSurface({
   onDismiss,
   renderContent,
   gestureDirection,
-  timerKey,
-  isLiveRegion = true,
 }: ToastSurfaceProps) {
   const t = useComponentTranslator();
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -238,28 +226,34 @@ export function ToastSurface({
     }, remainingRef.current);
   }, [isAutoHide]);
 
-  // Pointer, focus and gesture holds are tracked whatever isAutoHide is: an
-  // overwrite can turn a toast that does not auto-hide into one that does
-  // while a hold is in place. The window hold leaves with its listeners.
-  const pauseTimer = useCallback((source: PauseSource) => {
-    const sources = pauseSourcesRef.current;
-    const wasRunning = sources.size === 0;
-    sources.add(source);
-    if (!wasRunning) {
-      return;
-    }
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    if (startTimeRef.current != null) {
-      const elapsed = Date.now() - startTimeRef.current;
-      remainingRef.current = Math.max(remainingRef.current - elapsed, 1000);
-    }
-  }, []);
+  const pauseTimer = useCallback(
+    (source: PauseSource) => {
+      if (!isAutoHide) {
+        return;
+      }
+      const sources = pauseSourcesRef.current;
+      const wasRunning = sources.size === 0;
+      sources.add(source);
+      if (!wasRunning) {
+        return;
+      }
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+      if (startTimeRef.current != null) {
+        const elapsed = Date.now() - startTimeRef.current;
+        remainingRef.current = Math.max(remainingRef.current - elapsed, 1000);
+      }
+    },
+    [isAutoHide],
+  );
 
   const resumeTimer = useCallback(
     (source: PauseSource) => {
+      if (!isAutoHide) {
+        return;
+      }
       const sources = pauseSourcesRef.current;
       if (!sources.delete(source)) {
         return;
@@ -277,31 +271,20 @@ export function ToastSurface({
       }
       startTimer();
     },
-    [startTimer],
+    [isAutoHide, startTimer],
   );
 
   useEffect(() => {
     remainingRef.current = autoHideDuration;
-    // An update in place can remove the focused control, which fires no blur:
-    // a focus hold whose focus has left the card is stale.
-    const root = cardRootRef.current?.current;
-    if (
-      pauseSourcesRef.current.has('focus') &&
-      root != null &&
-      !root.contains(root.ownerDocument.activeElement)
-    ) {
-      pauseSourcesRef.current.delete('focus');
-    }
     startTimer();
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
     };
-    // startTimer's identity is stable per isAutoHide, so this runs on mount,
-    // on a genuine duration change and on an overwrite (timerKey), not on
-    // unrelated viewport renders.
-  }, [autoHideDuration, startTimer, timerKey]);
+    // startTimer's identity is stable per isAutoHide, so this runs on mount
+    // and on a genuine duration change — not on unrelated viewport renders.
+  }, [autoHideDuration, startTimer]);
 
   // Pause the auto-hide timer while the window is not focused, so a toast
   // doesn't silently expire while the user is in another window or tab.
@@ -309,7 +292,6 @@ export function ToastSurface({
     if (!isAutoHide) {
       return;
     }
-    const pauseSources = pauseSourcesRef.current;
     const pauseForWindow = () => pauseTimer('window');
     const resumeForWindow = () => resumeTimer('window');
     window.addEventListener('blur', pauseForWindow);
@@ -322,8 +304,6 @@ export function ToastSurface({
     return () => {
       window.removeEventListener('blur', pauseForWindow);
       window.removeEventListener('focus', resumeForWindow);
-      // With the listeners gone, no focus event would clear the window hold.
-      pauseSources.delete('window');
     };
   }, [isAutoHide, pauseTimer, resumeTimer]);
 
@@ -388,9 +368,9 @@ export function ToastSurface({
   return (
     <div
       ref={rootRef}
-      role={isLiveRegion ? (isError ? 'alert' : 'status') : undefined}
-      aria-live={isLiveRegion ? (isError ? 'assertive' : 'polite') : undefined}
-      aria-atomic={isLiveRegion ? 'true' : undefined}
+      role={isError ? 'alert' : 'status'}
+      aria-live={isError ? 'assertive' : 'polite'}
+      aria-atomic="true"
       onMouseEnter={pauseForPointer}
       onMouseLeave={resumeForPointer}
       onFocusCapture={pauseForFocus}