@astryxdesign/core 0.5.2-canary.c9c8564 → 0.5.2-canary.e03511b

package/src/Carousel/Carousel.test.tsx

@@ -850,4 +850,87 @@ describe('Carousel', () => {
       expect(scroller).not.toHaveAttribute('data-padding');
     });
   });
+
+  describe('edge fade', () => {
+    function getScroller() {
+      const region = screen.getByRole('region');
+      return region.firstElementChild as HTMLElement;
+    }
+
+    function makeOverflowing(el: HTMLElement, scrollLeft: number) {
+      Object.defineProperty(el, 'scrollWidth', {
+        value: 500,
+        configurable: true,
+      });
+      Object.defineProperty(el, 'clientWidth', {
+        value: 200,
+        configurable: true,
+      });
+      Object.defineProperty(el, 'scrollLeft', {
+        value: scrollLeft,
+        writable: true,
+        configurable: true,
+      });
+      fireEvent.scroll(el);
+    }
+
+    function injectedCss(): string {
+      let out = '';
+      for (const sheet of Array.from(document.styleSheets)) {
+        try {
+          for (const rule of Array.from(sheet.cssRules)) {
+            out += rule.cssText + '\n';
+          }
+        } catch {
+          // Ignore cross-origin sheets.
+        }
+      }
+      return out;
+    }
+
+    it('fades the physical left edge when only the start overflows (LTR)', () => {
+      render(
+        <Carousel aria-label="Fade">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      makeOverflowing(scroller, 300);
+      expect(getComputedStyle(scroller).maskImage).toContain(
+        'linear-gradient(to right',
+      );
+    });
+
+    it('fades the physical right edge when only the end overflows (LTR)', () => {
+      render(
+        <Carousel aria-label="Fade">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const scroller = getScroller();
+      makeOverflowing(scroller, 0);
+      expect(getComputedStyle(scroller).maskImage).toContain(
+        'linear-gradient(to left',
+      );
+    });
+
+    it('mirrors both single-edge fade gradients under RTL', () => {
+      render(
+        <Carousel aria-label="Fade">
+          <div>Item 1</div>
+          <div>Item 2</div>
+        </Carousel>,
+      );
+      const css = injectedCss();
+      expect(css).toMatch(
+        /:is\(\[dir="rtl"\][^)]*\)[^{]*\{\s*mask-image:\s*linear-gradient\(to left/,
+      );
+      expect(css).toMatch(
+        /:is\(\[dir="rtl"\][^)]*\)[^{]*\{\s*mask-image:\s*linear-gradient\(to right/,
+      );
+    });
+  });
+
 });

package/src/Carousel/Carousel.tsx

@@ -178,10 +178,16 @@ const styles = stylex.create({
     maskImage: 'none',
   },
   fadeStart: {
-    maskImage: `linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 2px, black ${spacingVars['--spacing-1']})`,
+    maskImage: {
+      default: `linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 2px, black ${spacingVars['--spacing-1']})`,
+      ':is([dir="rtl"] *)': `linear-gradient(to left, transparent 0%, rgba(0,0,0,0.3) 2px, black ${spacingVars['--spacing-1']})`,
+    },
   },
   fadeEnd: {
-    maskImage: `linear-gradient(to left, transparent 0%, rgba(0,0,0,0.3) 2px, black ${spacingVars['--spacing-1']})`,
+    maskImage: {
+      default: `linear-gradient(to left, transparent 0%, rgba(0,0,0,0.3) 2px, black ${spacingVars['--spacing-1']})`,
+      ':is([dir="rtl"] *)': `linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 2px, black ${spacingVars['--spacing-1']})`,
+    },
   },
   fadeBoth: {
     maskImage: `linear-gradient(to right, transparent 0%, rgba(0,0,0,0.3) 2px, black ${spacingVars['--spacing-1']}, black calc(100% - ${spacingVars['--spacing-1']}), rgba(0,0,0,0.3) calc(100% - 2px), transparent 100%)`,

package/src/Chat/ChatToolCalls.test.tsx

@@ -46,6 +46,50 @@ describe('ChatToolCalls', () => {
     expect(screen.queryByText('1.2s')).not.toBeInTheDocument();
   });
 
+  it.each([
+    ['pending', 'Pending'],
+    ['running', 'Running'],
+    ['complete', 'Complete'],
+    ['error', 'Failed'],
+  ] as const)(
+    'names the %s status for assistive technology',
+    (status, label) => {
+      render(<ChatToolCalls calls={[{name: 'bash', status}]} />);
+      expect(screen.getByText(label)).toBeInTheDocument();
+    },
+  );
+
+  it('includes the status in an expandable row accessible name', () => {
+    render(
+      <ChatToolCalls
+        calls={[
+          {
+            name: 'readFile',
+            status: 'running',
+            resultDetail: <div>file contents</div>,
+          },
+        ]}
+      />,
+    );
+    expect(
+      screen.getByRole('button', {name: /Running.*readFile/}),
+    ).toBeInTheDocument();
+  });
+
+  it('includes the latest status in a collapsed group accessible name', () => {
+    render(
+      <ChatToolCalls
+        calls={[
+          {name: 'searchCode', status: 'complete'},
+          {name: 'editFile', status: 'running'},
+        ]}
+      />,
+    );
+    expect(
+      screen.getByRole('button', {name: /Running.*editFile/}),
+    ).toBeInTheDocument();
+  });
+
   it('defaults to collapsed', () => {
     render(
       <ChatToolCalls

package/src/Chat/ChatToolCalls.tsx

@@ -365,6 +365,26 @@ const STATUS_STYLES: Record<
   error: styles.colorError,
 };
 
+function getStatusAnnouncement(
+  t: ReturnType<typeof useTranslator>,
+  status: ChatToolCallStatus,
+  errorMessage?: string,
+): string {
+  if (status === 'error' && errorMessage != null) {
+    return t('@astryx.chatToolCalls.error', {message: errorMessage});
+  }
+  switch (status) {
+    case 'pending':
+      return t('@astryx.chatToolCalls.status.pending');
+    case 'running':
+      return t('@astryx.chatToolCalls.status.running');
+    case 'complete':
+      return t('@astryx.chatToolCalls.status.complete');
+    case 'error':
+      return t('@astryx.chatToolCalls.status.error');
+  }
+}
+
 function getToolCallKey(call: ChatToolCallItem): string {
   return getKey(call.key, () =>
     [
@@ -390,6 +410,11 @@ function CallRow({call}: {call: ChatToolCallItem}) {
   const hasDetail = call.resultDetail != null;
   const [isDetailOpen, setIsDetailOpen] = useState(false);
   const detailId = useId();
+  const statusAnnouncement = getStatusAnnouncement(
+    t,
+    status,
+    call.errorMessage,
+  );
 
   const toggleDetail = hasDetail
     ? () => setIsDetailOpen(prev => !prev)
@@ -417,9 +442,9 @@ function CallRow({call}: {call: ChatToolCallItem}) {
         title={status === 'error' ? call.errorMessage : undefined}
         {...stylex.props(styles.statusIcon, STATUS_STYLES[status])}>
         {status === 'running' ? (
-          <Spinner size="sm" shade="subtle" />
+          <Spinner size="sm" shade="subtle" aria-hidden="true" />
         ) : status === 'pending' ? (
-          <Spinner size="sm" shade="subtle" />
+          <Spinner size="sm" shade="subtle" aria-hidden="true" />
         ) : (
           <>
             <span {...stylex.props(styles.statusIconCircle)} />
@@ -432,17 +457,7 @@ function CallRow({call}: {call: ChatToolCallItem}) {
             </span>
           </>
         )}
-        {status === 'error' && call.errorMessage != null && (
-          // The title attribute above is hover-only; expose the error detail
-          // as real text so it reaches screen readers, keyboard, and touch
-          // users. Rendering it inside the row also folds it into the
-          // accessible name of expandable (role="button") rows.
-          <VisuallyHidden>
-            {t('@astryx.chatToolCalls.error', {
-              message: call.errorMessage ?? '',
-            })}
-          </VisuallyHidden>
-        )}
+        <VisuallyHidden>{statusAnnouncement}</VisuallyHidden>
       </span>
       <span {...stylex.props(styles.callName)}>{call.name}</span>
       {call.node != null && (
@@ -581,6 +596,11 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
   // Multiple calls: latest call at surface with chevron to expand all
   const latestCall = calls[calls.length - 1];
   const latestStatus = latestCall.status ?? 'complete';
+  const latestStatusAnnouncement = getStatusAnnouncement(
+    t,
+    latestStatus,
+    latestCall.errorMessage,
+  );
 
   return (
     <div
@@ -620,9 +640,9 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
             <span
               {...stylex.props(styles.statusIcon, STATUS_STYLES[latestStatus])}>
               {latestStatus === 'running' ? (
-                <Spinner size="sm" shade="subtle" />
+                <Spinner size="sm" shade="subtle" aria-hidden="true" />
               ) : latestStatus === 'pending' ? (
-                <Spinner size="sm" shade="subtle" />
+                <Spinner size="sm" shade="subtle" aria-hidden="true" />
               ) : (
                 <>
                   <span {...stylex.props(styles.statusIconCircle)} />
@@ -635,6 +655,7 @@ export function ChatToolCalls(props: ChatToolCallsProps) {
                   </span>
                 </>
               )}
+              <VisuallyHidden>{latestStatusAnnouncement}</VisuallyHidden>
             </span>
             <span {...stylex.props(styles.callName)}>{latestCall.name}</span>
             {latestCall.target != null && (

package/src/CheckboxList/CheckboxList.doc.mjs

@@ -1,5 +1,64 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
+/** @type {import('@astryxdesign/cli/authoring').ComponentAnatomyElement[]} */
+const anatomy = [
+  {
+    name: 'Group',
+    required: true,
+    description: 'Container for the labeled checkbox group.',
+  },
+  {
+    name: 'Group label',
+    required: true,
+    description: 'Text identifying what the checkbox options represent.',
+  },
+  {
+    name: 'Description',
+    required: false,
+    description: 'Helper text below the group label.',
+  },
+  {
+    name: 'Options list',
+    required: true,
+    description: 'List containing the available checkbox options.',
+  },
+  {
+    name: 'Option row',
+    required: true,
+    description: 'Selectable row containing one option.',
+  },
+  {
+    name: 'Checkbox',
+    required: true,
+    description: 'Selection indicator for an option.',
+  },
+  {
+    name: 'Option label',
+    required: true,
+    description: 'Primary content identifying an option.',
+  },
+  {
+    name: 'Option description',
+    required: false,
+    description: 'Secondary text below an option label.',
+  },
+  {
+    name: 'End content',
+    required: false,
+    description: 'Caller-provided content at the end of an option row.',
+  },
+  {
+    name: 'Spinner',
+    required: false,
+    description: 'Loading indicator shown inside the pending checkbox.',
+  },
+  {
+    name: 'Status message',
+    required: false,
+    description: 'Error, warning, or success message below the group.',
+  },
+];
+
 /** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
@@ -8,13 +67,22 @@ export const docs = {
   group: 'Checkbox',
   category: 'Form Controls',
   isHiddenFromOverview: true,
-  keywords: ["checkboxlist","checkbox","checkboxgroup","multichoice","multiselect","checklist"],
-  description: 'Checkbox group container with field integration for label, description, and status.',
+  keywords: [
+    'checkboxlist',
+    'checkbox',
+    'checkboxgroup',
+    'multichoice',
+    'multiselect',
+    'checklist',
+  ],
+  description:
+    'Checkbox group container with field integration for label, description, and status.',
   props: [
     {
       name: 'label',
       type: 'string',
-      description: 'Label text for the checkbox group (always rendered for accessibility).',
+      description:
+        'Label text for the checkbox group (always rendered for accessibility).',
       required: true,
     },
     {
@@ -97,41 +165,89 @@ export const docs = {
     {
       name: 'xstyle',
       type: 'StyleXStyles',
-      description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
+      description:
+        'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  components: [
-    {name: 'CheckboxListItem'},
-  ],
+  components: [{name: 'CheckboxListItem'}],
   usage: {
-    description: 'CheckboxList shows a small group of checkboxes so users can turn several options on or off at once. Place it in settings pages, filter panels, or forms where every choice should be visible without scrolling. For a single standalone checkbox (like "I agree to the terms"), use CheckboxInput instead. If only one option can be picked, use RadioList. If the list is long enough to need searching or scrolling, use MultiSelector instead.',
+    anatomy,
+    description:
+      'CheckboxList shows a small group of checkboxes so users can turn several options on or off at once. Place it in settings pages, filter panels, or forms where every choice should be visible without scrolling. For a single standalone checkbox (like "I agree to the terms"), use CheckboxInput instead. If only one option can be picked, use RadioList. If the list is long enough to need searching or scrolling, use MultiSelector instead.',
     bestPractices: [
-      { guidance: true, description: 'Keep the list short: three to seven options is the sweet spot. Beyond that, switch to MultiSelector which adds search and scrolling.' },
-      { guidance: true, description: 'Turn on dividers (hasDividers) when items have helper text underneath; without them the labels and descriptions blur together.' },
-      { guidance: true, description: 'Write a group label that says what the choices represent: "Export formats" tells users more than "Options".' },
-      { guidance: false, description: 'Show a CheckboxList when the user can only pick one thing; that is what RadioList is for.' },
-      { guidance: false, description: 'Put buttons or links inside the trailing slot (endContent); the whole row is already tappable, so a nested button creates two competing click targets.' },
-      { guidance: false, description: 'Wrap a disabled CheckboxList in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.' },
+      {
+        guidance: true,
+        description:
+          'Keep the list short: three to seven options is the sweet spot. Beyond that, switch to MultiSelector which adds search and scrolling.',
+      },
+      {
+        guidance: true,
+        description:
+          'Turn on dividers (hasDividers) when items have helper text underneath; without them the labels and descriptions blur together.',
+      },
+      {
+        guidance: true,
+        description:
+          'Write a group label that says what the choices represent: "Export formats" tells users more than "Options".',
+      },
+      {
+        guidance: false,
+        description:
+          'Show a CheckboxList when the user can only pick one thing; that is what RadioList is for.',
+      },
+      {
+        guidance: false,
+        description:
+          'Put buttons or links inside the trailing slot (endContent); the whole row is already tappable, so a nested button creates two competing click targets.',
+      },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled CheckboxList in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
   theming: {
-    targets: [
-      {className: 'astryx-checkbox-list'},
-    ],
+    targets: [{className: 'astryx-checkbox-list'}],
   },
 };
 
 /** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
-    description: 'CheckboxList shows a small group of checkboxes so users can turn several options on or off at once. Place it in settings pages, filter panels, or forms where every choice should be visible without scrolling. For a single standalone checkbox (like "I agree to the terms"), use CheckboxInput instead. If only one option can be picked, use RadioList. If the list is long enough to need searching or scrolling, use MultiSelector instead.',
+    description:
+      'CheckboxList shows a small group of checkboxes so users can turn several options on or off at once. Place it in settings pages, filter panels, or forms where every choice should be visible without scrolling. For a single standalone checkbox (like "I agree to the terms"), use CheckboxInput instead. If only one option can be picked, use RadioList. If the list is long enough to need searching or scrolling, use MultiSelector instead.',
     bestPractices: [
-      { guidance: true, description: 'Keep the list short: three to seven options is the sweet spot. Beyond that, switch to MultiSelector which adds search and scrolling.' },
-      { guidance: true, description: 'Turn on dividers (hasDividers) when items have helper text underneath; without them the labels and descriptions blur together.' },
-      { guidance: true, description: 'Write a group label that says what the choices represent: "Export formats" tells users more than "Options".' },
-      { guidance: false, description: 'Show a CheckboxList when the user can only pick one thing; that is what RadioList is for.' },
-      { guidance: false, description: 'Put buttons or links inside the trailing slot (endContent); the whole row is already tappable, so a nested button creates two competing click targets.' },
-      { guidance: false, description: 'Wrap a disabled CheckboxList in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.' },
+      {
+        guidance: true,
+        description:
+          'Keep the list short: three to seven options is the sweet spot. Beyond that, switch to MultiSelector which adds search and scrolling.',
+      },
+      {
+        guidance: true,
+        description:
+          'Turn on dividers (hasDividers) when items have helper text underneath; without them the labels and descriptions blur together.',
+      },
+      {
+        guidance: true,
+        description:
+          'Write a group label that says what the choices represent: "Export formats" tells users more than "Options".',
+      },
+      {
+        guidance: false,
+        description:
+          'Show a CheckboxList when the user can only pick one thing; that is what RadioList is for.',
+      },
+      {
+        guidance: false,
+        description:
+          'Put buttons or links inside the trailing slot (endContent); the whole row is already tappable, so a nested button creates two competing click targets.',
+      },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled CheckboxList in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
 };
@@ -141,14 +257,39 @@ export const docsDense = {
   description:
     'Checkbox group component for multi-value selection. Collection mode (parent state) + standalone mode (per-item state).',
   usage: {
-    description: 'CheckboxList shows a small group of checkboxes so users can turn several options on or off at once. Place it in settings pages, filter panels, or forms where every choice should be visible without scrolling. For a single standalone checkbox (like "I agree to the terms"), use CheckboxInput instead. If only one option can be picked, use RadioList. If the list is long enough to need searching or scrolling, use MultiSelector instead.',
+    description:
+      'CheckboxList shows a small group of checkboxes so users can turn several options on or off at once. Place it in settings pages, filter panels, or forms where every choice should be visible without scrolling. For a single standalone checkbox (like "I agree to the terms"), use CheckboxInput instead. If only one option can be picked, use RadioList. If the list is long enough to need searching or scrolling, use MultiSelector instead.',
     bestPractices: [
-      { guidance: true, description: 'Keep the list short: three to seven options is the sweet spot. Beyond that, switch to MultiSelector which adds search and scrolling.' },
-      { guidance: true, description: 'Turn on dividers (hasDividers) when items have helper text underneath; without them the labels and descriptions blur together.' },
-      { guidance: true, description: 'Write a group label that says what the choices represent: "Export formats" tells users more than "Options".' },
-      { guidance: false, description: 'Show a CheckboxList when the user can only pick one thing; that is what RadioList is for.' },
-      { guidance: false, description: 'Put buttons or links inside the trailing slot (endContent); the whole row is already tappable, so a nested button creates two competing click targets.' },
-      { guidance: false, description: 'Wrap a disabled CheckboxList in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.' },
+      {
+        guidance: true,
+        description:
+          'Keep the list short: three to seven options is the sweet spot. Beyond that, switch to MultiSelector which adds search and scrolling.',
+      },
+      {
+        guidance: true,
+        description:
+          'Turn on dividers (hasDividers) when items have helper text underneath; without them the labels and descriptions blur together.',
+      },
+      {
+        guidance: true,
+        description:
+          'Write a group label that says what the choices represent: "Export formats" tells users more than "Options".',
+      },
+      {
+        guidance: false,
+        description:
+          'Show a CheckboxList when the user can only pick one thing; that is what RadioList is for.',
+      },
+      {
+        guidance: false,
+        description:
+          'Put buttons or links inside the trailing slot (endContent); the whole row is already tappable, so a nested button creates two competing click targets.',
+      },
+      {
+        guidance: false,
+        description:
+          'Wrap a disabled CheckboxList in Tooltip to explain why it is disabled; disabled controls swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
+      },
     ],
   },
 };