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

package/src/Avatar/Avatar.doc.mjs

@@ -32,6 +32,18 @@ export const docs = {
       {className: 'astryx-avatar-status-dot', visualProps: ['variant']},
       {className: 'astryx-avatar-status-dot-glyph', visualProps: ['shape']},
     ],
+    vars: [
+      {name: '--_avatar-fallback-font-size', description: 'Initials font size; default is proportional to the avatar size (size × 0.4). Override per size tier (e.g. size:sm) for a custom type scale.', default: 'calc(avatar-size × 0.4)', private: true},
+      {name: '--_avatar-fallback-font-weight', description: 'Initials font weight', default: 'var(--font-weight-medium)', private: true},
+      {name: '--_avatar-fallback-color', description: 'Fallback text and default-icon color', default: 'var(--color-text-secondary)', private: true},
+      {name: '--_avatar-fallback-background', description: 'Fallback wash background fill', default: 'var(--color-neutral)', private: true},
+    ],
+    derived: [
+      {property: 'fontSize', vars: ['--_avatar-fallback-font-size']},
+      {property: 'fontWeight', vars: ['--_avatar-fallback-font-weight']},
+      {property: 'color', vars: ['--_avatar-fallback-color']},
+      {property: 'backgroundColor', vars: ['--_avatar-fallback-background']},
+    ],
   },
   description: 'Displays a user avatar with image, initials fallback, and optional status indicator.',
   props: [
@@ -64,7 +76,7 @@ export const docs = {
     {
       name: 'status',
       type: 'ReactNode',
-      description: 'Corner content for status indicators.',
+      description: 'Corner content for status indicators. A string `label` on the element (as on AvatarStatusDot) is composed into the avatar\'s accessible name (e.g. "Jane Doe, Online") so screen readers announce the status.',
       slotElements: [
         {
           __element: 'AvatarStatusDot',
@@ -79,14 +91,14 @@ export const docs = {
       name: 'tooltip',
       type: 'string | boolean',
       description:
-        "Tooltip shown on hover and keyboard focus. Omitted or true shows the avatar's name; a string shows that text instead; false shows no tooltip. Not auto-disabled when wrapped in your own Tooltip/HoverCard — set tooltip={false} if you supply your own overlay. No tooltip is shown when tooltip is true/omitted and there is no name.",
+        "Tooltip shown on hover and keyboard focus. Omitted or true shows the avatar's name; a string shows that text instead; false shows no tooltip. Not auto-disabled when wrapped in your own Tooltip/HoverCard. Set tooltip={false} if you supply your own overlay. No tooltip is shown when tooltip is true/omitted and there is no name.",
       default: 'true',
     },
     {
       name: 'href',
       type: 'string',
       description:
-        'When set, the avatar renders as an interactive link (`<a>` or a custom link component) pointing here — the same element-swap rule as Button. Requires a meaningful accessible name via `alt` or `name`. Inside an AvatarGroup, interactive avatars share a single Tab stop and are reached with arrow keys.',
+        'When set, the avatar renders as an interactive link (`<a>` or a custom link component) pointing here. This follows the same element-swap rule as Button. Requires a meaningful accessible name via `alt` or `name`. Inside an AvatarGroup, interactive avatars share a single Tab stop and are reached with arrow keys.',
     },
     {
       name: 'as',
@@ -140,6 +152,7 @@ export const docsDense = {
       {guidance: true, description: 'Always pass a name for initials fallback and screen reader alt text.'},
       {guidance: true, description: 'Match size to context: xsm/sm inline, md/lg in lists, xl for profiles.'},
       {guidance: true, description: 'Add a status dot in chat or team views where availability matters.'},
+      {guidance: true, description: 'When wrapping Avatar in your own Tooltip or HoverCard, set tooltip={false} so the built-in name tooltip does not overlap yours.'},
       {guidance: false, description: 'Use for logos or product images. Use an image or icon instead.'},
       {guidance: false, description: 'Force a square or custom shape. Avatars are always circular.'},
     ],
@@ -150,7 +163,8 @@ export const docsDense = {
     name: 'user name for initials and alt text',
     alt: 'alt text; falls back to name',
     size: "avatar size. Named ('xsm' 20px, 'sm' 24px, 'md' 36px, 'lg' 48px, 'xl' 128px) or numeric px.",
-    status: 'corner content for status indicators',
+    status:
+      'corner content for status indicators; its `label` is composed into the avatar accessible name ("Jane Doe, Online")',
     tooltip:
       "hover/focus tooltip. true/omitted → name; string → that text; false → none. Owns its tooltip; set false when wrapping in your own Tooltip/HoverCard. Default true.",
     href: 'renders avatar as a link (<a>/custom). Needs alt/name. Button-style element swap.',

package/src/Avatar/Avatar.test.tsx

@@ -4,6 +4,7 @@ import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Avatar} from './Avatar';
+import {AvatarStatusDot} from './AvatarStatusDot';
 
 describe('Avatar', () => {
   it('exposes role="img" with the name as accessible name', () => {
@@ -36,6 +37,19 @@ describe('Avatar', () => {
     expect(innerImg).toHaveAttribute('alt', '');
   });
 
+  it('renders fallback initials through the themeable font-size var, not a bare px literal', () => {
+    render(<Avatar name="Ada Lovelace" size="sm" data-testid="a" />);
+    const initials = screen.getByText('AL');
+    // The seam: the dynamic font size resolves to the Avatar-scoped var (with
+    // the proportional `size × 0.4` default baked in as the fallback), so a
+    // theme can re-scope it per size. A regression to a bare px literal would
+    // break theming.
+    const style = initials.getAttribute('style') ?? '';
+    expect(style).toContain('var(--_avatar-fallback-font-size,');
+    // Default still reproduces the proportional scale (sm = 24 × 0.4 = 9.6px).
+    expect(style).toMatch(/var\(--_avatar-fallback-font-size,\s*9\.6\d*px\)/);
+  });
+
   it('retries a new src after a previous src failed to load', () => {
     const {rerender} = render(
       <Avatar name="Ada" src="https://example.com/broken.jpg" />,
@@ -53,6 +67,98 @@ describe('Avatar', () => {
     expect(img).toHaveAttribute('src', 'https://example.com/ada.jpg');
   });
 
+  describe('status in the accessible name (WCAG 4.1.2)', () => {
+    // The avatar root is role="img", which prunes descendant semantics —
+    // a label inside the status subtree is never announced on its own.
+    // Avatar composes the status element's `label` into its own name.
+    it('composes the status label into the accessible name for image avatars', () => {
+      render(
+        <Avatar
+          name="Ada Lovelace"
+          src="https://example.com/ada.jpg"
+          status={<AvatarStatusDot variant="success" label="Online" />}
+        />,
+      );
+      expect(
+        screen.getByRole('img', {name: 'Ada Lovelace, Online'}),
+      ).toBeInTheDocument();
+    });
+
+    it('composes the status label into the accessible name for initials avatars', () => {
+      render(
+        <Avatar
+          name="Ada Lovelace"
+          status={<AvatarStatusDot variant="error" label="Busy" />}
+        />,
+      );
+      const avatar = screen.getByRole('img', {name: 'Ada Lovelace, Busy'});
+      expect(avatar).toBeInTheDocument();
+      expect(avatar).toHaveTextContent('AL');
+    });
+
+    it('composes the status label with alt when alt overrides name', () => {
+      render(
+        <Avatar
+          name="Ada"
+          alt="Ada Lovelace, profile photo"
+          status={<AvatarStatusDot label="Online" />}
+        />,
+      );
+      expect(
+        screen.getByRole('img', {name: 'Ada Lovelace, profile photo, Online'}),
+      ).toBeInTheDocument();
+    });
+
+    it('keeps the plain name when there is no status', () => {
+      render(<Avatar name="Ada Lovelace" data-testid="a" />);
+      expect(screen.getByTestId('a')).toHaveAttribute(
+        'aria-label',
+        'Ada Lovelace',
+      );
+    });
+
+    it('keeps the plain name when the status dot has no label', () => {
+      render(
+        <Avatar
+          name="Ada Lovelace"
+          data-testid="a"
+          status={<AvatarStatusDot variant="success" />}
+        />,
+      );
+      expect(screen.getByTestId('a')).toHaveAttribute(
+        'aria-label',
+        'Ada Lovelace',
+      );
+    });
+
+    it('keeps the plain name for custom status nodes without a label prop', () => {
+      render(<Avatar name="Ada Lovelace" data-testid="a" status={<span />} />);
+      expect(screen.getByTestId('a')).toHaveAttribute(
+        'aria-label',
+        'Ada Lovelace',
+      );
+    });
+
+    it('announces a labelled status even on an otherwise decorative avatar', () => {
+      // A labelled status is meaningful information on its own — the avatar
+      // must not stay aria-hidden and swallow it.
+      render(
+        <Avatar data-testid="a" status={<AvatarStatusDot label="Online" />} />,
+      );
+      const el = screen.getByTestId('a');
+      expect(el).toHaveAttribute('role', 'img');
+      expect(el).toHaveAttribute('aria-label', 'Online');
+      expect(el).not.toHaveAttribute('aria-hidden');
+    });
+
+    it('stays decorative with an unlabelled status and no name', () => {
+      render(<Avatar data-testid="a" status={<AvatarStatusDot />} />);
+      const el = screen.getByTestId('a');
+      expect(el).toHaveAttribute('aria-hidden', 'true');
+      expect(el).not.toHaveAttribute('aria-label');
+    });
+  });
+
   it('retries a new fallbackSrc after a previous fallbackSrc failed to load', () => {
     const {rerender} = render(
       <Avatar name="Ada" fallbackSrc="https://example.com/broken.jpg" />,

package/src/Avatar/Avatar.tsx

@@ -5,7 +5,7 @@
 /**
  * @file Avatar.tsx
  * @input Uses React, HTMLAttributes, ReactNode, useState; useTooltip
- *   (Tooltip hook) for the optional name-on-hover tooltip
+ *   (Tooltip hook) for the optional name-on-hover tooltip; useTranslator (i18n)
  * @output Exports Avatar component, AvatarProps, AvatarSize types
  * @position Core implementation; consumed by index.ts
  *
@@ -18,7 +18,7 @@
  * Last synced props: alt, fallbackSrc, name, size, src, status, href, as, target, rel, onClick
  */
 
-import {useMemo, useState, type ReactNode} from 'react';
+import {isValidElement, useMemo, useState, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import {
@@ -34,6 +34,7 @@ import {themeProps} from '../utils/themeProps';
 import {useTooltip} from '../Tooltip/useTooltip';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
+import {useTranslator} from '../i18n';
 
 /**
  * The offset ratio for positioning elements on a circle's edge at 45°.
@@ -110,6 +111,11 @@ const styles = stylex.create({
     position: 'relative',
     display: 'inline-flex',
     flexShrink: 0,
+    // The wrapper is not clipped (so the status dot can overflow), so it must be
+    // rounded itself: a themed fallback background lands on `.astryx-avatar` (the
+    // class-bearing wrapper) as well as the internal var, and an unrounded
+    // wrapper would show that fill as square corners behind the circular content.
+    borderRadius: radiusVars['--radius-full'],
   },
   content: {
     display: 'flex',
@@ -130,10 +136,14 @@ const styles = stylex.create({
     justifyContent: 'center',
     width: '100%',
     height: '100%',
-    backgroundColor: colorVars['--color-neutral'],
-    color: colorVars['--color-text-secondary'],
+    // Fallback surface (initials + default icon). Each property reads an
+    // Avatar-scoped internal var so a theme can re-scope the fallback wash and
+    // initials weight/color without forking; the defaults reproduce today's
+    // exact output. See derivedVarRegistry (avatar) + Avatar.doc.mjs theming.
+    backgroundColor: `var(--_avatar-fallback-background, ${colorVars['--color-neutral']})`,
+    color: `var(--_avatar-fallback-color, ${colorVars['--color-text-secondary']})`,
     fontFamily: typographyVars['--font-family-body'],
-    fontWeight: fontWeightVars['--font-weight-medium'],
+    fontWeight: `var(--_avatar-fallback-font-weight, ${fontWeightVars['--font-weight-medium']})`,
     textTransform: 'uppercase',
   },
   status: {
@@ -195,8 +205,13 @@ const dynamicStyles = stylex.create({
     width: size,
     height: size,
   }),
+  // Initials font size defaults to the proportional `size × ratio` scale but is
+  // reachable via the `--_avatar-fallback-font-size` derived var, so a theme can
+  // set a per-size type scale (e.g. `components.avatar['size:sm']`).
   fontSize: (size: number) => ({
-    fontSize: size * INITIALS_FONT_SIZE_RATIO,
+    fontSize: `var(--_avatar-fallback-font-size, ${
+      size * INITIALS_FONT_SIZE_RATIO
+    }px)`,
   }),
   statusPosition: (size: number) => ({
     bottom: size * CIRCLE_EDGE_OFFSET_RATIO,
@@ -266,6 +281,11 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
   /**
    * Content displayed in the corner of the avatar.
    * Typically used for status indicators or badges.
+   *
+   * When the element carries a string `label` prop (as `AvatarStatusDot`
+   * does), the label is composed into the avatar's accessible name
+   * (e.g. "Jane Doe, Online") so assistive tech can reach the status —
+   * the `role="img"` root prunes descendant semantics (WCAG 4.1.2).
    */
   status?: ReactNode;
   /**
@@ -332,6 +352,24 @@ function getInitials(name: string): string {
   return (words[0].charAt(0) + words[words.length - 1].charAt(0)).toUpperCase();
 }
 
+/**
+ * Reads the accessible status label off the `status` element, when it
+ * exposes one. `AvatarStatusDot`'s `label` prop is the canonical source,
+ * but any custom status element with a string `label` prop participates.
+ *
+ * The avatar root is `role="img"`, which prunes ALL descendant semantics
+ * from the accessibility tree — a label inside the status subtree is never
+ * announced on its own. Composing it into the avatar's own accessible name
+ * is the only way the status reaches assistive tech (WCAG 4.1.2).
+ */
+function getStatusLabel(status: ReactNode): string | undefined {
+  if (!isValidElement(status)) {
+    return undefined;
+  }
+  const {label} = status.props as {label?: unknown};
+  return typeof label === 'string' && label !== '' ? label : undefined;
+}
+
 /**
  * Default person icon SVG for when no image or name is provided
  */
@@ -398,10 +436,24 @@ export function Avatar({
   const showInitials = !showImage && !showFallbackImage && name;
   const showIcon = !showImage && !showFallbackImage && !name;
 
-  // A meaningful accessible name comes from `alt` or `name`. With neither, the
-  // avatar is decorative — expose it as `presentation`/`aria-hidden` rather than
-  // announcing a meaningless generic "Avatar" (obs-9).
-  const accessibleName = alt || name;
+  // A meaningful accessible name comes from `alt`/`name`, composed with the
+  // status element's `label` when one is present ("Jane Doe, Online") — the
+  // `role="img"` root prunes descendant semantics, so surfacing the label in
+  // the avatar's own name is the only way assistive tech can reach the
+  // status (WCAG 4.1.2). A labelled status alone is also meaningful. With
+  // neither a name nor a labelled status, the avatar is decorative — expose
+  // it as `presentation`/`aria-hidden` rather than announcing a meaningless
+  // generic "Avatar" (obs-9).
+  const t = useTranslator();
+  const nameLabel = alt || name;
+  const statusLabel = getStatusLabel(status);
+  const accessibleName =
+    nameLabel && statusLabel
+      ? t('@astryx.avatar.nameWithStatus', {
+          name: nameLabel,
+          status: statusLabel,
+        })
+      : nameLabel || statusLabel;
   const isDecorative = !accessibleName;
   const avatarGroup = useAvatarGroup();
   const resolvedSize = avatarGroup?.size ?? size;

package/src/Avatar/AvatarStatusDot.doc.mjs

@@ -21,7 +21,7 @@ export const docs = {
       name: 'label',
       type: 'string',
       description:
-        'Accessible label describing the status. Not announced inside an Avatar today (the Avatar root is role="img", which prunes child semantics) — pass it anyway; an Avatar-level name-composition fix is planned.',
+        'Accessible label describing the status. Inside an Avatar it is composed into the avatar\'s accessible name (e.g. "Jane Doe, Online"); the Avatar root is role="img", which prunes child semantics, so the composed name is how the status reaches assistive tech. Standalone dots expose role="img" with this label directly.',
     },
     {
       name: 'icon',
@@ -59,7 +59,7 @@ export const docsZh = {
       name: 'label',
       type: 'string',
       description:
-        '描述状态的无障碍标签。目前在 Avatar 内不会被朗读（Avatar 根元素为 role="img"，会裁剪子元素语义）——仍请传入；Avatar 层面的名称合成修复已在计划中。',
+        '描述状态的无障碍标签。在 Avatar 内会被合成进头像自身的无障碍名称（如 "Jane Doe, Online"）——Avatar 根元素为 role="img"，会裁剪子元素语义，因此合成名称是辅助技术获知状态的途径。独立使用时状态点直接以 role="img" 暴露该标签。',
     },
     {
       name: 'icon',
@@ -80,7 +80,7 @@ export const docsDense = {
     variant:
       'colour + shape variant: success filled, neutral ring, error minus',
     label:
-      'accessible status label (not yet announced inside Avatar — role="img" prunes children)',
-    icon: 'icon centered in dot (hidden at tiny sizes); replaces the built-in shape glyph — differ it per status',
+      'accessible status label; composed into the Avatar accessible name ("Jane Doe, Online"); standalone dots expose role="img" with it directly',
+    icon: 'icon centered in dot (hidden at tiny sizes); replaces the built-in shape glyph, so differ it per status',
   },
 };

package/src/Avatar/AvatarStatusDot.tsx

@@ -115,10 +115,12 @@ export interface AvatarStatusDotProps extends BaseProps<HTMLDivElement> {
    * Describes the meaning of the indicator for screen readers
    * (e.g. "Online", "Accepted", "John Doe is busy").
    *
-   * Note: inside an Avatar the label is currently not announced — the
-   * Avatar root is `role="img"`, which prunes descendant semantics.
-   * Pass it anyway; composing status into the avatar's accessible name
-   * is a planned Avatar-level fix.
+   * Note: inside an Avatar the dot sits in the avatar's `role="img"`
+   * subtree, where descendant semantics are pruned — the dot is never its
+   * own stop there. Instead, Avatar reads this `label` and composes it into
+   * its own accessible name (e.g. "Jane Doe, Online"), which is how the
+   * status reaches assistive tech (WCAG 4.1.2). Standalone dots (outside an
+   * Avatar) expose `role="img"` with this label directly.
    */
   label?: string;
   /**

package/src/AvatarGroup/AvatarGroup.test.tsx

@@ -4,7 +4,7 @@ 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';
 
 describe('AvatarGroup', () => {
   it('renders all avatar children', () => {
@@ -21,6 +21,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>

package/src/Breadcrumbs/BreadcrumbItem.tsx

@@ -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.test.tsx

@@ -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/index.ts

@@ -35,6 +35,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

@@ -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'},
     ],
@@ -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'},
     ],