@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

package/src/Switch/Switch.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Switch/Switch.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Switch/index.ts (exports if types change)
  * - /apps/storybook/stories/Switch.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Switch/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Switch/ (showcase blocks)
  */
 
 import {
@@ -47,17 +47,86 @@ 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,
+    // The thumb rests at the inline-start edge (flex-start, which flexbox
+    // already mirrors under RTL). The on-state travel toward the inline-end
+    // edge is a physical translateX, so it must flip sign under RTL — right
+    // in LTR, left in RTL — so the switch mirrors per convention (Material,
+    // iOS): off-thumb on the reading-start side, on-thumb on the reading-end.
+    transform: {
+      default: 'translateX(12px)',
+      ':is([dir="rtl"] *)': 'translateX(-12px)',
+    },
+  },
+  md: {
+    width: 20,
+    height: 20,
+    transform: {
+      default: 'translateX(14px)',
+      ':is([dir="rtl"] *)': 'translateX(-14px)',
+    },
+  },
+});
+
+const labelWrapperSizeStyles = stylex.create({
+  sm: {
+    minHeight: 20,
+  },
+  md: {
+    minHeight: 24,
+  },
+});
 
 const styles = stylex.create({
   container: {
@@ -77,8 +146,6 @@ const styles = stylex.create({
     display: 'flex',
     alignItems: 'center',
     flexShrink: 0,
-    width: SWITCH_WIDTH,
-    height: SWITCH_HEIGHT,
     isolation: 'isolate',
   },
   input: {
@@ -88,8 +155,6 @@ const styles = stylex.create({
     opacity: 0,
     cursor: 'pointer',
     zIndex: 1,
-    width: SWITCH_WIDTH,
-    height: SWITCH_HEIGHT,
   },
   inputDisabled: {
     cursor: 'not-allowed',
@@ -100,9 +165,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: {
@@ -111,6 +173,21 @@ const styles = stylex.create({
     },
     transitionTimingFunction: easeVars['--ease-standard'],
     boxSizing: 'border-box',
+    // Forced colors (Windows High Contrast) strips painted backgrounds, which
+    // would leave the track invisible. A system-color border keeps the
+    // control's bounds perceivable (WCAG 1.4.11).
+    borderWidth: {
+      default: 0,
+      '@media (forced-colors: active)': '1px',
+    },
+    borderStyle: {
+      default: 'none',
+      '@media (forced-colors: active)': 'solid',
+    },
+    borderColor: {
+      default: null,
+      '@media (forced-colors: active)': 'CanvasText',
+    },
   },
   trackFocus: {
     outline: {
@@ -127,21 +204,39 @@ const styles = stylex.create({
   trackOff: {
     backgroundColor: {
       default: colorVars['--color-background-gray'],
+      // Off = empty (Canvas) track; on = Highlight track, so the two states
+      // stay distinguishable under forced colors.
+      '@media (forced-colors: active)': 'Canvas',
+      // The ancestor-hover tint is a non-system color-mix, and its rule
+      // outranks the plain forced-colors rule above. Left ungated it would
+      // reassert on hover under forced colors, where the UA flattens the
+      // color-mix back to Canvas — so the HighlightText thumb would sit on a
+      // white track (white-on-white). Gating on `forced-colors: none` keeps
+      // the tint out of forced colors and lets the system-color track stand.
       [stylex.when.ancestor(':hover', switchScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-background-gray']}, ${colorVars['--color-tint-hover']} 5%)`,
+        '@media (hover: hover) and (forced-colors: none)': `color-mix(in srgb, ${colorVars['--color-background-gray']}, ${colorVars['--color-tint-hover']} 5%)`,
       },
     },
   },
   trackOn: {
     backgroundColor: {
       default: colorVars['--color-accent'],
+      '@media (forced-colors: active)': 'Highlight',
+      // See trackOff: gate the hover tint out of forced colors so it cannot
+      // flatten the Highlight track to white under the HighlightText thumb.
       [stylex.when.ancestor(':hover', switchScope)]: {
-        '@media (hover: hover)': `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
+        '@media (hover: hover) and (forced-colors: none)': `color-mix(in srgb, ${colorVars['--color-accent']}, ${colorVars['--color-tint-hover']} 15%)`,
       },
     },
   },
   trackDisabled: {
     opacity: 0.5,
+    // Opacity dimming does not survive forced colors; GrayText is the
+    // platform's disabled affordance there.
+    borderColor: {
+      default: null,
+      '@media (forced-colors: active)': 'GrayText',
+    },
   },
   trackDisabledOff: {
     backgroundColor: colorVars['--color-background-gray'],
@@ -151,7 +246,6 @@ const styles = stylex.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: radiusVars['--radius-full'],
-    backgroundColor: colorVars['--color-background-surface'],
     transitionProperty: 'transform, width, height',
     transitionDuration: {
       default: durationVars['--duration-fast'],
@@ -159,22 +253,27 @@ const styles = stylex.create({
     },
     transitionTimingFunction: easeVars['--ease-standard'],
   },
+  // The thumb fill lives on the on/off styles (not the shared thumb style)
+  // because forced colors needs a per-state system color: CanvasText on the
+  // empty off track, HighlightText on the Highlight on track. Sizing stays in
+  // thumbOffSizeStyles/thumbOnSizeStyles; only the fill is state-dependent.
   thumbOff: {
-    width: THUMB_SIZE_OFF,
-    height: THUMB_SIZE_OFF,
-    transform: 'translateX(0)',
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'CanvasText',
+    },
   },
   thumbOn: {
-    width: THUMB_SIZE_ON,
-    height: THUMB_SIZE_ON,
-    transform: `translateX(${THUMB_TRAVEL_ON}px)`,
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'HighlightText',
+    },
   },
   labelWrapper: {
     display: 'flex',
     flexDirection: 'column',
     gap: spacingVars['--spacing-0-5'],
     justifyContent: 'center',
-    minHeight: SWITCH_HEIGHT,
   },
   description: {
     fontFamily: typographyVars['--font-family-body'],
@@ -313,6 +412,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 +464,7 @@ export function Switch({
   labelPosition = 'end',
   labelSpacing = 'hug',
   status,
+  size = 'md',
   width,
   xstyle,
   className,
@@ -410,7 +517,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 +554,7 @@ export function Switch({
         aria-busy={isBusy || undefined}
         {...stylex.props(
           styles.input,
+          inputSizeStyles[size],
           isDisabled && styles.inputDisabled,
           isBusy && styles.inputBusy,
         )}
@@ -457,9 +565,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 +578,15 @@ 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],
+              isOn ? styles.thumbOn : styles.thumbOff,
+            ),
           )}>
           {isBusy && <Spinner size="sm" />}
         </div>
@@ -479,7 +596,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/Tab.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Tab',

package/src/TabList/Tab.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/TabList/TabList.doc.mjs
  * - /packages/core/src/TabList/index.ts
  * - /packages/core/src/TabList/TabList.test.tsx
- * - /packages/cli/templates/blocks/components/TabList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TabList/ (showcase blocks)
  */
 
 import React, {useCallback, type ReactNode} from 'react';
@@ -143,8 +143,8 @@ const styles = stylex.create({
     // with a bottom divider — that ancestor sets `--_tab-indicator-bottom`
     // to drop the indicator onto the rail beneath the reserved gap.
     bottom: 'var(--_tab-indicator-bottom, -1px)',
-    left: spacingVars['--spacing-3'],
-    right: spacingVars['--spacing-3'],
+    insetInlineStart: spacingVars['--spacing-3'],
+    insetInlineEnd: spacingVars['--spacing-3'],
     height: '2px',
     borderRadius: radiusVars['--radius-full'],
     pointerEvents: 'none',

package/src/TabList/TabList.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'TabList',
@@ -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',
@@ -105,7 +99,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -126,7 +120,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Tab navigation w/ overflow menu support; semantic nav landmark w/ button or anchor tab items.',
   usage: {

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

@@ -14,7 +14,7 @@
  * - /packages/core/src/TabList/TabList.doc.mjs
  * - /packages/core/src/TabList/index.ts
  * - /packages/core/src/TabList/TabList.test.tsx
- * - /packages/cli/templates/blocks/components/TabList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TabList/ (showcase blocks)
  */
 
 import React, {useCallback, useMemo, type ReactNode} from 'react';
@@ -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/TabList/TabMenu.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'TabMenu',

package/src/TabList/TabMenu.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/TabList/TabList.doc.mjs
  * - /packages/core/src/TabList/index.ts
  * - /packages/core/src/TabList/TabList.test.tsx
- * - /packages/cli/templates/blocks/components/TabList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TabList/ (showcase blocks)
  */
 
 import React, {useCallback, useId, useRef, type ReactNode} from 'react';
@@ -126,8 +126,8 @@ const styles = stylex.create({
     // drops onto the divider rail when an ancestor (TabList `hasDivider` or a
     // Toolbar with a bottom divider) sets `--_tab-indicator-bottom`.
     bottom: 'var(--_tab-indicator-bottom, -1px)',
-    left: spacingVars['--spacing-3'],
-    right: spacingVars['--spacing-3'],
+    insetInlineStart: spacingVars['--spacing-3'],
+    insetInlineEnd: spacingVars['--spacing-3'],
     height: '2px',
     borderRadius: radiusVars['--radius-full'],
     pointerEvents: 'none',

package/src/Table/BaseTable.tsx

@@ -11,7 +11,7 @@
  * - /packages/core/src/Table/Table.doc.mjs (component description, props)
  * - /packages/core/src/Table/Table.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Table/index.ts (exports if types change)
- * - /packages/cli/templates/blocks/components/Table/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
 import {memo, useRef, type ReactElement, type ReactNode, type Ref} from 'react';
@@ -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

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Table',
@@ -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',
@@ -141,7 +152,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -163,7 +174,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'Data-driven table w/ rich cell content via renderCell. Compose cells w/ Badge, StatusDot, Text, Avatar, layout primitives. BaseTable provides unstyled structural core w/ composable plugin pipeline.',
   usage: {