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

package/src/AvatarGroup/AvatarGroup.doc.mjs

@@ -1,5 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'AvatarGroup',
@@ -14,6 +14,7 @@ export const docs = {
       {guidance: true, description: 'Set max to limit visible avatars when the list is long; 3-5 is typical.'},
       {guidance: true, description: 'Use AvatarGroupOverflow for custom overflow content like a popover trigger or "add member" button.'},
       {guidance: true, description: 'Pass status dots, click handlers, or tooltips directly on each Avatar child.'},
+      {guidance: true, description: 'Make avatars interactive with href or onClick to link to profiles. Interactive avatars share a single Tab stop; arrow keys move between them, and the group announces a keyboard hint to assistive tech.'},
       {guidance: false, description: "Don't nest AvatarGroups; use a single group with all avatars."},
     ],
     anatomy: [
@@ -70,7 +71,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -84,7 +85,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'compositional overlapping avatar row w/ +N overflow or custom slot',
   usage: {
@@ -94,6 +95,7 @@ export const docsDense = {
       {guidance: true, description: 'Set max to limit visible avatars (3-5 typical).'},
       {guidance: true, description: 'Use AvatarGroupOverflow for custom overflow (popover, add button).'},
       {guidance: true, description: 'Pass status dots / click handlers directly on each Avatar.'},
+      {guidance: true, description: 'Interactive avatars (href/onClick) share one Tab stop; arrows rove between them + the overflow button.'},
       {guidance: false, description: "Don't nest AvatarGroups."},
     ],
   },

package/src/AvatarGroup/AvatarGroup.test.tsx

@@ -4,7 +4,8 @@ import {render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {AvatarGroup} from './AvatarGroup';
 import {AvatarGroupOverflow} from './AvatarGroupOverflow';
-import {Avatar} from '../Avatar';
+import {Avatar, AvatarStatusDot} from '../Avatar';
+import {InternationalizationProvider} from '../i18n';
 
 describe('AvatarGroup', () => {
   it('renders all avatar children', () => {
@@ -21,6 +22,21 @@ describe('AvatarGroup', () => {
     expect(screen.getByLabelText('Charlie')).toBeInTheDocument();
   });
 
+  it('composes a labelled status into a grouped avatar accessible name (WCAG 4.1.2)', () => {
+    render(
+      <AvatarGroup>
+        <Avatar
+          name="Alice"
+          status={<AvatarStatusDot variant="success" label="Online" />}
+        />
+        <Avatar name="Bob" />
+      </AvatarGroup>,
+    );
+
+    expect(screen.getByLabelText('Alice, Online')).toBeInTheDocument();
+    expect(screen.getByLabelText('Bob')).toBeInTheDocument();
+  });
+
   it('renders with role="group" and default aria-label', () => {
     render(
       <AvatarGroup>
@@ -223,6 +239,150 @@ describe('AvatarGroupOverflow — hardening', () => {
     );
 
     expect(screen.getByText('+4912')).toBeInTheDocument();
-    expect(screen.getByLabelText('4912 more')).toBeInTheDocument();
+    // The aria-label routes through the catalog's `{count, number}` ICU
+    // argument, so the en locale adds a grouping separator.
+    expect(screen.getByLabelText('4,912 more')).toBeInTheDocument();
+  });
+
+  it('localizes the overflow label through the i18n catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {'@astryx.avatarGroup.overflow': '{count, number} de plus'},
+        }}>
+        <AvatarGroup>
+          <Avatar name="Alice" />
+          <AvatarGroupOverflow count={3} />
+        </AvatarGroup>
+      </InternationalizationProvider>,
+    );
+
+    expect(screen.getByLabelText('3 de plus')).toBeInTheDocument();
+  });
+});
+
+describe('AvatarGroup — roving focus + keyboard hint', () => {
+  it('is a single tab stop over interactive avatars (one tabindex=0, rest -1)', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" href="/alice" />
+        <Avatar name="Bob" href="/bob" />
+        <Avatar name="Charlie" href="/charlie" />
+      </AvatarGroup>,
+    );
+
+    const alice = screen.getByRole('link', {name: 'Alice'});
+    const bob = screen.getByRole('link', {name: 'Bob'});
+    const charlie = screen.getByRole('link', {name: 'Charlie'});
+
+    expect(alice).toHaveAttribute('tabindex', '0');
+    expect(bob).toHaveAttribute('tabindex', '-1');
+    expect(charlie).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('roves focus with ArrowRight/ArrowLeft across interactive avatars', async () => {
+    const user = userEvent.setup();
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" href="/alice" />
+        <Avatar name="Bob" onClick={() => {}} />
+        <Avatar name="Charlie" href="/charlie" />
+      </AvatarGroup>,
+    );
+
+    const alice = screen.getByRole('link', {name: 'Alice'});
+    const bob = screen.getByRole('button', {name: 'Bob'});
+    const charlie = screen.getByRole('link', {name: 'Charlie'});
+
+    alice.focus();
+    expect(alice).toHaveFocus();
+
+    await user.keyboard('{ArrowRight}');
+    expect(bob).toHaveFocus();
+    expect(bob).toHaveAttribute('tabindex', '0');
+    expect(alice).toHaveAttribute('tabindex', '-1');
+
+    await user.keyboard('{ArrowRight}');
+    expect(charlie).toHaveFocus();
+
+    await user.keyboard('{ArrowLeft}');
+    expect(bob).toHaveFocus();
+  });
+
+  it('includes the overflow button as the last roving item', async () => {
+    const user = userEvent.setup();
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" href="/alice" />
+        <AvatarGroupOverflow count={3} onClick={() => {}} />
+      </AvatarGroup>,
+    );
+
+    const alice = screen.getByRole('link', {name: 'Alice'});
+    const overflow = screen.getByRole('button', {name: '3 more'});
+    expect(overflow).toHaveAttribute('data-avatar-item');
+
+    alice.focus();
+    await user.keyboard('{ArrowRight}');
+    expect(overflow).toHaveFocus();
+  });
+
+  it('does NOT rove over a non-avatar button in a status slot', async () => {
+    const user = userEvent.setup();
+    render(
+      <AvatarGroup>
+        <Avatar
+          name="Alice"
+          href="/alice"
+          status={<button type="button">badge</button>}
+        />
+        <Avatar name="Bob" href="/bob" />
+      </AvatarGroup>,
+    );
+
+    const alice = screen.getByRole('link', {name: 'Alice'});
+    const bob = screen.getByRole('link', {name: 'Bob'});
+    const statusButton = screen.getByRole('button', {name: 'badge'});
+
+    // The status button carries no data-avatar-item marker.
+    expect(statusButton).not.toHaveAttribute('data-avatar-item');
+
+    alice.focus();
+    await user.keyboard('{ArrowRight}');
+    // Arrow moves to the next avatar, skipping the nested status button.
+    expect(bob).toHaveFocus();
+    expect(statusButton).not.toHaveFocus();
+  });
+
+  it('attaches an aria-describedby keyboard hint when interactive children exist', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" href="/alice" />
+        <Avatar name="Bob" href="/bob" />
+      </AvatarGroup>,
+    );
+
+    const group = screen.getByRole('group');
+    const describedBy = group.getAttribute('aria-describedby');
+    expect(describedBy).toBeTruthy();
+    const hint = document.getElementById(describedBy!);
+    expect(hint).not.toBeNull();
+    expect(hint).toHaveTextContent('Use arrow keys to move between avatars');
+  });
+
+  it('a purely static group has no tab stop and no keyboard hint', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" data-testid="alice" />
+        <Avatar name="Bob" data-testid="bob" />
+      </AvatarGroup>,
+    );
+
+    const group = screen.getByRole('group');
+    expect(group).not.toHaveAttribute('aria-describedby');
+    // Static avatars are not focusable — no roving tabindex stamped.
+    expect(screen.getByTestId('alice')).not.toHaveAttribute('tabindex');
+    expect(screen.getByTestId('bob')).not.toHaveAttribute('tabindex');
   });
 });

