@astryxdesign/core 0.1.4-canary.37c19d3 → 0.1.4-canary.39ffd21

package/src/Banner/Banner.test.tsx

@@ -270,44 +270,6 @@ describe('Banner', () => {
     expect(expandIndex).toBeLessThan(dismissIndex);
   });
 
-  it('links the expand toggle to its content region via aria-controls', () => {
-    render(
-      <Banner status="info" title="Controls Test" defaultIsExpanded>
-        <div data-testid="region-content">Region content</div>
-      </Banner>,
-    );
-
-    const toggle = screen.getByRole('button', {name: 'Collapse'});
-    const controlsId = toggle.getAttribute('aria-controls');
-    // aria-controls must be present and point at the real content region.
-    expect(controlsId).toBeTruthy();
-    const region = document.getElementById(controlsId as string);
-    expect(region).not.toBeNull();
-    expect(region).toContainElement(screen.getByTestId('region-content'));
-  });
-
-  it('sets aria-controls only while the content region is mounted', async () => {
-    const user = userEvent.setup();
-    render(
-      <Banner status="info" title="Controls Toggle">
-        <div data-testid="region-content">Region content</div>
-      </Banner>,
-    );
-
-    // Collapsed: the region is unmounted, so no dangling aria-controls target.
-    const collapsedToggle = screen.getByRole('button', {name: 'Expand'});
-    expect(collapsedToggle).not.toHaveAttribute('aria-controls');
-
-    // Expanded: aria-controls resolves to the mounted region with the children.
-    await user.click(collapsedToggle);
-    const expandedToggle = screen.getByRole('button', {name: 'Collapse'});
-    const controlsId = expandedToggle.getAttribute('aria-controls');
-    expect(controlsId).toBeTruthy();
-    const region = document.getElementById(controlsId as string);
-    expect(region).not.toBeNull();
-    expect(region).toContainElement(screen.getByTestId('region-content'));
-  });
-
   it('does not render content area when no children', () => {
     const {container} = render(<Banner status="info" title="No Children" />);
     const root = container.firstElementChild;

package/src/Banner/Banner.tsx

@@ -31,7 +31,7 @@
  * - /packages/cli/templates/blocks/components/Banner/ (showcase blocks)
  */
 
-import {useId, useState, type ReactNode} from 'react';
+import {useState, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import type {BaseProps} from '../BaseProps';
 import {Button} from '../Button';
@@ -387,11 +387,6 @@ export function Banner({
 }: BannerProps) {
   const [isDismissed, setIsDismissed] = useState(false);
   const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
-  // Links the expand/collapse toggle to the content region it shows/hides so
-  // assistive tech can move from the button to its controlled content
-  // (disclosure pattern). The region is conditionally rendered, so aria-controls
-  // below is set only while it's mounted to avoid a dangling reference.
-  const contentId = useId();
   const defaultIconName = defaultIconNames[status];
   const role = statusRole[status];
   const iconColor = statusIconColor[status];
@@ -482,7 +477,6 @@ export function Banner({
                 }
                 onClick={handleToggleExpand}
                 aria-expanded={isExpanded}
-                aria-controls={showContent ? contentId : undefined}
                 isIconOnly
               />
             )}
@@ -503,7 +497,6 @@ export function Banner({
       {/* Content area: collapsible card background — theme target ('banner-content') */}
       {showContent && (
         <div
-          id={contentId}
           {...mergeProps(
             themeProps('banner-content', {container, status}),
             stylex.props(styles.contentArea, isCard && styles.contentAreaCard),

package/src/Calendar/Calendar.doc.mjs

@@ -19,7 +19,7 @@ export const docs = {
       {guidance: false, description: 'Disable large blocks of dates without context. The user should understand why dates are unavailable.'},
     ],
     anatomy: [
-      {name: 'Month header', required: true, description: 'The month name and year with navigation arrows to move between months. The arrows mirror automatically under dir="rtl".'},
+      {name: 'Month header', required: true, description: 'The month name and year with navigation arrows to move between months.'},
       {name: 'Day grid', required: true, description: 'A 7-column grid of days with column headers for the day names.'},
       {name: 'Selected day', required: false, description: 'The currently selected date, highlighted. In range mode, the start and end dates plus the days between them.'},
       {name: 'Today marker', required: false, description: 'A subtle indicator on the current date for orientation.'},

package/src/Calendar/Calendar.test.tsx

@@ -12,10 +12,8 @@
 import {describe, it, expect, vi} from 'vitest';
 import {act, render, screen, within} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import * as stylex from '@stylexjs/stylex';
 import {Calendar} from './Calendar';
 import type {CalendarHandle} from './Calendar';
-import {calendarStyles} from './styles';
 
 /**
  * Helper to find a day button by its day number.
@@ -73,24 +71,6 @@ describe('Calendar', () => {
     expect(screen.getByText(expectedLabel)).toBeInTheDocument();
   });
 
-  it("marks today's cell with aria-current='date'", () => {
-    render(<Calendar />);
-
-    const now = new Date();
-    const iso = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`;
-
-    const todayCell = document.querySelector(`button[data-date="${iso}"]`);
-    expect(todayCell).not.toBeNull();
-    expect(todayCell).toHaveAttribute('aria-current', 'date');
-
-    // Only today's cell is marked current.
-    const others = Array.from(
-      document.querySelectorAll('button[data-date]'),
-    ).filter(el => el.getAttribute('data-date') !== iso);
-    expect(others.length).toBeGreaterThan(0);
-    others.forEach(el => expect(el).not.toHaveAttribute('aria-current'));
-  });
-
   it('displays day names', () => {
     render(<Calendar />);
 
@@ -117,11 +97,7 @@ describe('Calendar', () => {
     render(<Calendar value="2026-01-15" focusDate="2026-01-01" />);
 
     const day15 = getDayButton(15);
-    // In an ARIA grid, selection state lives on the gridcell, not the button
-    // (a plain button role does not permit aria-selected).
-    const gridcell15 = day15.closest('[role="gridcell"]');
-    expect(gridcell15).toHaveAttribute('aria-selected', 'true');
-    expect(day15).not.toHaveAttribute('aria-selected');
+    expect(day15).toHaveAttribute('aria-selected', 'true');
   });
 
   it('calls onChange when date is selected', async () => {
@@ -239,33 +215,6 @@ describe('Calendar', () => {
     expect(screen.getByText(/February 2026.*March 2026/)).toBeInTheDocument();
   });
 
-  it('clamps out-of-range numberOfMonths to a single month', () => {
-    // 1000 would otherwise try to render 1000 month grids and lock the page up.
-    render(
-      <Calendar
-        numberOfMonths={1000 as unknown as 1 | 2}
-        focusDate="2026-01-01"
-      />,
-    );
-
-    // Only the focused month renders — no second month, no range separator.
-    expect(screen.getByText('January 2026')).toBeInTheDocument();
-    expect(screen.queryByText(/February 2026/)).not.toBeInTheDocument();
-  });
-
-  it('clamps numberOfMonths={0} to a single month', () => {
-    render(
-      <Calendar
-        numberOfMonths={0 as unknown as 1 | 2}
-        focusDate="2026-01-01"
-      />,
-    );
-
-    // 0 previously rendered no months at all; now falls back to one.
-    expect(screen.getByText('January 2026')).toBeInTheDocument();
-    expect(screen.getAllByRole('gridcell').length).toBeGreaterThan(0);
-  });
-
   // ─── Display Options ─────────────────────────────────────────
 
   it('shows week numbers when hasWeekNumbers is true', () => {
@@ -361,22 +310,9 @@ describe('Calendar', () => {
     const day12 = getDayButton(12);
     const day15 = getDayButton(15);
 
-    // Selection state lives on the gridcell wrapper, not the day button.
-    expect(day10.closest('[role="gridcell"]')).toHaveAttribute(
-      'aria-selected',
-      'true',
-    );
-    expect(day12.closest('[role="gridcell"]')).toHaveAttribute(
-      'aria-selected',
-      'true',
-    );
-    expect(day15.closest('[role="gridcell"]')).toHaveAttribute(
-      'aria-selected',
-      'true',
-    );
-    expect(day10).not.toHaveAttribute('aria-selected');
-    expect(day12).not.toHaveAttribute('aria-selected');
-    expect(day15).not.toHaveAttribute('aria-selected');
+    expect(day10).toHaveAttribute('aria-selected', 'true');
+    expect(day12).toHaveAttribute('aria-selected', 'true');
+    expect(day15).toHaveAttribute('aria-selected', 'true');
   });
 
   it('caps the range highlight next to a disabled mid-range day (#2715)', () => {
@@ -739,48 +675,4 @@ describe('Calendar', () => {
       }
     }
   });
-
-  // ─── RTL (#3388) ─────────────────────────────────────────────
-
-  describe('RTL month navigation', () => {
-    // jsdom does not apply compiled StyleX CSS, so the scaleX(-1) mirror
-    // itself is only observable in a browser (see the dir="rtl" Storybook
-    // story). These tests pin the structure the fix depends on: both nav
-    // chevrons render inside the navIcon wrapper that carries the
-    // ':is([dir="rtl"] *)' conditional transform.
-    it('wraps both nav chevrons in the RTL-mirroring navIcon wrapper', () => {
-      render(<Calendar focusDate="2026-01-01" />);
-
-      const {className: navIconClass} = stylex.props(calendarStyles.navIcon);
-      expect(navIconClass).toBeTruthy();
-
-      for (const name of ['Previous month', 'Next month']) {
-        const button = screen.getByRole('button', {name});
-        const wrappers = Array.from(button.querySelectorAll('span')).filter(
-          span => span.className === navIconClass,
-        );
-        expect(wrappers.length).toBe(1);
-      }
-    });
-
-    it('keeps navigation semantics unchanged under dir="rtl"', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <div dir="rtl">
-          <Calendar focusDate="2026-02-01" />
-        </div>,
-      );
-
-      expect(screen.getByText('February 2026')).toBeInTheDocument();
-
-      // DOM order and handlers must not change in RTL: flexbox already
-      // places "Previous month" at the visual right; only the glyph mirrors.
-      await user.click(screen.getByRole('button', {name: 'Previous month'}));
-      expect(screen.getByText('January 2026')).toBeInTheDocument();
-
-      await user.click(screen.getByRole('button', {name: 'Next month'}));
-      expect(screen.getByText('February 2026')).toBeInTheDocument();
-    });
-  });
 });

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/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/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

@@ -340,7 +340,6 @@ export function Carousel({
       {...htmlProps}>
       <div
         ref={composedRef}
-        tabIndex={0}
         {...stylex.props(
           styles.scroller,
           gapStyles[gap],

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/ChatToolCalls.test.tsx

@@ -97,59 +97,4 @@ describe('ChatToolCalls', () => {
     );
     expect(screen.getByText('git status')).toBeInTheDocument();
   });
-
-  it('exposes no aria-expanded on a call row without resultDetail', () => {
-    const {container} = render(
-      <ChatToolCalls calls={[{name: 'bash', status: 'complete'}]} />,
-    );
-    expect(container.querySelector('[aria-expanded]')).toBeNull();
-  });
-
-  it('wires disclosure semantics on an expandable call row', () => {
-    render(
-      <ChatToolCalls
-        calls={[
-          {
-            name: 'readFile',
-            status: 'complete',
-            resultDetail: <div>file contents here</div>,
-          },
-        ]}
-      />,
-    );
-    const row = screen.getByRole('button');
-    expect(row).toHaveAttribute('aria-expanded', 'false');
-    // Detail panel is conditionally mounted, so no aria-controls while closed.
-    expect(row).not.toHaveAttribute('aria-controls');
-    expect(screen.queryByText('file contents here')).not.toBeInTheDocument();
-
-    fireEvent.click(row);
-
-    expect(row).toHaveAttribute('aria-expanded', 'true');
-    const detailId = row.getAttribute('aria-controls');
-    expect(detailId).toBeTruthy();
-    const panel = document.getElementById(detailId as string);
-    expect(panel).not.toBeNull();
-    expect(panel).toHaveTextContent('file contents here');
-  });
-
-  it('points the group header aria-controls at the content region', () => {
-    render(
-      <ChatToolCalls
-        defaultIsExpanded={true}
-        calls={[
-          {name: 'searchCode', status: 'complete'},
-          {name: 'readFile', status: 'complete'},
-        ]}
-      />,
-    );
-    const header = screen.getByRole('button');
-    expect(header).toHaveAttribute('aria-expanded', 'true');
-    const regionId = header.getAttribute('aria-controls');
-    expect(regionId).toBeTruthy();
-    const region = document.getElementById(regionId as string);
-    expect(region).not.toBeNull();
-    expect(region).toHaveTextContent('searchCode');
-    expect(region).toHaveTextContent('readFile');
-  });
 });

package/src/Chat/ChatToolCalls.tsx

@@ -18,7 +18,7 @@
  * for builders to wire up.
  */
 
-import React, {useState, useCallback, useId, type ReactNode} from 'react';
+import React, {useState, useCallback, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {
@@ -41,7 +41,11 @@ import {themeProps} from '../utils/themeProps';
 // Types
 // =============================================================================
 
-export type ChatToolCallStatus = 'pending' | 'running' | 'complete' | 'error';
+export type ChatToolCallStatus =
+  | 'pending'
+  | 'running'
+  | 'complete'
+  | 'error';
 
 export interface ChatToolCallItem {
   /** Tool/function name. */
@@ -352,7 +356,6 @@ function CallRow({call}: {call: ChatToolCallItem}) {
   const status = call.status ?? 'complete';
   const hasDetail = call.resultDetail != null;
   const [isDetailOpen, setIsDetailOpen] = useState(false);
-  const detailId = useId();
 
   const toggleDetail = hasDetail
     ? () => setIsDetailOpen(prev => !prev)
@@ -362,8 +365,6 @@ function CallRow({call}: {call: ChatToolCallItem}) {
     <div
       role={hasDetail ? 'button' : undefined}
       tabIndex={hasDetail ? 0 : undefined}
-      aria-expanded={hasDetail ? isDetailOpen : undefined}
-      aria-controls={hasDetail && isDetailOpen ? detailId : undefined}
       onClick={toggleDetail}
       onKeyDown={
         hasDetail
@@ -398,7 +399,11 @@ function CallRow({call}: {call: ChatToolCallItem}) {
       </span>
       <span {...stylex.props(styles.callName)}>{call.name}</span>
       {call.node != null && (
-        <Badge label={call.node} variant="neutral" xstyle={styles.nodePill} />
+        <Badge
+          label={call.node}
+          variant="neutral"
+          xstyle={styles.nodePill}
+        />
       )}
       {call.target != null && (
         <span {...stylex.props(styles.callLabel)}>{call.target}</span>
@@ -443,7 +448,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
     <div>
       {row}
       {isDetailOpen && (
-        <div id={detailId} {...stylex.props(styles.callDetailContent)}>
+        <div {...stylex.props(styles.callDetailContent)}>
           {call.resultDetail}
         </div>
       )}
@@ -492,7 +497,6 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
 
   const autoDefault = defaultIsExpanded ?? false;
   const [internalExpanded, setInternalExpanded] = useState(autoDefault);
-  const contentId = useId();
   const isControlled = controlledExpanded !== undefined;
   const isExpanded = isControlled ? controlledExpanded : internalExpanded;
 
@@ -544,7 +548,6 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
         role="button"
         tabIndex={0}
         aria-expanded={isExpanded}
-        aria-controls={contentId}
         onClick={toggle}
         onKeyDown={e => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -610,7 +613,6 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
 
       {/* Expanded: all calls with full metadata */}
       <div
-        id={contentId}
         {...stylex.props(
           styles.groupContent,
           isExpanded && styles.groupContentExpanded,

package/src/CheckboxInput/CheckboxInput.doc.mjs

@@ -125,7 +125,7 @@ export const docs = {
   theming: {
     targets: [
       {className: 'astryx-checkbox-input', visualProps: ['size']},
-      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox'},
     ],
   },
   usage: {
@@ -178,7 +178,7 @@ export const docsZh = {
     {name: 'isLoading', type: 'boolean', description: '复选框是否处于加载状态。显示旋转器并阻止交互。', default: 'false'},
     {name: 'isDisabled', type: 'boolean', description: '复选框是否禁用。', default: 'false'},
     {name: 'htmlName', type: 'string', description: '底层复选框输入的 HTML name 属性，用于表单提交（勾选时提交 "on"）。'},
-    {name: 'disabledMessage', type: 'string', description: 'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip: disabled controls swallow the hover events an external Tooltip needs.'},
+    {name: 'disabledMessage', type: 'string', description: 'Explains why the checkbox is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the checkbox focusable via aria-disabled (toggling stays blocked). Use this instead of wrapping a disabled CheckboxInput in Tooltip — disabled controls swallow the hover events an external Tooltip needs.'},
     {name: 'isReadOnly', type: 'boolean', description: '复选框是否为只读。以完整不透明度显示当前状态但阻止交互。与 isDisabled 不同，只读复选框不会变暗。', default: 'false'},
     {name: 'isOptional', type: 'boolean', description: '字段是否可选。与 isRequired 互斥。', default: 'false'},
     {name: 'isRequired', type: 'boolean', description: '复选框是否必填。与 isOptional 互斥。', default: 'false'},
@@ -200,7 +200,7 @@ export const docsZh = {
           'size',
         ],
       },
-      {className: 'astryx-checkbox', visualProps: ['size'], states: ['checked', 'disabled']},
+      {className: 'astryx-checkbox'},
     ],
   },
 };