@astryxdesign/core 0.1.9-canary.d2d84f8 → 0.1.9-canary.e00a241

package/src/Switch/Switch.test.tsx

@@ -68,6 +68,28 @@ describe('Switch', () => {
     expect(screen.getByRole('switch')).toBeChecked();
   });
 
+  it('renders with custom size prop (sm / md)', () => {
+    const {rerender} = render(
+      <Switch
+        label="Small switch"
+        value={false}
+        size="sm"
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+
+    rerender(
+      <Switch
+        label="Medium switch"
+        value={false}
+        size="md"
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
   it('calls onChange with new checked state when clicked', async () => {
     const user = userEvent.setup();
     const handleChange = vi.fn();

package/src/Switch/Switch.tsx

@@ -47,17 +47,75 @@ import type {SizeValue} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
 
-// Fixed dimensions: 40px width, 24px height, 16px thumb (off), 20px thumb (on)
-const SWITCH_WIDTH = 40;
-const SWITCH_HEIGHT = 24;
-const THUMB_SIZE_OFF = 16;
-const THUMB_SIZE_ON = 20;
-const TRACK_PADDING = 4;
-// Padding between thumb right edge and track inner edge when on
-const ON_RIGHT_PADDING = 2;
-// Travel distance for on state: positions thumb with ON_RIGHT_PADDING from right edge
-const THUMB_TRAVEL_ON =
-  SWITCH_WIDTH - TRACK_PADDING - THUMB_SIZE_ON - ON_RIGHT_PADDING;
+const wrapperSizeStyles = stylex.create({
+  sm: {
+    width: 32,
+    height: 20,
+  },
+  md: {
+    width: 40,
+    height: 24,
+  },
+});
+
+const inputSizeStyles = stylex.create({
+  sm: {
+    width: 32,
+    height: 20,
+  },
+  md: {
+    width: 40,
+    height: 24,
+  },
+});
+
+const trackSizeStyles = stylex.create({
+  sm: {
+    width: 32,
+    height: 20,
+    padding: 2,
+  },
+  md: {
+    width: 40,
+    height: 24,
+    padding: 4,
+  },
+});
+
+const thumbOffSizeStyles = stylex.create({
+  sm: {
+    width: 14,
+    height: 14,
+    transform: 'translateX(0)',
+  },
+  md: {
+    width: 16,
+    height: 16,
+    transform: 'translateX(0)',
+  },
+});
+
+const thumbOnSizeStyles = stylex.create({
+  sm: {
+    width: 16,
+    height: 16,
+    transform: 'translateX(12px)',
+  },
+  md: {
+    width: 20,
+    height: 20,
+    transform: 'translateX(14px)',
+  },
+});
+
+const labelWrapperSizeStyles = stylex.create({
+  sm: {
+    minHeight: 20,
+  },
+  md: {
+    minHeight: 24,
+  },
+});
 
 const styles = stylex.create({
   container: {
@@ -77,8 +135,6 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     flexShrink: 0,
-    width: SWITCH_WIDTH,
-    height: SWITCH_HEIGHT,
     isolation: 'isolate',
   },
   input: {
@@ -88,8 +144,6 @@ const styles = stylex.create({
     opacity: 0,
     cursor: 'pointer',
     zIndex: 1,
-    width: SWITCH_WIDTH,
-    height: SWITCH_HEIGHT,
   },
   inputDisabled: {
     cursor: 'not-allowed',
@@ -100,9 +154,6 @@ const styles = stylex.create({
   track: {
     display: 'flex',
     alignItems: 'center',
-    width: SWITCH_WIDTH,
-    height: SWITCH_HEIGHT,
-    padding: TRACK_PADDING,
     borderRadius: radiusVars['--radius-full'],
     transitionProperty: 'background-color',
     transitionDuration: {
@@ -159,22 +210,11 @@ const styles = stylex.create({
     },
     transitionTimingFunction: easeVars['--ease-standard'],
   },
-  thumbOff: {
-    width: THUMB_SIZE_OFF,
-    height: THUMB_SIZE_OFF,
-    transform: 'translateX(0)',
-  },
-  thumbOn: {
-    width: THUMB_SIZE_ON,
-    height: THUMB_SIZE_ON,
-    transform: `translateX(${THUMB_TRAVEL_ON}px)`,
-  },
   labelWrapper: {
     display: 'flex',
     flexDirection: 'column',
     gap: spacingVars['--spacing-0-5'],
     justifyContent: 'center',
-    minHeight: SWITCH_HEIGHT,
   },
   description: {
     fontFamily: typographyVars['--font-family-body'],
@@ -313,6 +353,13 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
    * When set with a message, displays a colored message box below the switch.
    */
   status?: InputStatus;
+  /**
+   * Size variant controlling track and thumb dimensions.
+   * - 'sm': 34x20px (matches sm checkbox/radio vertical rhythm)
+   * - 'md': 40x24px (default, matches md checkbox/radio vertical rhythm)
+   * @default 'md'
+   */
+  size?: 'sm' | 'md';
 }
 
 // Dynamic field width (number -> px, string used as-is).
@@ -358,6 +405,7 @@ export function Switch({
   labelPosition = 'end',
   labelSpacing = 'hug',
   status,
+  size = 'md',
   width,
   xstyle,
   className,
@@ -410,7 +458,7 @@ export function Switch({
     describedByParts.length > 0 ? describedByParts.join(' ') : undefined;
 
   const switchElement = (
-    <div {...stylex.props(styles.switchWrapper)}>
+    <div {...stylex.props(styles.switchWrapper, wrapperSizeStyles[size])}>
       <input
         ref={mergeRefs(ref, disabledMessageTooltip.positionRef)}
         id={id}
@@ -447,6 +495,7 @@ export function Switch({
         aria-busy={isBusy || undefined}
         {...stylex.props(
           styles.input,
+          inputSizeStyles[size],
           isDisabled && styles.inputDisabled,
           isBusy && styles.inputBusy,
         )}
@@ -457,9 +506,11 @@ export function Switch({
           themeProps('switch', {
             checked: isOn ? 'checked' : null,
             disabled: isDisabled ? 'disabled' : null,
+            size,
           }),
           stylex.props(
             styles.track,
+            trackSizeStyles[size],
             isOn ? styles.trackOn : styles.trackOff,
             !isDisabled && styles.trackFocus,
             isDisabled && styles.trackDisabled,
@@ -468,8 +519,14 @@ export function Switch({
         )}>
         <div
           {...mergeProps(
-            themeProps('switch-thumb', {checked: isOn ? 'checked' : null}),
-            stylex.props(styles.thumb, isOn ? styles.thumbOn : styles.thumbOff),
+            themeProps('switch-thumb', {
+              checked: isOn ? 'checked' : null,
+              size,
+            }),
+            stylex.props(
+              styles.thumb,
+              isOn ? thumbOnSizeStyles[size] : thumbOffSizeStyles[size],
+            ),
           )}>
           {isBusy && <Spinner size="sm" />}
         </div>
@@ -479,7 +536,7 @@ export function Switch({
   );
 
   const labelElement = (
-    <div {...stylex.props(styles.labelWrapper)}>
+    <div {...stylex.props(styles.labelWrapper, labelWrapperSizeStyles[size])}>
       <FieldLabel
         label={label}
         inputID={id}

package/src/TabList/TabList.doc.mjs

@@ -55,12 +55,6 @@ export const docs = {
       description: 'Whether to show a bottom border divider under the tab list.',
       default: 'false',
     },
-    {
-      name: 'orientation',
-      type: "'horizontal' | 'vertical'",
-      description: "Orientation of the tab strip, controlling which arrow keys move focus between tabs and the reported aria-orientation. 'horizontal': ArrowLeft/ArrowRight. 'vertical': ArrowUp/ArrowDown. Both axes' arrows are accepted regardless.",
-      default: "'horizontal'",
-    },
     {
       name: 'children',
       type: 'ReactNode',

package/src/TabList/TabList.test.tsx

@@ -77,10 +77,9 @@ describe('TabList', () => {
 
   it('does not set aria-orientation on the nav (invalid for role navigation)', () => {
     // Regression: aria-orientation is not an allowed attribute on the
-    // navigation role and produces an axe aria-allowed-attr violation. The
-    // `orientation` prop must drive keyboard/hint behavior without emitting
-    // this attribute, regardless of the value passed.
-    const {rerender} = render(
+    // navigation role and produces an axe aria-allowed-attr violation.
+    // TabList deliberately never sets this attribute.
+    render(
       <TabList value="home" onChange={() => {}}>
         <Tab value="home" label="Home" />
         <Tab value="settings" label="Settings" />
@@ -90,17 +89,6 @@ describe('TabList', () => {
     expect(screen.getByRole('navigation')).not.toHaveAttribute(
       'aria-orientation',
     );
-
-    rerender(
-      <TabList value="home" onChange={() => {}} orientation="vertical">
-        <Tab value="home" label="Home" />
-        <Tab value="settings" label="Settings" />
-      </TabList>,
-    );
-
-    expect(screen.getByRole('navigation')).not.toHaveAttribute(
-      'aria-orientation',
-    );
   });
 
   it('ignores a consumer-supplied aria-orientation on the nav', () => {

package/src/TabList/TabList.tsx

@@ -22,7 +22,7 @@ import * as stylex from '@stylexjs/stylex';
 import {borderVars, colorVars, spacingVars} from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
 import {TabListContext} from './TabListContext';
-import type {TabListOrientation, TabListSize} from './TabListContext';
+import type {TabListSize} from './TabListContext';
 import {useSize} from '../SizeContext/SizeContext';
 import {mergeProps, mergeRefs} from '../utils';
 import {useListFocus} from '../hooks/useListFocus';
@@ -66,15 +66,6 @@ export interface TabListProps extends Omit<BaseProps<HTMLElement>, 'onChange'> {
    * @default false
    */
   hasDivider?: boolean;
-  /**
-   * Orientation of the tab strip, controlling which arrow keys move
-   * focus between tabs.
-   * - `'horizontal'` (default): ArrowLeft / ArrowRight (ArrowUp / ArrowDown
-   *   also work per the WAI-ARIA APG).
-   * - `'vertical'`: ArrowUp / ArrowDown (ArrowLeft / ArrowRight also work).
-   * @default 'horizontal'
-   */
-  orientation?: TabListOrientation;
   /**
    * Tab and TabMenu children.
    */
@@ -130,7 +121,6 @@ export function TabList({
   size: sizeProp,
   layout = 'hug',
   hasDivider = false,
-  orientation = 'horizontal',
   xstyle,
   className,
   style,
@@ -150,14 +140,13 @@ export function TabList({
   // Roving-tabindex keyboard navigation across the tab strip via the shared
   // hook. `orientation: 'both'` accepts both arrow axes per the WAI-ARIA APG
   // allowance for tab strips (ArrowRight/ArrowDown advance, ArrowLeft/ArrowUp
-  // retreat) regardless of the component's `orientation` prop, which only
-  // drives the keyboard hint badge (see useKeyboardHint below). We do not set
-  // `aria-orientation` on the `<nav>`: that attribute is invalid on the
-  // navigation role and triggers an axe `aria-allowed-attr` violation.
+  // retreat). We do not set `aria-orientation` on the `<nav>`: that attribute
+  // is invalid on the navigation role and triggers an axe `aria-allowed-attr`
+  // violation.
   //
   // `hasRovingTabIndex` makes the hook own the single tab stop: it stamps
   // tabindex 0/-1, repairs the stop on mount and as stops mount/unmount or
-  // toggle disabled, and — via `handleFocus` on the nav — keeps the stop in
+  // toggle disabled, and -- via `handleFocus` on the nav -- keeps the stop in
   // sync after clicks or programmatic focus. Individual Tabs still render
   // `tabIndex={isSelected ? 0 : -1}` (see Tab.tsx) as the initial source of
   // truth; the hook's repair preserves an existing tab stop and only promotes
@@ -173,7 +162,7 @@ export function TabList({
     onKeyDown: onHintKeyDown,
     onFocus: onHintFocus,
     onBlur: onHintBlur,
-  } = useKeyboardHint({orientation});
+  } = useKeyboardHint();
 
   const contextValue = useMemo(
     () => ({value, onChange, size, layout}),

package/src/TabList/TabListContext.ts

@@ -26,12 +26,6 @@ export type TabListSize = 'sm' | 'md' | 'lg';
  */
 export type TabListLayout = 'hug' | 'fill';
 
-/**
- * Orientation of the tab strip. Controls which arrow keys move focus
- * between tabs and the reported `aria-orientation`.
- */
-export type TabListOrientation = 'horizontal' | 'vertical';
-
 /**
  * Context for communicating value/onChange/size/layout from TabList to children.
  */

package/src/Table/BaseTable.tsx

@@ -134,6 +134,12 @@ interface TableRowProps<T extends Record<string, unknown>> {
   textOverflow: 'wrap' | 'truncate';
   RowComponent: React.ComponentType<TableRowComponentProps>;
   CellComponent: React.ComponentType<TableCellComponentProps>;
+  /**
+   * 1-based ARIA row index for this row's position in the full dataset.
+   * `undefined` when the table hasn't opted into ARIA row indexing, in which
+   * case no `aria-rowindex` is emitted (native table semantics).
+   */
+  ariaRowIndex?: number;
 }
 
 /**
@@ -150,6 +156,7 @@ function TableRowInner<T extends Record<string, unknown>>({
   textOverflow,
   RowComponent,
   CellComponent,
+  ariaRowIndex,
 }: TableRowProps<T>): ReactElement {
   // Build cells first
   const cells = columns.map((col, columnIndex) => {
@@ -211,12 +218,14 @@ function TableRowInner<T extends Record<string, unknown>>({
     );
   });
 
-  // Apply plugin transforms for row (with pre-rendered children)
+  // Apply plugin transforms for row (with pre-rendered children).
+  // Seed `aria-rowindex` (when the table opts into ARIA row indexing) as a
+  // base htmlProp so plugins compose over it and can still override.
   const rowRenderProps = applyPlugins(
     plugins,
     p => p.transformBodyRow,
     {
-      htmlProps: {},
+      htmlProps: ariaRowIndex == null ? {} : {'aria-rowindex': ariaRowIndex},
       xstyle: [],
       children: <>{cells}</>,
     } satisfies BodyRowRenderProps,
@@ -256,6 +265,9 @@ function areRowPropsEqual<T extends Record<string, unknown>>(
   if (prevProps.rowIndex !== nextProps.rowIndex) {
     return false;
   }
+  if (prevProps.ariaRowIndex !== nextProps.ariaRowIndex) {
+    return false;
+  }
 
   if (prevProps.columns !== nextProps.columns) {
     return false;
@@ -323,6 +335,8 @@ function BaseTableInner<T extends Record<string, unknown>>({
   textOverflow = 'wrap',
   scrollWrapper: ScrollWrapper,
   emptyState,
+  rowIndexStart,
+  rowCount,
   xstyle,
   className,
   style,
@@ -333,6 +347,18 @@ function BaseTableInner<T extends Record<string, unknown>>({
   // Use stable empty array when no plugins provided
   const plugins = pluginsProp ?? (EMPTY_PLUGINS as TablePlugin<T>[]);
 
+  // ARIA row indexing. The row ordinal is an accessibility concern that is
+  // independent of any visible index column: when the consumer opts in (by
+  // passing rowIndexStart or rowCount), body rows carry `aria-rowindex`
+  // reflecting their position in the full dataset, and the <table> carries
+  // `aria-rowcount`. `aria-rowindex` is 1-based and counts data rows from
+  // `rowIndexStart` (default 1); a windowed/paginated view passes the offset
+  // of its first visible row. `aria-rowcount` is `rowCount` when known, or
+  // `-1` (ARIA's "unknown count") for a windowed view with an unknown total.
+  const ariaRowIndexingEnabled = rowIndexStart != null || rowCount != null;
+  const firstRowAriaIndex = rowIndexStart ?? 1;
+  const ariaRowCount = ariaRowIndexingEnabled ? (rowCount ?? -1) : undefined;
+
   const RowComponent = TableRow as React.ComponentType<TableRowComponentProps>;
   const CellComponent =
     TableCell as React.ComponentType<TableCellComponentProps>;
@@ -486,6 +512,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
   let tableElement: ReactNode = (
     <table
       ref={ref}
+      {...(ariaRowCount != null ? {'aria-rowcount': ariaRowCount} : null)}
       {...tableRenderProps.htmlProps}
       {...mergeProps(
         themeProps('base-table'),
@@ -530,6 +557,11 @@ function BaseTableInner<T extends Record<string, unknown>>({
                       textOverflow={textOverflow}
                       RowComponent={RowComponent}
                       CellComponent={CellComponent}
+                      ariaRowIndex={
+                        ariaRowIndexingEnabled
+                          ? firstRowAriaIndex + rowIndex
+                          : undefined
+                      }
                     />
                   );
                 })

package/src/Table/Table.doc.mjs

@@ -93,6 +93,17 @@ export const docs = {
       type: 'Record<string, TablePlugin<T>>',
       description: 'Named plugins that extend table behavior via the transform pipeline. Converted to an ordered array internally.',
     },
+    {
+      name: 'rowIndexStart',
+      type: 'number',
+      description: 'ARIA row index (1-based) for the first rendered body row. The row ordinal is an accessibility concern independent of any visible index column, so setting this (or rowCount) makes the table emit aria-rowindex on body rows and aria-rowcount on the table. For a paginated/windowed view, pass the offset of the first visible row (e.g. (page - 1) * pageSize + 1) so aria-rowindex reflects position in the full dataset. Data-driven mode only.',
+      default: '1',
+    },
+    {
+      name: 'rowCount',
+      type: 'number',
+      description: 'Total number of body rows across all pages/windows, used for aria-rowcount so assistive tech can announce "row X of Y" against the full dataset. When omitted but rowIndexStart is set (windowed view with an unknown total), aria-rowcount is set to -1 per the ARIA unknown-count convention. Data-driven mode only.',
+    },
     {
       name: 'children',
       type: 'ReactNode',

package/src/Table/Table.test.tsx

@@ -1451,3 +1451,88 @@ describe('emptyState', () => {
     });
   });
 });
+
+describe('ARIA row indexing (#3939)', () => {
+  const bodyRows = (container: HTMLElement): HTMLTableRowElement[] =>
+    Array.from(container.querySelectorAll('tbody tr'));
+
+  it('emits no aria-rowindex/aria-rowcount by default', () => {
+    const {container} = render(<Table data={users} columns={columns} />);
+    expect(screen.getByRole('table')).not.toHaveAttribute('aria-rowcount');
+    for (const row of bodyRows(container)) {
+      expect(row).not.toHaveAttribute('aria-rowindex');
+    }
+  });
+
+  it('numbers rows from 1 when rowCount is provided', () => {
+    const {container} = render(
+      <Table data={users} columns={columns} rowCount={users.length} />,
+    );
+    expect(screen.getByRole('table')).toHaveAttribute(
+      'aria-rowcount',
+      String(users.length),
+    );
+    const indices = bodyRows(container).map(r =>
+      r.getAttribute('aria-rowindex'),
+    );
+    expect(indices).toEqual(['1', '2', '3']);
+  });
+
+  it('offsets aria-rowindex by rowIndexStart for a paginated view', () => {
+    // Page 3 of a 10-per-page dataset: first visible row is dataset row 21.
+    const {container} = render(
+      <Table
+        data={users}
+        columns={columns}
+        rowIndexStart={21}
+        rowCount={100}
+      />,
+    );
+    expect(screen.getByRole('table')).toHaveAttribute('aria-rowcount', '100');
+    const indices = bodyRows(container).map(r =>
+      r.getAttribute('aria-rowindex'),
+    );
+    expect(indices).toEqual(['21', '22', '23']);
+  });
+
+  it('sets aria-rowcount to -1 (unknown) when only rowIndexStart is given', () => {
+    // Windowed/cursor pagination: offset known, total unknown.
+    const {container} = render(
+      <Table data={users} columns={columns} rowIndexStart={5} />,
+    );
+    expect(screen.getByRole('table')).toHaveAttribute('aria-rowcount', '-1');
+    const indices = bodyRows(container).map(r =>
+      r.getAttribute('aria-rowindex'),
+    );
+    expect(indices).toEqual(['5', '6', '7']);
+  });
+
+  it('does not assign an ARIA row index to the header row', () => {
+    render(<Table data={users} columns={columns} rowCount={users.length} />);
+    const header = screen.getAllByRole('row')[0];
+    expect(header).not.toHaveAttribute('aria-rowindex');
+  });
+
+  it('lets a plugin override the seeded aria-rowindex', () => {
+    const plugin: TablePlugin<User> = {
+      transformBodyRow(props, _item, index) {
+        return {
+          ...props,
+          htmlProps: {...props.htmlProps, 'aria-rowindex': 100 + index},
+        };
+      },
+    };
+    const {container} = render(
+      <Table
+        data={users}
+        columns={columns}
+        rowCount={users.length}
+        plugins={{custom: plugin}}
+      />,
+    );
+    const indices = bodyRows(container).map(r =>
+      r.getAttribute('aria-rowindex'),
+    );
+    expect(indices).toEqual(['100', '101', '102']);
+  });
+});

package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx

@@ -20,6 +20,7 @@ import {
   fontWeightVars,
 } from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
+import {rtlStyles} from '../../../utils';
 import type {TablePlugin} from '../../types';
 import {useTranslator} from '../../../i18n';
 
@@ -333,12 +334,14 @@ export function useTableGroupedRows<T extends Record<string, unknown>>(
                         })
                   }
                   aria-expanded={!collapsed}>
-                  <span
-                    {...stylex.props(
-                      styles.chevronIcon,
-                      !collapsed && styles.chevronExpanded,
-                    )}>
-                    <Icon icon="chevronRight" size="xsm" />
+                  <span {...stylex.props(rtlStyles.mirror)}>
+                    <span
+                      {...stylex.props(
+                        styles.chevronIcon,
+                        !collapsed && styles.chevronExpanded,
+                      )}>
+                      <Icon icon="chevronRight" size="xsm" />
+                    </span>
                   </span>
                 </button>
                 {content}

package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx

@@ -16,6 +16,7 @@ import {useCallback, useMemo, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars, colorVars, radiusVars} from '../../../theme/tokens.stylex';
 import {Icon} from '../../../Icon';
+import {rtlStyles} from '../../../utils';
 import {resolveContextActions} from '../../tableContextMenu';
 import {useTranslator} from '../../../i18n';
 import type {
@@ -361,12 +362,14 @@ function ExpansionChevron({
       }}
       aria-label={ariaLabel}
       aria-expanded={isExpanded}>
-      <span
-        {...stylex.props(
-          expansionStyles.chevronIcon,
-          isExpanded && expansionStyles.chevronExpanded,
-        )}>
-        <Icon icon="chevronRight" size="xsm" />
+      <span {...stylex.props(rtlStyles.mirror)}>
+        <span
+          {...stylex.props(
+            expansionStyles.chevronIcon,
+            isExpanded && expansionStyles.chevronExpanded,
+          )}>
+          <Icon icon="chevronRight" size="xsm" />
+        </span>
       </span>
     </button>
   );
@@ -533,12 +536,14 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
                     ? t('@astryx.tableRowExpansion.collapseAllRows')
                     : t('@astryx.tableRowExpansion.expandAllRows')
                 }>
-                <span
-                  {...stylex.props(
-                    expansionStyles.chevronIcon,
-                    allExpanded && expansionStyles.chevronExpanded,
-                  )}>
-                  <Icon icon="chevronRight" size="xsm" />
+                <span {...stylex.props(rtlStyles.mirror)}>
+                  <span
+                    {...stylex.props(
+                      expansionStyles.chevronIcon,
+                      allExpanded && expansionStyles.chevronExpanded,
+                    )}>
+                    <Icon icon="chevronRight" size="xsm" />
+                  </span>
                 </span>
               </button>
             ),
@@ -573,11 +578,13 @@ export function useTableRowExpansion<T extends Record<string, unknown>>(
               group: 'row-expansion',
               label: isExpanded ? 'Collapse row' : 'Expand row',
               icon: (
-                <Icon
-                  icon={isExpanded ? 'chevronDown' : 'chevronRight'}
-                  size="xsm"
-                  aria-hidden
-                />
+                <span {...stylex.props(rtlStyles.mirror)}>
+                  <Icon
+                    icon={isExpanded ? 'chevronDown' : 'chevronRight'}
+                    size="xsm"
+                    aria-hidden
+                  />
+                </span>
               ),
               onSelect: () => onToggle(key),
             },