@astryxdesign/core 0.1.8-canary.fe8657a → 0.1.9-canary.5eec8d9

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # @xds/core
 
+# 0.1.9
+
+#### New Features
+
+- Avatar: add a `tooltip?: string | boolean` prop for a name-on-hover tooltip. Omitting it (or `true`) shows the avatar's `name` on hover and keyboard focus; a string shows that text instead (no need to wrap in `Tooltip`); `false` disables it. Avatar owns the tooltip via the existing Tooltip hook, so there's no extra wrapper DOM. Because this adds a default tooltip to every existing named Avatar, set `tooltip={false}` when you supply your own `Tooltip`/`HoverCard` overlay. The root `aria-label` (`alt || name`) is unchanged; the default name tooltip is visual-only (no `aria-describedby` double-announce), while a custom string tooltip is exposed as a description. Decorative avatars (no `name`/`alt`) get no tooltip. (#4164)
+- BreadcrumbItem gains a `menu` prop that turns a crumb into a menu trigger for switching between sibling destinations. It accepts the same item API as DropdownMenu/MoreMenu/ContextMenu (a `DropdownMenuOption[]` array or composed item children), so existing menu-item definitions drop into a breadcrumb with no rewrite. The item components are also re-exported under `Breadcrumb*` aliases.
+- Calendar: make the today/selected day-cell ring precisely themeable. The day cell now reflects a compound `marker` state (`today-only` / `today-in-range`) that maps 1:1 to the treatment actually drawn, so `defineTheme({components: {'calendar-day': {'marker:today-only': {...}}}})` targets exactly those states without over-matching or needing a `:not()` exclusion. Default rendering is unchanged.
+- Calendar: add a dedicated `astryx-calendar-nav` theme target for the prev/next month-nav buttons, so consumers can theme the nav controls (color, radius, per-direction, disabled edge) without reaching every Button via the global `astryx-button` handle. Reflects `nav` (prev/next) and the `disabled` state as data attributes.
+- ChatComposer: make custom inputs first-class. `useChatComposerContext()` and its types are now public, so any input in the `input` slot can read `value`/`onChange`/`onSubmit`/`canSend`/`placeholder`/`isDisabled` and drive the shell's send button. Inputs can register a focus control on `inputControlRef` so click-to-focus works for any input shape (not just `contenteditable`/`textarea`); the shell keeps a DOM-query fallback for uninstrumented inputs.
+- ChatComposerInput: add an `onKeyDown` seam so consumers can host platform- or app-specific key handling — e.g. `preventDefault()` Enter to insert a newline on a touch keyboard, or submit on Cmd/Ctrl+Enter. Enter also no longer submits mid-IME-composition.
+- CommandPalette: add a dedicated `astryx-command-palette-group-heading` theme target on the group heading, so consumers can theme just the heading (e.g. its padding or typography) via `defineTheme` instead of a fragile structural selector. The group root keeps its own `astryx-command-palette-group` target.
+- DateInput gains a `format` prop for the committed date value, reusing Timestamp's `format` vocabulary so the same literal renders the same date shape in both components. Named values are `date_long` (the default, "March 21, 2026"), `date` ("Mar 21, 2026"), `date_weekday` ("Wed, Mar 21, 2026"), and `system_date` ("2026-03-21"); a `(value) => string` function is also accepted for custom output. The `date_long` default is byte-identical to DateInput's previous long-month rendering, so existing usage is unchanged. This also extends Timestamp with two new shared members, `date_long` and `date_weekday`, giving the two components full value parity on the date-only formats. Formatting applies only to the committed value, never to text being typed.
+- Add an `elevation` prop to configurable surfaces — Card, ClickableCard, SelectableCard, Button, IconButton, ButtonGroup, and Banner take the full `'none' | 'low' | 'med' | 'high'` scale; ChatComposer takes `'none' | 'low'`. Defaults preserve today's appearance (`none` everywhere except ChatComposer's `low`), so nothing changes unless you opt in. (#4146)
+- OverflowList: add `maxVisibleItems` to cap the number of visible items (the ceiling partner to `minVisibleItems`) and `maxRows` for bounded multi-row wrapping — items wrap onto up to N rows, then collapse into the overflow indicator. Both props are optional and default to off, so single-line behavior is unchanged. See #4176.
+- Add `useTableRowStatus`, a plugin that prepends a narrow column
+  signaling per-row status.
+- Thumbnail: add `showRemoveOn` prop — `'hover'` (default) reveals the remove button on hover or keyboard focus and keeps it visible on touch; `'always'` shows it at rest.
+- Table tree: add an optional expand-all/collapse-all header control (#4142)
+  `useTableTreeState` now returns an aggregate `isAllExpanded` state (`true` / `false` / `'indeterminate'`) and threads `expandAll` / `collapseAll` into `treeConfig`. `useTableTreeData` gains a `hasExpandAllControl` prop: when set, it renders an expand-all/collapse-all toggle in the tree column header, wired to that state, so consumers no longer need to hand-roll external buttons. Flat data stays a full no-op. This is the first affordance folded in from `useTableRowExpansion` as part of converging the two tree plugins.
+- TreeList: add a dedicated `astryx-tree-list-chevron` theme target for the expand/collapse toggle, so consumers can theme the chevron (color, per open/closed state) via `defineTheme` instead of reaching it through the functional `[data-tree-toggle]` attribute. Reflects the open/closed state as a `data-state` attribute (`expanded`/`collapsed`); the functional `data-tree-toggle` hook is unchanged.
+- TreeList: add a stable `astryx-tree-list-guide` theme target on the hierarchy guide (connector) line elements, so consumers can recolor or hide the guides through `defineTheme` (e.g. `backgroundColor`, or `display: 'none'` to hide them) instead of hiding the built-in connectors and reimplementing them with unlayered CSS.
+- TreeList: add a dedicated `astryx-tree-list-item-label` theme target on the item's label text, so consumers can theme just the label (e.g. bold the selected item's label) via `defineTheme` instead of a fragile `button:not([data-tree-toggle]) > span` structural selector. Reflects the row's `selected` state as a `data-selected` attribute on the label.
+
+#### Fixes
+
+- AvatarStatusDot: pair each variant with a distinct built-in shape — success stays a filled dot, neutral renders as a ring, error gets a minus bar — so status no longer relies on colour alone (WCAG 2.1 SC 1.4.1, #4143). A rendered `icon` replaces the shape glyph at sizes where icons fit; themes can target the new stable `astryx-avatar-status-dot-glyph` class and its `data-shape` attribute — a stroked inline `<svg>` painted from the dot's `currentColor`.
+- Button: link-rendered buttons (`href`) now expose `aria-busy` while loading, matching the `<button>` branch. Previously an interruptible loading link showed the spinner and announced "Loading" but carried no machine-readable busy state.
+- Calendar only marks in-month date cells as today, preventing duplicate today indicators in multi-month views.
+- Carousel: slides now expose APG slide semantics (role=group, aria-roledescription="slide", "Slide N of M" labels) instead of anonymous divs.
+- Honor `prefers-reduced-motion` in ChatToolCalls (chevron rotation, expand/collapse), ChatLayoutScrollButton (pill show/hide), and ChatDictationButton (equalizer bars).
+- Chat/useChatStreamScroll: the scroll-follow spring now respects `prefers-reduced-motion` — locked following, `scrollToBottom()`, and `lock()` fall back to the existing instant jump, so the transcript still tracks the bottom without animated travel. Follow-up promised in #3800.
+- Chat: the composer drawer toggle now references its disclosed content via aria-controls, so assistive tech can navigate from the toggle to the drawer.
+- ChatSendButton now forwards `className`, `style`, and pass-through attributes (`data-*`, `aria-*`, and other rest props) to the rendered button. Previously these were silently dropped. (#4190)
+- Chat: tool-call error details are now exposed to screen readers and keyboard users instead of living only in a hover-only title attribute.
+- CheckboxInput: the indeterminate mark now uses the `--radius-full` token instead of a hardcoded radius, for token consistency. No visual change.
+- CheckboxList: items with rich (non-string) labels can now provide an accessibleLabel so their checkbox no longer announces as the literal "Checkbox".
+- CodeBlock: collapsed code regions are now inert, so keyboard focus can no longer land on the invisible scroll container while collapsed.
+- CommandPalette: forward BaseProps pass-through attributes (className, style, xstyle, data-_, aria-_) to the underlying Dialog. Previously these were silently dropped.
+- CommandPalette: the search input (role=combobox) now has an accessible name by default, from the new label prop or the visible placeholder. Previously screen readers announced a nameless combobox.
+- DateTimeInput: ArrowDown (and Alt+ArrowDown) in the date field now opens the calendar popover from the keyboard, matching DateInput and the advertised combobox pattern.
+- Dialog: modals are now automatically labelled by their DialogHeader title via aria-labelledby, matching AlertDialog. Unnamed open dialogs warn in development.
+- Dialog: the entry animation is disabled under prefers-reduced-motion, matching the Layer animation guards.
+- Fix Divider rest-prop spread order so consumer-passed HTML attributes cannot overwrite the component's `role="separator"` or `aria-orientation`.
+- FieldLabel now forwards className, style, xstyle, and pass-through attributes (data-_, aria-_, event handlers) to the rendered element. Previously these were accepted by the type but silently dropped.
+- Field/FieldStatus: status and error messages are now announced through persistent live regions, so they are reliably read by screen readers regardless of when they appear.
+- FileInput: the trigger's accessible name now includes the selected filenames, so screen-reader users can review what is attached when refocusing the control.
+- Prevent PowerSearch edit popover from closing when selecting multi-select options via Enter (#4245)
+- Selector/MultiSelector: PageUp/PageDown now jump the active option to the first/last match while searching, complementing Home/End which stay on text-caret movement.
+- HoverCard: popups now expose a named dialog when the new label prop is set, and honest group semantics otherwise. Previously every hover card announced as an unnamed dialog.
+- Item: aria-selected is now emitted only when the item's role permits it (option, tab, treeitem, grid cells), removing invalid ARIA from plain list items.
+- MobileNav: the toggle button now exposes `aria-expanded` and references the nav drawer via `aria-controls`, so screen-reader users can tell whether the drawer is open and what the button controls. (#3721)
+- MultiSelector: searching within the options popover now announces the number of matching results ("3 results" / "No results found") to screen readers, mirroring Selector and Typeahead. Previously filtering happened silently.
+- SideNav/TopNav: collapsed heading popovers no longer wrap their menus in a modal dialog, and the heading button is no longer an invalid child of the menu.
+- Slider now clamps controlled values to its minimum and maximum before positioning the thumb and exposing ARIA values.
+- Slider: required sliders now convey the required state to screen readers through the thumb's accessible description (aria-required is invalid on the slider role).
+- Make the CLI's `.mjs` sources fully strict-typecheckable (checkJs + JSDoc)
+  Annotated the entire CLI package so `tsconfig.strict.json` (full `strict` `checkJs` over `src`, `bin`, `scripts`, `docs`, and the emitted `templates`) reports zero errors — down from 1717. Fixes are JSDoc-only: no runtime logic changed, `.mjs` stays `.mjs`. Strict checking also surfaced and corrected several type-contract drifts: the `upgrade.run` response type (declared a `depsUpdated` field the command never emits, and omitted the real `integrations`/`filesChanged`/`transformsApplied`/`errors`), registered the emitted `theme.list`/`theme.add`/`layout.*` response types in the `--json` envelope union, and added `category?` to `ReferenceSection` in core's docs types (reference docs already emit it).
+- Table: the selection plugin accepts getRowLabel so row checkboxes announce which row they select, instead of an undifferentiated "Select row".
+- Text: an explicit `size` now overrides the font-size of a themed `type`. The `size` class lived in a lower cascade layer (`astryx-base`) than a theme's per-type font-size rule (`astryx-theme`), so `<Text type="supporting" size="xsm">` silently kept the type's size. Themes now re-emit the size classes in the theme layer so `size` wins as documented.
+- Thumbnail: replace the hover box-shadow on interactive tiles with the same `::after` overlay treatment ClickableCard and SelectableCard use. All three now tint on hover with `--color-overlay-hover` (and `--color-overlay-pressed` on press), so interactive feedback is consistent across the card family.
+- Thumbnail/TopNavMegaMenuFeaturedCard: images without alt text are now explicitly decorative instead of silently empty-alt, matching Avatar's handling.
+- Thumbnail: the overlaid remove button now uses a fixed `--color-overlay` scrim with an `--color-on-dark` icon instead of adapting to the image's luminance, so it has reliable contrast on any image.
+- Tokenizer: adding and removing tokens (including Backspace on an empty input) is now announced to screen readers. Previously tokens appeared and disappeared silently.
+- TopNav: TopNavMegaMenu triggers now expose aria-controls, and the panel is a labeled group instead of an invalid modal-dialog-wrapped menu.
+- TopNav: TopNavMenu popups now expose proper menu semantics (no modal dialog wrapper) with the full APG keyboard pattern (roving tabindex, arrow keys, typeahead).
+
+#### Documentation
+
+- docs(Tokenizer, PowerSearch): document and test the existing startIcon prop
+  Both components have shipped a working `startIcon?: ReactNode | IconType` prop for a while (`PowerSearch` forwards it verbatim to the internal `Tokenizer`, and it's already exercised in Storybook), but neither's `.doc.mjs` documented it and neither had test coverage — so it was invisible to `astryx component <Name> --dense`, the docsite props table, and anyone (human or AI) relying on those as the source of truth. No behavior change; adds the missing props-table entries (en/zh/dense) and colocated tests confirming the icon renders and forwards correctly.
+
+#### Other Changes
+
+- Compact per-row status signal (error, warning, unread, etc.) without a
+  dedicated status column: a colored status dot by default, or an icon when provided.
+- `getStatus(item)` maps a row to `{color, icon?, label?}`, or `null` for no
+  indicator. `color` accepts a semantic status name (`success`/`error`/`warning`/`accent`/`red`/`green`/etc.) mapped to a theme token, or a raw CSS color as an escape hatch.
+- `icon` renders the status as a shape signifier instead of the dot, which is
+  more accessible than color alone when multiple statuses coexist. `label` supplies the accessible name.
+- Memoize `getStatus` with `useCallback` for a stable plugin identity.
+
+#### Contributors
+
+Thanks to everyone who contributed to this release:
+
+- @AKnassa
+- @bhamodi
+- @cixzhang
+- @ejc3
+- @freddymeta
+- @HelloOjasMutreja
+- @humbertovirtudes
+- @josephfarina
+- @kentonquatman
+- @Kevinjohn
+- @saadpocalypse
+- @yyq1025
+
+---
+
 # 0.1.8
 
 #### Breaking Changes

package/dist/Avatar/Avatar.d.ts

@@ -1,6 +1,7 @@
 /**
  * @file Avatar.tsx
- * @input Uses React, HTMLAttributes, ReactNode, useState
+ * @input Uses React, HTMLAttributes, ReactNode, useState; useTooltip
+ *   (Tooltip hook) for the optional name-on-hover tooltip
  * @output Exports Avatar component, AvatarProps, AvatarSize types
  * @position Core implementation; consumed by index.ts
  *
@@ -70,6 +71,19 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
      * Typically used for status indicators or badges.
      */
     status?: ReactNode;
+    /**
+     * Tooltip shown on hover (and keyboard focus).
+     * - omitted / `true`: show the avatar's `name`
+     * - a string: show that text instead
+     * - `false`: no tooltip
+     *
+     * The avatar owns this tooltip. It is NOT auto-disabled when wrapped in your
+     * own Tooltip/HoverCard — set `tooltip={false}` if you provide your own
+     * overlay. No tooltip is shown if `tooltip` is `true`/omitted and there is
+     * no (non-whitespace) `name`.
+     * @default true
+     */
+    tooltip?: string | boolean;
 }
 /**
  * Avatar component for displaying user profile pictures.
@@ -82,9 +96,11 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
  * <Avatar src="/user.jpg" name="John Doe" />
  * <Avatar name="Jane Smith" size="xl" />
  * <Avatar src="/user.jpg" status={<OnlineIndicator />} />
+ * <Avatar name="jsmith" tooltip="Jane Smith, Staff Engineer" />
+ * <Avatar name="Jane" tooltip={false} />
  * ```
  */
-export declare function Avatar({ alt, 'data-testid': testId, fallbackSrc, name, size, src, status, xstyle, className, style, ref, ...props }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ alt, 'data-testid': testId, fallbackSrc, name, size, src, status, tooltip, xstyle, className, style, ref, ...props }: AvatarProps): import("react").JSX.Element;
 export declare namespace Avatar {
     var displayName: string;
 }

package/dist/Avatar/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsC5C;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAqFD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAsCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAwFb;yBArGe,MAAM"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAoB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AACxD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuC5C;;;;;;GAMG;AACH,KAAK,eAAe,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzD;;GAEG;AACH,KAAK,iBAAiB,GACpB,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEzE;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAE7D;;GAEG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgBpD;AAkGD,MAAM,WAAW,WAAY,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC5D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAsCD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,aAAa,EAAE,MAAM,EACrB,WAAW,EACX,IAAI,EACJ,IAAW,EACX,GAAG,EACH,MAAM,EACN,OAAc,EACd,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,WAAW,+BAqJb;yBAnKe,MAAM"}

package/dist/Avatar/Avatar.js

@@ -4,7 +4,8 @@
 
 /**
  * @file Avatar.tsx
- * @input Uses React, HTMLAttributes, ReactNode, useState
+ * @input Uses React, HTMLAttributes, ReactNode, useState; useTooltip
+ *   (Tooltip hook) for the optional name-on-hover tooltip
  * @output Exports Avatar component, AvatarProps, AvatarSize types
  * @position Core implementation; consumed by index.ts
  *
@@ -20,8 +21,9 @@ import "../theme/tokens.stylex.js";
 import { colorVars, typographyVars, fontWeightVars, radiusVars } from "../theme/tokens.stylex.js";
 import { AvatarSizeContext } from "./AvatarSizeContext.js";
 import { useAvatarGroup } from "../AvatarGroup/AvatarGroupContext.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { useTooltip } from "../Tooltip/useTooltip.js";
 
 /**
  * The offset ratio for positioning elements on a circle's edge at 45°.
@@ -35,7 +37,7 @@ import { themeProps } from "../utils/themeProps.js";
  *
  * This constant represents that ratio: (1 - 1/√2) / 2 ≈ 0.146
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const CIRCLE_EDGE_OFFSET_RATIO = (1 - 1 / Math.SQRT2) / 2;
 
 /**
@@ -122,6 +124,11 @@ const styles = {
   status: {
     kVAEAm: "x10l6tqk",
     $$css: true
+  },
+  focusable: {
+    kI3sdo: "x17nn4n9",
+    kInvED: "x1wfwxd8 x7s97pk",
+    $$css: true
   }
 };
 
@@ -229,6 +236,8 @@ function DefaultIcon({
  * <Avatar src="/user.jpg" name="John Doe" />
  * <Avatar name="Jane Smith" size="xl" />
  * <Avatar src="/user.jpg" status={<OnlineIndicator />} />
+ * <Avatar name="jsmith" tooltip="Jane Smith, Staff Engineer" />
+ * <Avatar name="Jane" tooltip={false} />
  * ```
  */
 export function Avatar({
@@ -239,6 +248,7 @@ export function Avatar({
   size = 'md',
   src,
   status,
+  tooltip = true,
   xstyle,
   className,
   style,
@@ -262,18 +272,54 @@ export function Avatar({
   const avatarGroup = useAvatarGroup();
   const resolvedSize = avatarGroup?.size ?? size;
   const numericSize = useMemo(() => resolveSize(resolvedSize), [resolvedSize]);
-  return /*#__PURE__*/_jsx(AvatarSizeContext, {
+
+  // Resolve the tooltip content:
+  // - `false`            → no tooltip
+  // - a string           → that string
+  // - `true` / omitted   → the `name` (a whitespace-only name yields nothing)
+  // Note: the *visible* tooltip prefers `name` (not `alt`); the *accessible
+  // name* on the root still uses `alt || name` above, independent of this.
+  const tooltipContent = tooltip === false ? undefined : typeof tooltip === 'string' ? tooltip : name;
+  const trimmedTooltip = tooltipContent?.trim();
+  const showTooltip = trimmedTooltip != null && trimmedTooltip !== '';
+  // Whether the tooltip text is a consumer-authored override (a custom string)
+  // rather than the default name. A custom description is worth wiring to
+  // `aria-describedby` (it adds information, matching Button); the default name
+  // tooltip is visual-only — its text duplicates the root `aria-label`, so
+  // describing it too would double-announce the same name (OQ-4).
+  const isCustomTooltip = typeof tooltip === 'string';
+
+  // Own the name tooltip via the Tooltip hook (the Button pattern), which
+  // returns `describedBy` as a value we choose whether to apply — the only way
+  // to satisfy the per-case aria-describedby rule (default name: none; custom
+  // string: describe) without editing Tooltip. `focusTrigger: 'auto'` shows the
+  // tooltip on keyboard focus once the root is made focusable (below).
+  const tooltipHook = useTooltip({
+    placement: 'above',
+    isEnabled: showTooltip
+  });
+  const rootRef = mergeRefs(ref, showTooltip ? tooltipHook.ref : undefined);
+  const describedByProp = showTooltip && isCustomTooltip ? {
+    'aria-describedby': [props['aria-describedby'], tooltipHook.describedBy].filter(Boolean).join(' ') || undefined
+  } : null;
+  const avatarElement = /*#__PURE__*/_jsx(AvatarSizeContext, {
     value: numericSize,
     children: /*#__PURE__*/_jsxs("div", {
       ...props,
-      ref: ref,
+      ref: rootRef,
       role: isDecorative ? 'presentation' : 'img',
       "aria-label": isDecorative ? undefined : accessibleName,
-      "aria-hidden": isDecorative || undefined,
+      "aria-hidden": isDecorative || undefined
+      // The root is a div[role="img"], not natively focusable. When a name
+      // tooltip is active, add a tab stop so keyboard users can reveal it
+      // (WCAG 1.4.13 / 2.1.1) — matching Timestamp/Button. Only while active.
+      ,
+      tabIndex: showTooltip ? 0 : undefined,
       "data-testid": testId,
+      ...describedByProp,
       ...mergeProps(themeProps('avatar', {
         size: resolvedSize
-      }), stylex.props(styles.wrapper, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style),
+      }), stylex.props(styles.wrapper, showTooltip && styles.focusable, avatarGroup && groupStyles.ring, avatarGroup && groupStyles.overlap, avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap), xstyle), className, style),
       children: [/*#__PURE__*/_jsxs("div", {
         ...stylex.props(styles.content, dynamicStyles.size(numericSize)),
         children: [showImage && /*#__PURE__*/_jsx("img", {
@@ -307,5 +353,15 @@ export function Avatar({
       })]
     })
   });
+  if (!showTooltip) {
+    return avatarElement;
+  }
+
+  // Render the tooltip as a sibling (no wrapper DOM) — the hook's ref is already
+  // attached to the root via `rootRef` above. `trimmedTooltip` is guaranteed
+  // non-empty here.
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [avatarElement, tooltipHook.renderTooltip(trimmedTooltip)]
+  });
 }
 Avatar.displayName = 'Avatar';

package/dist/Breadcrumbs/BreadcrumbItem.d.ts

@@ -1,9 +1,15 @@
 /**
  * @file BreadcrumbItem.tsx
- * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext
+ * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext,
+ *   and (for the menu trigger) usePopover + the shared DropdownMenu item API
+ *   (renderDropdownItems, DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
  * @output Exports BreadcrumbItem component and BreadcrumbItemProps
  * @position Individual breadcrumb item; used inside Breadcrumbs
  *
+ * A `menu` prop turns the item's link-styled button into a menu trigger whose
+ * popover reuses DropdownMenu's item pipeline — the same wiring ContextMenu
+ * uses — so menu-item definitions are portable across the menu family.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Breadcrumbs/Breadcrumbs.doc.mjs
  * - /packages/core/src/Breadcrumbs/Breadcrumbs.test.tsx
@@ -14,6 +20,8 @@
 import React, { type ReactNode, type MouseEvent } from 'react';
 import type { LinkComponentType } from '../Link/types';
 import type { BaseProps } from '../BaseProps';
+import { type DropdownMenuSize } from '../DropdownMenu/DropdownMenuContext';
+import type { DropdownMenuOption } from '../DropdownMenu/DropdownMenu';
 export interface BreadcrumbItemProps extends Omit<BaseProps<HTMLLIElement>, 'onClick'> {
     ref?: React.Ref<HTMLLIElement>;
     /**
@@ -44,6 +52,27 @@ export interface BreadcrumbItemProps extends Omit<BaseProps<HTMLLIElement>, 'onC
      * Optional icon rendered before the label.
      */
     startIcon?: ReactNode;
+    /**
+     * Menu opened when the item is activated. Accepts the SAME item API as
+     * DropdownMenu / MoreMenu / ContextMenu, so a consumer's existing menu-item
+     * definitions are portable into a breadcrumb with no rewrite:
+     * - a `DropdownMenuOption[]` data array (items, sections, dividers), or
+     * - composed `DropdownMenuItem` / `DropdownMenuCheckboxItem` /
+     *   `DropdownMenuRadioGroup` children.
+     *
+     * When set, the item renders as a link-styled menu trigger (button + a
+     * trailing chevron, `aria-haspopup="menu"` / `aria-expanded`) whose popover
+     * is a `role="menu"` container that provides `DropdownMenuContext` and runs
+     * `useListFocus`. Takes precedence over `href` / `onClick` (which are
+     * ignored when `menu` is set — a dev-time warning is logged).
+     */
+    menu?: DropdownMenuOption[] | ReactNode;
+    /**
+     * Size passed to the menu items via `DropdownMenuContext` (item
+     * padding/typography). Defaults from the breadcrumb variant:
+     * `'supporting'` → `'sm'`, otherwise `'md'`.
+     */
+    menuSize?: DropdownMenuSize;
 }
 /**
  * An individual breadcrumb item. Renders as a link (`<a>`) or a span
@@ -59,7 +88,7 @@ export interface BreadcrumbItemProps extends Omit<BaseProps<HTMLLIElement>, 'onC
  * <BreadcrumbItem isCurrent>My Project</BreadcrumbItem>
  * ```
  */
-export declare function BreadcrumbItem({ ref, as, children, href, onClick, isCurrent: isCurrentProp, startIcon, xstyle, className, style, 'data-testid': testId, ...rest }: BreadcrumbItemProps): React.JSX.Element;
+export declare function BreadcrumbItem({ ref, as, children, href, onClick, isCurrent: isCurrentProp, startIcon, menu, menuSize, xstyle, className, style, 'data-testid': testId, ...rest }: BreadcrumbItemProps): React.JSX.Element;
 export declare namespace BreadcrumbItem {
     var displayName: string;
 }

package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAIZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAO5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAoFD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAuJrB;yBApKe,cAAc"}
+{"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAUf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAK7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAMrE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AA8GD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAoMrB;yBAnNe,cAAc"}

package/dist/Breadcrumbs/BreadcrumbItem.js

@@ -4,10 +4,16 @@
 
 /**
  * @file BreadcrumbItem.tsx
- * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext
+ * @input Uses React use/useRef/useEffect, stylex, theme tokens, BreadcrumbContext,
+ *   and (for the menu trigger) usePopover + the shared DropdownMenu item API
+ *   (renderDropdownItems, DropdownMenuContext, MENU_ITEM_SELECTOR, useListFocus)
  * @output Exports BreadcrumbItem component and BreadcrumbItemProps
  * @position Individual breadcrumb item; used inside Breadcrumbs
  *
+ * A `menu` prop turns the item's link-styled button into a menu trigger whose
+ * popover reuses DropdownMenu's item pipeline — the same wiring ContextMenu
+ * uses — so menu-item definitions are portable across the menu family.
+ *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Breadcrumbs/Breadcrumbs.doc.mjs
  * - /packages/core/src/Breadcrumbs/Breadcrumbs.test.tsx
@@ -15,14 +21,22 @@
  * - /apps/storybook/stories/Breadcrumbs.stories.tsx
  * - /packages/cli/templates/blocks/components/Breadcrumbs/ (showcase blocks)
  */
-import React, { use, useRef, useEffect } from 'react';
+import React, { use, useCallback, useId, useMemo, useRef, useEffect } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
-import { colorVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, typeScaleVars, radiusVars } from "../theme/tokens.stylex.js";
 import { BreadcrumbContext } from "./Breadcrumbs.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
+import { getIcon } from "../Icon/globalIconRegistry.js";
+import { usePopover } from "../Popover/usePopover.js";
+import { useListFocus } from "../hooks/useListFocus.js";
+import { useTypeahead } from "../hooks/useTypeahead.js";
+import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
+import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
+import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
+import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR } from "../DropdownMenu/menuItemRoles.js";
 
 // =============================================================================
 // Props
@@ -52,6 +66,13 @@ const itemStyles = {
     $$css: true
   }
 };
+const menuStyles = {
+  popover: {
+    k7Eaqz: "x5w4yej",
+    kqGvvJ: "xsq74q5",
+    $$css: true
+  }
+};
 
 // =============================================================================
 // Component
@@ -79,6 +100,8 @@ export function BreadcrumbItem({
   onClick,
   isCurrent: isCurrentProp,
   startIcon,
+  menu,
+  menuSize,
   xstyle,
   className,
   style,
@@ -95,6 +118,21 @@ export function BreadcrumbItem({
   const contentRef = useRef(null);
   const isCurrent = isCurrentProp === true;
   const isAutoCandidate = isCurrentProp == null;
+  const hasMenu = menu != null;
+  const resolvedMenuSize = menuSize ?? (isSupporting ? 'sm' : 'md');
+
+  // `menu` owns the click interaction; a label can't both navigate/act and
+  // open a menu on the same activation. Warn once so the (ignored) href/onClick
+  // don't silently disappear on the consumer.
+  useEffect(() => {
+    if (process.env.NODE_ENV !== 'production' && hasMenu) {
+      if (href != null) {
+        console.warn('BreadcrumbItem: `menu` and `href` are mutually exclusive; `menu` ' + 'takes precedence and `href` is ignored.');
+      } else if (onClick != null) {
+        console.warn('BreadcrumbItem: `menu` and `onClick` are mutually exclusive; ' + '`menu` takes precedence and `onClick` is ignored.');
+      }
+    }
+  }, [hasMenu, href, onClick]);
 
   // Auto-detect: if no sibling has aria-current="page" and this is the last
   // non-separator item, set aria-current on our content element.
@@ -152,7 +190,19 @@ export function BreadcrumbItem({
           className: "x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o"
         },
         children: ctx.separator
-      }), /*#__PURE__*/_jsx("span", {
+      }), hasMenu ?
+      /*#__PURE__*/
+      // A current crumb can also open a sibling menu — the trigger keeps
+      // both aria-current="page" and aria-haspopup="menu".
+      _jsx(BreadcrumbMenuTrigger, {
+        ref: contentRef,
+        menu: menu,
+        menuSize: resolvedMenuSize,
+        isSupporting: isSupporting,
+        isCurrent: true,
+        label: children,
+        children: content
+      }) : /*#__PURE__*/_jsx("span", {
         ...{
           0: {
             className: "x78zum5 x6s0dn4 xzye2dw x1pd3egz x1tgivj0"
@@ -180,7 +230,14 @@ export function BreadcrumbItem({
         className: "x11ke7fs x6s0dn4 xv1l7n4 xu0wf1k x87ps6o"
       },
       children: ctx.separator
-    }), href != null ? /*#__PURE__*/_jsx(LinkComponent, {
+    }), hasMenu ? /*#__PURE__*/_jsx(BreadcrumbMenuTrigger, {
+      ref: contentRef,
+      menu: menu,
+      menuSize: resolvedMenuSize,
+      isSupporting: isSupporting,
+      label: children,
+      children: content
+    }) : href != null ? /*#__PURE__*/_jsx(LinkComponent, {
       ref: contentRef,
       href: href,
       onClick: onClick,
@@ -220,4 +277,149 @@ export function BreadcrumbItem({
     })]
   });
 }
-BreadcrumbItem.displayName = 'BreadcrumbItem';
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+// =============================================================================
+// Menu trigger
+// =============================================================================
+
+/**
+ * The link-styled `<button>` trigger + its `role="menu"` popover. Reuses the
+ * DropdownMenu item pipeline (`renderDropdownItems` for arrays, the item
+ * components for children) inside a `useListFocus` container that provides
+ * `DropdownMenuContext` — the same wiring ContextMenu uses — so menu-item
+ * definitions are portable into a breadcrumb with no rewrite.
+ */
+function BreadcrumbMenuTrigger({
+  ref,
+  children,
+  label,
+  menu,
+  menuSize,
+  isSupporting,
+  isCurrent = false
+}) {
+  const menuId = useId();
+  const buttonRef = useRef(null);
+  const popover = usePopover({
+    onHide: useCallback(() => {
+      buttonRef.current?.focus();
+    }, []),
+    hasLightDismiss: true,
+    hasCloseButton: false,
+    hasAutoFocus: false,
+    // The popup's own role="menu" is the exposed semantics; a modal dialog
+    // wrapper would announce an unnamed dialog around the menu.
+    role: 'none'
+  });
+  const closeMenu = useCallback(() => {
+    popover.hide();
+  }, [popover]);
+  const {
+    listRef,
+    handleKeyDown: listNavKeyDown,
+    focusFirst,
+    focusItem
+  } = useListFocus({
+    itemSelector: MENU_ITEM_SELECTOR,
+    wrap: false,
+    onEscape: closeMenu
+  });
+  const getMenuItems = useCallback(() => listRef.current ? Array.from(listRef.current.querySelectorAll(MENU_ITEM_SELECTOR)) : [], [listRef]);
+  const typeahead = useTypeahead({
+    getItemLabels: () => getMenuItems().map(el => el.textContent),
+    onMatch: focusItem,
+    getCurrentIndex: () => getMenuItems().findIndex(el => el === document.activeElement || el.contains(document.activeElement))
+  });
+  const listKeyDown = useCallback(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const focused = document.activeElement;
+      if (focused && MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')) {
+        focused.click();
+      }
+      return;
+    }
+    // APG menu-button pattern: Tab closes the menu (items are tabIndex={-1}).
+    if (e.key === 'Tab') {
+      closeMenu();
+      return;
+    }
+    if (typeahead.onKeyDown(e)) {
+      e.preventDefault();
+      return;
+    }
+    listNavKeyDown(e);
+  }, [listNavKeyDown, closeMenu, typeahead]);
+  const openAndFocus = useCallback(() => {
+    popover.show();
+    requestAnimationFrame(() => focusFirst());
+  }, [popover, focusFirst]);
+  const handleClick = useCallback(() => {
+    if (popover.isOpen) {
+      popover.hide();
+    } else {
+      openAndFocus();
+    }
+  }, [popover, openAndFocus]);
+  const handleKeyDown = useCallback(e => {
+    if (!popover.isOpen) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        openAndFocus();
+      }
+    }
+  }, [popover.isOpen, openAndFocus]);
+  const contextValue = useMemo(() => ({
+    closeMenu,
+    menuSize
+  }), [closeMenu, menuSize]);
+  const menuContent = Array.isArray(menu) ? renderDropdownItems(menu) : menu;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("button", {
+      ref: mergeRefs(ref, buttonRef, popover.triggerRef),
+      type: "button",
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...mergeProps(themeProps('breadcrumb-item-menu-trigger'), {
+        ...popover.triggerProps,
+        'aria-haspopup': 'menu',
+        'aria-controls': menuId,
+        'aria-current': isCurrent ? 'page' : undefined
+      }),
+      ...{
+        0: {
+          className: "x78zum5 x6s0dn4 xzye2dw xu0wf1k x1hl2dhg x4ohgrr x1ypdohk x1717udv x1ghz6dp xln7xf2 xv1l7n4"
+        },
+        1: {
+          className: "x78zum5 x6s0dn4 xzye2dw xu0wf1k x1hl2dhg x4ohgrr x1ypdohk x1717udv x1ghz6dp xln7xf2 xv1l7n4"
+        }
+      }[!!isSupporting << 0],
+      children: [children, /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        ...{
+          className: "x78zum5 x6s0dn4 x2lah0s x141an7d"
+        },
+        children: getIcon('chevronDown')
+      })]
+    }), popover.render(/*#__PURE__*/_jsx("div", {
+      ref: listRef,
+      id: menuId,
+      role: "menu",
+      "aria-label": typeof label === 'string' ? label : undefined,
+      onKeyDown: listKeyDown,
+      ...mergeProps(themeProps('breadcrumb-menu'), {
+        className: "x9f619 x78zum5 xdt5ytf x1lsbc85 xuyqlj2 x1odjw0f x1fcsqxe xgory14 x9epnlk x1n97fys x87ps6o"
+      }),
+      children: /*#__PURE__*/_jsx(DropdownMenuContext, {
+        value: contextValue,
+        children: menuContent
+      })
+    }), {
+      placement: 'below',
+      alignment: 'start',
+      xstyle: [menuStyles.popover, layerAnimations.below]
+    })]
+  });
+}
+BreadcrumbMenuTrigger.displayName = 'BreadcrumbMenuTrigger';

package/dist/Breadcrumbs/index.d.ts

@@ -5,4 +5,9 @@ export { Breadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps, BreadcrumbsVariant, BreadcrumbsVariantMap, } from './Breadcrumbs';
 export { BreadcrumbItem } from './BreadcrumbItem';
 export type { BreadcrumbItemProps } from './BreadcrumbItem';
+export { DropdownMenuItem as BreadcrumbMenuItem, type DropdownMenuItemProps as BreadcrumbMenuItemProps, } from '../DropdownMenu/DropdownMenuItem';
+export { DropdownMenuCheckboxItem as BreadcrumbMenuCheckboxItem, type DropdownMenuCheckboxItemProps as BreadcrumbMenuCheckboxItemProps, } from '../DropdownMenu/DropdownMenuCheckboxItem';
+export { DropdownMenuRadioGroup as BreadcrumbMenuRadioGroup, type DropdownMenuRadioGroupProps as BreadcrumbMenuRadioGroupProps, } from '../DropdownMenu/DropdownMenuRadioGroup';
+export { DropdownMenuRadioItem as BreadcrumbMenuRadioItem, type DropdownMenuRadioItemProps as BreadcrumbMenuRadioItemProps, } from '../DropdownMenu/DropdownMenuRadioItem';
+export type { DropdownMenuOption as BreadcrumbMenuOption, DropdownMenuItemData as BreadcrumbMenuItemData, DropdownMenuDivider as BreadcrumbMenuDivider, DropdownMenuSection as BreadcrumbMenuSection, } from '../DropdownMenu/DropdownMenu';
 //# sourceMappingURL=index.d.ts.map