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

package/src/Banner/index.ts

@@ -11,11 +11,43 @@
  * SYNC: When modified, update this header and /packages/core/src/Banner/Banner.doc.mjs
  */
 
+/**
+ * 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;
+ *   }
+ * }
+ * ```
+ */
+/**
+ * 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;
+}
+
+export interface BannerStatusMap {
+  info: true;
+  warning: true;
+  error: true;
+  success: true;
+}
+
 export {Banner} from './Banner';
-export type {
-  BannerProps,
-  BannerStatus,
-  BannerStatusMap,
-  BannerContainer,
-  BannerContainerMap,
-} from './Banner';
+export type {BannerProps, BannerStatus, BannerContainer} from './Banner';

package/src/Blockquote/Blockquote.doc.mjs

@@ -2,7 +2,7 @@
 
 
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Blockquote',
@@ -43,7 +43,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Blockquote',
   displayName: 'Blockquote',
@@ -81,7 +81,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'styled quotation block w/ accent left border, secondary text, optional citation',
   usage: {

package/src/Blockquote/Blockquote.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/Blockquote/Blockquote.doc.mjs
  * - /packages/core/src/Blockquote/Blockquote.test.tsx
  * - /apps/storybook/stories/Blockquote.stories.tsx
- * - /packages/cli/templates/blocks/components/Blockquote/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Blockquote/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';

package/src/Breadcrumbs/BreadcrumbItem.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: 'BreadcrumbItem',

package/src/Breadcrumbs/BreadcrumbItem.tsx

@@ -19,7 +19,7 @@
  * - /packages/core/src/Breadcrumbs/Breadcrumbs.test.tsx
  * - /packages/core/src/Breadcrumbs/index.ts
  * - /apps/storybook/stories/Breadcrumbs.stories.tsx
- * - /packages/cli/templates/blocks/components/Breadcrumbs/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Breadcrumbs/ (showcase blocks)
  */
 
 import React, {
@@ -59,6 +59,7 @@ import {
 import {
   MENU_ITEM_ROLES,
   MENU_ITEM_SELECTOR,
+  MENU_BOUNDARY_SELECTOR,
 } from '../DropdownMenu/menuItemRoles';
 import type {DropdownMenuOption} from '../DropdownMenu/DropdownMenu';
 
@@ -515,21 +516,15 @@ function BreadcrumbMenuTrigger({
     handleKeyDown: listNavKeyDown,
     focusFirst,
     focusItem,
+    ownsEvent,
+    getItems: getMenuItems,
   } = useListFocus<HTMLDivElement>({
     itemSelector: MENU_ITEM_SELECTOR,
+    boundarySelector: MENU_BOUNDARY_SELECTOR,
     wrap: false,
     onEscape: closeMenu,
   });
 
-  const getMenuItems = useCallback(
-    (): HTMLElement[] =>
-      listRef.current
-        ? Array.from(
-            listRef.current.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR),
-          )
-        : [],
-    [listRef],
-  );
   const typeahead = useTypeahead({
     getItemLabels: () => getMenuItems().map(el => el.textContent),
     onMatch: focusItem,
@@ -542,6 +537,11 @@ function BreadcrumbMenuTrigger({
 
   const listKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
+      // A submenu flyout renders inline inside this menu; its key events bubble
+      // up here. Let that level own them — only handle events from this level.
+      if (!ownsEvent(e)) {
+        return;
+      }
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         const focused = document.activeElement as HTMLElement | null;
@@ -564,7 +564,7 @@ function BreadcrumbMenuTrigger({
       }
       listNavKeyDown(e);
     },
-    [listNavKeyDown, closeMenu, typeahead],
+    [listNavKeyDown, closeMenu, typeahead, ownsEvent],
   );
 
   const openAndFocus = useCallback(() => {

package/src/Breadcrumbs/Breadcrumbs.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: 'Breadcrumbs',
@@ -128,7 +128,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -145,7 +145,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'link trail from root to current page for wayfinding',
   usage: {

package/src/Breadcrumbs/Breadcrumbs.test.tsx

@@ -519,7 +519,7 @@ describe('BreadcrumbItem menu', () => {
         <BreadcrumbItem
           menu={
             <BreadcrumbMenuRadioGroup
-              aria-label="Sort by"
+              label="Sort by"
               value="name"
               onChange={onChange}>
               <BreadcrumbMenuRadioItem value="name" label="Name" />
@@ -589,6 +589,57 @@ describe('BreadcrumbItem menu', () => {
     ).toHaveFocus();
   });
 
+  it('renders a submenu from a nested items array and keyboard-reaches an item after it', async () => {
+    // Breadcrumb menus reuse the DropdownMenu item pipeline, so a nested
+    // `items` array becomes a submenu. The inline flyout must not pollute the
+    // breadcrumb menu's roving order — an item after the submenu row stays
+    // keyboard-reachable.
+    const onDelete = vi.fn();
+    render(
+      <Breadcrumbs>
+        <BreadcrumbItem
+          menu={[
+            {label: 'Rename', onClick: vi.fn()},
+            {
+              label: 'Move to',
+              items: [
+                {label: 'Folder A', onClick: vi.fn()},
+                {label: 'Folder B', onClick: vi.fn()},
+              ],
+            },
+            {type: 'divider'},
+            {label: 'Delete', onClick: onDelete},
+          ]}>
+          Teams
+        </BreadcrumbItem>
+        <BreadcrumbItem isCurrent>Overview</BreadcrumbItem>
+      </Breadcrumbs>,
+    );
+    const trigger = screen.getByRole('button', {name: 'Teams'});
+    trigger.focus();
+    fireEvent.keyDown(trigger, {key: 'ArrowDown'});
+    // Two role="menu" exist (the breadcrumb menu + the inline submenu flyout);
+    // the breadcrumb menu is the first in DOM order.
+    const menu = screen.getAllByRole('menu', {hidden: true})[0];
+    const submenuTrigger = screen.getByRole('menuitem', {
+      name: /Move to/,
+      hidden: true,
+    });
+    expect(submenuTrigger).toHaveAttribute('aria-haspopup', 'menu');
+    await waitFor(() => {
+      expect(
+        screen.getByRole('menuitem', {name: 'Rename', hidden: true}),
+      ).toHaveFocus();
+    });
+    // Rename → Move to → Delete, one step per press.
+    fireEvent.keyDown(menu, {key: 'ArrowDown'});
+    expect(submenuTrigger).toHaveFocus();
+    fireEvent.keyDown(menu, {key: 'ArrowDown'});
+    expect(
+      screen.getByRole('menuitem', {name: 'Delete', hidden: true}),
+    ).toHaveFocus();
+  });
+
   it('allows menu together with isCurrent (both aria-current and aria-haspopup)', () => {
     render(
       <Breadcrumbs>

package/src/Breadcrumbs/Breadcrumbs.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/Breadcrumbs/Breadcrumbs.test.tsx
  * - /packages/core/src/Breadcrumbs/index.ts
  * - /apps/storybook/stories/Breadcrumbs.stories.tsx
- * - /packages/cli/templates/blocks/components/Breadcrumbs/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Breadcrumbs/ (showcase blocks)
  */
 
 import {createContext, useMemo, type ReactNode} from 'react';
@@ -23,29 +23,12 @@ import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {useTranslator} from '../i18n';
+import type {BreadcrumbsVariantMap} from './index';
 
 // =============================================================================
 // Variant type
 // =============================================================================
 
-/**
- * Extensible variant map for Breadcrumbs.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Breadcrumbs' {
- *   interface BreadcrumbsVariantMap {
- *     'compact': true;
- *   }
- * }
- * ```
- */
-export interface BreadcrumbsVariantMap {
-  default: true;
-  supporting: true;
-}
-
 /**
  * Visual variant for the breadcrumb trail.
  * - `'default'`: Standard text styling

package/src/Breadcrumbs/index.ts

@@ -6,12 +6,26 @@
  * @file Breadcrumbs component barrel export
  */
 
+/**
+ * Extensible variant map for Breadcrumbs.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Breadcrumbs' {
+ *   interface BreadcrumbsVariantMap {
+ *     'compact': true;
+ *   }
+ * }
+ * ```
+ */
+export interface BreadcrumbsVariantMap {
+  default: true;
+  supporting: true;
+}
+
 export {Breadcrumbs} from './Breadcrumbs';
-export type {
-  BreadcrumbsProps,
-  BreadcrumbsVariant,
-  BreadcrumbsVariantMap,
-} from './Breadcrumbs';
+export type {BreadcrumbsProps, BreadcrumbsVariant} from './Breadcrumbs';
 export {BreadcrumbItem} from './BreadcrumbItem';
 export type {BreadcrumbItemProps} from './BreadcrumbItem';
 
@@ -35,6 +49,10 @@ export {
   DropdownMenuRadioItem as BreadcrumbMenuRadioItem,
   type DropdownMenuRadioItemProps as BreadcrumbMenuRadioItemProps,
 } from '../DropdownMenu/DropdownMenuRadioItem';
+export {
+  DropdownMenuSubMenu as BreadcrumbMenuSubMenu,
+  type DropdownMenuSubMenuProps as BreadcrumbMenuSubMenuProps,
+} from '../DropdownMenu/DropdownMenuSubMenu';
 export type {
   DropdownMenuOption as BreadcrumbMenuOption,
   DropdownMenuItemData as BreadcrumbMenuItemData,

package/src/Button/Button.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: 'Button',
@@ -163,8 +163,6 @@ export const docs = {
     ],
     vars: [
       {name: '--_button-radius', description: 'Border radius', default: 'var(--radius-element)', private: true},
-      {name: '--button-press-scale', description: 'Active press transform', default: 'scale(0.98)'},
-      {name: '--button-disabled-opacity', description: 'Opacity when disabled', default: '0.5'},
       {name: '--button-focus-offset', description: 'Focus ring outline offset', default: '3px'},
       {name: '--button-icon-only-aspect', description: 'Aspect ratio for icon-only buttons', default: '1 / 1'},
     ],
@@ -174,7 +172,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Button',
   displayName: 'Button',
@@ -247,8 +245,6 @@ export const docsZh = {
     ],
     vars: [
       {name: '--_button-radius', description: '圆角半径', default: 'var(--radius-element)', private: true},
-      {name: '--button-press-scale', description: '按下时的变换', default: 'scale(0.98)'},
-      {name: '--button-disabled-opacity', description: '禁用时的不透明度', default: '0.5'},
       {name: '--button-focus-offset', description: '焦点环轮廓偏移', default: '3px'},
       {name: '--button-icon-only-aspect', description: '纯图标按钮的宽高比', default: '1 / 1'},
     ],
@@ -258,7 +254,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'action trigger w/ 4 variants, 3 sizes, loading state',
   usage: {

package/src/Button/Button.test.tsx

@@ -14,6 +14,7 @@ import {render, screen, fireEvent, act} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Button} from './Button';
 import {Badge} from '../Badge/Badge';
+import {InternationalizationProvider} from '../i18n';
 
 describe('Button', () => {
   it('renders label as visible text', () => {
@@ -446,6 +447,21 @@ describe('Button', () => {
     expect(liveRegion).toHaveTextContent('Loading');
   });
 
+  it('localizes the loading announcement through the i18n catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{fr: {'@astryx.button.loading': 'Chargement'}}}>
+        <Button label="Submit" isLoading />
+      </InternationalizationProvider>,
+    );
+    const button = screen.getByRole('button');
+    // The Spinner also has role="status", so grab the live region explicitly.
+    const regions = button.querySelectorAll('[role="status"]');
+    const liveRegion = regions[regions.length - 1];
+    expect(liveRegion).toHaveTextContent('Chargement');
+  });
+
   describe('elevation', () => {
     it('renders a distinct class for each elevation level', () => {
       const classFor = (elevation: 'none' | 'low' | 'med' | 'high') => {

package/src/Button/Button.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file Button.tsx
- * @input Uses React, ButtonHTMLAttributes, ReactNode
+ * @input Uses React, ButtonHTMLAttributes, ReactNode, i18n (useTranslator)
  * @output Exports Button component, ButtonProps, ButtonVariant types
  * @position Core implementation; consumed by index.ts, tested by Button.test.tsx
  *
@@ -13,7 +13,7 @@
  * - /packages/core/src/Button/Button.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/Button/index.ts (exports if types change)
  * - /apps/storybook/stories/Button.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/Button/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Button/ (showcase blocks)
  *
  * Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, tooltip, endContent, href, as, target, rel
  */
@@ -45,6 +45,8 @@ import {mergeProps, mergeRefs} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
 import {themeProps} from '../utils/themeProps';
+import {useTranslator} from '../i18n';
+import type {ButtonVariantMap} from './index';
 
 /**
  * Base button styles
@@ -262,26 +264,6 @@ const variants = stylex.create({
   },
 });
 
-/**
- * Extensible variant map for Button.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/Button' {
- *   interface ButtonVariantMap {
- *     'primary-muted': true;
- *   }
- * }
- * ```
- */
-export interface ButtonVariantMap {
-  primary: true;
-  secondary: true;
-  ghost: true;
-  destructive: true;
-}
-
 /**
  * Button variant type derived from ButtonVariantMap.
  * Extensible via module augmentation of ButtonVariantMap.
@@ -449,8 +431,8 @@ const loadingStyles = stylex.create({
   spinnerOverlay: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    insetInlineStart: 0,
+    insetInlineEnd: 0,
     bottom: 0,
     display: 'grid',
     placeItems: 'center',
@@ -611,6 +593,7 @@ export function Button({
   ref,
   ...props
 }: ButtonProps): ReactNode {
+  const t = useTranslator();
   const size = useSize(sizeProp, 'md');
   const buttonGroup = useButtonGroup();
 
@@ -760,7 +743,7 @@ export function Button({
       </span>
       {/* Live region for loading state announcements */}
       <VisuallyHidden role="status" aria-live="polite">
-        {isLoadingState ? 'Loading' : ''}
+        {isLoadingState ? t('@astryx.button.loading') : ''}
       </VisuallyHidden>
     </>
   );

package/src/Button/index.ts

@@ -5,16 +5,31 @@
 /**
  * @file index.ts
  * @input Imports Button component and types from Button.tsx
- * @output Exports Button, ButtonProps, ButtonVariant
+ * @output Exports Button, ButtonProps, ButtonVariant, ButtonVariantMap
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  *
  * SYNC: When modified, update this header and /packages/core/src/Button/Button.doc.mjs
  */
 
+/**
+ * Extensible variant map for Button.
+ *
+ * Theme builds can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/Button' {
+ *   interface ButtonVariantMap {
+ *     'primary-muted': true;
+ *   }
+ * }
+ * ```
+ */
+export interface ButtonVariantMap {
+  primary: true;
+  secondary: true;
+  ghost: true;
+  destructive: true;
+}
+
 export {Button} from './Button';
-export type {
-  ButtonProps,
-  ButtonVariant,
-  ButtonSize,
-} from './Button';
-export type {ButtonVariantMap} from './Button';
+export type {ButtonProps, ButtonVariant, ButtonSize} from './Button';

package/src/ButtonGroup/ButtonGroup.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: 'ButtonGroup',
@@ -54,7 +54,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   components: [
     {
@@ -92,7 +92,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'connected button group w/ shared borders, outer-only radius, horizontal/vertical',
   usage: {

package/src/ButtonGroup/ButtonGroup.tsx

@@ -18,7 +18,7 @@
  * - /packages/core/src/ButtonGroup/ButtonGroup.test.tsx (tests)
  * - /packages/core/src/ButtonGroup/index.ts (exports if types change)
  * - /apps/storybook/stories/ButtonGroup.stories.tsx (storybook stories)
- * - /packages/cli/templates/blocks/components/ButtonGroup/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/ButtonGroup/ (showcase blocks)
  */
 
 import {useMemo, type ReactNode} from 'react';

package/src/Calendar/Calendar.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: 'Calendar',
@@ -117,7 +117,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'Calendar',
   displayName: 'Calendar',
@@ -181,7 +181,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'month grid for picking a date or date range',
   usage: {