@astryxdesign/core 0.3.0 → 0.4.0-canary.058f476

package/src/Button/Button.tsx

@@ -34,6 +34,7 @@ import {
   fontWeightVars,
   typeScaleVars,
   shadowVars,
+  focusVars,
 } from '../theme/tokens.stylex';
 import {Spinner} from '../Spinner';
 import {VisuallyHidden} from '../VisuallyHidden';
@@ -45,6 +46,7 @@ import {mergeProps, mergeRefs} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {themeProps} from '../utils/themeProps';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {useTranslator} from '../i18n';
 import type {ButtonVariantMap} from './index';
 
@@ -55,6 +57,15 @@ import type {ButtonVariantMap} from './index';
  */
 const styles = stylex.create({
   base: {
+    // Kept as a public themeable var (documented in Button.doc.mjs) even though
+    // it now defaults to the shared token: removing it would break any theme
+    // setting it, for no gain. It overrides the shared offset, so a theme can
+    // still tune the ring distance on buttons specifically.
+    '--button-focus-offset': focusVars['--focus-outline-offset'],
+    outlineOffset: {
+      default: '0',
+      ':focus-visible': 'var(--button-focus-offset)',
+    },
     position: 'relative',
     display: 'inline-flex',
     alignItems: 'center',
@@ -179,7 +190,7 @@ const elevationStyles = stylex.create({
  * Variant styles using backgroundImage for layered colors
  * Pseudo-classes are nested within properties per StyleX recommendation
  * Overlay is stacked on top of base color using multiple linear-gradients
- * Focus outline color matches variant (destructive uses negative color)
+ * Focus outline is shared across variants for consistent keyboard affordance.
  */
 const variants = stylex.create({
   primary: {
@@ -192,15 +203,6 @@ const variants = stylex.create({
       },
       ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
     },
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    '--button-focus-offset': '3px',
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': 'var(--button-focus-offset)',
-    },
   },
   secondary: {
     backgroundColor: colorVars['--color-neutral'],
@@ -212,15 +214,6 @@ const variants = stylex.create({
       },
       ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
     },
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    '--button-focus-offset': '3px',
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': 'var(--button-focus-offset)',
-    },
   },
   ghost: {
     backgroundColor: 'transparent',
@@ -232,19 +225,14 @@ const variants = stylex.create({
       },
       ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
     },
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    '--button-focus-offset': '3px',
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': 'var(--button-focus-offset)',
-    },
   },
   destructive: {
     backgroundColor: colorVars['--color-error'],
     color: colorVars['--color-on-error'],
+    // The ring matches the variant it rings: an accent-colored outline on a
+    // red button reads as another control's focus. Only the color differs —
+    // width, style and offset come from the shared outline.
+    outlineColor: {default: null, ':focus-visible': colorVars['--color-error']},
     backgroundImage: {
       default: null,
       ':hover': {
@@ -252,15 +240,6 @@ const variants = stylex.create({
       },
       ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
     },
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-error']}`,
-    },
-    '--button-focus-offset': '3px',
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': 'var(--button-focus-offset)',
-    },
   },
 });
 
@@ -676,10 +655,9 @@ export function Button({
   const edgeCompAttr = isFlat ? {[EDGE_COMP_ATTR]: ''} : null;
 
   // Shared StyleX props for both button and link rendering
-  const sharedStylexProps = stylex.props(
+  const sharedStylexProps = focusOutlineProps.focusVisible(
     styles.base,
     sizeStyles[size],
-    variants[variant],
     isIconOnly && styles.iconOnly,
     buttonDisabled && styles.disabled,
     useAriaDisabled && styles.ariaDisabled,
@@ -693,11 +671,14 @@ export function Button({
       (variant === 'primary' || variant === 'destructive') &&
       (buttonGroup.orientation === 'horizontal'
         ? groupStyles.onSolidHorizontal
-        : groupStyles.onSolidVertical),
-    // Standalone floating buttons only — a grouped button's elevation is owned
+        : groupStyles.onSolidVertical), // Standalone floating buttons only — a grouped button's elevation is owned
     // by the ButtonGroup so the shared surface lifts as one unit.
     !buttonGroup && elevationStyles[elevation],
     width != null && dynamicStyles.width(width),
+    // AFTER the shared focus outline: the outline supplies width/style/offset
+    // for every variant, and `destructive` re-colors just the ring to match
+    // its own surface. Ordering is the mechanism — StyleX is last-wins.
+    variants[variant],
     xstyle,
   );
 

package/src/Calendar/Calendar.tsx

@@ -58,6 +58,7 @@ import {
   DATE_FORMAT_MONTH_YEAR,
 } from '../utils/plainDate';
 import {mergeProps, composeEventHandlers, rtlStyles} from '../utils';
+import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {
   computeDayCellState,
   computeRangeRounding,
@@ -1102,7 +1103,7 @@ function DayCell({
             // the default rendering.
             marker: markerState,
           }),
-          stylex.props(
+          focusOutlineProps.focusVisible(
             dayCellStyles.day,
             dayCellTheme.day,
             isOutside && dayCellStyles.dayOutside,

package/src/Calendar/styles.ts

@@ -258,14 +258,6 @@ export const dayCellTheme = stylex.create({
         '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']})`,
       },
     },
-    outline: {
-      default: null,
-      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
-    },
-    outlineOffset: {
-      default: '0',
-      ':focus-visible': '2px',
-    },
   },
 
   // Outside days (adjacent months)

package/src/Card/Card.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Card.tsx
  * @input Uses container utility, StyleX

package/src/Card/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports Card component

package/src/Carousel/Carousel.doc.mjs

@@ -66,8 +66,10 @@ export const docsZh = {
       'Carousel 在项目超出可用宽度时将一行项目水平滚动。适用于卡片网格、图片画廊、产品列表，或任何希望无需占据整页即可浏览的项目集合。',
     bestPractices: [
       {guidance: true, description: '当每个项目应精确对齐到起始边缘时启用滚动吸附，例如画廊或产品列表。'},
+      {guidance: true, description: '在小型可循环的集合（如照片画廊）上使用 hasLoop，此时从最后一项绕回第一项的滚动更自然。'},
       {guidance: true, description: '始终提供描述轮播内容的 aria-label，例如"精选产品"或"团队成员"。'},
       {guidance: true, description: '使用一致的间距和项目宽度，让轮播看起来是有意为之，而不是内容意外溢出。'},
+      {guidance: true, description: '信任内置导航：触控板用户可水平滑动，鼠标用户可按住 Shift 滚动滚轮来浏览项目。'},
       {guidance: false, description: '将每位用户都必须看到的内容放入轮播。并非所有人都会水平滚动，关键内容应放在首屏。'},
       {guidance: false, description: '自动轮播项目。让用户按自己的节奏滚动。'},
       {guidance: false, description: '嵌套轮播。轮播中嵌套轮播会造成困惑并破坏键盘导航。'},
@@ -94,6 +96,7 @@ export const docsDense = {
       'Carousel scrolls items horizontally when they overflow. Use for card grids, galleries, product lists.',
     bestPractices: [
       {guidance: true, description: 'Enable scroll-snap when each item should land precisely at the start edge: gallery, product list.'},
+      {guidance: true, description: 'Reach for hasLoop on small cyclable sets (photo gallery) where wrapping past the last item back to the first feels natural.'},
       {guidance: true, description: 'Always provide an aria-label describing what the carousel contains: "Featured products", "Team members".'},
       {guidance: true, description: 'Use consistent gap + item width so the carousel looks intentional, not like content overflowing by accident.'},
       {guidance: true, description: 'Trust built-in navigation: trackpad users swipe horizontally, mouse users hold Shift + wheel to move through items.'},

package/src/Carousel/Carousel.tsx

@@ -560,9 +560,11 @@ export function Carousel({
               )}>
               <Button
                 icon={
-                  <span {...stylex.props(rtlStyles.mirror)}>
-                    <Icon icon="chevronLeft" size="xsm" />
-                  </span>
+                  <Icon
+                    icon="chevronLeft"
+                    size="xsm"
+                    xstyle={rtlStyles.mirror}
+                  />
                 }
                 label={t('@astryx.carousel.scrollLeft')}
                 variant="ghost"
@@ -585,9 +587,11 @@ export function Carousel({
               )}>
               <Button
                 icon={
-                  <span {...stylex.props(rtlStyles.mirror)}>
-                    <Icon icon="chevronRight" size="xsm" />
-                  </span>
+                  <Icon
+                    icon="chevronRight"
+                    size="xsm"
+                    xstyle={rtlStyles.mirror}
+                  />
                 }
                 label={t('@astryx.carousel.scrollRight')}
                 variant="ghost"

package/src/Center/Center.tsx

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file Center.tsx
  * @input Uses React, StyleX for centering styles, Layout padding.stylex for spacing-scale padding

package/src/Center/index.ts

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports Center component

package/src/Chat/Chat.doc.mjs

@@ -26,6 +26,8 @@ export const docs = {
       {className: 'astryx-chat-system-message', visualProps: ['variant']},
       {className: 'astryx-chat-message-metadata'},
       {className: 'astryx-chat-send-button'},
+      {className: 'astryx-chat-dictation-button'},
+      {className: 'astryx-chat-layout-scroll-button'},
       {className: 'astryx-chat-tokenized-text'},
       {className: 'astryx-chat-tool-calls'},
       {className: 'astryx-trigger-menu'},

package/src/Chat/ChatDictationButton.tsx

@@ -26,6 +26,7 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
+import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
 // =============================================================================
@@ -140,7 +141,12 @@ export function ChatDictationButton({
   return (
     <span
       ref={ref}
-      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}
+      {...mergeProps(
+        themeProps('chat-dictation-button'),
+        stylex.props(styles.wrapper, xstyle),
+        className,
+        style,
+      )}
       {...rest}>
       {isListening && (
         <span

package/src/Chat/ChatLayoutScrollButton.test.tsx

@@ -16,6 +16,28 @@ describe('ChatLayoutScrollButton', () => {
     expect(screen.getByTestId('scroll')).toBeTruthy();
   });
 
+  it('renders icon-only (no visible label text) in the default, label-less state', () => {
+    render(<ChatLayoutScrollButton isVisible onClick={() => {}} />);
+    const button = screen.getByRole('button', {name: 'Scroll to bottom'});
+    // The translated name must stay accessible-only. Button renders visible
+    // text whenever isIconOnly is false (its default), so a missing
+    // isIconOnly here previously rendered the full translation as clipped
+    // visible text inside the circular button instead of just the chevron.
+    expect(button.textContent).toBe('');
+  });
+
+  it('renders the label as visible text when provided', () => {
+    render(
+      <ChatLayoutScrollButton
+        isVisible
+        onClick={() => {}}
+        label="New messages"
+      />,
+    );
+    const button = screen.getByRole('button', {name: 'New messages'});
+    expect(button).toHaveTextContent('New messages');
+  });
+
   it('forwards rest props (data-*, aria-*, id) to the root element', () => {
     render(
       <ChatLayoutScrollButton

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -30,6 +30,7 @@ import {Icon} from '../Icon';
 import {Button} from '../Button';
 import type {BaseProps} from '../BaseProps';
 import {mergeProps} from '../utils';
+import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
 // =============================================================================
@@ -128,7 +129,12 @@ export function ChatLayoutScrollButton({
   return (
     <div
       ref={ref}
-      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}
+      {...mergeProps(
+        themeProps('chat-layout-scroll-button'),
+        stylex.props(styles.wrapper, xstyle),
+        className,
+        style,
+      )}
       {...rest}>
       <div
         {...stylex.props(
@@ -144,6 +150,7 @@ export function ChatLayoutScrollButton({
           icon={<Icon icon="chevronDown" size="md" />}
           variant="ghost"
           size="md"
+          isIconOnly={!label}
           onClick={onClick}
           xstyle={[styles.button, label ? styles.buttonWithLabel : null]}>
           {label ?? undefined}

package/src/Chat/ChatSendButton.tsx

@@ -24,6 +24,7 @@ import {useIcon} from '../Icon';
 import {useChatComposerContext} from './ChatContext';
 
 import type {BaseProps} from '../BaseProps';
+import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
 
@@ -117,9 +118,7 @@ export function ChatSendButton(props: ChatSendButtonProps): ReactNode {
       isDisabled={!isStopShown && isDisabled}
       onClick={isStopShown ? onStop : handleSend}
       {...rest}
-      {...themeProps('chat-send-button')}
-      className={className}
-      style={style}
+      {...mergeProps(themeProps('chat-send-button'), {className}, style)}
       xstyle={[styles.root, xstyle]}
     />
   );

package/src/Chat/ChatToolCalls.test.tsx

@@ -216,4 +216,39 @@ describe('ChatToolCalls', () => {
     expect(region).toHaveTextContent('searchCode');
     expect(region).toHaveTextContent('readFile');
   });
+
+  it('compensates the grouped rows overhang on the clip boundary so the hover background is not cut off', () => {
+    render(
+      <ChatToolCalls
+        defaultIsExpanded={true}
+        calls={[
+          {name: 'bash', status: 'complete'},
+          {name: 'read', status: 'complete'},
+        ]}
+      />,
+    );
+    const regionId = screen.getByRole('button').getAttribute('aria-controls');
+    const groupContent = document.getElementById(regionId as string);
+    // groupContentInner is the overflow:hidden clip boundary required for the
+    // grid height animation; its direct child (`list`) pulls itself outward
+    // by a negative inline margin so each row's hover background can overhang
+    // the text column without widening the layout. Without a matching
+    // padding/negative-margin pair on groupContentInner itself, that overhang
+    // extends past the clip boundary and gets cut off (#4830) instead of
+    // being absorbed the same way it is for a single, unwrapped call row.
+    const groupContentInner = groupContent!.firstElementChild as HTMLElement;
+    const list = groupContentInner.firstElementChild as HTMLElement;
+    // jsdom's getComputedStyle doesn't resolve StyleX's generated atomic
+    // classes here, so assert on the classes directly instead. StyleX emits
+    // one atomic class per distinct property+value pair, so identical
+    // paddingInline/marginInline values on two elements always produce the
+    // exact same class names — if groupContentInner mirrors list's
+    // padding/margin pair, their class lists intersect on (at least) those
+    // two classes; if the fix is missing, groupContentInner only has its own
+    // unrelated overflow/minHeight classes and shares nothing with list.
+    const innerClasses = new Set(groupContentInner.className.split(' '));
+    const listClasses = new Set(list.className.split(' '));
+    const shared = [...listClasses].filter(c => innerClasses.has(c));
+    expect(shared.length).toBeGreaterThanOrEqual(2);
+  });
 });

package/src/Chat/ChatToolCalls.tsx

@@ -134,6 +134,10 @@ const styles = stylex.create({
     width: '14px',
     height: '14px',
     color: colorVars['--color-text-disabled'],
+  },
+  // Rides on the chevron <Icon> (via `xstyle`), next to the rotation it
+  // animates, so one element carries both the transform and the theme target.
+  chevronTransition: {
     transition: {
       default: `transform ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
       '@media (prefers-reduced-motion: reduce)': 'none',
@@ -156,6 +160,18 @@ const styles = stylex.create({
   groupContentInner: {
     overflow: 'hidden',
     minHeight: 0,
+    // `list` (and, within it, each `callRowClickable` row) overhangs its own
+    // content box by `--spacing-1` on each inline edge via a negative margin,
+    // so its hover background can extend past the text column without
+    // widening the layout — `list`'s own matching paddingInline absorbs the
+    // row-level overhang, but `list`'s negative margin then overhangs *this*
+    // element's box by the same amount, and this is the clip boundary the
+    // grid height animation needs `overflow: hidden` for. Mirror the same
+    // padding/negative-margin pair here so that overhang is absorbed too,
+    // instead of clipped — matching the ungrouped single-call row, which has
+    // no such wrapper to clip it.
+    paddingInline: spacingVars['--spacing-1'],
+    marginInline: `calc(-1 * ${spacingVars['--spacing-1']})`,
   },
   list: {
     display: 'flex',
@@ -273,10 +289,6 @@ const styles = stylex.create({
     width: '14px',
     height: '14px',
     color: colorVars['--color-text-disabled'],
-    transition: {
-      default: `transform ${durationVars['--duration-fast']} ${easeVars['--ease-standard']}`,
-      '@media (prefers-reduced-motion: reduce)': 'none',
-    },
     marginInlineStart: 'auto',
   },
   callDetailContent: {
@@ -451,12 +463,16 @@ function CallRow({call}: {call: ChatToolCallItem}) {
         <span {...stylex.props(styles.callDuration)}>{call.duration}</span>
       )}
       {hasDetail && (
-        <span
-          {...stylex.props(
-            styles.callDetailChevron,
-            isDetailOpen && styles.chevronExpanded,
-          )}>
-          <Icon icon="chevronDown" size="xsm" color="inherit" />
+        <span {...stylex.props(styles.callDetailChevron)}>
+          <Icon
+            icon="chevronDown"
+            size="xsm"
+            color="inherit"
+            xstyle={[
+              styles.chevronTransition,
+              isDetailOpen && styles.chevronExpanded,
+            ]}
+          />
         </span>
       )}
     </div>
@@ -627,12 +643,16 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
             </>
           )}
         </span>
-        <span
-          {...stylex.props(
-            styles.chevron,
-            isExpanded && styles.chevronExpanded,
-          )}>
-          <Icon icon="chevronDown" size="xsm" color="inherit" />
+        <span {...stylex.props(styles.chevron)}>
+          <Icon
+            icon="chevronDown"
+            size="xsm"
+            color="inherit"
+            xstyle={[
+              styles.chevronTransition,
+              isExpanded && styles.chevronExpanded,
+            ]}
+          />
         </span>
       </div>
 

package/src/Chat/useTriggerMenu.tsx

@@ -110,10 +110,6 @@ const styles = stylex.create({
   popoverSurface: {
     minWidth: '180px',
   },
-  popoverGap: {
-    marginBlockStart: spacingVars['--spacing-1'],
-    marginBlockEnd: spacingVars['--spacing-1'],
-  },
   item: {
     boxSizing: 'border-box',
     display: 'flex',
@@ -711,7 +707,8 @@ export function useTriggerMenu(
       {
         placement: 'above',
         alignment: 'start',
-        xstyle: [styles.popoverSurface, styles.popoverGap],
+        offset: spacingVars['--spacing-1'],
+        xstyle: styles.popoverSurface,
       },
     );
   }, [popover, listboxId, state, selectItem, getItemId, t]);

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -131,7 +131,8 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-checkbox-input', visualProps: ['size']},
-      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox-indicator', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled'], deprecatedFor: 'checkbox-indicator'},
     ],
   },
   usage: {
@@ -206,7 +207,8 @@ export const docsZh = {
           'size',
         ],
       },
-      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox-indicator', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled'], deprecatedFor: 'checkbox-indicator'},
     ],
   },
 };