@astryxdesign/core 0.7.8 → 0.7.9-canary.07992bb

package/src/PowerSearch/PowerSearchToken.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {Token} from '../Token';
 import {useLocale} from '../i18n/useLocale';
+import {useCalendarSystem} from '../i18n/useCalendarSystem';
 import {fontWeightVars} from '../theme/tokens.stylex';
 import {formatFilterValue} from './formatFilterValue';
 import {resolveOperatorLabel} from './resolveOperatorLabel';
@@ -47,6 +48,7 @@ export function PowerSearchToken({
   const config = useInternalConfig(configProp);
   const t = useComponentTranslator();
   const locale = useLocale();
+  const calendar = useCalendarSystem(undefined, 'PowerSearchToken');
 
   const fieldLabel = field.label;
   const resolvedOperatorLabel = resolveOperatorLabel(operator, t);
@@ -68,6 +70,7 @@ export function PowerSearchToken({
     t,
     locale,
     timezoneID,
+    calendar,
   );
 
   const valueContent = valueStr ? (

package/src/PowerSearch/formatFilterValue.ts

@@ -2,7 +2,7 @@
 
 /**
  * @file formatFilterValue.ts
- * @input OperatorValue, FilterValue, config
+ * @input OperatorValue, FilterValue, config, locale, time zone, calendar
  * @output Formatted display string for a filter value
  * @position Pure utility; consumed by PowerSearch token rendering
  *
@@ -13,6 +13,10 @@
 import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {InternalConfig} from './useInternalConfig';
 import type {Locale, TranslatorFn} from '../i18n';
+import {
+  formatCalendarInstant,
+  type CalendarSystem,
+} from '../utils/calendarSystem';
 import {truncateCharacters} from '../utils/characters';
 import {registerEnglishFallback} from '../i18n/englishFallback';
 import english from '../i18n/generated-english/PowerSearch/formatFilterValue.generated';
@@ -67,25 +71,24 @@ export function formatDateAbsolute(
   locale: Locale,
   timezoneID: string | undefined,
   isDateOnly = true,
+  calendar: CalendarSystem = 'gregory',
 ): string {
   const options: Intl.DateTimeFormatOptions = isDateOnly
-    ? {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        timeZone: resolveDateZone(timezoneID, true),
-        calendar: 'gregory',
-      }
+    ? {year: 'numeric', month: 'short', day: 'numeric'}
     : {
         year: 'numeric',
         month: 'short',
         day: 'numeric',
         hour: 'numeric',
         minute: '2-digit',
-        timeZone: resolveDateZone(timezoneID, false),
-        calendar: 'gregory',
       };
-  return new Intl.DateTimeFormat(locale, options).format(unixSeconds * 1000);
+  return formatCalendarInstant(
+    calendar,
+    new Date(unixSeconds * 1000),
+    options,
+    locale,
+    resolveDateZone(timezoneID, isDateOnly),
+  );
 }
 
 function formatRelativeDate(value: string): string {
@@ -100,6 +103,11 @@ function formatDateRange(
   return t('@astryx.powersearch.valueEditor.dateRange');
 }
 
+/**
+ * The display text of a filter value. A `date_absolute` value is written in
+ * `calendar`, which defaults to Gregorian; PowerSearch passes the calendar that
+ * its provider resolves.
+ */
 export function formatFilterValue(
   _config: InternalConfig,
   operatorValue: OperatorValue,
@@ -108,6 +116,7 @@ export function formatFilterValue(
   t: TranslatorFn,
   locale: Locale,
   timezoneID?: string,
+  calendar: CalendarSystem = 'gregory',
 ): string {
   switch (filterValue.type) {
     case 'empty':
@@ -210,6 +219,7 @@ export function formatFilterValue(
           timezoneID,
           operatorValue.type !== 'date_absolute' ||
             operatorValue.isDateOnly !== false,
+          calendar,
         ),
         maxLength,
       );

package/src/PowerSearch/formatTokenValue.ts

@@ -3,7 +3,8 @@
 /**
  * @fileoverview The text a PowerSearch filter token shows for a value.
  *
- * @input `OperatorValue`, `FilterValue`, a width budget, and the locale.
+ * @input `OperatorValue`, `FilterValue`, a width budget, the locale, and the
+ * calendar.
  * @output `formatTokenValueText` — one string, or null for an empty value.
  * @position Shared by the token itself (`PowerSearch.tsx`) and the sheet
  * presentation's Filters rows and removal announcement
@@ -13,6 +14,7 @@
 
 import type {OperatorValue, FilterValue, EnumItem} from './types';
 import type {Locale, TranslatorFn} from '../i18n';
+import type {CalendarSystem} from '../utils/calendarSystem';
 import {truncateCharacters} from '../utils/characters';
 import {formatDateAbsolute, formatSharedNumber} from './formatFilterValue';
 import {registerEnglishFallback} from '../i18n/englishFallback';
@@ -103,6 +105,8 @@ function formatListText(
  * the sheet presentation's Filters rows and its removal announcement — can
  * use the same words and the same zone handling. `maxLength` is the token's
  * width budget; pass `Number.MAX_SAFE_INTEGER` for the untruncated text.
+ * A `date_absolute` value is written in `calendar`, the calendar that the
+ * provider resolves.
  * With `t`, the list, date-range and nested summaries resolve through the
  * catalog (`@astryx.powersearch.valueEditor.*`); without it they are the
  * token's own literals. With `formatList` (the provider's list formatter),
@@ -114,6 +118,7 @@ export function formatTokenValueText(
   filterValue: FilterValue,
   maxLength: number,
   locale: Locale,
+  calendar: CalendarSystem,
   t?: TranslatorFn,
   formatList?: ListFormatFn,
   timezoneID?: string,
@@ -182,6 +187,7 @@ export function formatTokenValueText(
           timezoneID,
           operatorValue.type !== 'date_absolute' ||
             operatorValue.isDateOnly !== false,
+          calendar,
         ),
         maxLength,
       );

package/src/RadioList/RadioListItem.doc.mjs

@@ -8,7 +8,7 @@ export const docs = {
   displayName: 'Radio List Item',
   isHiddenFromOverview: true,
   description:
-    'Individual radio item with label, description, and content slots.',
+    'Individual radio item with label, description, and content slots. Under a coarse pointer an enabled option’s target grows toward 44 px through an invisible hit area. It never shrinks below the row and stops at half the gap to a closer neighbour; the row keeps its size. That hit area is the row’s `::after`, so decorate a row with a child.',
   // RadioListItem requires RadioList context; wrap it so the preview doesn't throw.
   playground: {
     defaults: {value: 'option-1', label: 'Option'},
@@ -97,7 +97,8 @@ export const docsZh = {
   name: 'RadioListItem',
   isHiddenFromOverview: true,
   displayName: 'Radio List Item',
-  description: '单个单选选项，包含标签、描述和内容插槽。',
+  description:
+    '单个单选选项，包含标签、描述和内容插槽。在粗指针（触摸）下，已启用选项的目标通过不可见的点击区域向 44 px 扩展。它不小于所在行，与相邻控件较近时止于间距的一半；行尺寸不变。该点击区域是行的 `::after`，因此请用子元素装饰行。',
   props: [
     {
       name: 'label',

package/src/RadioList/RadioListItem.tsx

@@ -18,7 +18,7 @@
  * - /packages/cli/assets/templates/blocks/components/RadioList/ (showcase blocks)
  */
 
-import React, {use, useId, useRef, type ReactNode} from 'react';
+import React, {use, useCallback, useId, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
@@ -32,9 +32,13 @@ import {rtlStyles} from '../utils/rtlStyles';
 import {indicatorScope} from '../Indicator/indicator.markers.stylex';
 import {useIndicatorFocusRing} from '../hooks/useIndicatorFocusRing';
 import {usePressFeedback} from '../hooks/usePressFeedback';
+import {useMergedRefs} from '../hooks/useMergedRefs';
+import {watchHitArea, writeHitInsets} from '../utils/hitArea';
+import {touchHitAreaStyles} from '../utils/touchHitArea.stylex';
 import {useIndicator} from '../Indicator/useIndicator';
 import {Item, type ItemAlign} from '../Item/Item';
 import {themeProps} from '../utils/themeProps';
+import {rowPressLayerStyles} from '../privateAttributes/press.stylex';
 
 // The touch press's paint, declared by the shared overlay styles on the
 // element the controller writes to (`pressedAlpha`) at the press's strength,
@@ -147,11 +151,6 @@ const rowStyles = stylex.create({
     // Suppress Item's interactive hover/press background so the resting and
     // hovered row look identical by default (a theme can restyle either).
     backgroundColor: 'transparent',
-    // ...and the touch press's overlay image, for the same reason: under a
-    // finger only the radio circle paints, as under a mouse. The press's
-    // strength still lands on the row, which is where the layer over the
-    // circle reads it.
-    backgroundImage: 'none',
   },
   // The mouse press (a finger's lives on `data-astryx-press`): the row is
   // pressed, but not through a nested link or button, which keep their own
@@ -309,6 +308,21 @@ export function RadioListItem({
   // `<label htmlFor>` would double-fire under delegation.
   const radioRef = useRef<HTMLInputElement>(null);
 
+  // Under a coarse pointer an option's row grows toward 44 px through an
+  // invisible band, and the row keeps its size. A tap on the band lands on
+  // the row, which hands it to the radio. The watch lives as long as the row
+  // is attached: the ref's cleanup stops it.
+  const watchRowHitArea = useCallback(
+    (row: HTMLDivElement | null) => {
+      if (row == null || isDisabled) {
+        return;
+      }
+      return watchHitArea(row, insets => writeHitInsets(row, insets));
+    },
+    [isDisabled],
+  );
+  const mergedRowRef = useMergedRefs(ref, watchRowHitArea);
+
   const radioCircle = (
     <div
       {...stylex.props(
@@ -391,7 +405,7 @@ export function RadioListItem({
 
   return (
     <Item
-      ref={ref}
+      ref={mergedRowRef}
       {...(isDisabled ? undefined : pressable)}
       startContent={mediaContent}
       // Delegate row-surface clicks (label text, description, and the empty
@@ -414,12 +428,16 @@ export function RadioListItem({
           // the painting row element (Item), the same element that carries the
           // theme target, so a theme's hover styling stays in step with the tint.
           !isDisabled && indicatorScope,
+          // The row keeps no press paint of its own: the circle paints, and
+          // reads the strength whose release the row keeps.
+          rowPressLayerStyles.cellWithoutLayer,
           // Restore the bare default look: zero Item's padding/radius and its
           // interactive hover/press background. Applied after Item's own base
           // styles so it wins within the base layer; a `radio-list-item` theme
           // still overrides it from the higher `astryx-theme` layer.
           rowStyles.root,
           !isDisabled && rowStyles.press,
+          !isDisabled && touchHitAreaStyles.layer,
           xstyle,
         ] as StyleXStyles
       }

package/src/SelectableCard/SelectableCard.tsx

@@ -44,6 +44,7 @@ import type {StyleXStyles} from '@stylexjs/stylex';
 import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 import type {Elevation, SizeValue, SpacingStep} from '../utils/types';
 import {isImeKeyEvent, mergeProps} from '../utils';
+import {chainEventHandlers} from '../utils/chainEventHandlers';
 import {Card} from '../Card/Card';
 import type {CardVariant} from '../Card/Card';
 import {useClickableContainer} from '../hooks/useClickableContainer';
@@ -398,6 +399,7 @@ export function SelectableCard({
   onChange,
   onClick: onClickProp,
   onMouseUp: onMouseUpProp,
+  onPointerDown: onPointerDownProp,
   isDisabled = false,
   children,
   padding,
@@ -458,7 +460,7 @@ export function SelectableCard({
     [isDisabled, requestChange],
   );
 
-  const {onClick, onMouseUp} = useClickableContainer({
+  const {onClick, onMouseUp, onPointerDown} = useClickableContainer({
     containerRef,
     interactiveRef,
     onClick: handleClick,
@@ -530,6 +532,11 @@ export function SelectableCard({
       }
       onClick={!isDisabled ? composedOnClick : undefined}
       onMouseUp={!isDisabled ? composedOnMouseUp : undefined}
+      onPointerDown={
+        !isDisabled
+          ? chainEventHandlers(onPointerDown, onPointerDownProp)
+          : onPointerDownProp
+      }
       {...props}
       onClickCapture={
         !isDisabled && handleLayerClickCapture

package/src/Spinner/Spinner.tsx

@@ -18,7 +18,7 @@
 
 import {useId, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {colorVars, durationVars, spacingVars} from '../theme/tokens.stylex';
+import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {Text} from '../Text/Text';
 import {mergeProps} from '../utils/mergeProps';
@@ -28,6 +28,7 @@ import {
   useComponentTranslator,
 } from '../i18n/useComponentTranslator';
 import english from '../i18n/generated-english/Spinner/Spinner.generated';
+import {spinnerRotorStyles, syncRotationPhase} from './spinnerRotor';
 
 registerEnglishFallback(english);
 
@@ -36,13 +37,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;
 
@@ -152,75 +153,6 @@ function registerSpinnerVars(): void {
 // 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<HTMLSpanElement>();
-let flushScheduled = false;
-
-function pinRotorsToTimelineOrigin(): void {
-  flushScheduled = false;
-  const animations: Animation[] = [];
-  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: HTMLSpanElement | null,
-): (() => void) | undefined {
-  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 = stylex.keyframes({
-  '0%': {transform: 'rotate(0deg)'},
-  '100%': {transform: 'rotate(360deg)'},
-});
-
 // =============================================================================
 // Styles
 // =============================================================================
@@ -299,20 +231,6 @@ const styles = stylex.create({
     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',
@@ -594,7 +512,7 @@ export function Spinner({
       <span
         ref={syncRotationPhase}
         aria-hidden="true"
-        {...stylex.props(styles.rotor)}>
+        {...stylex.props(styles.rotor, spinnerRotorStyles.turn)}>
         <svg
           width={frameSize}
           height={frameSize}

package/src/Spinner/index.ts

@@ -12,8 +12,4 @@
  */
 
 export {Spinner} from './Spinner';
-export type {
-  SpinnerProps,
-  SpinnerSize,
-  SpinnerShade,
-} from './Spinner';
+export type {SpinnerProps, SpinnerSize, SpinnerShade} from './Spinner';

package/src/Spinner/spinnerRotor.ts

@@ -0,0 +1,113 @@
+// 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 {durationVars} from '../theme/tokens.stylex';
+
+/** 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 = stylex.keyframes({
+  '0%': {transform: 'rotate(0deg)'},
+  '100%': {transform: `rotate(${360 * TURNS_PER_ITERATION}deg)`},
+});
+
+export const spinnerRotorStyles = stylex.create({
+  turn: {
+    // 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 ring's role and name still say that work is busy.
+    animationDuration: {
+      // The loop reads the duration before a theme's tempo scales it.
+      default: `calc(var(--_astryx-pre-tempo-duration-slow-min, ${durationVars['--duration-slow-min']}) * ${TURNS_PER_ITERATION})`,
+      '@media (prefers-reduced-motion: reduce)': `calc(3s * ${TURNS_PER_ITERATION})`,
+    },
+    animationIterationCount: 'infinite',
+    animationName: rotation,
+    animationTimingFunction: 'linear',
+  },
+});
+
+/**
+ * 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<Element>();
+let flushScheduled = false;
+
+function pinRotorsToTimelineOrigin(): void {
+  flushScheduled = false;
+  const animations: Animation[] = [];
+  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: Element | null,
+): (() => void) | undefined {
+  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/src/Stack/Stack.doc.mjs

@@ -524,7 +524,7 @@ export const docs = {
           name: 'isScrollable',
           type: 'boolean',
           description:
-            'Enables scrollable overflow (overflow: auto). StackItem already applies the flex min-height/min-width reset, so <StackItem size="fill" isScrollable> is a complete scroll region. Matches isScrollable on LayoutContent and LayoutPanel.',
+            'Enables scrollable overflow (overflow: auto). StackItem already applies the flex min-height/min-width reset, so <StackItem size="fill" isScrollable> is a complete scroll region. Matches isScrollable on LayoutContent and LayoutPanel. While its content overflows, a div or span item is a group named by aria-label, or by a translated "Content"; another element keeps its own role.',
           default: 'false',
         },
         {

package/src/Stack/StackItem.tsx

@@ -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
@@ -21,6 +23,7 @@ import {
 } from './stackItem.stylex';
 import {mergeProps} from '../utils/mergeProps';
 import {themeProps} from '../utils/themeProps';
+import {StackItemScrollRegion} from '../hooks/StackItemScrollRegion';
 
 const overflowStyles = stylex.create({
   scrollable: {
@@ -53,7 +56,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;
@@ -102,18 +107,27 @@ export function StackItem({
     xstyle,
   );
 
+  const elementProps = {
+    ...mergeProps(
+      themeProps('stack-item', {size}),
+      stylexProps,
+      className,
+      style,
+    ),
+    ...props,
+  };
+
+  if (isScrollable && (element === 'div' || element === 'span')) {
+    return createElement(
+      StackItemScrollRegion,
+      {as: element, ref, elementProps},
+      children,
+    );
+  }
+
   return createElement(
     element,
-    {
-      ref: ref as Ref<Element>,
-      ...mergeProps(
-        themeProps('stack-item', {size}),
-        stylexProps,
-        className,
-        style,
-      ),
-      ...props,
-    },
+    {ref: ref as Ref<Element>, ...elementProps},
     children,
   );
 }

package/src/Switch/Switch.tsx

@@ -62,9 +62,9 @@ import {
 import english from '../i18n/generated-english/Switch/Switch.generated';
 
 registerEnglishFallback(english);
+import {reducedMotionFadeConsts} from '../motion/reducedMotion.stylex';
 import {
   interactionOverlayStyles,
-  pressConsts,
   pressVars,
 } from '../utils/interactionOverlay.stylex';
 import {pressHoldsDragProps} from '../privateAttributes/pressHoldsDrag.stylex';
@@ -93,14 +93,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)';

package/src/Table/plugins/sortable/useTableSortable.tsx

@@ -168,7 +168,7 @@ const sortStyles = stylex.create({
     fontSize: 10,
     // eslint-disable-next-line @astryx/no-hardcoded-styles -- no token for lineHeight:1 (tight badge)
     lineHeight: '1',
-    color: colorVars['--color-accent'],
+    color: colorVars['--color-text-accent'],
   },
 });