package/src/AvatarGroup/AvatarGroup.tsx

@@ -11,21 +11,31 @@
  * one AvatarGroupOverflow). The group provides overlap styling via
  * context — no child introspection needed.
  *
+ * When the group contains interactive avatars (rendered as links/buttons) or an
+ * interactive AvatarGroupOverflow, it becomes a single Tab stop with roving
+ * arrow-key focus (via useListFocus with hasRovingTabIndex) and exposes a
+ * screen-reader keyboard hint via aria-describedby. A purely static facepile
+ * gets neither — it stays a plain non-focusable group.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/AvatarGroup/AvatarGroup.doc.mjs (props table, features)
  * - /packages/core/src/AvatarGroup/index.ts (exports if types change)
  * - /apps/storybook/stories/AvatarGroup.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/AvatarGroup/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/AvatarGroup/ (showcase blocks)
  */
 
-import {useMemo, type ReactNode} from 'react';
+import {useId, useMemo, useState, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import {resolveSize, type AvatarSize} from '../Avatar';
 import * as stylex from '@stylexjs/stylex';
-import {mergeProps} from '../utils';
+import {mergeProps, mergeRefs} from '../utils';
+import {composeEventHandlers} from '../utils/composeEventHandlers';
 import {AvatarGroupContext} from './AvatarGroupContext';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
+import {useListFocus} from '../hooks/useListFocus';
+import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
+import {VisuallyHidden} from '../VisuallyHidden';
 
 const OVERLAP_RATIO = 0.25;
 
@@ -78,6 +88,9 @@ export function AvatarGroup({
   size = 'md',
   'data-testid': testId,
   'aria-label': ariaLabelFromProps,
+  'aria-describedby': ariaDescribedByFromProps,
+  onKeyDown,
+  onFocus,
   xstyle,
   className,
   style,
@@ -94,14 +107,51 @@ export function AvatarGroup({
     [size, overlap, numericSize],
   );
 
+  // The keyboard hint and roving tab stop only make sense once the group has
+  // interactive children. Detect their presence (and the writing direction for
+  // RTL-correct arrow navigation) from the rendered DOM after commit, matching
+  // how the codebase reads direction elsewhere (`getComputedStyle(el).direction`).
+  const [hasInteractiveItems, setHasInteractiveItems] = useState(false);
+  const [isRtl, setIsRtl] = useState(false);
+
+  // Single tab stop + roving arrow focus over the group's interactive items.
+  // `itemSelector` targets the shared `[data-avatar-item]` marker stamped on
+  // interactive avatars (their rendered <a>/<button>) and on the overflow
+  // button — NOT a tag/role selector — so roving never catches a nested button
+  // inside a custom status/badge slot (O5).
+  const {listRef, handleKeyDown, handleFocus} = useListFocus<HTMLDivElement>({
+    itemSelector: '[data-avatar-item]',
+    orientation: 'horizontal',
+    hasRovingTabIndex: true,
+    isRtl,
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    const root = listRef.current;
+    if (!root) {
+      return;
+    }
+    setHasInteractiveItems(root.querySelector('[data-avatar-item]') != null);
+    setIsRtl(getComputedStyle(root).direction === 'rtl');
+  });
+
+  const hintId = useId();
+  const describedBy =
+    [ariaDescribedByFromProps, hasInteractiveItems ? hintId : null]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
   return (
     <AvatarGroupContext value={contextValue}>
       <div
         {...props}
-        ref={ref}
+        ref={mergeRefs(ref, listRef)}
         role="group"
         aria-label={ariaLabel}
+        aria-describedby={describedBy}
         data-testid={testId}
+        onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
+        onFocus={composeEventHandlers(onFocus, handleFocus)}
         {...mergeProps(
           themeProps('avatar-group', {size}),
           stylex.props(styles.root, xstyle),
@@ -109,6 +159,11 @@ export function AvatarGroup({
           style,
         )}>
         {children}
+        {hasInteractiveItems && (
+          <VisuallyHidden id={hintId}>
+            {t('@astryx.avatarGroup.keyboardHint')}
+          </VisuallyHidden>
+        )}
       </div>
     </AvatarGroupContext>
   );

package/src/AvatarGroup/AvatarGroupOverflow.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: 'AvatarGroupOverflow',

package/src/AvatarGroup/AvatarGroupOverflow.tsx

@@ -3,14 +3,14 @@
 
 /**
  * @file AvatarGroupOverflow.tsx
- * @input Uses React, StyleX, AvatarGroupContext
+ * @input Uses React, StyleX, AvatarGroupContext, i18n (useTranslator)
  * @output Exports AvatarGroupOverflow for overflow indicator
  * @position Slot component used inside AvatarGroup
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/AvatarGroup/AvatarGroup.doc.mjs
  * - /packages/core/src/AvatarGroup/index.ts
- * - /packages/cli/templates/blocks/components/AvatarGroup/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/AvatarGroup/ (showcase blocks)
  */
 
 import React, {type ReactNode} from 'react';
@@ -26,6 +26,7 @@ import {mergeProps} from '../utils';
 import {useAvatarGroup} from './AvatarGroupContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
 
 const BORDER_WIDTH = 2;
 const OVERFLOW_FONT_RATIO = 0.35;
@@ -150,11 +151,12 @@ export function AvatarGroupOverflow({
   style,
   ...rest
 }: AvatarGroupOverflowProps): ReactNode {
+  const t = useTranslator();
   const group = useAvatarGroup();
   const numericSize = group?.numericSize ?? 36;
   const overlap = group?.overlap ?? 0;
 
-  const label = `${count} more`;
+  const label = t('@astryx.avatarGroup.overflow', {count});
   const content = children ?? `+${count}`;
 
   if (onClick) {
@@ -165,6 +167,7 @@ export function AvatarGroupOverflow({
         onClick={onClick}
         {...rest}
         aria-label={label}
+        data-avatar-item=""
         {...mergeProps(
           themeProps('avatar-group-overflow'),
           stylex.props(

package/src/Badge/Badge.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: 'Badge',
@@ -60,7 +60,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Badge',
   displayName: 'Badge',
@@ -107,7 +107,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'highlights a status or category tag, NOT for general metadata',
   usage: {

package/src/Badge/Badge.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Badge/Badge.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Badge/index.ts (exports if types change)
  * - /apps/storybook/stories/Badge.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Badge/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Badge/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';
@@ -28,6 +28,7 @@ import {
 } from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import {themeProps} from '../utils/themeProps';
+import type {BadgeVariantMap} from './index';
 
 /**
  * Base badge styles
@@ -115,36 +116,6 @@ const variants = stylex.create({
   },
 });
 
-/**
- * Extensible variant map for Badge.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Badge' {
- *   interface BadgeVariantMap {
- *     'premium': true;
- *   }
- * }
- * ```
- */
-export interface BadgeVariantMap {
-  neutral: true;
-  info: true;
-  success: true;
-  warning: true;
-  error: true;
-  blue: true;
-  cyan: true;
-  green: true;
-  orange: true;
-  pink: true;
-  purple: true;
-  red: true;
-  teal: true;
-  yellow: true;
-}
-
 /**
  * Badge variant type derived from BadgeVariantMap.
  * Extensible via module augmentation of BadgeVariantMap.

package/src/Badge/index.ts

@@ -5,15 +5,41 @@
 /**
  * @file index.ts
  * @input Imports Badge component and types from Badge.tsx
- * @output Exports Badge, BadgeProps, BadgeVariant, BadgeVariantMap
+ * @output Exports Badge, BadgeProps, BadgeVariant
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  *
  * SYNC: When modified, update this header and /packages/core/src/Badge/Badge.doc.mjs
  */
 
+/**
+ * Extensible variant map for Badge.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Badge' {
+ *   interface BadgeVariantMap {
+ *     'premium': true;
+ *   }
+ * }
+ * ```
+ */
+export interface BadgeVariantMap {
+  neutral: true;
+  info: true;
+  success: true;
+  warning: true;
+  error: true;
+  blue: true;
+  cyan: true;
+  green: true;
+  orange: true;
+  pink: true;
+  purple: true;
+  red: true;
+  teal: true;
+  yellow: true;
+}
+
 export {Badge} from './Badge';
-export type {
-  BadgeProps,
-  BadgeVariant,
-  BadgeVariantMap,
-} from './Badge';
+export type {BadgeProps, BadgeVariant} from './Badge';

package/src/Banner/Banner.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: 'Banner',
@@ -131,7 +131,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Banner',
   displayName: 'Banner',
@@ -206,7 +206,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'persistent message for errors, updates, warnings, or confirmations',
   usage: {

package/src/Banner/Banner.tsx

@@ -28,7 +28,7 @@
  * - /packages/core/src/Banner/Banner.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Banner/index.ts (exports if types change)
  * - /apps/storybook/stories/Banner.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Banner/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Banner/ (showcase blocks)
  */
 
 import {useId, useState, type ReactNode} from 'react';
@@ -53,55 +53,18 @@ import type {Elevation} from '../utils/types';
 import {edgeCompSlot} from '../Layout/edgeCompensation.stylex';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
+import type {BannerStatusMap, BannerContainerMap} from './index';
 
 // =============================================================================
 // Types
 // =============================================================================
 
-/**
- * Extensible status map for Banner.
- *
- * Theme packages can add custom statuses via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Banner' {
- *   interface BannerStatusMap {
- *     'neutral': true;
- *   }
- * }
- * ```
- */
-export interface BannerStatusMap {
-  info: true;
-  warning: true;
-  error: true;
-  success: true;
-}
-
 /**
  * Status type controlling the banner's icon and color.
  * Extensible via module augmentation of BannerStatusMap.
  */
 export type BannerStatus = keyof BannerStatusMap;
 
-/**
- * Extensible container map for Banner.
- *
- * Theme packages can add custom container types via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Banner' {
- *   interface BannerContainerMap {
- *     'floating': true;
- *   }
- * }
- * ```
- */
-export interface BannerContainerMap {
-  card: true;
-  section: true;
-}
-
 /**
  * Container type of the banner.
  * - `card`: standalone card with border-radius and shadow
@@ -243,10 +206,10 @@ const styles = stylex.create({
     borderRadius: radiusVars['--radius-container'],
   },
   headerCardWithContent: {
-    borderTopLeftRadius: radiusVars['--radius-container'],
-    borderTopRightRadius: radiusVars['--radius-container'],
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
+    borderStartStartRadius: radiusVars['--radius-container'],
+    borderStartEndRadius: radiusVars['--radius-container'],
+    borderEndStartRadius: 0,
+    borderEndEndRadius: 0,
   },
   // When there's only a title (no description) and actions, center everything vertically
   headerCentered: {
@@ -294,19 +257,19 @@ const styles = stylex.create({
     backgroundColor: colorVars['--color-background-card'],
     paddingBlock: spacingVars['--spacing-3'],
     paddingInline: spacingVars['--spacing-4'],
-    borderLeftWidth: borderVars['--border-width'],
-    borderRightWidth: borderVars['--border-width'],
+    borderInlineStartWidth: borderVars['--border-width'],
+    borderInlineEndWidth: borderVars['--border-width'],
     borderBottomWidth: borderVars['--border-width'],
-    borderLeftStyle: 'solid',
-    borderRightStyle: 'solid',
+    borderInlineStartStyle: 'solid',
+    borderInlineEndStyle: 'solid',
     borderBottomStyle: 'solid',
-    borderLeftColor: colorVars['--color-border'],
-    borderRightColor: colorVars['--color-border'],
+    borderInlineStartColor: colorVars['--color-border'],
+    borderInlineEndColor: colorVars['--color-border'],
     borderBottomColor: colorVars['--color-border'],
   },
   contentAreaCard: {
-    borderBottomLeftRadius: radiusVars['--radius-container'],
-    borderBottomRightRadius: radiusVars['--radius-container'],
+    borderEndStartRadius: radiusVars['--radius-container'],
+    borderEndEndRadius: radiusVars['--radius-container'],
   },
   chevron: {
     display: 'inline-flex',