@astryxdesign/core 0.5.1 → 0.5.2-canary.1917581

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/CheckboxInput/CheckboxInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'CheckboxInput',
   displayName: 'Checkbox Input',
   group: 'Checkbox',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["checkbox","check","toggle","tick","indeterminate","boolean","tristate"],
   props: [
     {

package/src/CheckboxList/CheckboxList.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'CheckboxList',
   displayName: 'Checkbox List',
   group: 'Checkbox',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: ["checkboxlist","checkbox","checkboxgroup","multichoice","multiselect","checklist"],
   description: 'Checkbox group container with field integration for label, description, and status.',

package/src/ComplexSelector/ComplexSelector.doc.mjs

@@ -15,7 +15,7 @@ export const docs = {
   name: 'ComplexSelector',
   displayName: 'Complex Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'selector',
     'picker',
@@ -214,7 +214,7 @@ export const docsDense = {
   name: 'ComplexSelector',
   displayName: 'Complex Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   description:
     'Input/ghost trigger + dialog-popover shell for rich custom selectors. Content gets value/onChange/close/state; content owns semantics. Use focus hooks and evaluate custom content against WCAG 2.2.',
   usage: {

package/src/DateInput/DateInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateInput',
   displayName: 'Date Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'dateinput',
     'datepicker',

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateRangeInput',
   displayName: 'Date Range Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'daterangepicker',
     'daterange',

package/src/DateTimeInput/DateTimeInput.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'DateTimeInput',
   displayName: 'Date Time Input',
   group: 'DateInput',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'datetimepicker',
     'datetime',

package/src/Field/Field.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Field',
   displayName: 'Field',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["field","formfield","formgroup","formcontrol","label","input","required","optional","helpertext","hint"],
   playground: {
     defaults: {

package/src/FieldStatus/FieldStatus.doc.mjs

@@ -5,7 +5,7 @@ export const docs = {
   name: 'FieldStatus',
   displayName: 'Field Status',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   description:
     'Status message component for form field validation feedback. Messages are announced to screen readers through persistent live regions (assertive for errors, polite otherwise), so conditional mounting is safe.',

package/src/FileInput/FileInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'FileInput',
   displayName: 'File Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: ["fileinput","file","upload","drag","drop","dropzone","attachment","browse"],
   props: [
     {

package/src/Indicator/Indicator.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'Indicator',
   displayName: 'Indicator',
   group: 'Indicator',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: [
     'indicator',

package/src/InputGroup/InputGroup.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'InputGroup',
   displayName: 'Input Group',
   group: 'Field',
-  category: 'Data Input',
+  category: 'Form Controls',
   isHiddenFromOverview: true,
   keywords: [
     'inputgroup',

package/src/MultiSelector/MultiSelector.doc.mjs

@@ -6,7 +6,7 @@ export const docs = {
   name: 'MultiSelector',
   displayName: 'Multi Selector',
   group: 'Selector',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'multiselect',
     'checkbox',

package/src/NumberInput/NumberInput.doc.mjs

@@ -5,7 +5,7 @@
 export const docs = {
   name: 'NumberInput',
   displayName: 'Number Input',
-  category: 'Data Input',
+  category: 'Form Controls',
   keywords: [
     'numberinput',
     'numberfield',

package/src/Popover/Popover.doc.mjs

@@ -64,7 +64,7 @@ export const docs = {
         {
           name: 'width',
           type: 'number | string',
-          description: 'Width of the popover container.',
+          description: 'Width of the popover container. The layer still caps to the viewport with alignment-aware safe-area gutters before scrolling long content.',
           default: "'auto'",
         },
         {
@@ -101,7 +101,7 @@ export const docs = {
         {
           name: 'hasAutoFocus',
           type: 'boolean',
-          description: 'Whether to auto-focus the first focusable element when the popover opens. Set to false for inline showcases or documentation previews.',
+          description: 'Whether to move focus into the popover when it opens. Keyboard activation focuses the first content control; pointer activation focuses the labeled dialog container so an action does not appear preselected. Set to false for inline showcases or documentation previews.',
           default: 'true',
         },
         {
@@ -149,8 +149,8 @@ export const docs = {
       { guidance: true, description: 'Keep popover content focused on a single task or piece of information.' },
       { guidance: true, description: 'Provide a clear way to close: either by clicking outside or with an explicit close button.' },
       { guidance: false, description: 'Nest popovers inside other popovers; it creates confusing focus and navigation.' },
-      { guidance: false, description: 'Use a popover for content that requires heavy user input; use a Dialog instead.' },
-      { guidance: false, description: 'Put too much content in a popover; if it needs scrolling, use a Dialog instead.' },
+      { guidance: false, description: 'Assume input complexity alone determines the presentation; evaluate the task’s focus, space, and interaction requirements.' },
+      { guidance: false, description: 'Assume scrolling alone means Popover is the wrong component; a bounded Popover may scroll while a focused anchored interaction remains appropriate.' },
     ],
     anatomy: [
       {name: 'Header', required: true, description: 'Contains the title, optional subheader, and close button.'},
@@ -220,7 +220,7 @@ export const docsZh = {
         {
           name: 'width',
           type: 'number | string',
-          description: '弹出框容器的宽度。',
+          description: '弹出框容器的宽度。弹出层仍会限制在视口和安全区域留白内，长内容再滚动。',
           default: "'auto'",
         },
         {
@@ -294,8 +294,8 @@ export const docsZh = {
       { guidance: true, description: 'Keep popover content focused on a single task or piece of information.' },
       { guidance: true, description: 'Provide a clear way to close: either by clicking outside or with an explicit close button.' },
       { guidance: false, description: 'Nest popovers inside other popovers; it creates confusing focus and navigation.' },
-      { guidance: false, description: 'Use a popover for content that requires heavy user input; use a Dialog instead.' },
-      { guidance: false, description: 'Put too much content in a popover; if it needs scrolling, use a Dialog instead.' },
+      { guidance: false, description: 'Assume input complexity alone determines the presentation; evaluate the task’s focus, space, and interaction requirements.' },
+      { guidance: false, description: 'Assume scrolling alone means Popover is the wrong component; a bounded Popover may scroll while a focused anchored interaction remains appropriate.' },
     ],
     anatomy: [
       {name: 'Header', required: true, description: 'Contains the title, optional subheader, and close button.'},
@@ -316,8 +316,8 @@ export const docsDense = {
       { guidance: true, description: 'Keep popover content focused on a single task or piece of information.' },
       { guidance: true, description: 'Provide a clear way to close: either by clicking outside or with an explicit close button.' },
       { guidance: false, description: 'Nest popovers inside other popovers; it creates confusing focus and navigation.' },
-      { guidance: false, description: 'Use a popover for content that requires heavy user input; use a Dialog instead.' },
-      { guidance: false, description: 'Put too much content in a popover; if it needs scrolling, use a Dialog instead.' },
+      { guidance: false, description: 'Assume input complexity alone determines the presentation; evaluate the task’s focus, space, and interaction requirements.' },
+      { guidance: false, description: 'Assume scrolling alone means Popover is the wrong component; a bounded Popover may scroll while a focused anchored interaction remains appropriate.' },
     ],
     anatomy: [
       {name: 'Header', required: true, description: 'Contains the title, optional subheader, and close button.'},
@@ -340,11 +340,11 @@ export const docsDense = {
         isOpen: 'Whether popover shown in controlled mode.',
         onOpenChange: 'Callback fired when popover visibility changes.',
         isEnabled: 'When false, trigger interactions ignored.',
-        width: 'Popover container width.',
+        width: 'Popover container width; capped to alignment-aware viewport/safe-area gutters before long content scrolls.',
         label: 'Accessible label for popover dialog.',
         hasCloseButton: 'Whether to include hidden close button for accessibility.',
         closeButtonLabel: 'Label for hidden close button.',
-        hasAutoFocus: 'Auto-focus first element on open; false for showcases.',
+        hasAutoFocus: 'Move focus into the popover on open; keyboard targets the first control and pointer targets the dialog container.',
         hasLightDismiss: 'Outside click dismisses; false for explicit-dismiss surfaces (coachmarks).',
         hasEscapeDismiss: 'Escape dismisses; full effect only with hasLightDismiss=false.',
       },