@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/Calendar/Calendar.tsx

@@ -203,7 +203,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
     value,
     defaultValue,
     onChange,
-    numberOfMonths: numberOfMonthsProp = 1,
+    numberOfMonths = 1,
     min,
     max,
     dateConstraints,
@@ -223,11 +223,6 @@ export function Calendar({ref, ...props}: CalendarProps) {
   // DayOfWeek so all downstream date math keeps working with an index.
   const weekStartsOn = normalizeDayOfWeek(weekStartsOnProp);
 
-  // `numberOfMonths` is typed `1 | 2`; defensively clamp anything else that
-  // slips through at runtime to 1 so `Array.from({length})` can't render an
-  // absurd number of month grids (e.g. `numberOfMonths={1000}`).
-  const numberOfMonths = numberOfMonthsProp === 2 ? 2 : 1;
-
   // Today's date (memoized)
   const today = useMemo(() => plainDateToday(), []);
 
@@ -431,14 +426,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
         <Button
           label="Previous month"
           variant="ghost"
-          icon={
-            // Wrapper span (not Icon props): Icon's string mode clobbers
-            // caller classNames, so the RTL mirror must live on its own
-            // element.
-            <span {...stylex.props(calendarStyles.navIcon)}>
-              <Icon icon="chevronLeft" size="sm" color="inherit" />
-            </span>
-          }
+          icon={<Icon icon="chevronLeft" size="sm" color="inherit" />}
           onClick={() => navigateMonth(-1)}
           isDisabled={!canNavigatePrevious}
           isIconOnly
@@ -451,11 +439,7 @@ export function Calendar({ref, ...props}: CalendarProps) {
         <Button
           label="Next month"
           variant="ghost"
-          icon={
-            <span {...stylex.props(calendarStyles.navIcon)}>
-              <Icon icon="chevronRight" size="sm" color="inherit" />
-            </span>
-          }
+          icon={<Icon icon="chevronRight" size="sm" color="inherit" />}
           onClick={() => navigateMonth(1)}
           isDisabled={!canNavigateNext}
           isIconOnly
@@ -928,10 +912,7 @@ function DayCell({
   });
 
   return (
-    <div
-      role="gridcell"
-      aria-selected={state.isSelected || state.isInRange || undefined}
-      {...stylex.props(dayCellStyles.cell)}>
+    <div role="gridcell" {...stylex.props(dayCellStyles.cell)}>
       {/* Range background */}
       {state.isInRange && (
         <div
@@ -971,10 +952,8 @@ function DayCell({
         type="button"
         data-date={day.iso}
         aria-label={plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY)}
+        aria-selected={state.isSelected || state.isInRange || undefined}
         aria-disabled={state.effectivelyDisabled || undefined}
-        // Mark today's cell programmatically (APG date-picker pattern), not just
-        // visually, so screen-reader users can identify the current date.
-        aria-current={state.isToday ? 'date' : undefined}
         disabled={isDisabled}
         // Initial roving tab-stop seed; useGridFocus owns it after mount.
         tabIndex={isTabbableDay ? 0 : -1}

package/src/Calendar/dayCellUtils.ts

@@ -193,9 +193,7 @@ export function isRangeHighlighted(input: {
   isDisabled: boolean;
   isOutside: boolean;
 }): boolean {
-  if (input.mode !== 'range') {
-    return false;
-  }
+  if (input.mode !== 'range') {return false;}
   return isSpanHighlighted({
     date: input.date,
     spanStart: input.rangeStart,

package/src/Calendar/styles.ts

@@ -64,19 +64,9 @@ export const calendarStyles = stylex.create({
     whiteSpace: 'nowrap',
     borderWidth: 0,
   },
-  /**
-   * Wrapper for the month nav chevrons. In RTL the flex header already
-   * swaps the buttons' visual sides; the glyphs must mirror with them so
-   * "Previous month" points outward (visually right) instead of inward.
-   * Keyed on the dir attribute (dir="rtl"), same as MobileNav's drawer
-   * transform — bare CSS `direction: rtl` alone won't trigger it.
-   */
   navIcon: {
-    display: 'inline-flex',
-    transform: {
-      default: null,
-      ':is([dir="rtl"] *)': 'scaleX(-1)',
-    },
+    width: spacingVars['--spacing-4'],
+    height: spacingVars['--spacing-4'],
   },
 });
 

package/src/Card/Card.tsx

@@ -44,10 +44,8 @@ import {themeProps} from '../utils/themeProps';
  * - Non-semantic palette: `blue | cyan | gray | green | orange | pink | purple | red | teal | yellow`
  *   Each uses the corresponding `--color-background-<name>` token (20% opacity tint).
  *
- * Only `default` draws a visible border. Its border width is subtracted from
- * the padding so the total inset (border + padding) equals the padding token —
- * keeping content geometry faithful to the spacing scale and identical to the
- * borderless variants. Themes can override borderWidth/borderColor.
+ * All variants include a transparent border to prevent layout jitter
+ * when switching variants. Themes can override borderWidth/borderColor.
  */
 export type CardVariant =
   | 'default'
@@ -73,18 +71,12 @@ const styles = stylex.create({
     '--_card-radius': radiusVars['--radius-container'],
     borderRadius: 'var(--_card-radius)',
     overflow: 'clip',
-  },
-  // The border is drawn *inside* the padding — its width is subtracted from
-  // each side — so total inset (border + padding) equals the padding token
-  // rather than exceeding it by the border width.
-  withBorder: {
     borderWidth: borderVars['--border-width'],
     borderStyle: 'solid',
+    borderColor: 'transparent',
+  },
+  withBorder: {
     borderColor: colorVars['--color-border-emphasized'],
-    paddingInlineStart: `calc(var(--container-padding-inline-start) - ${borderVars['--border-width']})`,
-    paddingInlineEnd: `calc(var(--container-padding-inline-end) - ${borderVars['--border-width']})`,
-    paddingBlockStart: `calc(var(--container-padding-block-start) - ${borderVars['--border-width']})`,
-    paddingBlockEnd: `calc(var(--container-padding-block-end) - ${borderVars['--border-width']})`,
   },
   // Fixed-height cards scroll content; overflow: auto also clips to border-radius
   scrollable: {
@@ -274,6 +266,7 @@ export function Card({
         stylex.props(
           styles.card,
           variantStyles[variant],
+          variant === 'default' && styles.withBorder,
           hasFixedHeight && styles.scrollable,
           dynamicStyles.sizing(
             width ?? null,
@@ -303,9 +296,6 @@ export function Card({
           !useThemeDefault &&
             effectivePadding !== 4 &&
             containerPaddingBlockEndVarStyles[effectivePadding],
-          // Applied after the container padding so the border-inset calc wins;
-          // it reads the --container-padding-* vars set above.
-          variant === 'default' && styles.withBorder,
           xstyle,
         ),
         className,

package/src/Carousel/Carousel.doc.mjs

@@ -20,15 +20,15 @@ export const docs = {
     ],
     anatomy: [
       {name: 'Scroll container', required: true, description: 'The horizontal overflow area that holds all items.'},
-      {name: 'Items', required: true, description: 'The children rendered in a row inside the scroll container. With hasSnap, each item snaps to the start edge.'},
+      {name: 'Items', required: true, description: 'The children rendered in a row. Each item is animated with a scroll-driven scale effect.'},
       {name: 'Fade edges', required: false, description: 'Gradient fades on the left and right edges that indicate more content is available. Enabled by default, disable with hasEdgeFade={false}.'},
-      {name: 'Navigation buttons', required: false, description: 'Prev/next buttons that appear when the content can scroll in that direction. Enabled by default, disable with hasButtons={false}.'},
+      {name: 'Navigation buttons', required: false, description: 'Prev/next buttons that appear on hover. Enabled by default, disable with hasButtons={false}.'},
     ],
   },
   props: [
     {name: 'children', type: 'ReactNode', description: 'Carousel items rendered in a horizontal scroll container.', required: true},
     {name: 'gap', type: "0 | 0.5 | 1 | 1.5 | 2 | 3 | 4", description: 'Gap between items using the spacing token scale.', default: '1'},
-    {name: 'hasButtons', type: 'boolean', description: 'Show prev/next navigation buttons when content is scrollable.', default: 'true'},
+    {name: 'hasButtons', type: 'boolean', description: 'Show prev/next navigation buttons on hover (desktop only).', default: 'true'},
     {name: 'hasEdgeFade', type: 'boolean', description: 'Show a gradient edge-fade mask when content overflows, signalling that more items exist off-screen.', default: 'true'},
     {name: 'hasSnap', type: 'boolean', description: 'Enable scroll-snap so each child snaps to the start edge.', default: 'false'},
     {name: 'padding', type: '0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10', description: 'Inline padding inside the scroll container, with matching scroll-padding so snap points align to the content edge.'},
@@ -59,20 +59,20 @@ export const docs = {
 export const docsZh = {
   usage: {
     description:
-      'Carousel 在项目超出可用宽度时将一行项目水平滚动。适用于卡片网格、图片画廊、产品列表，或任何希望无需占据整页即可浏览的项目集合。',
+      'Carousel scrolls a row of items horizontally when they overflow the available width. Use it for card grids, image galleries, product lists, or any set of items that should be browsable without taking up the full page.',
     bestPractices: [
-      {guidance: true, description: '当每个项目应精确对齐到起始边缘时启用滚动吸附，例如画廊或产品列表。'},
-      {guidance: true, description: '始终提供描述轮播内容的 aria-label，例如"精选产品"或"团队成员"。'},
-      {guidance: true, description: '使用一致的间距和项目宽度，让轮播看起来是有意为之，而不是内容意外溢出。'},
-      {guidance: false, description: '将每位用户都必须看到的内容放入轮播。并非所有人都会水平滚动，关键内容应放在首屏。'},
-      {guidance: false, description: '自动轮播项目。让用户按自己的节奏滚动。'},
-      {guidance: false, description: '嵌套轮播。轮播中嵌套轮播会造成困惑并破坏键盘导航。'},
+      {guidance: true, description: 'Enable scroll-snap when each item should land precisely at the start edge, like a gallery or product list.'},
+      {guidance: true, description: 'Always provide an aria-label that describes what the carousel contains, like "Featured products" or "Team members".'},
+      {guidance: true, description: 'Use a consistent gap and item width so the carousel looks intentional, not like content overflowing by accident.'},
+      {guidance: false, description: 'Use a carousel for content every user must see. Not everyone scrolls horizontally, so put critical content above the fold.'},
+      {guidance: false, description: 'Auto-advance items. Let the user scroll at their own pace.'},
+      {guidance: false, description: 'Nest carousels. A carousel inside a carousel is confusing and breaks keyboard navigation.'},
     ],
   },
   propDescriptions: {
     children: '在水平滚动容器中渲染的轮播项目。',
     gap: '使用间距令牌比例的项目间距。',
-    hasButtons: '内容可滚动时显示上一个/下一个导航按钮。',
+    hasButtons: '悬停时显示上一个/下一个导航按钮（仅桌面端）。',
     hasEdgeFade: '内容溢出时显示渐变边缘遮罩，提示屏幕外还有更多项目。',
     hasSnap: '启用滚动吸附，使每个子元素吸附到起始边缘。',
     padding: '滚动容器内的内联内边距，并设置匹配的 scroll-padding，使吸附点与内容边缘对齐。',
@@ -98,7 +98,7 @@ export const docsDense = {
   propDescriptions: {
     children: 'carousel items in horizontal scroll',
     gap: 'item spacing via spacing token scale',
-    hasButtons: 'prev/next buttons when content is scrollable',
+    hasButtons: 'prev/next buttons on hover (desktop)',
     hasEdgeFade: 'gradient edge-fade mask on overflow',
     hasSnap: 'scroll-snap; children snap to start edge',
     padding: 'inline padding; scroll-padding keeps snap points on content edge',

package/src/Carousel/Carousel.test.tsx

@@ -38,19 +38,6 @@ describe('Carousel', () => {
     expect(region).toHaveAttribute('aria-roledescription', 'carousel');
   });
 
-  it('makes the scroll container keyboard-focusable', () => {
-    render(
-      <Carousel aria-label="Photos">
-        <div>Item</div>
-      </Carousel>,
-    );
-    // The inner scroll container overflows, so it must be reachable by
-    // keyboard (axe: scrollable-region-focusable).
-    const region = screen.getByRole('region', {name: 'Photos'});
-    const scroller = region.firstElementChild;
-    expect(scroller).toHaveAttribute('tabindex', '0');
-  });
-
   it('applies data-testid', () => {
     render(
       <Carousel data-testid="my-carousel">

package/src/Carousel/Carousel.tsx

@@ -318,8 +318,6 @@ export function Carousel({
           : null
     : null;
 
-  // Self-authored position styles (positioning: 'custom' below): a cover
-  // centered on the anchor, sized to it — direction-neutral by construction.
   const coverStyle: React.CSSProperties = {
     positionArea: 'center',
     width: 'anchor-size(width)',
@@ -342,7 +340,6 @@ export function Carousel({
       {...htmlProps}>
       <div
         ref={composedRef}
-        tabIndex={0}
         {...stylex.props(
           styles.scroller,
           gapStyles[gap],
@@ -400,7 +397,8 @@ export function Carousel({
             </div>
           </>,
           {
-            positioning: 'custom',
+            placement: 'below',
+            alignment: 'center',
             style: coverStyle,
             xstyle: styles.buttonOverlay,
           },

package/src/Carousel/carousel.markers.stylex.ts

@@ -0,0 +1,10 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Scoped marker for Carousel ancestor selectors.
+ * Prevents hover styles from leaking from parent containers.
+ */
+export const carouselScope: ReturnType<typeof stylex.defineMarker> =
+  stylex.defineMarker();

package/src/Chat/Chat.doc.mjs

@@ -17,7 +17,7 @@ export const docs = {
       {className: 'astryx-chat-composer', visualProps: ['density']},
       {className: 'astryx-chat-composer-input'},
       {className: 'astryx-chat-composer-drawer', visualProps: ['collapsed']},
-      {className: 'astryx-chat-message', visualProps: ['sender', 'density']},
+      {className: 'astryx-chat-message', visualProps: ['sender']},
       {
         className: 'astryx-chat-message-bubble',
         visualProps: ['sender', 'variant', 'density'],

package/src/Chat/ChatComposerInput.test.tsx

@@ -2,7 +2,6 @@
 
 import {describe, it, expect, vi, afterEach} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
-import {ChatComposer} from './ChatComposer';
 import {ChatComposerInput} from './ChatComposerInput';
 import type {
   ChatComposerTrigger,
@@ -130,29 +129,6 @@ describe('ChatComposerInput', () => {
       fireEvent.keyDown(textbox, {key: 'Enter'});
       expect(onSubmit).not.toHaveBeenCalled();
     });
-
-    it('keeps parent submit flow when child onChange observes input changes', () => {
-      const onSubmit = vi.fn();
-      const onInputChange = vi.fn();
-      render(
-        <ChatComposer
-          onSubmit={onSubmit}
-          input={<ChatComposerInput onChange={onInputChange} />}
-        />,
-      );
-
-      const textbox = screen.getByRole('textbox');
-      textbox.textContent = 'hello world';
-      fireEvent.input(textbox);
-
-      expect(onInputChange).toHaveBeenLastCalledWith('hello world');
-
-      fireEvent.keyDown(textbox, {key: 'Enter'});
-
-      expect(onSubmit).toHaveBeenCalledWith('hello world');
-      expect(onInputChange).toHaveBeenLastCalledWith('');
-      expect(textbox.textContent).toBe('');
-    });
   });
 
   // Controlled-value sync used to overwrite `textContent` on every
@@ -369,9 +345,7 @@ describe('ChatComposerInput', () => {
         },
       });
 
-      expect(
-        textbox.querySelector('[data-astryx-token]'),
-      ).not.toBeInTheDocument();
+      expect(textbox.querySelector('[data-astryx-token]')).not.toBeInTheDocument();
       expect(textbox.textContent).toBe(long);
     });
   });

package/src/Chat/ChatComposerInput.tsx

@@ -43,7 +43,10 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import {useTriggerMenu} from './useTriggerMenu';
-import {useChatComposerTokens, isCustomToken} from './useChatComposerTokens';
+import {
+  useChatComposerTokens,
+  isCustomToken,
+} from './useChatComposerTokens';
 import {ensureCaretInside, insertTextAtCursor} from './chatComposerSelection';
 import {ChatPastedTextToken} from './ChatPastedTextToken';
 import {
@@ -280,13 +283,12 @@ function serialize(node: Node): string {
 
 export function ChatComposerInput(props: ChatComposerInputProps) {
   const composerCtx = useChatComposerContext();
-  const hasControlledValueProp = props.value !== undefined;
 
   const {
     ref,
     handleRef,
     value: controlledValue = composerCtx?.value,
-    onChange: onChangeProp,
+    onChange = composerCtx?.onChange,
     placeholder = composerCtx?.placeholder ?? 'Type a message\u2026',
     maxRows = 8,
     triggers,
@@ -304,21 +306,6 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     ...rest
   } = props;
 
-  const composerOnChange = composerCtx?.onChange;
-  const onChange = useCallback(
-    (nextValue: string) => {
-      if (hasControlledValueProp) {
-        onChangeProp?.(nextValue);
-        return;
-      }
-      composerOnChange?.(nextValue);
-      if (onChangeProp !== composerOnChange) {
-        onChangeProp?.(nextValue);
-      }
-    },
-    [composerOnChange, hasControlledValueProp, onChangeProp],
-  );
-
   const editableRef = useRef<HTMLDivElement>(null);
   const selfRef = useRef<ChatComposerInputHandle>(null);
   const [isEmpty, setIsEmpty] = useState(true);
@@ -692,7 +679,11 @@ ChatComposerInput.displayName = 'ChatComposerInput';
 // Token element helper (for custom rendering in stories/consumers)
 // =============================================================================
 
-export function ChatComposerTokenElement({token}: {token: ChatComposerToken}) {
+export function ChatComposerTokenElement({
+  token,
+}: {
+  token: ChatComposerToken;
+}) {
   return (
     <span
       data-astryx-token=""
@@ -702,7 +693,11 @@ export function ChatComposerTokenElement({token}: {token: ChatComposerToken}) {
       {isCustomToken(token) ? (
         token.render()
       ) : (
-        <Badge label={token.label} variant={token.variant} icon={token.icon} />
+        <Badge
+          label={token.label}
+          variant={token.variant}
+          icon={token.icon}
+        />
       )}
     </span>
   );

package/src/Chat/ChatDictationButton.tsx

@@ -105,7 +105,6 @@ export function ChatDictationButton({
   xstyle,
   className,
   style,
-  ...rest
 }: ChatDictationButtonProps) {
   if (isHiddenWhenUnsupported && !dictation.isSupported) {
     return null;
@@ -131,8 +130,7 @@ export function ChatDictationButton({
   return (
     <span
       ref={ref}
-      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}
-      {...rest}>
+      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}>
       {isListening && (
         <span
           aria-hidden
@@ -163,7 +161,9 @@ export function ChatDictationButton({
         aria-label={accessibleLabel}
         variant="ghost"
         size={size}
-        icon={isListening ? undefined : <Icon icon="microphone" size={size} />}
+        icon={
+          isListening ? undefined : <Icon icon="microphone" size={size} />
+        }
         isIconOnly
         onClick={dictation.toggle}
       />

package/src/Chat/ChatLayoutScrollButton.tsx

@@ -118,13 +118,11 @@ export function ChatLayoutScrollButton({
   xstyle,
   className,
   style,
-  ...rest
 }: ChatLayoutScrollButtonProps) {
   return (
     <div
       ref={ref}
-      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}
-      {...rest}>
+      {...mergeProps(stylex.props(styles.wrapper, xstyle), className, style)}>
       <div
         {...stylex.props(
           styles.container,

package/src/Chat/ChatMessageMetadata.tsx

@@ -28,7 +28,11 @@ import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 
 export type ChatMessageStatus =
-  'sending' | 'sent' | 'delivered' | 'read' | 'error';
+  | 'sending'
+  | 'sent'
+  | 'delivered'
+  | 'read'
+  | 'error';
 
 const STATUS_CONFIG: Record<
   ChatMessageStatus,
@@ -114,7 +118,6 @@ export function ChatMessageMetadata({
   xstyle,
   className,
   style,
-  ...rest
 }: ChatMessageMetadataProps) {
   const msgContext = useChatMessageContext();
   const sender = msgContext?.sender ?? 'assistant';
@@ -139,8 +142,7 @@ export function ChatMessageMetadata({
         ),
         className,
         style,
-      )}
-      {...rest}>
+      )}>
       {timestamp != null && <span>{timestamp}</span>}
       {timestamp != null && (footer != null || statusConfig != null) && (
         <span>·</span>

package/src/Chat/ChatSystemMessage.test.tsx

@@ -11,20 +11,26 @@ describe('ChatSystemMessage', () => {
   });
 
   it('has role="status"', () => {
-    render(<ChatSystemMessage data-testid="sys">Notice</ChatSystemMessage>);
+    render(
+      <ChatSystemMessage data-testid="sys">Notice</ChatSystemMessage>,
+    );
     const el = screen.getByTestId('sys');
     expect(el.getAttribute('role')).toBe('status');
   });
 
   it('renders default variant without divider lines', () => {
-    const {container} = render(<ChatSystemMessage>Hello</ChatSystemMessage>);
+    const {container} = render(
+      <ChatSystemMessage>Hello</ChatSystemMessage>,
+    );
     // Divider lines have aria-hidden, so check there are none
     const hiddenElements = container.querySelectorAll('[aria-hidden]');
     expect(hiddenElements.length).toBe(0);
   });
 
   it('renders divider variant with Divider', () => {
-    render(<ChatSystemMessage variant="divider">Today</ChatSystemMessage>);
+    render(
+      <ChatSystemMessage variant="divider">Today</ChatSystemMessage>,
+    );
     expect(screen.getByText('Today')).toBeTruthy();
   });
 
@@ -48,30 +54,9 @@ describe('ChatSystemMessage', () => {
   });
 
   it('applies data-testid', () => {
-    render(<ChatSystemMessage data-testid="my-sys">Hello</ChatSystemMessage>);
-    expect(screen.getByTestId('my-sys')).toBeTruthy();
-  });
-
-  it('forwards rest props (data-*, id) while keeping its own role', () => {
-    render(
-      <ChatSystemMessage data-testid="sys" data-custom="x" id="sys-1">
-        Hello
-      </ChatSystemMessage>,
-    );
-    const el = screen.getByTestId('sys');
-    expect(el).toHaveAttribute('data-custom', 'x');
-    expect(el).toHaveAttribute('id', 'sys-1');
-    expect(el.getAttribute('role')).toBe('status');
-  });
-
-  it('forwards rest props in the divider variant', () => {
     render(
-      <ChatSystemMessage variant="divider" data-testid="sys" data-custom="x">
-        Today
-      </ChatSystemMessage>,
+      <ChatSystemMessage data-testid="my-sys">Hello</ChatSystemMessage>,
     );
-    const el = screen.getByTestId('sys');
-    expect(el).toHaveAttribute('data-custom', 'x');
-    expect(el.getAttribute('role')).toBe('status');
+    expect(screen.getByTestId('my-sys')).toBeTruthy();
   });
 });

package/src/Chat/ChatSystemMessage.tsx

@@ -120,21 +120,21 @@ export function ChatSystemMessage({
   xstyle,
   className,
   style: styleProp,
+  'data-testid': testId,
   ref,
-  ...rest
 }: ChatSystemMessageProps) {
   if (variant === 'divider') {
     return (
       <div
         ref={ref}
+        role="status"
+        data-testid={testId}
         {...mergeProps(
           themeProps('chat-system-message', {variant}),
           stylex.props(styles.dividerWrap, xstyle),
           className,
           styleProp,
-        )}
-        {...rest}
-        role="status">
+        )}>
         <Divider label={children} />
       </div>
     );
@@ -143,14 +143,14 @@ export function ChatSystemMessage({
   return (
     <div
       ref={ref}
+      role="status"
+      data-testid={testId}
       {...mergeProps(
         themeProps('chat-system-message', {variant}),
         stylex.props(styles.root, xstyle),
         className,
         styleProp,
-      )}
-      {...rest}
-      role="status">
+      )}>
       <span {...stylex.props(styles.content)}>
         {icon != null && <span {...stylex.props(styles.icon)}>{icon}</span>}
         {children}