@astryxdesign/core 0.2.0 → 0.3.0

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 {
@@ -173,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: {
@@ -189,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'],
@@ -213,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'],
@@ -221,6 +253,22 @@ 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: {
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'CanvasText',
+    },
+  },
+  thumbOn: {
+    backgroundColor: {
+      default: colorVars['--color-background-surface'],
+      '@media (forced-colors: active)': 'HighlightText',
+    },
+  },
   labelWrapper: {
     display: 'flex',
     flexDirection: 'column',
@@ -236,11 +284,7 @@ const styles = stylex.create({
 
 export type SwitchLabelPosition = 'start' | 'end';
 
-export type SwitchLabelSpacing =
-  | 'hug'
-  | 'spread'
-  /** @deprecated Use `'hug'` instead. */
-  | 'default';
+export type SwitchLabelSpacing = 'hug' | 'spread';
 
 export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
   /** Ref forwarded to the root element */
@@ -354,8 +398,6 @@ export interface SwitchProps extends Omit<BaseProps, 'onChange'> {
    * Spacing behavior between label and switch.
    * - 'hug': Label and switch are positioned next to each other
    * - 'spread': Label and switch are pushed to opposite ends
-   *
-   * 'default' is a deprecated alias for 'hug'.
    * @default 'hug'
    */
   labelSpacing?: SwitchLabelSpacing;
@@ -434,10 +476,6 @@ export function Switch({
 
   const isOn = optimisticValue === true;
 
-  // 'default' is a deprecated alias for 'hug' (#2889).
-  const resolvedLabelSpacing: SwitchLabelSpacing =
-    labelSpacing === 'default' ? 'hug' : labelSpacing;
-
   // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
   // tooltip listeners attach to the switch row (which already exists) and the
   // native checkbox stays perceivable via aria-disabled instead of the disabled
@@ -537,6 +575,7 @@ export function Switch({
             stylex.props(
               styles.thumb,
               isOn ? thumbOnSizeStyles[size] : thumbOffSizeStyles[size],
+              isOn ? styles.thumbOn : styles.thumbOff,
             ),
           )}>
           {isBusy && <Spinner size="sm" />}
@@ -568,8 +607,7 @@ export function Switch({
       {...mergeProps(
         themeProps('switch-field', {
           labelPosition: labelPosition !== 'end' ? labelPosition : undefined,
-          labelSpacing:
-            resolvedLabelSpacing !== 'hug' ? resolvedLabelSpacing : undefined,
+          labelSpacing: labelSpacing !== 'hug' ? labelSpacing : undefined,
         }),
         stylex.props(width != null && dynamicWidthStyles.width(width), xstyle),
         className,
@@ -588,7 +626,7 @@ export function Switch({
         }}
         {...stylex.props(
           styles.container,
-          resolvedLabelSpacing === 'spread' && styles.containerSpread,
+          labelSpacing === 'spread' && styles.containerSpread,
           !isDisabled && switchScope,
         )}>
         {' '}

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';

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',
@@ -99,7 +99,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -120,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

@@ -687,10 +687,10 @@ describe('TabMenu', () => {
 
     // Menu items are rendered in DOM (popover controls visibility, hidden from a11y tree)
     expect(
-      screen.getByRole('menuitem', {name: 'Analytics', hidden: true}),
+      screen.getByRole('menuitemradio', {name: 'Analytics', hidden: true}),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole('menuitem', {name: 'Reports', hidden: true}),
+      screen.getByRole('menuitemradio', {name: 'Reports', hidden: true}),
     ).toBeInTheDocument();
   });
 
@@ -726,7 +726,7 @@ describe('TabMenu', () => {
     await user.click(screen.getByRole('button', {name: /More/}));
 
     // Click the menu item (popover content, hidden from a11y tree in jsdom)
-    const menuItem = screen.getByRole('menuitem', {
+    const menuItem = screen.getByRole('menuitemradio', {
       name: 'Analytics',
       hidden: true,
     });
@@ -734,7 +734,7 @@ describe('TabMenu', () => {
     expect(handleChange).toHaveBeenCalledWith('analytics');
   });
 
-  it('marks menu item as selected with aria-current', () => {
+  it('exposes options as menuitemradio and marks the selected tab aria-checked', () => {
     render(
       <TabList value="analytics" onChange={() => {}}>
         <Tab value="home" label="Home" />
@@ -742,18 +742,21 @@ describe('TabMenu', () => {
       </TabList>,
     );
 
-    // Menu items are in DOM (popover content, hidden from a11y tree in jsdom)
-    const analyticsItem = screen.getByRole('menuitem', {
+    // Menu items are in DOM (popover content, hidden from a11y tree in jsdom).
+    // Single-select menu options carry radio semantics (APG menu-button):
+    // role="menuitemradio" + aria-checked, not menuitem + aria-current.
+    const analyticsItem = screen.getByRole('menuitemradio', {
       name: 'Analytics',
       hidden: true,
     });
-    expect(analyticsItem).toHaveAttribute('aria-current', 'true');
+    expect(analyticsItem).toHaveAttribute('aria-checked', 'true');
+    expect(analyticsItem).not.toHaveAttribute('aria-current');
 
-    const reportsItem = screen.getByRole('menuitem', {
+    const reportsItem = screen.getByRole('menuitemradio', {
       name: 'Reports',
       hidden: true,
     });
-    expect(reportsItem).not.toHaveAttribute('aria-current');
+    expect(reportsItem).toHaveAttribute('aria-checked', 'false');
   });
 });
 
@@ -774,11 +777,11 @@ describe('TabMenu keyboard navigation (roving tabindex)', () => {
 
     await user.click(screen.getByRole('button', {name: /More/}));
 
-    const analytics = screen.getByRole('menuitem', {
+    const analytics = screen.getByRole('menuitemradio', {
       name: 'Analytics',
       hidden: true,
     });
-    const reports = screen.getByRole('menuitem', {
+    const reports = screen.getByRole('menuitemradio', {
       name: 'Reports',
       hidden: true,
     });
@@ -804,11 +807,11 @@ describe('TabMenu keyboard navigation (roving tabindex)', () => {
 
     await user.click(screen.getByRole('button', {name: /More/}));
     const menu = screen.getByRole('menu', {hidden: true});
-    const analytics = screen.getByRole('menuitem', {
+    const analytics = screen.getByRole('menuitemradio', {
       name: 'Analytics',
       hidden: true,
     });
-    const reports = screen.getByRole('menuitem', {
+    const reports = screen.getByRole('menuitemradio', {
       name: 'Reports',
       hidden: true,
     });
@@ -834,11 +837,11 @@ describe('TabMenu keyboard navigation (roving tabindex)', () => {
 
     await user.click(screen.getByRole('button', {name: /More/}));
     const menu = screen.getByRole('menu', {hidden: true});
-    const analytics = screen.getByRole('menuitem', {
+    const analytics = screen.getByRole('menuitemradio', {
       name: 'Analytics',
       hidden: true,
     });
-    const reports = screen.getByRole('menuitem', {
+    const reports = screen.getByRole('menuitemradio', {
       name: 'Reports',
       hidden: true,
     });
@@ -867,11 +870,11 @@ describe('TabMenu keyboard navigation (roving tabindex)', () => {
 
     await user.click(screen.getByRole('button', {name: /More/}));
     const menu = screen.getByRole('menu', {hidden: true});
-    const analytics = screen.getByRole('menuitem', {
+    const analytics = screen.getByRole('menuitemradio', {
       name: 'Analytics',
       hidden: true,
     });
-    const exports = screen.getByRole('menuitem', {
+    const exports = screen.getByRole('menuitemradio', {
       name: 'Exports',
       hidden: true,
     });
@@ -894,7 +897,7 @@ describe('TabMenu keyboard navigation (roving tabindex)', () => {
     );
 
     await user.click(screen.getByRole('button', {name: /More/}));
-    const analytics = screen.getByRole('menuitem', {
+    const analytics = screen.getByRole('menuitemradio', {
       name: 'Analytics',
       hidden: true,
     });

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';

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';
@@ -31,6 +31,7 @@ import {
   typeScaleVars,
 } from '../theme/tokens.stylex';
 import {usePopover} from '../Popover/usePopover';
+import {MENU_ITEM_SELECTOR} from '../DropdownMenu/menuItemRoles';
 import {useListFocus} from '../hooks/useListFocus';
 import {useTabListContext} from './TabListContext';
 import type {TabListSize} from './TabListContext';
@@ -291,6 +292,9 @@ export function TabMenu({
     focusFirst,
   } = useListFocus<HTMLDivElement>({
     hasRovingTabIndex: true,
+    // Options render as menuitemradio (single-select menu), which the
+    // default '[role="menuitem"]' selector would not match.
+    itemSelector: MENU_ITEM_SELECTOR,
     onEscape: () => popover.hide(),
   });
 
@@ -409,9 +413,13 @@ export function TabMenu({
             return (
               <div
                 key={option.value}
-                role="menuitem"
+                // The menu is single-select: exactly one option can be the
+                // active tab, so options are radio menu items with
+                // aria-checked (APG menu-button), not plain menuitems with
+                // aria-current.
+                role="menuitemradio"
                 tabIndex={-1}
-                aria-current={isSelected ? 'true' : undefined}
+                aria-checked={isSelected}
                 onClick={() => handleSelect(option.value)}
                 onKeyDown={e => {
                   if (e.key === 'Enter' || e.key === ' ') {

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';
@@ -331,7 +331,6 @@ function BaseTableInner<T extends Record<string, unknown>>({
   idKey,
   plugins: pluginsProp,
   children,
-  tableProps: userTableProps,
   textOverflow = 'wrap',
   scrollWrapper: ScrollWrapper,
   emptyState,
@@ -394,7 +393,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
 
   // --- Plugin pipeline: table ---
   const tableRenderProps = applyPlugins(plugins, p => p.transformTable, {
-    htmlProps: {...userTableProps},
+    htmlProps: {},
     xstyle: children ? [styles.table, styles.tableAutoLayout] : [styles.table],
   } satisfies TableRenderProps);
 
@@ -498,8 +497,8 @@ function BaseTableInner<T extends Record<string, unknown>>({
   const hasData = data != null && data.length > 0;
   const hasColumns = resolvedColumns.length > 0;
 
-  // Style precedence: deprecated tableProps.style < consumer style < the
-  // computed column min-width (structural — derived from column defs, so it
+  // Style precedence: consumer style < the computed column min-width
+  // (structural — derived from column defs, so it
   // must win when present; when absent, a consumer minWidth survives).
   const tableStyle: React.CSSProperties = {
     ...tableRenderProps.htmlProps.style,

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',
@@ -31,8 +31,8 @@ export const docs = {
       {className: 'astryx-table-body'},
       {className: 'astryx-table-footer'},
       {className: 'astryx-table-row'},
-      {className: 'astryx-table-cell'},
-      {className: 'astryx-table-header-cell'},
+      {className: 'astryx-table-cell', visualProps: ['density']},
+      {className: 'astryx-table-header-cell', visualProps: ['density']},
     ],
   },
   description: 'Styled, data-driven table with density, dividers, hover highlight, striped rows, and named plugin support. T must extend Record<string, unknown>.',
@@ -152,7 +152,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -174,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: {

package/src/Table/Table.test.tsx

@@ -401,20 +401,6 @@ describe('BaseTable', () => {
     expect(ref).toHaveBeenCalledWith(expect.any(HTMLTableElement));
   });
 
-  it('passes tableProps to the table element', () => {
-    render(
-      <BaseTable
-        data={users}
-        columns={columns}
-        tableProps={{'aria-label': 'Users table'}}
-      />,
-    );
-    expect(screen.getByRole('table')).toHaveAttribute(
-      'aria-label',
-      'Users table',
-    );
-  });
-
   describe('root element styling props (#3679)', () => {
     it('applies className to the table element', () => {
       render(<Table data={users} columns={columns} className="custom-table" />);
@@ -446,27 +432,6 @@ describe('BaseTable', () => {
       expect(table).toHaveAttribute('data-analytics', 'tables');
     });
 
-    it('composes with deprecated tableProps, direct props winning conflicts', () => {
-      render(
-        <Table
-          data={users}
-          columns={columns}
-          className="direct"
-          style={{opacity: 1}}
-          tableProps={{
-            className: 'legacy',
-            style: {color: 'red', opacity: 0.5},
-          }}
-        />,
-      );
-      const table = screen.getByRole('table');
-      expect(table.className).toContain('legacy');
-      expect(table.className).toContain('direct');
-      // Direct style wins the conflicting key; non-conflicting legacy survives.
-      expect(table.style.opacity).toBe('1');
-      expect(table.style.color).toBe('red');
-    });
-
     it('keeps the computed column min-width over a consumer style.minWidth', () => {
       const {tableMinWidth} = resolveColumnWidths(columns);
       render(
@@ -483,20 +448,6 @@ describe('BaseTable', () => {
       expect(screen.getByRole('table').style.minWidth).toBe('10px');
     });
 
-    it('direct id and aria attributes beat the same keys in tableProps', () => {
-      render(
-        <Table
-          data={users}
-          columns={columns}
-          id="direct-id"
-          aria-label="Direct"
-          tableProps={{id: 'legacy-id', 'aria-label': 'Legacy'}}
-        />,
-      );
-      const table = screen.getByRole('table', {name: 'Direct'});
-      expect(table.id).toBe('direct-id');
-    });
-
     it('keeps the astryx theme classes alongside a consumer className', () => {
       render(<Table data={users} columns={columns} className="custom-table" />);
       const table = screen.getByRole('table');
@@ -886,6 +837,33 @@ describe('Table', () => {
       render(<Table data={users} columns={columns} density="spacious" />);
       expect(screen.getAllByRole('row')).toHaveLength(4);
     });
+
+    it('reflects density as data-density on cells and header cells (theme hook)', () => {
+      // The density lives in internal StyleX classes, so cells expose it as a
+      // data-density attribute on the stable astryx-table-cell /
+      // astryx-table-header-cell targets. This lets a theme override padding
+      // per density (e.g. hold the inline inset while varying the block) via
+      // `defineTheme` — the padding split is otherwise unreachable.
+      const {rerender} = render(
+        <Table data={users} columns={columns} density="spacious" />,
+      );
+      const cell = screen.getAllByRole('cell')[0];
+      const header = screen.getAllByRole('columnheader')[0];
+      expect(cell.className).toContain('astryx-table-cell');
+      expect(cell).toHaveAttribute('data-density', 'spacious');
+      expect(header.className).toContain('astryx-table-header-cell');
+      expect(header).toHaveAttribute('data-density', 'spacious');
+
+      rerender(<Table data={users} columns={columns} density="compact" />);
+      expect(screen.getAllByRole('cell')[0]).toHaveAttribute(
+        'data-density',
+        'compact',
+      );
+      expect(screen.getAllByRole('columnheader')[0]).toHaveAttribute(
+        'data-density',
+        'compact',
+      );
+    });
   });
 
   describe('dividers', () => {

package/src/Table/Table.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Table/Table.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Table/index.ts (exports if types change)
  * - /apps/storybook/stories/Table.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Table/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
 import {useMemo, type ReactElement, type Ref} from 'react';

package/src/Table/TableCell.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: 'TableCell',

package/src/Table/TableCell.tsx

@@ -11,7 +11,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Table/Table.doc.mjs
  * - /packages/core/src/Table/index.ts
- * - /packages/cli/templates/blocks/components/Table/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
@@ -252,7 +252,7 @@ export function TableCell({
       ref={ref}
       {...props}
       {...mergeProps(
-        themeProps('table-cell'),
+        themeProps('table-cell', {density: ctx?.density}),
         stylex.props(...mergeXStyle(cellStyles, xstyle)),
         incomingClassName,
         incomingStyle,

package/src/Table/TableHeaderCell.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: 'TableHeaderCell',

package/src/Table/TableHeaderCell.tsx

@@ -11,7 +11,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Table/Table.doc.mjs
  * - /packages/core/src/Table/index.ts
- * - /packages/cli/templates/blocks/components/Table/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
@@ -157,7 +157,7 @@ export function TableHeaderCell({
       ref={ref}
       {...props}
       {...mergeProps(
-        themeProps('table-header-cell'),
+        themeProps('table-header-cell', {density: ctx?.density}),
         stylex.props(...mergeXStyle(cellStyles, xstyle)),
         incomingClassName,
         incomingStyle,

package/src/Table/TableRow.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: 'TableRow',

package/src/Table/TableRow.tsx

@@ -11,7 +11,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Table/Table.doc.mjs
  * - /packages/core/src/Table/index.ts
- * - /packages/cli/templates/blocks/components/Table/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Table/ (showcase blocks)
  */
 
 import {use, type ReactNode} from 'react';